코드노트

마이크로서비스 아키텍처 (MSA) 및 분산 시스템 환경에서 외부 API 통신을 단순화해주는 Spring Cloud OpenFeign에 대해서 정리 해보려고 한다.우리가 사용하는 어노테이션들이 내부적으로 어떻게 동작하고 왜 이런 구조를 사용하는지 시스템적인 관점에서 분석해보자! Spring Boot & Lombok 핵심 어노테이션 이해하기스프링 프레임워크는 애노테이션(Annotation, @)을 통해 프로그램의 제어권과 설정을 관리한다. Spring 프레임워크 핵심 제어 어노테이션@SpringBootApplication (애플리케이션 시스템의 시작점)- 이 어노테이션은 스프링 부트 성을 움직이는 '마스터키'이자 메인 제어 센터이다. 내부에는 세가지 핵심 애노테이션을 품고 있어, 프로그램이 켜지는 순간 다음..

문제더보기심술쟁이 수는 2,3,5의 곱으로 만들 수 있는 수이다. 다음과 같은 순서의 수가 11개의 심술쟁이 수이다.1,2,3,4,5,6,8,9,10,12,15,....처음 수는 1로 시작하도록 한다. 입력은 받지 않고, 에 1500번째 심술쟁이 수가 출력되게 한다. 출력859963392 이 문제를 풀려면 우선 DP를 알고 넘어가야한다.DP(Dynamic Programming)- 작은 문제의 답을 저장해두고, 그걸 재사용해서 큰 문제를 푸는 방식- 가장 큰 특징은 한번 계산한 작은 문제는 다시 계산하지 않는다.즉 매번 처음부터 계산하지 않고 이전에 구한 결과를 배열 같은 데 저장해두고 꺼내 쓴다. 예시를 볼때 피보나치로 보면 쉽게 이해할 수 있다.f(1) = 1f(2) = 1f(3) = f(2) +..

