[항해99 63일차] (22.05.08) WIL_실전 프로젝트 2주차 종료.

 

매일 작업 기록

5/2(월)

• 마이페이지 분기
• 마이페이지 : 게시물 삭제하기 버튼 API 연동
• chatList : 채팅리스트 불러오기 API 연동
• chatDetail: socket 연결, 구독, 채팅 보내기 연결 성공

5/3(화)

• 프로젝트 노션 정리
• 소셜로그인 API 확인 및 response 값 처리 요청
• (Login) 닉네임 설정 여부에 따라 페이지 이동 다르게 처리 완료 (signup 또는 select로)
• (signup) 닉네임 필수값으로 설정. 중복닉네임 아닐 시에만 닉네임 저장 버튼 활성화 처리
• (Mypage / ChatList ) isLoading 세팅(useEffect 관련)
• (ChatList) 뷰 보완 : 채팅방 나가기 버튼 추가,
• (ChatDetail) 데이터 처리 방법 결정: state 에서 관리

 

5/4(수) 

• (Mypage / ChatList ) 무한스크롤 구현
• permit 컴포넌트
• API 테스트 : 채팅방 조회

 

5/5(목)

• 뷰 작업 : 채팅방
• 뷰 작업 : 카테고리 탭 (아이콘 적용은 아직 안함)
• 뷰 작업 : 채팅리스트
• 뷰 작업 : NotFount
• 기능 : 닉네임 저장 후 페이지 뒤로가기로 라우터 변경

 

5/6(금)

 

5/7(토)

• 뷰 : signup 페이지
• 뷰 : chatList 페이지
• 뷰 : chatRoom 페이지
• 뷰 : CategoryBar
• 기능 : 보낸 채팅 메시지 redux-toolkit 저장 및 뷰로 보여주기
• 기능 : 보낸 사람에 따라 채팅 메시지 좌우로 나눠 보여주기

 

 

 

 

기술적으로 막혔던 부분 또는 궁금증

 

1. 리덕스 툴킷은 언제, 왜 활용해야 하는거지? API 통신으로 데이터 다 가져올 수 있는데?

 

리덕스, 리덕스 툴킷, 리액트 쿼리, 주스탄드 등 여러 상태 관리 라이브러리(?) 사용을 검토하면서 문득 들었던 궁금증이다. 상태관리를 어떻게 할 것인가를 지난 몇 일간 정말 고민 많이하고 공부했으나, 아직은 제대로 정립되어 있지 않은 듯 하다. 

 

내 이런 고민에 대해 함께해주시는 프론트 동료는 "가져온 데이터를 어디에 저장해야할까요? 리덕스 or state. state는 해당 컴포넌트를 나가면 날아가니, 페이지를 옮겨다녀도 남아야하는 데이터들은 redux를 이용해 저장해야 한다"고 답해주었다. (짱짱)

 

그렇다면, 페이지를 옮겨다녀도 남아야하는 데이터는 무엇인지 생각하고, 그런 데이터들만 리덕스로 관리해주는 것이 효율적이겠다는 결론에 도달하였다.

 

 

 

2. 무한스크롤, 강의대로 해도 실행되지 않는다! (강의 보충해주었으면 좋겠어요...)

 

문제상황

컴포넌트 안에 있는 div 에 무한스크롤을 걸어주어야 한다.

 

강의에서 배운대로 InfinityScroll 이라는 컴포넌트를 만들었다. 그런데 그 컴포넌트에서 내가 무한스크롤을 적용해야 하는 div의 높이를 구할 방법을 찾지 못했다.

 

구글링을 계속 해보아도 대부분 화면 전체에 대한 높이를 구해서 무한스크롤 구현하는 방식으로 했다.

아이템들을 감싸고 있는 div 의 높이를 구하고, 그 div 안에서 스크롤된 정도를 구해내야 하는데. 그 방법을 찾을 수가 없다.

 

어찌어찌 div 에 id 를 걸어두고 document.getElementById 써서 하면 되겠다 싶었지만. 안된다.

가장 안에 있는 infinityscroll 이 먼저 렌더링되고, 그 다음에 아이템들을 감싸고 있는 div 가 렌더링되는 것인지, document.getElementById 결과값이 계속 undefined 나온다....

 

해결

 

리액트에서 스크롤 이벤트를 window.addeventlisner 를 사용하는 것은 비추한다고 한다. 

useRef 사용해서 div를 잡고, onScroll 값을 줘서 스크롤 시 이벤트를 발생시키는 게 더 좋은 방식이라고 한다!

 

 

 

3. div 안에 있는 text 수직 아래로 정렬 이 되지 않는다. (CSS 어려워...)

 

문제상황

• 채팅방 에서 채팅 온 시간을 아래로 정렬해서 보여주고 있는데, 그걸 처리하는 방법을 알 수가 없다.
• display: table-cell; vertical-align: bottom; 을 먹여봤지만 제대로 먹지를 않는다.

 

해결

채팅메시지와 채팅 온 시간을 감싸준 div 에 아래 속성을 적용하니 해결.

 

display: flex;

align-items: flex-end;

 

 

4. 삼항연산자를 이용한 닉네임 체크 결과 보여주기 

 

문제상황

signup 에서 nickNameCheck 를 삼항연산자를 사용하여 코드 정리하려고 하였으나, 닉네임체크 api 가 실행되는 동안에 ‘사용 불가능한 아이디입니다.’ 문구가 나오는 문제 발생.

닉네임을 입력하는 동안에는 체크 결과 메시지가 input 아래에 안뜨길 원하지만, 삼항연산자 처리를 하니까 true / false 에 따라 가능/불가능한 닉네임입니다. 를 호출하면서 .. 원하는 바가 이뤄지지 않는 문제 발생

 

미해결

api 가 실행되는 동안에는 아무 메시지가 뜨지 않길 원하지만, 이를 처리할 수 있는 방법을 찾지 못함.