사내 칸반보드 개발 프로젝트 - 4

사내 칸반보드 개발 프로젝트 -3

스타트업 프론트개발자의 칸반보드  풀스택개발기

드디어 첫 백엔드 개발이 시작되서 걱정반 설렘반입니다.

역시 node js api 서버 개발 검색하니 무수히 많은 예제가 나와서 어렵지 않았습니다.

 

나는 프레임 워크 express를 선택했다.

먼저 간단하게 express에 대해서 설명을하자면

Express.js는 Node.js를 위한 간결하고 유연한 웹 애플리케이션 프레임워크입니다. Express는 Node.js 애플리케이션의 서버 측 로직을 구현하기 위한 다양한 기능을 제공하여, 서버를 쉽게 구축하고 관리할 수 있도록 도와줍니다.

주요 특징

1. 간결함: Express는 경량 프레임워크로, 필요에 따라 기능을 확장할 수 있도록 최소한의 기본 기능만 제공합니다.
2. 유연성: 다양한 미들웨어와 플러그인을 사용하여 애플리케이션의 기능을 확장할 수 있습니다.
3. 라우팅: 강력한 라우팅 시스템을 제공하여 URL 경로와 HTTP 메서드(GET, POST 등)를 기반으로 요청을 처리할 수 있습니다.
4. 미들웨어: 요청과 응답 객체를 처리하는 데 사용되는 함수의 계층 구조를 쉽게 정의할 수 있습니다.
5. 템플릿 엔진: 다양한 템플릿 엔진(Pug, EJS 등)을 지원하여 동적 HTML 페이지를 생성할 수 있습니다.

설치법은 공식사이트를 보고 하시면 어렵지 않게 시작할 수 있습니다.

Express - Node.js 웹 애플리케이션 프레임워크

 

 

 

설레는 마음으로 npm start를 했다.

welcome to express를 보는 순간 성공의 기쁨을 잠시 느꼈다.

자 그럼 다음 퀘스트 라우팅으로 넘어가자

라우팅도 어렵지 않았다.

나도 이해할 겸 코드 하나 하나를 설명하면서 남겨보겠습니다.

 

1.Express 모듈 불러오기: express 모듈을 불러와 express 변수에 할당합니다.

var express = require('express');

2.Router 생성: Express 라우터 인스턴스를 생성하여 router 변수에 할당합니다.

var router = express.Router();

3.Express 앱 초기화: express 함수 호출을 통해 Express 애플리케이션 인스턴스를 생성하여 app 변수에 할당합니다.

var app = express();

 

4.Router를 Express 앱에 등록: app.use(router);를 통해 라우터를 Express 애플리케이션에 등록합니다. 이제 라우터에 정의된 모든 경로가 Express 애플리케이션에서 사용 가능합니다.

app.use(router);

 

5.GET 경로 정의: /test 경로에 대한 GET 요청을 처리하는 라우트를 정의합니다. 클라이언트가 /test 경로로 GET 요청을 보내면, JSON 응답을 반환합니다.

router.get('/test', function (req, res) {
  res.json({
    message: 'hello get api nodejs-api',
  });
});

 

6.서버 시작: app.listen(3000, ...)을 통해 서버를 포트 3000에서 수신 대기하도록 설정합니다. 서버가 시작되면 콘솔에 메시지를 출력합니다.

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

 

전체 코드 흐름을 요약하면 다음과 같다.

1. Express 모듈을 불러와 애플리케이션과 라우터를 초기화합니다.
2. 라우터를 애플리케이션에 등록하여 라우터에 정의된 경로들을 사용할 수 있도록 합니다.
3. /test 경로에 대한 GET 요청 라우트를 정의합니다.
4. 서버를 포트 3000에서 시작하고, 클라이언트 요청을 대기합니다.

이제 이 코드는 /test 경로에 대한 GET 요청을 처리할 수 있으며, 서버가 포트 3000에서 실행됩니다.

성공하셨다면 아래와 같은 화면을 확인 할 수 있습니다.

 

아그리고 추가적으로 node js에서 코드가 추가하고 확인하려면 껏다 다시 켜야하는데 그런 불편함을 해소하는 것 해결해주는 존재가 있다.

바로 nodemon이다

 

Nodemon은 프로젝트 폴더의 파일들을 모니터링 하고 있다가 파일이 수정되면 서버를 자동으로 restart 시켜주는 패키지이다.

 

설치코드

npm install nodemon --save-dev

npm install 명령어에서 사용되는 --save-dev 플래그는 npm(Node Package Manager)에서 패키지를 개발 의존성으로 설치하기 위해 사용됩니다.
이를 이해하려면 --save와 --save-dev의 차이점을 이해하는 것이 중요합니다.

 

--save와 --save-dev 설명

--save

• 용도: 패키지를 프로젝트의 **일반 의존성(Dependencies)**으로 설치합니다.
• 효과: package.json 파일의 dependencies 항목에 패키지가 추가됩니다.
• 설명: 이 옵션은 기본적으로 사용됩니다. 즉, npm install <package> 명령어만 사용하면 --save 플래그가 자동으로 적용됩니다.

--save-dev

• 용도: 패키지를 프로젝트의 **개발 의존성(DevDependencies)**으로 설치합니다.
• 효과: package.json 파일의 devDependencies 항목에 패키지가 추가됩니다.
• 설명: 이 옵션은 개발 과정에서만 필요한 패키지를 설치할 때 사용됩니다. 예를 들어, 테스트 도구, 빌드 도구, 린터 등이 이에 해당합니다.

그럼 여기서 일반 의존성(Dependencies)과 개발 의존성(DevDependencies) 차이에 대해 궁금증이 생길것이다.

package.json 파일에는 두 가지 주요 의존성 항목이 있습니다:

1. dependencies:
   • 설명: 애플리케이션이 실행되는 동안 필요한 패키지를 포함합니다.
   • 예시: 웹 서버를 구성하는 express, 데이터베이스 클라이언트 mongoose 등.
2. devDependencies:
   • 설명: 개발 과정에서만 필요한 패키지를 포함합니다. 배포된 애플리케이션에서는 필요하지 않습니다.
   • 예시: nodemon(개발 중 서버 자동 재시작), eslint(코드 린터), jest(테스트 프레임워크) 등.

package json

{
  "name": "back",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www",
    "nodemon": "nodemon index.js"
  },
  "dependencies": {
    "cookie-parser": "~1.4.4",
    "debug": "~2.6.9",
    "express": "~4.16.1",
    "http-errors": "~1.6.3",
    "jade": "~1.11.0",
    "morgan": "~1.9.1"
  },
  "devDependencies": {
    "nodemon": "^3.1.0"
  }
}

 

여기서 scripts 에서 보면 명령어 nodemon 이 바로 실행시키는 부분이다.

npm run nodemon

이렇게 터미널에 치면 아주 동작이 잘될 것이다.

 

사용영상

 

다음편은 드디어 api서버를 올려서 사용 해볼 예정이다.

 

 

참고 블로그

[Node.js] 간단한 API 서버 만들기

 

[node.js] API 서버 구축 기초