서버와 클라이언트가 다른 도메인에서 작동하면서 발생하는 크로스 도메인 이슈는 많은 웹 개발자들이 고민하게 만드는 문제 중 하나이다. 이번에는 프로젝트를 진행하면서 발생한 크로스 도메인 이슈 중에서 CORS(Cross-Origin Resource Sharing) 문제를

사용자 인증 기능을 구현하면서 가장 고민했던 문제 중 하나는, 프론트엔드에서 페이지를 새로고침하였을 때 로그인 상태가 유지되지 않는 이슈였다. 세션을 이용해 서버에서는 로그인과 로그아웃이 정상적으로 이루어졌지만, 프론트엔드에서는 새로고침을 하면 사용자의 로그인 상태가

이 프로젝트에서 회원가입이 성공적으로 완료되었다면 사용자가 자신의 프로필 이미지를 업로드 할 수 있다. 이를 구현하기 위해, Node.js 환경에서 파일 업로드를 다루는 데 매우 유용한 라이브러리인 Multer를 사용해 보자.Multer는 multipart/form-

이제 사용자가 회원가입을 완료하고 자신의 계정으로 로그인할 수 있도록 로그인 시스템을 구현해보자. 로그인 시스템은 회원가입 시스템과 밀접하게 연결되어 있다. 왜냐하면 사용자가 입력한 로그인 정보를 데이터베이스의 회원 정보와 비교하여, 그 정보가 유효한지 확인해야하기 때

지난 포스팅에서는 로그인과 회원가입 시스템이 왜 필요한지, 그리고 이메일 기반 인증이 어떤 것인지 알아보았다. 이번에는 실제로 이 회원가입 시스템을 어떻게 구현하는지 알아보자.사용자가 웹페이지에서 이메일 주소와 비밀번호, 그리고 필요한 다른 정보들을 입력하고 '회원가

지난 포스팅에서는 useState로 상태관리를 통해 유효성검사를 진행하고 유효성 검사를 통과하지 못하면 각 입력창 하단에 에러 메시지를 출력하는 부분을 작성하였다. 하지만 이메일과 비밀번호를 사용하여 실제로 로그인 요청을 처리하는 부분이 구현되어 있지 않았다.따라서 이

이제 프로젝트의 회원가입과 로그인의 프론트엔드 파트가 어느정도 마무리 되었기 때문에 데이터베이스를 통해서 사용자의 정보를 저장할 필요가 있다. 따라서 이번에는 데이터베이스를 설계하는 방법에 대해서 알아보자 데이터베이스를 설계하는 과정은 크게 다음과 같다.요구 분석: 개

기존의 프로젝트에서는 Redux API로 상태를 관리하였다. 하지만 전역 상태관리를 해야할 대상이 점점 증가하면서 Redux API로 모든 전역 상태를 관리하면 복잡성이 크게 증가할 것 같았다. 따라서 Redux의 공식적인 추상화 레이어인Redux ToolKit을 통해

Next.js는 기본적으로 서버 사이드 렌더링(SSR)을 지원하는데, 이는 초기 페이지 로딩 속도를 향상시키고, SEO 최적화를 돕는 등 여러 가지 장점이 있다.하지만 이러한 장점들과 함께 문제점도 발생하는데, 기존의 프로젝트에서는 window나 document와 같은

이전 포스팅에 프로젝트를 진행하면서 Next.js를 도입하게된 이유에 대해서 설명하였다. Next.js는 서버 사이드 렌더링(SSR)을 지원하여 초기 페이지 로딩 속도를 향상시키고, SEO에 유리한 구조를 제공하는 등 많은 장점을 갖춘 프레임워크이다.하지만, Next.

기존의 React 프로젝트에 Next.js 프레임워크를 도입하였다. 이 글에서는 그 도입 과정과 Next.js를 선택한 이유에 대해서 알아보자.Next.js는 서버 사이드 렌더링(SSR)을 지원하는 React 프레임워크이다. 초기 페이지 로딩 시간을 줄이고, 검색 엔진

이메일 로그인을 구현했으니 이제 카카오 로그인을 구현해보자. 카카오 로그인 구현단계는 다음과 같다.Kakao Developer 사이트 가입 및 앱 생성먼저, Kakao Developer 사이트에 가입: https://developers.kakao.com/로그인

지금까지 로그인 모달창을 Redux를 사용하여 전역 상태관리 하였다. 이번에는 useState를 활용하여 이메일 로그인을 구현해 보자. 이메일 로그인 로직은 다음과 같다.사용자가 이메일 주소와 비밀번호를 입력한다.입력 값이 변경될 때마다, handleChangeEmai

기존의 모달과 오버레이를 보면 app이라는 선택자를 가진 div태그 내부에 footer 컴포넌트 하단에 모달과 오버레이가 존재했다. 하지만 모달과 오버레이는 footer 하단에 존재하는 컴포넌트가 아니기 때문에 의미론적인 코드라고 볼 수 없다. React Portals

이번에는 children prop을 활용하여 React 프로젝트에서 공통 모달 컴포넌트를 분리하고 각각의 컴포넌트를 합성해보자.기존에는 서로 다른 두 개의 모달 컴포넌트, LoginModal과 SignupModal 가 각각 모달에 대한 로직 및 스타일을 내부에 정의하

Redux를 통해서 로그인 모달창을 상태관리 하기전에 상태관리에 대해서 먼저 알아보자.어플리케이션에서 상태란, 사용자의 입력, 시스템의 이벤트 등의 외부적인 요소로 인해 변화되는 값들을 말한다. 상태관리는 이러한 값을 저장하고, 관리하며, 이러한 값이 변화될 때마다 어

오늘은 프로젝트에서 스타일링 작업을 진행하면서 Sass에서 Styled-components로 전환한 이유에 대해서 알아보자.Sass에서는 클래스명이나 ID명 등의 선택자를 사용하여 스타일을 적용하므로, 불필요한 중첩과 복잡도가 높아지는 단점이 있었다. 프로젝트 규모가

옵저버 패턴과 프록시는 서로 다른 패턴이지만, 종종 같이 사용되기도 한다. 프록시는 객체의 동작을 제어하거나 객체에 접근할 때 추가적인 동작을 수행하기 위해 사용되고, 옵저버 패턴은 객체의 상태 변화를 감지하고 상태 변화에 따른 추가적인 동작을 수행하기 위해 사용된다.

해당 프로젝트에서는 mermaid로 flow chart를 작성하기로 하였다. 그 이유는 meramaid의 간단하고 직관적인 문법을 바탕으로 쉽게 작성할 수 있고 그림으로서 시각적인 효과를 가지고 있어서 프로젝트가 어떤 흐름으로 구성되는지 한눈에 파악할 수 있기 때문이다

변경전변경후위 코드에서 Router.js 파일에서 이미 Router 객체를 export하고 있으므로, App.js에서 다시 import하는 것은 불필요한 작업이다.이 작업을 수행하면, Router.js 파일에서 이미 만들어진 Router 객체를 다시 만들게 되어 메모리