Coding 공부/NodeJS_Express
[NodeJS] Node.js, Express, Express 설치 및 기본 예제, postman 간단 사용방법, Express : get, post, put, delete 예제
CBJH
2024. 5. 10. 12:31
728x90
반응형
1. Node.js, Express
- Node.js와 Express는 모두 JavaScript 기반의 테크놀로지로 웹 애플리케이션 개발에 널리 사용됩니다. 이 두 기술의 핵심적인 특징과 역할에 대해 설명하겠습니다.
1.1 Node.js
- Node.js는 서버 사이드에서 실행되는 JavaScript 런타임 환경입니다. 원래 JavaScript는 웹 브라우저에서만 실행되었지만, Node.js의 등장으로 인해 개발자들은 브라우저 외부, 즉 서버 측에서도 JavaScript를 사용할 수 있게 되었습니다. Node.js의 주요 특징은 다음과 같습니다:
- 비동기 이벤트 주도 아키텍처: Node.js는 비동기(non-blocking), 이벤트 주도(event-driven) 방식으로 설계되어 있어, 여러 연결을 효율적으로 관리할 수 있습니다. 이는 특히 I/O 작업이 많은 애플리케이션에서 성능 이점을 제공합니다.
- V8 JavaScript 엔진: Node.js는 Google Chrome의 V8 JavaScript 엔진 위에 구축되어 있어, 빠른 코드 실행 속도를 자랑합니다.
- npm: Node.js는 npm(Node Package Manager)을 통해 다양한 라이브러리와 툴을 제공받을 수 있습니다. npm은 세계에서 가장 큰 소프트웨어 레지스트리로, 수많은 개발 도구와 라이브러리를 쉽게 설치하고 관리할 수 있게 해줍니다.
1.2 Express
- Express는 Node.js를 위한 미니멀하고 유연한 웹 애플리케이션 프레임워크입니다. Node.js의 강력한 기능을 기반으로 하면서도, 웹 애플리케이션과 API를 빠르고 쉽게 구축할 수 있도록 도와줍니다. Express의 주요 특징은 다음과 같습니다:
- 미니멀리즘: Express는 매우 가볍고 필수 기능만 제공하는 구조로 설계되어 있어, 필요한 기능만을 추가하여 애플리케이션을 구성할 수 있습니다.
- 미들웨어: Express는 미들웨어 아키텍처를 사용하여 요청 및 응답 사이에 다양한 처리 과정을 삽입할 수 있습니다. 예를 들어, 사용자 인증, 데이터 파싱, 로깅 등의 기능을 손쉽게 추가할 수 있습니다.
- 라우팅: Express는 강력한 URL 라우팅 기능을 제공하여, 어플리케이션의 다양한 페이지와 기능에 대한 경로를 쉽게 설정할 수 있습니다.
- 확장성: Express는 Node.js의 핵심 모듈 위에 구축되어 있어, Node.js의 모든 기능을 사용할 수 있으며, 다른 외부 라이브러리와의 통합도 간단합니다.
- Node.js와 Express는 함께 사용될 때 강력한 서버 사이드 애플리케이션을 구축할 수 있습니다. Express는 Node.js의 기능을 확장하여 개발 과정을 단순화하고 개발 시간을 단축시켜 주는 동시에, Node.js는 이러한 웹 애플리케이션을 효율적으로 실행할 수 있는 환경을 제공합니다. 이 조합 덕분에 개발자들은 빠르고 강력한 웹 애플리케이션과 API를 쉽게 개발할 수 있습니다.
2. Express 설치 및 기본 예제
- 이론 링크 : https://expressjs.com/ko/
- 콘솔창을 열어 경로를 설정한다.(해당 경로에서만 nodejs, express를 사용할 수 있다.)
- 콘솔창에
npm init
$ npm install express --save
- 를 입력해 애플리케이션에 대한 package.json 파일을 작성하고 express를 설치한다.
nodejs app.js
- 를 입력해 app.js 파일을 실행한다.(app.js에 express코드 작성 후 실행) (app.js파일이 어디에 있는지 경로를 잘 확인하자)
- packpage.json 파일에 정보가 들어있고, node_modules 폴더에 실제 라이브러리 파일들이 있다.
3. postman 간단 사용방법
- 로그인한다.
- Post방식으로 바꾸고 post방식으로 값을 날리고 싶은 주소를 입력한다. ' localhost:3000/movies'
- Body > raw > JSON을 클릭한다.
- post방식으로 날리고 싶은 값을 입력하고 Send를 누른다.
- 하단 창 Body에 표시되는 값은 response.send로 Express에서 보낸 값이다.
3.1 post undefined 해결방법
const bodyParser = require('body-parser')
app.use(bodyParser.json()) //post undefined 해결방법
두 줄 추가해주면 된다.
4. Express : get, post, put, delete 예제
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
const port = 3000
app.use(bodyParser.json()) //post undefined 해결방법
//영화 정보를 저장하는 리스트, 요소는 json방식
let movieList = [
{ id: 1, title: '아바타 물의 길', running: 130, rating: 9.5 },
{ id: 2, title: '반지의 제왕', running: 125, rating: 8.2 },
{ id: 3, title: '해리포터', running: 135, rating: 9.0 },
{ id: 4, title: '해리포터 불의잔', running: 135, rating: 9.0 },
{ id: 5, title: '해리포터 아즈카반의 죄수', running: 135, rating: 9.0 }
]
//http://localhost:3000/ 경로로 이동하면 res.send()에 담은 내용이 보인다. 매개변수엔 객체나 기본 자료 타입이 들어갈 수 있다.
app.get('/', (req, res) => {
res.send('Hello World!')
})
//리스트도 res.send()로 보낼 수 있다.
app.get('/movies', (req, res) => {
res.send(movieList)
})
//http://localhost:3000/movies/2
app.get('/movies/:id', (req, res) => {
console.log('/movies/:id') //console.log는 node.js가 실행된 터미널에 출력된다.
console.log(req.params)//request객체 안의 parameters 객체
console.log(req.params.id)//1
const id = parseInt(req.params.id) //1로 출력되지만 주소 값은 String 타입이다.
let movieObj='';
for(var i =0; i<movieList.length; i++){
if(id===movieList[i].id){
movieObj=movieList[i]
}
}
res.send(movieObj)
})
//{ "id": 4, "title": "범죄도시4", "running": 120, "rating": 8.3 }
//{ "id": 5, "title": "쿵푸팬더", "running": 125, "rating": 8.4 }
app.post('/movies', (req,res)=>{
console.log('/movies(post)')
console.log(req.body) //undefined
movieList.push(req.body)
res.send(movieList)
})
app.put('/movies/:id', (req,res)=>{
console.log('/movies(put)')
const id = parseInt(req.params.id)
console.log(req.params)//{id : '2'}
console.log(req.params.id)//2(string)
console.log(id)//2(number)
console.log(req.body) //{rating : 8.8}
const rating = req.body.rating //쌍 따옴표가 아니라 json 자체 내에서 정수형이기 때문에 parseInt안해줘도 된다.
for(var i =0; i<movieList.length; i++){
if(id === movieList[i].id){
movieList[i].rating=rating //평점 수정
}
}
res.send(movieList)
})
app.delete('/movies/:id', (req, res) => {
console.log('/movies/:id(delete)')
console.log(req.params)
console.log(req.params.id)
const id = parseInt(req.params.id)
console.log(id)
//splice() 메서드로 아이디 2번인 영화 데이터 삭제
let index = 0;
for(var i=0; i<movieList.length;i++){
if(id === movieList[i].id){
index = i;
}
}
const removedList = movieList.splice(index, 1) //movieList.put(index)도 똑같은 역할을 한다.
console.log(removedList)
res.send(movieList)
})
//http://localhost:3000/search?word=해리포터&page=1&limit=10
app.get('/search', (req, res) => {
console.log(req.query) //{ word: '해리포터', page: '1', limit: '10' }
console.log(req.query.word) // 해리포터
const word = req.query.word
let resultList = []
//영화 목록에서 해리포터라는 이름을 포함하는 영화를 모아서 응답한다.
for(var i =0; i<movieList.length; i++){
if(movieList[i].title.includes(word)){
resultList.push(movieList[i])
}
}
res.send(resultList)
})
app.listen(port, () => {
console.log(`Server is running on http://localhost:${port}`)
})
- 따로 HTML 파일을 만들어서 앞 단을 구성하지 않고, PostMan을 활용해 값을 주고 받았다.
- put, delete방식은 JavaScript를 통해 클라이언트 측에서 API 요청을 구현해야 한다. 주로 AJAX 요청 또는 fetch API를 사용하여 이러한 요청을 구현한다. (내용이 길어 해당 내용을 검색해 읽어보기만 했다. 포스트맨은 편하게 테스트할 수 있다.)
- 값을 추가해도 서버를 재시작하면 movieList값은 초기화되므로 값이 변경되지 않는다. DB와 연결하면 해당 문제를 해결할 수 있다.
- Express를 사용하면 거의 파이썬 FastAPI와 유사하고 쉽게 백엔드 부분을 구성 할 수 있다.