다른 속성이나 수치도 줄 수 있기 때문에 state 없이, 애니메이션 스피드 적용에도 탁월하다.
useRef를 이용하면 이벤트 이후, 일어나는 리 렌더링에 대해 데이터를 방어할 수 있다. 예를 들어, 동영상 재생, 멈춤 버튼을 눌렀을 때 페이지가 렌더링 된다면, 동영상은 계속 시작점으로 돌아가 버려서 똑바로 재생될 수 없을 것이다. 이때, 재생, 멈춤 버튼을 useRef로 사용하면 재생, 멈춤 버튼이 눌릴 때, 그 버튼의 동작만 하고 렌더링은 되지 않기 때문에 잘 작동하게 된다.
하지만 매번 전송하고 CORS 적고 머리가 아프다. 미들웨어로 express를 사용하여 편안한 백엔드 코딩 생활을 즐겨보자!
2. 미들웨어?
어떠한 요청이 있을 때 그 요청을 받기 전에 한번 거치는 곳이다.
그래서 귀찮은 작업, 즉 모든 요청이나 응답에 같은 작업을 해야 할 때 미들웨어를 거쳐 똑같은 작업을 모든 요청이나 응답이 줄 수 있다.
종류로는 express, cors(모든 요청과 응답에 header을 따로 붙여 주지 않아도 된다) 등이 있다.
물론 만들어서 나만의 미들웨어를 사용할 수 도 있다.
3. Express
그중에 가장 대표적인 것이다.
대표적인 기능으로는 body-parser(4.16 이상 버전의 express를 사용하면 내장되어 있다) => json파일로 파싱 해주는 기능이 있다.
4. 사용법
const express = require("express");
const app = express();
// express를 requier로 가져와서 app으로 사용할 것이다.
app.use(express.json());
// use로 모든 응답과 요청에 사용하게 된다.
5. next의 고찰
미들웨어를 사용할 때에만 next를 3번째 인자로 주게 된다. 아무 때나 붙이는 것이 아니다.
next를 사용하게 되면 일단 그 내용을 보류하고 다음 응답이 있을 때 같이 내보 네게 된다. (일명, 짬 토스)
그러므로 아무 곳에서나 짬 토스를 하는 것이 아니라, 다음 라우터에서도 미들웨어를 받을 수 있도록 사용하게 되는 것이다.
const http = require("http"); // 사용할 모듈을 불러와 준다.
const PORT = 3005; // 포트번호가 된다.
const ip = "localhost"; // ip가 된다.
const server = http.createServer((request, response) => {
if (request.method === "OPTIONS") { //cors 설정을 돌려줘야 한다.
response.writeHead(200, defaultCorsHeader);
response.end();
}
if (request.method === "POST" && request.url === "/") { //메서드가 POST이며, URL이 홈일때,
let body = [];
request
.on("data", (chunk) => {
body.push(chunk);
})
.on("end", () => {
body = Buffer.concat(body).toString().trim(); // 양끝의 공백을 지운다.
response.writeHead(200, defaultCorsHeader);
response.end(body);
});
} else {
response.writeHead(400, defaultCorsHeader); // 아닐경우 에러를 보여주자.
response.end();
}
});
텍스트를 쓰면 양 끝의 공백(' ')을 지워주는 아주 쓸모없지만 서버를 거쳐서 뭔가 작업 후에 우리에게 보여주는 예시를 만들었다.
HTML 파일과 App.js파일은 생략.
서버를 생성한다. HTTP모듈을 이용하는 것이다.
그리고 서버가 들어갈 변수를 만들어 생성해 주고, 그에 필요한 PORT, IP를 설정해 준다.
그리고 알맞은 내용을 넣어주고, 응답을 끝내는 것을 잊지 않는다.
그리고 마지막으로 'node server/서버가 담긴 자바스크립트 파일. js'를 터미널에 입력한 후에, 설정한 URL을 통해서 웹을 열어 보면 생성된 서버를 즐길 수 있다.
2. CORS?
Cross Origin Resource Sharing을 줄인 것이다.
우리가 주소가 다른 서버로 무언가 요청을 보낼 때 그 요청을 막아버리는 경우가 있다.
이는 위의 사진에서 보다시피 웹 사이트에서 AJAX요청을 보낼 때, 브라우저 자체가 신뢰되지 않은 사이트에게 요청을 보내는 것을 막아주는 역할을 한다. 위의 사진처럼 따라간 여자가 알고 보니 머리긴 남자였을 수 도 있으니 말이다. 와! 생명의 은인!!
3. SOP
Same Origin Policy를 줄인 것이다.
오직 같은 URL들끼리 API 등의 접근을 가능하게 한다는 '정책(Policy)'이다.
즉, 이러한 정책으로 인해 우리는 다른 웹 사이트에서 요청들이 막히게 될 것이고, 그것에 '예외'를 만들어 주는 것이 바로 CORS이다.
만약, 무언가 불순한 의도를 가진 웹사이트에 실수로 접속했다. 그때, 그 웹사이트의 자바스크립트에 코드들이 받아와 진다. 그 코드들이 자신들의 서버로 나의 개인정보와 같은 정보들을 자신들의 서버로 전송시켜 버린다면? 이와 같은 일들을 막기 위해 최선을 다하고 있는 것일 뿐이니 자꾸 에러 뜬다고 너무 미워하지 말자.
4. 그래서 어떻게 연결할 것인가?
const defaultCorsHeader = {
"Access-Control-Allow-Origin": "*", // 모든 요청들을 다 받을때는 "*" 를 쓴다.
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Accept",
"Access-Control-Max-Age": 10,
};
위와 같은 방법으로 OPTION을 넣어서 예외를 만들어 준다.
받는 곳의 IP주소나 사용하는 프로토콜 등이 들어있는 Header가 다른 서버에 요청이 보내질 때, Origin을 추가하게 된다. Origin에는 요청하는 쪽의 scheme과 포트, 도메인 등이 들어가 전송을 하게 된다. 이것을 먼저 확인하고 요청을 받을지 안 받을지를 결정해 주게 되는 것이다.
이때, PUT, DELETE 등은 서버에 데이터에 직접적으로 영향을 줄 수 있기 때문에 진짜 요청을 보내기 전, 'Preflight'를 먼저 보내보고 요청이 허용된 안전한 요청인지 확인을 한 후에 진짜 요청을 보낸다.
5. 번외편 : Nodemon을 사용해 보자.
nodemon은 서버 코드를 수정한 후에 다시 서버를 껐다 켤 필요 없이, 자동으로 서버를 다시 껐다 켜주는 친구이다. 마치 리액트나, VS code Live Server처럼 말이다.
어떻게 사용하나요?
터미널에 'npm install -g nodemon'을 입력해 설치한다. (-g는 글로벌 설정이다. 이 작업 말고 모든 폴더와 작업에서도 사용할 수 있게 설치하는 것이다.)
그리고 터미널에 'nodemon server/서버가 담긴 자바스크립트 파일. js'을 입력해 켜주면 된다.
이것마저 귀찮다! 하신다면 package.json파일 안에 'scripts' 객체 안에 원하는 명령어(나는 'start'로 한다)를 설정해 준다.
//Ex) 아래 코드는 package.json 파일에 있는 코드이다.
"scripts": {
"start": "nodemon server/서버가 담긴 자바스크립트 파일.js",
},
// 이제 npm start를 입력해서 nodemon을 바로 실행하자!
