몇시간 여유를 두고 vercel로 배포를 하려 했습니다. 자신만만하게 vercel 의 deploy 버튼을 눌렀고! 타입스크립트 에러가 저를 반겼죠. 타입스크립트를 모르는 저는 프로젝트에서 타입스크립트를 전부 지워 jsx 환경으로 재구성했고, 어찌저찌 정상적으로 돌아 왔습니다.

만! 배포를 하고 보니 vercel과 관련된 설정들을 forebase, 그리고 console cloud google 에서 해줘야 한다는 것을 조금 뒤에 알아챘고..! 그렇게 제출기한이 지나버렸네요. 하하하하.

챌린지 페이지에선 제출하지 못했지만 늦게나마 글이라도 작성해봅니다.

그래도 예상치 못한 상황을 대비해 여유기간을 더 길게 잡고 배포까지 해보는게 좋다는 것을 배웠네요.

챌린지도 본질적으로 내가 무언가를 배우기 위해 신청했던 것이기에 큰 아쉬움은 없습니다.

소개

트위터 클론코딩이지만, 트위터를 배끼고 싶진 않았습니다. 자존심이었을까요, 큰 목표만 수두룩히 세우고 설계도 잊은 채 코드만 써내려갔습니다. 디자인과 CSS 쪽엔 아직 조예가 없기에 '기왕 이렇게 된거, 기능많 왕창 넣어보자' 라는 마음으로 제작했습니다. 그래서 디자인은 참... 아쉽습니다.

단순한 SNS 서비스입니다. 다른 SNS 에 등장하는 기능들을 최대한 많이 따라해보자는 마음으로 제작했어요!

결과

홈 페이지입니다. 가운데에 timeline 으로 유저가 올린 포스트가 올라옵니다. 텍스트는 400자까지 입력할 수 있으나, 시도해보진 않았습니다. 보시다시피 사진은 트위터와 비슷한 형식으로 올라갑니다. img tag 에 width 100% 를 주어 이미지 비율은 유지하되 큼지막 하게 출력되도록 했습니다.

디테일 페이지입니다. 타입라인, 혹은 이외의 곳에서 post preview 라는 컴포넌트로 각 포스트(트윗) 을 불러오고, 해당 컴포넌트가 클릭되면 디테일 페이지로 정보를 넘겨줍니다. 디테일 페이지에선 받아온 정보를 이용해 레이아웃을 구성합니다. 위 사진을 보시면 아래 바(Bar)에 회색 원 3개가 있는데, 저것들이 위에서 언급한 좋아요버튼, 댓글버튼, 저장버튼 입니다. 댓글기능은 구현되지 않았습니다.

좋아요와 저장기능은 구현되어있습니다. 각각을 saveUserList, LikedUserList 와 같이 array 의 형태로 Post document에 필드가 됩니다. 디테일 페이지가 로딩될 때, preview 컴포넌트에서 넘겨받은 post id (tweet id) 를 이용해 해당 트윗의 정보를 가져오고, 이 트윗의 리스트에 유저가 있다면 좋아요버튼, 저장버튼이 활성화되어있는 방식으로 이전에 좋아요한 것을 확인하는 기능을 구현했습니다.

오른쪽 위의 미트볼 메뉴(점 3개) 를 눌러 deit 버튼과 delete 버튼을 띄울 수 있습니다. react modal 로 구현하려다, 삼항연산자와 [isOpend, setIsOpend] state를 이용해 구현했습니다. delete 버튼을 누르면 수락, 거절 알림이 뜨고, 수락하게 되면 해당 트윗이 삭제됩니다.

에딧 버튼을 눌렀을 때 입니다. edit page를 react modal 로 구현했습니다. ux가 고려되지 않은 디자인인데요, 귀차니즘의 결과물입니다...하하..

edit 창에 진입하면 textarea의 value가 기존 포스트의 내용으로 들어옵니다. 만약 기존 포스트에 이미지파일이 있었다면, 위 사진과 같이 photo added 라고 뜹니다. 또한, 오른쪽의 delete photo 를 토글한 채로 post photo 를 누르면 포스트의 사진이 삭제됩니다. photo added 를 눌러 사진을 교체할 수 있습니다.

또한 페이지 위쪽에 왼쪽으로 향하는 화살표가 있는 페이지가 있는데, useNavigate를 이용해 navigate(-1)을 실행시켜 이전 페이지로 이동하도록 했습니다.

프로필 페이지입니다. 위엔 user의 프로필이, 아래엔 user가 작성한 post와 liked 한 post 를 볼 수 있습니다. posts 와 liked 는 토글 스위치로 사용할 수 있습니다.

프로필 이미지의 위쪽 부분을 hover 한 모습입니다. 아래 부분을 hover 한다면 delete 가 뜹니다.

프로필 카드의 미트볼 메뉴(점 3개) 를 클릭한 모습입니다. useRef 를 이용해 미트볼 메뉴의 바깥쪽을 클릭하면 모달창이 꺼지도록 설정했습니다. edit 과 delete 는 프로필 이미지와 동일하며, delete account 는 유저 계정을 삭제합니다. 마지막으로 위의 bar는 input 태그의 range 타입인데, (스타일링이 이상해서 그렇지 조절 바 맞습니다..)

바를 조절해 위와 같이 프로필 이미지의 위치를 조정할 수 있습니다. 이 값은 데이터베이스의 user document 에 저장되어 다른 사람이 자신의 프로필을 볼 때 반영됩니다.

중요한 기능은 전부 소개한 것 같습니다. list 페이지에선 자신이 쓴 글을, saved 페이지에선 자신이 저장한 글을 볼 수 있습니다. post 를 누르면 새 포스트를 작성할 수 있으며 log out 은 문자 그대로 로그아웃입니다.

기술

react, styled component, firebase, vercel etc.

느낀 점

후... 사실 이미지 압축 후 업로드, 반응형 디자인을 이용한 모바일 ui, 댓글 기능, 검색 기능 등을 구현하고 싶었지만 미지의 영역에 너무 큰 자신감을 가졌던 것 같습니다. 힘들었지만, 정말 재미있었고, 졸업은 못했지만 그래도 챌린지를 통해 정말 많이 성장했습니다. 이런 공간을 만들어주신 nomadcoders 에게 감사드립니다!

늦은 글 읽어주셔서 감사드려요!!

*수정*

모든 버그 픽스 완료했습니다.

2 comments

글쓰기

노마드코더 이벤트노마드 코더, 강의 1:1 상담 해드려요~️⭐️📚 노마드코더 신간 안내 📚 IT 5분 잡학사전

# interview