프레임워크/next.js

깃허브 소셜 로그인 구현하기

GitHub 로그인, 회원가입 구현하기 깃헙 소셜 로그인은 OAuth 표준을 따른다. 다른 소셜 로긴도 OAuth 를 따르니 비슷하게 구현이 가능하다. 이 포스팅에 쓰인 코드는 노마드코더-캐럿마켓 클론코딩 에서 배운 코드를 참고했다. 단, 비슷하긴 하나, 완전히 동일하지 않고 몇몇 부분이 다르다. GitHub 로그인, 회원가입 절차 살펴보기 시퀀스 다이어그램으로 살펴보기 sequenceDiagram participant User as 사용자 participant App as 애플리케이션 participant Google as 구글 서버 User->>App: 구글 로그인 요청 App->>Google: 인증 코드 요청 (client_id, redirect_uri, scope) Google->>User: 로그..

Next.js API 핸들러 커스텀 미들웨어 구성하기

개요 Next.js 에서는 /pages/api 경로 아래에 완전히 백엔드에서만 동작하는 API 를 구성할 수 있도록 Next.js API Routes 를 제공하지만, 이와 함께 사용하며 HTTP Method 를 필터링해주거나 세션 인증 여부에 따른 페이지 반환 등을 해줄 미들웨어의 지원이 부족하다. (아니면 내가 아직 Node.js 서버 라이브러리에 대해서 무지해서 모르는 것일 수도 있다.) 하지만, 높은 자유도가 있어서 직접 만들면 되는 부분이다. 구성 코드 API 응답 형태 및 HTTP Method enum 정의 export interface ApiResponse { ok: boolean; status: number; message?: string; [key: string]: any; } export..

next.js import 경로 예쁘게 하기

