분류 전체보기75 [Nginx] Ubuntu 20.04~24.04 Nginx mainline or stable 설치하기 관련 패키지 설치sudo apt install curl gnupg2 ca-certificates lsb-release dirmngr software-properties-common apt-transport-https -y 키 등록curl -fSsL https://nginx.org/keys/nginx_signing.key | sudo gpg --dearmor | sudo tee /usr/share/keyrings/nginx-archive-keyring.gpg >/dev/nullgpg --dry-run --quiet --import --import-options import-show /usr/share/keyrings/nginx-archive-keyring.gpg 레포지토리 등록# Mainlineecho ".. 2023. 12. 11. [React] useContext 사용하기 React에서 useContext는 React 컴포넌트 트리 전반에 걸쳐 데이터를 공유하는 방법을 제공합니다. 이 훅을 사용하면 함수형 컴포넌트에서 Context의 값을 쉽게 읽을 수 있습니다. 또한, 하위 컴포넌트가 연속적으로 있는 경우에도 드릴링을 방지할 수 있습니다. useContext와 Context API를 활용한 전역 상태 관리 복잡한 컴포넌트 구조에서 props를 여러 계층에 걸쳐 전달하는 것은 비효율적일 수 있습니다. 이를 해결하기 위해 React의 Context API를 사용할 수 있습니다. useContext 훅을 사용하면 컴포넌트 트리 어디에서나 직접적으로 Context의 값을 읽고 업데이트할 수 있습니다. UserContext 생성 및 제공 export const UserContex.. 2023. 12. 10. [TypeScript] keyof 인터페이스나 타입에서 키의 집합 추출 및 사용 keyof는 TypeScript에서 매우 유용한 연산자로, 주어진 타입의 모든 퍼블릭 키(속성 이름)들의 리터럴 유니온(합집합)을 생성합니다. 이를 통해 객체의 키에 접근하고 사용하는 방법을 타입 안전하게 만들 수 있습니다. keyof 사용하기 간단한 예를 들어보겠습니다. TypeScript에서 interface 또는 type을 정의할 때, 해당 타입의 모든 키를 추출하고 싶을 수 있습니다. 예를 들어, 다음과 같은 인터페이스가 있다고 가정해 봅시다. User Interface 정의 interface UserInterface { id: number; name: string; email: string; } 이 경우, keyof User는 'id' | 'name' | 'email'이 됩니다. 즉, keyof.. 2023. 12. 10. [NodeJS] ubuntu 20.04~24.04 NVM 설치 및 특정 버전 삭제 NVM 설치 GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active node.js versionsNode Version Manager - POSIX-compliant bash script to manage multiple active node.js versions - GitHub - nvm-sh/nvm: Node Version Manager - POSIX-compliant bash script to manage multiple active nod...github.comcurl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.1/insta.. 2023. 12. 8. [Nginx] Ubuntu 20.04~24.04 Certbot Let's Encrypt 무료 인증서 발급받기 Certbot 설치하기sudo apt install -y certbot python3-certbot-nginx Nginx 설정 변경하기sudo vi /etc/nginx/sites-available/example.comorsudo vi /etc/nginx/conf.d/default.confNginx 버전에 따라서 폴더 및 파일 위치가 조금 다를 수 있습니다.server { listen 80; server_name example.com www.example.com; ...}`server_name`에 도메인 주소를 입력합니다. 앞에 `http`, `https`와 같은 부분은 입력하지 않습니다. 입력 후 `:wq`를 통해 저장하고 나옵니다.sudo service nginx restart`Nginx` .. 2023. 12. 7. [TypeScript] 타입스크립트에서 Type vs Interface 어떤것을 써야할까? TypeScript에서는 객체 타입을 정의하는 데 두 가지 주요한 도구가 있습니다. 인터페이스와 타입 별칭. 이들의 차이점과 사용 사례에 대해 알아보겠습니다. 객체 상속에는 인터페이스 사용 `TypeScript`에서 인터페이스는 다른 객체에서 확장될 수 있는 객체 타입을 정의하는 데 사용됩니다. `extends` 키워드를 사용하여 상속을 지원합니다. 객체들이 상속 관계에 있는 경우 인터페이스를 사용하는 것이 권장됩니다. 이는 인터페이스를 `extends`를 사용하여 생성하면 `TypeScript`가 해당 인터페이스를 이름별로 캐시하여 유형 검사 성능을 향상시킬 수 있기 때문입니다. interface WithId { id: string; } interface User extends WithId { name.. 2023. 8. 11. [NestJS] SWC 사용시 "Cannot find module" 오류 해결하기 `NestJS`에서 `SWC` 사용할때 모듈을 찾을 수 없는 문제들이 발생합니다. 따라서 아래와 같이 수정하면 되겠습니다. ES6 모듈 사양 준수 `tsconfig.json` "esModuleInterop": true `esModuleInterop` 옵션 활성화 import * 수정 `SWC` 실행시 `import * as` 형태로 가져오는 `namespace import` 방식의 경우도 오류가 난다면, 일반적인 `import` 방식으로 변경해줘야 합니다. 예로들면 import * as fs from 'fs'; -> import fs from 'fs'; Cannot find module 해결하기 `tsconfig.json` `@` 별칭을 추가해줍니다. "paths": { "@/*": ["src/*"] }.. 2023. 8. 11. [NestJS] ".env" 대신 ".yaml" 환경변수 구성하기 설정 파일 만들기 저는 `src/utils/config` 위치에 `configuration.yaml.ts` 파일 이름으로 생성했습니다. const YAML_CONFIG_PRODUCTION = 'production.yaml'; const YAML_CONFIG_DEVELOPMENT = 'development.yaml'; export default function ConfigurationYaml(): Record { const config = jsyaml.load( process.env.NODE_ENV === 'production' ? readFileSync(join(__dirname, YAML_CONFIG_PRODUCTION), 'utf8') : readFileSync(join(__dirname, YAML_.. 2023. 8. 11. [NestJS] 프로젝트 구조 및 Controllers 파악하기 프로젝트 구조 구조 설명 app.controller.ts 단일 라우트를 가진 기본 컨트롤러 app.controller.spec.ts 컨트롤러에 대한 유닛 테스트 app.module.ts 애플리케이션의 루트 모듈 app.service.ts 단일 메서드를 가진 기본 서비스 main.ts NestFactory라는 코어 함수를 사용하여 Nest 애플리케이션 인스턴스를 생성하는 애플리케이션의 진입 파일 컨트롤러 컨트롤러는 들어오는 요청을 처리하고 클라이언트에 응답을 반환하는 역할을 합니다. 컨트롤러의 목적은 응용 프로그램에 대한 특정 요청을 받는 것입니다. 라우팅 메커니즘은 어떤 컨트롤러가 어떤 요청을 받아야 하는지를 제어합니다. 일반적으로 각 컨트롤러에는 하나 이상의 라우트가 있으며, 각각의 라우트는 다른 동작.. 2023. 6. 9. [NestJS] 표준모드와 모노레포 및 CLI 속성 살펴보기 프로젝트 구조 Nest에서는 표준 모드와 모노레포 모드 두 가지 구조로 프로젝트를 관리할 수 있습니다. 표준 모드는 "nest new"를 실행하여 생성된 기본 프로젝트 구조로, 컴포넌트를 추가하며 작업할 수 있습니다. 모노레포 모드는 여러 프로젝트와 라이브러리를 관리하기 위한 대체 구조로, 빌드 프로세스를 단순화하는 장점이 있습니다. 나머지 Nest 기능과 문서는 두 모드에 동일하게 적용되며, 필요에 따라 표준 모드에서 모노레포 모드로 전환할 수 있습니다. 기능 표준 모드 모노레포 모드 다중 프로젝트 별도의 파일 시스템 구조 단일 파일 시스템 구조 node_modules 및 package.json 별도의 인스턴스 모노레포 내에서 공유 기본 컴파일러 tsc webpack 컴파일러 설정 개별적으로 지정 모노.. 2023. 6. 7. 이전 1 2 3 4 5 ··· 8 다음
