강의

멘토링

로드맵

Inflearn brand logo image
NEW
개발 · 프로그래밍

/

풀스택

Next.js 15: Full-Stack Development

전통적인 React 개발 방식과 Next.js를 이용해서 개발하는 방식은 전혀 다릅니다. 이 강의는 최신 Next.js 15의 핵심을 꿰뚫고, '진짜' Next.js다운 개발 방식을 알려드립니다. 취업 포트폴리오부터 실무 프로젝트까지, 성능과 효율을 모두 잡는 방법을 경험하세요. Next.js 스럽게 개발 합시다! Next.js의 기능을 어떻게 적용해야하는지 실제 예제를 만들면서 몸으로 배울 수 있도록 구성되었습니다. 서버 컴포넌트를 중심으로 보고 서버 액션과 캐싱 전략등을 이론보다는 실제로 코드를 통해서 더 빠르게 학습합니다. 강의의 목표는 최대한 빨리 Next.js의 분위기를 따라가는 것이 때문에 강의 자체는 JavaScript를 이용해서 진행합니다. 하지만 각 강의의 예제는 Typescript로 제작된 것을 추가로 수업자료로 제공합니다.

43명 이 수강하고 있어요.

Nextjs
fullstack
react.js
javascript
SpringBoot
JavaScriptReactJPANext.js

이런 걸 배울 수 있어요

  • Next.js 15를 활용한 실무 수준의 풀스택 웹 애플리케이션 제작 능력

  • 브라우저에서 API서버와 DB까지 풀스택 실습

  • 서버 액션/ SSG/ ISR 등 Next.js / React 기능 실습

  • 인증 처리: NextAuth로 JWT 토큰까지 완벽하게!

이 강의를 제작한 이유

React는 오직 브라우저에서 동작하는 방식으로 설계되지만 Next.js는 서버 사이드와 브라우저 모두에서 동작할 수 있으므로 새로운 접근 방법이 필요합니다. Next.js를 제대로 활용하기 위해서는 그에 맞는 적절한 개발 방법이 필요합니다.


이 강의는 최소한의 시간으로 Next.js를 체험하고 적절한 의사 결정을 할 수 있는 능력을 키우는 것을 목표로 제작되었습니다. 이 강의를 듣고 난 후에 누군가 여러분에게 'React 쓸래? Next.js 쓸래?' 묻는다면 여러분은 ' Next.js'라고 대답하는 것이 목표입니다.


예제 시스템 구성

강의 예제는 API서버를 별도로 분리해서 확장을 염두에 둔 구조로 작성됩니다. API서버는 각 기능별로 제작된 코드를 이용해서 실행하고, 이를 Next.js에서 활용하는 방식으로 구성합니다. Next.js 서버는 서버쪽에서 데이터를 처리하고 브라우저에서는 API서버를 직접 사용할 수 없는 구조로 최대한 실무에 가까운 형태로 구성합니다.




강의에서 사용하는 기술

Backend (수업자료로 제공하고 강의내용에 포함되지 않습니다.)

  • Spring Boot

  • JPA

  • RestController

  • JWT

FrontEnd

  • Next.js 15 (JavaScript로 작성하고 TypeScript는 수업자료로 제공합니다.)

  • NextAuth

  • SWR


Next.js 15

Next.js 13이후의 라우팅 방식의 변화, React의 Server Component의 출현, Server Action 등 Next.js 15의 많은 변화가 있습니다. 이런 기능들을 잘 활용하면 기존의 React를 이용해서 개발하는 것보다 더 빨리 다양한 기능들을 구현할 수 있습니다.


Slow then Fast

학습 방법에 대해서 고민해야 합니다.

  • 이론적인 고민은 - 'SLOW'

  • JavaScript로 최대한 빨리 만들기 - 'FAST'

  • 디자인은 최소한으로 빨리 AI로 처리 - 'FAST'

  • API 서버는 제공되는 소스 코드로 - 'FAST'


강의에서 작성하는 예제와 내용


Todo 예제: 앱 라우팅으로 CRUD, 페이징 마스터하기  

  • App Routing를 활용해서 Todo 예제 만들기  

  • 라우팅 처리와 페이지 컴포넌트

  • layout과 loading 처리, 에러 처리등을 학습합니다.




상품 관리: SSG/ISR로 성능과 SEO를 동시에 잡는 법

  • SSG를 이용한 정적 페이지 생성

  • 주기적으로 자동 갱신되는 페이지(ISR) 

  • 검색 기능의 분리


인증 처리: NextAuth로 JWT 토큰까지 완벽하게!

  • 자체 인증과 소셜 인증(kakao) 처리 

  • JWT 처리와 컴포넌트내 인증 활용

  • API 서버와 Access Token, Refresh Token 자동 갱신 방법  

  • 커스텀 로그인/로그아웃 페이지  


상태 유지: SWR로 장바구니 데이터를 효율적으로 관리하기

  • Next.js에서 클라이언트 중심 개발 방법 

  • Next.js내 호출 가능한 경로 처리하기 

  • SWR을 이용한 서버 데이터를 여러 컴포넌트가 공유하는 법  



이런 분들께
추천드려요

학습 대상은
누구일까요?

  • Next.js 예제를 실무에 적용하고 싶은 사람

  • API 서버와 연동되는 개발이 필요한 프론트엔드 개발자

  • React에서 다음 단계로 넘어가고 싶은 개발자

선수 지식,
필요할까요?

  • React 기초 지식

  • REST방식에 대한 이해

안녕하세요
입니다.

1,796

수강생

115

수강평

256

답변

4.8

강의 평점

4

강의

구멍가게코딩단은 2015년부터 개발과 관련된 직종의 사람들의 모임을 위해 만들어진 커뮤니티입니다.

강의의 진행은 현재 구멍가게 코딩단을 운영하고 있는 쿠키 담당자가 진행하고 있습니다.

2015년 부터 '코드로 배우는 ..' 시리즈를 집필하고 있습니다.

ㄴ네이버 카페

 

커리큘럼

전체

44개 ∙ (8시간 50분)

해당 강의에서 제공:

수업자료
강의 게시일: 
마지막 업데이트일: 

수강평

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

얼리버드 할인 중

₩5,508

29%

₩66,000

구멍가게코딩단님의 다른 강의

지식공유자님의 다른 강의를 만나보세요!

비슷한 강의

같은 분야의 다른 강의를 만나보세요!