Fe-Dev/Next.js

이번 포스팅에서는 next.js 로 개인프로젝트를 진행하며 next-auth를 적용하여 로그인 기능을 구현했던 과정에 대해 공유해보려 한다. 왜 Next-Auth 였나 ? 무엇보다 Next Auth 를 사용한 가장 큰 이유는 쉽고 간단하게 구현할 수 있기 때문이였다. DB 통신을 하여 로그인을 직접 구현하는 것 이외에도 Oauth, Email 를 사용하여서도 쉽게 구현할 수 있도록 가이드가 잘 되어있고 발급받은 jwt 를 crsf 토큰을 활용해 매 사용자 요청을 검증하도록 안전하게 설계되어 있다.(자세한 정보는 next-auth 공식 레퍼런스(https://next-auth.js.org)를 참고) Oauth 소셜로그인 기능도 구현해보고 싶었지만 일단 제일 기본적인 로그인 부터 구현해보고 싶어서 이번 포스..

이번 포스팅에서는 MySQL 과 Next.js를 연동하는 방법에 대해 정리해보려 한다. (접속이 가능한 MySQL Database 접속정보가 있거나 설치가 되어 있다는 전제하에 진행) ※ 주의할 점 npm 으로 설치한 mysql 모듈은 서버 사이드 로직에서 실행되기 때문에 클라이언트 사이드 로직에서는 직접 붙을수가 없다. 클라이언트 사이드 로직에서 DB와 연동하여 데이터를 가져와야 한다면 Next.js 의 API Routes 기능을 사용하여 fetch 나 axios로 데이터를 가져오거나 서버에서 실행되는 getServerSideProps나 getStaticProps 를 사용하여 mysql 모듈로 데이터를 가져오고 해당 컴포넌트에 데이터를 props로 내려주는 방법을 상황에 맞게 사용하는 것을 추천한다. ..

Next.js에서는 HTML 파일을 서버에서 Pre-rendering 하여 정적인 HTML 파일의 경우 클라이언트에게 대기시간 없이 빠르게 화면을 표출하고 CSR(Cllient Side Rendering)의 단점인 SEO(Search Engine Optimization)부분에서도 이점을 가져올 수 있다. Next.js 에서 지원하는 Pre-Rendering 방식은 페이지 유형에 따라 다르게 사용할 수 있는 getServerSideProps와 getStaticProps 두가지가 있다. 1. getStaticProps 정적 사이트 생성(Static-Site-Generation, SSG)으로 빌드 시점에 서버에서 데이터를 가져와서 페이지를 렌더링한 후 만들어진 정적 html 파일을 클라이언트에게 제공하는 방식..

이번 포스트는 Next.js의 Pages Router에서 제공하는 라우팅 기능중 API Routes에 관해 정리하는 포스트이다. Next.js APP으로 MySQL을 연계하여 데이터를 핸들링 하기 위해 API Routes를 사용해보며 사용방법을 정리하려 한다. API Routes Next.js 는 API Routes를 사용하여 서버사이드 로직을 작성하고 API 엔드포인트를 생성하는 기능을 제공한다. API Routes를 사용하면 Next.js 어플리케이션 내에서 백엔드의 역할을 수행하는 API 엔드포인트를 간단하게 만들 수 있다. 1. /pages/api 디렉토리생성 첫번째로 Next.js 어플리케이션 루트 디렉토리 내에서 pages 디렉토리 안에 api 디렉토리를 생성한다. 이 디렉토리는 API Rou..

React.js 를 공부하다 보니 Next.js와 TypeScript를 자연스레 접하게 되었다. 이번 포스트는 Next.js의 기본적인 개념과 디렉토리 구조 및 Route에 대해 간략히 정리하는 글이다. Next.js 란? Next.js 는 간단하게 요약하면 React의 SSR(Server Side Rendering)을 구현할 수 있도록 도와주는 프레임워크이다. React는 기본적으로 SPA(Single Page Application)로 개발하며 CSR(Client Side Rendering)으로 렌더링 되기 때문에 사용자가 최초 접속하는 시점에 모든 js 파일을 로드하고 서버에서 데이터를 가져오기 때문에 처음 접속시 시간이 지연 될 수 있다. 뿐만 아니라 렌더링을 클라이언트쪽에서 하고 렌더링이 되기 전..