프론트엔드 공부 블로그 프론트엔드 공부 블로그

이전에 node.js 환경에서 CLI 라이브러리를 만드는 작업을 진행했었다. https://citron031.tistory.com/entry/commanderjs%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%9C-js-CLI-%EB%9D%BC%EC%9D%B4%EB%B8%8C%EB%9F%AC%EB%A6%AC-%EA%B5%AC%ED%98%84-with-%EC%98%88%EC%A0%9C commander.js를 사용한 js CLI 라이브러리 구현 (with 예제)CLI 라이브러리를 구현하기 위해서는 여러 키워드들에 대해서 알아야 한다. - bin 등록 (package.json의 bin)- 커맨드를 통해 인자를 받기 위한 process.argv- shell 스크립트 작성등등... 위와 같이 CL..

자바스크립트로 날짜를 다루기 위해서 Date() 객체를 사용한다. 그러나, 다소 불편하고 답답한 사용법 때문에 dayJS나 moment같은 라이브러리를 사용하기도 하는데, 이번에는 날짜를 컨트롤 할 때 불편함을 줄여주는 date-fns라는 라이브러리에 대해서 소개하고자 한다. https://date-fns.org/ Modern JavaScript Date Utility Library date-fns provides the most comprehensive yet simple and consistent toolset for manipulating JavaScript dates in a browser & Node.js. date-fns.org date-fns는 node 환경과 브라우저 환경에서 모두 안정적으..

타입스크립트로 FE 개발을 해봤다면, 모두 한 번쯤은 경험해본 일이 있을 것이다. 바로 서버와 API 통신을 하면서, Response로 받아온 데이터의 타입 처리를 위해 type을 일일히 작성하는 일이다. 당연하다면 당연한 일이지만, API에 변경점이 있을 때 마다 매번 타입을 다시 작성해야 하고 API 호출에 대한 코드 역시 개발자가 직접 관리해야하는 부분이었다. tRPC는 이를 좀 더 효율적으로 개선하여 개발자에게 도움을 주는 라이브러리이다. 👍 tRPC는 Typed Remote Procedure Call의 줄임말이다. 공식 문서에서 소개하는 API 호출 코드를 확인하면 다음과 같다. 다음은 우리가 기존에 사용하던 코드 // 기존 코드 const res = await fetch('/api/users/..

정직인 서버를 띄우는 방법들에 대해서 알아보았다. SPA를 빌드 후 배포한다거나, 단순히 이미지나 html로 이루어진 웹페이지를 배포한다거나 할 때 복잡한 서버의 필요 없이 정적 서버를 띄워 웹 사이트에 접근하게 만들 수 있다. 이에 대한 여러가지 방법들에 대해서 알아보고, 기록하였다. serve, http-server와 같은 라이브러리 사용하기 CRA로 생성한 리액트 웹 어플리케이션의 빌드 명령어를 사용하면, 터미널에 친절하게 serve를 사용하여 정적 서버를 띄우는 방법을 알려준다. npm install -g serve serve -s build 위의 명령어로 serve를 설치하고, build 폴더 내부의 빌드된 리액트 어플리케이션을 정적 서버에 띄워준다. 이와 유사하게 http-server 라이브러..

스프링에서 많이 사용되는 JSP, Mustache, Thymeleaf와 같은 템플릿 엔진이 express에도 있을 것이라 생각하였다. 그러던 중 강의에서 pug(구 jade)라는 템플릿 엔진을 알게 되었다. 그런데, pug는 마지막 커밋이 꽤나 오래전(약 2년전)이었고 좀 더 많이 사용되는 템플릿 엔진을 찾아보았다. handlebars나 nunjucks과 같은 템플릿 엔진도 찾을 수 있었지만, 가장 많이 사용되는 ejs를 간단하게 사용해보고 설정과 사용법을 남기도록 하였다. // ./index.js const express = require("express"); const app = express(); // ejs 설정 app.set("view engine", "ejs"); // ejs를 사용한다. ap..

typeORM을 사용하면, node.js 환경에서 복잡한 쿼리문을 SQL이 아니라 타입스크립트 문법으로 작성할 수 있다. 사실, Sequelize를 사용해본 경험이 있는데 다소 구성이 복잡하였고, 무엇보다도 타입스크립트로의 전환이 쉽지 않았다. 때문에 좀 더 타입스크립트에서 사용하기에 좋고 더 간단한 ORM이 무엇일까 고민하였고 typeORM을 사용하게 되었다. 필요한 라이브러리 설치 & 설정 npm i typeorm reflect-metadata @types/node 타입스크립트 설치하기 npm i -D typescript ts-node 그리고 사용할 데이터베이스에 맞게 db 드라이버를 설치한다. (여기서는 mysql) npm i mysql or npm i mysql2 설치한 reflect-metada..

서버에서는 클라이언트를 구별하기 위한 방법으로 ip주소를 확인할 수 있다. express에서는 이를 어떻게 확인할 수 있을지 알아보았다. const express = require("express"); const app = express(); const port = 8080; app.get("/", (req, res) => { res.send("Hello World!"); }); app.get("/ip", (req, res) => { const ip = req.headers["x-forwarded-for"] || req.ip; console.log("req.ip", ip); res.status(200).send({ ip, message: "Check Your Ip" }); }); app.listen(po..

Oauth는 우리가 흔히 볼 수 있는 소셜 로그인의 인증 방식이다. 🍉 카카오, 구글, 깃허브, 네이버 아이디 등을 이용한 로그인이 Oauth를 통해서 구현되어있다. 🍉 Oauth(Open Authorization)는 인증을 중개해준다. 이미 사용자의 서비스를 가지고 있는 웹서비스에서 대신 사용자에 대한 인증을 해주고, 이를 통해서 접근 권한에 대한 토큰을 받아 서버에 접근할 수 있게 된다. Oauth2.0는 보안된 리소스에 액세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화한 표준 프로토콜의 한 종류이다. 또한, OAuth를 이용하여 서버에서 사용자 관리에 대한 부담을 줄일 수 있다. 🍸 OAuth 없이 사용자 인증을 구현한다면, 회원가입 관리, 비밀번호 변경, 회원정보 변경, 이메일 인증..