REST API를 사용하여 서버 설계 및 구축하기 #_0

🔥 내용 들어가기 전 별 관련없는 주절주절임

 

내용과 별 관련없는 귀여운거 ;;

어제에 이어 오늘도 내가 벌려놓은 프로젝트 중 하나인 내용을 기록해보고자 다시 왔다 .. 아무래도 난 세미관종에 프로블로거인가보다 ㅎㅎ 아냐 .. 블로그에 기록하면 좋지... 좋아.... 나중에 보면 재밌고... 엄 그렇지 ㅎㅎ 작년에 회사 과제 프로젝트 할 때 열심히 개발일지썻던 것이 갑자기 생각나서 열심히 개발일지 써보고자 이렇게 기록하는 것임 ^__^

 

그래서 이번에 기록할 프로젝트는 웹앱이 목표고, 실제 서비스 운영이 최종목표임 ㅇㅅㅇ 👍🏻 이 기획은 뭔가 옛날부터 내가 쓰려고 만들고 싶었던 건데 고냥 친구한테 우연히 말하다가 오 이거 괜찮은데? 싶어서 바로 플젝 들어간 .. 그런 사연이 있다. 사실 혼자는 개발할 생각 없었던거임 ㅋㅋ

 

🔥 퇴근을 앞둔 개발자들.... 개발하다 미쳐...카톡을 하는데....?

퇴근 1시간 전 카톡하다 급 삘 받아서 프로젝트 바로 시작하기로 결심 ㄱㄱ 같이하는 친구는 나으 3학년 초반 짝궁이자, 내 다꾸메이트이자, 귀여운 스티커 있으면 항상 사다주는 사람,, A.K.A 수업시간에 같이 맨날 스티커 정리하고 다꾸하다 걸린 전적이 많은 .. 고런 프론트 개발자님 ^_^

그렇게 💩기획 똥 싸기라는 노션 페이지가 탄생했고, 퇴근시간까지 열심히 1차 똥을 적기 시작했다. 지금보면 진짜 말도안되는 내용이 많지만 이때 싸지른 글들로 기획 성사 된 것이 많음 ㅎㅎ 역시 일단 싸지르고 보는 법 !

 

사실 말 나오고 노션 판 것은 6월 쯔음... 이었고 오랜만에 얼굴도 볼 겸 함 만나서 망원동 투어와 카페에 가서 기획 정리하고 이것저것 얘기 했는데 둘다 까먹고 한 3개월 흐름 .. 

 

정신차리고 보니 9월 ,, 본격적으로 프로젝트 끝내자! 싶어서 얼른 피그마 파고 깃허브 레포도 파고..... RDS도 생성했다. 

-

어쩌다보니 프로젝트 할 때 거의 백엔드를 맡고 있는 것 같다. 근데 사실 내가봐도 난 프론트도 아니고 백엔드도 아니라서 .. 애매한데 ....... 프론트를 하자니 대부분 리액트라.... (리액트 포기한 사람 = ME) 어쩔 수 없이 (?) 백엔드를 맡게 되는 것 같음. 근데 동아리것도 하고 회사 일도 하면서 요즘 백엔드 쪽으로 머리도 잘 굴러가고 AWS때문에 화나는 일이 이만저만이 아니라 많이 찾아보게 돼서 백엔드 쪽 하는 것도 만족하며 하는 중임 ㅎㅎ 

 

🏃🏻 본격적으로 서버 구축을 해보자 ......

백엔드가 해야하는 역할이라고 하면 일단 디비 관리와 서버, api 관리 라고 생각한다. (갠적인 생각임 ㅎㅅㅎ) 단계별로 세분화를 하자면,

 

1. 디비 구축

2. 서버 구축

- api 구축 (프론트에서 접근할 수 있도록)

- api 맞는 함수 구현

 

간단하게 이렇게 생각한댜!

 

혼자 백엔드를 맡기 때문에 어떤 걸 쓸지는 모두 내 자유다 ~~ (좋다고 생각하면 경기도 오산쓰 해야할 일 산더미 ⛰) 회사에서도 그렇고 평소에 쓰는 기술스킬은 mysql + sequilize + graphql (typegraphql) + typescript에 익숙해져있다. 특히 graphql .... 작년 현장실습 때 부터 api라 하면 graphql밖에 써보질 않아서,,,,,, 물론 graphql이 최고고 아직까지도 불편한 점을 한번도 못느꼈다. 하지만 협업에서 유일한 단점이라면, rest에 비해 프론트 쪽에서 요청을 하려면 어느정도 문법을 익혀야한다는 것. 

 

이것저것 생각했을 때 이번 프로젝트는 graphql이 아닌 rest가 더 적합할 것 같았다. 결론은 첨으로 rest api를 써본다는 것 ,,, ㅎㅎ^^ 또한 mysql이랑 시퀄라이저 조합으로 사용할 것 같다.

-

실제로 운영되는 디비 좀 봤다고 이제 디비는 어느정도 감이 잡힌 것 같다 .. 학교다닐 때는 그렇게 이해가 안가더니만 ,, 몇개월만에 쉽게 이해함 (테이블 구조라던가,, 관계 이런것들.......역시 실무 경험이 짱임)

 

https://www.erdcloud.com/d/Rqoj52to47sRHg9Jn

exchange-diary

erd구조는 몇시간 동안 고민하다가 겨우 짬 .. 생각보다 디비 구조가 복잡해지고 생각해야될 것이 많아서 고민을 많이 했던 것 같다. 첨부한 링크 사이트에서 주로 erd다이어그램 만드는 데 강추임 ㅎㅎ 짱편함

 

