📲 Back-end for Project

백엔드 프로그래밍

프로젝트를 설계할 때 데이터를 보존하고 여러 사람들과 공유하기 위해서는 저장할 공간이 필요하다.

데이터를 보존하는 방법으로는 localStorage ,sessionStorage, cookie등이 있지만
실무에서 핵심 데이터 등을 저장할 때에는 데이터베이스를 사용한다.

데이터베이스의 데이터를 사용하여 다른 사람들과 공유하기 위해서는 서버가 필요하다.
데이터를 무작정 서버에 담지 않고 여러 가지 규칙에 따라 데이터를 다룬다.

이러한 역할을 하는 것이 서버프로그래밍 및 백엔드 프로그래밍이라고 한다.

Node.js와 Koa

Node.js : 자바스크립트를 구동할 수 있는 환경
자바스크립트를 이용하여 서버뿐만 아니라 여러 가지 기능을 할 수 있지만 주로 서버를 구현하는데 많이 사용된다.
Koa : 웹 프레임워크
서버를 더욱 편리하게 구현할 수 있도록 보조해주는 역할

여러 가지 언어로 백엔드 서버를 구현할 수 있지만 javascript로도 백엔드 서버를 구현할 수도 있다.

방법은 Node.js를 활용하는 것이다.

Node.js에서 서버를 구축할 때 보통 Express,Hapi,Koa라는 웹 프레임워크를 사용한다.
그 중에서 Koa라는 웹 프레임워크를 사용해보겠다.

Koa는 미들웨어 기능만 갖추고 있으며 나머지는 다른 라이브러리를 적용하여 사용한다.

또한, Koa는 async/await 문법을 지원하고 있어 비동기 작업을 더 편하게 관리할 수 있다.

설계

1. 만들고자 하는 프로젝트에 front-end와 back-end 폴더를 구분지어 만들어 놓는다.

2. npm init -y
package.json의 값들을 defalut로 설정한 package.json파일 생성

3. 웹 프레임워크 설치 (npm install koa)

ESLint와 prettier 설정(필수 아님)

ESLint : 코드 문법 검사
prettier : 코드를 더 깔끔하게 정리하기 위한 익스텐션

ESLint 설정

• npm add eslint --save -dev
  배포할 때는 포함되지않고 개발할 때는 사용하는 모듈

• npm init @eslint/config
  eslint 기본 설정을 위한 명령어
  이전에는 npm run eslint --init이였지만 명령어가 바뀜.

명령어를 실행하면 .eslintrc.json파일이 생성될 것이다.

Prettier 설정

• 디렉터리에 .prettierrc 파일을 만든다.

• npm add eslint-congif-prettier
  prettier에서 관리하는 코드 스타일은 ESLint에서 관리하지 않도록 eslint-congif-prettier를 설치하여 관리

4. 서버 띄우기
디렉터리에 src디렉터리를 생성하고 index.js 파일을 생성한 뒤 다음과 같이 코드를 입력한다.

const Koa = require("koa")

const app = new Koa()

app.use(ctx => {
	ctx.body = "hello world"
})

app.listen(4000,() => {
	console.log("Listening to port 4000")
})

• app = new Koa()

설치한 koa 모듈을 불러와 new 연산자와 함께 호출해 변수에 할당하면 해당 변수를 활용해 서버를 구현할 수 있다.

• app.listen(port,callback)

app.listen()은 서버를 만들어 사용할 수 있게 하는 메서드이다.
첫 번째 인자로는 서버의 포트번호를 설정하고 두번 째 인자로는 콜백함수를 할당하여 서버를 시작되면 실행될 함수를 할당해준다.

• app.use(ctx , next)

app.use는 미들웨어 함수를 애플리케이션에 등록해준다.
app.use()는 this를 반환하고 체이닝이 가능하다.

미들웨어 함수(middle ware function)
미들웨어 함수는 req(요청) 객체, res(응답) 객체, 그리고 어플리케이션 요청-응답 사이클 도중 그 다음의 미들웨어 함수에 대한 엑세스 권한을 갖는 함수이다.
미들웨어란 간단하게 말하면 클라이언트에게 요청이 오고 그 요청을 보내기 위해 응답하려는 중간(미들)에 목적에 맞게 처리를 하는, 말하자면 거쳐가는 함수들이라고 보면 되겠다.
reference : middle ware function

첫 번째 인자 ctx는 context의 줄임말로 웹 요청과 응답에 대한 정보를 지니고 있다.

두 번째 인자 next는 현재 처리 중인 미들웨어의 다음 미들웨어를 호출하는 함수이다.

미들웨어를 등록하고 next 함수를 호출하지 않으면 , 그 다음 미들웨어를 처리하지 않는다.

next()는 promise를 반환하고 다음에 처리해야할 미들웨어가 끝나야 완료된다.

• async/await
  Koa는 async/await를 사용할 수 있어 비동기 처리를 쉽게 구현할 수 있다.

5. nodemon 사용

서버에 반영하기 위해서 코드를 변경할 때마다 서버를 재시작해야한다.
(node index.js)

이를 보완하기위해 코드를 변경할 때마다 서버에 반영될 수 있도록 nodemon 라이브러리를 사용하자.

• npm install nodemon --save-dev

그리고 명령어를 실행해야 nodemon을 실행할 수 있도록 package.json의 script 명령어에 등록해두자.

"scripts" : {
	"start" : "node src",
    "start:dev" : "nodemon --watch src/ src/index.js"
}

npm run start:dev 명령어를 입력하여 nodemon을 실행한다.

6. koa-router

• npm i koa-router

다른 주소에 다른 작업을 할 수 있도록 하게 하는 koa 라우팅 라이브러리이다.

const Koa = require("koa")
const Router = require("koa-router")

const app = new Koa()
const router = new Router()

router.get("/",ctx => {
	ctx.body = "Home"
})

router.get("/about", ctx => {
	ctx.body = "About"
})

app.use(router.routes()).use(router.allowedMethods()) //app.use chaining

app.listen(4000,() => {
	console.log("Listening to port 4000")
})

• new Router() / router.get...
  koa-router 라이브러리를 불러와 router 객체를 만들고 설정하고 싶은 경로별 작업을 해준다.

• app.use(router.routes()).use(router.allowedMethods())
  서버에 router를 등록해준다.

• 라우트 파라미터와 쿼리
  파라미터와 쿼리를 조회할 때에는 ctx로 조회를 한다.

router.get("/about/:name", ctx => {  
  const {name} = ctx.params	
})

router.get("/about" , ctx => {
	const {id} = ctx.query
})

7. REST API

클라이언트측에서 데이터를 가져오기위해서는 데이터베이스에 바로 접근하는 것이 아닌 서버를 통해 접근해야한다.

서버는 클라이언트의 요청 메서드에 따라 데이터베이스에 접근하여 필요한 데이터를 전달해준다.

이 때 요청 메서드를 Rest API라고 한다.

REST API는 GET,POST,DELETE,PUT,PATCH 등 메서드가 있다.
이 메서드들을 통해 데이터의 조회,추가,삭제,수정 등을 할 수 있다.

클라이언트가 위 메서드들을 사용하여 요청을 하면 서버에서는 해당 요청이 들어왔을 경우 각 요청메서드에 따라 작업을 설정해준다.

NEXT

다음으로 만든 서버와 데이터베이스를 이용하여 REST API로 접근하여 작업하는 것을 계속 해보자.

데이터베이스는 mongoDB를 사용할 것이다.