대가는 결과를 만든다

맨날 햇갈려서 메모겸 기록한다. const test1 = value || '1'const test2 = value ?? '1' || 는 value가 falsy한 값(null, undefiend, 0, '', NaN, false 등)인 경우 모두 '1' 출력??는 value가 null, undefined일 경우에만 '1'출력

Redux, Vuex 등 상태 관리 라이브러리의 필요성에 대한 내용은 굳이 정리 하지 않고, Redux의 구성요소와 Flow, 사용 패턴을 위주로 정리한다.다만, ContextAPI라는 동일한 역할을 수행할 수 있는 내장 기능이 있음에도 불구하고 Redux라는 상태 관리 라이브러리를 별도로 사용하는 이유에 대해선 한번 정리하고자 한다. Index0. ContextAPI 대신 Redux가 필요한 이유1. Redux의 4가지 구성 요소2. DataFlow3. Middleware 0. ContextAPI 대신 Redux가 필요한 이유- 규모가 크지 않고 단순한 어플리케이션의 경우 ContextAPI로 전역 상태 관리를 개발 가능하긴 함.- 상태 관리에 대한 구조화되고 예측가능한 코딩이 가능 (action, s..

1. input Event- 사용자가 값을 수정할 때마다(되자마자) 이벤트 발생- 키보드가 아닌 다른 수단을 사용하여 값을 변경할 때도 발생함-  ⇦, ⇨ 키와 같이 값을 변경시키지 않는 키보드 입력에는 이벤트 발생하지 않음- event.preventDefault()를 사용해도 아무런 효과가 없음 2. change Event- 기본적으로는 요소의 변경이 끝날 때 발생하지만,  input text 에서는 포커스를 잃을 때 이벤트가 발생- select, input checkbox/radio는 선택값이 변경된 직후에 이벤트가 발생함 참고 https://ko.javascript.info/events-change-input

1. Intro 어댑터란? 가장 가까이 볼 수 있는 어댑터의 예 - 충전기 타입이 micro usb-b인데 스마트폰의 usb-c라면, 충전기에 usb-c타입으로 전환하기 위한 어댑터를 끼워주어야 한다. 2. 어댑터 패턴 - 클래스의 인터페이스를 사용자가 기대하는 다른 인터페이스로 변환하는 패턴으로, 호환성이 없는 인터페이스 때문에 함께 동작할 수 없는 클래스들이 함께 작동하도록 해준다. - 인터페이스 호환성 문제 때문에 같이 쓸 수 없는 클래스들을 연결해서 사용하기 위해 사용하는 패턴 - 이미 존재하는 타입/인터페이스/구조에 다른 인터페이스에 적응 시켜주는 역할을 하는 adapter를 사용한다. - 다른 추상/인터페이스 유형의 인스턴스를 생성자에서 받는다. 어댑터가 그의 메서드들에 대한 호출을 수신하면,..

1. 유니온, 교차 타입 - 실제 사용할 때는 안 햇갈리는데 개념이 가끔 햇갈릴 때가 있음 - Card | Account - 유니온 : 교집합을 생각하면 됨! 두개 이상의 타입이 공통으로 가지고 있는 속성을 타입으로 정함 interface Card { name: string id: string pay(): void } interface Account { name: string id: string transfer(): void } // Card와 Account가 모두 가지고 있는 교집합 속성 name, id 속성이 있으면 파라미터 타입 허용한다. // (두 타입을 모두 허용한다는 의미가 되어 합집합이 아닌가? 라는 생각이 들어 햇갈릴 수 있음) const doSomething = (payment: Card..

태그 삭제하기 1. -d 옵션을 사용하여 local에서 태그 삭제 # git tag -d v1.0.0 2. 원격 저장소에 올라간 태그를 삭제하기 위해 :를 사용 # git push origin :v1.0.0

Index1. useEffect2. useRef3. useLayoutEffect4. useReducer5. useContext6. useMemo7. useCallback8. useTransition9. useDeferredValue  1. useEffect- 컴포넌트가 랜더링 될 때마다 특정 작업을 실행할 때 사용- 컴포넌트가 mount, update, unmount 됬을 때 실행됨- mount 될 때 : deps 위치에 빈 배열을 전달(deps 위치에 값을 생략하면 리랜더링 될 때 마다 실행된다.)- update 될 때 : deps 위치의 배열에 검사하고 싶은 값을 전달. 마운트될 때도 실행된다.  *update될 때만 실행되야 한다면, useRef를 이용하여 flag 값을 두고 flag.current..

React Hook useEffect has a missing dependency: 'xxx'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)해결방법1. 사용하고 있는 state를 useEffect deps 배열 위치에 추가해준다.2. setState 함수 인자로 함수형 업데이트를 사용한다. * useEffect 내부에 함수를 사용하는 경우 해결방법- 함수와 함수가 사용하는 state 값을 useEffect deps 배열 위치에 추가해준다.- useCallback을 사용하여 함수를 랩핑 정의한다. (리랜더링될 때마다 함수를 생성하게 되어 새 참조값을 받아 함수를 재실행하게 된다.)   참고: exhaustiv..