개발 · 프로그래밍

/

프론트엔드

[손에 익는 Next.js] Part 2 - 마이그레이션하기

(4.4) 수강평 5

수강생 129

Thumbnail

초급자를 위해 준비한
[프론트엔드, 웹 개발] 강의입니다.

React에서 Next.js 14로 마이그레이션하며 React와 Next.js의 차이점을 익혀봅니다. Next.js을 보다 깊게 이해하실 수 있어요!

이런 걸
배워요!

  • React로 시작한 서비스를 Next.js로 바꾸기

  • React Router를 App Router로 바꾸기

  • Next.js 14의 설정(Config) 이해하기

React.js에서 Next.js로 마이그레이션,
여러분도 할 수 있어요!

비교하며 배우는 Next.js

React로 서비스를 운영하다 보면 Next.js로 마이그레이션 해야 할 일이 생기기도 합니다. 마이그레이션은 복잡하고 어려운 일이지만 그 과정에서 서비스를 더욱 깊게 이해할 수 있는 기회가 되기도 하죠. 이번 강의 역시 마이그레이션이라는 형식을 취해 React와 Next.js를 비교하며 새로운 지식을 배울 수 있는 기회로 삼으려고 합니다. #React, #Next.js, #next.js, #next, #vitejs

이 강의에서 얻을 수 있는 것

  • Next.js에서 사용하는 기본 설정을 비롯해 TypeScript 설정, ESLint 설정을 이해할 수 있어요.

  • Create React App, Vite로 만든 React 앱을 Next.js로 마이그레이션 할 수 있어요.


  • 마이그레이션 과정에서 React와 Next.js의 차이를 이해하실 수 있어요.


무엇을 배우게 되나요?

1. Next.js 설정 읽어보기

Next.js 앱의 기본 설정에 포함된 next.config.js, tsconfig.json, .eslintrc.json, package.json 파일을 읽어봅니다. 마이그레이션에 필요한 설정을 이해하고 Next.js에 대한 깊이를 더할 수 있어요.

<Part2 - Next.js로 마이그레이션하기> 강의의 핸드북이 화면에 보이고 우측 아래에 원형의 프레임 안에 지식공유자의 얼굴이 보여요

다양한 설정을 함께 읽어봐요

2. Vite에서 마이그레이션하기

Next.js 공식 문서에 소개된 가이드에 따라 Vite로 만든 React 앱을 Next.js로 마이그레이션합니다. Vite와 Next.js의 설정 차이를 이해하고 React와 Next.js의 차이점을 이해할 수 있어요.

Vite로 만든 React 앱이 화면에 보이고 우측 아래에 원형의 프레임 안에 지식공유자의 얼굴이 보여요

Vite로 시작해서 Next.js로

3. Create React App에서 마이그레이션하기

React를 처음 시작할 때 사용하는 도구인 CRA(create-react-app)으로 만든 React 앱을 Next.js로 마이그레이션합니다. Vite로 만든 앱과 다른 점도 살펴보면서 React, Next.js를 보다 다양하게 이해할 수 있어요.

CRA로 만든 React 앱이 화면에 보이고 우측 아래에 원형의 프레임 안에 지식공유자의 얼굴이 보여요

CRA로 시작해서 Next.js로

4. React Router에서 마이그레이션하기

React 라우팅 라이브러리 중에 가장 많이 사용되는 React Router를 App Router로 바꿔봅니다. 라우팅 방식의 차이를 이해하고 Next.js 파일 시스템 기반 라우팅, 서버 컴포넌트, 클라이언트 컴포넌트를 손에 익힐 수 있어요.

React Router로 만든 커머스 앱이 화면에 보이고 우측 아래에 원형의 프레임 안에 지식공유자의 얼굴이 보여요

React Router를 App Router로

수강 전 참고 사항

실습 환경

  • 운영 체제 및 환경: macOS, Node.js 20.10.0

  • 사용 도구: VSCode

  • 사용 서비스: Vercel, FakeStoreAPI

학습 자료

이 강의를 듣기 전에

연관 강의

이런 분들께
추천드려요!

학습 대상은
누구일까요?

  • 첫 번째 마이그레이션 프로젝트를 앞둔 분들

  • React를 Next.js로 마이그레이션하고 싶은 분들

  • React와 Next.js의 차이점을 이해하고 싶은 분들

선수 지식,
필요할까요?

  • React

  • TypeScript

마플, 뱅크샐러드 거쳐 현재는 당근에서 프론트엔드 엔지니어로 일하고 있습니다.

 

"난 네가 필요해", "너의 존재가 나에게 힘이 돼"라는 말을 좋아합니다. 이웃의 필요를 채워주고 힘이 되어 주는 것, 그게 사랑이라고 믿습니다. 좋은 강의로 여러분의 필요를 채우고 힘이 되어드릴 수 있도록 노력하겠습니다.

커리큘럼

전체

32 ∙ 1시간 43분

강의 게시일: 2024년 01월 05일
마지막 업데이트일: 2024년 01월 05일

수강평

아직 충분한 평가를 받지 못한 강의입니다.
모두에게 도움이 되는 수강평의 주인공이 되어주세요!