** npm 패키지가 2021년 기준으로 사용된 것들이 많아서, 버전이 만료되어 실습이 불가한 케이스가 있습니다. 실습을 하지 않아도 되는, 전체적인 흐름을 파악하실 분들만 수강 부탁드립니다 **

# 확진자 지도 서비스가 무엇인가요?

** npm 패키지가 2021년 기준으로 사용된 것들이 많아서, 버전이 만료되어 실습이 불가한 케이스가 있습니다. 실습을 하지 않아도 되는, 전체적인 흐름을 파악하실 분들만 수강 부탁드립니다 **

바이러스가 한창 기승을 부릴 때, 많은 개발자가 바이러스의 국내 현황, 경로 등을 알려주는 지도 서비스를 만들어 배포하였습니다. 특히 이러한 지도 서비스는 직관적으로 바이러스의 현황을 파악하기 쉽게 개발되어, 많은 사람이 도움을 받았는데요!

향후 지속적인 비대면 상황은 이러한 직관적인 서비스를 개발하는 것이 점점 더 중요해지고 있다는 것을 알 수 있습니다. 본 클래스를 통해 이러한 서비스를 만들기 위한 A-Z까지 정리하여 여러분께 손쉽게 알려 드리고자 합니다.

# 이 클래스에서 배우게 될 내용은 어떠한 것인가요?

우리가 흔히 접하는 웹사이트는

1. 화면을 나타내는 프론트 엔드 front-end,

2. 비즈니스 로직을 구현하는 백엔드 back-end,

3. 데이터가 쌓이는 DB 서버

4. 웹에서 소통하게 만들어주는 서버 셋팅

4가지 단계가 모두 완료된 상태입니다.

이 클래스를 수강하시면, 여러분은 풀스택(Full-stack), 즉 React.js (front-end), Node.js (back-end), MySQL (DB), AWS (DB서버, 웹 서버)를 사용해 4가지 단계를 모두 배우게 됩니다.

# 여러분이 직접 확진자 지도 서비스를 개발하게 됩니다!

1. React 서버를 사용해, 원하는 디자인의 UI를 화면에 나타낼 수 있습니다.

2. Node 서버를 사용해, React 서버와 DB 서버 사이에 데이터를 주고받을 수 있습니다.

3. DB 서버에 데이터를 조회, 삽입, 수정, 삭제 기능을 구현할 수 있게 됩니다.

4. 로컬 PC에서 구현한 1~3번 기능들을, 외부에서도 접속 가능한 AWS 서버에 배포할 수 있습니다.

5. 1 ~4번을 한 세트로 프레임워크화해서, 원하는 기능을 확장해 개발할 수 있도록 하는 것이 이 수업의 목표입니다.

6. 또 카카오 지도를 사용하며, 외부 API를 사용하는 방법을 익히게 됩니다.

# 해당 클래스가 타 개발 클래스와 다른 점은 무엇일까요?

1. 프론트, 백엔드, DB, 서버 세팅, 소스 배포 모두 학습합니다.

2. 웹 프로젝트의 필수 개념&요소도 학습합니다.

3. 그대로 따라 하면 되는 강의자료를 제공 드립니다.

4. 비전공자와 IT 업무를 했던 경험을 토대로 굉장히 쉽게 설명해드려요.

# 어떠한 분들에게 추천하는 클래스인가요?

1. 개발부터, 직접 클라우드 서버 배포까지 하고 싶은 분들

2. IT 지식이 부족해서 개발자와의 협업이 힘든 기획자, 디자이너, 마케터, 영업, 창업자분들

3. 다른 언어 개발자이면서 언어 폭을 넓히려는 분들

4. 나만의 디자인, 데이터의 웹사이트가 필요한 분들

5. 웹으로 시연 가능한 포트폴리오가 필요한 분들

# 클래스에서 사용하는 제품 및 개발 도구

• 리액트 (React) 란?

페이스북에서 개발한 자바스크립트 라이브러리인데요. 사용자 인터페이스 즉, 웹사이트의 화면(view)을 만드는 언어입니다.

리액트에서는 컴포넌트라는 화면 구성 단위가 있습니다. 화면 구성 요소를 모듈화해서 필요한 부분에 이식하기 편리합니다.

컴포넌트를 사용하면 여러 페이지에서 공통으로 사용하는 화면을, 하나의 부품처럼 구현해 재사용할 수 있습니다.

• 노드 (Node) 란?

​노드 또한 자바스크립트 기반의 언어입니다. 리액트가 화면을 구성하는 데 사용됐다면, 노드는 눈에 보이지 않는 복잡한 로직이나 데이터베이스를 연동하는 데 사용됩니다.

그래서 노드를 보통 백엔드 언어로 많이 사용하는데요. 프론트엔드 언어와 백엔드 언어의 가장 큰 차이점은 백엔드 언어만 데이터베이스를 연동할 수 있다는 것입니다.

• MySQL이란?

​데이터베이스를 관리하는 시스템 중 하나로, 백엔드 서버에서 파라미터를 전달받아 데이터를 조회, 등록, 수정, 삭제하는 기능을 수행합니다.

데이터베이스를 사용하는 이유는, 데이터를 유지하기 위해서입니다.

리액트나 노드에서 사용한 데이터는 일시적이어서 시간이 지나면 사라집니다. 이 데이터가 사라지지 않고 유지할 수 있는 건 데이터베이스에 저장되기 때문이에요.

• AWS (Amazon Web Services) 란?

위에 설명 드린 리액트, 노드, MySQL을 PC(개인 노트북, 데스크탑)에서만 개발한다면, 완성한 결과물을 나만 볼 수 있습니다. 다른 사람들에게 내 사이트를 공개하고 싶다면,

'외부에서 접근 가능한 서버'에서 프로젝트를 실행시켜야 해요. aws와 같은 클라우드 서비스는 '외부에서 접근 가능한 서버'를 아주 쉽고 간단하게 만들 수 있게 해줍니다.

클라우드 서버가 없다면 개발자가 별도의 고가의 하드웨어를 구입해, 운영체제를 설치하고 복잡한 과정을 거쳐서 서버 세팅을 해야 합니다.

하지만 클라우드 서비스는 자신들이 세팅해놓은 하드웨어를 필요한 만큼만 대여해주기 때문에, 저렴하고 효율적으로 서버를 사용할 수 있습니다.

# 실습 환경 안내

• 윈도우 운영체제를 사용하는 데스크탑 혹은 노트북 컴퓨터가 필요합니다.

• AWS에 가입하려면 결제수단을 등록해야 합니다. 해외결제가 가능한 visa 나 master 카드가 필요합니다. 체크카드, 신용카드 모두 가능하며, 무료 버전 (프리티어)를 사용하기 때문에 과금이 되지는 않습니다.

# 본 클래스 크리에이터님의 수강생 리얼 후기