프로젝트를 마무리하고 헐레벌떡 글을 쓰다보니 마지막 주자가 된 것 같네요... ㅎㅎ
(쓰다보니 모르고 창이 꺼졌는데, 자동저장도 되더라구요.. 짱... 👍)
길더라도, 재밌게 봐주시면 감사하겠습니다!

1. 자기소개

안녕하세요! 프론트엔드 개발자를 꿈꾸고 있는, 이제 막 졸업을 앞두고 있는 학생입니다.

다른 코딩들 보다도 내가 구현한 대로 바로 바로 보여지는 웹 개발에 흥미를 느끼고, html, css, javascript를 접하게 되었고, 웹 개발 분야를 공부해보기 시작했습니다.

React를 제대로 공부한 지는 반년이 안된 것 같습니다. React가 배우기 쉽다고는 하지만, 도무지 공부하고 공부해도 막히는 부분이 계속해서 생기면서, 막막함을 느끼게 되었습니다.
그러던 중, 니꼬님의 유튜브를 챙겨보다가 인스타 팔로우까지 하게 되었고, 거기서 Twitter 클론 코딩에 대해 알게 되었고, 하나하나 따라해보면서 이 컨테스트에 참여하게 되었습니다. 😃

2. 서비스 소개

배운 걸 토대로 Twitter와 전혀 다르게 구현을 해볼까 싶다가도, 'Twitter나 제대로 클론해보자는 마음'으로 이 프로젝트를 시작했습니다.

(Twitter와 제 이름을 합쳐 Jwitter라고 이름 지었고, Tweet -> Jweet 으로 봐주시면 됩니다.)

한 것에 비해 설명이 꽤 길지만, 어차피 결과물 정리도 해야하기 때문에 겸사겸사 한번 작성해보도록 하겠습니다.

✅ 결과물 URL : https://jeeseongmin.github.io/jwitter
✅ 결과물 캡쳐 및 기능 소개 :

(1) 로그인 화면

로그인은 트위터 화면과 최대한 비슷하게 구현해보았습니다.

아래 가입하기를 누르게 되면, 회원가입을 직접 진행할 수 있도록 로그인 화면과 회원가입 화면을 구분해놓았습니다.

(2) 메인 화면 및 Leftbar

메인 화면도 실제 트위터 페이지를 열심히 참고해서 만들어보았습니다.
좌측에 Leftbar는 Notification과 more을 제외하면 모두 페이지 이동이 가능합니다.

(2-1) Home

Home에서는 모든 트위터 게시물이 작성된 시간 순서대로 정렬이 되어 나타납니다.

(2-2) Explore는 말그대로 탐색할 수 있는 페이지입니다.

이 페이지는 두 개의 탭으로 나뉘게 되는데, Jweets 탭과 Users 탭입니다.
Jweets 탭은 유저들이 게시한 게시물들을 랜덤하게 탐색할 수 있고,

Users 탭은 어떤 유저들이 있는지 랜덤하게 탐색할 수 있습니다.

(2-3) 📗Bookmark 는 모아보고 싶은 Jweet들이 있으면 Bookmark 할 수 있는 기능이 있는데, 내가 Bookmark 한 Jweet들을 한꺼번에 볼 수 있는 페이지입니다.

아래 Bookmark 표시를 클릭하게 되면 해당 페이지에서 사라지게 됩니다.

(2-4) Popular 페이지는 좋아요 개수에 따라 정렬된, 인기 많은 Jweet😍들을 상단부터 볼 수 있는 페이지입니다.

그래서 현재 반응이 좋은 게시물들을 모아볼 수 있는 페이지입니다.

(2-5) Profile 페이지입니다.

개인적으로 Profile 페이지가 가장 마음에 드는데, 그 이유는 아기자기한 기능이 많기 때문입니다. 😁

먼저 배경사진은 고정으로 해두었지만, 우측의 [Edit Profile] 버튼을 클릭해 프로필 사진을 언제든지 변경할 수 있습니다.

변경할 수 있는 것은 프로필 이미지, 이름, 설명 총 세 가지로 구성됩니다.

그리고 유저의 프로필에서는 실제 Twitter처럼 그 사람이 어떤 Jweet을 올렸고, 어떤 Jweet에 like를 표시했는지를 모두 확인할 수 있습니다.

(2-6) Jweet 작성 버튼

왼쪽 중하단을 보게 되면, Jweet이라고 써있는 보라색 버튼이 보입니다.

이 버튼을 누르게 되면, 현재 있는 곳에서 모달 창을 통해 Jweet을 작성할 수 있습니다.

작성된 Jweet은 바로 업로드 됩니다.

만약 작성하다가 모달을 끄려고 하거나, 좌측 상단의 X 버튼을 눌렀다면 해당 Jweet을 버릴 것인지 물어보는 모달이 나타납니다.

해당 모달에서도 Discard를 누르게 되면, 작성중인 Jweet이 영구 삭제됩니다.

(2-7) Profile 모달

좌측 하단을 보게 되면, 현재 로그인되어있는 프로필을 볼 수 있습니다.

클릭하게 되면, Logout 할 수 있는 버튼이 나타납니다.

로그아웃 버튼을 클릭하게 되면, 로그아웃을 할 것인지 물어보는 모달이 나타나서 실제로 로그아웃을 진행할 수 있습니다.

(3) Rightbar

Rightbar는 어떻게 구상을 할지 꽤 고민을 해봤습니다.

