[항해99 50일차] (22.04.25) 클론 프로젝트 종료, 실전 프로젝트 시작

클론 프로젝트 회고

○ 스코프 대부분 구현 완료

• 기능 구현 완료 : 회원가입, 로그인, 로그아웃, 게시글 CRUD, 좋아요 및 관심상품 담기, 검색어 및 카테고리 검색  
• 기능 구현 미완료 : 무한 스크롤 , 소셜 로그인

 

○ Trouble Shooting 

1. useEffect 실행 컨트롤이 너무 어렵다.

• 메인 페이지에서 axios, getpost 를 실행하여 포스트리스트를 받아오는 상황이 있었다.
• useEffect 는 컴포넌트가 렌더된 이후 실행되는 hook 이기 때문에, useEffect 에 getpost를 넣어두면, getpost가 실행되기 전에 state 값이 불러와지고, render 가 진행되어 state 값이 undefined 가 출력되고. 페이지에 오류가 발생하게 된다.
• 웹 애플리케이션에서 서버 쪽 데이터가 필요할 때는 Ajax 기법을 사용하여 서버의 API를 호출함으로써 데이터를 수신하는데 이렇게 서버의 API를 사용해야 할 때는 시간이 걸리기 때문에 이 과정에서 해당 작업을 비동기적으로 처리하게 된다.
• 이를 해결하기 위해 useEffect 처리 결과에 따른 return 값을 분기하였다.. 더 좋은 방법이 있다면 찾고 싶다.

//없으면 빈채로 보여주고 생긴다음에 밑에 보여줌
if(!postList){ 
    return <div></div>
  } 
  
  return (
    <React.Fragment >
      <Grid bg="white" padding="16px 16px">
        {postList.map((p) => {
          이하 포스트 내용...

 

  2. 무한스크롤 기능 구현 중 다양한 문제 발생

  1) 스크롤 움직임을 인식하지 못함

• lodash 를 설치, thorottle 을 적용하여 스크롤을 계산하는 식을 넣고 실행해보았으나 아무 일도 일어나지 않았다.
• 다음 페이지가 있으면 이벤트를 붙이고, 없으면 이벤트를 삭제하는 것 까지는 성공했다. 그래서 쓰로틀 내에서 스크롤을 계산하는 부분이 잘 작동하지 않는 것이 원인일 것이라 추정했다.
• 기술 매니저님께 질문했더니, 모바일 적응형 뷰 안에서 스크롤이 발생하는 것을 window 스크롤이 아니라고 인식할 수 있다는(이 부분은 추가 공부가 필요) 이야기를 들었다. 그래서 모달 창에서도 무한스크롤을 적용하려면 window 객체의 매소드로 이벤트를 주지 않고, 다른 매소드를 사용해야한다는 이야기도 들었다.
• 쓰로틀, 페이지 스크롤 영역 

  2) 같은 페이지 데이터를 중복 받아오는 문제 (#history  #useEffect)

• 카테고리별 게시물 조회 페이지, 마이페이지 등 다른 페이지를 갔다가 메인페이지로 뒤로가기 누를 시, 메인페이지에서 1 페이지 데이터를 중복으로 받아오는 문제가 발생했다. 
• 뒤로가기를 history.push() 를 사용하여 설정했는데, 이 경우 redux 에 있는 state 가 그대로 살아있는 상태에서 메인페이지에 있는 useEffect가 실행되면서 1페이지 postlist 가 다시 불러와지는 거였다.
• 우리는 뒤로가기 시 새로고침되면서 메인페이지가 랜더링될 수 있도록 window.location.replace()를 사용하는 것으로 대체했다. 이 결과 성능은 저하되었지만, 해당 문제는 해결되었다. 

 

 

실전 프로젝트 시작

 

• 기획, 와이어프레임, API 설계 가 얼추 진행되었고, 월요일부터는 각 기능 구현에 들어간다. 
• 나는 오늘 아래의 To do list 를 가지고 작업을 진행한다.

 

To do list 

 

• '좋은 컴포넌트 설계'는 무엇인지 알아보고, 그에 따른 컴포넌트 구조 설계(안) 을 만든다.
• Web Socket 의 개념에 대해 이해하고, 사용법을 익힌다.
• Web RTC 의 개념에 대해 이해하고, 블로그에 정리한다
• Recoil 의 개념에 대해 이해하고, 블로그에 정리한다.
• 변수 네이밍 컨벤션에 대해 알아보고, 블로그에 정리한다.