프로젝트24

• 

  5-4. [React + Express + MongoDB] Perfect Boiler - 회원정보 수정 및 비밀번호 변경 우선은 로컬로 직접 회원가입을 진행한 회원일 경우에만 회원정보를 수정할 수 있도록 구현하였다. 추후 sns 로그인 유저는 이메일만 수정할 수 있도록 구현할 예정. aws 요금 이슈가 발생해서 프로필 사진은 aws가 아닌 다른 루트를 찾아봐야 할 것 같다 ㅠㅠ ............................................................................................................. 다 울었으니 할 일을 해야지 일단 이메일과 닉네임을 변경하는 회원정보 수정 로직을 구현하고, 다른 페이지에서 비밀번호를 변경하는 내용을 구현하여 배포까지 완료했다. 저번에 했던 거라서 금방 슉 진행했다. 이메일 인증 라우터는 회원가입 시 구현했던 미들웨어와.. 프로젝트/풀스택 프로젝트 2023. 2. 1.

• 

  5-3. [React + Express + MongoDB] Perfect Boiler - SNS 로그인 : passport 를 이용한 카카오, 구글, 네이버, 로그인과 JWT RefreshToken, AccessToken 사용하기 passport-kakao를 사용하면 카카오 전략을 구현하여, 카카오 로그인을 할 수 있다. passport-kakao는 내부적으로 session에 생성된 req.login을 호출하는데, 자동으로 호출되는 req.login은 passport의 기존 session 방식을 사용하기 때문에, 내가 직접 구현한 JWT 로직을 사용할 수 없었다. 이 때문인지 세상 모든 블로그에 세션을 이용한 로그인만 있길래 모험삼아 처음부터 직접 구현해보았다. req.login을 직접 호출하고 세션을 사용하지 않음을 설정한 뒤에, req.login을 로컬 로그인처럼 직접 커스텀하면 passport-kakao를 사용하더라도 세션을 사용하지 않고 JWT와 쿠키를 이용한 로그인을 구현할 수 있다. passport-kakao 를 포함한.. 프로젝트/풀스택 프로젝트 2023. 1. 27.

• 

  5-2. [React + Express + MongoDB] Perfect Boiler - passport 로컬 로그인과 JWT RefreshToken, AccessToken 발급하고 유저 인증하기 + 로그아웃 구글, 카카오, 네이버 로그인 구현을 편하게 해보기 위해 passport 라이브러리를 사용하였다. 그러나 passport 라이브러리는 기본적으로 Serialize, Deserialize를 통해 세션에 유저의 정보를 저장한다. 내가 배포하는 환경은 아주 작은 무료 서버이고, 서버의 메모리를 사용하는 세션을 사용하는 일은 줄이고 싶어서 쿠키를 이용하는 JWT로 바꾸어 보았다. 도중에 passport-jwt를 이용하다가, 안그래도 라이브러리를 많이 사용하고 있는데 라이브러리 의존성이 너무 높아지는 것 같기도 하고, 그래봤자 jwt 전략을 하나 더 만들게 해줄 뿐이라 코드가 더 복잡해지는 느낌이 들어 바닐라로 리프레시 토큰과 엑세스 토큰을 인증하고 재발급하는 미들웨어를 구현했다. 소요 기간 - 1일 Fronte.. 프로젝트/풀스택 프로젝트 2023. 1. 24.

• 

  5-1. [React + Express + MongoDB] Perfect Boiler 유지보수 => 로딩창 만들기 + alert창 모달창으로 바꾸기 인증메일 구현을 완성하고 보니, 노드메일러를 통해 메일이 발송되기까지 약 5~10초정도의 딜레이가 걸리는 사실을 알게 되었다. 따라서 로딩 상태를 만들어주고, loading State가 true일 경우에 로딩창을 띄운 뒤 완성되면 사라지도록 하기 위해 loading 스테이트를 추가해 주었다. const [loading, setLoading] = useState(false); 그리고 못생긴 alert창을 바꿔주기 위해 모달을 새로 디자인했다. props를 통해 메세지를 전달받아, 그때그때 재사용 할 수 있도록 만들었다. import React, { useState, useEffect } from "react"; import Button from "react-bootstrap/Button"; import M.. 프로젝트/풀스택 프로젝트 2023. 1. 21.

