Project Overview

위코드에서의 1차 프로젝트가 끝났다.
처음으로 프런트엔드와 백엔드가 팀을 이루어 하나의 결과물을 만들어 내는 과정을 경험한 거라 좌충우돌도 많았지만, 그만큼 그동안과는 차원이 다른 경험치를 쌓을 수 있는 기회였다.
우리는 다양한 주제에 대한 글을 쓰고 공유하는 '브런치' 사이트를 클론 코딩하게 되었는데,
UI를 구성하는 다양한 기능들을 구현해보고 싶은 마음에 직접 제안했던 페이지라 실제로 진행하게 되어 매우 기뻤다.

Project Description

우리 팀은 '브런치' 사이트를 완벽하게 클론 코딩하는 것보다는 나름의 기획을 섞어
조금은 유쾌하게 풀어보았다.

브런치(아침 메뉴) 정보 공유 사이트, 모닝엔 브런치

• 사람들이 작성한 전 세계 브런치 정보를 읽을 수 있습니다.
• 좋아요순 / 키워드별 / 작가별로 게시글을 추천 받을 수 있습니다.
• 회원들에게만 오픈되는 프라이빗한 공간입니다.

작업기간

2021.11.01 (월) - 2021.11.12 (금) / 총 12일

기술스택

프론트엔트 / 3명

• HTML / CSS
• Javascipt (ES6+)
• React
• SASS

백엔드 / 2명

• Python
• Django
• Bcrypt
• JWT
• Postman
• MySQL

공통

• Git & GitHub
• Trello
• Slack

주요 구현사항

내가 직접 구현한 부분은 당근(🥕)으로 표시해두었다.

• 로그인 & 회원가입
  • 유효성 검사를 진행하여 통과 시 체크 아이콘 등장
  • 필요한 정보 전체 입력할 경우에만 버튼 활성화
    
    
• Nav & Header
  • 페이지 스크롤 다운 시, Header 투명도 및 아래 border 생성
  • Ref를 사용하여 Nav 이외의 공간 클릭 시 Nav 비활성화 되도록 구현
  • 특정 버튼 클릭 시 연결된 외부 페이지로 이동 🥕
    
    
• 메인 페이지 🥕
  • 라이브러리를 사용하지 않고 슬라이더 구현 🥕
  • display grid를 적극 사용한 섹션 UI 구현 🥕
  • query parameter 활용, 클릭한 키워드에 따라 다른 정보가 노출되는 기능 구현 🥕
  • path parameter 활용하여 상세 페이지로 연결 🥕
    
    
• 상세 페이지
  • Nav바 하단에 사용자의 스크롤 양에 반응하는 스크롤바 구현
  • path parameter 활용하여 메인 페이지에서 클릭한 글에 맞는 콘텐츠 노출 🥕
  • 하트 버튼 클릭 시 색상 변경 및 숫자 변경 (실제 서버와의 통신은 미구현)
    
    
• 마이 페이지
  • 클릭하는 탭에 따라 다른 콘텐츠 노출
  • 글쓰기 기능의 미구현으로 mock-data 활용하여 컨텐츠 구성
    
    
• 전체
  • 컴포넌트를 적극 활용하여 코드 효율성 극대화 🥕
  • 작가와 글에 대한 tag를 UI와 전체 구조에 적극 활용 🥕

결과

1. 로그인 & 회원가입
   

2. 메인 페이지 _ section 1
   좌우 버튼 혹은 숫자 버튼 클릭 시, 해당하는 위치로 슬라이더가 이동한다.
   슬라이더 위치를 기준으로 처음이면 좌측, 끝이면 우측 버튼이 숨김 처리된다.
   컨텐츠 마우스 hover 시 이미지가 줌인되며 조금 더 어둡게 처리된다.
   콘텐츠 하나를 컴포넌트화하여 display grid를 통해 불규칙한 UI를 구현하였다.
   
   단, 기존 기획대로라면 좋아요순으로 컨텐츠가 정렬되어야 했지만,
   일정 상의 이슈로 데이터가 저장된 순서로 노출되도록 구현하였다.
   

3. 메인 페이지 _ section 2
   display grid를 활용하여 규칙적인 UI를 구현하였다.
   각 컴포넌트에 border를 부여하면 겹치는 현상을 방지하기 위해, 전체를 감싸는 div 태그에 background를 주고 컴포넌트에 grid gap과 white background를 주어 border의 효과를 주었다.
   

