코드노트

Spring Security로 관리자 페이지를 제어하면서 클라이언트 요청부터 시작해서 서버까지 오는 과정 중 보안필터에 도달하는 과정을 정리해보려고 한다. 처음 제어 구현을 시작할때 프론트적인 사고를 하면서 인터셉터를 생각했다관리자만 접근을 해야하고 API 접근에도 그렇고 세션을 확인해야한다면 각 요청마다 진행되어야하는데 그럼 인터셉터를 해야하지않을까? 했지만 백엔드에서도 당역히 단순한 작업은 HandlerInterceptor라는 인터셉터로 구현할 수 는 있다.하지만 보안/인증 영역으로 넘어가게되면 인터셉터 만으로는 한계가 생길 수 있다. 그래서 적용하면서 이 부분은 한번 제대로 정리하고 넘어가는게 좋을것 같다고 판단했다. 먼저 서블릿과 필터에 대해서 용어를 정리해보자 서블릿(Servlet)이란- ..

마이크로서비스 아키텍처 (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..