Community

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

← Go back
[일반 부문] 트위터 클론 컨테스트 참여합니다!
by 7591
#twitter_clone
3년 전
1,532
2

1. 결과물 URL: FirePlace 

undefined

2. 자기소개

안녕하세요! 대학교 1학년 생활을 하고 있는 학생입니다. 노마드코더를 파이썬 웹 스크래퍼로 접하고, 관심이 생기는 강의들 위주로 이것저것 듣다 보니 좋은 기회가 생겨 이런 컨테스트도 참여해보게 되네요. 부족한 실력이지만 참여에 의의를 두고 올려봅니다 :)

3. 서비스 소개

먼저 한가지 에러인데, 현재 OAuth에 문제가 있습니다. 가끔씩은 문제없이 진행되지만 대부분의 경우에는 오류가 발생하며 로그인이 되지 않습니다. 방법을 찾을 때 까지는 어쩔 수 없이 가능한 이메일과 비밀번호를 이용해야 할 것 같습니다. 

트위터 클론 강의였으나 트위터를 잘 모르고, css를 사용해본지도 꽤 되어 연습해보고 싶은 마음에 스스로 디자인을 만들어보기로 마음먹었고 그렇게 진행했습니다. 오랜만에 css를 만져서 그런가 많이 어려웠네요. 

아무래도 디자인을 완전히 바꿨기 때문에 트위터 클론이라고 보기엔 무리가 있는 것 같아 이름을 새로 정하기로 했고, 결과적으로는 "FirePlace"라는 이름을 쓰기로 했습니다. 글 작성 역시 Tweet을 그대로 사용하기엔 무리가 있기에 "Ignite"을 대신 사용하였습니다.

3-1. 프로필

나의 유저네임, OAuth를 이용하여 가입했다면 구글/깃허브의 프로필 사진, 내가 지금까지 올렸었던 Ignite들을 보여주는 화면입니다. 프로필 화면에서도 Ignite들의 편집이나 삭제 등이 가능합니다. 

undefined

3-2. 메인페이지

메인화면입니다. 상단의 form을 이용하여 원하는 글을 쓰고, 사진을 넣어 Ignite을 생성할 수 있습니다. 강의에서는 업로드된 사진을 80x80픽셀로 동그랗게 만들어서 보여주었으나, 저는 보다 크게 보여주는 편이 더 좋아보인다고 생각해 가로 최대 크기를 400px로 설정했습니다. 추가적으로 작성자를 보여주는 span을 만들었습니다.

undefined

3-3. 설정페이지

강의에서는 이 부분이 프로필로 만들어졌는데, 제 경우에는 내가 보낸 Ignite들을 확인하는 페이지를 만들었기 때문에 설정을 따로 만드는 편이 좋다고 판단되어 강의에서 프로필로 진행되었던 부분을 설정페이지로 바꾸었습니다. 가입할 때 사용했던 이메일을 확인할 수 있고, 유저네임을 바꿀 수 있습니다.

undefined

4. 개발 과정

Firebase v9에 맞게 수정하는 과정이 가장 어려웠던것 같습니다. 강의에 올라와있는 댓글들의 도움을 정말 많이 받았고, Firebase에서 제공하는 문서도 많이 참고했습니다. 많이 힘들었지만 좋은 경험이 되었다고 생각합니다.

5. 앞으로의 계획

가장 우선적으로는 현재 발생하고 있는 OAuth 관련 오류를 해결해야 할 것입니다.

이 외에도 계정 탈퇴, 댓글 기능과 "벽난로"라는 이름에 맞도록 원하는 사람들만 사용할 수 있는 공간을 만들어보려고 합니다.

컨테스트에 참여해보고 싶다는 욕심 하나로 시작했으나, 그 과정중에 정말 많이 배웠습니다. 좋은 기회 만들어주신 노마드코더에 감사드립니다. 완벽하지는 않지만 만족스러운 결과물을 가져가게 되었네요. 

긴 글 읽어주셔서 감사합니다!

2 comments