Express로 웹서버 만들기 (Basic)

2021.07 에 올렸던 게시글입니다.

 

이번 글에서는 웹 프레임워크인 Express 로 간단히 웹 서버를 만들어보겠습니다.

 

웹 서버

우리가 웹브라우저 주소창에 주소를 입력하면 화면에 해당 화면 창이 보이지요??

이 화면을 우리에게 보내주는 것을 웹 서버가 하는 것입니다!

• 특정 주소를 주소창에 입력하면,
• 브라우저는 해당 주소에 있는 웹 서버를 호출하고
• 웹서버는 해당 홈페이지 내용을 웹 브라우저에 보내는 방식

이런 웹서버를 만들 수 있는 패키지를 웹 프레임워크라 하는데요.

구체적으로 말하면, 웹서버를 만들기 위해서는 여러가지를 매번 해야하는 일들이 있어요!

예를 들면, url로 넘어온 파라미터들을 분류해서 가져오는 일, 정적인 이미지나 js파일들을 관리하는 일, 로그인을 위한 작업 등..

이렇게 웹서버를 만들 때 자주 사용되면서 필요한 기능들을 미리 만들어둔 것을 프레임워크 라고 합니다.

자주 들어본 분들도 계실 것 같네요!

javascript를 브라우저에서 실행시키도록 해주는 node.js에서도 이러한 프레임워크가 있습니다. 보편적으로 express를 씁니다.

express를 설치하고 웹 서버를 구동하기 전, 패키지 설정 파일을 생성해줘야합니다.

 

 

웹 프레임워크 준비

package.json(패키지 설정 파일) 을 먼저 생성해봅시다.

npm init -y : -y는 명령 실행 시 물어보는 것(프로젝트 명, 버전..)을 기본으로 설정한다는 옵션

{
  "name": "nodeJS_shoping_mall",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

다음과 같은 package.json 파일이 생성됩니다!

 

 

이제 패키지 express를 설치해봅시다.

아래의 명령어를 입력합니다.

npm install express

설치하고 나면 세가지가 생성되는 것을 확인할 수 있습니다.

 

1. package-lock.json 생성

이건 뭘까요?

package.json과 package-lock.json은 여러 패키지들의 정보를 담고 있습니다. package-lock.json은 packege.json보다 더 상세하게 기록해논 파일입니다.

 

왜 필요할까요?
npm install로 패키지를 설치 할 때 보통 package.json을 사용하여 node_modules를 생성합니다. 그렇게 됐을 때 문제가 있습니다.

package.json에서 버전정보를 저장할 때, 특정 버전명을 명시하기 보다 version range를 사용하기 때문에, 새 버전의 패키지가 배포된 이후 설치를 진행할 때 최신 버전으로 설치될 수 있습니다.

즉, 협업을 할 때 서로 다른 버전으로 인해 다른 구조의 node_modules를 생성하게 될 수 있습니다.

"^0.11.3"이 의미하는 것은 두번째 자릿수의 최대값까지 자동 업데이트할 수 있는 허용 범위임을 나타냅니다. (version range)

 

반면 package-lock.json은 node_modules 구조나 package.json이 수정되고 생성될 때 당시 의존성에 대해 정확하고 구체적인 정보를 품고 자동으로 생성됩니다. (정확한 버전명 "0.11.3"으로 명시되어있습니다.)

package-lock.json

 

결론적으로 package-lock.json은 개발자들이 동일한 node_modules 트리를 생성해서 같은 의존성을 설치할 수 있도록 보장해주는 파일이라고 할 수 있습니다.

 

 

2. node_moudles 디렉토리 생성

express를 구성하는 여러 패키지들이 해당 디렉토리 안에 설치되어 있습니다.

express가 프레임워크니까 당연히 여러 기능들로 구성되어 있겠죠? 

 

3. package.json의 dependencies 에 패키지 생성
해당 패키지에 의존하고 있다는 의미입니다.

"dependencies": {
    "express": "^4.17.1"
  }

 

웹 서버 구동

이제 웹서버를 구동해봅시다. express를 이용해서!

const express = require('express')    // 모듈 호출
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

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

// 웹서버에서 3000번 포트로 연결된 웹서버가 
// 브라우저에 요청한 / 로 화면에 Hello world!를 보내는 것을 통해 응답했다.

 

 

공부하면서 정리한 내용이라 잘못된 내용이 있을 수 있습니다.
따뜻한 피드백은 환영입니다♥