티스토리

프론트엔드 공부 블로그 (JS, React)
검색하기

블로그 홈

프론트엔드 공부 블로그 (JS, React)

citron031.tistory.com/m

Front-End 공부 블로그입니다.

구독자
2
방명록 방문하기
공지 Github 🐈 모두보기
728x90

주요 글 목록

  • node.js CLI 사용성 높이기 - 질문을 통해서 사용자가 옵션 값 선택하게 하기 - 프롬프트 CLI (with inquirer.js) 이전에 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.. 공감수 0 댓글수 0 2024. 10. 5.
  • date-fns를 사용하면 간단하게 날짜를 컨트롤할 수 있다. 자바스크립트로 날짜를 다루기 위해서 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 환경과 브라우저 환경에서 모두 안정적으.. 공감수 0 댓글수 0 2024. 3. 3.
  • tRPC란? tRPC 간단 소개 타입스크립트로 FE 개발을 해봤다면, 모두 한 번쯤은 경험해본 일이 있을 것이다. 바로 서버와 API 통신을 하면서, Response로 받아온 데이터의 타입 처리를 위해 type을 일일히 작성하는 일이다. 당연하다면 당연한 일이지만, API에 변경점이 있을 때 마다 매번 타입을 다시 작성해야 하고 API 호출에 대한 코드 역시 개발자가 직접 관리해야하는 부분이었다. tRPC는 이를 좀 더 효율적으로 개선하여 개발자에게 도움을 주는 라이브러리이다. 👍 tRPC는 Typed Remote Procedure Call의 줄임말이다. 공식 문서에서 소개하는 API 호출 코드를 확인하면 다음과 같다. 다음은 우리가 기존에 사용하던 코드 // 기존 코드 const res = await fetch('/api/users/.. 공감수 1 댓글수 0 2024. 2. 3.
  • Node Static Server 띄우는 방법들 정직인 서버를 띄우는 방법들에 대해서 알아보았다. SPA를 빌드 후 배포한다거나, 단순히 이미지나 html로 이루어진 웹페이지를 배포한다거나 할 때 복잡한 서버의 필요 없이 정적 서버를 띄워 웹 사이트에 접근하게 만들 수 있다. 이에 대한 여러가지 방법들에 대해서 알아보고, 기록하였다. serve, http-server와 같은 라이브러리 사용하기 CRA로 생성한 리액트 웹 어플리케이션의 빌드 명령어를 사용하면, 터미널에 친절하게 serve를 사용하여 정적 서버를 띄우는 방법을 알려준다. npm install -g serve serve -s build 위의 명령어로 serve를 설치하고, build 폴더 내부의 빌드된 리액트 어플리케이션을 정적 서버에 띄워준다. 이와 유사하게 http-server 라이브러.. 공감수 0 댓글수 0 2023. 9. 26.
  • express의 template engine 사용하기 (ejs) 스프링에서 많이 사용되는 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.. 공감수 0 댓글수 0 2023. 7. 13.
  • typeORM 사용하기 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.. 공감수 0 댓글수 0 2023. 7. 7.
  • express 서버에서 요청한 클라이언트의 IP주소 확인하기 서버에서는 클라이언트를 구별하기 위한 방법으로 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.. 공감수 0 댓글수 1 2023. 4. 23.
  • OAuth2.0에 대해서 알아보기 (with node.js) Oauth는 우리가 흔히 볼 수 있는 소셜 로그인의 인증 방식이다. 🍉 카카오, 구글, 깃허브, 네이버 아이디 등을 이용한 로그인이 Oauth를 통해서 구현되어있다. 🍉 Oauth(Open Authorization)는 인증을 중개해준다. 이미 사용자의 서비스를 가지고 있는 웹서비스에서 대신 사용자에 대한 인증을 해주고, 이를 통해서 접근 권한에 대한 토큰을 받아 서버에 접근할 수 있게 된다. Oauth2.0는 보안된 리소스에 액세스하기 위해 클라이언트에게 권한을 제공하는 프로세스를 단순화한 표준 프로토콜의 한 종류이다. 또한, OAuth를 이용하여 서버에서 사용자 관리에 대한 부담을 줄일 수 있다. 🍸 OAuth 없이 사용자 인증을 구현한다면, 회원가입 관리, 비밀번호 변경, 회원정보 변경, 이메일 인증.. 공감수 0 댓글수 0 2023. 4. 7.
  • http 통신 request의 query, params, body (with express) express를 사용하여 서버를 만들면 URI를 통해서 API를 사용할 수 있다. API 문서를 통해서 서버의 자원을 사용할 수 있다. 그렇다면, 클라이언트가 원하는 데이터를 얻기 위해서 URL에 데이터를 추가적으로 더 주었을 때(URI), express에서 어떻게 이 데이터를 받아와 response할 수 있을까? query const express = require('express'); const router = express.Router(); router.get('/hi', findAll); /hi?name=Kim&age=33 과 같은 URI에 접근하면, 서버에서 req.query 를 통해 데이터를 받을 수 있다. query를 시작할 때 ?를 쓰고, 여러 데이터를 받을 때는 &로 데이터를 구분한다. .. 공감수 0 댓글수 0 2023. 3. 25.
  • Node.js에서 ORM 사용하기 (sequelize 기본 설정 하기) ORM, Object-Relational Mapping 은 model을 기술하는 도구이다. ORM을 통하여 SQL query문을 직접 작성하지 않고, 프로그래밍 언어를 통해서 Model에 접근할 수 있다. 이렇게, 프로그래밍 언어의 관점에서 Model에 접근할 수 있는 까닭은, ORM이 대신 프로그래밍 언어를 SQL query문으로 변환해주기 때문이다. 🏁 데이터베이스와 프로그래밍 언어 사이의 개념의 간극을 좁힌다. ORM은 entity나 record를 객체나 클래스를 다루듯이 접근할 수 있게 한다. 🍙 ORM을 통해서 객체에서의 각 속성은 데이터베이스에서 필드를 의미하게 된다. 각 언어마다 사용할 수 있는 ORM API가 있다. 자바에서는 JDBC(Java Database Connectivity) 자바.. 공감수 0 댓글수 0 2023. 3. 23.
  • patch-package 사용하여 노드 모듈 수정하기 오픈소스 라이브러리를 사용하다보면, 불가피한 이유로 node_modules 속 라이브러리를 수정할 일이 발생할 수 있다. 이 경우, 매번 npm install을 할 때마다 수정해야하는 것은 물론이고 다른 사람과의 협업이 진행중이라면, 매번 라이브러리 수정 이슈에 대해서 설명하고 문서를 남겨야하는 번거로움이 있다. 이때 사용할 수 있는 라이브러리로 patch-package가 있다. npm i patch-package patch-package를 설치한 뒤 node_modules에서 라이브러리를 수정한다. 그리고 npx patch-package 해당_라이브러리_이름 으로 patch-package를 실행하면, patches 폴더가 생기고 내부에 라이브러리 이름과 버전을 이름으로 갖는 patch 파일이 생긴것을 .. 공감수 0 댓글수 0 2023. 3. 13.
  • 간단하게 노드 서버에서 로그 기록하기 (morgan 사용하기) 노드를 사용한 서버에서 요청에 대한 로그를 남기기 위해서 미들웨어를 작성할 수 있다. 좀 더 편리한 방법으로 morgan이라는 라이브러리를 설치하여 사용할 수 있다. 난 express 환경에서 morgan을 사용해 보았다. const express = require("express"); const morgan = require("morgan"); const app = express(); app.use(morgan("dev")); 위와 같이 morgan을 사용하여 로그를 남길 수 있다. 인자로 설정을 넣을 수 있는데, 나는 dev설정을 사용하였다. combined, common, dev등의 설정이 있는데 앞의 두 개는 표준 Apache 로그에 관한 설정이고 dev는 개발용으로, 요청에 따라서 색상이 다른 .. 공감수 0 댓글수 0 2023. 3. 10.
  • Node.js 의 Crypto - Cipher, Decipher 사용하기 Cipher를 통해 암호화하고, Decipher를 통해 복호화한다. 암호화와 복호화에 사용되는 key, iv값은 동일해야 한다. 그렇지 않으면 에러가 발생한다. const { createCipheriv, createDecipheriv } = require('crypto'); const stringToBuffer = (str: string) => { const buffer = Buffer.from(str, 'utf8'); return buffer; }; const utilsDecipher = () => { const algorithm = 'aes-192-cbc'; const key = stringToBuffer('a123b456c789dabc0254f123'); // The IV is usually pas.. 공감수 0 댓글수 0 2023. 2. 9.
  • Node.js의 문자열과 바이트 배열 (Uint8Array, Buffer) 일반적으로 영어 알파벳, 숫자, 특수 기호는 1byte, 한글은 2byte의 크기를 가진다. (utf-8) ES2018부터는 TextEncoder()를 사용할 수 있다. 문자열을 Uint8Array으로 변환하기 const utf8Encode = new TextEncoder(); const encode = utf8Encode.encode('aaaabbbbccccdddd'); console.log(encode); /* Uint8Array(16) [ 97, 97, 97, 97, 98, 98, 98, 98, 99, 99, 99, 99, 100, 100, 100, 100 ] */ // 다시 문자열로 const utf8Decode = new TextDecoder(); console.log(utf8Decode.dec.. 공감수 0 댓글수 0 2023. 2. 7.
  • 비트코인 지갑 생성하기 (node.js) 및 잔액 확인 비트코인은 bip 44, bip49, bip 84와 같이 지갑을 생성하는 표준이 형성되어 있다. 🍸 bip 44는 계층지갑, bip49는 P2WPKH-nested-in-P2SH 기반 계정, bip84는 P2WPKH 기반 계정을 생성하는 표준이다. https://trezor.io/learn/a/what-are-bips-slips https://trezor.io/learn/a/what-are-bips-slips trezor.io 자바스크립트로 비트코인 지갑을 생성하는 코드를 작성하였다. ecpair 라이브러리를 통해서 비트코인 지갑 키쌍을 생성할 수 있다. const bip39 = require("bip39"); const { ECPairFactory } = require("ecpair"); const bi.. 공감수 0 댓글수 0 2023. 1. 28.
  • Node.js 서버 생성하기 (with express) Node.js 환경에서 Express.js는 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기 있는 프레임워크이다. http 모듈로 만드는 대신에 express를 사용하여 서버를 만들면, 미들웨어의 추가가 편하고, 자체 라우터를 제공한다. 이를 통해서 express로 더 쉽게 웹 서버를 만들 수 있다. 🥭 npm init으로 시작할 수 있다. 🥭 npm i express로 설치할 수 있다. express 역시 내부적으로는 노드의 http 모듈을 사용하고 있다. Nest.js도 내부적으로는 express를 사용한다고 하니, express는 node 백엔드 개발자라면 알아두어야 할 라이브러리이다. 🍏 npm install express 를 통해서 express를 설치해 사용할 수 있다. expres.. 공감수 0 댓글수 0 2023. 1. 21.
  • Node.js를 사용하여 서버 생성하기 nodejs로 간단하게 웹 서버를 만드는 방법을 정리한다. 참고 자료 : https://nodejs.org/ko/docs/guides/anatomy-of-an-http-transaction/ node 명령어로 js 파일을 실행하여 서버를 켤 수 있다. HTTP 트랜잭션 해부 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 서버 생성 const http = require('http'); const server = http.createServer((req, res) => { res.write('Hello Worlds!'); // HTML을 반환할 수도 있다. res.end('END'); }.. 공감수 0 댓글수 0 2023. 1. 20.
    728x90
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.