클론 코딩으로 시작하는 Next.js (Next.js와 타입스크립트로 숙박 공유 플랫폼 만들기)

이창주

항상더나은서비스개발을하기위해공부하는개발자입니다.지식을공유하지않으면아깝다고생각하기에지식을공유하는것을좋아합니다.개발자이지만서비스의완성도를높일수있도록프론트엔드이외에도디자인과백엔드,인프라공부를꾸준히하고있습니다.

Chapter1넥스트(Next.js)
1.1넥스트(Next.js)?
1.2넥스트의특징
1.3넥스트설치하기
1.4Eslint및Prettier설치하기

Chapter2넥스트의기본기능
2.1넥스트에서라우팅하기
2.2정적파일사용하기
2.3서버로부터데이터불러오기
2.4styled-jsx로스타일링하기
2.5공통페이지만들기(_app)
2.6공통문서(Document)만들기
2.7에러페이지만들기(_error)

Chapter3타입스크립트
3.1타입스크립트란?
3.2타입스크립트환경설정하기
3.3타입스크립트와넥스트페이지만들기

Chapter4스타일드컴포넌트
4.1스타일드컴포넌트설치하기
4.2폰트적용하기

Chapter5투두리스트만들기
5.1투두리스트헤더만들기
5.2투두리스트스타일링하기
5.3아이콘다운로드받기
5.4svg컴포넌트사용하기

Chapter6넥스트api
6.1넥스트api사용해보기
6.2투두리스트불러오기api만들기
6.3axios설정하기
6.4환경변수(env)설정하기
6.5투두체크하기
6.6투두추가하기
6.7투두삭제하기
6.8푸터만들기

Chapter7리덕스(Redux)
7.1리덕스란?
7.2리덕스에필요한개념
7.3리덕스사용하기
7.4리덕스툴킷(ReduxToolkit)
7.5useSelector사용하기
7.6useDispatch

Chapter8넥스트비앤비프로젝트설정하기
8.1프로젝트생성하기

Chapter9공통헤더만들기
9.1공통헤더스타일링하기
9.2모달컴포넌트만들기

Chapter10회원가입과로그인
10.1회원가입인풋
10.2회원가입셀렉터
10.3회원가입버튼
10.4회원가입api
10.5유저정보저장하기
10.6회원가입밸리데이션
10.7useValidateMode훅스만들기
10.8회원가입비밀번호밸리데이션
10.9회원가입셀렉터밸리데이션
10.10유저로그인뷰만들기
10.11로그인모달만들기
10.12로그인api만들기
10.13로그인밸리데이션
10.14로그인유지하기
10.15유저메뉴만들기
101.16로그아웃하기
10.17컴포넌트최적화
10.18헤더컴포넌트최적화

Chapter11숙소등록하기
11.1숙소등록하기리덕스설정
11.2공통셀렉트컴포넌트에숙소등록하기UI추가하기
11.3건물유형셀렉터
11.4라디오공통컴포넌트
11.5숙소유형라디오컴포넌트
11.6숙소등록하기공통푸터
11.7숙소등록하기밸리데이션

Chapter12숙소등록하기2단계(침대)
12.1숙소등록하기2단계리덕스설정하기
12.2카운터공통컴포넌트만들기
12.3공통컴포넌트를재사용하기(침실개수,침대개수)
12.4침대유형변경하기
12.5공용공간침대유형변경하기
12.6숙소등록하기2단계밸리데이션

Chapter13숙소등록하기3단계(욕실)
13.1숙소등록하기욕실리덕스설정
13.2공통컴포넌트재사용(욕실개수,욕실공용여부)

Chapter14숙소등록하기4단계(위치)
14.1숙소등록하기4단계리덕스설정
14.2숙소등록하기4단계스타일링
14.3구글api사용설정하기
14.4현재위치불러오기
14.5구글api로주소불러오기
14.6구글지도로숙소위치조정하기

Chapter15숙소등록하기5단계(편의시설)
15.1숙소등록하기5단계리덕스설정
15.2체크박스공통컴포넌트만들기
15.3숙소편의시설에체크박스공통컴포넌트적용하기

Chapter16숙소등록하기6단계(편의공간)

Chapter17숙소등록하기7단계(숙소사진)
17.1숙소사진리덕스설정
17.2파일업로드하기
17.3AWSS3사용설정하기
17.4숙소사진업데이트하기

Chapter18숙소등록하기8단계(숙소설명)
18.1숙소등록하기8단계리덕스설정
18.2숙소등록하기상단스타일링
18.3공통텍스트아레아컴포넌트

Chapter19숙소등록하기9단계(제목)

Chapter20숙소등록하기10단계(가격)
20.1숙소요금리덕스설정
20.2숙소등록하기10단계스타일링
20.3금액표기함수만들기

Chapter21숙소등록하기11단계(날짜)
21.1숙소예약날짜리덕스설정
21.2숙소예약날짜DatePicker만들기
21.3react-datepicker사용하기
21.4공통DatePicker컴포넌트만들기
21.5공통DatePicker적용하기
21.6DatePicker기간설정하기

Chapter22숙소등록하기체크리스트
22.1숙소체크리스트상태표시하기
22.2숙소등록하기푸터만들기
22.3숙소등록하기api만들기

Chapter23메인페이지만들기
23.1메인페이지레이아웃스타일링하기
23.2숙소검색바만들기
23.3숙소위치검색하기
23.4숙소검색예약날짜인풋
23.5숙소검색인원인풋

Chapter24숙소리스트페이지
24.1숙소리스트불러오기api
24.2숙소리덕스설정하기
24.3숙소리스트스타일링
24.4숙소리스트api필터링
24.5숙소리스트지도표시하기

Chapter25수소상세페이지
25.1숙소불러오기api
25.2숙소상세리덕스설정
25.3숙소상세스타일링
25.4숙소예약하기

넥스트(Next.js)는리액트(React.js)기반의웹프레임워크입니다.대부분의사람들은넥스트를그저리액트를사용할때서버사이드렌더링(ServerSideRendering)을하기위한도구라고생각하고있습니다.하지만그렇지않습니다.넥스트는서버사이드렌더링지원하는것이외에도강력한기능을지원하고있으며,개발자에게편리함을주는프레임워크입니다.이를증명하듯이,넥스트를
찾는사람들은점차많아졌고,넥스트의생태계는거대해지고있습니다.npm다운로드횟수는주간100만회를넘어섰으며넥스트를사용하는회사와글을쉽게찾아볼수있게되었습니다.

이책을보면서세개의프로젝트를진행합니다.깃허브레파지토리,투두리스트,숙박공유플랫폼을만듭니다.실무기술을익히고자한다면이책을보면서직접해보시기바랍니다.프로그래밍실력을빨리늘리는가장쉬운방법은직접만들어보는것입니다.어떤언어를배울지고민하는시간보다어떤뭔가를만들기시작하는것에집중한다면실력은저절로늘어날것입니다.즐겁게학습하고싶은분들께추천하고싶습니다.