react

Next.js --typescript를 세팅하고 절대경로를 적용을 하였다. Advanced Features: Absolute Imports and Module Path Aliases | Next.js 절대경로를 설정하고 src/pages/products/[slug].tsx에 getStaticProps와 getStaticPaths가 있는 파일에서 절대경로를 통해서 컴포넌트를 가져와서 사용했다. fs 등등 여러개의 모듈을 찾을 수 없다는 에러메세지가 나온다. 무엇 때문일까? Next.js의 문제가아니었다. 오류에도 나와있는데 twin.macro 라이브러리 때문에 발생하는 문제였다. https://twitter.com/HamatoYogi/status/1428225954531393537 https://github.com/ben-rogerson/twin.macro/discussions/516 현재 Next.js 12버전부터는 컴파일러를 SWC를 … Continued

styled-bootstrap-grid에서 media를 통해서 ${media.sm`css`}이렇게 있을때 내부에서 theme props를 사용할때 typescript에서는 에러가 뜨는데 이것을 해결하는 방법

이렇게 설정이 되어있으면 StyledDiv 컴포넌트를 사용할때 font-size: 12px로 설정된다. 상속받아서 사용해도 상속받는 원본 여기서는 부모컴포넌트의 토큰화된 클래스명이 먼저들어가서 스타일 속성이 제대로 적용이 되지 않는 문제가 생긴다. 검색으로도 풀리지 않아서 어떻게해야 할까 고민이다. 리액트 앱을 재실행하니까 문제가 해결되었다. styled-components가 클래스를 부여하는 과정에서 오류가 생긴 것으로보인다.

styled-components를 사용하면서 ThemeProvider를 사용해서 DarkTheme, LightTheme를 구본해서 사용하고있다. 이런식으로 props 내부의 theme 속성을 가져와서 사용할 수 있다. 그런데 이것을 일반 React 컴포넌트에서 데이터로 사용하고 싶은데 그렇게 하려면 어떻게 해야할까? https://styled-components.com/docs/advanced#getting-the-theme-without-styled-components 위의 styled-components 공식 문서에서보면 HOC에 개념에서 withTheme를 통해서 일반 React 컴포넌트내부에서 theme 속성에 값을 넣어서 사용할 수 있다.

마치 디그다와 같이 위아래로 애니메이션으로 처리되고 포함하고있는 컴포넌트가 변경되는 컴포넌트가 필요해졌다. 그래서 디그다를 가져다 사용할꺼다! Yes !, it is Diglett…

유틸성 기능을 가진 캘린더를 제작해야하는 일이 생겼다. 웹에서 제공해주는 React 서드파티 라이브러리들중에 내가 원하는 기능을 가진 캘린더가 딱히 없어서 제작하면서…

구현하고싶은 것은 Modal 을 구현하고싶다. 모달팝업이 띄워졌을때 바깥 영역을 클릭 하였을 때 이벤트를 발생시켜서 모달팝업의 상태를 close 로 변경하고싶다. 바깥 영역을 클릭 이벤트를 구현하는 방법은?

React Hooks를 사용하면서 컴포넌트 내부에 window mouse position 값을 계속해서 작성해서 보여주고싶었다. 그런데 컴포넌트 내부에서 값을 구하기위해서 위와 같이 작성하니…