모던한 느낌의 (공대생 스타일) 트위터를 만들어 보고 있습니다.

/// <summary>
/// Nomad Coder - 트위터 클론코딩 챌린지 - Assignment 03
/// @author         : CloudD
/// @last update  : 2025. 04. 12.
/// @update
///     - 2025. 04. 12 : 최초 작성. 
/// </summary>


1. 자기 소개

저는 현업에서 약 13년간 일했던, 흔한 개발자 중 한 사람입니다.
그런데 회사에서는 하던 방식으로만 일을 하다 보니, 
어느 순간 최근 개발 트렌드를 쫓아가지 못하는 사람이 되어버렸습니다.
"더 무뎌지고 더 둔해지면 안 되겠다" 는 생각이 들어, 
이전부터 알고 있던 몇몇 사이트에서 관심 가는 공부들을 진행했습니다.

그중 하나가 Namad Coder 사이트였고, 여기에서 React.js를 공부했습니다.
현재는 React challenge 를 진행하고 있으며, 오늘은 세번째 과제까지의 결과물을 담아서 중간 점검 글을 작성합니다.

두번째 과제는 Firebase Authentication 를 사용한 인증 기능 구현
세번째 과제는 Firebase Database(Firestore) 를 사용한 tweet list 기능 구현
이었습니다.
이 글에는 두번째/세번째 과정에서 배운 것들을 담아 보려고 합니다.
시간 관계상, 간략하게 한번 적고 추가로 업데이트를 해야할 것 같습니다.


2. 현재 상태

지금은 트위터 클론코딩 강의를 들으며 challenge 를 진행하고 있습니다.

Authentication 을 사용해서, 회원가입/로그인/비밀번호 초기화 등을 구현

Firestore 를 사용해서, 트윗 리스트를 구현


첫번째 과제를 올렸던 와이어 프레임과 비교하면...

1. 좌측에 더 많은 메뉴가 추가 되어야 합니다. 
  - 지금은 Bookmark, Notification, Setting 등의 메뉴는 아예 만들어 지지 않았습니다.
  - 현재는 icon 만 표시되고 있는데, menu text 도 함께 출력되어야 합니다.

2. 트윗 리스트에도 몇 가지 기능이 추가되어야 합니다. 
  - bookmark 기능이 구현되어 있지 않습니다.
  - 작성 시간이 표시되고 있지 않습니다.

3. 우측에 검색 폼이 추가 되어야 합니다.
  - 우측 영역은 아직 시작도 하지 못했습니다.

결과적으로 아직은 많이 미흡한 상태입니다.
그래도 처음 배운 React.js 를 가지고 뭔가를 만들어 가고 있다는 것은 꽤나 고무적입니다.

현재까지 진행된 상세한 내용이 궁금하시다면, 

위 링크를 통해 '트윗 타임라인 관련 기능 구현' 까지 진행된 코드를 확인하실 수 있습니다.


3. 기타 사항

아쉬운 부분입니다만, 
노마드 코더님은 트위터 클론코딩 강의에서는 Firebase Storage 라는 기능을 사용해서 이미지 업로드를 구현하셨지만, 현재는 이 기능이 유료로 변경되어 저는 이것을 사용하지 못했습니다.

대신 이미지를 base64 형태로 변경해서, 트윗을 작성할 때 함께 저장하도록 처리했습니다.
그러다 보니 1MB 를 초과하는 이미지는 업로드 할 수 없다는 문제가 생겼습니다.
혹시, 다른 방법을 아시는 분이 계시다면 댓글 남겨주세요.


4. 마무리...

이제 challenge 도 며칠 남지 않았습니다.
처음이라 여러모로 어렵기도 하지만, 끝까지 잘 마무리하겠습니다.

그리고 이 글은 과제 제출을 위해 조금 급하게 작성되었습니다.
추후 과정에 대한 내용들도 업데이트 될 예정입니다.

CloudD

예술하는 프로그래머, 코딩하는 예술가

댓글 쓰기

다음 이전