Sprint 6
22.07.25 ~ 22.07.29
만두피 주기
- 제보글 세부 페이지 구현(UI 및 기능 구현)
- dummy 데이터 구조화작업
- 자동로그인 구현
- 폰트 결정
- profile 기능 추가
- 게시글 작성 페이지 UI 생성
- (만두피) 스크립트 언어에서 모르는 무언가가 계속 나와서 공부를 해볼수 있었다.
- (주기) 유저 입장에서 생각을 많이 해보게 되었다. 조금 더 유저 친화적으로 UI를 만들려고 하니 디테일 한 부분까지 신경 쓰게 되었다.
-
(주기) 인피니티 스크롤링은 element를 감지하고 이벤트를 발생시키는 방법인데 대댓글 칸 안에 element를 넣어버리면 대댓글을 다 보기 전까지는 다른 댓글들을 볼 수 없는 문제가 생겼다. 그래서 더보기 버튼을 클릭하여 요청을 보내도록 수정했다.
-
(만두피) 카카오맵을 이용해서 위치검색을 하려고 했는데 시작부터 난관에 봉찼했다. 일단 앱키가 안먹고 카카오맵 자체도 pure js를 사용한터라 구현 및 해석이 만만치 않아보인다.
-
(만두피) profile api 테스트를 하려고 하는데 tabs 컴포넌트가 오류가 나버렸다 build시에 코드들이 압축이 되어서 TabPanel과 TabList의 type.name으로 판별했는데 이부분이 판별이 불가능 해졌다.
-
(만두피) 첫 방문일때 저장되어 있는 access token을 이용해서 자동 로그인이 되도록 하려고 했는데 이 코드를 어디에 넣을지 매우 고민이 많았었다. 기존 api를 사용해서 구현을 하려고 하였으나 (라우터 안에 넣으면) 무한 랜더링이 되거나 global state가 생성하기 전에 선언을 했어야 했어서 기존 api를 포기하고 새로 hook을 만들고 만들면서 생기는 문제(로그인 버튼이 깜빡이는 현상) 해결하는 그 과정이 결과적으로 코드는 짧았지만 해결책 까지 오기에는 오래걸렸었다.
-
(주기) 인피니티 스크롤링을 저번 스프린트 때 느낌만 알았는데, 이번 스프린트 때 사용해보았다. 댓글에 인피니티 스크롤링 기능을 달아놓았다.
-
(주기) 글을 작성할 때 띄어쓰기 부분은
\n으로 되기 때문에 이 부분을 찾아<br />처리를 해주어야 한다. 또한 해시태그 부분도 찾아야 했기 때문에 split 할 때 정규표현식을 사용했다.content.split(/(#[^\s#]+|\n)/g)‘안녕하세요\n#해시태그1 #해시태그2\n안녕하세요’ → [’안녕하세요’, ’\n’, ’#해시태그1’, ’ ‘, ’#해시태그2’, ‘#해시태그2’, ‘\n’, ‘안녕하세요’]로 추출한 후\n시 띄어쓰기 처리, 해시태그 시 하이라이트 처리를 해주었다.
-
(주기) 댓글 작성할 때 엔터를 해도 submit 되지 않고 textarea가 늘어나도록 하는 방법을 알게 되었다.
-
(만두피) 인피니티 스크롤링을 배우면서 react-query의 infinityQuery라는 문법을 알게되었다 자체적으로 인피니티 스크롤을 할수 있는 hook이 있어서 편하게 하였다
-
기존에 인피니티 스크롤방식은 스크롤의 event를 감지해서 사용했는데 이것은 이벤트가 빈번히 일어나 많은 랜더링을 동반하기때문에 좀 더 최적화 방식인 Intersection Observer 방식을 사용하여 이를 최적화할 수 있었다
-
(만두피) 데이터를 구조화하면서 api mocking 코드의 양이 많이줄고 많은 케이스를 손쉽게 만들수 있었다.
-
(만두피) div 태그 안에 가로 스크롤을 넣으려고 css적으로 이것저것 많이 시도하면서 알게 된것들이 많았다
white-space: nowrap;가로로만 계속 추가가 되게 하는 속성overflow-x: scroll;태그가 넘칠시에 스크롤을 보여주는 속성 display flex는 자체적으로 자식요소를 부모요소 보다 넘치게 하지 않는 특징을 가지고있어서 이 방법을 사용할떄는 쓰지않고 자식요소에display: inline-block;을 추가해서 해결하였다. 또한 버튼을 누를시에 스크롤을 이동해 다음 사진 3개를 보여줄수 있도록 하였다
- Post 페이지 기능추가
- Skeleton UI 구현