👨‍💻 DB 연결 (with MongoDB)

📌 지난 Routing작업 요약

지난 포스팅에서 우리는 라우팅 작업을 원활하게 하기위해서 /api 라는 경로를 들어오는 모든 상황에 대한 처리를 해주는 api 폴더를 만들었습니다.

마치 계층적으로 모든 경로들을 분리하여 각 해당하는 계층들끼리 폴더 및 파일들로 묶어서 관리하는 방법인데요, 이렇게 개발을해야 나중에 특정 경로에대한 수정이나 코드삽입이 필요할때 쉽게 그 위치를 찾아갈 수 있습니다.

뿐만아니라 이렇게 기능별로 나누어 파일을 작성하는것은 한곳에 몽땅 때려박아 작성하는 방식보다 각 기능들간에 의존될 가능성 또한 적어집니다. 

(이 부분은 사실 개발자가 유의해서 작성한다면 한곳에 작성한 코드도 의존성은 없을 수 있어요.)

결론,

• 우리는 api관련 경로를 관리해주는 폴더를 만들었다.
• api는 버전별로 관리가 이루어져야 하기때문에 버젼벌관리를 위한 폴더도 생성했다.
• 앞으로 각 기능별 폴더를 v1.0 폴더(버전1폴더)안에 추가를 할 예정이다.

📌 DB 연결하기

이 포스팅은 프로젝트 연습을 위한 포스팅이기 때문에 DB가 무엇인지 MongoDB가 무엇인지 자세하게는 다루진 않겠습니다.

일단 저희가 사용할 DBMS(DataBaseManagementSystem)은 MongoDB입니다.

MongoDB는 NoSQL을 사용하는 DB의 예로 유명하죠.

사실, 이번 프로젝트에 대한 공부를 진행하면서 NoSQL을 왜사용하는지 어떤 장점이 있는지 잘 몰랐었는데 사용하면서 감탄사를 몇번 내뱉은적이 있었습니다. 나중에 시간이 된다면, MongoDB와 관련된 포스팅때 이야기를 진행하도록 하겠습니다.

서버를 개발하면서 DB는 빼놓을래야 빼놓을수가 없죠!

왜냐하면, 다양한 정보를 저장해야하기 때문인데요. 우리가 만든 서버앱과 별도의 프로그램인 DB를 어떻게 연결할 수 있을까요?

바로 Interface를 이용한 연결을 합니다.

DB가 특정 약속된 interface로 데이터를 주고받아 처리를 해주는겁니다. 사실 정확히는 DB가 처리해주지는 않고 그사이에서 우리가 만든 서버와 DB가 의사소통(데이터 주고받기)를 잘 할수 있도록 번역가가 존재해요. 그 친구가 바로 DBMS입니다. 

그래서 지금부터 DBMS와 우리의 서버앱과 연결을 할꺼에요. 이것을 DB connection이라고 합니다.

이 커넥션을 만들기위해서는 커넥션을 만들어주는 특정 모듈을 받아야합니다. 그 모듈의 이름은 바로 mongoose입니다. 다음의 명령어를 콘솔에 쳐주세요.

yarn add mongoose

방금 우리가 설치한것은 mongoDB와 우리의 앱이 연결될 수 있도록 도와주는 모듈을 설치한것입니다. 즉 아직 MongoDB를 설치하지 않았다는 이야기죠. 그렇다면 이제 mongoDB를 설치해야겠죠?

설치를위해서 mongoDB install center로 이동합니다. 

