REACT3 [NextJS] NextJS, PassportJS, Redis를 이용한 로컬 인증 (ft. serializeUser와 deserializeUser) 기본 플로우 로그인 버튼을 누르면, Next의 API로 사용자 정보를 확인하는 POST 요청을 보냅니다. 이 과정 중에서 로그인 요청이 적절하다면 PassportJS는 세션을 생성합니다. 사용자가 마주하는 프론트엔드에서는 쿠키의 형태로 저장되고, 서버사이드에서는 메모리에 저장되거나, Redis같은 스토리지에 저장됩니다. 프론트엔드에 저장된 쿠키는 서버로 요청할 때마다 요청에 포함되어 서버는 쿠키에 저장된 세션을 특정하는 관련 정보를 확인하여 실제 세션을 저장해놓은 메모리나 Redis에서 세션에 저장된 정보를 가져와 요청(request)과 함께 처리합니다. 프로젝트 준비 시작하기전에 "npx create-next-app { 앱 혹은 프로젝트 명 }" 명령어를 통해 최신의 NextJS 소스코드가 반영된 프로.. 2021. 2. 15. [NextJS] 마크다운으로 글 작성하는 방법 NextJS로 웹 사이트를 제작하여 운영하다 보면 단순한 글을 작성하기에는 html로 작성하는 것은 상당히 부담스러운 부분이 존재합니다. 템플릿 같은 틀이 정해져 있고 단순히 그 안에 콘텐츠만 많이 변경되는 형태라면 markdown을 이용하여 글을 작성하고 작성한 글을 템플릿에 맞게 렌더링해 콘텐츠를 보여주는 것이 더 좋은 방법일 수 있습니다. 이번 포스팅에서는 NextJS에서 markdown으로 작성한 콘텐츠를 보여주는 방법을 공유하도록 하겠습니다. 우선적으로 필요한 패키지를 설치하도록 합니다. command 혹은 terminal $ npm install --save raw-loader $ npm install --save react-markdown // npm을 이용하시면 위의 코드로 // yarn을.. 2020. 5. 11. Next JS 프로젝트에 Google Analytics 적용하는 방법 React기반의 Next JS 프로젝트에 익숙하지 않으신 분이라면 프로젝트에서 Google Analytics 코드 적용하는 것이 번거로울 수 있습니다. 이를 손쉽게 도와주는 react-ga라이브러리를 이용하여 프로젝트에 Google Analytics 코드를 적용하는 방법을 소개하겠습니다. 우선 react기반 프로젝트를 위한 google analytics적용을 도와주는 react-ga 라이브러리를 설치합니다. npm install --save react-ga // OR yarn add react-ga react-ga를 utility화하는 anayltics.js를 생성하고 아래와 같이 입력합니다. 사용자의 임의로 구성할 수 있습니다. // analytics.js import RreactGA from "rea.. 2020. 4. 28. 이전 1 다음
