[Node.js] express.js 시작, get 요청 - 1일차

 

 

 

안녕하세요. 제니입니다!

React를 정말 사랑하는 프론트엔드 개발자인데,

여러모로 성장을 하는 방향을 고민하다 상사분께서 좋은 스터디 모임을 만들어주셔서

Node.js 스터디에 참여하게 되었어요!

이번 기록은 까먹지 않기 위한 저만의 기록이라서

혹시 같이 공부하실 분이 계시다면 참고해주셔도 될 것 같아요!

 

 

 

과제...

 

 

 

아주 심플한 과제를 주셨는데,

express.js를 시작하는 것부터 막혔던 ^_^

저는

 

https://velog.io/@kimhyo_0218/Node.js-express.js-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0

[Node.js] express.js 시작하기

 

 

위 블로그를 참고하여 시작했습니다!

 

 

 

1. packages.json 생성

 

 

일단 저는 바탕화면에 nodejs 폴더를 만들어서 vs code에서 실행했구요.

 

 

 

 

 

 

 

이렇게 폴더를 만들어 두고

 

 

 

npm init

 

 

 

을 통해 package.json을 생성했습니다.

 

 

 

1-1. express.js 설치하기

 

 

npm install express

 

 

 

package.json 설치 후 express 설치해주시면

 

 

 

 

 

 

package.json내에 express가 생성됩니다!

 

 

 

1-2. package.json내 start 넣어주기

 

 

 

코드

 

 

 

 

"start": "node index.js"

 

 

 

 

scripts내에 위 코드를 넣어주세요

 

 

 

2. index.js 파일 생성

 

 

 

폴더 내에 index.js 파일을 생성한 후 아래 코드를 넣어주세요.

 

 

 

const express = require('express') //express를 설치했기 때문에 가져올 수 있다.
const app = express()

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

app.listen(5000)

 

 

 

위 코드는 상단에 적어둔 블로그에서 작성해주신 코드입니다.

이렇게 작성 후 http://localhost:5000/ 실행하시면 됩니다!

 

 

 

3. get 요청 시작해보기

 

 

 

https://velog.io/@brgndy/Node.js-Express-%EB%A1%9C-GET-%EC%9A%94%EC%B2%AD-%EC%B2%98%EB%A6%AC

Node.js Express 로 GET 요청 처리

 

 

 

Get 요청 관련해서는 위 블로그를 참고해서 공부했습니다!

 

 

 

const express = require('express') 
const app = express()

app.set('port', 3000); 

app.listen(app.get('port'), () => {
    console.log(app.get('port'),"번 포트에서 대기 중");
})

 

 

 

위에 작성했던 코드를 위 코드로 바꾸시면

 

 

 

 

 

 

이렇게 터미널에서 확인하실 수 있어요.

 

 

 

3-1. localhost 실행해보기

GET 실패

 

 

 

localhost 실행을 해 보면 Cannot GET 으로 실패했다고 나오게 되는데요.

아무런 GET 요청이 없어서라고 합니다.

 

 

 

3-2. index.html

index.html

 

 

 

index.html 에 "1234" 를 입력해뒀어요.

 

 

 

const express = require('express');
const app = express();
const path = require('path'); // 파일을 보낼때는 path 모듈을 사용해서 경로 지정


app.set('port', process.env.PORT || 3000);


app.listen(app.get('port'), () => {
    console.log(app.get('port'), '번 포트에서 대기중');
})

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'index.html')); // send가 아닌 sendFile 메서드 사용
})

 

 

 

이렇게 코드를 수정해주시고

 

 

 

 

 

 

localhost 3000을 실행하면 이렇게 화면에 나오는 것을 알 수 있어요!

 

 

 

요기까지 하구 다음 과제 시작할 때 또 정리해볼게용!