Frontend176 [ 타입스크립트(TypeScript) ] ComponentProps로 props type 선언하기 📍 ComponentProps로 props type 선언하기 React에서 Component를 작성하다 고차 컴포넌트를 사용하기 위해 상위 단계에서 props를 받고 하위 단계에서 최종적으로 컴포넌트를 return 할 때 props의 타입을 명시해줘야 하는 경우가 있다.(그렇지 않으면 타입스크립트가 props의 타입을 모르기 때문에 컴파일 에러를 일으킨다.) 그럴 때 props의 타입을 전부 가져와서 재 선언하는 것은 번거롭다. 이럴 때 React.ComponentProps를 사용하면 타입을 다시 작성하는 번거로움을 피할 수 있다. React.ComponentProps의 자세한 설명은 다음과 같다. 만약, Ref를 사용하면 ComponentPropsWithRef를 사용하자. /** * NOTE: pref.. 2022. 12. 21. [ 자바스크립트(JavaScript) ] 알아두면 도움되는 npm commands 📍 알아두면 도움되는 npm commands 이번에 알아볼 npm 명령어는 npm run ...처럼 매번 사용되는 것은 아니지만, 마우스로 조작하기 번거로울 때 도움되는 명령어들이다. npm docs [package-name]: 해당 패키지의 docs를 볼 수 있다. 예를 들어 npm docs lodash를 입력하면 lodash docs를 볼 수 있다.(해당 패키지가 프로젝트에 설치되어 있지 않아도 볼 수 있다.) npm repo [package-name]: 해당 패키지를 GitHub에서 볼 수 있다. 예를 들어 npm repo lodash를 입력하면 GitHub의 lodash/lodash페이지를 볼 수 있다. (해당 패키지가 프로젝트에 설치되어 있지 않아도 볼 수 있다.) npm outdated: pa.. 2022. 12. 13. [ CSS ] parents div에 의해 unclickable 하게 되는 children div를 clickable하게 만들기 📍 parents div에 의해 unclickable 하게 되는 children div를 clickable하게 만들기 제목이 어려울 수 있지만 background: transparent인 Parent Div 밑에 clickable 할 수 있는 Child div가 있을 때 클릭하는 방법을 작성하려고 한다. 기존에는 부모 Div만 클릭 할 수 있어 자식 Div는 클릭할 수 없었지만 css의 pointer-events 속성을 이용하여 해결 할 수 있었다. 글로 이해하기 힘들다면 하단의 그림을 보자.(그림은 발(🦶🏾)로 그렸다.) 내가 해결한 방법은 부모 Div에 pointer-events: none을 주고, clickable 할 target Div에 pointer-events: all을 주자. 추가로 poin.. 2022. 11. 23. [ 자바스크립트(JavaScript) ] filter + join 메서드로 가독성있는 코드 작성하기 📍 filter + join 메서드로 가독성 있는 코드 작성하기 string | null 타입을 가지는 a, b를 사용하여 a·b로 나타내야한다. 만약, 둘 중에 하나라도 null일 경우 ·를 표시하지 않고, string 타입만 나타내야한다. 예를 들어 a = 'foo'이고, b = 'bar'일 때 둘 다 값이 존재하면 foo·bar로, a타입만 존재하면 foo, b타입만 존재하면 bar, a와 b 둘 다 존재하지 않는 경우 null 혹은 ''을 나타내야한다. 이럴 때 어떻게 가독성 있게 코드를 작성할 것인가? 리액트에서 사용할 때 AS-IS는 조건식과 join 메서드를 사용하여 a && b ? [a, b].join('·') : a || b로 나타냈는데, 가독성이 너무 떨어졌다. 그래서 TO-BE 처럼 .. 2022. 11. 15. [ 리액트(React) ] && 대신 삼항연산자 사용하기 📍 && 대신 삼항연산자 사용하기 리액트로 렌더링 view를 그릴 때 종종 && 연산자를 이용해 조건부 렌더링을 할 때가 있을 것이다. 여담으로 &&연산자는 Logical AND, 단축평가(short circuit evaluation)라고 하며, 일반적으로 왼쪽에서 오른쪽으로 피연산자를 평가하여 처음 만나는 연산자가 falsy인 경우 false를 반환하고, 모든 연산자가 truthy 한 경우 마지막 연산자를 반환하는 개념이다. falsy는 Boolean context로 변경될 때 false로 평가되는 값으로 JS에서는 false, 0, -0, "", null, undefined, NaN가 있다. truthy는 falsy와 반대로 Boolean context로 변경될 때 true로 평가되는 값으로 JS에서.. 2022. 11. 7. 이전 1 2 3 4 5 6 7 8 ··· 36 다음
