문제점 백엔드와 통신까지 잘 연결했기에 더 이상의 난관은 없을 거라 생각했지만, 사진이 늦게 렌더링 되면서 사용자 경험이 저하되는 문제가 생겼다. 대부분 페이지가 마운트 될 때, 빈 화면이었다가 갑자기 배경이미지가 뜨는 현상이 일어났다. 예쁘게 다 완성해 놨는데, 사진 뜨는 속도가 느려서 완성도가 확 떨어진다는 게 너무 속상하고 스트레스였다. 물론 이렇게 한번 깜빡거리면 그 뒤로는 안 그랬지만, 그래도 너무 신경 쓰이는,,, 해결 시도 1) 이번 프로젝트에서는 이미지를 클라이언트 폴더 내부에 저장했기에, 용량이 너무 커서 그런가 싶기도 했다. https://squoosh.app/ Squoosh Simple Open your image, inspect the differences, then save ins..

문제점 아이폰에서 달력화면의 각 요소들이 밀리는 문제가 발생했다. 밀리는 양상이 position의 문제라는 생각이 들어서 relative와 absolute를 체크하고, 조정하는 것을 며칠 동안 반복반복반복... 해도 해결이 안 됐다. 무엇보다 답답했던 것은 갤럭시, 맥북, 윈도에서는 멀쩡함! 왜 아이폰에서만 그런 것인가에 대한 고찰을 하던 중... 해결 병멘과 쯔란 뭐시기 덮밥을 먹던 중 이에 대한 얘기를 나눴는데, 넌지시 형이 이런 말을 했다 position쓰면 브라우저마다 다르게 나오잖아 마사카! 그러면 반응형이 된다면 해결이 되려나?! 바로 실행에 옮겼다. 기존의 코드이다. 아주 position과 top으로 개떡같이 해놨다. 라이브러리를 커스텀해서 달력을 구현했기에 내가 할 수 있는 최선이었다. t..

react-query는 요청을 전송하는 로직이 내장되어 있지 않고, 단순히 요청을 관리하는 로직을 제공하기에, 내가 요청 전송 로직을 따로 생성해줘야 한다. 궁금해!궁금한 점이 생겼다. 보통의 http 요청 로직에서는 try-catch문을 통해 에러 핸들링을 했었다. 근데 리액트 쿼리는 isError와 error라는 메서드를 통해 에러 정보를 제공해 준다. 그러면 try-catch문을 따로 사용하지 않아도 되는 것.. 인가?? 아니 당연한 거 같기도 한데.. 맞나?! 실험jsonplaceholder의 잘못된 경로로 요청을 보내봤다. try-catch문을 통해 error가 출력되게 했다. 늘 먹던 대로 하던 대로 에러가 출력되는 것을 확인할 수 있다. 이제 진짜 궁금한 것을 확인해 봤다. try-catch..

Zustand를 사용하는 이유 프로젝트에서 닉네임을 보내주는 api 로직이 하나인데, 닉네임을 다른 컴포넌트에서도 띄워야 했다. 그렇기에 해당 값을 전역적으로 관리할 필요를 느꼈고, 이에 따라 상태관리 라이브러리를 도입하게 됐다. 상태관리 라이브러리를 처음 사용해보는 만큼, 간단하고 빠르게 사용할 수 있다는 Zustand로 결정하게 되었다. https://zustand-demo.pmnd.rs/ Zustand zustand-demo.pmnd.rs 주스탠드 공식문서를 참고했다. 사용법 npm install zustand Zustand를 설치해 준다. import { create } from 'zustand' const useStore = create((set) => ({ count: 1, inc: () =>..

뭔가 내가 저렇게 검색했었던 것 같아서 제목을 이렇게 지었다. 데이터 배열을 map함수로 쪼개서 렌더링 하는 코드이다. onClick을 적용했기에, 분명 클릭했을 때 console.log(“ㅎㅇ”)가 실행될 거라고 생각했지만, 항상 실행이 안 됐다. 그래서 위와 같은 방식으로, div 태그를 한번 더 씌우고 div에 onClick 이벤트를 적용했었는데, 오늘 해결책을 알았다!.! 일반 HTML 요소에 직접적으로 이벤트 핸들러를 추가할 때는 해당 요소에 이벤트 리스너를 직접 연결하고, 클릭 등의 이벤트가 발생하면 이벤트 핸들러가 실행되지만! 리액트 컴포넌트는 클릭과 같은 이벤트를 처리하도록 내장된 기능이 없으며, 대신 props로 전달하여 처리할 수 있도록 한다고 한다. 즉! 지금까지 내가 컴포넌트에 적용..

마우스를 올려놓으면, hover 효과처럼 배경색이 사라지는 오류가 발생했다. 모바일 기준으로도 똑같이 배경색이 사라지고 멈추는 걸 보니 hover가 맞다고 생각했다. 의아한 점은 모바일에서 hover가 적용되지않는다는 것을 깨닫고.. 분명히 hover를 전부 제거했기 때문이다! 해결을 위해 알아보다가 처음 알게 된 것인데, 개발자도구의 :hov를 클릭해서 hover를 적용하면 hover일 때 적용되는 css를 알 수 있다. 적용 후 찾아보니 이런 코드가 들어있는 것을 확인할 수 있었다. 뭔가 익숙한걸 보니 내가 쓴 게 맞는 거 같았다. 그러다 문득 라이브러리를 커스텀했던 게 떠올랐다. 라이브러리에서 기본적으로 제공하는 hover 효과를 안 보이게 하려고 위와 같은 코드를 썼었던 것이다. 아무 생각 없이 ..