검색 같은 곳에서 state의 변화에 따라 자동으로 검색이 되는 경우에 사용하면 좋다

헤더에 메뉴들이 있고 그 메뉴는 아이콘과 메뉴 이름 으로 구성된 버튼이다 메뉴 버튼을 공통으로 사용하고 메뉴 이름과 아이콘 컴포넌트를 주입받는 메뉴 컴포넌트를 만들었다 그런데 메뉴에 마우스를 올렸을 때, 아이콘의 색이 바뀌어야 한다 하지만 아이콘 컴포넌트는 외부에서 주입을 받는 상황에서 전달받은 컴포넌트의 props 제어를 어떻게 해야할까? 위와 같이 IconComponent를 함수로 전달 후 전달을 받은 컴포넌트에서 props를 직접 제어할 수 있다

Quill 에디터는 툴바의 정렬을 사용할 때, 왼쪽 정렬 시 아무것도 설정되지 않아서 부모의 정렬을 따라가게 된다 예를 들어 기본적으로 가운데 정렬이 되어있다면 왼쪽정렬을 해도 표시되는 것은 가운데 정렬로 표시된다 따라서 왼쪽 정렬을 강제할 수 있게 만들어야 했다 왼쪽 정렬을 제외한 나머지 정렬들은 "ql-align-center"와 같이 해당 태그에 정렬옵션에 따른 클래스가 붙는다 그래서 global css에서 해당 옵션들에 대해 text-align을 지정해주면 된다 하지만 왼쪽 정렬은 어떤 클래스도 붙지 않기 때문에 ql-align-left 를 붙여주는 것이 이번 목표였다 당연히 나와 같은 고민을 했던 사람이 있을 것이라 믿고 구글링을 해서 해결할 수 있었다 참고 https://github.com/quilljs/quill/issues/1969#issuecomment-495140297

이슈 1. React-router-dom으로 설정된 경로에서 새로 고침시 404 원인 웹서버(nginx)에서 루트 경로가 아닌 하위 경로와 리액트 앱을 연결하지 못해서 발생 조치 nginx 설정 수정 이슈 2. Uncaught SyntaxError: Unexpected token '` 를 추가 참고 https://tecadmin.net/solving-react-404-error/ https://yoon-dumbo.tistory.com/entry/Error-%EC%A0%95%EB%A6%AC-React-Uncaught-SyntaxError-Unexpected-token https://stackoverflow.com/questions/67554286

https://github.com/atlassian/react-beautiful-dnd/issues/1881 이슈 react beautiful dnd로 드래그 앤 드랍 UI를 구성하던 중 드래그 중 드래그한 블럭의 위치가 이상한 곳으로 이동되어 위치하는 현상이 발생하였다 원인 모달 창안에서 css를 absolute, transform: translate(-50%, -50%) as I needed to use top: 50%; left: 50%를 주고 사용하고 있었는데 이 경우에 offset을 잡지 못하는 현상이었다 조치 비슷한 현상을 겪고 이슈를 올린 곳에 있는 답변을 보고 해결하였다 https://github.com/atlassian/react-beautiful-dnd/issues/1881#issuecomment-872584015 특이 사항 현재 Typescript에서 provided.draggableProps.style.left는 존재하지

함수의 리턴 타입은 타입스크립트 유틸 타입인 ReturnType를 이용해서 함수의 리턴타입을 정의할 수 있다 hooks를 props로 내려 받고 싶을 때 아래와 같이 사용할 수 있다

컴포넌트와 컴포넌트에 사용할 관련 로직을 반복해서 사용해야 되는 경우 hook으로 묶어서 제공할 수 있다 사용 예 useContextMenu.tsx 에서 Menu를 포함한 이유는 Menu와 관련된 로직을 한번에 제공하기 위함이다 뗄수 없는 관계에서 사용하면 좋을 것 같다 만약 컴포넌트가 hook안에 포함되는 것을 원하지 않는 다면 따로 분리 후 컴포넌트를 import 하고 hook에서 return으로 한번에 제공할 수도 있다 코드 https://github.com/TaehwanGo/react-playground/commit/54e26da75f9b5f7167f585b22bf69381158af45c

renderToStaticMarkup 메소드를 사용하면 정적 html만 생성되기 때문에 onClick 같은 이벤트핸들러를 사용할 수 없다 그러나 querySelector 등을 이용해서 html에 접근 후 해당 html에 data-something같이 data- attribute에 있는 데이터로 뭔가를 조작할 수 있다 작성한 코드 ht

TL;DR; react-dom/server 의 renderToStaticMarkup() 메소드는 server side (node 위에서 동작) 환경이 아니어도 정적 HTML을 만드는데 사용할 수 있다 지난 포스팅에서 react-dom/server 를 사용해서 string으로 element를 사용하는 것 대신 react component를 사용해보았다 https://velog.io/@gth1123/react-Swiper-custom-renderBullet 이번엔 react-dom/server 가 무엇인지 알아보자 https://reactjs.org/docs/react-dom-server.html Overview These methods are only available in the environments with Node.js Streams: renderToPipeableStream() renderToNodeStre

