hee-ya07 님의 블로그

2. 빌더(Builder):: Builder 패턴은 3가지로 분리되어 호출// 1) 빌더 정의Member.MemberBuilder builder = Member.builder()// 2) 필드 설정builder.name("Aaron") .email("aaron@example.com") // 3) 객체 생성Member aaron = builder.build(); - 합쳐서 사용할 경우, 아래와 같이 사용한다.Member aaron = Member.builder() .email("aaron@example.com") .name("Aaron") .build();2.1 builder의 장점:: 생성자가 아닌 빌더를 통해 객체를 생성하는 이유1) 원하는..

1. 생성자:: 필요한 형태의 객체에 따라 각각의 방식으로 생성자를 만듦1.1 @NoArgsConstructor + @Setter:: 빈 객체 생성 후, 필요에 따라 필드 값 주입Member aaron = new Member(); // 빈 객체 생성aaron.setName("Aaron"); // 이후 값 주입aaron.setEmail("aaron@example.com");// ...public class Member { private String name; private String email; public Member() {} // 빈 객체를 생성하는 생성자 public void setName(String name) { this.name = name; } pub..

1. 객체의 종류1.1. DTO (Data Transfer Object):: 객체의 가변성 부여:: 주로 서비스 계층에서 Controller로 데이터 전달 or API 호출 결과를 클라이언트로 전달이 목적- 객체 내 데이터에 대한 Getter와 Setter 사용 가능1.2 VO (Value Object):: 객체의 불변성 부여:: 여러 도메인 객체 간의 값 비교 or 무결성 검증 역할:: 값의 동일성을 기준으로 비교 -> equlas() 와 hashCode() 메서드를 재정으하는 경우 사용- 객체 내 데이터에 대한 Getter 가능 , Setter 사용 X1.3 비교구분DTO (Data Transfer Object)VO (Value Object)목적데이터 전달을 위한 객체값 자체를 표현하기 위한 객체변경..

0. 객체 지향 프로그래밍(OOP)의 핵심 개념0.1. 캡슐화 (Encapsulation):: 객체의 상태(=데이터)와 그 상태를 변경하는 메서드를 하나로 묶는 원칙:: 정보 은닉 + 접근 제어를 통한 객체의 상태 보호 + 데이터 무결성을 제공더보기- 접근 제어자를 통해 데이터를 은닉- 외부에는 최소한의 메서드만을 노출하여 데이터의 변경 및 접근을 제한==> 단순히 숨기는 것이 아닌 "독립된 시스템 구축"에 있다 접근 제어자를 통해 구현- public : 어디서도 접근- protected : private + default의 접근성(상속 or 같은 패키지 내)- default : 같은 패키지 내 접근 가능- private : 동일한 클래스 내에서만 접근 가능, inner 클래스의 경우, 상위에서 접근 가..

8. useCallback: 인수로 넘겨 받은 "callBack" 을 캐싱    => 함수에 대한 저장(메모리제이션): 동일한 함수가 계속 재사용되므로 불필요한 리렌더링을 방지const cachedFn = useCallback(fn, dependencies)첫번째 인수로 캐싱할 함수두번째 인수로 의존성 배열: 자식 컴포넌트가 React.memo로 최적화된 경우, 자식으로 함수를 보낼 경우 callback을 통해 렌더링 방지: 자주 되는 함수일 경우 매번 재생성 하지 않고 메모리에 캐싱된 함수를 재사용더보기더보기const ChildComponent = React.memo(({ onClick }) => { console.log('Child component rendered'); return Click M..

6. useLayoutEffect: WB가 re-paint 전 실행되는 useEffect의 일종useLayoutEffect(setup, dependencies?)const Example = () => { useLayoutEffect(() => { console.log('렌더링 후, 화면에 그리기 전에 실행됩니다.'); }, []); // 의존성 배열이 빈 배열이면, 컴포넌트가 처음 렌더링된 후에만 실행 return Example;};: useEffect와 동일하게 생겼고 엇비슷하게 동작함- 차이점특성useEffectuseLayoutEffect실행 시점렌더링 - 페인팅 후렌더링 후 - 페인팅 전 사이에 실행동기 | 비동기비동기동기렌더링에 영향비동기 작업 -> 렌더링에 영향 X화면을 그리기 전 동..

7. useMemo: 비싼 계산에 대한 결과를 저장(메모리제이션)하고, 의존성 배열을 트리거로 하여 변화가 없으면 저장된 값 반환: 일반적으로 "값" 에 대한 저장const cachedValue = useMemo(calculateValue, dependencies)첫번째 인수로는 값을 반환하는 생성 함수- 단순한 연산 결과만 아니라 컴포넌트 또한 포함한다.두번째 인수로는 의존하는 값의 배열 // useMemo를 사용하여 필터링된 리스트를 캐싱 const filteredItems = useMemo(() => { console.log('Filtering items...'); return items.filter(item => item.toLowerCase().includes(filterText...

4. useEffect: side-Effect를 처리하기 위한 Hook: 컴포넌트가 로드될 때, 외부에서 발생하는 작업을 처리하는 함수const Component=()=>{ ... useEffect(()=>{ // 할 일 }, [props, state] //const App = () => { const [count, setCount] = useState(0); // useEffect로 부수효과 처리 useEffect(() => { // 이 함수는 렌더링 후에 실행 console.log('컴포넌트가 렌더링되었습니다!'); }, []); // 빈 배열을 전달하면 이 effect는 컴포넌트가 처음 렌더링될 때만 실행 return ( Count: {count..

5. useContext: React의 Context API와 함께 사용: 여러 컴포넌트에서 전역 상태를 공유 -> props drlling(props의 수직적인 전달) 회피 가능5.1 Context: props drlling을 극복하기 위한 개념: 명시적인 props 전달 없이 하위 컴포넌트에서 사용 가능5.2 Context API의 구성 및 사용 방법- Context :: 전역 상태가 저장- Provider :: 전역 상태를 제공, 어디까지 수평적 전달을 할지 제한, 사용할 범위를 감싸고 있어야 함- Consumer :: 전역 상태를 사용-접근 3개의 절차Create :: createContext - DefaultValue 설정 (Provider 외부에서도 사용 가능 값)Provider :: Crea..

3. useRef: useState, useReducer와 동일하게 컴포넌트 내부의 리렌더링에도 상태 값 저장 가능: useRef를 통한 지정은 외부 변수(= 비제어 컴포넌트로, 변경 시에도 리렌더링 X)     -> ref객체는 js엔진 내의 Heap 내를 포인트     -> Heap 내의 객체를 바꾸는 것이기 때문에 주소 자체는 미변동const refPoint = useRef(); // 초기 값 미지정시, undefined- DOM지정 시, 초기 값은 null  || 다른 값의 경우 알아서.... // refPoint.current객체 안의 value로 해당 input안의 값에 접근 가능- 값을 리렌더링 없이 따로 저장하거나, DOM에 대한 직접 조작 시, 해당을 사용 - Ex더보기import '@/..