(https://www.mongodb.com/download-center?)

그리고 다음의 사진을 따라 설치를 진행해 주시기 바랍니다.

이후부터 다운로드된 실행파일을 실행시켜줍니다.

간단하게 계속 next를 눌러주다가. 아래의 화면이 나오게 되면 다음의 절차를 따라줍니다.

1. 처음 사용하는 유저라면 Complete를 눌러 자동설정을 따릅니다.

2. 원하는 기능만 사용하고픈 유저라면 Custom하여 원하는 파일만 설치합니다.

이후 계속 Next를 눌러줍니다.

그러다보면 다음의 사지을 만나게되는데, 이때 원활한 개발테스트를 위해서 Compass를 설치해두는것이 좋음으로 좌측 아래의 install mongodb compass 부분을 체크해줍니다.

여기까지가 몽고DB설치의 끝입니다. 

만약 오류가 난다면 다음의 조건에 해당하는지 확인후 조치를 취하시길 바랍니다.

MongoDB 설치오류

문제1. CMD 창에서 mongod를 쳤을때 인식이 안됩니다.

* 해결1

• C드라이브 안에 Program Files 폴더안에 MongoDB폴더가 있는지 확인하고 없다면 생성해줍니다.

* 해결2

• 환경변수가 추가되어있는지 확인한다.
• 환경변수 추가는 [내컴퓨터]우클릭➡[고급시스템설정]➡[환경변수(N)]으로 들어가면 됩니다.
• 그 후 하단 시스템변수 리스트 중에서 PATH 를 편집 선택한다음 아래와 같이  MognoDB설치경로\bin 를 추가하면 됩니다.

👨‍💻 라우팅 (2)

📌 라우팅 (2)

저번 포스팅까지 내용을 간단히 요약해보겠습니다. 

• 깃허브에 업로드를 원활하게(+보안내용은 가리기) 위해서 gitignore을 설정해 주었습니다.
• Koa-router를 이용해서 '/' 경로로 접근시 특정 메시지가 보이게 하였습니다. 

이번에는 저번에 하던 routing작업을 마저 완료하도록 할껀데요. 그 전에 우리가 알아야할 팁들이 있습니다.

저 뿐만은 아니겠지만 개발을 하다보면, 폴더 혹은 파일정리가 정말이지 중요하게 느껴집니다.

비슷한 역할을하는 파일들을 하나의 폴더에 묶는다거나 여러가지 역할을 하는 소스코드 덩어리들을 각각의 역할을 수행하는 여러개의 소스코드로 분리시켜 별도의 파일로 만드는 작업은 생활화가 되어있어야 나중에 프로젝트 규모가 커져갈때 그나마.. 그!나!마! 유지보수를 조금 편하게 만들어줍니다.

(아 이건 사람바이 사람 그리고 실력바이 실력인것 같아요. 제 코드는 유지보수가 어렵게만 느껴지는건... )

routing작업을 할때에도 이 경로를 잘 구분지어 작업하는것 또한! 같은 맥락으로 중요합니다.

앞으로 우리는 REST API 서버를 만들꺼기 때문에 다음을 유의하며 만들어야 합니다.

1. API 버전별 관리

2. 비슷한 역할을 수행하는 기능끼리 관리

3. 각 경로별 수행하는 함수들(Controller) 관리

자 첫번째 조건부터 클리어 하기전에 라우팅 경로를 위한 폴더를 만들어 그곳에서만 라우팅 작업을 처리하도록 api라는 새로운 폴더를 생성해 보겠습니다.

( 경로는 src 폴더 안에 만들어주세요 )

이제 첫번째 조건을 클리어 해보겠습니다.

버전별 관리를 하기위해 각 버전마다 폴더를 하나 만들어주겠습니다. 폴더 이름은 v1.0으로 할게요.

(처음 만드는 버전이기에 v1.0으로 합니다. 경로는 api 폴더 안에 만들어주세요.)

그리고 각 버전별 폴더들을 관리해줄 수 있도록 소스코드를 작성해야 함으로 api 폴더안에 index.js 파일도 같이 생성해 주도록 하겠습니다.

( 이곳에서 각 버젼별 라우팅 연결을 해줄거에요 )

자 잘따라왔습니다. 근데 여기서 우리가 빠뜨린게 하나 있어요. 그게 무엇이냐면 이 api 폴더를 정확히는 api폴더 안에 있는 파일들을 routing 해줄 api/index.js 를 우리가 만든 서버파일 src/index.js 와 연결을 해주어야 합니다.

다음 작업으로 넘어가기전에 이 작업을 먼저 해주고 가도록 하겠습니다.

src/index.js 파일을 열어주세요.

우리가 이전에는 router객체 내장 메소드를 사용할때 get만 사용해 보았는데요. 이 router객체에도 app객체에 미들웨어를 연결했던것처럼 또다른 router객체를 연결하는것이 가능합니다.

( app객체에서와 같이 use 메서드를 사용합니다. ex/ routes.use('/api ', api.routes()) ) 

바로 use 메서드를 사용하기전에 우리가 만든 api/index.js파일을 먼저 src/index.js 상단에 불러와주도록 하겠습니다.

이제 api 안에 index.js를 불러왔으니 연결을 해봐야겠죠?

사용법은 간단합니다. 아래의 소스코드처럼 작성을 해주면 됩니다.

// about routing
const router = new Router();

router.use('/api', api.routes());
router.get('/', (ctx) => {
  ctx.body = '홈';
});

여기서 api 뒤에 routes에 대하여 알아보도록 하겠습니다. 

( 사진을 보면서 알아볼게요. )

우리는 이전 포스팅에서 koa-router 객체를 app에 적용할때 한번 routes를 사용했었는데요.

routes는 우리가 만든 koa-router 객체 (위의 그림에선 router가 되겠네요) 에 연결한 모든 경로들을 의미합니다. 즉 우리는 get을 이용한 '/'의 경로만 있었겠죠? 

다시 돌아와서 router.use()의 괄호안에 또라른 router객체의 routes를 집어 넣는것은 특정경로(여기선 '/api')로 들어왔을때 모두 새롭게 집어넣은 rotuer객체로 연결함을 의미합니다.

뭐 이런모습일까요?

위의 사진에서 예로들어 '/auth' 경로는 위의 '/api '경로와 합쳐져서 '/api/auth' 가 되어지겠네요.

이렇게 외부에서 라우팅 작업을 하고 메인으로 사용하는 라우팅 객체에 합치는 것이 가능해집니다.

일단 우리가 처음으로 만들 라우팅은 REST API를 위한 것임으로 api라는 경로로 만들었습니다.

따라서 같이 코딩작업을 계속 이어나가 볼게요.

이렇게 연결은 했지만... 사실 우리는 api/index.js에 아무 소스코드도 넣지 않았습니다 ㅎㅎ

위와 같이 작성하기 위해서 api 를 router 객체로 만들어주어야 겠죠? 

그럼 다시 api/index.js 파일로 가서 작업을 진행해 보겠습니다.

src/index.js의 api를 router 객체로 만들어준다는 것은 api/index.js에서 router객체를 밖으로 내보준다는것을 의미합니다. 고로 이곳에서도 router 객체를 새롭게 만들어주도록 할게요.

const Router = require('koa-router');
const ver1 = require('./v1.0');

const api = new Router();
/* /api/... */
api.use('/v1.0', ver1.routes());

module.exports = api;

 ( 여기서 밖으로 내보내주는 소스코드는 module.exports 입니다. )

아마 앞선 내용을 이해하셨다면 눈치채셨을 겁니다. 여기서는 버전별 관리를 하기때문에 우리가 미리 생성한 ver1과 api 라는 이름의 router 객체와 또 연결을 해주었습니다. 이런식으로 계층형식으로 연결을 해주어 관리를 해주면 나중에 특정 라우터에서 오류가 나도 쉽게 찾아가 오류를 수정할 수 있습니다.

근데 velopert님 강좌를 보니깐 버전관리 유지보수를 위해서 ver1변수처럼 쓰지 않고 배열을 만들어서 관리를 하더군요. 우리도 고수님의 가르침을 소스코드에 적용시켜 보겠습니다.

const Router = require('koa-router');
// Version 관리 1.0
const versions = {
  'v1.0': require('./v1.0')
};

const api = new Router();
/* /api/... */
api.use('/v1.0', versions['v1.0'].routes());

module.exports = api;

4번째 줄에서 오류가 난다고 걱정하지마세요. : ) 오류가 나는 이유는 우리가 소스코드를 작성하지 않았기 때문입니다 ^^

