Frontend168 [ 자바스크립트(JavaScript) ] Pre & Post scripts를 알아보자 📍 Pre & Post scripts를 알아보자 SEO 최적화를 위해 Sitemap 작업 중 package.json 파일 내부에 postbuild script를 생성하는 작업이 있었다. 이전까지는 pre와 post prefix를 사용하는 일이 거의 없어 이것들이 하는 역할을 자세히 알지 못했는데, 이번에 알아보고자 npmjs 공식문서를 살펴봤다. 공식문서에서는 pre와 post scripts를 다음처럼 정의하고 있었다. To create "pre" or "post" scripts for any scripts defined in the "scripts" section of the package.json, simply create another script with a matching name and ad.. 2023. 1. 3. [ 타입스크립트(TypeScript) ] Incorrect (variable) is specified more than once, so this usage will be overwritten 에러 해결하기 📍 Incorrect (variable) is specified more than once, so this usage will be overwritten 에러 해결하기 typescript로 작업하다 다음과 같은 오류를 마주했다. 오류가 발생한 원인은 getListHref를 props로 내려준 위치가 잘못되었기 때문인데, 바로 {...props} 앞에 선언했기 때문이다. 하단의 AS-IS코드를 살펴보면 {...props} 앞에 getListHref를 선언했는데, 이것은 의미가 없다. 왜냐하면 ...props로 내려오는 getListHref을 최종적으로 적용하기 때문에 처음에 선언한 getListHref를 항상 override하기 때문이다.이럴 때는 TO-BE 코드처럼 내가 적용하고 싶은 getListHre.. 2022. 12. 28. [ 타입스크립트(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. 이전 1 2 3 4 5 6 ··· 34 다음
