노드js에 대해 본격적으로 배우기 시작했다. 난이도가 수직으로 상승한 느낌,,,?
강의만으로는 이해가 안되어 외부 강의도 함께 듣기 시작했다. 확실히 따로 강의를 들으며 공부하니 좀 더 이해가 잘되긴 한다. 그치만 계속 까먹어서 꾸준히 복습해야할 것 같다.
Node.js 설치하고 터미널 열어 버전 체크하기
Node.js 설치 방법은 너도 나도 다 알고 있으니 넘어가자.
구글에 Node.js 설치하면 바로 나온다. 참고로 나는 homebrew로 설치했다.
터미널에 brew install node로 설치 할 수 있고 node -v 로 노드 버전 확인 가능하다.
노드 패키지 매니저, express 라이브러리 설치하기
npm(node package manager) 설치하는 방법, express 라이브러리 설치도 저번에 설명했으나 복습 겸 짚고 넘어가자.
Vs code 에디터 터미널을 열어 npm init을 입력한다.
엔터키를 열심히 치다가 entry point라고 되어 있는 부분에 서버로 사용할 자바스크립트 파일명 ex) server.js를 입력하고 엔터쳐서 설치 마무리 하면 된다.
-npm : (노트 패키지 매니저) 라이브러리 설치를 도와주는 도구다. node 설치하면 함께 딸려온다.
-라이브러리 : 코딩을 쉽게 할 수 있도록 도와주는 일종의 코드 모음집 같은 것. 레포트 쓸 때 참고하는 참고 도서 같은 느낌이다.
-npm init : package.json 파일을 만들기 위해 사용하는 명령어다.
-package.json : 어떤 라이브러리를 사용했는지 설치한 라이브러리 목록을 자동으로 기록해주는 파일이다.
터미널에 npm install express를 입력한다.
npm install ~~ 하면 해당 라이브러리를 자동으로 설치해준다.
npm install express 하면 express 라이브러리를 설치해준다.
express : 서버를 쉽게 짤 수 있도록 도와주는 라이브러리다.
(server.js)
const express = require('express');
const app = express();
app.listen(8080, function() {
console.log('8080번으로 서버가 열림')
});코드를 이렇게 작성하게 되면 서버를 띄울 수 있다.
해석하자면 첫 두줄은 express 라이브러리 첨부와 사용,
app.listen()은 원하는 포트에 서버를 오픈하는 문법이다.
listen()함수 안엔 두개의 파라미터가 필요하다.
isten(서버를 오픈 할 포트번호, function(){서버 오픈 시 실행 할 코드});
위 코드를 작성하고 터미널 가서 node server.js 입력 하면 서버가 뜬다.
그리고 브라우저에서 localhost:8080 이라 접속하면 확인 가능하다.
GET 요청하는 법
서버는 요청을 처리하는 기계다.
요청을 하는 방법은, 브라우저를 켜서 주소 창에 URL을 입력하면 된다.
이 요청을 GET 요청이라 한다.
ex) swindow.naver.com/pet으로 접속하면 펫 용품 쇼핑 페이지가 나온다.
app.get('/pet', function(req, res) {
res.send('펫용품 사는 페이지')
});이렇게 server.js 하단에 추가하면 된다.
그리고 브라우저 URL 창에 localhost:8080/pet 이라고 입력하면 펫용품 사는 페이지라는 문구가 나온다.
계속 껐다키면 힘드니 nodemon 설치하자.
터미널에 npm install -g nodemon 입력하면 설치된다.
설치가 완료되면 nodemon server.js라고 입력하면 되며, 파일 저장할 때마다 알아서 서버를 새로 시작해준다.(브라우저에서 새로고침은 직접 해야한다.)
(server.js)
app.get('/', function(req, res) {
res.sendFile(__dirname + '/index.html')
});이렇게 작성하면 누군가 /경로로 접속시 (/하나만 있으면 홈페이지이다.)
server.js와 같은 경로에 있는 /index.html 파일을 보내준다/
-sendFile() 함수를 쓰면 파일을 보낼 수 있다.
-__dirname 은 현재 파일의 경로를 뜻한다.
POST 요청하는 법
form 데이터 서버로 전송하는 법.
1. form 태그 세팅하기
<form action ='/add' method='POST'>
******
</form>폼 전송 버튼을 누를 시 /add라는 경로로 POST 요청을 하는 폼이다.
method 속성은 GET/POST 중 어떤 요청을 할 건지 정해주는 부분,
action은 어떤 경로로 요청할건지 정해주는 부분이다.
input마다 name 속성을 이용해 input에 이름을 잘 작성해주자.
(서버에서 어떤 input에 적혔던 데이터인지 알아볼 수 있게.)
2.body-paser 설치하기
body-parser라는 라이브러리가 있어야 내가 보낸 데이터를 처리하기 용이하다.
터미널에 npm install body-parser을 입력해서 설치하자.
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended : true}));상단에 이 코드를 작성해주면 body-parser 라이브러리를 server.js에서 사용할 수 있게 된다.
2021년 이후 설치한 프로젝트들은 body-parser 라이브러리가 express에 기본 포함이라 npm으로 설치 안해도 된다.
app.use(express.urlencoded({extended: true});이코드만 상단에 추가 해주면 바로 body-parser 라이브러리 사용 가능하다.
- POST 요청 처리하는 코드 짜기.
app.post('/add', function(req, res) {
console.log(req.body);
res.send('전송완료')
});이런 식으로 코드를 작성하면 /add 경로로 post 요청할 때 터미널 콘솔 창에 req.body 출력을 할 수 있다. req.body는 폼에 입력한 데이터가 들어 가 있다.
res.send() 함수로 '전송완료' 메세지를 브라우저에 전달 가능하다.
