211013 TIL

옛슬·2021년 10월 13일

API express.js node.js

TIL

목록 보기

2/15

OVERVIEW

Node JS, Express JS에 대해 공부해 보려고 한다.
목표: API 연결하기
→ API를 연결하는 방법을 배워서 새로운 프로젝트를 만들어 보는 것이 목표
bash terminal 사용해보기

Node JS? Express JS?

◼ Node.js란?

Node.js 는 서버사이드 자바스크립트이며 구글의 자바스크립트 엔진인 V8을 기반으로 구성된 일종의 소프트웨어 시스템이다
[출저 구름Edu]

◼ Express.js란?

Express.js, 또는 간단히 익스프레스는 Node.js를 위한 웹 프레임워크의 하나로, MIT 허가서로 라이선스되는 자유-오픈 소스 소프트웨어로 출시되었다. 웹 애플리케이션, API 개발을 위해 설계되었다.
[출저 wiki]

Express.js 공식 문서로 빠르게 배워보기

공식문서를 볼 때 영어로 보기 때문에 정리본 중간에 영어가 섞여있습니다.

공식문서: https://expressjs.com/en/starter/installing.html

1. Installing

mkdir myserver && cd myserver

디렉토리 생성 → 작업 디렉토리 위치 변경

npm init -y
npm install --save express

💡 만약에 npm init으로 시작 시 처음 시작은 RETURN to accept으로
기본 설정을 마치면 됨. 다만, entry point만 본인이 express를 시작하고자 하는 파일명을 적어주면 된다.

2. HELLO WORLD

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

app.get('/', (req, res) => {
  res.send('안녕하세염!');
})

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

Express 불러오고 실행을 시작하는 문
port넘버 설정
app은 '안녕하세염!'이라는 respond를 보낸다.
app이 제대로 작동될 때 node.js에 'example app ~'이라는 문구가 띄어진다.

◼ 로컬에 띄어보기 : node 파일명 명령어 작성

3. basic router

브라우저 URL에 여러 endpoints 처리
라우터는 클라이언트가 요청(request)시. 요청에 대한 서버의 답변으로 response를 받을수 있으며 해당 응답은 특정 엔드포인트로 이어진다.
엔드포인트는 URI(or path) & specific HTTP Request
읽어봐야할 것!
HTTP 메시지
https://developer.mozilla.org/ko/docs/Web/HTTP/Messages

app.METHOD(PATH, HANDLER)
// METHOD: GET, POST, PUT, DELETE

app.get('/user', (req, res) => {
  res.send('당신은 유저이군용!')
})

특정 엔드포인트를 만드는 방법
주소창에 /user를 이어서 쓰면 response를 받을 수 있다.
response에는 주로 데이터를 받아온다 (json파일)

🥺 벅차오른다.
HTTP 메시지 읽어도 이해되지 않았는데 이제 바로 이해될 것만 같은...🌟

4. Serving static files in Express

express.static(root, [options])

express.static이라는 Express의 빌트인 미드웨어 함수 사용
middleware function :
https://expressjs.com/en/guide/writing-middleware.html
Middleware functions are functions that have access to the request object (req), the response object (res), and the next middleware function in the application’s request-response cycle. The next middleware function is commonly denoted by a variable named next.

app.use(express.static())

갑자기 app.use()라는 함수를 사용하게 된다.
app.use() :
https://expressjs.com/en/4x/api.html#app.use
app.use([path,] callback [, callback...])
Mounts the specified middleware function or functions at the specified path: the middleware function is executed when the base of the requested path matches path.

const path = require('path')
app.use(express.static(path.join(__dirname, '경로')))

path의 경우 npm의 내장모듈로 설치가 필요없다.
express앱이 다른 디렉토리 경로에서 실행될 경우를 생각해보면 상대경로보다는 절대경로가 훨씬 안정성이 높다!
public 디렉토리로 경로를 지정하면 가장 먼저 실행되는 파일은 바로 index.html이다 → entry이기 때문에!

터미널 팁

mkdir : make directory
cd : change directory
-y : npm을 시작하되 질문은 모두 yes로 대답.
--save : local에 저장한다는 뜻
-g : 전역설치 (PC에 설치됨)
명령어 취소하고 재입력 : ctrl + c 누르면 입력창 생성

그외

npm library -nodemon
npm i -g nodemon

nodemon 라이브러리는 코드 변경 후 저장 시 자동으로 새로고침됨.

nodemon 파일명

nodemon 시작하기!

__dirname //현재 file명을 제외한 절대 경로 
__filename //현재 file명을 합한 절대 경로

느낀점

사실 API를 사용하기 위해서는 어느정도 백엔드 지식이 필요하다. 근데 뭔가 백엔드를 배울 시간을 쓰는게 효율적인가?에 대해 계속 고민해왔고 오늘 공부한 이후로 오히려 고민했던 시간이 후회된다 😪
개인적으로 다 하고 API를 넣어보는 프로젝트를 만들면 항상 지문으로는 이해가 가지 않았던 HTTP Method와 REST API등 다양한 지식들이 이해가 될거같다