React를 활용한 고객 관리 시스템(2)

본 내용은 React를 활용한 고객 관리 시스템(1) 의 내용과 이어서 설명한다.

우선 server.js는 어떤 역할을 하는지 살펴보자. 크게 세가지를 중심으로 살펴보면 된다. 

post 요청이 들어왔을때 어떻게 처리하는지, delete 요청이 들어왔을때 어떻게 처리하는지, DB는 어떻게 연결하는지. 

부가적으로 cors라는 라이브러리를 설치하여 사용하였는데 cors는 Cross-Origin Resource Sharing의 약자로 웹을 개발하는 초보자의 입장으로서 한번씩 겪을 것이라고 생각된다. 이는 나중에 따로 다루도록 하고 현재는 위에서 언급한 세가지를 중심으로 server.js의 소스코드를 확인해보도록 하자. 

 

database.json

원하는 DB에 연동하기 위해 DB에 정보가 담긴 database.json 파일을 하나 생성하여 정보를 입력한다. 작성자는 로컬 호스트 mysql에 연결하기 위하여 주소를 "127.0.0.1"로 설정하였고 mysql 포트번호인 3306을 지정하였다. 

node.js express와 mysql 연동

const fs = require("fs") 로 fs를 받아와 선언하고 readFileSync("경로명")으로 값을 받아와 data라는 변수에 담는다. 

(* readFile => 비동기 readFileSync => 동기)

받아온 data 값을 JSON형식으로 parsing해주고 parsing한 값들을 mysql.createConnection에 객체에 다시 대입해주고 connect를 진행한다. 

 

post 요청 시 처리

'/api/customers'로 post 요청이 들어오면 다음과 같이 처리한다. upload는 multer 패키지를 다운받고 사용한다. 

const multer = require('multer')로 선언한 다음 const upload = multer({dest: '경로'}) 이렇게 설정해주면 form으로 받은 파일이 저장될 위치가 '경로'로 들어가게 된다. 이전에 upload라는 폴더를 만든 이유가 이것 때문이다. 그전에 작성해야할 내용이 있다. app.use('/image', express.static('./upload)) 사용자 입장에서는 '/image'로 접근을 하는데 실제 서버에 './upload'와 매핑한다.  

 

post 요청에 응답으로 connection.query()안에 들어갈 sql문과 params를 작성하였고 쿼리문 안에 값(rosw)을 응답으로 주었다. 

여기서 응답 헤더에 "Access-Control-Allow-Origin"을 "*"를 주었는데 cors를 설정해주기 위해 작성한 것으로 브라우저에 리소스에 접근하는 임의의 origin으로부터의 요청을 허용한다고 알리기 위한 것이다. 

 

delete 요청 시 처리

delete 요청은 post보다 훨씬 간단하다. sql문에는 지정된 id값에 맞는 값을 삭제하도록 하면 된다. 우리가 보는 웹 상에서는 삭제요청을 하면 사라지지만 DB에는 남기기 위해 isDeleted 속성과 위에 post 요청 사진을 보면 now()라는 속성을 추가하였고 다음과 같이 코딩하였다. 

 

server.js 소스 코드

server.js의 전체 소스 코드이다.