Sign in

dev

it dev nextjs badsetstate

Cannot update a component (xxx) while rendering a different component (xxx)

위의 웹 페이지에서 왼쪽의 컴포넌트 목록에서 각 메뉴를 클릭하면 오른쪽의 화면의 내용이 전환된다. 웹 버전을 모바일 버전으로 변경을 하게 되면 아래처럼 변환되고 좌측 상단의 메뉴 버튼을 클릭하면 메뉴가 표출된다. 지금이야 잘 작동을 하지만 최초 버전에서 제목의 에러 메시지를 만나게 되었다. Cannot update a component (`Main`) while rendering a different component (`MenuBar`). To locate the bad setState() call inside `MenuBar`, 화면의 컴포넌트 구조는 단순하다. 웹 버전일 때는 아래와 같고 모바일 버전에서는 다음과 같다. 문제는 모바일 버전에서 목록을 클릭할 때 마다 Main 컴포넌트의 인덱스가 변하..
wono | discuss |
it dev nextjs swr

React-Query vs SWR

블로그 이전하였습니다. React-Query vs SWR 비슷하지만 다른 react-query와 swr를 컨셉을 이해하며 비교해보자 yoon-hae-min.github.io 기존 글 서론 둘이 비교하기 앞서 왜 이런 라이브러리를 쓰는지부터 보고 가자 React에서 서버로부터 데이터를 가져오거나 전송해야할때 fetch Api를 사용하거나 axios를 사용하고는 한다. 이를 사용해서 충분히 서버와 데이터를 주고받을 수 있으나 규모가 커지면서 데이터 처리, 에러핸들링과 같은 부가적인 요인들이 많아지게 된다. 직접 구현해도 되지만 라이브러리를 이용해서 좀 더 쉽게 처리할 수 있다. 공통점 1. 데이터 요청 및 관리를 하기 쉽게 만들어 준다. 2. 캐시를 통해 api 호출을 줄이고 성능(UX)를 향상할 수 있다...
wono | discuss |
it dev git

커밋 메시지 템플릿 설정하고, 짱편하게 커밋하기

커밋 컨벤션(commit convention)프로젝트 참여자들이 일관적인 커밋 메시지를 작성하기 위한 규칙, 가이드라인을 의미한다.1. 가독성 향상으로 작업 내용 파악하기 쉬움 (커뮤니케이션 효율 증대)2. 변경 이력 추적 용이  Conventional CommitsA specification for adding human and machine readable meaning to commit messageswww.conventionalcommits.org 위 사이트에서는 커밋 메세지를 구성하는 방법을 아래와 같이 요약하고 있다: [optional body][optional footer] 1. 변경 사항 유형으로, 해당 내용만 봐도 어떤 커밋의 내용인지 확인하기 위해 명확하게 작성해야한다.feat새로운 ..
wono | discuss |