4. 메인 페이지 _ section 3
   query parameter를 활용하여 키워드에 따라 다른 정보가 fetch되도록 하였다.
   작가 카드 내에 태그 3개 클릭 시, 관련된 게시글로 이동하도록 구현하였다.
   ?tag=${keyword}&limit=6
   

5. Nav & Header
   Ref 활용하여 Nav 이외의 부분 클릭 시 Nav 비활성화되도록 하였다.
   Link 태그가 아닌 a 태그 활용하여 외부 링크로 연결되도록 구현하였다.
   

6. 상세 페이지
   스크롤 다운에 따라 유동적으로 반응하는 스크롤바를 구현하였다.
   좋아요 버튼 클릭 시 색상 변경 및 좋아요 숫자에 추가되는 기능을 구현하였다.
   (서버와의 통신은 미구현되어 UI적으로 보이게만 구현해놓은 상태)
   

7. 마이페이지
   클릭하는 탭에 따라 다른 콘텐츠가 그려지도록 구현하였다.
   

---

Project Review

칭찬 포인트

👍🏻 프론트엔드 개발자들끼리의 적극적인 사전 소통으로 컨벤션을 모두 잘 지킨 결과, 각자 작업한 내용을 merge하고 나서도 별다른 conflict가 없었다.

👍🏻 스크럼 방법론에 의거하여 Planning meeting & Daily stand-up meeting & Retrospective meeting이 잘 이루어졌으며, 그 외의 시간에도 프론트 백 가리지 않고 적극 커뮤니케이션 하였다. (그 결과, 상황에 맞추어 서로 도와 목표치를 달성할 수 있었다)

👍🏻 배우지 않은 내용도 구글링을 통해 적극 탐색하고 적용하였다.
개인적으로는 슬라이더를 어떻게 구현해야하는지, display grid는 어떻게 활용하는지, query & path parameter는 어떤 때에 활용되는지 이제 명확하게 알게 되었다.

👍🏻 컴포넌트 분리를 최대한 활용하여 효율적인 코드를 작성하였다.

👍🏻 틈틈히 리팩토링에 신경써서 작업하였다.

아쉬운 포인트

🙏🏻 기획 단계에서 사용자의 입장을 충분히 고려하지 못해 놓치고 간 부분이 있었다.
예를 들어, 로그인 후 발급된 토큰을 전체 페이지에서 유지하여야 했으나 이 부분이 누락된 걸 너무 늦게 깨달았다. 다음 프로젝트에서는 페이지의 컨셉 뿐 아니라 사용자를 기반으로 한 기획도 시간을 들여 꼼꼼하게 진행해야겠다.

🙏🏻 첫 프로젝트이다보니 기능의 난도나 스스로의 개발 속도를 가늠하지 못해 일정에 차질이 있었다. 이번 프로젝트를 밑거름 삼아 기간 내 개발 가능한 내용을 잘 판단하여 기획할 예정이다.

🙏🏻 UI적인 부분 이외에 백엔드와 소통할 수 있는 기능을 조금 더 개발하지 못한 점이 아쉬웠다.

마무리 회고

첫 팀 프로젝트, 팀원들이 있어서 좋았다.

내가 막혔을 때 도움을 요청할 팀원들이 있고, 팀 전체의 성공을 위해 서로의 속도를 조정하기도 하며, 막혔던 부분을 함께 해결한 뒤 희열을 공유하면서 혼자였을 때보다 훨씬 더 성공적인 결과를 얻을 수 있었다. 특히 서버와의 데이터 통신에 성공한 뒤, 그리고 프론트엔드 개발자들이 각각 작업한 내용을 모두 합치고 난 뒤 했던 하이파이브는 잊을 수 없을 것 같다!!

또 이번 프로젝트에서 PM은 아니었지만, frontend 개발자 중 기획과 메인 커뮤니케이션을 주로 담당하면서 프로젝트 전반에 나의 의견을 많이 담을 수 있어 즐거웠다. 커뮤니케이션을 많이 담당하다보니 이제는 프론트엔드 뿐 아니라 백엔드랑도 어떤 부분을 조율해야 하는지도 조금은 알것 같은 느낌이다. 마지막 발표의 순간, 동기들의 오오- 소리를 들으면서 매우매우 뿌듯했다는 결론!