이번주는 지금까지 설렁설렁 했던 마음을 다잡고 중간 발표 전까지 열심히 해보자는 생각으로 코드 짜는데에만 전념했던 주이다.
급하게 짜다보니 이것저것 기능이 미비해서 중간 발표가 너무 아쉬웠다.
그럼에도 평가는 그럭저럭 좋게 받아서 기분이 좋았다.
남은 29일 (실질적으로는 22일 정도) 동안은 제대로 공부를 해가면서 코드를 정리하고 완벽한 작품을 만드는데 시간을 쏟아보려고 한다.
아래는 우리가 중간 발표로 만든 사이트이다.
사이트의 목적은 링크, 메모를 담을 수 있는 사이트이다.
우리가 카톡 같은 곳에다가 '나에게 쓰기'를 활용해서 링크, 메모를 보관하는 것에서 착안해서 기획하게 되었다.
내가 원하는 링크, 메모 등등을 내 모음에 보관을 해놓고, 사람들에게 공유하고 또 다른 사람이 만든 자료들을 검색해서 내가 볼 수 있는 사이트이다.
구현하고 싶은 기능들이 정말 많은데, 일단 기획한 부분부터 최대한 빨리 완성하고 완성도를 먼저 높여야 할 것 같다.
이번주의 트러블 슈팅은 아래와 같다.
1. a 태그 동작 막기
우리는 폴더를 '모음', 그 안에 내용들을 '조각'이라고 하는데 이 조각 목록에서 [선택 모드]를 활성화 하면 조각을 선택하고 일괄 삭제할 수 있는 기능이 있다.
근데 이 일괄 선택 모드에서 링크들을 클릭했을 때, 링크가 클릭되지 않게 하고 링크들에 테두리가 생겨야 하는데, 링크가 실행되는 문제가 있었다.
그래서 a태그에 onClick 이벤트를 등록하고 [선택 모드]가 활성화되어 있을 때 e.preventDefault()를 사용하여 a태그의 기능이 동작하지 않게 만들었다.
2. 카테고리 선택
이번주 최대의 난제였다.
이 카테고리의 선택 조건은 아래와 같다.
1. 화면이 처음 열리면 현재 내 계정에 있는 항목들의 카테고리가 나온다.
2. 기본적으로는 [카테고리 전체]가 선택되어 있는 상태어야 하며, 카테고리 선택부의 하단에는 폴더 목록이 나오는데, 이 폴더 목록들은 카테고리가 선택된 상태에 따라 갱신되어야 하고, [카테고리 전체]를 제외한 카테고리는 다중선택이 가능하다.
3. [카테고리 전체]를 제외한 카테고리들은 클릭시 [카테고리 전체]가 비활성화 되어야 한다.
4. 폴더를 선택해서 폴더 내의 목록이 나오면 카테고리는 새로 갱신되어야 한다.
이 로직은 정말로 어려웠다.
사실 이 코드는 지금 완성한 코드도 리팩토링이 필요할 정도로 코드가 복잡하다.
그래서 부끄러우므로 코드는 지금은 안올릴 생각.
처음의 문제점은 API가 처음에는 프로필 정보와 같이 카테고리 전체를 출력해주는 API여서 페이지를 처음 들어온 시점에서만 데이터가 넘어오는 것이었다.
그래서 백엔드에 요청을 해서 API를 교체했는데, 이거는 모음, 파일 리스트를 불러올 때, 카테고리 리스트를 같이 불러오는 거였다.
여기서 발생한 문제점은, 카테고리를 클릭하면 그에 해당하는 카테고리 리스트들이 들어오면서 카테고리 리스트도 같이 불러오는데
그걸로 쿼리 데이터가 교체되면서 카테고리 컴포넌트가 다시 렌더링 되는? 증상이 있어 이걸 어떻게 해결해야 할까 2시간 정도 고민한 것 같다. 결국 백엔드에 요청해서 카테고리 API와 리스트 API를 분리하는 방법으로 해결했다.
이렇게 해결하고 나서 생각이 든 건데, 카테고리 데이터를 별도 데이터로 보관하면서 처리하면 되지 않을까? 라는 생각이 문득 들었다.
나중에 한번 그런 방식으로도 해결 가능할지 고민을 해봐야 겠다고 생각 했다.
이외에도 몇가지 트러블이 더 있긴 한데 코드 너무 열심히 짜느라 기억이 안난다.
앞으로는 더 잘 정리하기 위해서 고민을 좀 더 많이 해봐야 할 것 같다.
3. 항목 드래그 & 드롭 구현시 링크 + 이미지의 크롬 자체에서 제공되는 드래그 (링크 드래그, 이미지 드래그) 때문에 항목 드래그가 안되는 증상
이것도 꽤 골머리를 앓았다.
우리는 텍스트 타입 + 링크 타입의 두가지 항목이 있는데,
각 항목을 드래그 하면 오더링이 변경되는데, 링크 드래그 + 이미지 드래그가 되면서 드래그가 잘 되지 않는 것이었다.
그래서 어떻게 하면 좋을까? 고민을 해보다가 링크 드래그에 한해서는 a태그를 div 태그로 교체하고 onClick 이벤트에서 링크를 들어가게 만들었다.
그리고 아래는 이미지 드래그를 막기위해 찾아봤던 내용들이다.
https://velog.io/@soyoungggg/CSS%EB%93%9C%EB%9E%98%EA%B7%B8drag%EB%A7%89%EA%B8%B0
[CSS]드래그(drag)막기!
이미지 등 drag 막기 css전체 드래그 막기(복사안됨?)일부 영역 드래그를 허용 -> bacy에 드래그 방지 코드를 넣어놓고, 원하는 영역에 클래스 추가 텍스트만 드래그를 허용하고 싶은 경우이미지 드
velog.io
https://worldlibs.tistory.com/9
텍스트 드래그, 이미지 드래그 방지
HTML 태그 속성에 추가 - 이미지 드래그 ondragstart="return false" - 텍스트 드래그 onselectstart="return false"
worldlibs.tistory.com
나와 어떻게 상황이 다른지는 모르겠지만 위의 방법은 다 안먹혀서
이 외에도, 이미지 드래그를 막기 위해 이것저것 검색하다가 한글 정보가 아닌 영어 정보에서 찾아보기로 했다.
https://stackoverflow.com/questions/49898749/how-can-i-prevent-drag-and-drop-images-in-a-react-app
How can I prevent drag and drop images in a react app?
We got how to prevent drag drop image with jquery with $('img').on('dragstart', function(event) { event.preventDefault(); }); but I want to achieve the same in a react app, and without jquery. How ...
stackoverflow.com
그러던 중, 위 링크에서 아래 댓글에서 pointer-events: none;를 발견!
한줄로 쉽게 해결됬다.
항해 키워드 : MVP개발을 하는 3주 동안 어떤 기술들을 다뤄봤는지 정리해보세요.
3주동안 사용해본 기술들
프레임워크
- React
전역 상태 관리 라이브러리
- Redux Toolkit
스타일링 라이브러리
- Styled Components
서버 상태 관리 라이브러리
- React Query
아이콘 라이브러리
- React Icons
아이템 드래그&드롭 라이브러리
- React Easy Sort
폼 라이브러리
- React Hook Form
데이터 패칭 라이브러리
- Axios
가상 api 서버 라이브러리
- Json-Server
전역 상태 관리 라이브러리
- Recoil
구글 소셜 로그인 라이브러리
- react-oauth/google
