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

3월 첫째 주를 보내며 벌써 다음 주가 지나면 최종발표.. 즉 수료다.. 😇 OMG.. 손이 빠르게 나아가서 다행이지만 한 주 동안 얼마나 불편했는지~~ 빠르게 개발해야 하는 부분이 모두 끝나서 다행이었다 ㅎ.. 👀 Fact 프로젝트 피드백과 코드리뷰를 받았다. 마이페이지 UI를 수정했다. 코드리뷰를 기반으로 리팩토링 했다. 버그들을 수정했다. 유저 피드백을 위해 여기저기 우리 프로젝트를 뿌리고 다녔다. 많관부~~,, 🙂 Feeling 타입스크립트 공부가 더 많이 필요하다는 생각.. 일단 해보는데 하다보면 또 해결되는 게 참 신기하네.. 😇 모바일도 기능 확인을 잘하자... 유저 피드백을 받으니 생각보다 떨린다 😇 ~~ 🔍 Finding 이미지 용량 최적화하기 이미지 태그에 동적 경로 추가하기 React..

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..

2월 넷째 주를 보내며 미친 듯이 달린 3주.. 벌써 중간발표 끝났다. 수료까지 정말 2주?.. 정도밖에 안 남았네 시간 참 빠르다.. 👀 Fact 모바일 UI 작업을 했다. 마이페이지 피드백을 바탕으로 유효성 검사를 한층 강화했다. useEffect의 실행 시점을 다시 되짚었다. 배포 오류를 수정했다. 많은 버그를 수정했다. 🙂 Feeling 이번 버그들을 고치며 또 한층 성장한 것 같다. 기본에 먼저 충실하자는 생각. PR 전에, 커밋 전에 내가 구현한 기능에 대해서 다양하게 테스트해봐야겠다는 생각! 상대적으로 지난주보단? 덜 압박받으며 진행한 느낌. 🔍 Finding 이전 state와 비교해서 현재 state 활성화 여부 표시하기 useEffect의 실행시점 React.lazy와 Suspense A..

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..