풀소유

Express 설치 및 초기 설정Express란?Express는 Node.js를 위한 빠르고 간결한 웹 프레임워크이다. 미들웨어와 라우팅 기능을 제공하여 서버와 API를 쉽게 구축할 수 있게 도와준다.프로젝트 초기 설정mkdir express-apicd express-apinpm init -ynpm install express mongoose corsnpm install --save-dev typescript ts-node @types/node @types/express @types/corsnpx tsc --initTypeScript 설정tsconfig.json 파일을 생성하고 다음과 같이 설정한다.{ "compilerOptions": { "target": "ES2020", "module":..

MongoDB는 NoSQL 데이터베이스로, 비관계형 데이터베이스 시스템이다. 전통적인 관계형 데이터베이스와 달리, MongoDB는 JSON과 유사한 BSON(Binary JSON) 형식의 문서를 사용하여 데이터를 저장하고 관리한다. 이러한 특성 덕분에 다양한 형식의 데이터를 유연하게 저장하고 빠르게 처리할 수 있다.NoSQL: 비관계형 데이터베이스로, 스키마가 필요하지 않다.JavaScript 질의어: 자바스크립트를 질의어로 사용하여 데이터베이스와 상호작용할 수 있다.배열 데이터: 배열 형태의 데이터를 효율적으로 저장하고 관리할 수 있다.JSON 저장: JSON 형태의 데이터를 자유롭게 저장할 수 있다. MongoDB 관리 도구MongoDB Shell (mongosh)명령줄 인터페이스(CLIMongoDB..

웹 사이트에 회원가입을 해야지만 이용할 수 있는 페이지가 있다. 이처럼 누구나 접속할 수 있는 경로를 공개 라우트, 로그인한 사용자만 접속 가능한 경로를 비공개 라우트라고 한다.예제회원가입을 해야지만 이용할 수 있는 비공개 라우트와 누구나 접근 가능한 공개 라우트를 설정하는 예제이다. 이를 위해 RequireAuth 컴포넌트를 사용해 비공개 라우트를 보호하고, Layout 컴포넌트를 통해 공통 레이아웃을 정의한다.useAuth.tsximport type {FC, PropsWithChildren} from "react";import {createContext, useCallback, useContext, useState} from "react";import * as U from "../utils";// L..

react-router는 React 애플리케이션에서 클라이언트 사이드 라우팅을 처리할 수 있게 도와주는 라이브러리이다.React Router의 주요 기능경로 기반 라우팅: URL 경로에 따라 다른 컴포넌트를 렌더링 한다.네스티드 라우팅: 라우트 안에 라우트를 중첩하여 복잡한 내비게이션을 구현한다.동적 라우팅: URL 매개변수를 사용하여 동적인 콘텐츠를 처리한다.프로그램적 내비게이션: 코드에서 직접 내비게이션을 제어할 수 있다.라우트 보호: 인증 및 권한 관리를 통해 특정 라우트 접근을 제어한다.설치npm i react-router Routes, Route, LinkRoutesRoutes는 React Router v6에서 도입된 새로운 컴포넌트로, 라우트의 집합을 정의하는 역할을 한다. 이전 버전에서는 S..

react-beautiful-dnd는 React 애플리케이션에서 드래그 앤 드롭 기능을 쉽게 구현할 수 있도록 도와주는 라이브러리이다. 이 라이브러리는 복잡한 드래그 앤 드롭 상호작용을 간단하게 처리할 수 있게 설계되었으며, 높은 유연성과 성능을 제공한다.주요 특징쉬운 사용법: API가 간단하고 직관적이며, 드래그 앤 드롭 기능을 쉽게 추가할 수 있다.성능 최적화: 가상화와 메모이제이션을 통해 높은 성능을 유지하며, 많은 요소를 포함한 리스트에서도 원활한 성능을 보장한다.접근성: 기본적으로 접근성(Accessibility, a11y)을 고려하여 설계되었다.애니메이션: 드래그 및 드롭 동작에 대한 부드러운 애니메이션을 제공한다.설치npm i --legacy-pee-deps react-beautiful-dn..

React에서는 react-dnd 라이브러리를 사용하여 드래그 앤 드롭 기능을 간편하게 구현할 수 있다.설치먼저, react-dnd와 react-dnd-html5-backend를 설치한다. react-dnd-html5-backend는 HTML5의 드래그 앤 드롭 API를 사용하는 기본 백엔드이다.npm i react-dnd react-dnd-html5-backendnpm i -D @types/react-dndReact DnD에서 백엔드는 드래그 앤 드롭 이벤트를 처리하고, 드래그된 아이템의 상태를 관리하는 시스템이다. "백엔드"라는 용어는 여기서 드래그 앤 드롭 기능을 지원하는 '기술적 메커니즘' 또는 '엔진'을 의미한다. 실제 서버 백엔드와 혼동할 수 있지만, 문맥상 이 백엔드는 클라이언트 측에서 동작..

import {makeRandomCard} './data'const card = makeRandomCard()const uuid = card['uuid'] // 색인 연산자로 객체의 'uuid' 속성값 얻기자바스크립트는 색인 연산자 []를 사용하여 객체의 속성값을 얻을 수 있다. 이러한 형태의 코드는 속성 이름을 잘못 작성하는 실수를 일으킬 수 있다. 또한 이런 오류는 코드가 실행되기 전에는 알 수 없다.이 때문에 타입스크립트는 기본으로 객체의 속성값을 색인 연산자로 얻을 수 없게 한다. 대신 Record 타입을 제공한다. Record 타입type Record = { [P in K]: T;}K: 객체의 키 타입을 지정한다. keyof any는 모든 가능한 키 타입을 의미한다. (예: string, ..

peerDependencies는 package.json 파일의 한 필드로, 패키지가 특정 버전의 다른 패키지와 함께 동작해야 함을 나타낸다. 주로 플러그인이나 라이브러리가 특정 버전의 상위 라이브러리와 함께 동작해야 할 때 사용된다.React 플러그인을 만들 때, 플러그인이 특정 버전의 React와 호환되도록 하고 싶다면 peerDependencies를 사용하여 React 버전을 지정할 수 있다. 아래 예시에서, my-react-plugin은 React 16 이상 버전과 함께 사용되어야 한다.{ "name": "my-react-plugin", "version": "1.0.0", "peerDependencies": { "react": ">=16.0.0" }} peerDependencies의 주..

GitHub FlowGitHub Flow는 깃허브에서 만든 단순한 구조의 브랜치 전략이다. 작은 팀과 빈번한 업데이트가 필요한 프로젝트에 이상적이다.브랜치Main, Feature, Bugfix 브랜치로 이루어진다.모든 브랜치는 Main으로부터 나온다.Main으로부터 기능추가, 버그 수정 작업을 위한 새로운 브랜치를 생성한다.기능 개발, 버그 수정기능별로 커밋한다.커밋 메시지와 브랜치 이름은 정확하고 간결하게 작성한다.커밋은 서버의 동일한 브랜치에 병합한다. (Git flow와 차이점)리뷰 및 병합GitHub Actions와 같은 CI/CD 도구를 사용하여, 풀 리퀘스트가 생성되면 자동으로 테스트를 실행할 수 있다. 이렇게 하면 코드가 main 브랜치에 병합되기 전에 기능 브랜치에서 모든 테스트가 통과했는..

리듀서 함수 몸통에서는 사이드 이펙트를 일으키는 코드를 사용할 수 없다. 그런데 이 점은 리덕스 기능을 사용하는 컴포넌트를 복잡하게 만든다. 리덕스 미들웨어는 리듀서 앞 단에서 부작용이 있는 코드들을 실행하여 얻은 결과를 리듀서 쪽으로 넘겨주는 역할을 한다.dispatch(액션) -> 미들웨어 -> 리듀서 -> 리덕스 저장소 리덕스 미들웨어 타입// 리덕스 미들웨어 타입interface Middleware { (api: MiddlewareAPI): (next: (action: unknown) => unknown) => (action: unknown) => unknown;}// 리덕스 미들웨어 API 타입interface MiddlewareAPI { dispatch: D; getState(..