개요 현재 제목에 '01-'로 시작하는 글들의 목적은 npx create-next-app으로 만드는 템플릿을 직접 구성하는 목적이다. 만약 npx create-next-app@latest my-app으로 프로젝트를 만든다면 자동으로 물어보는 질문은 다음 6가지이다. ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like to use src/ directory? … No / Yes ✔ Would you like to use App Router? (recommended) … No / Ye..

'23. 11/28에 진행했던 연구소 세미나 중 세션2, Next.js와 Tailwind CSS 소개에 대한 내용입니다. https://youtu.be/Xiw1mrLUpPA

'23. 11/28에 진행했던 연구소 세미나 중 세션1 검색에 대한 내용입니다. https://youtu.be/yUGxyay99Jw

서론 ESLint는 기본적으로 code linter이다. 코드 품질과 관련. Prettier는 기본적으로 code formatter이다. 코드를 이쁘게 정렬해준다. 문제는 linter의 기능에 formatter의 기능도 들어가기 때문에 충돌이 생긴다. 이 충돌을 막아주는 것은 eslint-config-prettier 라는 패키지다. 지난 번 Airbnb 설정을 따르려고 했지만 수많은 문제점이 생겼다. 너무 엄격하기 때문에 learning curve가 높고, 그로 인해 오히려 개발에 지장을 준다. 또한 예외 rules가 늘어나다보니 linter의 본래 역할을 못 하는 경우도 발생했다. 이번에는 간단하게 Lint의 기본 기능에도 충실하고 Prettier와도 충돌나지 않게 처음부터 다시 설정해보자. Tailw..

Nest 애플리케이션과 모든 애플리케이션 요소에는 Nest에서 관리하는 수명 주기가 있다. Nest는 주요 수명 주기 이벤트에 대한 가시성과 이벤트 발생 시 조치(모듈, 공급자 또는 컨트롤러에 등록된 코드 실행) 기능을 제공하는 수명 주기 훅을 제공한다. 수명 주기 순서 다음 다이어그램은 애플리케이션이 부트스트랩되는 시점부터 노드 프로세스가 종료될 때까지 주요 애플리케이션 수명 주기 이벤트의 순서를 보여준다. 전체 라이프사이클을 초기화 , 실행 , 종료의 세 단계로 나눌 수 있다 . 이 수명 주기를 사용하면 모듈과 서비스의 적절한 초기화를 계획하고, 활성 연결을 관리하고, 종료 신호를 받으면 애플리케이션을 정상적으로 종료할 수 있다. 수명 주기 이벤트 수명 주기 이벤트는 애플리케이션 부트스트래핑 및 종료..

Concept 1. Auto-imports Nuxt는 컴포넌트, 컴포저블, 헬퍼함수 및 Vue API 를 자동으로 임포트 한다. 간단한 예를 들면 아래와 같다. app.vue

사실 쿠버네티스 등장배경 보다 먼저 OSI 7 계층을 다루고 싶었는데... 마음 가는 데로 등장배경 먼저 다루어버렸습니다. 그래서 OSI 7 계층 개념점검만 하고 가겠습니다. 계층구조 L 7 Application(응용 계층) L 6 Presentation(표현 계층) L 5 Session(세션 계층) L 4 Transport(전송 계층) L 3 Network(네트워크 계층) L 2 Data Link(데이터링크 계층) L1 Physical(물리 계층) L1에서 => L7으로 L7에서 => L1으로 추상화 수준이 높아진다 추상화 수준이 낮아진다 소프트웨어를 더 많이 다룬다 하드웨어를 더 많이 다룬다 추상화 수준에서 L7은 가장 높은 수준으로 사용자와 직접 상호작용하고, 응용프로그램에 가깝습니다 그러나 L1은..

