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

Today, What I learned? 마이페이지 구현 중!.. 마이페이지 접속 시 가져오는 유저 정보를 렌더링 해주는 과정에서 기술 스택 데이터를 핸들링하던 중에 막히고 말았다. 개발 기술스택은 잘 나오고 있지만 포지션과 상관 없이 기획, 디자인 부분이 중복되어 나타났기 때문..😨😨😨 (NOOOOOooo...) 위 사진에서는 잘렸지만 디자인, 프론트엔드가 선택되어 있는 상태였다. 원하는 대로 되려면 유저의 선택된 포지션에 따라서 구분될 필요가 있고, 유저가 기획이나 디자인 둘 중 하나를 선택했다면 해당 포지션의 스택이 활성화되도록 해야 한다!.. 기존 코드는 다음과 같았다. {skills.map((skill: string) \=> { const isChecked \= checkedSkills?.inc..

Today, What I learned? UI를 먼저 작업하면서 input 태그 중 체크박스와 라디오버튼을 커스텀해야겠다 생각이 들었는데, 기본적으로 잡혀있는 UI를 날리면서 어떻게 디자인대로 구현할 것인지에 대한 삽질 시간이 좀 길었다. 결론적으로 커스텀에 성공했고 어떻게 해놓았는지 기록해보려 한다!.. 우리 프로젝트는 이모션을 쓰고 있지만 Styled-components 형식과 동일하게 사용 중이라는 점.. input type='radio' 완성된 모습은 이렇다. 어떻게 커스텀을 할 것이냐? 라벨의 htmlFor와 인풋의 name이 동일할 경우 라벨을 누르기만 해도 인풋이 동작된다는 점을 이용할 것이다. {career.map((career) => ( {career.name} ))} 여기서 중요한 것은..