22.12.3

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

TIL

항해99

목록 보기

74/108

최종 팀 프로젝트 31일차

1. 오늘 한 일

주간 멘토링
2차 merge 후 도메인 적용
2차 merge QA(트러블 슈팅 해결)
Jira 관리 통한 팀원 진도 체크

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

1. 주간 멘토링

기술 멘토링(10:00)
- 트러블 슈팅 관해서 : (BE) API성능, DB패치, 레디스 인증, CQRS 등 고민해 볼 것
- Stomp vs WebSocket : 둘을 구분지어 설명할 수 있는게 중요
  - 정의 : WebSocket 위에서 움직이는 메시징 프로토콜
  - 도입배경 : 실시간 채팅 위해서(중고물품 유저 거래 위해서)
  - 장점 :
    - 간단히 메시징 주고 받는 프로토콜
    - 웹소켓보다는 사용자체가 쉽다
    - 코드가 줄어든다
    - 보편화 되어있다.
- 테일윈드 도입
  - 도입배경 : Layout 수정, StyledComponent 제대로 활용 X, 빠른 개발
  - 단점 해결보다는 빠른 개발에 주력
- (BE) 질문 : Stomp 안 쓰고는 헤더값 세팅이 안 되는지?
- 코드 인스턴스화(모듈화) ⇒ 성능개선보다는 유지보수
- CI / CD : 무중단 배포는 선택
- 지우는 API는 필요 없다.

2. 2차 merge 후 도메인 적용

프론트엔드 팀원 전체 머지 후 가비아에서 도메인 구매 후 적용

3. 2차 merge QA(트러블 슈팅 해결)

내 글이 아니면 수정/삭제가 안 되게 하기(post, issue, 댓글) => 삼항 연산자 활용. 백엔드에서 데이터를 true/false(내 글이면 true)로 받아서 처리

{post.myPost === true ?(<>
              <img
                className="h-[18px] w-[18px] absolute right-4"
                src={blueToggle}
                onClick={editToggleHandler}
              />
              </>) : ""}

트러블슈팅 : iphone에서 글이 업로드가 안 되는 현상

원인 : 아이폰 & 맥북 사파리 연결 통해 로그 살펴보니 postList(이슈는 objectionList)에서 undefined에서 객체를 뽑아오려고 했음
해결 1 : 먼저 옵셔널 체이닝으로 문제된 줄만 처리 => 실패(전역적으로 관리가 필요했다.)
해결 2 : 먼저 posts라고 useSelector로 가져온 요소를 useEffect를 줘서 log를 찍어봄 => 빈 배열이라 posts.length > 0 && 처리 => 실패(내부에 map 돌린 데이터 중 images라는 배열이 또 있었음)
해결 3 : 일단 전체 조건부 렌더링은 두고 이미지를 둘러싼 조건부 렌더링을 거둔 다음 옵셔널 체이닝 => 실패(아무래도 전체를 다 옵셔널 체이닝을 걸어야겠다 싶었음)
해결 4: post라고 map 돌린 모든 부분 옵셔널 체이닝 => 게시물이 써지긴 하지만 새로고침을 하지 않으면 랜더링이 안 되는 현상 발생, 부분 성공
최종 성공 : props로 navigate하고 있던 부분을 extrareducer에서 window.locate.replace 처리 해줘서 성공

(부분 코드)

(PostList.jsx)
{posts.length > 0 &&
  // 전체 조건부 렌더링
          posts.map((post, index) => {
            return (
              <div
                className="bg-white flex p-[18px] border-b-[0.5px] border-D9"
                key={index}
                onClick={() => {
                  onClickHandler(post.postId);
                }}
              >
               
                  <img
                    className="object-cover  min-w-[84px] w-[84px] h-[84px]  rounded"
                    src={post?.images[0]?.imgUrl}
                  />
					// 요소별 옵셔널 체이닝

                <div className=" w-full flex-col  ml-3 font-medium">
                  <div>
                    <label>{post?.title}</label>
                  </div>
                  <div className=" mt-1 text-base font-semibold">
                    <label>{post?.userPrice.toLocaleString("ko-KR")}원</label>
                  </div>
                  <div className="flex justify-between mt-4  text-xs font-normal">
                    <div>{post?.createdAt}</div>
                    <div className="flex">
                      <img src={mainHeart} />
                      <div>{post?.likeCnt}</div>
                    </div>
                  </div>
                </div>
              </div>
            );
          })}

(PostsSlice.js)
//__addPost
    [__addPost.pending]: (state) => {
      state.isLoading = true;
    },
    [__addPost.fulfilled]: (state, action) => {
      state.isLoading = false;
      state.posts.push(action.payload);
      window.location.replace("/postread/all")
      // replace 활용한 새로고침 및 렌더링
    },
    [__addPost.rejected]: (state, action) => {
      state.isLoading = false;
      state.error = action.payload;
    },