Today, What I learned? 내 파트는 아니었지만 급하게 좋아요 관련 버그를 수정하게 되었다. 담당하지 않았던 파트라 코드를 들여다볼 일이 많지 않았는데 오히려 좋아!.. 이번 버그는 새로고침 했을 때 하트가 유지되지 않는 버그였다. 분명 이전에는 되었던 것 같기도 한데 그 사이 수정이 되면서 뭔가 버그가 생긴 듯.. 🤔 원인 파악 myProjects 컬렉션에 현재 프로젝트 id 값이 확인되어야만 하트를 채우는 isLike가 판단될 수 있는데, 새로고침 했을 때 useQuery에서 데이터를 받아오는 시간이 있어서 처음에 undefined로 값이 들어가 버리는 게 문제인 듯했다. 그래서 새로고침하고 하트가 풀리니까 다시 누르면 숫자가 1씩 늘어나는.. 이상한 버그.. 로그를 보면 true로 m..

Today, What I learned? 유저 피드백을 반영하여, 기존의 공유 기능에서 카카오톡 공유를 추가하기로 했다. (아무래도 많이 쓰이니까) 이전 프로젝트에도 구현되어 있던 부분이라 (담당하진 않음) 꽤 많은 참고를 했음에도?.. 조금 다르게 적용하려다 보니 오류가 좀 발생해서 기록.. 사전 작업 일단 카카오 디벨롭스에서 앱 등록과 플랫폼에 도메인 등록이 필요하다. 앱을 등록하면 앱 키를 확인할 수 있고, 여기서 필요한 값은 자바스크립트 키값. env 파일에 추가해 주자! 또 플랫폼에서 Web에 도메인을 추가해 준다. 나는 배포주소랑 로컬호스트를 추가해 주었다. 추가적으로 PR시 vercel 프리뷰에서 확인하고 싶다면 프리뷰 주소를 추가해줘야 한다. index.html index.html의 헤더 ..

