코드잇스프린트4기

위클리 미션에서 리팩토링을 하고 싶은 부분이 아주 많다.그 중에서 한 두가지 정도를 뽑아서 매주 리팩토링을 해보자는 다짐을 했었는데, 이번주에는 모달을 리팩토링 해보기로 했다. 그래서, 멘토링 시간 때 모달 리팩토링에 대해서 이야기를 해봤고 context API만으로도 구현이 가능해보인다는 결론이 나서 이번 주차에 해보기로 마음을 먹었다..! 이전부터 상태관리를 위한 다양한 방법들을 공부하고 싶었기 때문에 바로 리팩토링에 들어갔다.그럼 바로, ContextAPI를 이용해서 어떻게 모달 리팩토링을 진행했는지 확인해보자~ ! 😊  Modal 컴포넌트 리팩토링이 필요하다고 생각한 이유우선, 왜 모달 컴포넌트를 리팩토링 하고 싶었는지에 대해 짚고 넘어가야할 것 같다.현재 모달 컴포넌트 구현을 위한 로직은 아래..

이번 주차의 요구사항은,저번 주차에 만들었던 Input Component를 이용해서 로그인 및 회원가입 기능을 완성하는 것이다.하지만,  react-hook-form을 적용하는 것이 심화 요구사항이기 때문에 이를 적용해서 구현해보았다. 요구사항의 세부사항이 많은 관계로 간략하게 정리했다!- input에서 focus out될 때 빈 값이거나 유효한 값이 아니면 에러메시지를 출력한다.- 모두 유효한 값이 입력되었을 때 로그인 및 회원가입 시도가 가능하고, api에 POST 요청을 보내 로그인 및 회워가입이 가능하면 folder 페이지로 이동한다.react-hook-form는 처음 써보는 라이브러리였기 때문에 적용하는 과정과 함께 공식 문서의 내용을 정리해보려고 한다   아직 난 아무것도 모르는 응애입니다😊..

week13의 심화 요구사항을 이번 주차에 구현하기로 마음먹고, next.js로의 마이그레이션과 심화 요구사항을 구현했다.  심화 요구사항-  상단에 있던 링크 추가하기 영역이 가려져 보이지 않을 때 최하단에 링크 추가하기 영역을 고정하도록 만들었나요? - 푸터가 시작되는 지점에서는 최하단에 고정된 링크 추가하기 영역이 보이지 않도록 했나요? 이 요구사항과 함께, Intersection Observer를 이용해 구현해보라는 코멘트도 함께 달려있어서 사용해보았다 Intersection Observer 사용법위 요구사항에서 나는 folder 페이지 컴포넌트의 header와 footer을 주시 대상으로 지정해야 했다.// folder 페이지 구성  기본 HTML 태그를 사용했을 땐 바로 useRef()를..

위클리 미션의 요구사항을 수행하던 중, 내가 작성한 코드가 내가 의도한 것과 다르게 동작한다는 것을 알고 그것을 해결하는 과정을 기록해보고자 했다. 요구사항링크 검색바에 검색어를 입력하면 현재 폴더에 있는 링크들 중 “url”, “title”, “description” 중 하나에 검색어가 포함된 링크들만 필터된 상태로 볼 수 있나요? 위의 요구사항을 보고 생각했던 코드 흐름은- SearchingBar 컴포넌트의 input에서 검색어를 받는다.- 검색어를 입력하고 엔터를 누르면 A이벤트가 실행되어 검색어를 state 값으로 저장한다.- 데이터를 Map으로 돌려서 컴포넌트에 전달하기 전에, filter을 통해 검색어를 거른 후 전달한다. 그리고, 이 흐름대로 코드를 작성해보았다.// 검색어를 전달 받은 컴포..