🥝 github : https://github.com/yunchan312/kiwi

🥝 최종 배포 : https://kiwi-225e1.web.app/

시험기간과 겹쳐져,, 시간에 쫓겨 코딩을 하다보니 어느새 챌린지가 끝났네요? 지금 와서 코드들을 다시 보니 그렇게 잘 짠 코드처럼 느껴지지는 않아요. 하지만 처음 배운 firebase라는 기술을 이정도로 사용했다는 것만으로도 큰 의미가 있다고 생각합니다.

🥝 자기소개

안녕하세요 프론트엔드 개발자를 꿈꾸고 있는 학생입니다! 저는 컴퓨터공학과 전공입니다. 그렇다 보니 자연스럽게 많은 분야를 접하고 또 여러가지 전공 관련 공부를 해도 결국은 프론트엔드가 가장 재미있어서 결국 프론트엔드 개발자의 길을 꿈꾸게 되었습니다. 하지만 세상에 쉬운건 없다고 했던가요? 역시나 파면 팔수록 점점 더 프론트는 어려워지더라구요…ㅎㅎ. 그래서 강의를 찾던 중 니꼬쌤의 강의 들을 접하고 많은 성장을 할 수 있었습니다. 아직 많이 부족하지만 여러 프로젝트에 참여할 정도로 어엿한 개발자 꿈나무가 되었답니다.😁

🥝서비스 소개

트위터 클론 강의를 미리 들어뒀던 터라, 또다시 트위터를 만들 생각에 지루하고 식상하다는 생각이 들었습니다. 그래서 저는 저만의 SNS를 만들고자 했습니다. 트윗이 갖고있는 매력을 유지하면서, 저만의 서비스의 특징을 살리기 위해서 마크다운 형식의 짧은 글을 올리고, 더 나아가 자신만의 블로그도 관리할 수 있는 서비스를 만들면 재밌겠다는 생각이 들었습니다. 이름을 고민하던 중, 우연히 키위 이모지를 보게 되었고, 키위 이모지는 너무 귀여웠습니다ㅎㅎ. 그래서 제 서비스의 이름을 키위라고 짓고, 로고를 키위 이모지 그대로 정했습니다.

🥝 결과물 캡쳐 및 기능 소개

1. Login, Create-Account

   

   로그인 & 계정생성 폼입니다. 이메일로 로그인을 구현했고 추가로 Google 계정을 통한 로그인 및 계정 생성도 가능합니다.

2. Home & Layout

먼저 Layout을 확인해보겠습니다. 왼쪽 Layout에서는 기본적으로 Navigation bar의 역할을 수행하고, 오른쪽 부분은 현재까지 가장 좋아요를 많이 받는 게시물들 최대 5개를 보여주는 컴포넌트들로 구성되어 있습니다. 또한 로그아웃 버튼도 있습니다.

홈 화면은 유저들이 올린 키위들을 확인할 수 있습니다. 각각의 키위라고 불리는 대체로 짧은 형식의 글은 사진을 첨부할 수도 있고, 마크다운의 형식으로 글을 쓸 수도 있습니다.

3. Profile

프로필 페이지에서는 유저 본인의 프로필을 보여줍니다. 먼저 내 정보 section에서는 내가 쓴 블로그와 키위의 개수를 확인 할 수 있고, 키위에서 받은 총 좋아요의 개수를 알려줍니다.

또한 쿼리를 통해 유저 본인이 쓴 글을 확인할 수 있도록 해줍니다.

4. Blog

포스트한 블로그는 새로운 페이지에서 전체 글을 읽을 수 있으며, 물론 사진도 첨부가 됩니다.

블로그 overview 화면입니다 layout에 있는 blog를 누르면 나오는 화면입니다. 블로그와 관련된 로그인 된 유저의 정보를 얻을 수 있습니다.

블로그를 작성하는 부분입니다. 블로그 글을 작성하면 실시간으로 밑에 미리보기가 뜨는 것이 주된 기능입니다.

5. Hot Kiwis

말 그대로 좋아요를 가장 많이 받은 키위부터 내림차순으로 보여줍니다.

6. Blog Ranking

말 그대로 좋아요를 가장 많이 받은 블로그 글에서부터 내림차순으로 보여줍니다.

7. Inquiry

문의사항을 적는 부분입니다. 해결 되면 오른쪽 버튼이 초록색으로 solved라고 뜹니다.

8. About

kiwi에 대한 간단한 소개를 적은 페이지 입니다.

🥝 기술/스택

React, Firebase, Tailwindcss, react-router-dom ,,, etc.

🥝 느낀점

시간에 쫓기는 것도 있지만, 무엇보다 파이어베이스를 최대한 많이 다뤄봐야겠다는 생각에 Recoil같은 전역변수 라이브러리도 사용하지 않고 코딩을 했습니다. 이 과정에서 정말 많은 시행착오가 있었는데요, 먼저 몇가지 기능을 구현하는 과정에서 한 함수 내에서 같은 collection이나 document를 두번 불러오는 불상사가 있었습니다. 이러한 경험을 통해서 state management library가 중요하다는 것을 다시한번 깨닫게 되었습니다.

사실 저는 동적인 웹사이트를 선호합니다. 따라서 framer나 GSAP같은 애니메이션 라이브러리도 즐겨 쓰고, 어떤 프로젝트든 당연히 반응형 웹사이트를 만들어야 한다고 생각합니다. 하지만, 이번 프로젝트에서는 그러한 부분에 신경을 많이 쓰지 못했다는 것이 조금 아쉽습니다.

하지만! 제가 이번 챌린지를 참여한 이유는 firebase와 친해지고 firebase를 잘 다룰 수 있게 되는 것입니다. 이번 챌린지를 통해 fireabse와 많이 친해져서 목표는 이뤘다는 생각에 너무나도 만족스러운 챌린지였습니다!