개발 노트

스테레오타입UML에서 스테레오타입(stereotype)은 클래스, 관계, 속성, 메서드 등에 추가적인 의미를 부여하기 위해 사용된다. 스테레오타입은 >로 감싸서 표기합니다. 다양한 스테레오타입이 있지만, 대표적인 몇 가지는 다음과 같다.classOne: className { shape: class}classTwo: >\nclassName { shape: class}classThree: >\nclassName { shape: class}classFour: >\nclassName { shape: class} 접근 제어자UML에서는 접근 제어자를 나타내기 위해 + - #을 사용한다. 이는 각각 public private protected를 나타낸다. static 접근 제어자의 경우 밑줄을 치고, rea..

D2 Diagram Language는 간결하고 직관적인 다이어그램을 생성할 수 있는 도메인 특화 언어다. D2는 특히 텍스트 기반으로 다이어그램을 그릴 수 있는 기능을 제공하여, 복잡한 그래픽 툴 없이 코드처럼 간단하게 다이어그램을 정의하고, 이를 자동으로 시각화할 수 있다.주로 시스템 아키텍처, 플로우 차트, 클래스 다이어그램 등 다양한 다이어그램을 생성하는 데 사용되며, 코드와 같은 방식으로 다이어그램을 관리할 수 있어 버전 관리가 용이하다. 또한, D2는 매우 간결한 문법을 제공하여, 복잡한 시각적 요소를 쉽게 표현할 수 있도록 돕고, 개발자와 협업하는 데 유리한 도구이다.아래의 명령줄을 입력하여 설치할 수 있으며, VS Code에서는 [ D2 ] 익스텐션을 사용하여 즉각적인 시각적 피드백을 받을..

Class파이썬의 클래스는 그 용어가 JS의 클래스와는 조금 다르다. 인스턴스는 동일하지만, 스태틱 메서드를 클래스 메서드라고 부르며, 클래스와 관련은 있지만 내부 변수와는 소통하지 않는 메서드를 스태틱 메서드라고 부른다. JS랑 파이썬이랑 왔다갔다 하면 조금 햇갈리기는 하지만, 신경 쓰면 또 그렇게까지 햇갈릴만한 건 아니다 싶다.class User: count = 0 # 클래스 변수 (JS에서는 스태틱 프로퍼티) @classmethod # 데코레이터는 JS나 Python이나 비슷한듯 def print_number_of_users(cls): # 클래스 메서드 (JS에서는 스태틱 메서드) return cls.count @staticmethod # self나 cls를 쓰지 않는 메서드..

SOLID 원칙은 로버트 C. 마틴이 제창한 객체 지향 프로그래밍의 설계 원칙이다. 이 원칙은 상속, 캡슐화, 다형성, 추상화라는 네 가지 기둥을 실제 코드에 어떻게 적용할지에 대해 설명한다. SOLID라는 용어는 각 원칙의 첫 글자를 따서 만든 약어로, 다섯 가지 원칙은 각각 단일 책임 원칙(SRP), 개방-폐쇄 원칙(OCP), 리스코프 치환 원칙(LSP), 인터페이스 분리 원칙(ISP), 의존성 역전 원칙(DIP)을 의미한다. 이는 객체 지향을 설계를 할 때 코드의 확장성, 유지보수성, 재사용성, 유연성 등을 향상시키기 위해 고려해야 할 중요한 가이드라인을 제공한다. 각각의 원칙은 독립된 개별적인 개념이 아니라, 하나의 목적을 위해 서로 유기적으로 연관되어있다. 단일 책임 원칙(SRP)단일 책임 원칙..