문제더보기양의 정수 S0 의 각 아라비아 숫자들의 제곱의 합으로 양의 정수 S1을 만든다고 하자.동일한 방법이라면, S1으로 S2를 만들 수 있고, 이 후로도 계속 만들 수 있다.만약 어떤 i(i ≥ 1)에 대해서 Si = 1이라면, 최초의 S0를 Happy Number라고 부른다.Happy Number가 아닌 수를 Unhappy Number라고 부른다.예를 들어, 7에서 시작하게 되면 다음과 같은 일련의 순서를 가지게 되며7, 49(=7^2), 97(=4^2+9^2), 130(=9^2+7^2), 10(=1^2+3^2), 1(=1^2),따라서 7은 즐거운 수이다. 그리고 4는4, 16(4^2), 37(1^2+6^2), 58(3^2+7^2), 89(5^2+8^2), 145(8^2+9^2),42(1^2+4^..

useTransition이란?useTranstion은 React18에서 도입된 Concurrent Rendering 기능의 일부로, UI 반응성과 성능을 개선하기 위해 "덜 중요한 작업을 늦춰서 처리" 하는 훅이다. 사용자가 빠르게 반응을 체감해야하는 작업이 있다면 가벼운 작업과 무거운 작업을 분리 할 수 있으며, UI의 지연(Lag)을 줄이는데 효과가 있다. - 가벼운 작업 예시 : 버튼 클릭, 입력 필드 타이핑 등- 무거운 작업 예시 : 목록 필터링, 차트 업데이트 등언제 사용할까?대량 데이터 필터링, 렌더링, 정렬애니메이션, 차트, 목록 등 복잡한 UI 업데이트사용자의 입력 반응은 빠르게 결과는 나중에 처리하고 싶을 때사용하지 않아도 되는 경우상태 업데이트가 가벼운 경우비동기 fetch 작업 위주로..

ethers.js- 이더리움 블록체인과 상호작용 하기 위한 javascript 라이브러리- 가볍고 모듈화가 되어있어 Node.js 브라우저 환경에서 모두 사용 가능하다.- Provider, Signer, Contract 등 유틸리티를 제공하여 블록체인 애플리캐이션 개발을 단순화할 수 있다.- DApp 개발 시 Ethereum 네트워크와 상호작용하려면 ethers.js 라이브러리의 Provider를 사용해야 한다. Provider의 개념과 역할- Provider는 이더리움 네트워크와 데이터를 교환화기 위한 인터페이스이다.역할: 네트워크 상태 조회, 블록 정보 가져오기, 트랜잭션 확인 등서명이나 전송은 직접 처리하지 않는다.ethers.js에서 여러 종류의 Provider를 지원하며, 가장 일반적으로 사용되..

Wagmi- react, typescript를 지원하는 라이브러리로 이더리움 어플리케이션을 구축할 때 지갑 연결 및 체인 데이터 관리에 있어서 직관적이고 효율적으로 처리할 수 있도록 도와주는 라이브러리이다. 주요 특징- React Hook 기반 설계를 통해 리액트에서 쉽게 사용 가능하다.- typescript로 구현되어 있다.- 다양한 지갑 지원 ( MetaMask, WalletConnect, Coinbase Wallet 등 여러 지갑 연동 )- 다양한 체인 지원 ( 이더리움 외에도 Polygon, Arbitrum 등 다양한 체인 지원 )- Type-safe API 지원Type-safe APIabi 기반으로 스마트 계약 함수 호출import { useContractRead, useContractWrite..

반응형 디자인을 하면서 생긴 문제를 해결하면서 알게된 tailwindCSS의 addvariant를 정리하려 한다.현재 사내 프로젝트에서는 네이티브로 작업을 하지 않고 있다. 그렇다보니 반응형으로 작업을 진행하면서 발생한 이슈이다. 많은 프로젝트에서도 hover를 줄텐데 모바일에서는 hover를 할 수 없기에 제외시키는 코드를 주어야했다.만약 hover를 제외시키지 않는다면 터치가 되었을때 hover에 주었던 css값들이 그대로 남아있게 된다. 위 이미지를 보게 되면 hover로 주었던 배경색이 그대로 남게 된다.이 문제를 해결하기위해서는 css 미디어쿼리를 사용해서 hover를 지원하고 있는 기기에서만 css가 적용되도록 지정할 수 있었다. screens raw Tailwind Hover 모바일에선 제외..

Race Condition?- 두 개 이상의 작업이 동시에 실행되거나 예상치 못한 순서로 완료될 때 발생하는 문제점이다. 리액트를 사용하면서 한번쯤은 만나본 문제이기도 하다. 이로 인해서 데이터 상태가 예측할 수 없는 상태로 변경될 수 있다. 특히 비동기 코드에서는 필수적으로 생각하고 코드를 작성해야한다! 그럼 Race Condition는 왜 일어나며 어떤 문제점을 가지고 있을까? - 여러 비동기 작업이 동시에 실행되면서 서로 경쟁하는 상황이 발생할 수 있다. 비동기 작업이 순차적으로 이뤄지지 않고 병렬적으로 실행되기 때문에 동시에 업데이트가 된다면 예상치 못한 상태 변경이 발생할 수 있다. - 리엑트를 사용할 때 컴포넌트가 비동기적으로 데이터를 가져오고 동시에 setState를 통해 상태를 업데이트를 ..

next.js 에서 jest를 설정하려면 바로 시작할 수 있는 방법도 있지만next를 설치하고 jest를 추가하는 방법을 기록해보려고 한다.  방법은 어렵지 않고 config, setup ... 등 세팅값만 맞춰주면 바로 jest를 실행하고 개발이 가능했다. Testing: Jest | Next.jsLearn how to set up Jest with Next.js for Unit Testing and Snapshot Testing.nextjs.orgQuickstart$npx create-next-app --example with-jest with-jest-app$yarn create next-app --example with-jest with-jest-app$npm create next-app --ex..

디자인 패턴은 면접을 볼때 많이 물어보는 질문중 하나였다. 어떻게 보면 여러 디자인 패턴이 있지만 처음 디자인 패턴이라는 이야기를 들었을때에는 디자인이라는 단어 때문에 UI를 다루는 패턴인가? 라는 생각을 했던것 같다. 비전공자인.. 특히 나는 디자이너로 시작하여 개발자로 이직을 했다보니 더 그렇게 생각했었다. 그래서 첫 면접에서 당당히 나는 아토믹 패턴을 구구절절 이야기했었던 기억이 있다...ㅋ 그렇게 프론트엔드 개발을 공부하면서 디자인 패턴에 대해서 많이 알게 되었고, 현재 회사에서도 여러 패턴들을 적용하며 코드를 보다보니 내가 몰랐던 패턴들도 같이 정리를 해보려고 한다!생성 패턴 (Creational)- 객체의 생성 방식에 중점을 둔다. - 객체 생성 과정에서 복잡성을 줄이고, 코드의 유연성과 재사..