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 함수를 이용해서 ..

2월 셋째 주를 보내며 MVP 기능 구현에 정신없었던 한 주가 지났다 😇 가장 불태운 한 주였던 것 같다.. 👀 Fact firebase CORS 에러를 해결했다. 마이페이지 UI를 꽤 수정했다. 마이페이지 프로필 수정 기능을 구현했다. 마이페이지 프로젝트 리스트 조회 기능을 구현했다. 최소한의 MVP 구현이 거의(!) 끝났다. 버그를 수정하고 코드를 리팩토링하고 있다. 🙂 Feeling 안 해봤던 기능을 구현하며 삽질을 많이 했다 😇 그래도 구현됐을 때 즐거워.. 요새 부쩍 밤에 집중이 잘 되어서 큰일이다.. 수면패턴 지켜.. 커스텀 훅을 이제 자유롭게 다룰 수 있게 된 것 같다 좋다. 상태관리 라이브러리를 쓰는 이유를 잊지 말자.. 🔍 Finding input 태그의 radio, checkbox 를 ..

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

2월 둘째 주를 보내며 벌써 2월 중순이다. 왜지?... 캠프를 진행하며 가장 많이 든 생각이 왜 벌써 이렇게 시간이 지났는가?.. 인 듯하다. 햐 수료까지 딱 한 달 정도 남았다 ^^... 👀 Fact 최종 프로젝트가 시작되었다. 디자이너님과의 협업!.. 부리더를 맡겠다고 자원했다.. 마이페이지 기능을 맡았다. 팀원들과 회식을 했다. UI를 일차적으로 마치고 기능 구현 중이지만 UI를 다시 수정할 듯하다. 🙂 Feeling 최종 프로젝트고 아무래도 챌린지팀이다 보니 약간의 압박감(?) 같은 것도 있는 것 같다. 부리더.. 팀을 케어하려 하고, 디자이너와의 소통을 위한 문서화를 하고.. 이런 일들을 하고 있는데 잘하고 있는 것인가? 지금까지 맡은 적이 없었던 마이페이지를 맡아 좋다. 멋진 팀원들을 만나서..

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