react
1.[React-Router-dom-v.6] useNavigate로 props 전달하기 (Querystring 포함)
토이 프로젝트 진행 중 router를 이용해서 Link to가 아닌, 특정 상황에서 input button을 클릭해서 fetch된 데이터를 전달해야하는 경우가 생겼다.useNavigate를 사용해서 가공된 데이터를 state로 보내준다.state로 받아온 데이터는 st
2.[React-Router-dom-v.6] NaviLink로 현재 location에 active css 적용하기
Link 컴포넌트가 아닌 NavLink로 현재 location의 pathname를 확인하여 해당 pathname과 일치할 경우 커스텀한 css 적용하기 (ex. font-bold / color 바꾸기 등등)메뉴 컴포넌트의 상단에서 pathname별 react-route
3.[React Typescript] 이미지 데이터 엑박 처리, img onError={}
토이프로젝트 진행시 fetch로 가져온 data.img가 404 에러, 엑박으로 주소가 잘못된 img를 가져오는 경우가 발생됐다. 프로젝트 완성도를 떨어뜨리지 않기 위해 에러시 보여주는 img를 생성해 주어야 한다.img 태그에 이미지 404 에러시 다른 이미지를 보여
4.[TIL] Invalid hook call. Hooks can only be called inside of the body of a function component. & You might be breaking the Rules of Hooks
토이 프로젝트를 진행하면서 auth 관련하여 로그아웃 함수를 모듈로 분리하여 사용해야할 경우가 생겼다.하지만 콘솔 창에서 React Hooks must be called in the exact same order in every component render 라는 에러
5.[Font Awesome v.6] React에서 Font Awesome 무료 아이콘 사용방법
개인 프로젝트를 진행하면서 가장 많이 쓰는 icon library는 Font Awesome이다.컴포넌트 형태로 쉽게 사용할 수 있다.크기와 애니메이션도 쉽게 적용 할 수 있다.svg형태로 렌더링, 다운로드가 가능하므로 다른 이미지 작업(favicon, 로고 만들기 등)