강의

멘토링

커뮤니티

NEW
개발 · 프로그래밍

/

웹 개발

궁극의 Next.js 14 포트폴리오 웹사이트 ( 제로 투 히어로 )

이 강의에서는 Next.js 14, React.js, Tailwind CSS, 그리고 Nodemailer를 사용하여 완전하고 현대적이며 전문적인 포트폴리오 웹사이트를 구축하는 과정을 단계별로 안내해 드립니다. 복잡한 프론트엔드 개념을 학생들이 이해할 수 있도록 도운 경험을 바탕으로, 명확한 설명, 실제 사례, 그리고 실용적인 구현에 중점을 둡니다. 단순히 이론을 설명하는 것이 아니라, 프로젝트 설정부터 최종 배포까지 모든 것을 함께 구축하여 작동 원리와 이유를 완전히 이해할 수 있도록 합니다. App Router, 파일 콜로케이션, 프라이빗 및 동적 라우트, 네비게이션, 레이아웃, 메타데이터, 로딩 상태를 포함한 Next.js 14의 핵심 개념을 배우게 됩니다. 기초가 명확해지면, 동적 콘텐츠, 부드러운 스크롤 애니메이션, 다운로드 가능한 PDF 파일, 그리고 스크롤 상태에 따라 작동하는 콜투액션 버튼이 있는 완전한 포트폴리오 웹사이트를 구축합니다. 강의가 끝날 때쯤에는 Vercel에 웹사이트를 배포하고, GitHub에 소스 코드를 게시하며, React 라우팅과 Next.js 라우팅의 차이를 자신 있게 이해하고, 실제 프로덕션 수준의 애플리케이션을 구축하는 방법을 알게 됩니다. Next.js에 대한 사전 경험은 필요하지 않습니다.

1명 이 수강하고 있어요.

난이도 입문

수강기한 무제한

  • Ehizeex Tech
next.js
next.js
Website
Website
react
react
fullstack
fullstack

수강 후 이런걸 얻을 수 있어요

  • Next.js 14와 React를 사용하여 처음부터 완전한 포트폴리오 웹사이트 만들기

  • Next.js에서 동적 라우팅, 비공개 라우트 및 파일 배치 마스터하기

  • 부드러운 스크롤 효과, 애니메이션 및 인터랙티브 UI 컴포넌트 만들기

  • Tailwind CSS를 사용하여 반응형 레이아웃 디자인하기

  • Nodemailer와 Next.js API를 사용하여 수천 개의 이메일 송수신하기

  • 웹사이트에서 직접 PDF 문서를 생성하고 다운로드하세요

  • Vercel에 프로덕션 준비가 완료된 애플리케이션 배포하기

  • GitHub에서 프로젝트 소스 코드 게시 및 관리

궁극의 Next.js 14 포트폴리오 웹사이트 – 처음부터 배포까지

Next.js 14, React, Tailwind CSS, Nodemailer를 사용하여 현대적이고 고성능의 포트폴리오 웹사이트를 구축하고, 프론트엔드, 풀스택, 웹 애플리케이션 개발자들이 사용하는 실무 업계 관행을 따라 개발합니다.

이 강의는 이론에서 실제 프로젝트로 넘어가는 데 어려움을 겪는 학생들을 위해 설계되었습니다. 개발자들을 가르치고 멘토링한 경험을 바탕으로, 추상적인 설명 대신 단계별로 시각적 예제, 다이어그램, 실습 구현을 사용하여 복잡한 개념을 설명하는 이 강의를 만들었습니다.

단순히 Next.js를 배우는 것이 아니라 완전한 프로덕션 수준의 포트폴리오를 구축하고, Vercel에 배포하며, GitHub에 코드를 게시하는 것까지, 전문가들이 하는 것과 똑같이 진행합니다.

제안 비주얼:

  • 최종 포트폴리오 웹사이트 미리보기 (데스크톱 & 모바일)

  • 프로젝트 폴더 구조 다이어그램

  • Next.js App Router 시각적 흐름

배우게 될 내용

섹션 (1): 핵심 키워드 – Next.js 14 기초 및 라우팅

이 섹션에서 학생들은 Next.js 14의 핵심 아키텍처와 App Router를 사용하여 최신 React 애플리케이션이 어떻게 구조화되는지 배우게 됩니다.

다음을 배우게 됩니다:

  • Next.js 14 App Router와 파일 기반 라우팅 시스템 이해하기

  • 파일 배치, 프라이빗 라우트, 라우트 그룹 및 중첩 라우트 학습

  • 동적 라우팅을 마스터하고 페이지 간 데이터 전달하기

  • React 라우팅과 Next.js 라우팅의 차이점을 이해하기

  • 레이아웃, 템플릿, 메타데이터, 로딩 상태 및 에러 페이지를 올바르게 사용하기

