프로젝트27

• [React] Zustand의 persist 프론트 페이지에서 새로고침이 되어도 값이 변경되지 않아야 하는 전역 정보를 다룰 때에는 어떻게 하면 좋을까?예를 들어, 로그인의 경우 accessToken의 수명이 다할 때까지 어딘가에 반드시 저장이 되어 있어야 한다. 이를 위해, Zustand의 persist를 사용해 보았다.     Zustand 의 Persist란?persist 미들웨어는 Zustand를 사용하여 스토어의 상태를 로컬 스토리지(localStorage) 또는 다른 저장소에 유지(persist)하기 위해 사용된다. 이 미들웨어는 Zustand 상태를 지정된 저장소에 저장하고, 애플리케이션 초기화 시 저장된 상태를 복원한다. persist의 사용 방식 persist는 두 가지 주요 매개변수를 받는다:config: Zustand 상태와 상.. 프로젝트/React 프론트 프로젝트 2024. 11. 27.

• [React] 값이 없는 상태를 어떻게 관리해야 할까? undefined와 null 개발을 하다 보면, 필연적으로 '값이 없는 상태' 를 관리해야 하는 경우가 생긴다. 이 때, undefined를 쓰는 게 좋을까, null을 쓰는 게 좋을까?   먼저, undefined와 null에 대해 알아보자. undefined와 null의 차이undefined변수가 선언되었지만 초기화되지 않은 상태.값이 아예 없음을 나타냄.타입스크립트에서 Optional 속성(?)의 기본 상태.null의도적으로 "값이 없음"을 명시.값이 존재하지 않음을 프로그래머가 명시적으로 설정한 상태.  아하, 그러니까 undefined는 '변수가 선언되기만 한 상태' 이고, null은 '값이 없다는 것을 넣어준 상태' 이다. 즉 undefined는 '데이터의 상태를 초기화하지 않은 상태(어떠한 값도 넣지 않은 채)로 남겨두.. 프로젝트/React 프론트 프로젝트 2024. 11. 27.

• 

  [React] Zustand를 이용하여 useModal 훅 만들기 외주 프로젝트 중 여러 알림을 쌓으면서 관리해야 하는 Alert, 한 번에 하나만 띄워져야 하는 Modal을 useModal이라는 하나의 훅을 이용해 관리하기 위해 작성해 보았다. 코드의 흐름 설명 모달 상태 관리(useModalStore)useModalStore는 Zustand를 사용해 모달의 상태를 관리하며, stack 옵션에 따라 모달의 관리 방식을 조정합니다.modals: 현재 열려 있는 모달의 배열입니다.open: 특정 컴포넌트를 모달로 열고, 관련 데이터를 상태에 추가합니다.stack: true: modals 배열에 새로운 모달을 추가합니다.stack: false: 기존 모달이 없을 때만 추가. 기존 모달이 있다면 **"모달을 추가할 수 없습니다"**라는 메시지를 console에 출력합니다.c.. 프로젝트/React 프론트 프로젝트 2024. 11. 27.

• 

  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.