[TIL] 내일배움캠프 React 과정 2022.11.25

Today I Learned

• 헤더에 프로필 이미지 뜨도록 수정, 함수 기능 추가
• CRUD 중 Read, Delete 공부하기
• 팀원들이 개별 작업한 모든 페이지 모아서 merge하기

 

 

해결하는 경험

프로필 이미지 저장 경로 수정하기

const imgRef = ref(storageService, `${authService.currentUser.uid}/${uuidv4()}`)

프로필 이미지를 업로드할 때 원래는 내 계정의 uid 폴더 안에 uuid 형식으로 이미지가 저장되는 방식이었다. 그런데 이렇게 되면 storage에 계정마다 폴더가 무한으로 생성되고 게시물 작성 시 업로드한 이미지와도 구분되지 않을 거 같아서 폴더명을 보기 좋게 수정하기로 했다.

 

  const imgRef = ref(storageService, "profile_image/" + uuidv4())

경로를 이렇게 수정하면 storage에 "profile_image"라는 폴더 안에 uuid(전 세계 유일한 ID) 형식으로 이미지가 저장된다.

 

 

 

메인 페이지에 다른 페이지의 구성요소를 불러오던 문제

어제 저녁에 발견했던 문제인데 merge 하는 과정에서 갑자기 글 상세 페이지에 들어가야 하는 요소가 메인 페이지에 뜨는 문제가 생겼다. 이 문제 해결을 위해서 해당 페이지를 담당한 팀원 분이 굉장히 고생하셨고 튜터님께도 물어보면서 결국엔 해결할 수 있었다. 해결 방법은 if 문을 사용해서 #post 페이지일 때에만 getPostContent 함수가 실행되도록 하는 것이었다.

window.addEventListener("DOMContentLoaded", () => {
  const hash = window.location.hash;
  if (hash === "#post"){
    getPostContent();
  }
});

 

 

 

게시물을 식별하기 위해 query string 이용하기

firestore DB에서 데이터를 가져와서 해당 게시물의 제목이나 내용, 사진을 띄우는 것에는 성공을 했는데 임시로 데이터를 불러오기 원하는 게시물의 문서 명을 그대로 복붙해서 구현한 것이었고 내가 원하는 것은 메인 페이지에서 특정 게시물을 클랙했을 때 그 게시물의 상세 페이지로 들어갈 수 있도록 각 게시물마다 특정한 id 값을 지정하는 것이었다.

 

어떤 방법이 있을까 고민하던 중에 강의를 들으면서 query string이라는 것을 알게 되었는데 이게 딱 내가 찾던 방식이었다! 아직 개념만 알고 있는 상태지만 이것을 구현해서 게시물마다 id 값을 지정해서 특정 게시물에 연결되도록 하면 될 거 같다.

 

 

 

메인페이지에 최신 게시물을 불러와서 띄우기

메인 페이지에 게시물 별로 카드를 만들어서 띄우고 싶어서 temp_html로 시도해봤는데 잘 안된다. 이 문제도 결국 if 문으로 해결할 수 있었다. main.js에 메인 페이지일 때만 getPostList라는 함수가 실행되도록 설정하니까 해결되었다.

 

 

 

헤더 버튼 중앙 정렬하기

수정 전

수정 후

원래 텍스트로 '프로필'이라고 되어있던 버튼에 현재 프로필 이미지다 뜨도록 수정하는 과정에서 글쓰기 로그아웃 버튼이 죽어도 중앙 정렬이 안된다. 놀랍게도 이거 해결하는 데 30분 넘게 걸렸다ㅎㅎ 해결 방법은 a태그와 이미지를 감싸는 div 태그에 height를 설정한 후에 align-items: center; 속성 값을 주는 것이었다.

.header__Profile {
  height: 70px;
  display: flex;
  align-items: center;
}

 

 

 

헤더에 프로필 페이지로 이동하는 링크 설정하기

<a href="#profile" onclick="route(event)">
   <img id="headerProfileView" src="/assets/transparentProfile.png">
</a>