후... 이제야 첫번째 조건을 클리어 했습니다. 이제 두번째 조건을 클리어해줄껍니다.

두번째 조건은 비슷한 기능끼리 묶어주는것 이었습니다.

이를 위해서 각 기능별 경로를 관리해주는 v1.0/index.js 파일을 생성해 내부 소스코드를 작성해 보도록 하겠습니다.

설명은 위와 같음으로 설명없이 소스코드 작성을 이어갈게요.

현재까지의 폴더구성을 공유합니다.

v1.0/index.js 안에 소스도 공유드릴게요.

const Router = require('koa-router');

const api = new Router();

/* /api/v1.0/... */

module.exports = api;

이제 2번째 조건도 클리어 했습니다. 앞으로 새로운 api요청에 대한 기능을 만들때 기능별로 v1.0폴더안에 새로운 폴더를 만들어 그 안에서 router 경로를 관리하고 위의 사진6번째 줄에서 use 메서드를 통해 연결만 해주면 됩니다.

마치 아래와 같은 사진처럼 말이죠.
( 공부중인 개인 프로젝트 사진입니다. )

오늘 포스팅은 여기까지 작성할텐데요, 사실 라우팅 작업을 얼릉 끝마치고 DB 연결까지 포스팅할 예정이었지만... 생각보다 이부분에 대한 내용이 많아 포스팅 글이 길어지게 되었습니다.

