⭐프로젝트 1 - Node.Js와 Express Js 다운로드

📕개요

Node.js

node.js는 자바스크립트를 서버쪽으로 사용할 수 있게 해주는 언어라고 생각하면 된다

node.js가 나오기 전까지는 js를 브라우저 쪽에서만 사용했는데

node.js가 나오면서 js를 서버쪽에서도 사용할 수 있게 되었다

Express Js

node.js를 쉽게 이용할 수 있게 해주는 프레임 워크라고 생각하면 된다

📘Node.js 다운로드

VS Code에서 터미널을 킨다

이후 node.js가 설치 되어있는지 확인하기 위해 node -v 라고 친다

버전이 나오면 설치가 되어있는 것이고, 아니면 설치를 해야한다

설치를 하기위해 Node.js사이트에 들어가서

최신 버전이 아닌 왼쪽에 신뢰도 있는 버전을 다운 받도록 하자

설치를 하고 터미널을 껏다 킨 후 다시 node -v를 하면 버전이 나올것이다

이후 본인이 보일러 플레이트를 만들 폴더를 열자

이후 npm package 라는 것을 만들어야 하는데 이를 만들기 위해서

터미널에 npm init 이라고 치면 뭔가 작성하는게 계속 나올텐데

그냥 엔터를 치면서 기본 값으로 하고 author에는 자신이름을 적도록 하자

다 하면 package.json 파일이 만들어 졌을 것이다

이 파일은 그냥 settings 과 같은 느낌이라고 생각하면 된다

이후 index.js파일을 만들자

보편적으로 이게 시작점이라고 생각하면 된다

📗Express Js 다운로드

터미널에 npm install express --save 라고 치면 express가 다운로드 된다

그리고 package.json에 가보면 아래쪽에 "express": 버전 이렇게 있을 것이다

--save를 했기때문에 여기에 표시가 된 것이다

이 프로젝트에서는 express라는 것을 쓰고있다고

다른사람이 봤을 때도 알 수 있게 해주는 역할을 한다

그리고 node_modules 폴더가 생긴게 보일 것이다

안을 보면 굉장히 많은 것들이 있는데 이것들은 우리가 방금 받은 express와 같은

라이브러리들이 들어가 있는 것이다

그래서 우리가 수정하거나 할 일은 없기 때문에 보지않아도 된다

📙index.js 기본적인 앱 만들기

이곳을 눌러서 보면 express js의 기본적인 시작 방법이 써져있다

거기에 기재되어 있는 코드를 우선 복사해서 index.js에 붙여넣자

1 const express = require('express')
2 const app = express()
3 const port = 3000
4 
5 app.get('/', (req, res) => {
6   res.send('Hello World!')
7 })
8 
9 app.listen(port, () => {
10   console.log(`Example app listening on port ${port}`)
11 })

코드를 설명하자면 첫번째 코드는 express 모듈을 가져온 것이다

2번째 코드는 express 의 함수를 이용해서 app을 만든것이다

3번째 코드는 포트를 지정한 것이다

5~7 번째 코드는 나중에 라우팅을 할때 자세히 다루겠지만 /로 끝나는 사이트에서는

뒤에있는 함수의 값을 보여준다 는 의미로만 알고있자

9~11 번째 코드는 우리가 정한 포트에서 앱을 실행하는 것이다

마지막부분 수정

우리가 웹을 만들면 "localhost:포트번호" 이부분에 만들어 지는데

그럼 서버를 열고 저걸 또 웹사이트에 쳐야한다

그러면 귀찮으니까 마지막 console.log 부분을 조금 수정해주면 클릭만 해도

사이트가 열리도록 할 수 있다.

Example app listening on port 이 부분을 지우고

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

아래와 같이 수정하면 서버가 열릴 때 마다 사이트가 주소가 출력되고

주소를 Ctrl + 클릭 하면 바로 사이트가 열린다

package.json 수정

package.json에 들어가면 scripts 라는 부분이 있다

간단하게 설명하자면 우리가 터미널에 쓰는 명령어? 같은 것들을 단축키처럼

설정할 수 있다

우리가 만든 웹을 열기 위해서는 node index.js 라는 코드를 쳐야 열린다

근데 수정하고 확인할 때 마다 저 코드를 치는 것은 매우 귀찮은 일이다

그래서 우리는 start로 저 코드를 대체할 것이다

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  }

이코드를 아래와 같이 추가해 주면 된다

  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

저장한후 이제는 node index.js가 아니라 npm start 만 쳐도 되는것이다

지금은 고작 한줄을 뭐하러 이렇게 대체하지 싶을 수 있지만

나중에 리액트와 노드를 나눠서 쳐야하는 걸 한번에 치는것으로 할 수도 있다

서버를 종료할때는 Ctrl + C 하면 서버가 꺼진다