지금 아마존 계정으로 rds 두개랑 ec2 하나 돌리고 있는데 켜놓으면 돈 나가는지도 모르고 한달내내 켜놓고 있다가 어제 3만원 빠져나감 ........ (아마존 ㅂㄷㅂㄷ) 식겁하고 당장 다 꺼놓음

 

아 이 얘기를 적으려는 건 아니었는데 .. 하튼 RDS도 생성했음! 

쨘 .. 근데 중지시켜놓음 ㅎㅎ 당근 워크밴치에서 접속도 잘 됨 ~~ 테이블 생성은 다 해놓은상태이당. 몽고를 쓸까 mysql을 쓸 까 고민했지만 확실히 관계성 이런 건 mysql이 더 직관적이라 (사실 몽고 다 까먹음) mysql로 선택함 

 

rds도 잘 생성했고, 그 담은 이제 서버 파일 만들 차례당. 간단하게 서버 폴더 구축하는 것을 적어봐야겠다.

 

🔄 그래서 서버는 어떻게 구현하죠?

내가 보통 프로젝트를 진행하는 방법을 소개한다! 

 

1. 마음 먹었을 때 바로 깃허브 레포를 판다.

2. 레포를 클론한다.

3.

npm init

npm install

4. first commit을 한다.

5. 방치

6. 방치

7. .......

8. 새벽에 생각날 때 삘타서 개발시작

9. 졸려서 다시 잠들기

 

무한굴레다. ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 마음 먹었을 때는 모든 다 할 수 있을 것 같은데 막상 프로젝트 시작하려고 하면 만사귀찮음병 도진다 ... 하지만 오늘은 추석연휴 마지막날이라 우울했으므로 열심히 서버 구축을 했다. 

 

4번까지 하고 5번으로 넘어가기 전에 rest api 예제 몇가지 넣어서 돌려보고 폴더정리를 해놨다. 

 

rest로 간단하게 서버 파일 만드는 것을 소개한다.

// npm 설치

npm i -S body-parser cors

npm i -D @types/express @types/body-parser @types/cors

package.json에 start를 추가해준다.

  "scripts": {
    "start": "nodemon src/index.ts",
    "test": "hello world"
  },

폴더구조는 이런 식으로 되어있다.

// index.ts

import express from 'express'
import cors from 'cors'
import bodyParser from 'body-parser'

const app = express()
const port = 4000


/**
 *  2020.10.04 이유진
 *  REST 방식의 AP서버들은 웹 페이지의 본문 내용을 분석하려고 할 때 bodyParser와 cors 패키지를 use메서드를 사용해야한다.
 */
app
    .use(bodyParser.urlencoded({extended: true})) 
    .use(cors())
    .get('/', (req, res) => res.json({ message: 'hello world' }))
    .get('/hello/:skip/:limit', (req, res) => {
        console.log(req.params)
        res.json(req.params)
    })

    .listen(port, ()=> console.log(`http://localhost:${port} started ... `))
    

index.ts 파일이다. 주석에 달아놓은 것 처럼 bodyParser와 cors 미들웨어를 추가했다. 

 

결과 ㄱㄱ

graphql과 다르다고 겁내하면 안됐다. 요청하는 형식만 다를 뿐 결론적으로 받아오는 것은 동일했음 ㅎㅅㅎ

 

헤맸던 부분이 하나 있었다.

 

⛏  삽질 없는 개발은 정녕 없는 것인가??????????

express() 를 사용해서 분명 서버 접속이 됐다고 뜨는데.... 이상하게 접속이 안된다 ?_? 난 내 코드가 문제있는 줄 알았다. 아무리 몇번을 봐도봐도 문제될만한 부분이 없었다. 당연하지. .. 책 보고 똑같이 따라쳤으니깐 ... 알고보니 더 허무함

 

http://localhost:4000/hello/1/2 이런식으로 http로 접속했어야되는데, https로 접속해놓고 안된다고 했던 거임 ... 그래서 이 참에 제대로 찾아봤다. 도대체 http랑 https의 차이는 뭘까??????

 

http에 s 하나 더 붙은 https의 s의미는 Secure이다. HTTP 프로토콜에 보안 기능을 추가한 것이라고 생각하면 될 것 같다. SSL 인증서라는 것이 필요하다. SSL 인증서는 사용자가 사이트에 제공하는 정보를 암호화함. 데이터를 암호로 바꾼다고 생각하면 된댱. 나중에 본격적으로 서비스를 하려면 https를 어떻게 사용하려는지도 알아야될 것 같다. (일단은 미루기)

 

👏🏻 마무리를 해보자

오늘은 본격적인 개발을 들어가기 전 개발환경 구축단계라고 보면 될 것 같다. 그래서 번호도 0이다. (ㅋㅋ) rest에 대한 고민이 많았는데 생각보다 수월하게 되었다. 겁낼 것 없다 ! 타입스크립트 책 뒷면에 몇장 나와있는 api부분을 참고해서 코드를 짰는데 이게 도움 많이 되었다 ㅎㅎ. 또..... 오늘 개발 한 시간보다 블로그 쓰고 있는 시간이 더 긴 것 같다. 개발환경 구축이 끝났으니 이제 본격적으로 api문서를 작성하며 폴더구조라던지, 네이밍 등 여러가지 정해보려고 한다. 벌써 추석 연휴 끝 시롸냐 그냥 주말처럼 훅 지나간 느낌이다. 😢눈물 작렬

 

다음단계 👉🏻

1. .env 생성 및 디비 연동 (시퀄라이저)

2. controllers, models 구현

 

어쨋건 끗. #1로 다시 돌아오겟삼 !