쿠버네티스 학습이전에 등장배경과 기초적인 지식들을 정리하고 학습을 시작하고자 이 글을 작성해 봅니다. 쿠버네티스가 등장하기 이전, 가상화 환경에서의 운영과 배포 기술들은 지속적으로 발전해 왔습니다. 이전에는 가상 머신과 관련된 기술들이 많았는데, 그중 하나는 가상 머신 머니터(VMware)입니다. 이후에는 컨테이너 기술들이 등장했습니다. 컨테이너는 응용 프로그램을 패키징하고 실행하는 데 사용되며, 가상 머신보다 가볍고 빠른 실행이 특징입니다. 컨테이너 기술은 Docker가 등장함으로써 널리 사용되기 시작했습니다. Docker는 응용 프로그램을 컨테이너로 패키징하고 배포하기 위한 도구로서, 가상화 환경에서의 개발과 배포를 효율적으로 만들어 주었습니다. 이와 같이 발전해 온 환경은 최근 IT 업계에서 쿠버네..

Nuxt는 Vue.js 기반의 타입 세이프 하고 성능이 뛰어나며 프로덕션 수준의 풀 스택 웹 애플리케이션과 웹 사이트를 생성할 수 있는 직관적이고 확장 가능한 방법을 갖춘 무료 오픈 소스 프레임워크이다. 개발 시 핫 모듈 교체(HMR) 를 할 수 있으며 기본적으로 서버 측 렌더링을 통해 고성능 애플리케이션을 지원하여, 바로 .vue 소스 파일을 시작할 수 있도록 환경을 제공한다. Nuxt는 공급업체에 종속되지 않으므로(Vendor lock in) 애플리케이션을 어디에나 배포할 수 있다. 자동화와 규칙 Nuxt는 디렉토리 구조를 사용하여 반복적인 작업을 자동화하고 개발자가 기능을 개발하는 데 집중할 수 있도록 한다. 특별한 변경이 필요할 때도 기본 동작을 사용자 정의하고 재정의할 수 있다. 파일 기반 라우..

REHL 리눅스의 대표적인 호환 리눅스인 CentOS 가 2020년 12월 이후 RHEL 정식버전 이전의 Stream 버전으로 바뀌었다. 이를 Upstream 이라고 한다. Fedora -> RHEL -> CentOS 의 형태가 Fedora -> CentOS -> RHEL 로 흐름이 바뀌었다. 엔터프라이즈 Linux 의 가장 중요한 점은 안정성(Stablity) 와 보안(Security) 이라고 할 수 있다. 그래서 기존 CentOS 지지자들은 'CentOS is Dead' 라며 반발이 심했나보다. 이에 대한 대안으로 가장 먼저 등장한 리눅스가 Rocky Linux 이다. AWS의 Amazon 리눅스도 RHEL 계열이기에 k8s 설치와 관련해서 간단하게 정리해본다. VM 준비 Oracle VirtualB..