개요 import withHandler from "../../../libs/server/withHandler"; import 경로가 깊어지면 위와 같은 일이 일어난다. next.js 에서 typescript 를 사용한다는 가정 하에 import 에 들어가는 경로를 ../../../ 과 같은 경로 없이 예쁘게 표현하려면 어떻게 해야 할까? Step 1: baseUrl 지정하기 typescript 프로젝트에서 baseUrl 은 tsconfig.json 파일에서 정할 수 있다. { "compilerOptions": { "baseUrl": ".", // ... } } Step 2: Paths 지정하기 { "compilerOptions": { "baseUrl": ".", "paths": { "@libs/*": [..

Next.js 의 API routes

Next js API Routes 란? Next.js 에서 놀랍게도 API 를 빌드할 수 있는 솔루션을 제공한다. 더이상 프론트엔드 프레임워크로 보기엔 무리가 있을 것 같다. pages/api 내부에 있는 파일은 /api/* 로 매핑되어 page 가 아닌 API 엔드 포인트가 된다. 서버사이드에서만 번들링되고 클라이언트 사이드의 번들링 크기를 키우지 않는다. 예제 pages/api/user.js 파일을 다음과 같이 작성하면, 상태코드 200 OK 와 함께 { name: 'John Doe' } 를 응답하는 API 를 만들 수 있다. export default function handler(req, res) { res.status(200).json({ name: "John Doe" }); } ..

next.js 의 Dynamic Routes (동적 라우트)

개요 미리 정의된 URL 주소로만 라우팅하는 것이 아니라 사용자가 접근한 경로 혹은 상황에 따라 동적인 라우팅을 제공하고 싶을 때 사용할 수 있는 방식이다. 이를테면, /my-profile/ 뒤에 이름을 주어서 회원들의 프로필을 표현하고 싶다면? /my-profile/ray-kim 페이지에서는 ray-kim 의 프로필을 제공하고, /my-profile/jake-seo 페이지에서는 jake-seo 의 프로필을 제공하고 싶을 때 사용할 수 있다. Next.js 에서는 [param] 과 같이 페이지에 존재하는 컴포넌트 파일명에 괄호를 씌우는 것으로 가능하다. 이를테면 pages/my-profile/[name].js 와 같이 경로를 구성하면 위에서 예로 들었던 /my-profile/jake-seo 와 같은 UR..

Next.js getServerSideProps 서버사이드 렌더링 알아보기

Next.js 의 getServerSideProps 란? Next.js 의 Pre-render 에서 알아보았듯 Next.js 는 Create React App 으로 만든 리액트 프로젝트와 다르게 JS 파일을 이용해 어느정도 기본 HTML 파일을 만든 뒤 해당 파일에서 자바스크립트가 동작할 수 있도록 하는 Hydration 이라는 과정을 거쳐서 렌더링을 한다. Next.js 에서 getServerSideProps() 라 불리는 함수를 함수를 export 하면, API 에서 가져오는 데이터까지 Next.js 의 Pre-render 내용에 포함시킬 수 있다. 혹은 클라이언트에서 민감한 정보를 공개하고 싶지 않을 때 getServerSideProps 를 이용해 서버에서 처리하고 클라이언트에서는 어떤 일이 일어났..

next.js 내부 next.config.js 파일에서 할 수 있는 일들

next.config.js 파일에서 설정 가능한 것들 next.config.js 는 next.js 프로젝트를 생성하면 자동으로 생성되는 설정파일이다. 이 파일에 내용을 더하는 것으로 다양한 next.js 기능을 이용할 수 있다. Redirect Redirect 기능은 A 라는 페이지에 방문하면 자동으로 B 라는 페이지로 이동시켜주는 기능을 말한다. module.exports = { async redirects() { return [ { source: '/about', destination: '/', permanent: true, }, ] }, } next.config.js 에 async redirects() 메서드를 작성하면 redirect 기능을 이용할 수 있다. sourc..

Next.js 에서 Hydration 이란 무엇인가?

Next.js 에서 자주 등장하는 Hydration 이란 무엇일까? Next.js 를 공부하다보면 Hydration 이라는 말을 많이 볼 수 있다. Hydration 이라는 말이 많이 나오는 이유는 Next.js 가 기본적으로 서버사이드 렌더링을 지원해서이다. Hydration 이란, 정적 호스팅 혹은 서버사이드 렌더링을 통해 받은 HTML 웹 페이지를 동적인 웹페이지 로 만드는 과정을 말한다. 보통은 이벤트 핸들러 같은 것들을 붙여서 동적인 웹페이지를 만들곤 한다. Next.js 는 Hydration 과정에서 리액트가 작동하는데 필요한 데이터를 모두 넘겨준다. 그래서 서버사이드 렌더링 이후에 우리의 앱을 부드럽게 리액트로 연결시켜 SPA 처럼 동작하게 만들어준다.

Next.js 의 빌트인 태그인 next/head 는 무엇일까?

개요 Next.js 에서는 next/head 라는 것을 빌트인으로 제공한다. HTML 마크업의 head 엘리먼트 내부에 들어갈 내용들을 설정 가능하다. 기존의 head 엘리먼트는 HTML 상단에 위치했어야 하는 것과 다르게 Next.js 에서 제공하는 Hello world! ) } export default IndexPage 주의점 1: 중복 태그 아무 위치나 아무 페이지나 입력 가능하며, 컴포넌트로 나뉘어지는 리액트 앱의 특성상 중복으로 엘리먼트를 넣을 확률도 꽤 있다. 그래서 key 프로퍼티를 이용하여 중복된 요소를 추가하지 않도록 주의해야 한다. 중복 예시 import Head from 'next/head' function IndexPage() { return ( Hello world..

Next.js 가 지원하는 Pre-rendering 이란 무엇일까?

Next.js Pre-rendering 개요 Pre-rendering 이란, Next.js 가 각 페이지에 대한 HTML 을 생성하는 것을 말한다. 기존의 문제: SPA 의 Client-side 렌더링 문제 원래 React 같은 SPA(Single Page Application) 는 보통 .html 파일 내부에 Root 로 사용될 태그 하나만 존재한다. html 파일에는 아무것도 존재하지 않고, 브라우저를 통해 URL 에 접근하면, 자바스크립트에 의해 Client-side 렌더링이 시작된다. 이렇게 Client-side 자바스크립트 렌더링 방식은 느린 인터넷 환경을 이용하는 사람에게는 잠시동안 Blank page 를 보여주기도 하며, 검색엔진 최적화가 어렵다는 단점이 있다. 문제 해결: Next.js 의..

Next JS 에서 스타일링을 적용하는 다양한 방법

Next JS 에서의 대표적인 스타일링 방법 3가지 알아보기 Next JS 는 취향에 맞게 다양한 스타일링 기법을 제공한다. 대표적인 스타일링 기법은 총 3가지가 있다. Module-Level CSS: [name].module.css 파일을 이용하는 방법이다. CSS-in-JS: 반환 컴포넌트에 style 속성을 정의하고 JS 오브젝트를 넣는 방식이다. Global CSS: 우리가 보통 아무런 프레임워크를 사용하지 않을 때 단순하게 CSS 파일을 삽입해 스타일링하는 방식과 같은 방식이다. 여담으로 나는 요즘 tailwind css 를 이용하여 스타일링을 많이 하고 있다. tailwind CSS 를 이용하면 보통 클래스 속성에 디자인 키워드를 추가하는 방식으로 스타일링을 하게 된다. Component-Le..

Next.js APP _app.js 의 모든 것

개요 Next.js 에는 기본으로 제공되는 App 컴포넌트가 존재한다. App 은 pages 에 있는 모든 페이지에 가기 전에 거쳐가야 하는 길이다. 이를테면 pages/index.js 에 접속한다면, index.js 에 접근 전에 pages/_app.js 에 먼저 들르게 된다. 이는 Next JS 의 프레임워크적 특성이다. 좋든, 싫든 들리게 된다. Next.js 는 App 컴포넌트를 페이지 초기화에 이용한다. App 컴포넌트를 오버라이드하여 페이지 초기화 과정을 커스터마이징할 수 있다. pages/_app.js 파일을 만들어 다음과 같은 부분을 커스터마이징 할 수 있다. _app.js 를 이용하여 커스터마이징 가능한 부분 페이지가 변경되어도 레이아웃을 유지할 수 있다. 페이지를 이동하는 동안에도 상태..