코로나보드로 배우는 실전 웹 서비스 개발(Must Have)

자동 크롤링 기능을 갖춘 웹 서비스를 구축하는 데 필요한
개발 기술과 운영 노하우를 알아보고 '코로나보드'를 만들어봅니다.

이 책은 학습 흐름을 끊지 않기 위해 개발 환경부터 미리 구축해놓은 후, 웹 서비스를 개발하는 데 필요한 지식을 배우고 나서 코로나보드 클론 사이트를 개발합니다. 그저 따라 하는 방식이 아니라, 코로나보드 아키텍처 구성 노하우를 설명하고 나서 구현에 필요한 지식을 1부 '백엔드에서 서비스 준비하기', 2부 '프론트엔드로 사용자에게 다가가기'에서 실무 관점에서 깊이 있게 다룹니다.
3부에서는 오토 크롤링 파이프라인을 장착한 코로나보드를 만듭니다. 4부에서는 AWS로 배포하고, 5부에서는 검색 엔진에 알리고, 구글 애널리틱스로 사용자를 분석하고, 구글 애드센스와 쿠팡 파트너스로 광고 수익을 창출하는 방법을 알려줍니다.

이 책을 읽고 나면 웹 서비스를 기획하고 구현하고 운영하는 전반적인 지식을 갖출 수 있습니다.

[고민타파 6문 6답]
〉 무언가 남다른 노하우가 부족하다고 느끼나요?
'현실 세계 서비스 개발 노하우를 얻게 돼요.' 갑자기 많은 사용자가 접속해도 장애 없이 안정적으로 서비스하는 동시에 서버 비용이 최소화되게 설계하려면 많은 경험이 필요합니다. 서비스 사용자에게 같은 기능을 제공하더라도 운영 비용이나 고가용성, 성능, 사용 기술이 다릅니다. 또한 구현하는 데 드는 시간과 노력도 천차만별입니다. 이 책은 쾌속으로, 그리고 개발과 운영비를 줄여서 일 200만 뷰를 감당하는 안정성 높은 서비스를 만드는 다양한 노하우를 알려줍니다. 웹 서비스를 만드는 노하우를 얻을 수 있어요.

〉 취준생이라 아직 경력란에 쓸 내용이 없나요?
'경력란을 채울 제대로 된 사이드 프로젝트를 얻을 수 있어요.' UI 클론코딩만 해서는 제대로 된 프로젝트로 인정받기 어려워요. 제대로 된 서비스를 구현해야 이력이 됩니다. 이 책으로 필요한 기술을 하나하나 익혀 가면서 나만의 완성도 있는 사이드 프로젝트를 진행하세요. 그러면 경력란에 채울 수 있는 개인 프로젝트 이력을 마련할 수 있을 겁니다.

〉 운영 중인 서비스 유지비가 부담되나요?
'운영비를 최소화하면서 수익화하는 방법을 익힐 수 있어요.' 같은 기능을 제공하더라도 서비스마다 비용이 천차만별입니다. 요구사항을 만족하면서도 운영비가 최소화되도록 서비스를 구성하는 방법을 알려줍니다. 그리고 웹사이트에 구글 애드센스와 쿠팡 파트너스 두 가지 광고를 적용합니다. 구글 애널리틱스로 사용자 행동을 분석해 웹사이트를 개선하고 방문자 수를 늘려보세요. 어느 순간 운영비보다 광고 수익이 커져, 운영비 걱정을 잊게 될 겁니다.

〉 무엇을 더 익혀야 성장할 수 있는지 모르겠나요?
'직접 A부터 Z까지 만들며 풀스택 개발자로 거듭날 수 있어요.' 백엔드, 프론트엔드로 구분지어 내 영역만 알면 성장에 한계가 있습니다. 모든 영역에서 전문가가 될 수는 없지만 주력 아닌 영역을 어떻게 만들고, 어떻게 돌아가는지는 알아야 더 나은 개발을 할 수 있습니다. 더불어 엉뚱한 요구사항을 만들지 않으므로 원활한 협업도 가능하답니다.

〉 크롤러를 만들었는데 수동 조작하시나요?
'자동 크롤링되는 파이프라인을 익힐 수 있어요.' 크롤러는 수동으로 실행해서는 의미가 없습니다. 주기적으로 자동 실행되어 수집한 데이터가 시스템에 자동으로 반영될 때 효용성이 더 큽니다. 이 책은 크롤링, 저장, 데이터 업데이트를 반복하는 지속 가능한 자동화 파이프라인을 만들어 사용하는 방법을 알려드립니다.

[타깃 독자]
HTML/CSS/자바스크립트 그다음 공부를 준비하는 초보자
실용적인 예제로 웹 서비스 개발에 입문하려는 초급 개발자
아직 웹 서비스 개발 경력이 없는 취준생
풀스택 개발자가 되고 싶은 프론트엔드/백엔드 현업 개발자
웹 서비스 개발 및 운영 팁을 얻고 싶은 웹 서비스 개발자

