Express로 서버 만들어보기(1)

nodeJS가 무엇인지, 자바스크립트에서 해당 언어는 서버구현으로서 어떤 기능을 하는지
대략적인 설명은 이미 기재해두었으니 아래 링크에서 살펴보면 된다.
nodeJS 설치 및 시작하기

WHY nodeJS

자바스크립트 개발자로서 자연스레 nodeJS를 사용하는 것이 아닌, 다른 언어를 사용하다가 서버구축을 위해서 nodeJS를 사용하게 된다면 어떠한 이유에서 일까?
nodeJS는 전체적인 틀은 구현되어있지만, 세부적인 것이 많이 비어있다.
즉 개발자 의지대로 커스터마이징 하기에 좋은 것이다.
또한 이렇기 때문에 Django(파이썬의 서버 프레임워크 중 하나) 등에 비해서 가볍기 때문에,
데이터를 생성하고 다루고 수많은 메세지를 전송하는 경우에 좋다.
하지만 data science 나, 이미지 처리, 혹은 하드코어한 서버 작업들(가령 서버를 통해 데이터를 올리고 적절히 포맷하는 등)에는 nodeJS가 적절하지 않다.
따라서 채팅서비스나 우버 같은 리얼타임서비스들의 경우는 nodeJS를 사용하되, 데이터를 다루는 과정에서
좀 더 복잡한 처리가 필요하다면 Django(파이썬의 서버 프레임워크 중 하나)를 사용해야 한다. nodeJS는 접근하지 못한다.

여기서 생각할 수 있는 것은, 백엔드 구축에 메인 언어는 있겠지만 하나의 언어로만 만들지 않아도 된다는 것이다.
여러 언어들을 통해 백엔드를 구축할 수 있다

실제 nodeJS를 사용하는 경우

넷플릭스, 우버, 페이팔, 링크드인이 대표적이다.

Express JS

nodeJS의 서버 프레임워크인 것이다.
위에서 말한 것과 같이 nodeJS는 커스터마이징이 가능하고 그만큼 기본적으로 구현되어있는 코드가 별로 없는데, ExpressJS라는 프레임 워크로 이 불편함을 조금 덜 수 있는 것이다.
새로운 버전이 자주 나오지 않는 안정적인 프레임 워크이다.

1. 프로젝트 서버 시작하디

npm init

2. 그리고 exspress를 설치하면 된다.

npm install -s express

express 자체에 대한 이야기는 차후에 더 자세하게 정리해볼 예정이다.

3.index.js로 기본 서버 파일을 만들어 준다.
그리고 모듈 파일에서 require을 통해 express를 불러와준다.
아래의 코드가 서버 코드를 작성할때 가장 기본적인 코드라고 생각하면 된다.

const express = require("express");
const app = express();

app.get("/", function (req, res) {
  res.status(200).send("hello");
});

const port = 4000

app.listen(port)

여기서 서버를 시작할 때 보통 node index.js(서버파일명)으로 시작하는데,
서버 파일이 변경될 때마다 자동으로 업데이트 되게 하기 위해서는 nodemon을 설치해주는 것이 편하다.
안그러면 서버 파일을 변경하고, 서버를 종료하고 다시 시작해줘야 하는 불편함을 겪어야 한다.

npm install -s nodemon

그리고 package.json의 script 부분에 아래 코드를 추가해준다.

"scripts": {
    "start": "nodemon index.js",
    }

그러면 npm start로 서버가 실행되고, 이후에 코드가 수정될 때마다 자동으로 업데이트 된다.

Routing

기본적인 route

기본적인 서버 작성을 해주었으니 이제는 Method와 path에 따라 코드를 작성해 주어야 한다.

const express = require("express");
const app = express();

app.get("/", function (req, res) {
  res.status(200).send("hello");
});

app.get("/profile", function (req, res) {
  res.status(200).send("here is profile");
});

const port = 4000;

app.listen(port, function () {
  console.log(`Listening on : http://localhost:${port}`);
});

파일간의 코드 교류

import / export 를 활용하여 가능하다.
1. 코드를 내보내고자 하는 파일

export default "파일명/ 함수명"

2. 코드를 사용하고자 하는 파일

import (사용할 이름) from ("파일 명")

해당 코드를 활용해서, 실제로 엄청나게 복잡한 router들을 파일단위로 만들어서,
import로 연결하여 사용할 수 있다.

Babel

최신 버전의 자바스크립트를 구 버전의 자바스크립트로 변환시켜주는 역할을 한다.
즉 ES6로 인해 사용될 최신 버전의 자바 스크립트들이 무리 없이 실제 서비스에 실행될 수 있도록 컴파일하는 역할을 하는 것이다.
서버코드를 구현할 때에, arrow function이나 import와 같이 최신 버전의 코드로 작성해 주어도
에러없이 babel이 컴파일 해주는 것이다.
자바스크립트의 버전과 ES6에 대한 것은 따로 기재해둔 아래 링크를 참고하면 된다.
ES6(1)
ES6(2)
일반적으로 babel/node를 설치해주면 된다.

npm install -s @babel/node

설치할 때, 더해주는 -s는 save라는 의미로, 단순히 설치해주는 것이 아니라, 해당 프로젝트에 저장한다는 의미이다.
환경이 바뀌어도 해당 모듈이 프로젝트 내에 저장되어 전달되는 것으로 생각하면 된다.
관련해서 -g 도 있는데, 글로벌 환경에 해당 모듈을 설치해준다는 명령어이다.

나는 애초에 babel을 글로벌 환경에 설치해주었는데, 이후에 react로 새로운 프로젝트를 시작하려 할 때마다, 에러가 발생하곤 했다.
babel 충돌의 경우로 생각하면 되는데, 글로벌로 설치한 babel을 해당 프로젝트에서 삭제해주거나,
에러 메시지에 뜬 문구를 .env 파일을 만들어서 추가해주면 해결된다.
이는 후에 react 프로젝트 만들때 실제로 에러가 한번 더 발생하면 정리해보겠다.