20210723 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit12 : 현재 유저&다른 유저 profile Posts, Info 구현, 뒤로가기 제한을 위한 history관리
리팩토링 Instagram 클론 프로젝트 by Redux-toolkit12
📄 프로젝트 설명
이 프로젝트는 기존에 React & firebase를 통해서 만든 인스타그램 클론 프로젝트 리팩토링 프로젝트 입니다. (해당 프로젝트는 프로젝트 카테고리에서 확인 가능합니다.)
해당 프로젝트에서는 redux-toolkit(Slice 모델)을 사용하여 상태관리를 구현하고 있습니다.
더불어 나중에, styled component나 sass 중에 채택하여 css 작업을 할 예정 입니다.
💻 화면 개요
체크는 현재 기능적으로 구현된 상황을 의미합니다.
로딩 화면 또는 Component: 앱 실행 초기화 작업시 로딩 또는 다른 작업시 사용할 로딩 화면 및 Component
로그인 화면: 기본 Email 로그인, Social 로그인, 로그인 에러Email 로그인: Email, Password input, 로그인 버튼Social 로그인: google로그인 버튼, github로그인 버튼로그인 에러: Email로그인, google로그인, github 로그인 에러 발생시 사용자에게 출력
회원가입 화면: Email 로그인을 위한 계정을 만드는 화면, 회원가입 에러Email 형식 가입: Email, Password input, 회원가입 버튼- 가입시 사용자 Nickname 지정 input (추가 사항)
피드 화면: 사용 유저의 모든 게시글을 표시하는 화면게시글 박스:타이틀 영역: 최상단의 작성자 사진 + 이름, 게시글 수정 탭편집버튼: 글 수정하기, 삭제하기 모달 -> 해당 버튼 누르면 삭제 또는 수정 페이지로 이동(아니면 모달이 수정하는 모달로 변경)삭제하기수정하기
사진 영역: 기존에는 1개만 가능했음 (욕심내면, 여러개 슬라이드 형식으로 가능하게 하고 싶음)내용 영역: 게시글 내용
글 작성 화면: 글을 작성하는 화면
현재 유저 프로필 화면: 로그인한 현재 유저의 게시물과 대략적인 프로필를 표시하는 화면유저 프로필 수정하기: 유저 프로필을 수정하는 화면 (userImage, userDisplayname, userIntro)작성 글: 유저가 작성한 작성 글의 image 표 -> 클릭시 post detail작성 글 detail view: image 표에서 해당 이미지 클릭시 해당 글 detail view 화면
로그아웃
다른 유저 프로필 화면: 다른 유저가 작성한 글의 유저 이름을 클릭하여 해당 유저의 프로필 화면 구현프로필 보기: userImage, userDisplayname, userIntro작성 글: 유저가 작성한 작성 글의 image 표 -> 클릭시 post detail작성 글 detail view: image 표에서 해당 이미지 클릭시 해당 글 detail view 화면
네비게이션 바: 앱로고 - 피드(Home)탭 - 글 작성탭 - 현재 유저 프로필(프로필 수정, 프로필 이동, 로그아웃) 탭- Navigation-profile 눌렀을 때 로그아웃, 프로필 수정, 프로필 이동 드롭 다운 필요
📅 TIL (Today I Learned, 오늘 깨달은 것들)
2021.07.22 사항
작업 개요
현재 유저의 Profile 페이지, 자신이 작성한 글의 image 테이블 구현- 이전에 현재 유저의 profileInfo를 가져 왔다면, 이번에는 profilePostList를 가져옴 (둘은 비동기적으로 구현)
- 나중에 image 클릭시 post를 스크롤해서 볼수 있는 피드 형태의 detail을 볼수 있게 하고자 함
- ProfilePostImages 컴포넌트
글 작성자 프로필 화면 이동 (user 페이지로 이동)- 작성된 글의 작성자 클릭시 작성자 이름으로 된 dynamic route로 이동
- 작성자 이름을 useParam으로 받음
- 작성자 profile 가져오기
- 작성자 이름을 기준으로 post list 와 userInfo를 가져옴 (비동기)
- 본인 글의 작성자 누르면 본인 profile로 가게 조건을 걸어 둠
사용자의 잘못된 뒤로가기 제한을 위한 history.replace 사용- post, profile의 update 이후 뒤로 가기를 막기 위해서, replace를 사용 함
- 하지만 완전히 history를 제거할 수 없음, 로그아웃 및 로그인 후 뒤로가기 버튼 클릭시 url의 변경은 없기 때문에 영향을 주지는 않음 (로그인 state 값으로 router의 존재를 제어하기 때문)
다음에 필요한 사항
- Navigation-profile 눌렀을 때 로그아웃, 프로필 수정, 프로필 이동 드롭 다운 필요
- 작성자 이름 고유화 작업 필요
- 선택된 유저의 profile을 가져올 때, 중복 이름이면 잘못 가져오는 에러를 범할 수 있음
- 작성자 이름 설정시 이전에 있는 이름인지 확인하는 작업이 필요 함
- profile 정보 요청 시기 조정
- 더 빠른 연산을 위해서, 화면이 render 되고 profile에 관련된 정보를 가져오지 말고 profile 보기위해 버튼을 눌렀을 때 부터 미리 profile 정보를 요청하게 하자
- profile 요청 작업 보일러 플레이트 코드 줄이기
- 현재 유저와 특정 유저 profile을 요청하는 작업이 비슷하여 보일러 플레이트 코드 발생함
- 조건을 주어 특정 유저 profile 요청 작업으로 통합이 필요함
- 작성글 detail view
- 현재 유저, 특정 유저 postList의 피드 구현 필요
- redux state 식별자 관리(변수명 관리)
- 각 redux에서 사용하는 state의 이름을 통일감 있게 관리 필요