Task Scheduling이란 주기적으로 반복적인 작업을 처리하는 것을 말합니다. 스프링 프로젝트에서도 scheduler를 이용하여 이러한 반복적인 작업을 처리하는데 테크팀에서 관리하는 스프링 프로젝트들의 경우 반복적으로 처리해야될 비즈니스 로직 및 데이터의 규모가 방대하기 때문에 스프링 배치를 이용하여 프로젝트를 구성하였고, 여기에 Cronicle을 이용하여 Scheduling을 관리하고 있습니다. NestJS 프로젝트의 경우 반복적으로 처리해야될 작업이 많지 않았고(현재는 엘라스틱 서치에 인덱싱 하는 작업 1개만 존재), 그 데이터의 규모 또한 크지 않다고 판단하여서 자체적으로 지원하는 schedule 모듈을 사용하기로 결정 하였습니다. "dependencies": { "@nestjs/schedul..

보통 백엔드 서버를 개발하면 API 서버 또는 웹서버가 정상적인 상태인지 확인할 수 있는 상태 확인 API를 개발하게 됩니다. 그리고 해당 상태 확인 API를 지속적으로 확인하는 시스템을 설정하여 서버들의 상태를 확인하게 됩니다. 오래전에는 단순 상태확인용 API를 단순하게 개발했지만, 현재 스프링의 경우 actuator를 이용하여 헬스 체크 엔드포인트를 활성화하여 많이 제공합니다. 현재 테크팀에서 관리하는 모든 스프링 프로젝트들의 경우에도 actuator를 이용하여 서버 상태를 확인하고 있습니다. NestJS 프로젝트 또한 동일한 상태 확인 엔드포인트를 제공해주어야 되었기 때문에 기본적으로 프레임워크에서 제공해주는 Terminus를 활용하기로 결정 하였습니다. "dependencies": { "@nes..

Nest는 여러 애플리케이션 컨텍스트(예: Nest HTTP 서버 기반, 마이크로서비스 및 WebSockets 애플리케이션 컨텍스트)에서 작동하는 애플리케이션을 쉽게 작성하는 데 도움이 되는 여러 유틸리티 클래스를 제공한다. 이러한 유틸리티는 광범위한 컨트롤러 , 메서드 및 실행 컨텍스트 집합에서 작동할 수 있는 일반 가드, 필터 및 인터셉터를 구축하는 데 사용할 수 있는 현재 실행 컨텍스트에 대한 정보를 제공한다 . 이 장에서는 이러한 두 가지 클래스인 ArgumentsHost 및 ExecutionContext 를 다룹니다. ArgumentsHost class 클래스 ArgumentsHost는 핸들러에 전달되는 인수를 검색하기 위한 메서드를 제공한다. 이를 통해 인수를 검색할 적절한 컨텍스트(예: HT..

현재 테크팀에서는 프론트엔드는 Next.js(React), Nuxt.js(Vue)를 사용하여 개발하고 백엔드는 스프링부트, NestJS를 이용하여 개발하고 있기 때문에 프론트엔드와 백엔드의 도메인의 오리진이 서로 다르고, 그로인해 서로 리소스를 주고받기 위해서 반드시 CORS(Cross-Origin Resource Sharing)설정을 해줘야 합니다. Cors // 기본설정값으로 다음의 설정값이 적용됨. /*{ "origin": "*", "methods": "GET,HEAD,PUT,PATCH,POST,DELETE", "preflightContinue": false, "optionsSuccessStatus": 204 }*/ app.enableCors(); // 옵션 설정 app.enableCors({ or..

기본적으로 모듈은 즉시 로드됩니다. 즉, 애플리케이션이 로드되자마자 즉시 필요한지 여부에 관계없이 모든 모듈도 로드e된다. 이는 대부분의 애플리케이션에는 문제가 없지만 시작 대기 시간("콜드 스타트")이 중요한 서버리스 환경 에서 실행되는 앱/작업자에게는 병목 현상이 발생할 수 있다. 지연 로딩은 특정 서버리스 함수 호출에 필요한 모듈만 로드하여 부트스트랩 시간을 줄이는 데 도움이 된다. 또한 서버리스 기능이 "웜"되면 다른 모듈을 비동기식으로 로드하여 후속 호출에 대한 부트스트랩 시간을 더욱 단축할 수도 있다(지연된 모듈 등록). 주의) 지연 로드된 모듈 및 서비스에서는 수명 주기 후크 메서드가 호출되지 않는다 . 시작하기 주문형 모듈을 로드하기 위해 Nest는 일반적인 방법으로 클래스에 삽입할 수 있..

Nest는 내부 공급자 목록을 탐색하고 주입 토큰을 조회 키로 사용하여 공급자에 대한 참조를 얻을 수 있는 ModuleRef 클래스를 제공한다. 또한 이 ModuleRe f클래스는 정적 공급자와 범위가 지정된 공급자를 모두 동적으로 인스턴스화하는 방법을 제공한다. ModuleRef 는 일반적인 방법으로 클래스에 주입할 수 있다. // cats.servicee.ts @Injectable() export class CatsService { constructor(private moduleRef: ModuleRef) {} } 힌트) ModuleRef 클래스는 @nestjs/core 패키지에서 가져온다. 인스턴스 검색 ModuleRef 인스턴스 (이하 모듈 참조 라고 함 ) 에는 get()메서드가 있다. 이 메소..

순환 종속성은 두 클래스가 서로 종속될 때 발생합니다. 예를 들어 클래스 A에는 클래스 B가 필요하고 클래스 B에도 클래스 A가 필요한 경우다. Nest에서는 모듈 간 및 공급자 간에 순환 종속성이 발생할 수 있다. 가능하면 순환 종속성을 피해야 하지만 항상 그렇게 할 수는 없다. 이러한 경우 Nest는 두 가지 방법으로 공급자 간의 순환 종속성을 해결할 수 있다. 이 장에서는 전방 참조를 하나의 기술로 사용하고 ModuleRef 클래스를 사용하여 DI 컨테이너에서 공급자 인스턴스를 검색하는 방법을 설명한다. 또한 모듈 간의 순환 종속성을 해결하는 방법도 설명합니다. 주의) "배럴 파일"/index.ts 파일을 사용하여 가져오기를 그룹화하는 경우에도 순환 종속성이 발생할 수 있습니다. 모듈/공급자 클래스..

다양한 프로그래밍 언어 배경을 가진 사람들의 경우 Nest에서 들어오는 요청 전반에 걸쳐 거의 모든 것이 공유된다는 사실이 예상치 못한 일일 수도 있다. 이러한 경우로 데이터베이스에 대한 연결 풀, 전역 상태를 갖는 싱글톤 서비스 등이 있다. Node.js는 모든 요청이 별도의 스레드에 의해 처리되는 요청/응답 다중 스레드 상태 비저장 모델을 따르지 않는다는 점을 기억하자. 따라서 싱글톤 인스턴스를 사용하는 것은 우리 애플리케이션에 완전히 안전하다 할 수 있다. 그러나 GraphQL 애플리케이션의 요청별 캐싱, 요청 추적 및 멀티 테넌시와 같이 요청 기반 수명이 원하는 동작이 될 수 있는 극단적인 경우가 있다. 주입 범위는 공급자의 라이프사이클을 관리하기 위한 메커니즘을 제공한다. 공급자 범위 공급자는 ..

Module에 관한 장은 Nest 모듈의 기본 사항을 다루고 동적 모듈 에 대한 간략한 소개를 포함하고 있다. 이 장에서는 동적 모듈 주제를 심화 학습한다. 완료되면 해당 기능이 무엇인지, 언제 어떻게 사용해야 하는지 이해할 수 있을 것이다. 소개 1~10 장 섹션 에 있는 대부분의 애플리케이션 코드 예제는 일반 또는 정적 모듈을 사용하고 있다. 모듈은 전체 애플리케이션의 모듈화된 부분으로 함께 어울리는 공급자 및 컨트롤러 와 같은 구성 요소 그룹을 정의한다. 또한, 이러한 구성 요소에 대한 실행 컨텍스트 또는 범위를 제공한다. 예를 들어, 모듈에 정의된 공급자는 익스포트 할필요 없이 모듈의 다른 구성원에게서 사용 될 수 있다. 공급자가 모듈 외부에 사요되어야 하는 경우 먼저 호스트 모듈에서 내보낸 다음..

그동안 Express Node 서버 프로젝트에서는 설정값들을 env파일을 통하여 관리 하였습니다. 테크팀은 NestJS 프로젝트에서는 통일성을 위하여 스프링 프로젝트들과 동일하게 yaml파일을 통하여 설정값들을 관리하고 싶었고, 다행히도 NestJS 프레임워크에서는 프레임워크에서 기본적으로 지원 및 자세한 내용을 공식문서에서 설명해주고 있었습니다. "dependencies": { "@nestjs/config": "^3.1.1", "js-yaml": "^4.1.0", }, "devDependencies": { "@types/js-yaml": "^4.0.9", }, package.json에 다음을 추가하고 패키지를 설치하자. 그리고 다음과 같이 resources 폴더에 개발 및 운영용 yaml 설정 파일을 ..