<Express.js> 설치 및 시작

김민석·2021년 1월 3일
0

YouTube clone

목록 보기
1/54

🔫이 시리즈는 nomadcoders.co의 수업을 바탕으로 작성되는 것임을 밝힙니다. 🔫

Express란?

Express는 프레임워크입니다. 적은 코드로 빠르게 서버를 구성할 수 있습니다. 다른 프레임워크로 Django, Rails, Laravel 등이 있습니다.

project

이번 시리즈는 꽤 규모가 크기 때문에 각 글마다 수정하고 추가할 디렉토리를 아래와 같이 표기 하겠습니다. project는 루트 폴더를 의미하며 폴더 상위 하위 구분은 들여쓰기를 이용하여 표시합니다.

  • +
    +가 붙으면 파일이나 폴더가 추가된다는 의미입니다.
  • -
    -가 붙으면 파일이나 폴더가 삭제된다는 의미입니다.
  • *
    *가 붙으면 파일이 수정된다는 의미입니다.
youtube
 +|node_modules
 +|package-lock.json
 +|package.json
 +|index.js

Express.js 설치 과정

  • NPM(Node Package Manager)
    Node.js를 설치하면 NPM은 같이 설치됩니다. package manager로 NPM을 사용하는 프로젝트를 시작하기 위해서 %npm init을 터미널에 입력합니다.

    • %npm init에 따른 다양한 질문

      • package name
        웹사이트를 package라고 생각하고 웹사이트명
      • version
        처음이라면 1.0.0
      • description
        웹사이트에 대한 설명
      • entry point
        처음 실행할 파일
      • author
        프로젝트 진행하는 팀이나 개인

      질문중에 위에 언급되지 않은건 엔터를 쳐서 뛰어넘어도 됩니다. package.json파일이 생기면 성공입니다. 나의 프로젝트를 하나의 패키지로 만든다고 생각하면 됩니다.

  • Express
    package.json폴더가 있는 곳에서 %npm install express를 터미널에 입력해줍니다. package.json dependencies에 express가 추가됐으면 성공입니다.
    dependencies:{"express":"^4.17.1"} 4.17.1이상의 버전을 요구한다는 뜻을 담고 있습니다. 이제 프로젝트를 누군가와 공유한다고 하면 package.json파일과 루트 파일인 index.js만 공유하면 됩니다. %npm install을 터미널에서 실행하면 dependecies를 확인하고 관련된 node_modules(설치된 패키지가 저장되는 폴더)와 package-lock.json을 모두 다시 생성해줍니다.

index.js

index.js에 코드를 작성하여 서버를 만들어봅시다.

const express = require('express') // express 모듈 가져오기
const app = express()//가져와서 실행
 
app.get('/', function (req, res) {
  res.send('Hello World')
})
 
app.listen(3000, function(){
  console.log("listening: http://localhost:3000");
})//포트 넘버 입력

위 코드를 루트 파일에(index.js) 작성하고 %node index.js를 터미널에 입력해주면 콘솔에서 listening: http://localhost:3000를 볼 수 있습니다. 서버를 실행시킨 후 http://localhost:3000을 브라우저를 통해 접속하면 Hello World가 뜨는것을 아래와 같이 확인할 수 있습니다.

package.json

package.json에 script를 추가해봅시다.

{
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
  }
}

위처럼 scripts에 추가하면 되고 start는 명령명을 의미합니다. 명령에 대한 value로는 node index.js를 입력해줍니다.
이렇게 script를 적어놓고%npm start를 터미널에 입력하면 %node index.js를 입력한 것과 동일한 효과를 얻게 됩니다.

profile
누구나 실수 할 수 있다고 생각합니다. 다만 저는 같은 실수를 반복하는 사람이 되고 싶지 않습니다. 같은 실수를 반복하지 않기 위해 기록하여 기억합니다.🙃

0개의 댓글