상황Nest.js 서버에서 jest를 사용한 테스트 코드를 작성하고 있었다. 평소에는 아래와 같이 ConfigService를 모의하여 configService.get으로 환경 변수를 처리했다. 그런데 이런 방식이 마음에 들지 않았다. 가장 큰 이유는 필요한 문자열이 하드코딩 되어있어 환경 변수를 바꾸거나 바뀌어야 할 때마다 수작업을 해야 했기 때문이다.{ provide: ConfigService, useValue: { get: jest.fn((key: string) => { if (key === 'jwt.accessSecret') return 'accessSecret'; if (key === 'jwt.refreshSecret') return 'refreshSecret'; ..

Jest는 Facebook에서 개발한 JavaScript 테스트 프레임워크로써 간단하고 직관적인 API와 강력한 기능을 제공한다. Nest.js는 테스트 도구로서 Jest를 기본 제공하고 있고, React나 Next.js에서는 testing-library를 사용해 Jest 테스트를 수행할 수 있다.Jest의 가장 큰 장점 중 하나는 설정이 거의 필요 없다는 점이다. 다른 테스트 프레임워크들은 종종 복잡한 설정이나 외부 라이브러리의 설치가 요구되지만, Jest는 기본적으로 거의 모든 기능을 내장하고 있어 별다른 준비 없이 바로 사용할 수 있다. 또한, 자동화된 테스트 실행과 빠른 피드백을 제공하여 개발 과정에서 코드 변경 시마다 수동으로 테스트를 실행하는 불편함을 줄여준다.  기본 문법Jest는 test ..

이 포스트는 Dominik Dorfmeister가 자신의 블로그에 올린 You Might Not Need React Query 게시글을 번역한 것이다. 번역하는 과정에서 다소 의역이 있을 수 있으며, 일부 번역에는 사견이 포함되어있기도 하다. 리액트 서버 컴포넌트와 함께라면 리액트 쿼리를 쓸 필요가 없어지는 걸까요? 아마도 이 문제는 지난 몇 달간 제가 가장 많이 받은 질문이었을 겁니다. 그리고 이에 대한 제 대답은 "저도 잘 모르겠는데요?"입니다. 이 사실을 기억해주세요. 이 업계의 대부분의 개발자들이 그러하듯 저 역시도 필요한 게 생길 때마다 그때그때 하나씩 만들어왔다는 사실을 말이죠. 만약 여러분께서 저에게 뭔가 그럴듯한 계획이 있을 거라 기대하고 계셨다면, 죄송하게 되었습니다. 이 길이 어디서 끝..

상황내가 혼자 개발하고 있는 onef에 댓글 기능을 추가하기로 했다. 우선은 댓글 작성 로직과 작성 컴포넌트를 구현하였다. 이후에 댓글 수정 기능이 필요하다는 걸 깨닫고 보니 댓글 작성 로직에서 post만 put 메소드로 바꿔주면 된다는 사실을 알게되었다. 이를 위해 댓글 작성 컴포넌트에서 해당 로직을 추출하고, 필요한 로직은 Context를 사용해 외부에서 주입하는 방식으로 변경하였다.// CommentMutation.tsexport class CommentMutation extends MutationFn { constructor() { super(); } postComment() { return ({ parentId, value, depth }: { parentId: string; v..

상황Button과 Link 및 여러 컴포넌트를 인자로 받아서 통일된 스타일을 처리해주는 Clickable 컴포넌트를 만들고 난 직후의 일이다. 로그인 페이지에서 Clickable 컴포넌트가 문제 없이 동작하는 걸 확인한 뒤 코드를 커밋했고, github action이 동작하며 라이브 서비스 서버로 배포가 완료되었다.그런데 잘 적용되었는지 살펴보던 중 한 가지 문제점을 발견하게 되었다. 어떤 Clickable은 스타일이 제대로 적용되어있는 반면에, 어떤 Clickable은 일부 스타일만 적용되어있는 것이 아닌가! 추리를 위해 당시 Clickable 컴포넌트가 어떤 모습이었는지 그 코드를 아래에 첨부한다.type ComponentType = typeof Button | typeof Link;type Clic..

이번 에러 케이스에는 서술 트릭이 존재한다. 상황나는 onef라는 이름의 풀스택 프로젝트를 혼자서 진행하고 있다. AWS로 배포하는 데 익숙해져서, 이번에도 AWS를 통해 서비스를 배포하려고 했다. 늘 그렇듯 VPC를 하나 만들고 거기에 두 개의 서브넷을 만들었다. 퍼블릭 서브넷에는 NextJs와 NestJs 서버가, 프라이빗 서브넷에는 NestJs 서버와만 통신하는 PostgreSQL 데이터베이스가 있다.그리고 https 통신을 구현하기 위해 [ ELB https 통신 구현 ]의 내용과 같이 로드밸런서를 하나 만들었다. 리스너에 요청 경로에 따른 규칙을 설정하여 중간에 api가 들어가면 NestJs 서버로, 그렇지 않은 경우에는 NextJs 서버로 요청이 가도록 했다. 이후에는 가비아에서 도메인을 하나..

문제 어떠한 수 N이 1이 될 때까지 다음의 두 과정 중 하나를 반복적으로 선택하여 수행하려고 한다. 단, 두 번째 연산은 N이 K로 나누어떨어질 때만 선택할 수 있다. N에서 1을 뺀다 N을 K로 나눈다 N과 K가 주어질 때, N이 1이 될 때까지 몇 번의 과정을 수행해야하는지를 구하시오. 며칠 전까지의 나였다면 사실 문제 자체는 아주 간단하다. while로 n이 1이 될 때까지 반복문을 돌리면서 외부 변수 count를 하나 만들고, 반복문이 한 번 시행될 때마다 count++를 해주면 끝이다. function solution(N, K) { let count = 0; while (N > 1) { if (N % K === 0) N /= K; else N -= 1; count++; } return coun..

문제 : 프로그래머스 레벨 1 - 최대공약수와 최소공배수 문제 : 프로그래머스 레벨 1 - 기사단원의 무기 최대공약수 내가 두 수의 최대공약수를 구하기 위해 짰던 코드는 대략 다음과 같다. 각각의 숫자에 대해 for 반복문을 돌면서 i로 나눈 나머지가 0인 숫자들의 배열을 만들고, 두 개의 배열 중 더 짧은 배열을 기준으로 마지막 인덱스에서부터 시작해서 indexOf를 통해 최대공약수를 찾았다. 최대공약수 하나 찾기 위해서 단일 반복문이 두 개와 이중 반복문 하나를 사용한 셈이다. 당연히 성능이 좋을 리 없다. const findGCD = (a, b) => { const min = Math.min(a, b); let gcd = 1; for (let i = 1; i { const lcm = (a * b) ..