Community

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

← Go back
일반 부문. 본인의 코인일지를 위한 트위터 클론입니다
#twitter_clone
2년 전
1,686
1

1.결과물URL

https://guiwoo.github.io/twitter_firebase/

1-1 로그인화면

undefined

-계정을 만들고 구글 또는 깃으로 로그인 가능하게 만들었습니다.

2 메인화면

undefined

본인의 코인 수익률을 적어 자랑하는공간입니다.

undefined

다크모드

2. 자기소개

레스토랑 쉐프로 일하다 프로그래머 로 이직을 꿈꾸며 열심히 노마더코더 로드맵을

수강중인 학생입니다.

3. 서비스 소개

친구들과 만나면 하는 코인이야기 주변에서 저만 돈을 잃고 있다는

생각에 만들게되었습니다.

좋아요 를 누를 수있는 소소한 기능이 추가 되어, 좋아요 또는 시간순으로 정렬하여

볼수 있습니다.

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

개발 일정(추석연휴)

ㄱ- Image file 을 업로드시 니코썜의 방법이아닌 createObjectURL 을 사용하요 조금더 빠른 이미지 업로드 환경을 만들었습니다.

ㄴ-좋아요 를 만드는 과정에 있어 어떻게 유저 와 트윗의 문서를 만들어 등록할지 고민하여수차례 도전한 끝에 트윗 아이디 안의 이미지에 좋아요라는 항목을 추가하여 성공했습니다.

ㄷ- 노마더 코드 게시판을 보면 정렬을 바꾸는 방법에서 아이디어를 받아 좋아요 와 최신순정렬을 하고싶어, 새로운 스테이트를 만들어 적용 하였습니다.

ㄹ- 완성후 오른쪽 여백이 너무 비어보여 코인의 가격을 보여주고싶어 추가하였는데 axios이용하여 coinmarket의 api 불러오기를 실패하여 결국 CoingeCko 의 api 를 활용하였습 니다.

ㅁ- 다른웹페이지에서 본거처럼 버튼기능을 가진 다크모드를 만들고 싶었고, 새로운 prop
을추가하여 prop 의 따른 마진을 넣어 버튼처럼 보이게 만들었습니다.

ㅂ - 이미지가 작아 호버를 주어 마우스를 올리면 이미지가 확대대는 기능을 추가했습니다.

5. 앞으로 계획

1. 다크모드 의 방법을 웹이 기억하게 하기위해 로컬스토리지를 추가하려고 합니다.

2. 한개의 트윗을 눌렀을때 코멘트를 달수있는 기능 을 부여하고 자 합니다.

3. 계속 스테이트가 늘어 리덕스를 추가해볼까 생각중입니다.

4. 글이 많아졌을시 무한스크롤 기능을 추가하여 웹의 속도를 신경쓸 생각입니다.

5. 추가적인 페이지를 만들어 코인관련 뉴스 및 트윗을 확인할수 있게 만들 생각입니다.

6. 파이어베이스의 리얼타임

디자인적으로 정말 고민을 많이하면서 좌절도 많이했네요 니코가 뚝따다닥 붐 해서 예쁘고 세련된 페이지가 나오는데 제가하면 왜이리 촌스럽고 , 색배열 도 못하는지 너무 힘든 부분이였습니다. 추가하고싶은 기능은 너무많은데 능력이 부족하네요, 조급한 마음 가지지 않고 천천히 예쁜 포토폴리오 만들어 보겠습니다. 좋은기회 주셔서 감사합니다.

1 comment