그래서 다음 포스팅에서 라우팅작업 요약 하고 DB 연결을 해주도록 하겠습니다. 

TodoList

1. 라우팅 요약하기
2. DB 연결하기 ( MongoDB )

👨‍💻 Git ignore 설정/ Router 설정

📌 Git ignore 설정

node를 이용해서 개발하다보면 Django나 Rails혹은 Spring과는 다르게 단점이자 장점인 특징이 한가지 발견되어집니다. 그것은 새로 추가하거나 설정해줘야하는 module들이 많아진다는 것인데요.

왜 장점이고 단점인지 알아보겠습니다.

Django와 비교하여 설명해보도록 하죠!  

장고는 python을이용해 웹앱을 만드는 프레임워크입니다. Django는 설치하는 그 자체로 웹 서버를 구축하기위한 거의 대부분의 것들을 만들어줍니다.

( 뭐야.. 개사기자나... )

하지만 장점도 있지만 단점도 존재합니다. 바로 기초적으로 제공되는 기능들이 워낙 많기때문에 이러한 기능들을 찾아 익혀야만 사용이 가능하고 또, 사용하지 않음에도 우리의 저장공간을 차지한다는 단점을 가지고 있습니다.

(별개로 장고는 특성자체로는 비동기를 사용이 불가능합니다 ㅎㅎ.. 이를 추가해준다는 이야기도 있더군요)

그에비해 node를 이용하는 express 마이크로 즉 웹서버를 구축하기위한 최소한의 모듈을 제공합니다. 여기에 더해서 koa는 더욱더 적은 모듈을 제공해주구요! 그렇기 때문에 초반부터 필요한 모듈을 우리가 딱딱 설치하면되기 때문에 Custom이 자유로운 편입니다.

(대신에 개발기간이 길다는 단점이... 주륵)

그럼 이 이야기를 왜 하였는가... 우리가 개발을 하면서 설치하는 하나하나의 모듈은 솔직히 그렇게 큰 용량을 차지하는것은 아니지만, 깃허브에 올릴때는 크게 느껴지곤 합니다. 그래서 보통 node로 개발할때는 이러한 모듈들을 같이 깃헙에 올리지 않습니다.

