Node.js를 처음 다뤄보면서 얻은 큰 교훈!
cmd창으로 폴더 이동할 때는 폴더명을 잘 확인하자 ^^! 폭풍처럼 설명해버리는 강사님을 바라보며... 속으로 광광 울었네... 미쳐벌이는 줄 알았따...
📍 Node.js
말로만 듣던 Node.js를 드디어...! 강사님은 우리가 이걸 이미 배운 줄 아셨다... 그래서 짧고 급하게 알려주셨다. 🙂?
Node.js는 JavaScript 런타임입니다!
라고 정의하는데... 그래봐야 난 런타임이 뭔지도 모름. 808...하지만 공부하면 됨. 런타임은 프로그램을 실행할 수 있는 환경을 말한다.
➡️ 자바스크립트 프로그램을 컴퓨터에서 실행할 수 있게 해주는 것이 바로 Node.js!
그래서 Node.js를 배우기 위해서는 JavaScript에 대한 공부가 선행되어야 한다.
✔️ vscode 열기
cmd창으로 vscode를 연다!
cmd 명령어
cd: 폴더 이동
mkdir: 폴더 생성
code .: vscode 열기
📍 Node.js 설치 후 실행
난 개꿀이게도... 이미 Node.js가 설치되어 있었다. 아빠가 사용하던 노트북을 받은거라 ㅎㅎ 개꿀~ 설치 후
cmd 명령어
node --version: Node.js 버전 확인
위의 명령어로 Node.js가 무사히 설치되었는지 확인한다.
✔️ npm init -y
NPM: Node Package Manager
npm init -y는 node.js에서 사용하는 모듈을 패키지로 만들어 관리하고 배포하는 역할을 한다고 한다. cmd창에 위와 같은 명령어를 입력하면
자동으로 package.json 파일이 생성된다.
✔️ 실행
WEB_TEST_2폴더에 app.js 파일을 생성한 후 간단하게 콘솔창에 띄워볼 것이다. 맨날 세상에 인사함
cmd 명령어
node app.js: 실행
📍 서버 띄우기
✔️ npm install express
express 라이브러리 설치
이것이 뭔지 아직 정확히는 모르지만! 서버를 쉽게 띄울 수 있게 도와주는 라이브러리이다. 명령어는 npm install express라고 치면 되고 그럼 cmd 창에서 아래와 같이 자동으로 설치해준다.
설치 후 아까 만든 package.json 파일에 가보면
dependencies에 express가 추가되어 있는 것을 확인할 수 있다. 버전도 알아서 맞춰줌. 그리고 node_modules라는 파일도 새로 만들어져 있다.
require()메소드: 라이브러리를 임포트 해주는 함수
listen()메소드: 웹서버 띄우기 (인자로 1. 포트 2. 콜백function을 통해 익명함수를 받아주면 된다.)
이렇게 실행을 해보면!
콘솔 창에 아주 잘 뜨고,
'Cannot Get' 에러가 뜨면 매우 정상으로 서버가 작동하고 있다는 것을 알 수 있다.
서버는 'ctrl+c'를 누를 시 종료된다.
📌 Get 방식으로 요청하기
일단 이후에 할 서버 요청을 위해 라이브러리 설치
✔️ app.get()
Get 방식으로 서버에 요청하는 방식이다. get()메소드는 경로와 콜백함수를 매개변수로 받을 수 있다. 콜백함수는 request, response를 매개변수로 받으며(객체로 만들어버림) 주로 req, res로 줄여서 사용한다.
✔️ response 객체에 내장된 send() 메소드
send(): 간단한 문자열을 보낸다.
실행하면 cmd 창에 send 함수가 실행되었다고 뜨며
주소창에 주소를 입력하면 send()메소드로 보낸 유튜브 링크로 잘 간다.
하지만 위에서 서술했듯 send() 메소드는 간단한 문자열을 보내기에나 적합하지 코드를 작성하긴 어렵다.
✔️ render()
view 라는 새 폴더를 만들어 index.ejs 파일을 새로 생성한 후 html 작성과 똑같이 코드를 짜준다. (내가 짠 거 아님 샘플 복붙함) * post 아니라 get으로 해줘야 함 캡쳐 잘못 함...
아직 이 코드를 전부 다 이해하진 못하는데... render()만 알면 일단 되는 것 같다. 왜냐면 위에는 그냥 강사님이 복붙하래서 복붙 함... 이렇게 코드를 수정해준 후 실행시키면
앞서 작성한 html 파일이 뜬다. 아무 글자나 쓴 후 '보내기'를 누르면!
위 주소 창에 '잘 보내졌니?'라고 쓴 내 글자가 뜬다. 원래 이렇게 뜨는 게 아니었던 것 같은데... cmd 창에 뭐가 안 뜨네... 급하니까 일단 이렇게만 씀...
render(): html을 문자열 데이터로 보내준다.
📌 Post 방식으로 요청하기
✔️ app.post()
html과 코드를 app.js 코드를 고쳐준다.
빠뜨린 것이 없을지 기도하며 서버 재실행 후... ㄱㄱ
화면에 아무 글자나 입력한 다음 결과를 보면
Hello Post가 잘 뜨고! post 방식으로 주소도 잘 받았다!
cmd 창에도 내가 보낸 글자가 잘 들어왔다! 굿!
바로 복습한게 아니라 기억이 얼기설기라... 제대로 복습한 건지는 모르겠지만 ㅠㅠ
대충 중요한 내용은 다 기억해서 복기해본 것 같다. 흑흑... 열공하잣!
근데 일단 알바를 가야 한다... 씻어야지...
📍 코드
- JavaScript 실습 코드 (app.js)
// console.log('Hello World!!!');
const express = require('express');
const app = express();
const port = 3000;
app.listen(port, function () {
console.log(`server is running at http://localhost:${port}`);
});
// Get 방식으로 요청 (request->response): 1. 경로 2. 콜백함수, 매개변수로 request, response -> 객체로 만든다 (req, res로 줄여서 쓰자!)
// app.get('/test', function (req, res) {
// // 객체 - 프로퍼티 & 메소드
// console.log(req.body);
// console.log(res.send);
// // response 객체의 send()메소드 -> 문자열 보냄 -> 알아서 태그 인식함 -> 근데 쫌 비효율 (간단한 문자열 보낼 때만 사용)
// res.send(`<iframe width="420" height="315"
// src="https://www.youtube.com/embed/tgbNymZ7vqY">
// </iframe>`);
// });
app.get('/', function (req, res) {
console.log(res.send);
res.render('index');
});
require('ejs');
const path = require('path');
var bodyParser = require('body-parser');
// view engine setup
app.set('views', path.join(__dirname, '/views'));
app.set('view engine', 'ejs');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// Post 방식으로 요청 (form 태그 안에 method=post)
app.post('/postTest', (req, res) => {
// form태그 input태그 name=post
console.log(req.body.post);
return res.send('Hello Post!!');
});순서대로 실습하면서 주석 처리된 부분도 있음
- HTML (index.ejs)
<!-- ejs >> html이랑 똑같아용 -->
<!DOCTYPE html>
<html>
<body>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
Sorry, your browser does not support inline SVG.
</svg>
<!-- action: 경로, method: 전달 방식 -->
<form action="/postTest" method="post">
<input type="text" name="post" id="" />
<input type="submit" value="보내기" />
</form>
</body>
</html>(*마지막 Post방식 실습 기준)
참고한 링크
https://yahohococo.tistory.com/42
https://codingapple.com/unit/nodejs-4-server-get-request/
https://pyrasis.com/nodejs/nodejs-HOWTO
