TIL | 10/27/2022

#리액트 트위터 앱 기능 구현 완료

리액트로 트위터의 CSS스타일링을 제외한 앱의 기능을 구현했다.

오늘은 마이 프로필에서 트윗의 수정/삭제가 가능하도록 했고, 프로필 이름/사진을 업데이트 할 수 있도록 했다.

  /* onSubmit */
  /* displayName 업데이트 */
  const onSubmit = async (e) => {
    e.preventDefault();
    if (userObj.displayName !== newDisplayName) {
      await updateProfile(authService.currentUser, {
        displayName: newDisplayName,
      });
    }
    setNewDisplayName('');
  };
  /* onSubmitImg */
  /* user이미지 업데이트 */
  const onSubmitImg = async (e) => {
    e.preventDefault();
    let userImageUrl = '';
    if (userImage !== '') {
      const storageRef = ref(storage, `${userObj.uid}/${uuidv4()}`);
      const response = await uploadString(storageRef, userImage, 'data_url');
      userImageUrl = await getDownloadURL(ref(storage, response.ref));
    }
    await updateProfile(authService.currentUser, {
      photoURL: userImageUrl,
    });
    setUserImage('');
  };

firebase의 updateProfile 기능을 사용해서 userObj의 displayName과photoURL 메소드를 이용해 각 키에 값을 넣어주면 된다.
displayName에는 state로 생성한 newDisplayName을
photoURL에는 스토리지에서 업로드하고 다운로드한 사진파일의 링크를 넣어주면 된다.

          <Link to='/profile'>{userObj.displayName} Profile</Link>
          {userObj.photoURL && <img src={userObj.photoURL} width='50' height='50' alt='' />}

그리고 네비게이션 컴포넌트에서 userObj의photoURL메소드를 이미지의 소스로 불러와 넣으면 된다!

구현한 기능은 다음과 같다.

• 인증(로그인 및 가입)
• 게시물 업로드(firebase DB사용)
• 게시물에 사진도 같이 업로드(firebase Storage사용)
• 게시물 수정/삭제
• 게시물 시간 순으로 정렬
• 마이프로필에 내가 올린 글만 나타내기(uid 사용)
• 마이프로필에서 프로필 이름/사진 업데이트

내일은 CSS와 나머지 자잘구리한 기능들은 업데이트해서 완료할 예정이다. 이번 트위터를 제작하면서 사용했던 모든 기능들은 지난주에 제작한 카카오톡에 전부 혼자 적용해봐야한다. 화..화이팅!

#자기소개서 작성

10월이 다 지나가서야 써내려가본 자기소개서.. 글을 부정적이게 시작하면 안되는 것을 유념해서 천천히 써봤다.

성장과정과 성격 및 장단점은 실제 나의 상태와 강점 및 약점을 적었고, 기술역량과 포부같은 것은 내가 사회경험과 지금 받고 있는 교육을 토대로 회사에 입사해서 잘 활용 할 수 있는 것들을 작성 해봤다.

물론 첨삭해야겠지만 나름 술술 써내려갔다는 점에서 평소에 떠오르는 것들을 정리해두길 잘했다고 생각한다.

오늘 끝, 내일 안녕