고민 끝에 검색 기능, Jweets 추천 기능, Users 추천 기능을 생각해봤습니다.

(3-1) Search

검색 기능은 Jweet과 User를 모두 검색할 수 있습니다.

먼저, 존재하는 User name text를 입력하게 되면, 해당 유저의 정보가 나타나게 됩니다.

유저 박스를 클릭하게 되면 해당 유저의 프로필 페이지로 넘어갑니다.

다음으로, 존재하는 Jweet text를 입력해보면, 현재 해당 text를 가지고 있는 Jweet들을 불러옵니다. 여기서는 Jweet 작성자의 프로필 사진도 같이 불러옵니다.

이 또한 Jweet 박스를 클릭하면 해당 Jweet의 Detail 페이지로 넘어가게 됩니다.

이 부분은 재미삼아 넣어본 건데, all이라는 text를 입력하면 현재 존재하는 모든 User와 Jweet들을 모두 나타내줍니다.

scroll 바에 짤려서 중간 부분을 캡쳐해봤는데, 실제로 들어가서 검색해보시기 바랍니다 ㅎㅎ

(3-2, 3-3) Jweet 추천, User 추천

원래 Twitter처럼 어떤 기준을 가지고 추천 기능을 넣어야 하지만, 유저 추천을 할만큼의 데이터가 없기 때문에 제 맘대로 기준을 정해봤습니다.. ㅎㅎ

일단은 user 추천과 Jweet 추천 모두 랜덤한 순서로 보여줄 수 있도록 구상을 해봤습니다. 그래서 [show more...] 을 누르게 되면, 위에서 소개했던 Explore 페이지로 넘어가게 됩니다.

Jweet 추천에서는 아래에 Popular Jweets이라는 워딩이 보일 것입니다. Like가 많은 순서대로 정렬을 했음을 보여줍니다.

그리고 우측에 있는 설정(톱니바퀴) 버튼을 클릭하게 되면, 아래와 같이 모달 창이 나타나는데, 정렬 방법을 바꿀 수 있는 모달을 의미합니다. 랜덤으로 변경하게 되면, 또다시 Like로 변경할 수 있도록 설정창이 구성됩니다.

(4) 기타 Component 소개

지금까지만 해도 상당히 많은 캡쳐때문에 스크롤이 길어졌을테니, 이외의 component들은 빠르게 소개하도록 하겠습니다.

(4-1) Like 기능

Jweet에 유저마다 한 번의 좋아요 표시를 할 수 있습니다.

(4-2) Reply 기능

Jweet에 Reply를 작성할 수 있습니다. Reply도 Jweet과 마찬가지로 사진과 이모지 입력이 가능합니다. (이모지 부분은 무조건 끝에 추가되는 에러를 발견해서 최대한 빨리 고쳐보도록 하겠습니다..)

(4-3) Detail 페이지

Jweet을 자세히 들여다볼 수 있는 Detail 페이지입니다.

Reply는 Home 화면에서 모달로도 입력할 수 있습니다.

Jweet 하단 좌측에 댓글 표시를 클릭하면 됩니다.

(길었지만, 끝까지 봐주신 분들 감사합니다 😂)

3. 개발 과정 (어려웠던 점과 해결방법)

어려웠던 부분은 firestore를 사용하면서 실시간으로 데이터가 반응하도록 만드는 게 생각보다 힘들었습니다. 머릿속에서는 당연히 반응할 거라고 생각했던 게 안되고, '이 Component가 안되니까, 저거도 고쳐야되네?' 가 끊임없이 머릿속을 괴롭혔습니다.

그래도 Firestore 공식 문서를 참고하면서 이렇게도 해보고, 저렇게도 해보면서 점점 에러가 걷혀가는 과정이 보람있었습니다.

프로젝트를 진행하면서 신경 썼던 부분은,
'어떻게 하면 유저 입장에서 편하게 사용할 수 있을까?',
'어떻게 하면 트위터와 최대한 비슷하게 기능을 구현할 수 있을까?' 였습니다.

이런 생각을 계속 하다보니 만들어 놓은 기능이 맘에 안들고, 덕분에 예정해놓았던 여러 작업(Follow, ReJweet, 에러 및 버그 수정) 을 뒷전으로 미루게 되었고... 제출하게 되었네요.

아직도 아쉬움이 있지만, 이렇게 정해진 기간이 없었다면 아마도 끝없는 욕심에 프로젝트를 끝마치지 못했을 수도...

아무튼 이번 트위터 클론 프로젝트는 어떤 클론 프로젝트보다도 재밌게 마무리되었던 것 같아서 뿌듯합니다. 이번에 처음 사이트에 가입해서 니꼬님의 영상 강의를 트위터 클론 코딩으로 처음 접했는데, 상당했습니다... 저만 알고 싶을 정도로요..!!

좋은 강의 만들어주셔서 감사합니다! 😍

4. 앞으로 계획

일단은, 다른 분들의 작품을 하나하나 살펴볼 예정입니다. ㅎㅎ

그리고 자고 일어나서 완성시키지 못했던 기능들을 마무리할 것이구요.

이후에는 Javascript가 탄탄하지 못하다고 느끼기 때문에 니꼬님의 바닐라 Javascript 강의와 함께 다른 강의들도 슬며시 들여다보면서 열공하도록 하겠습니다!

린님과 니꼬님, 컨테스트 만들어주셔서 감사하고, 함께 컨테스트했던 분들도 고생하셨다는 말 전하고 싶습니다! 👊