Community

개발자 99% 커뮤니티에서 수다 떨어요!

← Go back
[일반부문] Clone Twitter : 클론 트위터 챌린지 참여해요!
#twitter_clone
2년 전
2,394
6

1. 챌린지 결과물

"Clone Twitter"

URL : https://pak-fuse.github.io/react-clone-twitter/#/

undefined

undefined

undefined

2. 자기소개 : 커리어전환을 위해 코딩을 공부하고 있어요. 때로는 이게 왜 안되냐며 머리를 쥐어뜯기도, 잘 될 때는 뿌듯해하고 즐기며 하고 있어요. 최근에 리액트와 리덕스 공부를 하고 있는데 잘 이해 안가는 부분이 있어 강의를 찾아보다가 엄청난 양질의 무료강의를 발견하고 리액트, 리덕스 강의를 쭈욱- 들었어요. 그러다가 때마침 챌린지를 발견해서 참가해요!

3. 서비소소개 : 완전 기본에 충실합니다! 홈 화면에서 트윗을 작성하면 유저가 작성한 트윗과 유저의 사진, 올린 시간을 볼 수 있어요. 프로필 화면에서는 본인의 프로필 사진, 이름, 자기소개를 수정할 수 있으며 본인이 썼던 트위터의 목록을 확인할 수 있으며, 수정 또는 삭제가 가능해요. 좋아하는 색을 듬뿍 담아서 디자인을 했고 탭에 파비콘 보이는 것도 좋아해서 그것도 바꿨어요.

(+) 각 트위터마다 하트 누를 수 있는 기능을 추가했으며 반응형이 되도록 CSS를 수정했습니다. 그리고 친구가 앱을 테스트할 때, 트윗의 사용자 이미지 누르는 것을 보고 사용자의 이미지를 눌렀을 때 해당 사용자의 프로필로 이동하여 이름과 자기소개 및 그동안 보낸 트윗을 볼 수 있도록 수정했습니다.

4. 개발 과정 : 파이어베이스가 업데이트 되면서 니코샘이 강의하신 내용의 코드와 달라서 그 부분을 많이 헤맸는데 이 부분은 파이어베이스에서 제공하는 문서를 읽으면서 코드를 짰습니다. 자기소개를 적고 업데이트 하는 부분을 어떻게 하면 좋을까 고민을 했는데 어찌 구현은 했지만 어쩔 때는 보이지 않는 버그가 있는 거 같아요... 그리고 처음부터 끝까지 제가 원하는 디자인대로 스타일링 했는데 계획을 세우지 않고 무턱대고 시작해서 시간이 오래 걸렸어요 ㅠ_ㅠ 다음부터는 스타일링도 계획을 세우고 겹치는 건 재사용해야겠구나 다짐했습니다. 아, 그리고 제일 하고 싶었던 건 트윗에 좋아요를 누르고 적립(?)하는 방식이었는데 제 머릿 속에서 로직을 짜고 여러 번 시도해도 버그를 잡지 못해서 그 부분은 삭제했어요. 이 부분은 조금 더 연구해봐야 할 거 같아요.

(+) 배포하고 나서 모든 글과 사진이 로그인한 유저로 보이는 버그를 잡았습니다. 버그의 원인은 Home에서 로그인한 유저의 정보를 다른 컴포넌트에 다 써서 보여주는 것 조차도 그 정보를 가져와서 쓰는 게 문제였어요. 그래서 새로운 트윗을 작성할 시 오브젝트로 만들 때 로그인한 유저의 이름까지 넣고, 그 유저의 이름이 출력될 수 있도록 했더니 수정 되었습니다. 버그 언급해주신 분들 고맙습니다!

5. 앞으로의 계획 : 정말 노마드 이벤트 덕분에 파이어베이스를 이용한 앱을 만들 수 있었어요. 이렇게 직접 데이터베이스를 만들지 않아도 구현할 수 있는 방법이 있는 줄은 생각하지 못했거든요. 에러를 해결해나가면서 좋은 공부했습니다! 업으로 삼을 수 있도록 더 열심히 해보려구요. 아, 그리고 진짜 포폴도 하나 얻었어요. 고맙습니다 :)

6 comments