• 

  [cloudType] Boiler - 클라우드 타입에서 React 프런트와 Express 백엔드 배포하고, 연결하기 EB_썼으면_압축만_450번함 aws는 안정성이 뛰어나고 효율적인 관리가 가능한데다 유명하지만, 나같은 프리티어 개발자에게는 언제 과금의 위험이 생길지 모른다는 크나큰 두려움이 있다. 배포 자동화를 해도 되는데 그럼 과금당할 여지가 너무 커짐.. 그렇다고 백엔드를 수정할 때마다 압축파일을 업로드하자니 너무 번거롭다. 예전에는 이런 과정을 해결해주는 헤로쿠를 통해 배포가 가능했지만, 프리티어 서비스를 종료한 헤로쿠로는 더이상 백엔드를 무료로 배포할 수 없다. 헤로쿠의 차세대로 요즘은 Fly.io 를 많이 선택하는 것 같았는데, 찾아보니 국내에! 일정 용량의 무료 배포를 지원하는 클라우드 서비스가 있다고 해서 한번 사용해 보기로 했다. 깃허브 연결도 되고, 깃허브 액션을 통해 배포 자동화도 할 수 있다고 한.. 프로젝트/배포일기 2023. 1. 21.

• 

  5. [React + Express + MongoDB] Perfect Boiler - 이메일 인증을 하는 로컬(자체 로직) 회원가입 구현 이번에는 제대로된 ! 보일러 플레이트를 만들기 위해, 이메일 인증을 하는 자체 회원가입 로직을 작성하였다. 저번 코드를 요모조모 뜯어보니 엉망진창 . . 인 것 같아서, 해당 프로젝트를 보완할 겸 새 프로젝트를 만들어 시작했다. 이번 글에서 약간 수정하기는 했지만, 프런트엔드는 먼저 완성하였다 : https://make-somthing.tistory.com/84 이 과정을 진행하면 굳이 게시판을 만들지 않아도, 회원가입 하나만으로 CRUD를 한번에 경험할 수 있다. 임시 데이터를 생성했다가 수정했다가 지웠다가 읽었다가 해야하기 때문이다... * express와 mongodb를 사용하는 글이기 때문에, express와 몽고db 연결이 되어있다고 가정하고 진행합니다. 소요 기간 - 1일 Frontend - .. 프로젝트/풀스택 프로젝트 2023. 1. 20.

• 

  [React] 보일러 프로젝트 - 프론트 완성 , + (01.20 회원가입 백엔드까지 완성) My Boiler Project 프론트엔드 완성 : 소요기간 : 1.5일 기획 및 디자인 : https://make-somthing.tistory.com/83 Demo : https://web-boiler-frontend-1jx7m2gld43p7bv.gksl2.cloudtype.app/ CHALIE BOILER web-boiler-frontend-1jx7m2gld43p7bv.gksl2.cloudtype.app 사용 언어와 기술, 라이브러리 및 DB Frontend - React, Figma (useNavigator, useState, React-Router-Dom@6, useRef, SCSS(node-sass 라이브러리)) 배포 - Cloudtype 프로젝트 제작 계기 passport, react-que.. 프로젝트/React 프론트 프로젝트 2023. 1. 19.

• 

  [프로젝트 기획 - 풀스택] 회원가입, 로그인, 이메일 인증, 회원 정보 수정 보일러 플레이트 UI 디자인 보일러 플레이트 - 풀스택 프로젝트 express의 passport 라이브러리를 사용하고, React의 redux와 JWT의 refresh Token을 사용해 네이버, 구글, 카카오 로그인이 포함된 더 완벽한 보일러 플레이트를 만들고자 UI를 디자인하였다. 모바일 페이지에서는 화면이 모바일 비율에 맞게 보이도록, 웹앱 디자인으로 구성하였다. 사용할 툴 Frontend - React Backend - Node.js Express DB - MongoDB 와 MySql Figma 와이어프레임 회원가입, 로그인, 아이디/비밀번호 찾기, 회원 정보 수정, 비밀번호 수정, 회원 탈퇴 기능을 제공한다. 프로토타입 https://www.figma.com/file/7kRAyMDHczs7AFVh5tuHXP/%EB%B3%B.. 프로젝트/프로젝트 기획 2023. 1. 17.