Swiper는 slide 또는 carousel 을 표현하는 UI 라이브러리이다 https://www.npmjs.com/package/swiper react에서 swiper로 custom pagination 버튼을 만들고 싶은 경우 공식 문서 예제는 아래와 같이 string으로 html을 표현하는 것을 보여준다 https://codesandbox.io/p/sandbox/swiper-react-pagination-custom-forked-db0zyr?file=%2Fsrc%2FApp.jsx&selection=%5B%7B%22endColumn%22%3A5%2C%22endLineNumber%22%3A21%2C%22startColumn%22%3A1%2C%22startLineNumber%22%3A14%7D%5D 그런데 react 컴포넌트를 사용하고 싶다면 아래와 같이 사용할 수 있다 https://github.com/nolimits4web/swiper/discussions

이슈 storybook에 globalStyle을 적용하는 도중 아래와 같은 에러가 발생했다 해결 .storybook/preview.cjs 파일의 확장자를 jsx로 변경 preview.cjs -> preview.jsx storybook에서 globalStyle 설정 .storybook/preview.jsx 에서 아래와 같은 코드 추가 참고 https://voltnuna.tistory.com/273 https://github.com/storybookjs/storybook/issues/18641

CRA를 사용하는 경우 npm i sass 로 패키지 설치 후 바로 사용할 수 있다 node-sass도 있지만 m1 맥북에선 sass만 지원된다

// props로 전달하는 경우 text="abc\n가나다" // 줄바꿈 안됨 text={"abc\n가나다"} // 줄바꿈 됨 추가로 아래의 CSS 설정 필요

:first-child is unsafe on server side rendering.

사용 시 반드시 최상위 컴포넌트(e.g., App.tsx)에서 위 css를 import 해야 함

react 특정 path에 배포 요즘 front-end 라이브러리 또는 프레임워크에선 pjax 방식으로 라우팅 관리를 할 수 있다 https://poiemaweb.com/js-spa pushState + ajax react-router-dom도 같은 방법으로 구현되어 있을 것이다 이번에 특정 URL path가 react의 home이 되도록 해야하는 이슈가 있었다 e.g., www.some-domain.com/course/study 처럼 /course/study가 home이 되어야 했다 특정 path로 home 설정하기 CRA를 사용하면 환경변수로 PUBLIC_URL을 설정할 수 있다 이것을 우리가 원하는 path(/course/study)로 지정하면 될줄 알았다 하지만 react-router-dom에서 push를 '/'를 home으로 해주고 있었기 때문에 navigate 등 경로에 영향을 주는 모든 곳에 PUBLIC_URL을 붙여

공용 링크 컴포넌트에 라우터로 데이터를 전달할 때 타입을 제네릭으로 받고 싶었다 이게 될까 하면서 제네릭으로 만들어봤는데 컴포넌트도 제네릭으로 타입을 받을 수 있다는 것을 알게 되었다 라우터로 데이터를 전달하는 방식은 웹에서 좋지 않은 것 같다(새로 고침 시 고장나기 때문) react-query나 SWR같은 서버 캐시 라이브러리를 사용하면 이런 문제를 방지할 수 있다

서버에서 가져온 캐싱된 데이터를 사용해서 useState의 초기값으로 넣어 줄 수 있다 useEffect안에서 setState를 이용해서 초기값도 설정해주곤 했는데 이렇게 해주는 것이 가독성이 더 좋은 것 같다 참고 책: react native를 다루는 기술

setInterval Type react에서 setInterval의 아이디를 useRef로 받으려 했으나 타입이 NodeJS.Timer라는 타입으로 setInterval 리턴이 표시되어서 그것으로 지정하면 되지 않았다 그래서 window.setInterval로 수정 후 아래와 같이 지정할 수 있었다 clearInterval 일반적으로 setInterval안에서 일정 조건이 되면 clearInterval을 호출해서 멈추게 할 수 있다 무한루프 해결 여기서 만약 멈추지 않고 계속 타이머가 실행된다면 setInterval 앞에 flag를 달아서 early return 하면 된다

useEffect의 return 즉, cleanup 함수가 실행되는 조건이 화면에서 해당 컴포넌트가 보이지 않게 되는 것으로 알고 있었는데 아니었다 화면에서 없어질 때(go home 링크를 눌러서 해당 페이지가 더 이상 보이지 않게 될때) 실행되는 것도 맞지만 useEffect가 업데이트 될 때(dependency array에 있는 값이 변화할 때)도 cleanup 함수가 실행된다 참고 https://reactjs.org/docs/hooks-effect.html#example-using-hooks-1