풀소유

Turborepo를 활용하면 모노레포 환경에서 공통 라이브러리와 설정을 효과적으로 관리할 수 있다. 병렬 빌드, 캐싱, 전역 스크립트 등의 기능을 통해 개발 프로세스를 최적화하고, 공통 패키지를 통해 코드의 일관성과 품질을 유지할 수 있다.병렬 빌드: 여러 작업을 동시에 실행하여 빌드 속도를 향상시킨다.캐싱: 이전 작업의 결과를 재사용하여 빌드 및 테스트 시간을 단축시킨다.워크스페이스 관리: 여러 패키지를 효율적으로 관리하며, 종속성을 명확히 한다.전역 스크립트: 모노레포 내 모든 프로젝트에 대해 통합된 스크립트를 실행할 수 있다.구조Turborepo의 일반적인 디렉토리 구조는 다음과 같다:my-turborepo/ │ ├── apps/ │ ├── web/ │ └── mobile/ │ ├── package..

플러그인은 Nuxt.js 애플리케이션의 전역적으로 사용할 수 있는 기능을 확장하는 JavaScript 파일이다. 플러그인은 애플리케이션 초기화 시 실행되며, Vue 컴포넌트, Vue 인스턴스, Vuex 스토어 등에서 공통적으로 사용할 수 있는 메서드나 서비스를 정의한다. 플러그인 정의플러그인은 plugins 디렉토리 또는 nuxt.config.js에서 설정된 다른 경로에 저장된다. 플러그인의 정의는 기본적으로 다음과 같은 형식으로 이루어진다:// plugins/my-plugin.jsexport default (context, inject) => { // context는 Nuxt.js의 컨텍스트 객체이다. // inject 함수는 전역으로 사용할 수 있는 메서드를 등록한다. inject('myMeth..

$nuxtNuxt 애플리케이션의 루트 인스턴스에 대한 참조로, 애플리케이션의 전역 상태나 기능에 접근할 때 사용된다. Vue 컴포넌트 내에서 this.$nuxt를 통해 접근할 수 있다.refresh(): 현재 페이지를 강제로 리프레시하고 데이터를 다시 가져온다.navigateTo(path): 특정 경로로 프로그래밍적으로 이동한다. (Nuxt 3에서 도입된 기능)isOffline: 애플리케이션의 네트워크 연결 여부를 확인할 수 있다. $routerthis.$router는 Vue Router 인스턴스를 나타낸다. Vue 애플리케이션 내에서 라우팅 관련 작업을 관리하는 객체로, 라우트를 변경하거나 라우트 관련 정보를 처리할 때 사용된다. 이 객체를 통해 애플리케이션의 내비게이션을 조작할 수 있다.push(pa..

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

웹 사이트에 회원가입을 해야지만 이용할 수 있는 페이지가 있다. 이처럼 누구나 접속할 수 있는 경로를 공개 라우트, 로그인한 사용자만 접속 가능한 경로를 비공개 라우트라고 한다.예제회원가입을 해야지만 이용할 수 있는 비공개 라우트와 누구나 접근 가능한 공개 라우트를 설정하는 예제이다. 이를 위해 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의 주..