프로필 이미지를 클릭하면 프로필 페이지로 이동하도록 설정하고 싶었는데 이렇게 하니까 갑자기 프로필 페이지로 이동하지 않고 #undefined 페이지로 이동해서 404가 뜬다.

 

<img id="headerProfileView" onclick="goToProfile()" src="/assets/transparentProfile.png">

export const goToProfile = () => {
  window.location.hash = '#profile';
}

결국 goToProfile이라는 간단한 함수를 만들어서 이미지에 연결함으로써 성공했다.

 

 

 

프로필 이미지 변경 시 헤더의 프로필 이미지도 바로 업데이트하기

헤더에 프로필 이미지를 띄우고 나서 거슬리는 부분이 생겼는데 프로필 페이지에서 프로필 이미지를 변경했을 때 새로고침을 한번 해야 헤더의 프로필 이미지도 같이 변경된다. 근데 나는 프로필 이미지를 변경했을 때 헤더의 프로필 이미지도 새로고침 없이 자동으로 변경되기를 원했기 때문에 여러 가지를 시도해봤다.

 

시도 방법 1

export const changeHeaderProfile = async () => {
  const newProfileImage = authService.currentUser.photoURL;
    document.getElementById("headerProfileView").src  = newProfileImage;
};

changeHeaderProfile라는 함수를 추가해서 if문으로 프로필 페이지일 때 이 함수가 실행되도록 코드를 수정해 봤다. 하지만 이 방법은 실패했다.

 

 

 

시도 방법 2

const newProfileImage = authService.currentUser.photoURL;
   document.getElementById("headerProfileView").src  = newProfileImage;

기존에 프로필 페이지의 프로필 이미지를 변경할 때 사용하던 changeProfileImage 함수의 then 메서드에, 그러니까 이 함수가 성공했을 때 위의 코드가 실행되도록 추가했다. 그랬더니 내가 원하는 기능 구현에 성공했다!

 

헤더의 프로필 이미지 변경에 주목해 주세요!

 

 

 

깊은 복사 VS 얕은 복사

팹(PAP) 주식회사의 협력사 특강에서 강사님(?)이 이런 개념을 알아두면 좋다고 언급하셔서 궁금해서 검색해 봤다. 아직은 검색만 해봤다. 내일 추가로 알아보기로 한다.

 

 

 

 

느낀 점

오늘은 저녁에 한번 현타(?)가 왔다. 그냥 모든 게 너무 지겹고 벗어나고 싶은 마음이 들었지만 한 시간 정도 자고 일어나서 다시 열심히 달렸다! 오늘 팀원들과 하루종일 소통하면서 팀 프로젝트에 많은 발전이 있었던 거 같다. 오전에는 처음으로 모든 개인 페이지를 모아서 merge를 했고, 이제 팀원들이 이 branch에서 작업을 해 나가는 중이다. 

 

그리고 firestore에 올린 모든 게시물을 메인 페이지에 불러오는 것에도 성공했다! 이제 큰 틀은 모두 잡힌 상태라 주말에는 css에 집중하고 구현한 기능들을 세부적으로 다듬으면 될 거 같다. 시간이 남으면 추가적으로 구현하기로 생각했던 부분들은 아마 포기해야 할 거 같다.

 

오늘 오후에는 팹(PAP) 주식회사의 협력사 특강이 있었는데 발표하신 분이 앱 개발 종합반에서 뵀던 강사님이라 혼자 속으로 반가워했다ㅋㅋ 네이버의 자회사이니 만큼 초봉도 엄청나고 복지도 좋은 거 같아서 저런 회사에서 일하면 어떨까 잠깐 상상해봤다ㅋㅋ 근데 취업은 아직 먼 얘기인 거 같고 일단은 지금 주어진 일에 최선을 다하기로 한다. 지금 밤 11시에 이 글을 작성하고 있는데 zep에는 아직도 40명이 넘는 동기들이 열정을 불태우고 있다. 다들 고생한 만큼 좋은 결과물이 나왔으면 좋겠다~!