1. 자기소개

안녕하세요! 프론트엔드 개발자를 꿈꾸고 있는, 취준생(백수)입니다.

React를 제대로 공부한 지는 반년이 안된 것 같습니다. React가 배우기 쉽다고는 하지만, 도무지 공부하고 공부해도 막히는 부분이 계속해서 생기면서, 막막함을 느끼게 되었습니다.
마냥 이론만 공부하자니 너무 답답해서 내가 가지고 있는 지식과 니코쌤의 클론코딩 강의를 통해 조그마한 결과물이라도 만들어보자 싶어 트위터 클론코딩 챌린지에 참여하게 되었습니다.

처음에 기획할때는 진짜 다양한 기능들 만들어보고 싶었는데 생각보다 시간이 부족하네요.. .ㅠㅠ

결과물은 미약하지만 앞으로 시간 날때마다 디자인적인 부분이나 기능적인 부분들을 계속해서 개선할 예정입니다!!

2. 서비스 소개

배운 걸 토대로 Twitter와 전혀 다르게 구현을 해볼까 싶다가 실력이 너무 부족함을 깨닫고 Twitter 나 제대로 클론 코딩 해보자는 마음으로 만들어보았습니다.

서비스 이름은 Twitter와 제 이름을 합쳐 Kwitter라고 이름 지었습니다. :D

✅ 결과물 URL : https://temporary-c0c84.firebaseapp.com/

✅ 결과물 캡쳐 및 기능 소개 :

(1) 로그인 및 회원가입 화면 페이지

설명: X와 최대한 비슷하게 만들어봤습니다.

로그인 ,회원가입 버튼은 모달창을 이용해 구현해보았습니다.

2)메인화면 페이지

설명: 홈, 프로파일, 북마크, 로그아웃 버튼을 구현해보았습니다.

게시물에 사진, 글을 넣어 올릴 수 있습니다.

현재 사용자라면 자신의 게시물을 삭제하고 수정할 수 있습니다.

다른 사용자의 게시물에 좋아요, 북마크, 댓글 기능을 이용할 수 있습니다.

3)북마크 페이지

사용자가 북마크한 게시물들을 보여주는 페이지입니다.

아쉽게도 최근에 북마크한 게시물 순서로 정렬하지는 못했습니다...

4) 댓글 기능

올린 게시물을 클릭하면 그 게시물에 새롭게 댓글을 달 수 있습니다.

마찬가지로 댓글에도 좋,댓,북 기능을 수행할 수 있습니다.( 공유기능은 시간상 못함..)

4-1) 댓글 모달

X에 들어가지 않고 댓글을 남길 수 있는 기능이 있길래 따라 만들어봤습니다.

댓글 이미지를 누르면 메인화면에서 해당 게시물에 댓글을 남길 수 있습니다.

5) 프로파일 페이지

사용자가 올린 게시물이 모여져 있는 페이지입니다.

5-1) 프로파일 사진 및 이름 변경

사진과 이미지를 수정할 수 있다.

어려웠던 점

1. 비슷하게 쓰이는 코드들이 보이는데 이런 코드들은 재사용하면 좋을 것같다는 생각을 했지만 정확한 방법을 몰라서 노동을 했던것같습니다.

2. 이미지를 변경하였을때 즉각적으로 반영되게 하고싶었는데 해결하지 못해 힘들었던것 같습니다.

이번 컨테스트를 하면서 느낀점

이런 조그마한 기능들을 만드는데도 엄청난 고뇌와 고통을 느꼈던 것 같습니다..

물론 react의 발톱때 만큼정도의 지식으로 이런 사이트를 만들었다는 부분은 굉장히 흡족한것 같습니다.

상태관리에대해 더 공부해 더러운 코드들을 정리하고 싶고,

코드 리팩토링도 공부해야겠습니다 ㅎㅎ