node.js

api를 문서화하고 있었는데, 매번 일일이 치기 귀찮다. 시간도 많이 드는데 하나씩 언제 치고 있는가. 그래서 자동화하는 라이브러리를 봤다가 시도했다가 실패했다. 그래서 머리 아파서 나중에 하자.지금이 그 나중이다.설치하기npm install swagger-jsdoc swagger-ui-express swagger-autogenswagger-jsdoc : json으로 만들어진 파일을 가지고 openAPI 사양을 생성한다.swagger-ui-express : express에서 swagger.json를 기반으로 swagger-ui를 생성해준다.swagger-autogen : swagger를 자동 생성해주는 라이브러리이다.swagger.js 셋팅하기1) 구조 살피기// 프로젝트 구조├ src└─ swagger..

우연히 some함수를 알게 되어서, filter와 비슷하여 비교글을 쓰고자 한다.1. filter()을 활용한 삭제const deleteNote = (id) => { const newNotes = notes.filter((note) => note.id !== id); setNotes(newNotes);}→ id를 prop으로 받아온다. notes배열에서 note.id가 파라미터로 일치하지 않는 원소만 추출하여 새로운 배열을 만든다. 이 말은 note.id가 id인 것을 삭제해준다. 처음에 이걸 이해를 못해서 많이 헤맸다.2. some()을 활용한 삭제const array = [1, 2, 3, 4, 5];const even = (element) => element % 2 === 0;console..

우연히 이 둘의 차이점을 보게 되서 이에 대한 글을 쓰고자 한다.npm install을 할 때 밑의 두 파일을 기반으로 설치를 하게 된다.package.jsonpackage-lock.jsonpackage.json 은 우리가 설치하고자 하는 모듈에 대한 의존성 목록이 존재한다. 여기서 의존성 목록의 버전은 version range를 따르고 있다. (~, ^ "react": "^17.0.2"version range로 인해 발생할 수 있는 이슈는 각자 서로 다른 node_modules 를 생성할 수 있다.예를 들어, 하나의 프로젝트에 여러 명의 개발자가 협업을 할 경우에 각자의 로컬 환경에 따라 npm, node 버전 등이 다르다. 이러한 상황에서 각자 npm install 실행한다면, 서로 다른 버전을 가지..

개념Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크다. 부트스트랩과 비슷하게 m-1, **flex**와 같이 미리 세팅된 유틸리티 클래스를 활용하는 방식으로 HTML 코드 내에서 스타일링을 할 수 있다.코드의 길이 Not Pretty Code 😵내가 이 글을 쓴 계기는 코드의 가독성때문에 찾다가 쓰게 되었다.그래서 구글링해서 찾아보았더니, styled-component를 쓰던가 아니면 apply방식을 썼다.가독성 좋게 만들기1) styled-componentimport styled from "styled-components";const StyledButton = styled.button` padding: 6px 12px; border-radius: 8px; fon..

우연한 기회에 sentry를 접하게 되어 글을 정리하고자 한다. 이 글에 대한 내용은 더 추가될 예정이며, 글이 길어질 경우에 나눠서 글을 쓰고자 한다. 글을 접했을 때는 내가 웹 사이트를 배포하고 아무것도 모르는 상태에서 사용자가 늘어나고, 그에 대해 오류가 일어났었다. 그런데 스타트업의 특성상 사수가 없다보니 물어볼 사람이 없어서 혼자 삽질을 엄청했다… 그래서 배포를 할 때 너무 무서웠고, 곧 react 배포할 때 똑같은 상황을 겪지 않기 위해 열심히 공부중이다. 프론트엔드 모니터링 프론트엔드 모니터링은 웹 사이트 또는 앱의 성능을 추적하는 데 사용되는 일련의 프로세스 및 도구를 말한다. 프론트엔드 모니터링은 주로 사용자가 최종적으로 보는 부분에 중점을 둔다. 아래와 같은 문제를 모니터링에서 기준으로..

가짜 api 서버는 어떻게 만드는가 궁금할 수 있다. 프론트와 백엔드 개발을 같이 하다보면 처음에는 백엔드가 없는 상태에서 가짜 데이터를 주고 받아야 한다. 그리고 나중에는 실제 api를 연결해서 데이터를 주고받아야 하는데, 이를 두번에 걸쳐 할 필요없이 가짜 api 서버를 만들어 활용하면 된다. 1. 개념 알아보기 우리가 지금 쓸 것은 json-server라는 라이브러리이다. 이는 REST API를 구축해주고, api 테스트를 할 때 편리하다. 그리고 프로덕션에서는 사용하지 않는다. 2. json-server 설치하기 2-1) 라이브러리 설치하기 npm install -g json-server 2-2) db.json 파일 만들기 //db.json { "test": [ { "id": 1, "name": ..

우연히 어떤 글을 보고 swagger로 api docs를 작성할 수 있다는 것을 알게 되었다. 혼자 프로젝트 진행할 때 api가 너무 많아서 노션으로 일일이 작성해서 봤었는데 이 방법이 더 편리할 것 같아 한번 해보고 글로 작성할려고 한다. 1. swagger 설치 이전에 있던 express 프로젝트를 가져와 아래의 모듈을 설치한다. npm install swagger-jsdoc swagger-ui-express --save-dev swagger-ui-express : API 문서 UI 렌더링을 위한 패키지 swagger-jsdoc: Swagger 태그 주석을 추가해 API 문서화를 위한 패키지 개발할 때 보기 위함이기에 —save-dev옵션을 준다. 2. swagger 파일 설정 1) swagger.j..

Joi란 사용자가 입력한 데이터가 유효한지 검사하는 유효성 검사 라이브러리 라고 할 수 있다. 설치 및 사용하기 npm install joi joi를 사용하기 위해서 install해준다. const Joi = require('joi'); 스키마 정의하기 // validate할 schema 정의 const schema = Joi.object().keys({ username: Joi.string().min(3).max(30).required(), birthyear: Joi.number().integer().min(1900).max(2018), }); 유효성 검사를 하려면 db에 정의되어 있는 컬럼들을 가져와서 몇개의 컬럼만 유효성 검사를 할 수 있다. username: 글자이고, 길이가 최소 3글자에서 최대..