[크롤링을 해도 되나요?]
이 책은 크롤링 실습에 사용할 웹 사이트를 제공합니다. 따라서 크롤링을 실습하면서 혹시나 대상 사이트가 개편되지 않을까 혹시 법적인 문제가 될까 걱정할 필요가 없습니다(웹 크롤링 자체는 불법이 아닙니다). 단순한 크롤러가 아닙니다. 오토 크롤링 파이프라인을 개발하며 자동으로 크롤링을 수행하고, 크롤링한 데이터를 서비스에 반영하는 방법까지 알려줍니다.

[이 책의 특징]
크롤링 전용 사이트 제공 : 크롤링 전용 사이트를 제공합니다. 그래서 공부하면서 사이트 개편을 염려할 필요가 없습니다. 또한 법적인 문제가 발생하지 않습니다.
실전 웹 서비스 프로그래밍 : 데이터를 자동으로 크롤링하고 웹 페이지에 반영하는 파이프라인을 구축하고, 웹 서비스를 만들어 AWS를 기반으로 배포합니다. 배포 후 검색 최적화, 구글 애널리틱스를 사용한 트래픽 분석까지 실제로 웹 서비스를 개발하는 모든 지식을 알려줍니다.
운영비 절감 아이디어 제공 : 서버 설정, HTTPS, 도메인 설정 등 목적을 달성하면서도 비용을 아끼는 방법을 알려드립니다. 그러면서도 일 200만 뷰 트래픽에도 끄떡없는 서비스를 만들 수 있게 이끌어줍니다.
웹 서비스 지식이 없어도 OK : HTMLㆍCSSㆍ자바스크립트를 익혔다면 웹 서비스 지식이 없더라도 나만의 웹 서비스를 만들 수 있게 알려드립니다.
5단계로 익히는 서비스 개발 : 환경 구축 후 백엔드, 프론트엔드, 웹 서비스 구현(코로나보드), 배포, 운영 및 광고를 5단계로 익힙니다.
유용한 도구가 가득 : 개츠비, 부트스트랩, 구글 테이블, 노드JS, 익스프레스, MySQL, AWS, 클라우드플레어, 구글 애드센스, 구글 애널리틱스, 그래프 시각화(이차트, 구글차트) 등 생산성을 돕는 다양한 도구를 사용합니다.
2가지 광고 수익 창출 서비스 사용 : 구글 애드센스와 쿠팡 파트너스 광고를 적용해 수익을 창출하는 방법을 알려드립니다.

[이 책의 구성]
1단계 : 백엔드에서 서비스 준비하기
백엔드에서는 프론트엔드의 요청에 따라 데이터를 조회 및 가공해 응답합니다. 이번 단계에서는 데이터 종류나 사용 방식에 적합한 데이터 저장소를 선택하고 저장한 뒤, 저장한 데이터를 효율적으로 프론트엔드에 전달하는 방법을 알아봅니다.

2단계 : 프론트엔드로 사용자에게 다가가기
프론트엔드는 백엔드에서 받아온 데이터를 사용자에게 보여줍니다. 기본적인 프론트엔드 개발 환경을 리액트와 개츠비로 구축하고, 다양한 화면 크기에도 최적화되어 보이도록 반응형 레이아웃을 적용하고, 데이터를 그래프로 시각화하는 방법을 살펴봅니다.

3단계 : 〈PROJECT〉 코로나보드 만들기
앞서 배운 내용을 바탕으로 코로나보드와 거의 동일한 기능을 하는 클론 웹사이트를 컴포넌트 단위로 구현합니다. API와 구글 시트 등의 데이터 저장소로부터 웹사이트에 필요한 데이터를 불러와서 UI 컴포넌트에 전달하고, 부트스트랩과 CSS를 이용하여 UI 컴포넌트에 디자인을 적용합니다. 이렇게 만들어진 컴포넌트들을 조합하여 최종적으로 하나의 웹사이트를 완성합니다

4단계 : 〈PROJECT〉 배포하고 운영하기
이제까지 개발한 코드들은 개발 환경에서만 동작했습니다. 이번 단계에서는 실제 사용자가 접속해서 볼 수 있도록 AWS(Amazon Web Service)에서 제공하는 다양한 기능을 조합하여 운영 환경을 구축하는 방법을 알아보겠습니다.

5단계 : 〈PROJECT〉 운영하며 광고 수익내기
서비스를 론칭한 후에는 사이트를 검색 엔진에 알리고 사용자를 모으고 분석하여 서비스를 수익화하는 방법도 살펴봅니다.

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 키워드

권영재 연세대학교 전기전자공학과 학사, 글로벌융합공학과 석사를 졸업하고 LINE에서 라인뮤직 iOS 앱과 서버를 4년간 개발했습니다. 현재는 여행 서비스를 개발하는 스퀘어랩에서 플레이윙즈와 카이트를 만들고 있으며 리모트 워크를 하면서 디지털 노마드로 살고 있는 풀스택 개발자입니다( letmecompile.com ).