노마드 코더 니꼴라스와 만드는 트위터 서비스

강윤호(IT 프리랜서)

‘클론 코딩’만큼 빠르고 효과적인 학습법은 없다! 9살부터 코딩을 시작한 전형적인 ‘천재 코더’ 니꼴라스! 니꼴라스는 세상에서 가장 빠르게 프로그래밍을 배울 수 있는 방법은 클론 코딩이라고 말한다. 클론 코딩은 트위터, 페이스북, 인스타그램, 넷플릭스와 같은 실제 서비스를 복제해 보는 프로그래밍 학습 방법이다. 클론 코딩은 학습할 때마다 눈앞에 결과물이 바로바로 보이므로 프로그래밍을 빠르고 재미있게 배울 수 있다. 출간과 동시에 화제에 올랐던 클론 코딩 시리즈의 두 번째 책 《Do it! 클론 코딩 트위터》에 서는 트위터를 클론 코딩한다. 트윗 추가부터 수정, 삭제, 사진 등록, 프로필 페이지 등 실제 트위터 기능을 똑같이 구현하고 결과물을 다른 사람도 사용할 수 있도록 서비스 배포까지 해본다. 그야말로 진짜 서비스를 만드는 것이다. 웹 개발 초보자도 7일이면 충분하다. 이 책으로 웹 개발부터 서비스 배포까지 쭉쭉 진행해 보기 바란다.

__클론 코딩 01 파이어베이스와의 첫 만남
01-1 서버가 뭐죠?
01-2 파이어베이스는 언제 사용하면 좋은가요?

__클론 코딩 02 환경 설정하기
02-1 알고 보면 쉬운 환경 설정
02-2 깃허브 저장소 만들기
02-3 슈퍼 빠른 create-react-app
02-4 파이어베이스 설정하기

__클론 코딩 03 트위터 클론 코딩 시작하기
03-1 파이어베이스의 비밀키 숨기기
03-2 라우터 준비하기
03-3 라우터 적용하기

__클론 코딩 04 회원가입, 로그인, 소셜 로그인 기능 만들기
04-1 파이어베이스 로그인 준비하기
04-2 파이어베이스 로그인 설정하기
04-3 이메일, 비밀번호 인증 기능 사용해 보기
04-4 로그인, 로그아웃하기
04-5 누이터에 소셜 로그인 추가하기
04-6 내비게이션 추가하고 로그아웃 처리하기

__클론 코딩 05 트위터? 아니, ‘누이터’ 핵심 기능 만들기
05-1 트윗 등록 기능 만들기
05-2 실시간 데이터베이스로 트윗 목록 보여주기
05-3 트윗 삭제 기능 만들기
05-4 트윗 수정 기능 만들기

__클론 코딩 06 사진 미리 보기, 저장 기능 만들기
06-1 사진 미리 보기 기능 만들기
06-2 사진 저장 기능 만들기

__클론 코딩 07 프로필 페이지와 필터링 기능 만들기
07-1 내가 쓴 트윗만 보기
07-2 프로필 페이지 기능 보완하기
07-3 프로필 실시간 업데이트하기

__클론 코딩 08 깃허브로 누이터 배포하고 보안 챙기기
08-1 코드 깔끔하게 정리하기
08-2 깃허브를 통해 누이터 호스팅하기
08-3 에러 발생, 보안 정책 수정하기

__클론 코딩 09 진짜 트위터처럼 스타일링하기
09-1 누이터 스타일링하기
09-2 버그 수정하기

