Community

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

← Go back
[일반부문] 제목은 트위터 클론코딩으로 하겠습니다. 근데 이제 🦑오징어게임🎮을 곁들인
#twitter_clone
3년 전
7,501
3

1. 결과물 URL

* 2021.09.27 홈화면이 표시안되는 오류 해결됬습니다!

https://sleepyhood.github.io/nwitter/

undefined

undefined

undefined

2. 자기소개

안녕하세요:) 현재 휴학중인 컴공과 대학생입니다!

과제없이 뒹굴뒹굴 살다가... 전공이 적성에 맞는지 꽤나 방황했습니다ㅠ

그러던중 유튜브로 처음 노마드코더님 영상들을 보면서 강의를 들었고, 어느새 React강의까지 듣게 됬네요ㅎ

웹앱 만들기는 올해들어 본격적으로 만들기 시작해서 시간관계상 완벽하게 못 만든게 아쉽네요🤣

3. 서비스 소개

클론코딩의 테마를 최근 넷플릭스에서 화제가 된 "오징어 게임"을 참고하여 만들었습니다!

* UI는 시간관계상 모바일 버전에 최적화하여 제작했습니다. 원래는 PC모드와 나눌려고 했으나....

추가한 기능들을 간단히 설명하자면,

- 이메일과 비밀번호로 로그인시, 기본 이름은 No. 1~456 중 랜덤한 이름을 가짐

- 좋아요💛 구현 및 기존 트윗에 유저 이름, 사진, 시간 표시

- 유저의 프로필🖼 사진

- 아래 스크롤시 헤더 가리기

- 다크모드💡 추가

- 네비게이션바 구현

- 이미지 클릭시 모달창 구현

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

4 - 1. 좋아요 구현

- 사실 제일 막막하고 멘붕에 빠진 작업입니다! 단순히 파이어베이스 storage에서 추가하고 uid만 넣으면 되는줄... 알았으나 반나절 넘게 삽질 했습니다ㅜㅜ 그마저도 realtime database를 쓰면 된다 하였지만 한번도 써보질 않아서 공식문서만 줄줄이 외웠습니다.... 생각보다 공식문서가 불친절(?)하지않고 원하는 기능이 예제로 나와있어서 금방 따라할수 있었습니다😅

4 - 2. CSS

- 사실 기능을 만들어도 항상 꾸밈없이는 허전했기에... 원하는 모습이 나오지 않을떄가 정말 답답했네요😂 최대한 구글링을 많이 하고 자료를 보는게 현답인것 같습니다...

4 - 3. 프로필 변경시 이전 트윗 프로필도 변경

- 사진넣는것도 처음에는 이해를 못해서 꽤나 삽질하다가 구현했습니다....만! 변경된 트윗과 기존 트윗이 존재하면서, 프로필 변경시 기존 트윗도 변경되는걸 뒤늦게 깨달았습니다. 그리고 왜 getMyNweets 함수가 존재했는지를 확실히 알게되었습니다.😎

5. 앞으로 계획

계속 미루다가 이번에 거의 2주일만에 강의듣고 기능 추가할려니 과제했던 경험이 생각났네요ㅋㅋㅋ 그래도 이번기회를 통해 뭘 더 배워야할지, 뭘 잘할수 있는지 알게되어서 진귀한 경험인 것 같습니다. 시간이 된다면 알람🔔이랑 멘션💬 기능도 넣어보고 싶습니다!

3 comments