데브 스토어에 깃허브 OAuth를 도입하려면 관련된 서버단에서 해야할 일을 구현해야한다...
개발자 오픈마켓 컨셉이라 깃허브 로그인 기능을 넣으려고 하다가
express를 공부하게 되었다.
express를 통해서 가볍게 웹 서버를 구현할 수 있다. 실제로 OAuth 예제를 찾아보면 express.js를 사용한 예제를 많이 볼 수 있다. 그중 하나를 따라갔다.
import express from "express";
const PORT = 4000;
const server = express();
// middleware: req와 res 사이에 개입하는 중간개념. 어떤 함수를 호출하거나 다음으로 넘기는 역할을 한다
const protectSecret = (req, res, next) => {
const URL = req.url;
if (URL === "/") {
return res.send("❌");
} else {
console.log(URL);
next(); // middleware 실행 후 res 진행(여기서는 404 error)
}
};
server.use(protectSecret); // 모든 req가 거쳐가는 통로로 protectSecret 지정
// 화면에 Hello World가 보여진다
server.get("/", (req, res) => {
res.send("Hello World!");
});
// 터미널에 node server.js를 치면 터미널에 뜨는 문구
const handleListening = () => {
console.log(`server is listening on ${PORT} port!`);
};
server.listen(PORT, handleListening);개인적으로 ESM 방식을 사용한 JS를 선호해서 require가 아니라 import를 사용했다. 의외로 구글링하다보면 require를 사용한 CommonJS 문법으로 express를 사용한 것을 많이 볼 수 있는데 처음부터 import로 배운 나로서는 가독성 최악이었다.
하지만 morgan같은 서드파티 라이브러리는 커뮤니티에서 CommonJS를 권장한다고 하는데, 권장이니까 살포시 무시하고 ESM 방식으로 사용할 예정이다.
morgan은 node.js에서 HTTP 요청 logger 미들웨어다.
import express from "express";
import morgan from "morgan";
const PORT = 4000;
const server = express();
const logger = morgan("dev"); // 로그 라인을 보여주는 출력 stream이다. dev 말고도 다양한 형식이 있다.
server.use(logger);
server.get("/", (req, res) => res.send("home"));
server.get("/secret", (req, res) => res.send("😷"));
const handleListening = () => {
console.log(`server is listening on ${PORT} port!`);
};
server.listen(PORT, handleListening);node.js 서버에서는 로그(log)를 관리하기 위한 별도의 서드파티 라이브러리가 있으면 편하다고 한다. 편하다는 의미에는 다른 건 아직 모르겠고 이런 것도 있는 것 같다.
morgan을 쓰면 미들웨어 코드에서 next()를 안써줘도 된다. 그리고 출력 스트림으로 dev를 사용하면 위 사진처럼 응답 상태코드에 따라 색상이 다르게 출력되는 기능을 사용할 수 있다.
색상에 대한 공식문서 설명이다.
개발용으로 응답 상태별로 색상이 지정된 간결한 출력. :status 토큰은 성공 코드의 경우 녹색, 서버 오류 코드의 경우 빨간색, 클라이언트 오류 코드의 경우 노란색, 리디렉션 코드의 경우 청록색, 정보 코드의 경우 무색으로 표시됩니다.
참고한 블로그 https://taehyeki.tistory.com/29
