풀스택으로 코로나 확진자 지도 서비스 만들어보기

📌  프론트엔드(reactjs), 백엔드(nodejs, mysql 데이터베이스), 클라우드 서버(aws) 영역을 모두 이용하기 

 

React.js란?

 

📌 페이스북에서 개발한 자바스크립트 라이브러리입니다.

📌 Component 단위로 화면을 구성해, 코드 가독성, 이식성, 재활용성이 좋습니다.

 

📌 화면에 구성요소를 그려주는 렌더링 효율이 좋습니다.

📌 한마디로, 사용자 눈에 보이는 화면 영역(프론트엔드)을 효율적으로 구현하는 언어입니다.

 

 

Node.js란?

📌 자바스크립트 기간의 백엔드 지원 언어입니다.

 

📌 쉬운 자바스크립트 언어로 복잡한 백엔드 서버 구현이 가능합니다.

📌 비동기 방식으로 동작해, 개수는 많지만 크기가 작은 데이터를 주고 받는데 유리한 언어입니다.

 

📌 쉽게 말하면, DB를 연결하고 복잡한 로직을 수행할 수 있는 언어입니다. (프론트엔드 언어인 react에서는 DB를 연결할 수 없습니다.)

 

 

MySQL이란?

 

📌 무료 오픈소스 관계형 데이터 베이스 시스템입니다.

📌 웹 사이트에 필요한 정보를 영구적으로 보관, 관리해줍니다.

📌 사이트에 접속한 사용자는 조회, 저장, 수정, 삭제 기능을 사용합니다.

 

AWS란?

📌 클라우딩 컴퓨팅 서비스로, 내 컴퓨터가 아닌 인터넷으로 연결된 다른 컴퓨터를 사용할 수 있게 해주는 서비스입니다.

 

📌 쉽게 말하면 컴퓨터를 온라인으로 대여해주는 서비스입니다.

 

📌 사용자는 필요한 만큼만 지불하고 컴퓨터 자원을 사용합니다.

📌 수업에서는 mysql 서버로 사용할 RDS 인스턴스, react와 node서버를 배포할 EC2 인스턴스를 사용합니다.

 

📌 React는 html, css, javascript를 사용해 화면을 구성합니다.

📌 Node는 React서버의 호출을 받아, 실행할 Mysql쿼리를 mysql서버에 전달합니다.

 

📌 Mysql에서 실행한 쿼리 결과를, React서버에 전달해 화면에 표시합니다.

📌 React > Node > Mysql를 모두 AWS에 배포하면, 외부에서도 접속가능한 서비스가 됩니다.

 

라우팅 : 호출되는 경로에 맞는 화면 또는 로직을 매칭해 주는 것. 

리액트에서는 화면을. 노드에서는 로직을 매칭해줌. 

 

📌 npm은 node package manager로 프로젝트에 필요한 패키지을 다운로드 및 설치해줍니다.

 

📌 yarn도 npm과 기본 기능은 동일합니다. 페이스북에서 npm을 경량화해 만든 패키지입니다.

---

프록시를 사용하는 이유

 

📌 react에서 node서버 경로를 호출할 때, 호출 URL을 간호화 하기 위해 프록시를 사용합니다.

예) localhost:5000/users > /users

 

📌 프록시를 사용하면 cors설정을 하지 않아도 된다.

http (HyperText Transfer Protocol)

- 웹상에서 클라이언트와 서버 간에 요청/응답으로 데이터를 주고 받을 수 있는 프로토콜

 

 

http get메소드

 

📌 get메소드는 쿼리스트링 형태로 데이터를 전달하고, URL에 파라미터가 노출됩니다.

예) ?name=value&name2=value2

 

📌 단순 조회 기능에 사용하기 적합합니다.

 

http post메소드

📌 post메소드는 http body에 데이터를 담아 전달합니다. URL에 파라미터가 노출되지 않고, 전송 길이 제한이 없습니다.

 

📌 조회를 포함해 저장, 수정, 삭제 등 어떤 작업을 수행할 때 사용합니다.

 

cors패키지 설치

📌 node서버에 cors설정을 추가하면, react와 node서버가 서로 다른 서버이지만 프록시 설정 없이 통신할 수 있습니다.

 

📌사용 명령어

cors 패키지 설치 : [npm install --save cors]

 

proxy를 사용하면 

 

const callApi = async () => {

    try{

    const response = await fetch('http://localhost:5000/users');

    const body = await response.text();

    alert(body)

  } catch (error) {

    alert(error)

  }

  };

 

 

여기서 localhost5000을 생략해도 되고 

cors 설정도 불필요함.

 

--> client package.json에 이와 같이 설정 

  "proxy": "http://127.0.0.1:5000/"

 

---

html소스를 jsx에 적용할 때, 주의할 점

 

📌 jsx에서는 꼭 닫아줘야 하는 html태그가 있습니다.

📌 {/* 주석 *}문법으로 주석 처리를 해야 합니다.

📌 하나의 태그로 하위 태그를 감싸야합니다.

 

📌 class대신 className을 사용합니다.

📌 이벤트 핸들러는 카멜표기법을 사용합니다.

 

 

reactstrap이란

📌 bootstrap과 react의 함성어로, react에서 bootstrap을 편하게 사용할 수 있도록 개발된 패키지입니다.

 

state변수란

📌 react컴포넌트 내부에서 관리되는 자바스크립트 객체입니다.

 

📌 javascript와 html코드 영역에서 모두 사용 가능합니다.

📌 state변수의 변화에 따라 화면을 렌더링하거나, 특정 함수를 실행할 수 있습니다.