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

Today, What I learned 튜터님의 상세한!.. 거의 전수 테스트 급의 피드백을 통해 발견한 버그.. 버그 해결 과정을 기록해 본다. 현재 내가 작업한 마이페이지에는 이런 버그가 있다. 기존 유저 정보와 달라졌을 때만 버튼을 활성화시켜야 하는데, 유효성 검사에 그 부분을 빼먹어서.. 수정했느냐의 여부에 상관없이 계속해서 서버에게 요청을 할 수 있는 상태였다!!... ((OMG)) 이런 의미 없는 리소스 낭비를 막는 일이야말로 프론트엔드로서 해야 할 일... 😇 State 추가하기 해결을 위해 초기 렌더링 시 저장된 유저의 정보를 받아올 state를 하나 만들었다. const [defaultUserInfo, setDefaultUserInfo] = useState(defaultInfo); 좀 여..

Today, What I learned? 우리 프로젝트에 적용되어 있는 코드분할에 대해서 알아보려 한다. 내가 적용한 부분이 아니었고, 나도 처음 접한 것이라 아직 생소한 부분!... 리액트 공식문서에도 이 부분이 잘 설명되어 있다. https://ko.reactjs.org/docs/code-splitting.html 코드 분할 – React A JavaScript library for building user interfaces ko.reactjs.org 코드 분할은 앱을 지연로딩(lazy loading) 할 수 있도록 도와준다. 사용자가 필요한 코드를 그때그때 불러오기 때문에 초기 로딩에 필요한 코드가 줄어들고, 성능 향상에 많은 도움이 된다. React.lazy React.lazy 함수를 이용해서 ..

Today, What I learned? 지난 글이 길어져서 이어서 작성하는 프로젝트 리스트 필터링 여정~ 오늘은 3중 중첩 객체의 값을 통해 프로젝트를 필터링하는 과정에 대해 기록한다. 여태껏.. 중첩 객체까진 겪어봤지만 3중으로 중첩된.. 그러니까 중첩의 중첩의 중첩 객체는 처음이라 삽질을 좀 했다. 그래도 Promise 배열보단 빨리 해결함 ㅎ 일단 최종본은 이렇다. 기쁜 마음으로 gif를 만들었다 ^^.. 이 녀석은 3 중첩 객체 지원한, 참여한 프로젝트의 경우 프로젝트 아이디로 문서(객체)가 만들어지고, 그 안 객체의 recruited 라는 키값을 통해 판별된다. 아래처럼 true/false에 따라 갈린다. appliedProjects라는 객체 안의 각 문서 아이디라는 객체 안의 recruite..

Today, What I learned? 마이페이지의 해당 유저 프로젝트 리스트를 필터링하기 위한 긴 여정.... 나를 빙글 돌아버리게 만들었던 Promise와 해결할 수 있었던 Promise.all에 대해 알아본다. 발단, Promise 배열 우리 프로젝트의 데이터 구조는 조금 복잡한 편인데.. 마이페이지에서의 프로젝트 리스트는 활성화된 카테고리에 따라서 그에 해당하는 프로젝트들을 보여주어야 한다. 참여한 프로젝트라면 지원한 프로젝트만 보여주는 식.. 뭐 여기까지야 보통의 필터링이지 않나? 싶을 수 있지만 저 데이터를 가져오기 위해서는 얻어온 각각의 문서아이디 리스트를 통해서 각각의 프로젝트 정보를 다시 조회해야 하는.. 과정을 거쳐야 한다. 왜 데이터 구조가 이런가요?라고 묻는다면 우리 팀은 모두 프..

Today, What I learned? 프로젝트의 공용 모달을 활용하려고 했지만 👀 그래도 활용할 수 없는 형태라 또 다른 커스텀 모달을 만들어 보기로 했다. 더불어 공용 모달을 어떻게 만들 수 있을지?? 지난 프로젝트에서 많이 고민했었는데 이번 프로젝트에서는 멋지게 구현해 준 팀원 분이 있어서!.. 많이 배웠다 😇 그래서 오늘은 모달에 대해 정리해 본다. useModal hook 모달을 공통적으로 쓰려면 일단 모달이 열리고 닫히는 상태를 관리해주어야 한다. 이를 위해서 보통 커스텀 훅으로 모달 상태를 관리한다. 상태를 변경해 주는 함수 같은 것을 만들어주어 관리한다. 또 여기에 onClick 이벤트나 onChange 이벤트처럼 필요한 것들을 추가해 준다. const useModal = (initial..

Today, What I learned? 라디오 버튼과 체크박스의 상태 유지를 위한 고민의 과정을 기록해 본다!.. 단순히 값을 넣어 state를 변경해 주는 것이 아니라, 이전 상태 스냅샷을 이용해서 state를 변경하는 로직을 써보게 되어 좋았다. 첫 번째 시도 라디오 버튼 const [isJuniorChecked, setIsJuniorChecked] = useState( user?.isJunior, ); const [checkedPositions, setCheckedPositions] = useState( user?.positions, ); 라디오 버튼에 들어갈 onChange 이벤트. const handleCheckedRadioChange = useCallback( (e: React.ChangeE..

어떤 에러? 파이어베이스 스토리지에 이미지 업로드를 구현하던 중 CORS 에러를 만나게 되었다. Access to XMLHttpRequest at '~~' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. 원인 파악 교차 출처 리소스 공유 (Cross-origin resource sharing)가 허용이 되어있지 않아서 생긴 오류!.. CORS 에러를 해결하기 위해서는 클라이언트 ..