홈앤서비스 SK BROADBAND

숙박 공유 플랫폼을 만들면서 입문하는
Next.js

이 책을 통해 Next.js의 기본 기능들과 타입스크립트를 예제와 함께 익힐 수 있습니다. 많은 회사에서 자주 사용하는 조합인 Next.js와 타입스크립트와 리덕스를 함께 사용하는 법을 배울 수 있을 것입니다.

디자인을 뜯어보면서 코딩하고, 디자인 시스템에 따른 공통 컴포넌트를 만들어 보면서 디자이너와 협업하는 듯한 경험을 할 수 있습니다.

이 책에 수록된 예제인 숙박 공유 플랫폼을 손으로 따라하면 자연스럽게 작가의 노하우를 습득할 수 있습니다.

이 책의 특징
- 구현할 페이지의 디자인을 제공합니다.
- Next.js를 사용하여 큰 규모의 애플리케이션을 만들어 볼 수 있습니다.
- 실제로 디자이너와 작업하듯이 디자인을 보면서 페이지를 만들어 볼 수 있습니다.

이 책이 필요한 독자
- Next.js에 관심이 있으신 분
- 리액트와 서버 사이드 렌더링 개발에 관심이 있으신 분
- 리액트를 할 줄 알지만 익숙하지 않으신 분

소스코드 다운로드
https://github.com/bjpublic/next.js

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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