이유즉슨, package.json에 우리가 설치한 모듈들이 기록이 되어있기 때문에 이 파일만 있다면 npm install 혹은 yarn add 로 관련 모듈들을 한번에 설치가 가능하기 때문입니다.

그래서 우리가 github에 add할때 우리가 이미 설치한 모듈들까지 인식하지 않도록 몇가지 설정을 해주어야 하는데요, 그것을 해주는것이 바로 gitignore입니다.

방법은 간단합니다.

프로젝트 최상단 경로에 .gitignore 파일을 만들어주세요. .env 파일때처럼 파일명 앞에 . 을 붙이는것을 잊지 마시길바랍니다 ㅎㅎ

생성이 완료되었다면 해당 파일을 열어 아래의 내용을 채워주도록 할게요. 아래의 내용은 google에 gitignore 검색하면 나오는것을 발췌한것이랍니다. 보통 default로 많이 사용해요!

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

자 이렇게 앞으로 깃에 올릴때는 모듈을 올리지 않으니 빨리빨리 업로드가 되겠네요 😉

📌 Router 설정하기

일단 앞선 환경설정에서 koa를 설치할때 koa-router도 같이 설치를 했었습니다.

이번에는 koa-router를 설치하고 경로를 폴더단위로 정리하여 개발하는 방법에 대하여 같이 탐구해보도록 하겠습니다.

일단 공식문서를 보면서 코드를 작성해보도록 하겠습니다.

https://openbase.io/js/koa-router

위에 첫번째 캡쳐는 koa-router document에서 발췌한것입니다. 그리고 그아래는 express routing하는 소스를 발췌한것입니다.

이렇게 express와 koa 둘을 두고 보았을때 크게 사용하는 방법이 다르지는 않은것 같습니다. 다른점이라면 express는 자체에 routing관련 메서드가 내장되어있는 한편, koa는 원하는 미들웨어를 설치해 사용한다는 점? 

(여기만 봤을땐, 소스코드 작성하는 개발자입장에서는 koa가 좀더 간결하고 입맛대로 사용할 수 있는정도?)

일단 소스코드를 작성해 보도록 하겠습니다.

우리가 기존에 사용했던 test 응답용 소스는 과감히 지워주시고, routing 작업을하여 '/'경로로 접속했을 때, hello world라는 메시지가 보이도록 소스코드를 채워 넣어보도록 하겠습니다.

// about routing
// ctx는 express로 치면 res,rep가 담겨있는 객체라보면 됩니다.
// next는 다음 미들웨어로 넘겨주는 역할을 합니다.

const router = new Router();

router.get('/', (ctx, next) => {
  ctx.body = '홈';
});

app.use(router.routes());
app.use(router.allowedMethods());

여기서 next parameter는 아직 사용하지 않기때문에 생략하셔두 됩니다.  (ctx, next) --> (ctx)  

여기까지하고 한번 결과를 확인해보도록 할까요?

위와같이 나오셨다면, routing 기초설정이 완료되었습니다. 축하드려요 ^^

이번포스팅은 여기까지 작성하기로 하고, 다음 포스팅에서는 REST API를 위한 Routing 작업을 진행해 보도록 하겠습니다. 그리고 원래는 DB를 먼저 연결하기로 하였는데 포스팅 하는 사람의 순서 착각관계로 꼬여버린 DB연결까지 마무리 지어보도록 하겠습니다. 😉

TodoList

* REST API 구성

* Mongo DB 연결하기

🔨nodemon 설정

이전에 우리가 만든 서버소스는 node를 이용해서 해당 파일을 직접 실행시켜주었습니다.

이런방식의 실행은 개발할때 조금 불편한? 귀찮은? 일이 생깁니다.

