20210714 리팩토링 Instagram 클론 프로젝트 by Redux-toolkit06 : 프로필 수정 구현, profile 이미지 url 처리에 관한 문제 발생과 고민
리팩토링 Instagram 클론 프로젝트 by Redux-toolkit06
📄 프로젝트 설명
이 프로젝트는 기존에 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개만 가능했음 (욕심내면, 여러개 슬라이드 형식으로 가능하게 하고 싶음)내용 영역: 게시글 내용
글 작성 화면: 글을 작성하는 화면현재 유저 프로필 화면: 로그인한 현재 유저의 게시물과 대략적인 프로필를 표시하는 화면유저 프로필 화면: 유저의 게시물과 프로필을 확인 할수 있는 화면 (피드 게시글 작성자 유저 이름을 눌러 유저 프로필 화면으로 이동)유저 프로필 수정하기: 유저 프로필을 수정하는 화면
네비게이션 바: 앱로고 - 피드(Home)탭 - 글 작성탭 - 현재 유저 프로필(프로필 수정, 프로필 이동, 로그아웃) 탭- Navigation-profile 눌렀을 때 로그아웃, 프로필 수정, 프로필 이동 드롭 다운 필요
로그아웃
📅 TIL (Today I Learned, 오늘 깨달은 것들)
2021.07.14 사항
작업 개요
Profile 수정 폼 구현- post 수정 폼과 같은 update 라우트를 공유하게 함 (라우트를 효율적으로 쓰기 위해서)
- 수정 버튼 클릭시 updateSelector로 값을 보내어 update 라우트에서 post인지, profile인지 구분함
- user displayName, photoURL만 변경시킬수 있게 해놓았음
- user profile info도 구현 필요
- firebase의 경우 displayName과 photoURL만 지원하기 때문에 다른 사항을 넣으려면 데이터 베이스를 짜야함
- post 수정 폼과 같은 update 라우트를 공유하게 함 (라우트를 효율적으로 쓰기 위해서)
고민, 생각 및 깨달음
고민
- 소셜 로그인시 받아오는 프로필 사진의 url 처리 문제
- 프로필 사진 변경시 firebase Storage에 파일을 올리고 url을 가져오는 방식인데, 프로필 사진 변경시 기존의 storage로 들어간 이미지 파일을 제거해야함
문제: 소셜 로그인시 받아오는 프로필 사진의 url은 storage에 올라가지 않기 때문에, 단순히 전 프로필 url을 storage에서 지운다고 하면, 소셜 로그인시 받아오는 url인 경우에는 storage에 없기 때문에 error를 일으킴- 생각해 볼수 있는 방안
- 생각01: 애초에 소셜 로그인 프로필을 받지 않는다.
- 생각02: 소셜 로그인으로 처음 가입하여 들어가는 경우에, 해당 프로필 이미지를 storage에 넣는다. (처음 가입하는 때를 찾기가 힘듦)
- 생각03: 소셜 로그인 프로필의 url을 storage에서 찾아서 없으면 지우기를 넘어감
- url의 존재를 보려면, 결국엔 error로 확인 가능함
- 에러 처리시 존재하지 않는 에러코드일 경우 그냥 넘어가고, 그외의 에러는 받아서 위로 올려서 에러 반환시켜야 함 (try-catch를 한번더 씀으로)
- 3번 방안이 제일 유력함
깨달음
- 오늘은 여러 조건에서 방어코드로 빨리 빠져나오게 하는 처리를 하면서 논리연산자에 대한 조건 설정에 대한 깨달음을 얻음
- 프로그래밍을 만드는 설계법과 디자인 패턴에 대해서 공부할 필요가 있음을 느낌
- TEST 코드 짤 생각에 아득함, 진작에 TEST 코드 위주의 개발을 했어야 했음을 느낌
- 일단, 개발하고 나중에 TEST 코드 짜면서 힘든걸 경험해보고 TDD의 절실함을 깨달아야 할듯 하다. 마음은 TEST 코드 짜라고 하지만, 개발이 너무 길어질 것 같음
다음에 필요한 사항
- user 검사를 실시하여 수정, 삭제 버튼 나타나지 않게 접근 막기
- slice 모듈화하여 관리하기, 기능별로 재편성 필요함
- getImageUrl 위치 옮기기 공통 사용 데이터 쪽으로 올려야 함
- Navigation-profile 눌렀을 때 로그아웃, 프로필 수정, 프로필 이동 드롭 다운 필요
- Post에 글 수정 메뉴 버튼을 통한 모달 구현
- user profile info도 구현 필요