나만의 사전 만들기
코드
https://github.com/cslim0527/my_dictionary
사이트 링크
https://my-dictionary-7e20e.web.app/
요구사항
- ✅ 게시글 목록 페이지
게시글 목록을 화면에 그리기 (각각 뷰는 카드 뷰로 만들기)
게시글 내의 예시는 파란 글씨로 보여주기
게시글 목록을 리덕스에서 관리하기
게시글 목록을 파이어스토어에서 가져오기
-
✅ 게시글 작성 페이지
게시글 작성에 필요한 input 3개를 ref로 관리하기
작성한 게시글을 리덕스 내 게시글 목록에 추가하기
게시글 목록을 파이어스토어에 저장하기 -
➕ 추가로 해보면 좋을 기능(필수❌ )
무한 스크롤 붙이기
게시글 수정해보기
피드백
튜터님에게 완성된 사이트 URL을 전달하고 피드백을 받았다.
우선 사용성에 가장 노력을 기울여 고객이 사이트를 이용할때 불편함이 없게 만드는것이 좋다고 하셨다.
피드백 받은 내용을 간략하게 정리해본 목록을 아래에 기록해 두자.
-
올바른 경로로 페이지에 접근하지 않을 경우에 페이지를 리다이렉트 해주어야한다.
방법은 여러가지가 있겠지만, 버튼을 눌러 메인페이지로 가도록 하거나, 특정 시간이 지나면 자동으로 페이지가 이동되도록 하는것도 좋은 방법이다. -
모바일 화면에서 확대 기능이 굳이 필요하지 않다면 확대하지 못하게 하는것이 좋다.
아무래도 모바일 환경에서 불필요하게 확대기능이 활성화 되어있다면 사용자가 확대된줄도 모르고 제대로 사용 못 할 수도 있을것 같다. 또 입력창의 경우에도 자동적으로 확대되는 경우가 있는데 이런 부분은 미리 막아두는것이 좋겠다. -
History 관리: 예를 글을 작성하거나 수정 할때 history.push() 를 통해 페이지를 이동 했다면, 뒤로가기를 했을때 직전에 작성한 내용이 그대로 남아있는 경우가 있다. 이때 의도적으로 데이터를 남기는것이 아니라면 history.replace()를 사용하여 history를 관리해주어야 한다.
-
컴포넌트별 로직이 분산되지 않도록하는것이 좋다.
이 부분은 잘해보려고해도 막상 코딩을 하다보면 로직이 꼬이는 경우가 더러 있다. 최대한 자기가 수행해야될 로직이 나른 컴포넌트와의 의존성을 갖지 않도록 하는것이 나중에 로직을 파악하는데 도움이 될것같다. 그리고 로직을 잘 정리하였다면 그 다음이 렌더링을 최적화 하는것이라고 한다.
그외 수정이 요구되는 부분들
-
스크롤을 사용하는 이용자가 마우스로 정확히 스크롤 해야할 영역을 타겟팅하지 않고 스크롤을 할수 있다, 또는 키보드 방향키로 스크롤을 사용하는 이용자가 생각보다 많다고 한다.
그렇기 때문에 이러한 이벤트들은 최대한 General하게 이벤트를 등록하여 사용자가 무의식적으로 사용해도 가능케 하는것이 좋겠다. (window 객체에 scroll 이벤트를 등록하도록) -
한개의 컴포넌트가 두가지 버전으로 사용된다면, 로직을 공통으로 묶어 사용하도록 잘.. 잘..만들어보자 그리고 컴포넌트 이름도 내가 아닌 다른 작업자가 이해 할수있도록 의미에 맞게 네이밍 하는것 또한 중요하다.
나의 경우 AddWord라는 컴포넌트가 게시글을 작성하고 수정하는데 사용이된다. 그런데 이름이 AddWord라는 컴포넌트로 작성이 되었기때문에 다소 이해하는데 오류가 있을수있다.
이런 경우에는 AddWord보다는 EditWord가 좋을것 같다는 피드백이 있었다. -
인피니티 스크롤의 경우 나는 바닐라 자바스크립트에서 사용했던것 처럼 setTimeout를 사용해서 구현했는데 setTimeout의 경우 사용자가 스크롤을 마구잡이로 했을때 데이터를 중복으로 불러오는 버그가 있었다. 결론은 해결은 되었지만, 이런 경우에 intersectionObserver API를 활용하면 보다 깔끔하게 구현 할 수 있다고 하니 이벤트를 이 API로 다시 구현해 보는것도 좋겠다.
수정 스케줄
- 모바일화면 확대 안되게 할것 (수정완료)
- 단어 작성 및 편집 시 뒤로가기 했을때 데이터 보존되어있는 문제 해결 할 것 -> replace() (수정완료)
- AddWord 컴포넌트명 EditWord로 변경할 것 (수정완료)
- 없는 페이지 접근 시 화면 만들것 (Not Found Page)
- Scroll 동작 setTimeout 방식에서 IntersectionObserver로 변경 (수정완료)
- 로직 정리를 위해 조금더 자세히 들여다 볼것...
