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 실행한다면, 서로 다른 버전을 가지..

⚒ 개발 환경Frontend: TypeScript + React + Next.jsBackend: Express + TypeScript + Node.js + MongoDBKAKAO DEVELOPER에서 선행작업하기 ⚠️ Kakao developer 해당 사이트에 들어가서 해야 할 선행 작업을 수행한다.1. 애플리케이션 만들기→ 앱 아이콘, 이름, 사업자명, 카테고리 등을 넣어 등록한다. 나의 경우 개인으로 추가한 것이기에 사업자명은 내 별명을 넣어주었다.해당 애플리케이션 만들어졌다.2. REST API 키 등록하기애플리케이션을 만들면 자동으로 만들어진다. 여기 중 REST API를 따로 저장해놓는다.3. 사이트 도메인 설정하기내 애플리케이션 > 앱 설정 > 플랫폼에 들어가면 맨 하단에 설정할 수 있다.나중..

카카오톡 api를 설정하면서 세션을 등록하였다. 이에 대해서 글이 길어질까 싶어 글을 쪼갰다. 오늘은 session에 대해서 설명하고자 한다.개발환경Backend: Express + TypeScript + Node.js + MongoDB세션이란?Cookie방식과 다르게 데이터를 서버에 저장하는 방식Server가 Client에 유일하고 암호화된 아이디(Session ID)를 부여실제 데이터는 서버에 보관해 두고 각각의 유저들에 대한 고유 id 값을 쿠키에 저장하여 기록한다. 서버는 사용자의 ID값(Cookie에 저장되어 있는)을 비교 및 판단하여 어떤 사용자의 데이터인지와 그 사용자의 접속 여부를 판별할 수 있다.Session Store란?: 세션이 데이터를 저장하는 장소대표적으로 세가지가 있다.기본 셋팅..

개념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..

개념node.js에서는 많은 웹 소켓 구현체가 있다. 대표적으로 socket.io와 ws가 있다. 지금 여기서 내가 사용할 기술은 socket.io이다.웹에서 데이터를 주고 받을 땐 HTTP를 사용한다. 하지만 HTTP는 요청이 있어야만 응답을 보내주기 때문에 실시간을 보장하지 않는다. HTML5 WebSocket은 매우 유용한 기술이지만 오래된 브라우저의 경우 지원하지 않는 경우가 있다.www.caniuse.com브라우저 간 호환이나 이전 버전 호환을 고려하여 Node.js를 위한 강력한 Cross-platform WebSocket API인 Socket.io를 사용하는 것이 바람직하다.socket.io를 통한 양방향 통신 구현하기1) 백엔드에서 socket.io 설치하기(서버)npm i socket.i..

가짜 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": ..