이 연구는 부모 컴포넌트에서 자식 컴포넌트로 api를 주입한 뒤, 자식 컴포넌트에서 생성된 데이터를 기반으로 주입받은 api를 호출하도록 코드를 만드는 과정에서 아이디어를 받아 진행되었다. 원래는 단순히 클라이언트 사이드로 동작하는 부모 컴포넌트의 api를 자식 클라이언트 컴포넌트로 전달만 해주려 했는데, 어쩌다보니 서버 사이드 부모 컴포넌트의 서버 액션(server actions)을 클라이언트 컴포넌트로 전달할 수도 있음을 알게 되었다. 부모 컴포넌트(서버 사이드)// page.tsximport { ActionsContainer } from '@/containers/actions/actions-container'import { FunctionComponent } from 'react'interface ..
fetch를 할 때 매번 똑같은 코드를 치는 것이 비효율적이라 여겨져서 만든 fetcher 함수다.fetcher 함수를 이용하면 아무래도 fetch를 반복하여 소스 코드에 적을 필요가 없어지니 궁극적으로는 코드 가독성 향상 + 유지보수성 증대를 꾀할 수 있다. fetcher 함수는 객체를 파라미터로 가지며, 파라미터 객체는 { url, options, useToken } 을 프로퍼티로 가진다.url은 fetch에 사용될 주소값이 담겨있으며, options에는 request시 초기화가 필요한 fetch의 기본 옵션들이, useToken은 헤더의 Authorization에 토큰을 담을지 말지 여부를 결정하는 플래그가 담겨있다. type FetcherPropsType = { url: string optio..
컴포넌트의 호버 여부를 리액트 state와 연결하기 위해 만든 훅이다.'use client'import { RefObject, useEffect, useRef, useState } from 'react'export const useHover = (): [RefObject, boolean] => { const [isHover, setIsHover] = useState(false) const ref = useRef(null) const handleMouseOver = () => { setIsHover(true) } const handleMouseOut = () => { setIsHover(false) } useEffect(() => { const element = ref.curr..
데이터 테이블의 헤더에서 특정 컬럼에 대한 데이터를 서칭하는 기능을 만들던 도중 구현하게 된 디바운스 인풋 컴포넌트다. debounced-input.tsx// debounced-input.tsx'use client'import { useEffect, useState } from 'react'import { cn } from '@/libs'import { Input } from './input'interface DebouncedInputProps extends React.InputHTMLAttributes { className?: string value: string | number onDebounceHandler: (value: string | number) => void debounce?: nu..
gitlab CI/CD를 사용하여 runner를 EC2를 연결하는 과정에서 제목과 같은 에러 메시지가 발생했다. 사실 에러라기 보다는 러너가 정말 해당 프로젝트 인스턴스와 제대로 결합되었는지 확인하라는 메세지이다. ci/cd를 한번 구동해보면 에러 메세지가 해결되겠지만 그 과정은 시간이 꽤 걸릴 수 있다. 대신 runner가 설치된 클라우드에서 아래 명령어를 실행해주자. gitlab-runner -debug run 위 명령어를 입력하면 gitlab-runner의 config.toml에 저장된 모든 러너들을 한번 체킹하면서 프로젝트 인스턴스와 연결을 수행하게 된다. 러너와 인스턴스, EC2의 연결이 잘 된 상태라면 문제가 해결될 것이다.
Modules 모듈은 @Modules() 데코레이터로 주석을 단 클래스이다. 모듈 데코레이터는 Nest가 애플리케이션 구조를 구성하는데 사용하는 메타데이터를 제공한다. 각 애플리케이션에는 하나 이상의 모듈, 즉 루트 모듈이 있다. 루트 모듈은 Nest가 애플리케이션 그래프를 구축하는 데 사용하는 시작점이며, 모듈과 프로바이더 관계 및 종속성을 해결하는데 사용하는 내부 데이터 구조이다. 아주 작은 애플리케이션에는 이론적으로 루트 모듈만 있을 수 있지만, 일반적인 경우는 아니다. 컴포넌트를 구성하는 효과적인 방법으로 모듈을 강력히 권장한다. 대부분의 애플리케이션의 경우 여러개의 모듈을 사용하는 아키텍처를 사용하며, 각 모듈은 밀접하게 관련된 기능 집합을 캡슐화한다. @Modules() 데코레이터는 모듈에 대..
Providers 프로바이더는 Nest의 기본 개념이다. 서비스, 리포지토리, 팩토리, 헬퍼 등 많은 기본 Nest 클래스가 프로바이더로 취급될 수 있다. 프로바이더의 주요 개념은 종속성으로 주입될 수 있다는 것이다. 즉, 각각의 객체가 다양한 관계를 생성할 수 있으며, 이러한 객체를 "wiring up(배선)"하는 기능은 대부분 Nest 런타임 시스템에 위임할 수 있다. 이전 챕터에서 간단한 CatsControllers를 구축했다. 컨트롤러는 HTTP 요청을 처리하고 더 복잡한 작업을 프로바이더에 위임해야 한다. 프로바이더는 모듈에서 프로바이더로 선언되는 일반 자바스크립트 클래스이다. Services 간단한 CatsService를 만들어보자. 이 서비스는 데이터 저장 및 검색을 담당하며 CatsCont..
Controllers 컨트롤러는 수신된 요청(request)를 처리하고 클라이언트에 응답(response)를 반환할 책임이 있다. 컨트롤러의 목적은 애플리케이션에 대한 특정 요청을 수신하는 것이다. 라우팅 매커니즘은 어떤 컨트롤러가 어떤 요청을 수신할지 제어한다.각 컨트롤러에는 둘 이상의 라우트가 있는 경우가 많으며, 각 라우트마다 다른 작업을 수행할 수 있다. 기본 컨트롤러를 생성하기 위해 클래스와 데코레이터를 사용한다. 데코레이터는 클래스를 필수 메타데이터와 연결하고 Nest가 라우팅 맵(요청을 그에 상응하는 컨트롤러에 연결한다)을 생성할 수 있도록 한다. HINT 유효성 검사 기능이 내장된 CRUD 컨트롤러를 빠르게 만드려면 CLI의 CRUD 생성기를 사용할 수 있다. 예시) nest g resou..
https://docs.nestjs.com/first-steps Documentation | NestJS - A progressive Node.js framework Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Rea docs.nestjs.com First steps 이 글에서는 Nest의 핵심 기본 사..
https://docs.nestjs.com/ Documentation | NestJS - A progressive Node.js framework Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Rea docs.nestjs.com Introduction NestJS는 효율적이고 확장가능한 Node.js 서버..