우리가 서버를 실행시켜둔 상태에서 특정 소스를 추가한다거나 수정할때 이전과 이후의 결과물은 달라지겠죠? 하지만 서버를 다시 재 실행시키지 않는다면 우리가 추가한 내역이 서버에 반영되어지지 않습니다.

이러한 소스코드 수정여부에 대하여 감지하고 서버를 재 실행시켜주는것을 돕는것이 nodemon의 역할이라고 생각하시면 되겠습니다.

그럼 지금부터 해당 모듈을 설치해보도록 하죠! ( yarn add nodemon )

이제 서버를 실행시킬때 node nodemon --watch  src/ src/index.js 로 실행하면 수정내역이 반영이 되어집니다. ㅎㅎ

( 매번 서버를 실행하려니... 실행문이 너무 길어 귀찮네요 )

이렇게 실행문이 긴것들은 우리가 이전에 만들어두었던 package.json에서 매크로처럼 짧은 문장으로 대체가 가능합니다.

package.json 파일을 열어보면 scripts라는 키를 가진 곳이 보일것입니다. 

그곳에 다음의 내용을 추가하도록하죠

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start:dev": "nodemon --watch src/ src/index.js"
  },

이제 실행시에 yarn start:dev 혹은 npm run start:dev로 실행이 가능해졌습니다.

🔨 보안관련 미들웨어 dotenv, koa-helmet 설치

우리가 만드는 서비스들은 웹상에서 특정유저의 요청을 받고 그에대한 응답을 해주는 방식의 서비스입니다. 이러한 과정에서 악의적인 sql문장을 보내여 DB내의 혼란을 야기시키거나 우리가 주고받는 응답 메시지를 영탐해서 악의적으로 사용하는 사람들이 있습니다. 

이를 위해서 중요한 내용은 따로 숨기거나, 기본적인 보안을 위한 프로그램들을 구축해야 우리의 서버 뿐만 아니라 우리의 서비스를 사용하는 사용자들을 안전하게 만들 수 있습니다.

그래서 첫번째로 해줄일은 dotenv입니다.

dotenv는 중요한 소스 가령 우리가 사용할 port번호나 나중에 사용할 암호화된 pw를 만들때 사용되어지는 key값등을 저장하게 됩니다.

일단 설치해보도록 하죠, yarn add dotenv 해줍시다.

설치가 완료되었다면, 우리가 이전에 만들었던 src 폴더와 같은경로 안에 .env  파일을 만들어줍니다.

그리고 그안에 우리가 앞으로 사용할 서버 포트를 채워넣어주겠습니다.

PORT = 4000

그리고 다시 index.js로 돌아와서 소스코드를 조금 수정해주도록 하겠습니다.

우리가 .env 에 작성한 코드들을 다른 특정 파일에서 불러다 쓰기 위해서는 dotenv 모듈을 import 해주어야 합니다. 이를 위해 다음의 코드를 index.js 상단에 작성해주도록 하겠습니다.

// 환경변수를 불러옵니다.
require('dotenv').config();
const { 
  PORT: port
} = process.env;

이전에 사용했던 const port = 4000 이 코드는 지우고 .env에 작성한 PORT 변수를 가져와서 port라는 소문자이름으로 바꿔 사용해 대체했습니다.

이런식으로 상단에 require('dotenv').config(); 를 작성해주게 되면 process.env에서 우리가 .env에서 작성해준 변수들을 사용이 가능해집니다. 

(왜 이렇게 하냐구요? 나중에 해커가 소스코드를 열어봐도 port나 key와 같이 중요한 값은 볼수 없도록 하기 위해서 입니다 ㅎㅎ)

이제 중요한 값들도 숨겼으니 보안 모듈(미들웨어)를 설치후 연결해 보아요.

우리가 보안을 위해사용할 모듈은 바로 helmet 입니다.

사실 express를 이용해 개발을 조금 해본 친구들이라면 helmet이 뭔진 바로 알꺼에요. 

node.js를 이용해 웹서버를 개발할때 간편하게 기본적인 보안설정을 이 모듈이 다 맡아서 해주기 때문에 꽤나 유명한 모듈입니다.