클론 코딩 시리즈 2탄 출시! 트위터 서비스, 똑같이 만든다!《Do it! 클론 코딩 영화 평점 웹서비스》 출간 이후 1년 만에 ‘트위터'를 클론하는 책이 나왔다! 첫 번째 책 출간 이후 ‘다른 웹 서비스도 클론하고 싶다'는 독자의 요청이 많았다. 이에 노마드 코더는 책을 만들기 위해 ‘트위터 클론 코딩'을 촬영을 마치고 전체 강의를 무료로 전환했다. 노마드 코더는 “HTML, CSS, 자바스크립트, 리액트, 파이어베이스까지 프런트엔드부터 백엔드 개발 과정을 모두 포함한 알찬 강의임에도 지식 나눔을 위해 과감하게 결단을 내렸다”고 했다. 해당 강의는 현재 10,000명이 넘는 수강자를 기록하고 있으며, 강의를 통해 ‘실제 웹 서비스를 만들어 제공할 수 있게 되었다'는 훈훈한 후기가 많다. 넷플릭스와 비슷한 영화 평점 웹 서비스를 만들든, 트위터를 만들든 상관없다. 어떤 클론 코딩 책이든 관심이 있는 서비스로 웹 개발에 입문해 보자!누구나 바로 써먹을 수 있는 ‘실전형 코딩 책’ 이 책은 처음부터 끝까지 액션을 따라 하면서 트위터를 클론 코딩할 수 있도록 설계되었다. ‘액션’은 이 책의 핵심 요소로, 어떤 명령어를 입력해야 하는지, 어디에 파일을 만들어야 하는지, 어디를 수정해야 하는지 정확하게 지시하는 문장을 말한다. 액션만 따라 하면 트윗 목록, 수정, 삭제, 사진 등록, 프로필, 내비게이션 등의 기능을 포함한 트위터가 만들어진다. 한마디로 복잡한 이론 공부보다 일단 만들어 보고 싶은 사람을 위한 ‘실전형 코딩 책’이라 할 수 있다.노마드 코더 니꼴라스가 내 옆에 앉아 있는 것 같은 기분? 세상 편한 ‘실습 구성’ 이제 막 웹 개발 공부를 시작한 사람도 빠르고 정확하게 따라 할 수 있도록 실습 요소를 배치했다. 코드를 작성하고 결과를 확인하는 일련의 과정을 스티커와 별색, 삭제선 등으로 구분하여 표시했고, 주요 개념은 팁과 보충 수업으로 보완한다. 놓치기 쉬운 내용은 말풍선으로 강조하여 실습의 정확도를 높였다. 책을 읽다 보면 노마드 코더 니꼴라스가 바로 옆에 앉아 손으로 짚어 가며 알려 주는 기분을 느낄 수 있을 것이다.노마드 코더 제공 ‘클론 코딩 트위터’ 30강 전체 영상 무료! Q&A까지!노마드 코더에서는 유료로 계획되었던 ‘클론 코딩 트위터’ 강의를, 오직 독자들을 위해! 전체 무료로 공개했다! - 클론 코딩 트위터 30강 전체 영상 보기(무료 회원 가입): nomadcoders.co/nwitter- 노마드 코더 1:1 질문: nomad-coders.channel.io이런 사람에게 이 책을 추천합니다!- 프로그래머로 전직하고 싶은 일반인- 컴퓨터공학을 전공했지만 실무에서 어떻게 쓰이는지는 경험해 보지 못한 전공자- 웹 프로그래밍을 배워서 웹 서비스를 만들어 보고 싶은 사람- 현업에서 일하면서 날마다 새로 업데이트되는 프로그래밍 지식을 쌓고 싶은 개발자- 코딩에 관심 있는 사람 모두 재미있게 몰입해서 프로그래밍을 배울 수 있어요!이 책을 미리 체험한 베타테스터의 트위터 클론 미리 구경해 보기!베타테스터 이아름: arumlee.github.io/nwitter베타테스터 김현우: kimhyeonu.github.io/polaris-twitter-web베타테스터 강윤호: penguingoon89.github.io/nwitter이지스퍼블리싱이 선사하는 독자 지원- 네이버 카페 ‘Do it! 스터디룸(https://cafe.naver.com/doitstudyroom)’에서 이 책의 독자들과 함께 공부하고 책 선물도 받아 가세요!(책 질문 환영!) 스스로 학습 계획을 세우고 스터디 기록을 공유하면 책을 선물로 주는 ‘Do it! 공부단’과 기간을 정해 함께 책을 독파하는 ‘된다스!(된다! 다 함께 스터디!)’ 등 다양한 이벤트 혜택을 누릴 수 있습니다.- 이지스퍼블리싱 홈페이지(www.easyspub.co.kr)에 회원가입을 하여 매달 정기 소식지를 받아 보세요. 신간과 책 관련 이벤트 소식을 누구보다 빠르게 확인할 수 있습니다. 매달 전자책 한 권을 공개하는 이벤트도 진행하고 있습니다.긴급 업데이트 내용은 깃허브 도움 페이지에서!- 깃허브 도움 페이지: github.com/easysIT/nwitter이 책 어느 부분에서나 바로 실습할 수 있는 깃허브 커밋 이력 제공- 클론 스타터 키트 깃허브: github.com/easysIT/nwitter/commits/master