- ‘코로나보드’ 개발자는
- 어떻게 하루 200만 뷰의 서비스를 이틀 만에 개발하고
- 안정적으로 운영하며 수익까지 창출할 수 있었을까?
일 200만, 누적 2억 뷰의 웹 서비스 ‘코로나보드’ 개발자가 코로나보드의 자동 크롤링 파이프라인, 운영, 수익화의 모든 것을 알려준다. 갑자기 많은 사용자가 접속해도 장애 없이 안정적으로 서비스하는 웹 서비스를 설계하려면 많은 경험이 필요하다. 저자는 대기업에서 대규모 트래픽을 감당하는 서비스를 개발한 경험을 살려 코르나보드를 개발했고, 노하우를 이 책에 녹였다. 완성도 높은 사이드 프로젝트를 원하는 분, 취준생, 풀스택 개발자로 거듭나고 싶은 분께 최고의 선택이 될 것이다. 껍데기만 따라 만들어서는 제대로 실력을 갖출 수 없다. 실제 동작하는 제대로 된 웹 서비스를 처음부터 끝까지 개발하면서 실력을 키워보자!
* 이 책에서 만들 ‘코로나보드’ 방문해보기 : https://coronaboard.kr
* 선수지식 : HTML, CSS, 자바스크립트(리액트까지 알면 더 좋다)
Contents
00 개발 환경 구축
01장 코로나보드 아키텍처와 웹 서비스
__1.1 한눈에 보는 코로나보드
__1.2 개발 언어 선택하기
__1.3 프론트엔드 선택하기
__1.4 백엔드 설계하기
__1.5 코로나보드 아키텍처 핵심 포인트 요약
__학습 마무리
[1단계] 백엔드에서 서비스 준비하기
02장 API 서버 만들기
__2.1 코로나보드 API서버 아키텍처 소개
__2.2 노드JS알아보기
__2.3 익스프레스 준비하기
__2.4 데이터베이스 준비하기 : MySQL
__2.5 API서버와 데이터베이스 연동하기
__2.6 API 만들기
__학습 마무리
03장 저장소 구축하기 : 구글 시트
__3.1 코로나보드와 구글 시트
__3.2 구글 시트 API 사용 설정
__3.3 구글 시트 API로 데이터 읽기
__학습 마무리
04장 데이터 자동 수집하기 : 크롤링
__4.1 코로나보드와 크롤링
__4.2 크롬 [개발자 도구] 사용하기
__4.3 웹페이지 크롤링을 위한 배경 지식
__4.4 웹페이지 크롤러 만들기
__학습 마무리
[2단계] 프론트엔드로 사용자에게 다가가기
05장 웹사이트 UI 구성하기 : 개츠비
__5.1 코로나보드와 개츠비
__5.2 개츠비 개발 환경 구축하기
__5.3 리액트 컴포넌트 만들기
__5.4 정적 웹페이지 추가하기
__5.5 백엔드 데이터 불러오기
__5.6 정적 웹사이트 빌드하기
__학습 마무리
06 반응형 웹 디자인하기 : 부트스트랩
__6.1 코로나보드와 부트스트랩
__6.2 부트스트랩 UI컴포넌트 익히기
__6.3 그리드 시스템으로 반응형 현황판 만들기
__학습 마무리
07장 시각화로 핵심 정보 전달하기
__7.1 코로나보드와 시각화
__7.2 데이터 시각화 방법
__7.3 구글 차트 이용하기
__7.4 아파치 이차트 이용하기
__학습 마무리
[3단계] 〈PROJECT〉 코로나보드 만들기
08장 〈STEP 1〉 실전 크롤러 만들기
__8.1 크롤링 클론 사이트 소개
__8.2 코로나19 국내 통계 크롤러
__8.3 코로나19 국가별 통계 크롤링
__8.4 동작 및 데이터 확인
__학습 마무리
09장 〈STEP 2〉 대시보드와 공지사항 만들기
__9.1 사전 준비 : 라이브러리 설치
__9.2 대시보드 만들기
__9.3 공지사항 만들기
__학습 마무리
10장 〈STEP 3〉 슬라이드 만들기 I : 국가별, 글로벌 차트
__10.1 국가별 현황 슬라이드 만들기
__10.2 글로벌 차트 슬라이드 만들기
__학습 마무리
11장 〈STEP 4〉 슬라이드 만들기 II : 국내 차트, 유튜브
__11.1 국내 차트 슬라이드 만들기
__11.2 유튜브 슬라이드 만들기
__학습 마무리
12장 〈STEP 5〉 메뉴바 만들고 테스트하기
__12.1 사전 지식 : 단일 페이지 내에서 이동
__12.2 내부 메뉴바 만들기
__12.3 상단 고정 메뉴바 만들기
__12.4 화면 최상단 이동 버튼 만들기
__학습 마무리
[4단계] 〈PROJECT〉 배포하고 운영하기
__13장 〈STEP 1〉 데이터베이스 설정하기 : AWS RDS
__13.1 사전 준비 : AWS 가입 및 설정
__13.2 데이터베이스 서버 생성하기
__13.3 데이터베이스 서버에 접속하기
__13.4 보안 그룹 설정하기
__13.5 데이터베이스 서버 접속 및 기본 설정 확인하기
__학습 마무리
14장 〈STEP 2〉 서비스 올리기 : AWS EC2
__14.1 서버 인스턴스 생성하기
__14.2 서버 인스턴스 접속하기
__14.3 서버 인스턴스에 필요한 프로그램 설치하기
__14.4 API서버 배포하기
__14.5 크롤러 배포하기
__14.6 정적 웹사이트 빌드하기
__학습 마무리
15장 〈STEP 3〉 파일 서버 운영하기 : AWS S3
__15.1 S3버킷 생성 및 웹사이트 호스팅 설정하기
__15.2 웹사이트 파일을 S3에 배포하기
__15.3 배포 스케줄링하기
__학습 마무리
16장 〈STEP 4〉 도메인 연결하기
__16.1 사전 지식 : 도메인과 DNS
__16.2 클라우드플레어 설정하기
__학습 마무리
[5단계] 〈PROJECT〉 운영하며 광고 수익내기
17장 〈STEP 1〉 검색 엔진에 알리기
__17.1 사전 지식 : 검색 엔진의 동작 방식
__17.2 검색 엔진에 웹사이트 등록하기
__17.3 검색 엔진 최적화 작업하기
__17.4 개츠비 기반 웹사이트에서 메타 디스크립션 추가하기
__17.5 SNS에 공유하기
__학습 마무리
18장 〈STEP 2〉 사용자 분석하기 : 구글 애널리틱스 4
__18.1 구글 애널리틱스로 사용자 데이터 쌓기
__18.2 GA 웹 콘솔에서 분석하기
__학습 마무리
19장 〈STEP 3〉 광고로 웹사이트 수익화하기
__19.1 구글 애드센스로 광고 수익 창출하기
__19.2 쿠팡 파트너스로 광고 수익 창출하기
__학습 마무리
[부록] 비동기 함수와 async, await 키워드
Author
권영재,주은진
연세대학교 전기전자공학과 학사, 글로벌융합공학과 석사를 졸업하고 LINE에서 라인뮤직 iOS 앱과 서버를 4년간 개발했다. 작은 스타트업들과 라인 등의 회사를 거치며 다양한 경험을 쌓았고, 현재는 스퀘어랩에서 항공/호텔 예약 서비스를 개발한다. 다양한 서비스를 개발하면서 웹, 백엔드, CLI 자동화 툴 등 분야를 가리지 않고 자바스크립트를 실무에 사용해왔다. 2020년 1월에 개인 프로젝트로 서비스를 시작한 코로나19 실시간 상황판(https://coronaboard.kr) 또한 전부 자바스크립트로 개발했다. 현재는 여행 서비스를 개발하는 스퀘어랩에서 플레이윙즈와 카이트를 만들고 있으며 리모트 워크를 하면서 디지털 노마드로 살고 있는 풀스택 개발자입니다( letmecompile.com ).
연세대학교 전기전자공학과 학사, 글로벌융합공학과 석사를 졸업하고 LINE에서 라인뮤직 iOS 앱과 서버를 4년간 개발했다. 작은 스타트업들과 라인 등의 회사를 거치며 다양한 경험을 쌓았고, 현재는 스퀘어랩에서 항공/호텔 예약 서비스를 개발한다. 다양한 서비스를 개발하면서 웹, 백엔드, CLI 자동화 툴 등 분야를 가리지 않고 자바스크립트를 실무에 사용해왔다. 2020년 1월에 개인 프로젝트로 서비스를 시작한 코로나19 실시간 상황판(https://coronaboard.kr) 또한 전부 자바스크립트로 개발했다. 현재는 여행 서비스를 개발하는 스퀘어랩에서 플레이윙즈와 카이트를 만들고 있으며 리모트 워크를 하면서 디지털 노마드로 살고 있는 풀스택 개발자입니다( letmecompile.com ).