230209 - Express 서버 기본 제작, 클라이언트 - 서버 연결

오늘은 Express 프레임워크로 서버를 만드는 솔로 프로젝트를 했다. 

기본 서버 구현 내용은 간단하다. 

 

✅ 기본 형태로 서버 구현

1. 서버 틀 만들고 필요한 경로로 라우팅하기 

 

코드를 보면 가장 먼저 express 모듈을 불러온다. (express는 npm으로 설치가 필요하다)

cors 처리를 해줄 cors 미들웨어와 http 요청 logger를 편하게 사용할 수 있는 미들웨어인 morgan을 설치하고 불러온다. 

morgan은 요청과 응답에 대한 정보를 콘솔에 기록한다. tiny 옵션을 사용하면 최소화된 로그를 확인할 수 있다. 

 

morgan으로 기록된 콘솔

app.use()를 통해서 모든 요청에 적용하도록 한다. 미들웨어는 순서가 중요하기때문에 다른 코드들보다 상위에 위치하도록 해야한다. 

포트는 4000번으로 열고, 곧 작성할 discussionsRouter를 불러온다. /discussions 경로로 요청이 들어오면 discussionRouter로 라우팅하기 위해서이다. 

 

서버의 확인을 위해서 루트 경로(/)로 들어올 경우 200 ok 상태코드와 특정 텍스트를 응답하게 하도록 했다. 

서버가 켜지면 콘솔을 통해 메시지와 현재 실행되고있는 url을 콘솔에 출력한다. 

 

 

2. 라우터 설정하기

우선 컨트롤러를 불러온다. module.exports = {} 형태로 적혀있기때문에 구조분해할당을 통해 컨트롤러를 가져오고 컨트롤러 내부의 메서드들을 구조분해할당으로 가져온다. 

라우터를 불러온 다음 원하는 요청과 경로에 실행할 메서드를 지정해준다. 코드에서는 /로 되어있지만, 이것은 /discussions 경로로 들어왔을때의 루트 경로를 의미함으로 사실은 /discussions를 의미한다. 마찬가지로 아래의 /:id도 /discussions/:id를 의미한다. 

 

 

3. 응답 내용 구현

 

각각의 http 메서드와 경로로 요청이 왔을때 응답할 내용들을 설정한다. 

findAll의 경우 모든 데이터 목록을 조회하는 요청이다. 따라서 json 형태의 모든 데이터 배열을 응답 본문에 담아 보낸다. 상태코드는 200이다. 

 

findById의 경우 파라미터로 들어오는 id값을 이용해 데이터 내에서 같은 id를 가진 객체만 응답한다. req.params를 이용해 요청받은 id값을 가져오고 filter 메서드를 사용해 같은 값을 가진 객체를 새로운 배열로 가져온다. 이때 파라미터는 문자열임으로 Number를 사용해 타입을 변환했다. 만약 데이터가 없을 경우 빈 배열과 함께 404 상태코드를 응답한다. 데이터가 있다면 객체만을 응답하기 위해 스프레드 연산자를 통해 배열 내의 요소를 펼쳐서 보내주었다. 

 

 

 

이렇게 만든 서버와 예전에 만들어두었던 클라이언트 부분을 연결해보기로 했다. 

클라이언트는 html, css, js로 작성되어있고 더미데이터 파일을 데이터로 가져와 스크립트를 통해 화면에 뿌려주고 있다. 

 

 

본래 클라이언트에서 데이터를 렌더링해주는 코드는 다른 js 파일의 배열을 불러와서 for문을 통해 렌더링해주었다. 

하지만 이제 서버에서 데이터를 받아올 것임으로 fetch api를 사용한다. 

 

 

fetch를 통해 새로 구현한 배열을 렌더링하는 코드이다. 

.then 메서드를 통해 response를 json()으로 파싱하고 그 다음의 then에서 data를 설정해준다. 

처음에는 fetch를 특정 변수에 담으려고 해서 제대로 구현되지 않았었다. 비동기와 Promise에 대한 이해가 부족했던것같다. 하지만 소그룹 회고를 하면서 다른 분들의 코드를 보고 고칠점을 떠올릴 수 있었다. 

상단에 data 변수를 선언해두고 fetch가 실행될때 렌더링 해줄 데이터를 최종적으로 설정하는 것이다. 

해당 코드는 로컬 스토리지에 데이터가 있다면 JSON.parse()로 로컬 스토리지의 데이터를 가져오고, 그렇지 않다면 서버로부터 가져온 데이터를 렌더링한다. 

 

아래는 asnyc/await로 구현한 코드이다. 

 

 

dataSet()이라는 async/await 함수를 선언하고, 렌더링 할때 데이터도 await로 꺼내와서 data 변수에 넣어준다. 

 

 

 

 

 

********

 

 

이렇게 서버를 만들고 클라이언트와 연결도 해보았다. 클라이언트는 바닐라 js로 작성되어있기때문에 리액트로 리팩토링하는 과정을 지금 하고 있다. 아마도 주말 중으로 업로드할 수 있을것같다. 

오늘도 열심히 했고... 내일도 화이팅!