22.12.1

커피 내리는 그냥 사람·2022년 12월 1일

TIL

항해99

목록 보기

72/108

최종 팀 프로젝트 29일차

1. 오늘 한 일

스크럼 회의
협력사 채용 특강
stomp를 통한 웹소켓 (채팅방 구현 완료 / 채팅방 CSS 완료)

오늘까지 반영사항은 깃허브 finalProject에 적용함

1. 스크럼 회의 + 디자이너 회의 + 성능 측정 특강

스크럼회의(14:00)
- FE : 웹소켓 트러블 슈팅 발생으로 해결 중(데스티네이션과 실제 새로 만든 채팅방이 불일치하는 현상), 테일윈드 통한 CSS 예정 + 가격책정 로직 완성(뒤로가기 기능 완성), 테일윈드 진행 예정 + 코드 인스턴스화 거의 완료(posts, issuses문제로) ⇒ 머지하면 될 듯
- BE : 웹소켓 트러블 슈팅 진행중 + 가격조사 완료되어서 DB에 올릴 예정 + api 최적화(~토), CI/CD(~화) + 판매중 기본값으로 바꾸고 머지, 코드 리펙토링 지속 + 가격조사 완료, SQL 리펙토링
- 협조사항 : ~16시 카테고리 선정 후 제출 ⇒ 쇼핑 vs 소셜네트워크

2. 협력사 채용 특강

백엔드 위주로 뽑는 기업인듯 해서 많이 듣진 않음

3. stomp를 통한 웹소켓 (채팅방 구현 완료 / 채팅방 CSS 완료)

1. 채팅방 트러블슈팅 :

데스티네이션과 실제 만든 새로운 채팅방 불일치(이로 인해 실시간 채팅도 불가)
⇒ (해결방안) 로컬스토리지에 값을 저장하여 그 값을 url로 임포트 해오는 방식으로 해결

(postDetail.jsx)
// 채팅방 개설

  useEffect(()=>{
    localStorage.setItem("roomId", postChat)
  }, [postChat])
// postChat 선언한 것이 변할 때마다 셋아이템 유즈이펙트

const onClickChatting = () =>{
  dispatch(__CreateRoom({
    postId:post.postId,
    // 페이로드로 넘겨주는 건 postId만
  }));
  setTimeout(
    function () {
        // 만들어진 채팅방으로 이동하는 로직 => localStorage 활용한 방법 이용
      	// localStorage에 저장해서 데스티네이션, url 등을 맞춰서 방 개설하는 방법 활용
        // 연결되었을 때 콜백함수 실행
        navigate(`/chatting/${localStorage.getItem("roomId")}`);
    },
    300 // 밀리초 간격으로 실행
  );
}

2. 채팅방 CSS

트러블슈팅 : 각종 아이콘(svg) 이동, 말풍선 좌우 정렬 이슈가 있었다.
1) 말풍선 좌우 정렬 : 우측으로 본인 글 옮기는 로직

(Chatting.jsx)
{listReducer.joinUserNickname === item.sender ?
                (<ChatStyle key={uuidv4()} style={{textAlign:"right"}}>
                  {/* 인라인 요소로 바로 우측 정렬 해결 */}
                  <TimeDiv>
                  <TimeSpan>{item.sendDate}</TimeSpan>
                <JoinUserNickname>{item.message}</JoinUserNickname>
                </TimeDiv>
                </ChatStyle>) :
                 
                (<ChatStyle key={uuidv4()}>
                   <TimeDiv>
                    <PostUserNickname>{item.message}</PostUserNickname>
                    <TimeSpan>{item.sendDate}</TimeSpan></TimeDiv>
                </ChatStyle>)
          }

2) 종이비행기 아이콘 정렬하기

<InputDiv>
          <Input value={chatBody} onChange={inputHandler} onKeyPress={appKeyPress} placeholder="댓글을 입력하세요"/>
                    {/* value를 줘야 사라진다 */}
          <Send onClick={onSubmitHandler} style={{position:"fixed", left:"calc(50% + 140px)", transform:"translateX(-50%)", bottom:25}}/>
                    {/* calc로 계산해서 반응형에 맞춰도 움직이지 않는 그림 만든다. svg는 컴포넌트처럼 임포트가 가능하다 */}
        </InputDiv>