티스토리

2DC

검색하기

블로그 홈

2DC

2duckchun.tistory.com/m

배우고 성찰한 것을 기록하는 블로그입니다.

구독자: 10

방명록 방문하기

주요 글 목록

블로그 이관합니다! 안녕하세요 2DC 입니다.다름이 아니오라 블로그를 이관하게 되어 오랜만에 글을 포스팅합니다! 이 블로그는 참으로 애착이 갑니다. 개발을 처음 입문한 후 단순히 기록을 남기기 위해 하루 하루 공부했던 것들을 두서없이 적어냈던 것이 숨김글을 포함하면 약 500개가 넘어갈 정도로 열심히 포스팅을 했던 것 같습니다. 질보단 양으로 승부했다고나 할까요. 그렇게 포스팅을 해대면서도 언젠가는 꼭 저만의 블로그를 만들어내고 싶다는 생각을 했었습니다. 그리고 마침내 약소하지만 핸드메이드 블로그를 만들어 운영을 하게 되었습니다. 주소는 아래와 같습니다. https://blog.2duckchun.com/ 2DC - blog2DC의 개인 블로그blog.2duckchun.com 아마 티스토리에는 더이상 글을 포스팅을 하지 않을.. 공감수 4 댓글수 1 2024. 10. 3.
연구) server action 함수를 자식 client-side 컴포넌트로 전달 이 연구는 부모 컴포넌트에서 자식 컴포넌트로 api를 주입한 뒤, 자식 컴포넌트에서 생성된 데이터를 기반으로 주입받은 api를 호출하도록 코드를 만드는 과정에서 아이디어를 받아 진행되었다. 원래는 단순히 클라이언트 사이드로 동작하는 부모 컴포넌트의 api를 자식 클라이언트 컴포넌트로 전달만 해주려 했는데, 어쩌다보니 서버 사이드 부모 컴포넌트의 서버 액션(server actions)을 클라이언트 컴포넌트로 전달할 수도 있음을 알게 되었다. 부모 컴포넌트(서버 사이드)// page.tsximport { ActionsContainer } from '@/containers/actions/actions-container'import { FunctionComponent } from 'react'interface .. 공감수 0 댓글수 1 2024. 7. 14.
util) fetcher (fetch 래퍼) fetch를 할 때 매번 똑같은 코드를 치는 것이 비효율적이라 여겨져서 만든 fetcher 함수다.fetcher 함수를 이용하면 아무래도 fetch를 반복하여 소스 코드에 적을 필요가 없어지니 궁극적으로는 코드 가독성 향상 + 유지보수성 증대를 꾀할 수 있다. fetcher 함수는 객체를 파라미터로 가지며, 파라미터 객체는 { url, options, useToken } 을 프로퍼티로 가진다.url은 fetch에 사용될 주소값이 담겨있으며, options에는 request시 초기화가 필요한 fetch의 기본 옵션들이, useToken은 헤더의 Authorization에 토큰을 담을지 말지 여부를 결정하는 플래그가 담겨있다. type FetcherPropsType = { url: string optio.. 공감수 0 댓글수 0 2024. 7. 10.
React Hook) hover시 state를 변경하는 Hook (useHover) 컴포넌트의 호버 여부를 리액트 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.. 공감수 0 댓글수 0 2024. 7. 9.
React, Typescript) Debounce-Input 컴포넌트 구현 데이터 테이블의 헤더에서 특정 컬럼에 대한 데이터를 서칭하는 기능을 만들던 도중 구현하게 된 디바운스 인풋 컴포넌트다. 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.. 공감수 0 댓글수 0 2024. 6. 27.
gitlab) runner has never contacted this instance gitlab CI/CD를 사용하여 runner를 EC2를 연결하는 과정에서 제목과 같은 에러 메시지가 발생했다. 사실 에러라기 보다는 러너가 정말 해당 프로젝트 인스턴스와 제대로 결합되었는지 확인하라는 메세지이다. ci/cd를 한번 구동해보면 에러 메세지가 해결되겠지만 그 과정은 시간이 꽤 걸릴 수 있다. 대신 runner가 설치된 클라우드에서 아래 명령어를 실행해주자. gitlab-runner -debug run 위 명령어를 입력하면 gitlab-runner의 config.toml에 저장된 모든 러너들을 한번 체킹하면서 프로젝트 인스턴스와 연결을 수행하게 된다. 러너와 인스턴스, EC2의 연결이 잘 된 상태라면 문제가 해결될 것이다. 공감수 1 댓글수 1 2024. 5. 27.
Modules Modules 모듈은 @Modules() 데코레이터로 주석을 단 클래스이다. 모듈 데코레이터는 Nest가 애플리케이션 구조를 구성하는데 사용하는 메타데이터를 제공한다. 각 애플리케이션에는 하나 이상의 모듈, 즉 루트 모듈이 있다. 루트 모듈은 Nest가 애플리케이션 그래프를 구축하는 데 사용하는 시작점이며, 모듈과 프로바이더 관계 및 종속성을 해결하는데 사용하는 내부 데이터 구조이다. 아주 작은 애플리케이션에는 이론적으로 루트 모듈만 있을 수 있지만, 일반적인 경우는 아니다. 컴포넌트를 구성하는 효과적인 방법으로 모듈을 강력히 권장한다. 대부분의 애플리케이션의 경우 여러개의 모듈을 사용하는 아키텍처를 사용하며, 각 모듈은 밀접하게 관련된 기능 집합을 캡슐화한다. @Modules() 데코레이터는 모듈에 대.. 공감수 0 댓글수 0 2024. 4. 17.
Providers Providers 프로바이더는 Nest의 기본 개념이다. 서비스, 리포지토리, 팩토리, 헬퍼 등 많은 기본 Nest 클래스가 프로바이더로 취급될 수 있다. 프로바이더의 주요 개념은 종속성으로 주입될 수 있다는 것이다. 즉, 각각의 객체가 다양한 관계를 생성할 수 있으며, 이러한 객체를 "wiring up(배선)"하는 기능은 대부분 Nest 런타임 시스템에 위임할 수 있다. 이전 챕터에서 간단한 CatsControllers를 구축했다. 컨트롤러는 HTTP 요청을 처리하고 더 복잡한 작업을 프로바이더에 위임해야 한다. 프로바이더는 모듈에서 프로바이더로 선언되는 일반 자바스크립트 클래스이다. Services 간단한 CatsService를 만들어보자. 이 서비스는 데이터 저장 및 검색을 담당하며 CatsCont.. 공감수 1 댓글수 1 2024. 4. 17.
Controllers Controllers 컨트롤러는 수신된 요청(request)를 처리하고 클라이언트에 응답(response)를 반환할 책임이 있다. 컨트롤러의 목적은 애플리케이션에 대한 특정 요청을 수신하는 것이다. 라우팅 매커니즘은 어떤 컨트롤러가 어떤 요청을 수신할지 제어한다.각 컨트롤러에는 둘 이상의 라우트가 있는 경우가 많으며, 각 라우트마다 다른 작업을 수행할 수 있다. 기본 컨트롤러를 생성하기 위해 클래스와 데코레이터를 사용한다. 데코레이터는 클래스를 필수 메타데이터와 연결하고 Nest가 라우팅 맵(요청을 그에 상응하는 컨트롤러에 연결한다)을 생성할 수 있도록 한다. HINT 유효성 검사 기능이 내장된 CRUD 컨트롤러를 빠르게 만드려면 CLI의 CRUD 생성기를 사용할 수 있다. 예시) nest g resou.. 공감수 1 댓글수 0 2024. 4. 17.
First steps 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의 핵심 기본 사.. 공감수 0 댓글수 0 2024. 4. 17.
Introduction 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 서버.. 공감수 0 댓글수 0 2024. 4. 17.
재귀로 객체 내 모든 키값을 추출하는 타입 만들기 재귀로 객체 내 모든 키값을 추출하는 타입 만들기 객체 내 모든 키를 추출할 수 있는 타입을 만든 후, 컴포넌트에 적용하여 컴포넌트가 props로 받는 객체의 타입을 스스로 추론하게 만들어보자. 객체 재귀 타입(PropertyPath) 구현 type PropertyPath = U['length'] extends 10 ? never : { [K in keyof T & string]: T[K] extends Record ? K | `${K}.${PropertyPath}` : K }[keyof T & string] 위의 PropertyPath 타입은 객체의 모든 키를 추출하는 타입이다. 원활한 이해를 위해 몇가지 사전 .. 공감수 0 댓글수 0 2024. 4. 8.
VSCode에서 소스 코드 저장 시 eslint + prettier가 동작하지 않는 경우 소스코드 저장 시 eslint + prettier가 자동으로 동작하지 않을 때가 있다. 이는 VSCode의 settings.json에서 eslint와 prettier 관련 설정을 고쳐주면 해결된다. { // ... "editor.codeActionsOnSave": { "source.fixAll.eslint": "explicit" }, "editor.formatOnSave": true // ... } 위 설정이 VSCode가 인지할 수 있는 eslint + prettier 설정이다. settings.json을 잘 컨트롤 하면 방금 실행한 설정 외에도 다채로운 설정을 할 수 있다. 전역설정 전역설정을 하려면 windows 운영체제 기준 C:\Users\유저명\AppData\Roaming\Code\User\s.. 공감수 0 댓글수 0 2024. 4. 7.
프로젝트 설계 이모저모 - 프론트엔드 리포지토리 패턴 구현 리포지토리 패턴 유지보수가 쉬운 코드 구조를 구현하는 방법은 제각각이지만 추구하려는 목표는 '코드의 응집도 증가와 결합도 감소'로 대부분 같다. 이를 위해서는 복잡한 로직을 가진 코드 뭉텅이를 여러 개의 레이어나 클래스로 분리하는 작업이 필연적일 수 밖에 없다. 아래 그림을 보자. A는 복잡한 로직이 하나의 레이어에 뭉쳐있는 것을 표현한 것이고 B는 복잡한 기능들을 레이어로 나눠놓은 것이다. A의 경우, 간단한 코드를 작성할 때 유리한 방식이다. 그러나 본질적으로 코드의 결합도가 높을 수밖에 없으므로 복잡한 기능을 구현해야할 때나 기능이 점차적으로 스케일업 되어야 하는 경우에는 작업량에 따라 수많은 에러와 유지보수 비용 증가가 발생할 것이다. B의 경우, 간단한 코드를 작성함에 있어서 사실상 시간적인 손.. 공감수 0 댓글수 0 2024. 2. 29.
Nextjs 프로젝트 설계 이모저모 - 과도기적 디렉토리 설계 사상누각 사상누각이라는 말이 있다. 모래위의 집이라는 말로써, 튼튼한 기초와 뼈대가 있어야 추후에 무너지지 않는다는 뜻이다. 이 말은 우리의 삶 어디에서나 통용될 수 있는 말 같다. 공부도 그렇고, 운동도 그렇다. 그리고 프로그래밍 또한 그렇다. 사실 프로그래밍만큼 사상누각이라는 말이 잘 어울리는 분야는 잘 없을 것 같다는 생각이 들 정도로 프로그래밍은 튼튼한 기초와 뼈대가 무엇보다 절실한 것 같이 보인다. 굉장히 작게 설계된 프로젝트가 나중에 살이 하나씩 붙더니 이내 거대해져서 관리가 어려워지는 경우가 발생했다고 가정해보자. 작은 사이즈의 프로젝트가 왜 어느순간에 엄청나게 비대해졌을까? 이는 아마도 프로그래밍이 논리적 작업이라는 특성 때문에 그런게 아닐까 싶다. 프로그래밍에는 물리적인 제약이 없어 개발.. 공감수 0 댓글수 2 2024. 2. 8.
Nextjs 프로젝트 설계 이모저모 - 집합적 사고로 레이아웃 설계하기 설계?유지보수 잘 하려면 코드를 이쁘게 짜 놓아야 한다. 하지만 코드를 이쁘게 짜겠다는 선언만으로는 그렇게 할 수 없다. 건물을 지으려면 땅에 줄부터 그어놔야 하듯이 코드가 올라갈 기반도 뭔가 틀이 잘 잡혀야 코드를 깔끔하게 올릴 수 있는데 이번 시리즈에서는 설계를 위한 다양한 시도 끝에 내가 얼추 픽스하려고 하는 것들을 남겨보려고 한다. Nextjs의 레이아웃나는 레이아웃의 설계가 상당히 중요하다고 생각한다. 컴포넌트가 어디에 배치되고 어디에 표시될지 명확하게 설계가 되어야 앞으로 올릴 컴포넌트들을 블록 쌓듯이 착착착 올릴 수 있기 때문이다. 그런 점에서 Next.js에서 제공하는 레이아웃은 기능별, 페이지별 분리가 너무나도 편하게 설계가 되어있어 사용하기 편하다. 레이아웃에 대한 Next.js의 공식.. 공감수 0 댓글수 0 2024. 1. 29.
클래스) 자바스크립트 클래스 의존성 주입 의존성 주입 의존성 주입은 소프트웨어 개발에서 객체지향 설계 원칙과 디자인 패턴에 기반을 둔 개념이다. 등장배경 소프트웨어 개발에서 클래스들간의 결합도를 낮추고 유지보수성과 재사용성을 향상시키는 것은 중요한 목표이며, 의존성 주입은 이러한 목표를 달성하기 위해 등장한 디자인 패턴 중 하나이다. 의존성 주입 개념이 등장하기 이전에는 클래스가 직접 의존하는 객체를 클래스 내부에 생성하는 방식으로 의존성을 처리했다. 이는 클래스와 의존하는 객체 사이의 결합도를 높여 코드의 유연성과 테스트 용이성을 저해하는 문제점이 있었다. 이에 의존성 주입 개념이 등장하여, 클래스가 의존하는 객체를 외부로부터 주입받는 방식으로 의존성 문제를 해결하고, 클래스간의 결합도를 낮추게 되었다. 장점 유연성 : 의존성 주입을 사용하면.. 공감수 2 댓글수 1 2024. 1. 28.
C++) 복사 생성자 복사 생성자 복사 생성자는 객체의 사본을 생성할 때 자동으로 호출되는 생성자 함수이다. 매개변수로 인스턴스의 포인터를 넘겨주어야하며, 이는 복사본의 원본 인스턴스에 대한 참조에 의해 쓰인다. #include using namespace std; class MyData { public: MyData() { // 디폴트 생성자 default constructor cout 공감수 0 댓글수 1 2024. 1. 24.
C++) 정적 멤버 static 정적 멤버 클래스 내 전역 변수나 전역 함수와 동일한 역할을 하는 클래스의 멤버로써 접두어로 static을 붙여서 선언한다. 클래스 자체에 내장되어 있으므로 인스턴스의 선언 없이 호출이 가능하고, 인스턴스의 선언 자체가 필요 없으므로 this를 이용해 참조할 수 없다. (애초에 인스턴스에 있는게 아니니까) #include class Test { public: Test(int data) : nData(data) { nCount++; } // Test 클래스로 인스턴스를 생성하면 nCount가 증가함. int getData() { return this->nData; } // 인스턴스 멤버 static int getCount() { return nCount; // nData에 접근할 수 없음. } // 정적 .. 공감수 0 댓글수 0 2024. 1. 24.
C++) 생성자 다중 정의 및 생성자 위임 생성자 다중 정의 클래스 생성자는 다중정의가 된다. class MyData { public: MyData(int nParam): nData(nParam){} MyData(int x, int y): nData(x + y){} void printData() { std::cout x = x; } MyPoint(int x, int y): MyPoint(x) { if (y > 200) y = 200; this->y = y; } void printCoord() { std::cout 공감수 0 댓글수 0 2024. 1. 23.
C++) 디폴트 생성자와 카피 생성자(참조자 멤버 초기화) 디폴트 생성자 디폴트 생성자는 클래스가 선언되었을 때 자동으로 호출되어 클래스의 멤버를 구성해주는 함수이다. 디폴트 생성자의 경우에는 클래스를 선언할 때 매개변수에 특정값을 넣을 필요가 없으므로, 이 점에서 다른 생성자들과 차이점이 있다. (매개변수 없이 알아서 호출되는 함수이기 때문) 사실 말만 복잡한 것이다. 단순히 디폴트 생성자를 사용한다는 것은 생성자를 명시하지 않아도 좋다는 것이며, 선언 시점에 매개변수를 넘길 필요가 없다는 뜻이기도 하다. class DefaultConstructor { public: DefaultConstructor():str1("디폴트"), str2("생성자") {} //또는 아래와 같이 선언 //DefaultConstructor() { //str1 = 30; //str2 .. 공감수 0 댓글수 0 2024. 1. 22.
C++) 디폴트 생성자(Constructor)와 소멸자 디폴트 생성자 생성자는 객체가 생성되는 시점에 자동으로 호출되는 멤버 함수. (객체의 생성은 인스턴스 선언 및 new 연산에 따른 동적 생성 두 경우에 의해 생긴다.) 전역 인스턴스가 존재할 경우, main() 함수보다 생성자가 먼저 호출되며, 생성자는 다중 정의가 가능하다. 소멸자 소멸자는 객체가 소멸하는 시점에 자동으로 호출되며 다중 정의가 불가능하다. main()함수가 끝난 뒤에도 호출될 수 있다. 코드 #include class Test { public: Test() { std::cout 공감수 0 댓글수 0 2024. 1. 21.
C++) 클래스 기본 문법 클래스 기본 문법 클래스는 관계에 대해 일절 고려하지 않는다면 함수를 포함하는 구조체라고 볼 수 있다. 클래스에는 생성자, 소멸자 등 문법상 자동으로 호출되는 함수가 존재하며, 이 때문에 C++에서는 Called by ~ 가 중요해진다. (생성자, 소멸자 등의 자동호출 시기를 아는 것이 도움이 된다.) 또한 클래스의 구성요소도 구조체처럼 멤버라고 지칭한다. #include class UserData { public: // 접근제어 지시자 int age; char name[32]; void print() { printf("%d, %s", age, name); } }; int main() { UserData user = { 30, "2DC" }; user.print(); return 0; } 참고로 클래스 .. 공감수 0 댓글수 0 2024. 1. 21.
C++) C++ 스타일 C코드와 this 포인터의 정의 C++ 스타일 C 코드 // C++ 스타일 C 코드 예 #include typedef struct USERDATA { int age; char name[32]; void(*print)(struct USERDATA* pUser); } void printData(USERDATA* pUser) { printf("%d, %s\n", pUser->age, pUser->name); } int main() { USERDATA user = { 30, "2DC", printData }; user.print(&user); return 0; } 위의 코드는 C언어를 C++ 스타일로 짜본 것이다. C언어는 클래스/객체 대신 구조체를 사용하고, 구조체는 기본적으로 메서드를 멤버로 둘 수 없다. 따라서 함수 포인터 멤버를 구조체.. 공감수 0 댓글수 0 2024. 1. 20.
C++) OOP에서 객체란 무엇인가 객체란 무엇인가 (깊게 들어갈 필요가 있을까? ...) 객체는 OOP 환경에서 소프트웨어(소스코드)를 구성하는 단위 요소이고 변수 및 그와 관련된 메서드가 모여 이뤄진 하나의 집합체이다. (구조체와는 약간 다르다. 구조체는 변수만 포함하고, 객체는 변수와 함수(메서드)까지 포함한다.) C++에서는 객체를 클래스(Class)로 기술하며, 클래스는 C언어의 구조체와 유사한, 변수와 함수를 멤버로 갖는 하나의 틀이다. #include class USERDATA { public: int age; char name[32]; void printUser() { printf("%d %s", age, name); } }; int main() { USERDATA DC = { 30, "2DC" }; DC.printUser(.. 공감수 0 댓글수 0 2024. 1. 20.
C++) Name Mangling Name Mangling 맹글링은 영단어로 '난도질하다'라는 의미이다. 즉, 네임 맹글링은 말 그대로 어떤 이름을 난도질해버리는 것이다. C++의 식별자 이름은 컴파일러에 의해 C언어처럼 유일한 이름으로 변경된다. namespace의 구분에 의해 중복되는 식별자가 많아질 수 있으므로 이런 기능이 도입되었고, 덕분에 함수 다중 정의(Overloading)가 동작할 수 있게 되었다. 네임 맹글링은 링크 타임의 오류를 디버깅할 때 반드시 알아야 하는 부분이다. #include using namespace std; extern "C" void noManglingFunc() // 네임 맹글링을 시행하지 않음 { cout 공감수 0 댓글수 0 2024. 1. 20.
C++) Namespace Namespace C++가 지원하는 각종 요소들(변수, 함수, 클래스 및 각종 선언 등)을 한 범주로 묶어주기 위한 문법으로 중첩이 가능하다. 선언할때는 식별자 이름 앞에 ::을 붙여서 표기한다. 사실상 C++의 모든 변수나 함수는 C++ 문법 상 namespace에 속한다고 할 수 있는데, 예시로 모든 전역변수나 함수는 global namespace에 해당한다. #include using namespace std; // 디폴트 네임스페이스가 std가 된다. int nData = 999; // global namespace에 속하는 전역변수 namespace Test // Test namespace 선언 { int nData = 100; // Test::nData void testFunc() // Tes.. 공감수 0 댓글수 0 2024. 1. 20.
C++) 함수 템플릿 함수 템플릿 함수 다중 정의(Overloading)를 대체할 수 있는 문법으로, 함수를 만드는 틀 역할을 한다. 즉 코드를 만드는 코드인 셈이다. #include template // 함수 템플릿 선언 T add(T a, T b) { return a + b; } int main() { std::cout 공감수 0 댓글수 0 2024. 1. 20.
C++) 함수 다중 정의(Overloading) 함수 다중 정의(Overloading) 다중 정의는 영문 Overloading에 대한 한글 번역 표기이다. 함수의 이름은 같지만 매개변수 구성이 다른 점이 특징이다. (반환 형식, 호출 규칙은 오버로딩 대상이 아니다.) 디폴트 매개변수와 조합시 모호한 호출이라는 오류가 발생한다. #include int add(int a, int b) { std::cout 공감수 0 댓글수 0 2024. 1. 20.
C++) 범위 기반 for문 범위 기반 for문 C++에서의 배열은 C의 배열보다 유지보수하기 편하다. 범위 기반 for 덕분이다. C++에서 범위 기반 for문은 배열 요소의 갯수만큼 반복횟수가 자동으로 결정되며, 배열 요소의 갯수가 달라져도 반복문을 수정할 필요가 없다. (C에서는 이 작업으로 상당히 고생이 많다고 한다.) 단 컴파일러가 반복횟수를 판단할 수 있어야 사용이 가능하다. int main() { // 범위 기반 for문 int list[] = { 10, 20, 30, 40, 50, 60 }; for (int i = 0; i < 5; i++) std::cout 공감수 0 댓글수 0 2024. 1. 19.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.