비전공자를 위한 Next.js 기초0원
수강 신청이런 경험, 있지 않나요?
리액트부터 완벽히 알아야 Next.js를 시작할 수 있다고 생각해 계속 미뤘어요
HTML 파일마다 헤더와 푸터를 복사하다 보니 수정할 곳이 자꾸 늘어나요
App Router, 서버 컴포넌트 같은 용어만 봐도 어디서부터 시작할지 막막해요
강의를 따라 만들 때는 되는데, 내 디자인을 페이지 구조로 옮기기가 어려워요
같은 AI를 써도, 결과가 달라집니다
페이지마다 같은 마크업을 복사하고 하나씩 수정한다
공통 UI를 컴포넌트로 분리해 한 번에 관리한다
폴더와 파일 이름만 봐도 App Router가 낯설다
폴더 구조만으로 페이지와 레이아웃을 직접 설계한다
정적인 시안까지만 만들고 개발 단계에서 손을 놓는다
데이터가 연결된 반응형 서비스 화면까지 완성한다
이런 것을 배웁니다
리액트를 깊이 몰라도 시작할 수 있습니다
복잡한 상태 관리보다 HTML·CSS로 화면을 만들어 본 분에게 익숙한 마크업과 스타일링에서 출발합니다. JSX와 컴포넌트를 HTML을 정리하는 새로운 방식으로 이해해 부담 없이 첫 화면을 만듭니다.
반복 마크업을 재사용 가능한 컴포넌트로 바꿉니다
헤더, 카드, 버튼처럼 자주 쓰는 UI를 어디까지 나누고 어떻게 조합하는지 배웁니다. 수정에 강하고 협업하기 좋은 실무 구조를 직접 만들어봅니다.
App Router로 여러 페이지와 공통 레이아웃을 설계합니다
폴더와 파일이 URL이 되는 원리를 익히고, 중첩 레이아웃과 동적 경로를 활용해 목록·상세 페이지가 자연스럽게 이어지는 사이트를 구성합니다.
이미지·폰트·메타데이터까지 서비스답게 다듬습니다
Next.js의 이미지와 폰트 최적화, 페이지별 메타데이터 설정을 적용해 빠르고 검색에 잘 노출되는 결과물로 완성합니다.
서버와 클라이언트의 역할을 화면 기준으로 이해합니다
어려운 이론 대신 어떤 UI를 서버에서 만들고 언제 상호작용 컴포넌트가 필요한지 실제 예제로 구분합니다. 필요한 곳에만 클라이언트 기능을 더하는 기준이 생깁니다.
완성 프로젝트로 배포까지 경험합니다
반응형 페이지를 처음부터 조립하고 실제 주소로 배포합니다. 강의가 끝난 뒤에도 내 디자인을 Next.js 프로젝트로 옮길 수 있는 작업 순서를 익힙니다.
커리큘럼
총 4개 파트 · 33강
프로젝트를 생성하고 파일 구조, CSS 변수, 기본 스타일을 정리해 탄탄한 출발점을 만듭니다.
00. 프로젝트 기초 세팅
1프로젝트 생성
무료04:44
2불필요한 파일 정리
무료03:35
3기본 CSS 변수 설정
무료07:07
