코로나보드로 배우는 실전 웹 서비스 개발 (Node.js와 AWS를 활용한 설계부터 크롤링, 개발, 운영, 수익화까지)

권영재

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

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.5API서버와데이터베이스연동하기
__2.6API만들기
__학습마무리

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장〈STEP1〉실전크롤러만들기
__8.1크롤링클론사이트소개
__8.2코로나19국내통계크롤러
__8.3코로나19국가별통계크롤링
__8.4동작및데이터확인
__학습마무리

09장〈STEP2〉대시보드와공지사항만들기
__9.1사전준비:라이브러리설치
__9.2대시보드만들기
__9.3공지사항만들기
__학습마무리

10장〈STEP3〉슬라이드만들기I:국가별,글로벌차트
__10.1국가별현황슬라이드만들기
__10.2글로벌차트슬라이드만들기
__학습마무리

11장〈STEP4〉슬라이드만들기II:국내차트,유튜브
__11.1국내차트슬라이드만들기
__11.2유튜브슬라이드만들기
__학습마무리

12장〈STEP5〉메뉴바만들고테스트하기
__12.1사전지식:단일페이지내에서이동
__12.2내부메뉴바만들기
__12.3상단고정메뉴바만들기
__12.4화면최상단이동버튼만들기
__학습마무리

[4단계]〈PROJECT〉배포하고운영하기

__13장〈STEP1〉데이터베이스설정하기:AWSRDS
__13.1사전준비:AWS가입및설정
__13.2데이터베이스서버생성하기
__13.3데이터베이스서버에접속하기
__13.4보안그룹설정하기
__13.5데이터베이스서버접속및기본설정확인하기
__학습마무리

14장〈STEP2〉서비스올리기:AWSEC2
__14.1서버인스턴스생성하기
__14.2서버인스턴스접속하기
__14.3서버인스턴스에필요한프로그램설치하기
__14.4API서버배포하기
__14.5크롤러배포하기
__14.6정적웹사이트빌드하기
__학습마무리

15장〈STEP3〉파일서버운영하기:AWSS3
__15.1S3버킷생성및웹사이트호스팅설정하기
__15.2웹사이트파일을S3에배포하기
__15.3배포스케줄링하기
__학습마무리

16장〈STEP4〉도메인연결하기
__16.1사전지식:도메인과DNS
__16.2클라우드플레어설정하기
__학습마무리

[5단계]〈PROJECT〉운영하며광고수익내기

17장〈STEP1〉검색엔진에알리기
__17.1사전지식:검색엔진의동작방식
__17.2검색엔진에웹사이트등록하기
__17.3검색엔진최적화작업하기
__17.4개츠비기반웹사이트에서메타디스크립션추가하기
__17.5SNS에공유하기
__학습마무리

18장〈STEP2〉사용자분석하기:구글애널리틱스4
__18.1구글애널리틱스로사용자데이터쌓기
__18.2GA웹콘솔에서분석하기
__학습마무리

19장〈STEP3〉광고로웹사이트수익화하기
__19.1구글애드센스로광고수익창출하기
__19.2쿠팡파트너스로광고수익창출하기
__학습마무리

[부록]비동기함수와async,await키워드

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

이책은학습흐름을끊지않기위해개발환경부터미리구축해놓은후,웹서비스를개발하는데필요한지식을배우고나서코로나보드클론사이트를개발합니다.그저따라하는방식이아니라,코로나보드아키텍처구성노하우를설명하고나서구현에필요한지식을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(AmazonWebService)에서제공하는다양한기능을조합하여운영환경을구축하는방법을알아보겠습니다.

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