하지만 우리는 koa에서 사용하기 때문에 일반적인 helmet을 받진 않을껍니다.

(이유즉슨, 뇌피셜이지만 koa는 promise 기반이라 기존helmet과 인터페이스가 맞지 않아서가 아닐까... 싶습니다. 이게 아니라면 가르쳐주세요 ㅎㅎ)

그럼 설치를 진행해 봅시다. yarn add koa-helmet 을 해주시고 index.js를 열어주세요.

그 다음에는 설치한 모듈을 우리의 app에 연결해 주도록 하겠습니다.

일단 설치한 모듈을 상단에 아래의 소스코드를 추가하여 불러와주도록 하겠습니다.

const helmet = require('koa-helmet');

그다음 해줄 연결작업도 마저 해주도록 하겠습니다.

express 나 koa 에서 특정 미들웨어(=모듈)을 연결해줄때는 use라는 메서드를 사용하게 됩니다.

(예를들어 app.use(...) 와같은 형태인거죠)

그래서 우리가 연결해줄 미들웨어는 helmet 이니깐 .use(helmet) 이 될꺼고 이 미들웨어는 우리가 만들 서버 전체에 적용이 되어져야 하니 app에 연결해주어야 합니다. 즉 app.use(helmet)이 되겠네요. 

// 미들웨어 연결
app.use(helmet);

자, 기본적인 보안설정이 완료되었습니다. 가장 많이 시도되는 웹보안 공격에 대해 이친구가 대처를 잘 도와줄껍니다.

이번 포스팅은 여기서 마치고, 다음포스팅에서는 router 설정전에 DB 연결처리를 먼저하고 그 이후에 router 처리를 해주도록 하겠습니다.

todoList

* DB연결 / MongoDB

* Router 연결

🔨 웹프레임워크 설치 Koa

index.js에서 서버관련 소스코드를 작성하기 위해서는 이를 도와주는 프레임워크를 사용해야합니다.

back-end에서 이번에 사용할 프레임워크는 koa라는 프레임워크입니다. 물론 node에서는 express가 제일 유명하나.. 같은 제단? 회사? 에서 현재도 가볍기는 하지만 이것저것 많이 제공해서 무거운 express대신에 비동기와같은 기능은 보강해서 다시만든 koa를 출시했습니다. (저도 잘은 몰라요 ㅎㅎ)  koa는 REST API용 서버를 만들때 강하다는 장점이 있다고 하니 이것을 채택해 사용하겠습니다.

yarn 을쓰신다면 yarn add koa koa-router, npm을 쓰신다면 npm i koa koa-router를 입력해줍니다.

설치가 되셨다면 VSCODE에서 index.js파일을 열어주세요

일단 koa 프레임워크가 익숙치않은 뉴비이기 때문에 정석대로 koa document를 많이 참고하여 만들어보도록 하겠습니다.

(모르는건 질문해도 좋으나, 답변을 못할수도 있어요 ㅎㅎ... 답변이 가능하도록 열심히 공부할게요.) 

https://devdocs.io/koa/

일단 공식문서를 보아하니 기존에 사용하던 express문법과 거의 흡사합니다. 다른점이라면 미들웨어를 처리하는 정말 조금의 문법정도..?

const Koa = require('koa');

// app을 생성해줍니다.
const app = new Koa();
// 서버에서 사용할 포트를 불러옵니다.
const port = 4000;

// test 응답
app.use(async (ctx) => {
  ctx.body = 'Hello World';
});

// app을 활성화상태에 둡니다.
app.listen(port);

일단 위의 소스코드를 index.js에 저장하고 콘솔에가서 node index.js를 통해 실행시켜 봅시다.

