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 에러를 해결하기 위해서는 클라이언트 ..

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

어떤 에러? 프로젝트를 진행하며 내려준 props를 뿌려주다가 input 관련 에러가 발생했다. Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component. 원인 파악 위의 콘솔들을 보니 페이지 진입 시에는 괜찮은데, 새로고침 했을 때 uid를 가져오는 시간이 있어 userDat..

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