🔗 최종 배포: https://hwitter-5e2c0.web.app/

🔗 github: https://github.com/hheeseung/hwitter

🛠 개발 스택: React.js, Styled-Components, Firebase(Firestore, Storage, Hosting)

사용 폰트: Pretendard

자기소개

안녕하세요! 프론트엔드 취준생입니다. 개인적으로 해보고 싶은 다른 프로젝트가 있는데, 그걸 하기에 앞서서 Firebase에 대해 좀 다뤄봤으면 좋겠다는 생각을 했고 시기적절하게 트위터 클론 챌린지가 열려서 참여하게 됐어요. 사실... 이전에 트위터 클론 챌린지에 참가 신청을 두어번 정도 했었는데 저의 게으른 마음과 까먹음 이슈로 인해 기회를 날려버렸어요. 이번엔 꼭 완주해보자는 것을 목표로 삼아 2주동안 열심히 따라갔습니다! (중간점검 제출은 까먹어서 못한건 비밀)

서비스 소개

새로운 서비스를 만들어볼까 싶다가도 2주동안 하기엔 시간적으로 여유가 없고 결국 또 포기할 것 같은 마음이 들었습니다. 그래서 그냥 기존 Twitter 서비스에 제 이름 이니셜만 하나 끼워 넣어서 Hwitter로 이름짓고 비슷한 서비스를 구현해보기로 했습니다! 제가 처음에 정했던 MVP 기능에는 게시글의 CRUD와 사용자 프로필 수정, 반응형 구현 정도를 목표로 삼았어요.

• 로그인, 회원가입 화면

소셜 로그인은 구글 로그인을 사용했고, 이메일 로그인 시 비밀번호 재설정 기능까지 추가했습니다.

• 홈 화면

맨 오른쪽 Request, Contacts는 더미 데이터를 넣어서 화면만 구현하였습니다. 더불어 사용자 포스트의 댓글, 좋아요 등등 상호작용 역시 아직은 스타일만 넣은 상태입니다. 상호작용 관련해서는 기간을 좀 더 잡고 구현해볼 생각이에요!

• 사진 목록

사용자들이 등록한 사진을 모아볼 수 있는 탭입니다. 사진을 클릭했을 때 전체 화면으로 사진을 보여줄 수 있도록 추가구현을 생각하고 있어요.

• 사용자 프로필 화면

사용자 관련한 포스트와 닉네임을 조회할 수 있는 프로필 페이지입니다. 사용자 닉네임을 변경했을 때 하단에 작게 변경되었다는 알림을 넣었습니다.

• 모바일 반응형

반응형 화면 구현하고 나서 직접 모바일에서 확인해봤는데 다행히 잘 나오는 것 같네요...!

다른 트위터 클론코딩 하시는 분들을 위한 TIP

팁... 이라기엔 제가 너무 부족하지만 강의는 챌린지 하기 전에 꼭 한번 다 들어봐야 좋은 것 같아요!

이번 컨테스트를 진행하며 느낀 점

강의를 한번 보고 했는데도 정말 어려웠습니다 ㅠㅠ 역시 강의 보면서 따라 치는거랑 직접 해보는건 하늘과 땅 차이인 것 같아요. 내가 생각한 대로 구현을 할 수 있도록 연습을 정말 많이 해야겠다는 생각이 많이 들었습니다! 완성시키고 싶은 기능 몇가지를 시간을 좀 더 잡고 구현해보도록 해야겠습니다 ㅎㅎ 그래도 이번엔 포기하지 않고 끝까지 해냈다는 것에 큰 만족을 느끼고 있네요.