Today, What I learned? 주말쯤에 디자인 수정사항을 반영했던 추가 기능인 인풋 태그 클리어 버튼이 제대로 동작하지 않는 이슈.. 버그를 해결하다가 제어 컴포넌트와 비제어 컴포넌트에 대해서도 찾게 되어서 한 번 정리해 본다. 원인 파악 일단 처음은 동작이 잘 되는데, 한 번 지우고 난 뒤부터 제대로 동작이 되지 않았다. 그래서 로그를 찍어보니.. state는 변경이 잘 되었지만 input창에 비어버린 값이 다시 반영이 안 되고 있는 상태.. input 태그에 state의 값이 즉각적으로 반영이 되지 않고 있다는 것을 확인했다. 원인은 바로 defaultValue !.. 마이페이지는 대체로 수정하는 영역이기 때문에 무의식적으로 value 대신 defaultValue를 추가했던 것 같다. (기..

Today, What I learned? 지금 프로젝트에서 사용되고 있는 리액트 쿼리의 staleTime과 CacheTime, invalidateQueries에 대한 개념이 정립되어 있지 않은 것 같아서 한번 정리하면서 공식문서도 읽어보고.. 미래의 나를 위한 기록!.. 공식 문서 링크는 이쪽이다. https://tanstack.com/query/latest/docs/react/overview Overview | TanStack Query Docs TanStack Query (FKA React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it ma..

Today, What I learned? 사실상 라디오라는 콘솔은 라디오버튼에 해당하는 경력 부분 컴포넌트에 들어가 있음에도 불구하고, 전체적으로 렌더링이 되는 것을 알 수 있었다. 부모컴포넌트의 상태가 변경되었기 때문에!... 이런 쓸데없는 렌더링 횟수를 줄이고자, React.memo를 적용하기로 했다. UserTopInfo -> 체크 영역을 감싸는 컴포넌트 -> 체크박스/라디오 버튼 컴포넌트 형태로 구성이 되어있어서, 클릭의 주체가 되는 가장 내부 컴포넌트인 체크박스와 라디오 버튼 컴포넌트에 memo를 적용했다. 둘 다 userTopInfo에서 전역 상태인 userInfo라는 props를 공통적으로 받고 있다. (유저가 수정한 정보에 대한 부분!) profiler 정보 수정과 관련된 UserInfoT..

어떤 에러? 프로필 이미지가 사용되는 어느 곳이던 나타나던 이 403 에러.. 프로필 이미지를 제대로 못가져와서 그런 듯 보였다. 그래서 프로필 이미지가 빈번하게 제대로 뜨지 않았다. 이렇게 비어있는 이미지를 확인해보면 src가 비어있는 것을 볼 수 있다. 원인 파악 이 문제는 구글로 로그인한 계정에만 나타나는 현상.. 403 에러는 서버에 요청을 했지만 권한상의 문제로 거절되었다는 에러라는데, 보통 다른 도메인에서 호출할 때 발생한다고 한다. 다른 도메인에서 온 요청임을 확인하고 거절했단 것이다. 해결 과정 https://stackoverflow.com/questions/56242788/http-403-on-images-loaded-from-googleusercontent-com HTTP 403 on ..

Today, What I learned? 마이페이지의 UI가 꽤.. 변경이 되었다. 기존과 다르게 기술 스택별 이미지를 추가해야 하는데, 일일이 import 해올 수는 없으니.. 동적으로 이미지 경로를 지정하는 방법에 대해서 찾아보게 되었다. 엑스박스를 보고 팀원분이 require라는 힌트를 주셨다. 기존 상태 각각 기술 스택에 해당하는 아이콘 이미지 적용을 위해 아래와 같이 코드를 작성했다. 하지만 모조리 엑박 ㅠ... require() 적용 require를 아래와 같이 적용해보았을 때, 이미지가 잘 뜨는 것을 볼 수 있다. 블로그들을 보다보니 .default를 붙여야 엑박이 안 뜨는 경우가 또 있던데, 나 같은 경우는 오히려 붙이니까 엑박이 떴다. 케이스 바이 케이스인지 모르겠지만? require만 ..

Today, What I learned? 라이트하우스의 지표를 보고 프로필 이미지의 확장자를 webp로 변경하는 것이 좋겠다고 판단되어서.. 다른 이미지 확장자를 바꾸는 과정에서 프로필 이미지 확장자도 화면공유를 통해 팀원 분이 변경해 주셨지만, 그 과정에서 내가 또 실수한(!) 코드가 있어서 정리해보려 한다 ^^ㅎ 우선 현재 라이트 하우스는 이렇다. 이미지 리사이즈 우리 프로젝트에서는 이미지 사이즈 최적화를 위해 react-image-file-resizer 라는 라이브러리를 이용하고 있다. 이 라이브러리는 확장자를 jpg, png 뿐만 아니라 webp도 함께 제공한다. 기본적으로 적용되어 있던 리사이즈 포맷은 아래와 같다. const resizeFile = (file: File) => new Promi..

Today, What I learned? 프론트에서 성능 최적화를 어떻게 할 수 있을 것인가?를 요새 고민하고 찾아보고, 여러 글들을 읽어보고 있다. 그 방법 중 하나인 불필요한 렌더링 줄이기!.. 렌더링을 줄이는 방법 중 하나인 memoization에 대해 정리해 본다. memoization memoization은 리액트에만 해당되는 기술은 아니다. 컴퓨터가 동일한 계산 작업을 반복해야 할 때, 이전의 계산한 값을 메모리에 저장해 놓고 사용하여 속도를 높이는 기술이다. 쉽게 말해서 반복 작업 해야 할 부분을 메모를 해놓고 가져다 쓰는 느낌? 보통 애플리케이션의 최적화를 위해서 많이 사용된다. 리액트에서의 memoization 방법은 크게 세 가지. React.memo, useMemo, useCallba..

Today, What I learned? 작은 기능을 추가하다가 null값이 포함되어서 원래 되던 기능이 안 되는(!) 일이 발생했다. 발견하신 분이 바로 해결해 주셨지만, 마침 그 부분이 useEffect를 사용했던 부분이고.. 내가 useEffect의 실행 시점에 대해서 잘못 알고 있었던 것 같아 정리한다! useEffect의 실행 순서 나는 기존에 useEffect가 제일 먼저 실행된다고 생각했었는데, (정확히 왜였는지는?..🤔) useEffect 같은 사이드 이펙트는 jsx가 들어있는 return문이 끝나고 실행된다. 아래와 같이 콘솔을 추가해서 확인해보니 다시 알게 된 것과 같이 컴포넌트가 렌더링 되는 return문이 먼저 실행되고 useEffect의 콘솔이 찍히는 것을 확인할 수 있었다. co..