클론 코딩으로 시작하는 Next.js

Next.js와 타입스크립트로 숙박 공유 플랫폼 만들기

이창주 지음

비제이퍼블릭 2021년 01월 27일 출간 종이책 : 2021년 01월 29일 출간

작품소개

책소개

숙박 공유 플랫폼을 만들면서 입문하는 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 숙

출판사 서평

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

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

작가정보

저자(글) 이창주

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