[React + Typescript + Express + MySQL] 개발 환경 구축하기[1]

본인은 리액트 타입스크립트를 이용한 프로젝트를 진행하면서 MySQL을 이용한 DB 사용을 위해 React TS와 Express를 이용한 서버, AWS로 구축된 MySQL 로 작성된 DB에 접근하는 생전 처음 겪는 일을 맡게 되었다. 해본거라곤 HTML CSS JS TS React Python C 뿐이었지만 구글링과 구글링, 그리고 구글링을 통해서 서버의 개념과 DB 쿼리문 등에 대해 고민해보고 이것저것 알게 되었다. 

 

참고로 처음 리액트 프로젝트를 사용하는 사람들은 eslint나 prettier 다운받아 설정하여 일관성 있는 코드 작성을 추천하나 본인은 현재 프로젝트에서 사용하는 속성이 있으므로 따로 설치하는 과정은 생략한다.

 

일단 먼저 리액트 프로젝트를 생성한 후 서버 폴더에 서버 파일을 작성하여 클라이언트 단에서 서버단으로 콜을하여 AWS에 올려진 DB(연습중이라면 MySQL 로컬환경을 추천)에 접속, 업데이트, 추가, 삭제 등의 작업을 진행해 볼 것이다.

 

0. MySQL 설치

MySQL WorkBench를 기본적으로 설치해놓자

https://dev.mysql.com/downloads/workbench/

 

1. React TypeScript 프로젝트 생성

 global로 react-create-app 이 설치되어있는 경우에는

npx create-react-app <ProjectName> --template=typescript

을 입력하구 

react-create-app이 전역으로 설치 안돼있으며, react-create-app이 뭔지 모른다 싶으면 다음을 따라하자 cmd나  bash 터미널을 이용해서 다음을 입력하자

npm install create-react-app
npx create-react-app <ProjectName> --template=typescript

그러면 ProjectName으로 폴더가 만들어지고 react project가 생성될건데, 다음과 같은 리눅스언어로 프로젝트에 접속한 후

cd <ProjectName>

yarn이나 npm 을 이용해서 

yarn install 

을 입력 한 후 패키지 설치가 완료되면

yarn start

를 통하여 React TS 프로젝트를 시작해서 Client창에서 자기 입맛대로 꾸며보자!

 

2. Server 파일 작성

리액트 프로젝트 폴더와 같은 레벨에 server 폴더를 만들자.  터미널창에서 server 폴더에 접속한 후 (cd server)  다음 명령어를 입력하자

npm init -y

그럼 package.json파일이 만들어 진 것을 확인 할 수 있다. 이 다음 사용할 라이브러리를 설치해 줄 것이다.

npm install express body-parser mysql nodemon

express, body-parser는 서버간 통신에 사용하기 위해, mysql은 DB 사용, nodemon은 개발환경을 더욱 편하게 하기 위해 사용할 것인데, 차차 사용하면서 알게 될 것이다. 그리고 server폴더 내에 index.js파일을 작성하여 다음과 같이 입력해주자

const express = require('express');  
const app = express();
const PORT = process.env.port || 4000;
app.listen(PORT, ()=>{
    console.log(`running on port ${PORT}`);
});

require 구문은 import from 구문과 비슷하다고 보면 된다. node_modules 폴더 내에 express 폴더의 자료를 불러오는 구문이다.

리액트 프로젝트를 시작할 시 부여되는 로컬 포트 번호는 보통 3000일 텐데 여기서 서버 포트 번호는 3000번을 제외한 숫자로 지정해 주면 된다. 여기선 4000번으로 지정을 하겠다. 

터미널에서 server 폴더로 접속 한 후에

node index.js

를 입력해주면 터미널에 'running on port 4000' 이라 출력이 되면 서버 파일이 잘 작동 하는 것이다. 이제 터미널 창을 닫고, 이제 nodemon으로 개발환경을 편하게 바꿔보자 package.json 파일에서 script 부분에

"start": "node index.js",
"dev": "nodemon index.js"

다음과 같이 추가해 보자, 그리고 터미널에서 server 폴더로 접속한 후

yarn dev  또는
npm run dev

를 입력해보자. 그럼 아까와 같이  'running on port 4000'  이 출력 될 것이다. node index.js 로 실행한 서버는 변경사항이 있으면 저장 후 실행하던 노드 서버를 종료하고 다시 시작해줘야 하지만, nodemon으로 실행한 서버는 변경사항이 있으면 저장만 하면 변경 사항이 서버에 적용된다. 따라서 개발 시 nodemon을 통하여 쉽게 개발을 하자.

 

다음 글에서는 간단한 서버 통신과, 데이터베이스에 접속하는 방법으로 돌아오겠다.