터미널 오픈 시에 폴더명이 잘 뜨는지 확인!
서버에 GET요청 처리하기
server.js 생성
- 서버를 띄우기 위한 기본 셋팅(express 라이브러리)
const express = require('express');
const app = express();
app.listen(8000, function(){
console.log('listening on 8000')
});
app.get('/pet', function(req, res){
res.send('펫용품 쇼핑할 수 있는 페이지입니다.');
})listen(서버띄울 포트번호, 띄운 후 실행할 코드)
포트란?
컴퓨터에는 외부와 네트워크 통신을 하기 위한 6만개의 구멍이 있다!
nodemon
nodemon으로 서버 재실행을 자동화할 수 있다
- npm install -g nodemon
- yarn add global nodemon
실행
- nodemon server.js
*보안 오류가 뜰 경우 - 파워쉘 관리자모드로 실행해서
- execution policy 입력 -> restricted 일 경우
- set-executionpolicy unrestricted로 변경
nodemon은 서버가 변경될 때마다 서버를 재실행해준다
서버에서 HTML 파일 전송해보기
.sendFile(보낼 파일 경로)
app.get('/', function(req, res){
res.sendFile(__dirname + '/index.html')
})index.html 파일을 만들어주면 끝
메인페이지 꾸미기(Bootstrap)
HTML/CSS 라이브러리를 이용해 쉽게 만들자
Bootstrap - HTML/CSS 라이브러리
원하는 UI 검색 후 예제 코드 복붙하면 UI개발 가능
- 부트스트랩 4.x 버전 다운 받기 (IE 지원 X)
- Get started 들어가서 Starter template 예제 index.html에 복붙
(Bootstrap에 필요한 css파일과 js파일 3개가 포함되어 있음) - 필요한 UI 검색 (button, form 등)해서 복붙
콜백함수
자바스크립트에서는 콜백함수를 많이 사용 -> 순차적으로 실행하고 싶을 때 씀
.get()에 들어가는 파라미터 중 하나가 function(){}임 = 콜백함수
콜백함수 -> 함수 안에 함수(function(){})
.get('경로', function(요청내용, 응답할 방법){})
ES6
ES6 신문법
.get('경로',(요청내용, 응답할 방법)=>{})
POST 요청
form 태그에 꼭 있어야할 속성 2개 -> action="/add", method="POST"
(/add 경로로 POST 요청함)
input에 적은 정보는 'req' 파라미터에 저장된다 -> 쉽게 꺼내쓰려면 라이브러리 필요함: body-parser)
body-parser
req에 저장된 정보를 쉽게 꺼내쓰기 위해 사용하는 라이브러리
- npm install body-parser
- yarn add body-parser
body-parser는 요청데이터(body) 해석을 쉽게 도와준다
POST요청으로 서버에 데이터 전송하고 싶으면
1. body-parser 필요
2. form 데이터의 경우 input들에 name 쓰기
-> 서버에서 input을 구분하기 위해 name="이름" 쓰는 것
3. req.body 라고 하면 요청했던 form에 적힌 데이터 수신가능
app.post('/add', function(req, res){
res.send('전송완료');
console.log(req.body);
console.log(req.body.title);
console.log(req.body.date);
})Tips
-
express란 'Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크'이다.
Node.js를 사용하여 쉽게 서버를 구성할 수 있게 만든 클래스와 라이브러리의 집합체라고 보면 된다. -
Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. Node.js는 이벤트 기반, Non 블로킹 I/O 모델을 사용해 가볍고 효율적입니다. Node.js의 패키지 생태계인 npm은 세계에서 가장 큰 오픈 소스 라이브러리 생태계이기도 합니다.
-
node.js는 JavaScript 기반으로 구성된 서버 사이드 서비스를 JavaScript로 구현할 수 있게 만든 런타임이고, npm은 node.js 기반의 모듈을 모아둔 집합 저장소이다. npm은 Node Package Manager 또는 Node Package Modules라고도 한다.
