Express 웹 프레임워크

강현구·2022년 1월 11일

Node.js

목록 보기
5/19

시작하기에 앞서 express와 웹프레임워크가 무엇인지 알아보도록 하자.

웹 프레임워크란 웹 서버에 필요한 기능들을 미리 만들어 둔 '틀' 같은 개념이다.
그중 express는 node에서 웹서버를 만들때 쓸 수 있는 프레임워크 중에 가장 보편적으로 쓰이는 것이다.

웹 프레임워크 설치에 앞서 package.json을 생성해줍니다.
package.json은 프로젝트의 정보를 정의하고, 의존하는 패키지 버전 정보를 명시하는 파일이다.
package.json 파일은 배포한 모듈 정보를 담고자 만들어 졌지만,
노드로 작성하는 애플리케이션도 package.json 파일을 사용하여 관리할 수 있다.

기존에 작업하던 Visual Studio Code 안에서 해도되고, 새로운 폴더를 만들고 code실행을 하고 만들어도 된다.
Visual Studio Code 안에서 터미널을 열고

npm init -y

를 입력해준다. 뒤의 -y는 npm init 명령 실행시 원래는 프로젝트 명이나 버전등을 물어보는데,
그런 것들을 물어보지 않고 기본값으로 알아서 설정해주는 옵션이다.
저 코드를 터미널에 입력 해주면 폴더에 package.json이 생성된 것을 확인할 수 있다.

package.json이 생성 되었으니 이제 express를 설치해 준다.
마찬가지로 Visual Studio Code 안의 터미널에

npm install express

를 입력해 준다. 그러면 설치가 진행되고 package.json안에 express 정보가 들어가면 성공적으로 설치가 된 것이다.
설치가 되면 node_modules 폴더가 생성되고 이 폴더는 실제로 설치된 패키지들이 들어있는 폴더이다.
앞으로 패키지들을 설치하게 되면 다 여기에 들어갈 것이다.
package-lock.json 파일도 생성이 된다. 이 파일은 어떤 패키지들이 어떤 버전으로 설치되었는지 기록해놓은 파일이다.

이제 웹서버가 잘 동작되는지 확인해보자.
폴더안에 index.js 파일을 하나 만들어 준다.
index.js파일을 열어서 아래 코드를 넣어준다.

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}`)
})

이 코드를 넣어주고 터미널에

node index.js

를 입력해주면 실행이 된다.
실행이 되면 터미널에 주소 하나가 뜨는데 ctrl을 누른채로 클릭을 하면 내가 만든 웹 서버로 들어가게 된다.
Hello World! 가 잘뜨면 잘 만들어 진 것이다.

다음부터는 이제 express 활용부분을 하겠다.

profile
초보개발자

0개의 댓글