제안 시각 자료:

  • App Router 폴더 구조 다이어그램

  • 동적 라우트 플로우 차트

  • Layout vs Template 비교 이미지

섹션 (2): 핵심 키워드 – UI, 애니메이션, API 및 배포

이 섹션에서 학생들은 실제 기능을 갖춘 완전히 동적이고 인터랙티브한 포트폴리오 웹사이트를 구축하기 위해 자신의 지식을 적용하게 됩니다.

다음을 수행하게 됩니다:

  • Tailwind CSS를 사용하여 반응형 레이아웃 구축

  • 부드러운 스크롤 효과와 애니메이션을 만드세요

  • 슬라이더, 카드, 네비게이션 드로어 및 인터랙티브 버튼 구현

  • PDF 문서 생성 및 다운로드 (CV 버튼)

  • 스크롤 기반 콜투액션 버튼 만들기

  • Next.js API를 구축하고 Nodemailer를 사용하여 수천 개의 이메일 전송

  • Vercel에 애플리케이션 배포하기

  • GitHub에서 프로젝트 게시 및 관리

제안 비주얼:

  • UI 컴포넌트 스크린샷 (카드, 슬라이더, 폼)

  • 스크롤 애니메이션 데모

  • API 요청/응답 다이어그램

  • Vercel 배포 화면

수강 전 확인사항

실습 환경

운영 체제 및 버전

  • Windows 10 / 11

  • macOS

  • Linux / Ubuntu

필수 도구

  • Node.js (LTS 버전 권장)

  • Visual Studio Code

  • 웹 브라우저 (Chrome, Edge 또는 Firefox)

  • Git & GitHub 계정 (무료)

  • 가상 머신 불필요

PC 사양 (권장)

  • CPU: Intel i5 / Ryzen 5 이상

  • RAM: 최소 8GB (16GB 권장)

  • 저장 공간: 10–20 GB의 여유 디스크 공간

  • GPU: 필요 없음

학습 자료

  • 제공 자료

    • 프로젝트의 전체 소스 코드

    • 프로젝트 자산 및 리소스

    • 구성 파일

    • 재사용 가능한 컴포넌트

    • 단계별 비디오 강의

    중요 사항

    • 총 강의 시간: ~10시간 이상

    • 다운로드 또는 클라우드 링크를 통해 제공되는 소스 코드

    • 파일은 섹션별로 정리되어 있어 쉽게 탐색할 수 있습니다

    • 학생들은 개인 포트폴리오를 위해 프로젝트를 재사용할 수 있습니다


사전 요구 사항

  • HTML, CSS, JavaScript에 대한 기본 지식이 권장됩니다

  • Next.js 사전 경험은 필요하지 않습니다

  • React 기초 지식이 있으면 도움이 되지만 필요할 때 설명됩니다

강의 노트

  • 고품질 비디오 및 명확한 오디오

  • 최고의 학습 방법: 강사를 따라하며 함께 코딩하기

  • 학생들은 Q&A 섹션에서 질문할 수 있습니다

  • 이 강좌는 향후 Next.js 버전에 맞춰 업데이트될 수 있습니다

저작권 및 면책조항

  • 모든 강의 자료와 소스 코드는 개인 및 교육 목적으로만 제공됩니다提供されています

  • 콘텐츠의 재배포 또는 재판매는 허용되지 않습니다

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • 독립적인 예제가 아닌 실제 프로젝트를 만들면서 Next.js 14를 배우고 싶은 초보자

  • 기본적인 HTML, CSS, JavaScript를 알고 있으며 최신 React와 Next.js 개발로 전환하고자 하는 프론트엔드 개발자

  • React 라우팅과 Next.js 라우팅의 차이를 이해하는 데 어려움을 겪는 학생들

  • 자신의 기술을 보여주기 위한 전문적인 포트폴리오 웹사이트를 만들고 싶은 개발자

선수 지식,
필요할까요?

  • HTML, CSS, JavaScript에 대한 기본 지식이 권장됩니다

  • Next.js 사용 경험이 없어도 됩니다

  • React 기초 지식이 있으면 도움이 되지만 필수는 아닙니다. 개념을 단계별로 설명하기 때문입니다

안녕하세요
입니다.

커리큘럼

전체

76개 ∙ (10시간 1분)

해당 강의에서 제공:

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

수강평

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

얼리버드 할인 중

₩38,500

30%

₩55,000

Ehizeex Tech님의 다른 강의

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

비슷한 강의

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