minstory

목차: 소개 1.1 스프링에서 빈 주입과 @Qualifier 어노테이션 1.2 @Qualifier의 역할과 필요성 @Qualifier 어노테이션의 활용 2.1 기본적인 @Qualifier 사용법 2.2 여러 개의 빈 후보 중 명시적인 선택 2.3 빈 이름 규칙과 @Qualifier의 연결 실제 예제: MessageMapper 인터페이스를 구현하는 여러 클래스 3.1 MessageMapper 인터페이스 정의 3.2 여러 구현체 클래스 생성 3.3 @Qualifier를 사용한 명시적인 빈 선택 코드 예시 및 설명 4.1 MessageService 클래스에서의 @Qualifier 사용 결론 1. 소개 1.1 스프링에서 빈 주입과 @Qualifier 어노테이션 스프링 프레임워크에서는 의존성 주입(Dependen..

문제 상황 // Controller 일부 @PostMapping("/update-something") fun updateSomething( @Valid @RequestPart("request") request: UpdateRequest, ) { ... } // request Class 일부 import jakarta.validation.constraints.Size class UpdateRequest ( @Size(max = 20, message = "name 길이가 20자 이하여야 합니다") val name: String, ) { ... }문제 원인 class UpdateRequest ( @Size(max = 20, message = "name 길이가 20자 이하여야 합니다") val name: Str..

Events 살펴보기 const title = document.querySelector('h1'); console.dir(title); console.dir 결과값으로 properties를 볼 수 있는데, 이 중에 on-으로 시작하는 것들이 사용가능한 events이다. Events 넣는 두가지 방법 title.addEventListener('click', handleTitleClick); //removeEventListener 사용 가능 title.onclick = handleTitleClick; //동일한 이벤트에 대해 여러개 콜백함수 지정 불가능 *window events 구글링하는 방법: 'window web api mdn' 검색

String Number Boolean Null : 변수에 값은 주어졌는데, 그 값은 '아무것도 없음'이다. *never happens automatically (비어있다는 것을 의도적으로 표현함) Undefined : 변수는 만들어졌지만 값이 주어지지 않음. (컴퓨터 메모리는 존재) const name = null; console.log(name); -> null const something; console.log(something); -> undefined Truthy & Falsy

flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; justify-content main-axis 정렬 flex-direction 설정값에 따라서 justify-content 값을 적용한 결과가 달라진다. flex-wrap flex -wrap: wrap; flex-wrap: wrap-reverse; 여기서 reverse는 cross-axis 방향을 반대로 바꾼다. * flex-direction: row; 일 때 cross-axis는 세로축, flex-direction: column; 일 때는 cross-axis는 가로축이다. align-items cross-axis 정..

https://easings.net/ Easing Functions Cheat Sheet Easing functions specify the speed of animation to make the movement more natural. Real objects don’t just move at a constant speed, and do not start and stop in an instant. This page helps you choose the right easing function. easings.net transitiono 다양한 효과들 참고할 수 있다.

em button { font-size: 1em; //부모 요소 폰트 크기의 1배 padding: 0 1em; //현재 요소 폰트 크기의 1배 border-radius: 0.5em; //현재 요소 폰트 크기의 0.5배 곡률 유지 } 이렇게 하면 폰트 크기가 바뀌더라도 button 곡률은 망가지지 않고 모양이 유지된다. *단점: 부모 요소의 글꼴 크기에 따라 달라지기 때문에 예를 들어 중첩될 때 제곱한 만큼 크기가 바뀐다. 그래도 border-radius 설정할 땐 유용함. 버튼 테두리 곡률은 버튼내부 글씨 크기에 영향을 받기 때문 rem 부모 요소 말고 root element ( ) 글씨의 배수로 크기 설정

width & height : 컨텐츠 가로세로 설정 box-sizing: border-box; -> 테두리가 원래 설정한 컨텐츠 크기 안에 포함됨. *short handed property border: 두께, 스타일, 색상 순서; Padding : element와 border사이 공간 Margin : element 테두리 간 간격 Display property options *87강 참고 Inline width&height are ignored. margin & padding push elements away horizontally but not vertically Block Width&Height, Margin&Padding are respected. Inline-block..