(실행 후 브라우저로가서 http://localhost:4000/ 경로로 접속시 다음과 같은 화면이 뜬다면 성공입니다.)

일단 koa를 사용하는데까진 성공했습니다. 조금 아쉬운점은 콘솔창에서 서버가 실행중임을 나타내는 문구가 나왔으면 좋겠네요. 그래서 소스코드를 조금 수정하여 다음과 같이 나타내볼게요.

const Koa = require('koa');

// app을 생성해줍니다.
const app = new Koa();
// 서버에서 사용할 포트를 불러옵니다.
const port = 4000;

// test 응답
app.use(async (ctx) => {
  ctx.body = 'Hello World';
});

// app을 활성화상태에 둡니다.
app.listen(port, () => {
  console.log(`✅  MEMO server is listening http://localhost:${port}`);
});

아주 좋습니다. 오늘은 여기까지 포스팅을 마치고 다음 포스팅에서는 아래의 일들을 처리해보도록 하겠습니다.

📌 Todo List    

* nodemon설정

* 우리의 app을 위한 기본적인 보안미들웨어 추가

* REST API시 각 URL요청 처리를 위한 router 설정

🔨 개발환경구축 

nodeJS라이브러리인 Koa.js를 이용해서 Back작업을 해줄겁니다.

일단 환경부터 구축하겠습니다.

🔨 폴더구성

본인의 컴퓨터의 적당한 장소에 Momo라는 폴더를만들어주세요. 

그리고 VSCODE에디터로 해당 폴더를 열어주세요.

그다음에  npx create-react-app front  라고 콘솔창에 쳐줍니다.

(이후에 있을 우리의 front-end 작업을 위한 폴더입니다.)

그리고 front 폴더와 같은경로에 back이라는 이름의 폴더도 만들어줍니다.

(앞으로 작업할 back-end 작업을 위한 폴더입니다.) 

위의 절차가 마치셨다면, VSCODE를 끈후에 방금생성한 back폴더경로로 VSCODE를 다시켜줍니다.

(당분간은 front작업보다는 back작업위주로 할터이니 이렇게 설정해줍니다.)

🔨 npm init

back폴더 안에는 우리의 API서버의 역할을해줄 몇가지 파일들을 만들어줄겁니다.

그전에 npm init 이라는 명령어를 통해 현재폴더에 package.json파일을 만들겠습니다.

(package.json은 프로젝트에관련 정보들이 적혀있는 파일입니다. 이파일이 있어야 추후에 버전관리나 다른 개발환경에서의 초기설정이 쉬워진답니다.)

추가로 package.json이 생성된 경로에 src 이름의 폴더를 만들고 그안에 index.js 파일을 생성해줍니다.

(앞으로의 back-end 관련 파일들은 src폴더안에서 다뤄지게 됩니다.)

🔨 eslint 설정

이번에는 eslint를 설정해줄꺼에요. eslint가 무엇이냐면, js언어는 다른 타개발언어에 비해 자유로운 문법의 이유로 개발사마다 코드 스타일이 재각기 다르게 나옵니다. 예를들자면 세미콜론같은거죠

(세미콜론이 없어도 자동으로 적용이 되어집니다. 즉 ;은 써도그만 안써도 그만) 

이런 코딩스타일을 제한하여 일관성있는 코딩스타일을 만들어 나 이외 타개발자가 보아도 이해되도록 돕습니다.

(사용하는 이유는 다양하니 검색해보시길 바랍니다.)

yarn을 사용하신다면 yarn add --global eslint, npm을 사용한다면 yarn add 대신에 npm install 혹은 npm i로 바꿔치시면 됩니다.

설치가 완료되면, 또다시 콘솔창에 eslint --init 이라는 명령어를 쳐줍니다. 그다음에 나오는 질문은 아래의 사진을 따라오시길 바랍니다.

여기까지 잘 따라오셨다면 환경설정의 대부분이 완료되었습니다. 

다음 포스팅에서는 실질적으로 웹서버의 역할을 수행해줄 index.js에대해 설정을 끝마쳐보도록 하겠습니다.