난 프론트엔드로 정했지만, 프론트엔드 개발자라고해서 진짜 프론트엔드 쪽 지식만 가지고 있으면 안될 것 같다. 기본적으로 데이터베이스 다루는 법이나 서버를 다룰 수 있어야 프론트엔드에 대한 이해도 더 잘 할 수 있고, 프론트엔드와 백엔드 간의 연계를 잘 알 수 있을 것이라 생각한다. 부트캠프에서 아주 잠깐 데이터베이스 관련해서 강의를 듣긴했지만, 프로젝트를 병행해서 공부해보려고 한다.
복습용으로 블로그 작성하기 !!👊
0. 서버가 무엇인가?
단순히 말해서 요청을 받으면 요청한 내용을 보내주는 프로그램 (요청을 처리할 수 있는 기계) 여기서 요청은 네가지 방식이 있음. 읽기(GET), 쓰기(POST), 수정(PUT), 삭제(DELETE)
1. node.js 사용하기.
1) node.js가 무엇인가?
Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임
즉 javascript를 브라우저 환경 말고 다른 환경에서도 실행할 수 있게 도와주는 실행환경.
2) 왜 node.js로 서버를 만드는가? (특징)
(1) Non-blocking I/O
다른 언어 이용시에 버거운 요청이 오면 서버가 잠시 중지를 해야함.
그 동안 다른 요청을 못 받음.
반면에 node.js를 이용하면,
일단 요청을 다 받음. 그 다음 처리속도가 빠른 것부터 결과를 갖다줌.
그리고나서 어려운 작업을 진행함.
그것을 non-blocking I/O라고 함. 그런 특성을 가지고 있어서 node.js가 유용함. 특히 sns, 채팅 서비스 같이 요청이 많이 들어오는 경우에 유용
(2) 코드가 쉬움.
코드가 짧고 쉬워서 프로토타입 제작 시에 유용함. 그리고 Pivoting이 쉬움.
(Pivoting : 기존의 사업을 다른 방향으로 전환하는 것)
(3) 웹 서비스 개발이 아닌 경우에는 유용하지 않음.
예를 들어 이미지 처리 서버를 만든다고 하면 유용한 라이브러리 등이 없음.
3) node.js 설치하기
(1) node.js 설치방법
- node.js 검색해서 설치하기.
- terminal에 npm init으로 npm 시작하기.
- npm install express로 express 설치하기 (node.js 라이브러리)
- node_modules는 라이브러리에 필요한 자료를 담는 공간
(2) nodemon 설치 방법
node server.js로 계속 서버 껐다가 켜는 것은 불편함으로
라이브러리 설치해서 서버 켜는 것을 자동화 시킬 수 있음.
- npm install -g nodemon
- nodemon server.js 입력 후 실행
** 이미 사용 중인 포트 사용 중지하기
sudo lsof -i :3000
kill -9 PID (사용 중인 포트 PID)
4) 서버 만들기
(1) 서버 오픈
const express = require("express");
const app = express();
app.listen(8080, function () {
console.log("listening on 8080");
// app.listen(서버띄울 포트번호, 띄운 후 실행할 코드);
터미널에 node server.js(만든 js파일)치면 console.log 내용이 뜸.
5) 데이터 전달하기
(1-1) 서버에 GET 요청
app.get("경로",function(요청,응답){
응답.send("")
})
app.get("/pet", function(req,res){
res.send("반갑습니다.")
})
(1-2) 서버에 GET으로 파일 전송하기
app.get("/", function (req, res) {
res.sendFile(__dirname + "/index.html");
});
//es6로 화살표 함수 가능
app.get("/",(req,res) => {
res.sendFile(__dirname + "/index.html");});(2) 입력한 데이터 전달하기
- form 태그 세팅
<form action="/add" method="POST"> //경로 , / 정보를 어떤 형태로 전달할꺼냐
- 데이터를 서버로 전송 (body-parser 이용)
server.js
app.use(express.urlencoded({extended: true})) body-parser 요청데이터(body)의 해석을 도와줌
- input에 name 속성 넣기
어떤 정보가 어디 인풋에 들어있는지 알기 위해서
(나는 각각 title, contents라고 넣음)
- post요청 하기
app.post("/add", function (req, res) {
res.send("전송완료");
console.log(req.body.title); //title 이름의 input내용 가져오기
});** REST API
-
API란
웹서버와 고객 간의 소통방법
어떻게 해야 서버와 통신할 수 있을까? -
REST 원칙 6가지
- Uniform Interface
하나의 URL로는 하나의 데이터를 가져와야함 (일관적이고 간결하고 예측가능하게) - Client-server 역할 구분
브라우저는 요청만, 서버는 응답만. - stateless
요청1과 요청2는 의존성이 없어야함. (연관이 되어있으면 안됨) - cacheable
서버에서 보내주는 정보는 캐싱이 가능해야함. (이건 브라우저가 잘해줌) - Layered System
여러개의 레이어를 거쳐서 요청을 처리하게 만들어도 됨. - Code on Demand
서버는 고객에게 실제 실행가능한 코드를 전송해줄 수도 있음.
- Uniform Interface
-
잘만든 API
- 단어들을 동사보다는 명사 위주로 구성하기
- 응용해서 다른 정보들을 쉽게 가져올 수 있을 정도로 일관성 있게 하기
- 대충 봐도 어떤 정보가 들어올지 예측이 가능함.
- 띄어쓰기는 언더바_대신 대시-기호-사용
- 파일 확장자 쓰지 말기 (.html 이런거)
- 하위 문서들을 뜻할 땐 / 기호를 사용하기 (하위폴더같은 느낌)