• 

  [React] My Portfolio React 프로젝트 My Portfolio React 프로젝트 소요 기간 : 3일 Figma 기획 : https://make-somthing.tistory.com/77 Github: https://github.com/chalinuna/myweb Demo: https://main--bright-mochi-309946.netlify.app/ 사용 언어와 기술, 라이브러리 및 DB Frontend - React (useNavigator, useState, React-Router-Dom@6, styled-components, SCSS(node-sass 라이브러리)) Unsplash Open api 배포 - Netlify 프로젝트 제작 계기 내 프로젝트와 간단한 이력서, 자기소개를 한꺼번에 보여줄 수 있는 포트폴리오 정리 페이지가 .. 프로젝트/React 프론트 프로젝트 2023. 1. 14.

• 

  [프로젝트 기획 - React] 포트폴리오 소개 Figma 프로토타입 포트폴리오 소개 웹 - 프론트 프로젝트 좀 더 깔끔하게 이력서 형식의 포트폴리오가 필요하다고 생각해, 새로 웹 프로젝트를 구상하게 되었다. React를 이용한 정적 페이지로 구상할 것이며 모바일과 여러 브러우저에서 볼 수 있게 반응형을 고려하여 디자인하였다. 사용할 툴 Frontend - React (antd, react-bootstrap, react-router-dom@6, styled-component ... ) Figma 와이어프레임 메인 페이지, 보유 스킬을 정리한 페이지, 프로젝트 모아보기, 간단한 학력 및 자격사항 보기와 이력서를 제공한다. 프로토타입 Demo : https://www.figma.com/proto/YSRBnB0dqFIWAVLQpXe0nm/Untitled?node-id=0%3A1.. 프로젝트/프로젝트 기획 2023. 1. 12.

• 

  [React] React SPA - Slide Template + 반응형 Nav menu React SPA - Slide Template 슬라이드 형태 리액트 SPA 템플릿 무료 배포 Github : https://github.com/chalinuna/slide-template Demo : https://lambent-lily-149f31.netlify.app/ React App lambent-lily-149f31.netlify.app Preview 제작기간 : 2일 배포 : netlify 제작 언어 및 프레임워크 : React.js 상단 고정되어있는 Navbar와, 세로 슬라이드 형식으로 페이지를 이동할 수 있는 SPA 템플릿. 친구에게서 '상단에 메뉴가 고정되어있고, 메뉴를 누르면 슬라이드 형식으로 미끄러져 내려가듯이 페이지를 이동할 수 있는 템플릿을 만들어달라' 고 요청을 받아 간단히 .. 프로젝트/React 프론트 프로젝트 2023. 1. 11.

• 

  [프로젝트 기획 - 풀스택] 포트폴리오 소개 Figma 프로토타입과 ERD 포트폴리오 소개 웹 - 풀스택 프로젝트 블로그는 토이 프로젝트들을 자세히 소개하는 공간으로 사용하고, 간단히 프로젝트들을 미리보기하며 바로 호스팅 페이지로 이동할 수 있는 포트폴리오 전용 웹 프로젝트를 제작하려 한다. 이를 위해 사용할 툴을 정리하고, 피그마로 와이어프레임을 만들었다. 또한 Figma에서 제공해주는 미리보기 툴을 사용해 프로토타입 링크를 제작하였다. 사용할 툴 Frontend - React Backend - Node.js Exrpess DB - MongoDB Server - AWS S3(이미지 호스팅) , 배포는 AWS EC2 또는 Cloud type 이용 예정 Figma 와이어프레임 회원가입, 로그인, 방명록 작성 및 수정, 삭제, 방명록 리스트 보기, 관리자가 업로드한 프로젝트 캐로셀.. 프로젝트/프로젝트 기획 2022. 12. 29.