Study/Side Projects (7) 썸네일형 리스트형 [Zeros] 버그 & 건의 사항 Zeros에 방문해 보기 혹시 다른 버그를 발견하시거나, 건의 사항이 있으시면 댓글로 알려주세요!✨감사합니다. 버그 모바일로 접속했을 때, 저축 목표를 수정하는 form의 submit 버튼이 안보이는 버그. 다른 react icon 으로 바꿨더니 아주 잘 보인다! 모바일에서 구글/깃허브 로그인 버튼을 처음 클릭했을 때 아무런 반응이 없는 버그. 다시 로그인 버튼을 클릭하면 제대로 로그인이 되는데, signInWithPopup 함수랑 관련이 있는 것 같다는 막연한 생각(모바일에서는 signinWithRedirect 으로 호출했더니 해결됐다.) firebase auth 공식 문서에서 모바일 로그인 시 popup 보다 redirect를 사용하는 것을 선호한다고 나와있다. useDeviceCheck 훅을 만들어.. [Zeros] 1.0.0 마무리 프로젝트를 시작하게 된 계기 2022년 2월 프론트엔드 공부를 시작하고, 7월 원티드 프리온보딩 코스를 통해 처음으로 다른 프론트엔드 지망생 분들과 협업해 보았다. 나는 주로 강의 듣기 + 실습 하기 + 배운 내용 블로깅하기 방식으로 공부를 해 왔다. 그래서 기업과제를 기반으로 하는 팀 프로젝트가 낯설기도 했지만, 내가 구현하기 어려운 기능이 무엇인지 직접 정의해 보고, 문제를 해결하는 경험을 여러 차례 쌓으며 재미를 느꼈다. 특히 생각한 대로 코드를 작성해 보고, 원하는 대로 동작하지 않을 때 그 문제가 무엇인지 찾아보고 해결하는 과정 자체가 재미있었다. 내가 생각하는 나만의 프로젝트 만들기가 이런 공부의 끝판왕이 되어 줄 것이라는 생각이 들었다. 프로젝트를 하며 어려웠던 점 (feat. 새로 만난 문.. [Zeros] location.state를 사용하면 안되는 경우 언제 location.state를 사용할까? react router에서 useNavigate와 useLocation을 사용하면, 서로 다른 컴포넌트에서 data를 공유할 수 있다. // card component navigate(`${id}`, { state: { ...data }, }); // detail page const { data } = location.state; Zeros에서는 카드 컴포넌트를 클릭했을 때, 그 카드에 대한 디테일 정보를 확인할 수 있는 페이지로 넘어가게 되어있다. 특히 카드 컴포넌트와 디테일 페이지에 겹치는 데이터가 많기 때문에 useNaviga + useLocation을 이용해서 data를 공유하기로 결정했다(안돼). 굳이 한번 더 http 요청을 보낼 필요가 없다고 느꼈.. [Zeros] 로그인 상태 유지하기 localStorage.setItem firebase를 통해 소셜 로그인을 구현하기는 했는데, 로그인 상태를 유지하는 로직을 어떻게 짜야 좋을지 고민이 많았다. 페이지를 재방문했을 때에도 로그인 상태를 유지하도록 만드는 기능을 구현해 본 적이 있긴 하다. 이전에는 아래와 같은 방식으로 로그인 상태를 유지했다. localStorage에 로그인 여부를 boolean으로 저장하고, 어플리케이션이 실행될 때 마다 이 값을 읽어온다. 값이 true일 때에는 login state를 true로 업데이트 한다. 그러나 이 방법은 사용자가 로그인 상태를 조작하기 쉬워진다는 단점이 있다. 로컬 스토리지에 직접 값을 true로 입력해 두면, 실제로 로그인하지 않더라도 로그인 한 상태로 업데이트 되기 때문이다. firebas.. [Zeros] creat react app & postcss why postcss? | styled component와 tailwind를 쓰면서 불편했던 점 프리온보딩을 진행하면서 styled component와 tailwind css를 써봤다. 결론적으로는 둘 다 마음에 들지 않았다! 먼저 스타일드 컴포넌트는, 동적으로 className을 지정하는 것으로 스타일링이 업데이트 되지 않는 점이, 테일윈드는 className이 한없이 길어질 수 있다는 점이 별로였다. 하지만 styled component에서 사용되는 nesting 이나, tailwind에서 필요한 css 모듈을 설치해서 쓸 수 있다는 점은 편리했다(hide-scroll-bar와 관련된 모듈이었다). 이런 편리함에도 불구하고, 스타일드 컴포넌트와 테일윈드가 마음에 들지 않아서 이것 저것 찾아보다가 po.. [Zeros] stopPropagation vs. event.target !== event.currentTarget 자식 요소와 부모 요소에 동일한 이벤트의 리스너가 등록되어 있으면, 이벤트 버블링이 발생한다. 예를 들어 카드 컴포넌트(부모)와 삭제하기 버튼(자식)에 모두 클릭 리스너가 등록되어 있고, 삭제 버튼을 클릭하면 다음과 같은 일이 발생한다. 삭제하기 버튼에 등록된 리스너 함수가 실행된다. 문제는, 버튼이 카드의 자식 요소이기 때문에 발생한다. => 버튼이 클릭되었다는 것은, 카드가 클릭되었다는 것이기도 하기 때문이다. 카드가 클릭되기도 했으므로, 카드에 등록된 리스너 함수가 실행된다. 나의 경우 카드를 클릭했을 때, 해당 카드의 정보를 더 자세히 볼 수 있는 페이지로 이동하도록 만들어두었다. 그랬더니 삭제하기를 클릭했을 때 페이지 이동이 발생해서, 삭제 기능을 사용할 수가 없는 문제가 생겼다. 뿐만 아니라,.. [Zeros] event delegation이 예상한 대로 동작하지 않는 문제 이벤트 버블링으로 생길 수 있는 문제를 막기 위해, 항상 부모 요소에 이벤트를 위임하는 방식으로 코드를 작성하고 있었다. {!isSelectBoxClicked && ()} {!isSelectBoxClicked && ()} {isSelectBoxClicked && ( /*...*/ )} 부모 컴포넌트인 label에 이벤트를 위임하면, input이나 Icon에 클릭 이벤트가 발생했을 때에도 label에 등록된 toggleSelectBox가 실행된다. 그래야 하는데 icon을 클릭했을 때 예상한 대로 동작하지 않는 것을 확인할 수 있었다. 그 이유는 다음과 같았다. 사실 icon을 클릭했을 때, label에 등록된 toggleSelectBox 함수가 잘 실행되었다. 문제는 그 다음 단계에서 일어났는데, ico.. 이전 1 다음
