React Hook Form은 React에서 폼(Form)을 쉽고 효율적으로 관리하기 위한 라이브러리라고 한다.보통 리액트에서 input을 만들때 useState를 사용해 '제어 컴포넌트' 방식으로 구현하고 한다.그런데 input이 많아지면 코드가 복잡해지고 성능이 떨어지는 문제가 생긴다.이럴때 React-hook-form를 쓰면 편하다고 한다.왜 React Hook Form을 쓸까?성능 최적화 (불필요한 리렌더링 방지)이게 가장 큰 장점이라고 한다. 일반적인 useState 방식은 글자 하나를 칠 때마다 전체 컴포넌트가 다시 그려지는데, React-hook-form는 비제어 컴포넌트(Uncontrolled Components) 방식을 기반으로 하여 사용자가 입력을 마칠 때까지 리렌더링을 최소화한다.가볍..

Enum에 정규식과 마스킹 메소드를 정의했는데, 정규식은 패턴에 따라 부분집합인 정규식도 간혹 존재한다. 나는 Enum에 작은 부분집합을 오름차순으로 정렬하였다.패턴 검사할때도 Enum에 정의된 순서대로 검사가 되었으면 좋겠다고 생각했다. 각 Enum 요소에 Order 값을 추가해야하나 고민을 했는데, ordinal이라는 값이 있다는 것을 알게되어 활용했다.📚 Enum의 ordinal()1. Enum 정의 순서 = ordinal 값Java Enum은 정의된 순서대로 자동으로 0부터 시작하는 인덱스가 부여된다. 그 인덱스가 바로 ordinal이다.public enum BlackKeywordPattern { PHONE(...), // ordinal() = 0 EMAIL(...), ..

https://css-loaders.com/ CSS Loaders: A collection of more than 600 loading animationsThe biggest collection of CSS-only loaders. More than 600 loading animations made by Temani Afif using a single element.css-loaders.com css-loaders.com은 단일 HTML 요소(보통)와 순수 CSS만으로 구현한 600개 이상의 로딩 애니메이션을 모아 보여주는 사이트입니다. 사용자는 클릭으로 CSS 코드를 복사해 즉시 프로젝트에 붙여넣을 수 있어 빠른 시제품 제작과 UI 개선에 유용합니다.🔍 핵심 특징방대한 컬렉션: 600개 이상(꾸준히 ..

최근 팀에서 다양한 플로우 서비스에 업무, 간트차트 기능을 라이브러리로 적용하기 위해 리포지토리를 분리하고 모노레포를 적용중이다.모노레포를 구현하기 위해 pnpm을 사용하여 인스톨 및 빌드를 하는데 Turborepo를 이용해 빌드하다보면 이런 문제가 발생한다. 빌드하는데 다음과 같이 빌드가 안되는 문제가 있었는데, 이는 빌드 의존성이 있음에도 의존성을 무시한채 빌드되어서 생긴 문제다.다시 말하면 Turborepo는 빌드 순서가 있고, 각 패키지들이 순서대로 빌드가 되어야 의존하고 있는 다른 패키지들이 빌드가 가능. 각 패키지의 package.json에 dependencies 추가. 그런데 이미 peerDependancies에 의존하고 있는 패키지들이 있는 상태인데 빌드가 안된다. 왜 그러냐면 Turbo는..

https://wooncloud.tistory.com/161 Spring 기본 시작 - 세팅부터 CRUD API 까지1. 자바 설치 (Java JDK 17 이상 설치)Java 8 (2014년 출시)여전히 많은 기업에서 레거시 시스템으로 사용 중람다 표현식, Stream API 등 중요한 기능이 도입된 버전장기적으로는 점차 마이그레이션하는 추wooncloud.tistory.comhttps://wooncloud.tistory.com/162 Spring 기본 - Service 계층이전 내용https://wooncloud.tistory.com/161 Spring 기본 시작 - 세팅부터 CRUD API 까지1. 자바 설치 (Java JDK 17 이상 설치)Java 8 (2014년 출시)여전히 많은 기업에서 레거시..

JWT 기본 구조JWT는 점(.)으로 구분된 3개 부분으로 이루어져 있다.xxxxx.yyyyy.zzzzz각 부분은 Base64URL로 인코딩되어 있다.1. Header (헤더)역할: 토큰의 타입과 서명 알고리즘 정보{ "alg": "HS256", "typ": "JWT"}alg: 서명에 사용된 알고리즘 (HS256, RS256, ES256 등)typ: 토큰 타입 (항상 "JWT")2. Payload (페이로드)역할: 실제 전달하고자 하는 정보(클레임 Claims){ "sub": "user123", "name": "김철수", "role": "admin", "iat": 1516239022, "exp": 1516242622}클레임 종류Registered Claims: 표준 클레임 (sub, exp,..

https://wooncloud.tistory.com/161 Spring 기본 시작 - 세팅부터 CRUD API 까지1. 자바 설치 (Java JDK 17 이상 설치)Java 8 (2014년 출시)여전히 많은 기업에서 레거시 시스템으로 사용 중람다 표현식, Stream API 등 중요한 기능이 도입된 버전장기적으로는 점차 마이그레이션하는 추wooncloud.tistory.comhttps://wooncloud.tistory.com/162 Spring 기본 - Service 계층이전 내용https://wooncloud.tistory.com/161 Spring 기본 시작 - 세팅부터 CRUD API 까지1. 자바 설치 (Java JDK 17 이상 설치)Java 8 (2014년 출시)여전히 많은 기업에서 레거시..

인텔리제이에서 equals()나 hashCode()를 생성할때 instanceof와 getClass 중에 어느걸 사용할꺼냐 선택하는 경우가 있다. instanceof 방식상속 관계를 허용.부모 클래스와 자식 클래스 간의 비교가 가능.더 유연하지만 대칭성(symmetry) 원칙을 위반할 수 있다.@Overridepublic boolean equals(Object obj) { if (this == obj) return true; if (!(obj instanceof MyClass)) return false; MyClass myClass = (MyClass) obj; // 필드 비교 로직 return Objects.equals(name, myClass.name);} getClass(..

https://wooncloud.tistory.com/161 Spring 기본 시작 - 세팅부터 CRUD API 까지1. 자바 설치 (Java JDK 17 이상 설치)Java 8 (2014년 출시)여전히 많은 기업에서 레거시 시스템으로 사용 중람다 표현식, Stream API 등 중요한 기능이 도입된 버전장기적으로는 점차 마이그레이션하는 추wooncloud.tistory.comhttps://wooncloud.tistory.com/162 Spring 기본 - Service 계층이전 내용https://wooncloud.tistory.com/161 Spring 기본 시작 - 세팅부터 CRUD API 까지1. 자바 설치 (Java JDK 17 이상 설치)Java 8 (2014년 출시)여전히 많은 기업에서 레거시..