🤹‍♀️ 프로젝트 소개

Instagram을 모티브로 한 웹 사이트를 구현하는 팀 프로젝트

• 팀 깃헙 레파지토리
• 프로젝트 영상

• 팀명

  instamg

• 팀 구성

  프론트 3명

  백엔드 2명

• 소통 방식

  1. StandUp Meeting (Agile 방식)

  2. Trello 이용

     Backlog / This Week / In Progress / Done / Meeting Log (구현해야 할 사항, 이번 주 해야 할 일들과 진행 중인 일들, 완료한 일,데일리 미팅 기록)

  3. Notion

     

     미팅 기록, 코드 공유

• 실제 사이트

  https://www.instagram.com/

• 기간

  2021.2.15~3.11
  

🤹‍♀️ 기술 스택 및 협업 툴

• 기술 스택

  • React
  • React-router-dom
  • Javascript
  • HTML5 , CSS3
  • Styled-Component
  • Styled-icons
  • JSON-SERVER
  • ReactPlayer
  • Axios
  • Slick

• 협업 툴

  • Git/GitHub

  • Trello

  • Daily Stand Up Meeting (Agile)

    Notion, Trello 활용해서 매일 10시에 미팅함으로 진행 상황 공유 및 앞으로의 계획 세움

  • Slack

🤹‍♀️ 역할

• 제작 페이지 : 개인 피드 및 모달, 게시물 등록
• Product Manager (전체 프로젝트 관리)

• 구현 페이지 공통 기능

  • 슬라이드 구현 (slick slider 활용)
  • 비디오 구현 (ReactPlayer 활용)
  • axios, fetch를 활용한 통신
  • 컴포넌트 재사용 (Atomic Design)
    • 프로필 사진 컴포넌트 제작 (팀 공동 사용)
      • param으로 사용법 설명, 보다 직관적인 변수명 사용
    • 숫자 단위 계산 ( k ~ e ) 메소드
      • 1,000 부터 13자리 수까지 영문 단위로 반환 ( k ~ e )
      • 게시물/팔로워/팔로우/댓글/좋아요 수
    • icons (하트, 말풍선, 북마크, 메세지 등)
      • 사용할 컴포넌트에서 style만 지정 후 사용
    • 모달창 (버튼 모달창) 컴포넌트 제작
      • 게시물, 모든 (대)댓글에 '점 3개 버튼'을 클릭 시, 모달에 버튼들( 신고, 게시물 이동 등) 출현
      • 사용하고 싶은 버튼의 text들을 배열에 담고 onClick메소드를 속성으로 내려주면 재사용 가능

• 개인 피드 페이지

  • 무한 스크롤 구현

    • intersectionObserver, useRef, async & await, setTimeout 사용

  • 동적 라우팅 구현 (메인 피드→ 개인 피드, 개인 피드→ 스토리, DM, 게시물 등록)

  • 버튼 및 기능의 재사용

    • 본인 또는 타인 피드인지에 따라 조건으로 (조건부 렌더링, if 조건문, 삼항 연산자) 버튼 및 기능 재사용

      → 메세지 보내기 or 프로필 편집, 팔로우 or 게시물 등록

• 개인 피드 모달창

  • 반응형 모달 (사진에 따라 모달의 높이 변화)

  • 전체 모달창 자체 제작

  • 개인 피드 페이지에 나오는 사진의 순서대로 모달창에 데이터 불러오기

    • 모달창의 화살표 방향에 따라 현재 보여지는 데이터의 index에 + 또는 - 1 을 더해서 다음 데이터를 보여주는 기능을 화살표의 onClick 메소드에 부여

  • (대)댓글의 다양한 기능들

    • (대)댓글 수 자체 필터링

      • filter 메소드로 클릭할 때마다 댓글 → 12개씩, 대댓글 → 3개씩 출현

    • 답글 달기

      -댓글의 '답글 달기' 버튼을 누르면 @댓글의 userId가 textarea에 띄워지고 대댓글에 추가

    • 댓글 수정 및 삭제

      • 본인의 댓글일 경우에만 가능

        -수정 시, textarea에 기존 작성된 댓글 띄우기

  • 컴포넌트 재사용 (일부 아토믹 디자인 접목)

    • 실시간 시간 계산 메소드 (팀 공동 사용)

      • 시간 또는 기간에 따라 ~시간 전, ~일전, ~월 ~일, ~년 ~월 ~일 으로 나타냄

      • setInterval, getTime, Math.floor 등을 활용하여 분 단위로 실시간 계산

      • 게시물 및 댓글 등록 시간

    • 캡션 및 (대)댓글 컴포넌트 제작

      • 캡션 및 (대)댓글을 모두 한 컴포넌트로 재사용

      • 하트 icon, 점 3개 모달창, 프로필 사진 재사용

• 게시물 등록 및 삭제

  • 본인의 feed일 경우에만 사용 가능한 조건
  • formData 사용
  • 동영상, 이미지 등 무제한 등록 기능 구현
  • 등록 전, img 및 비디오 미리 보기 기능
  • 사진 및 동영상 없으면 게시물 등록 버튼 사용 불가 조건

🤹‍♀️ 협업 경험

긴장되고 떨렸다. 회사에서, 첫 PM이라서.
→ 나름 대로 아는 대로 열심히 해보려고 했다! (10시에 알람 맞추고 2-30분간 미팅 진행 및 기록, 트렐로 사용, 기타 회사와의 커넥션, 정보 공유 등)
→ 미팅 효과: 서로의 진행 상황 체크 및 전반적인 플젝 관리 가능

서툴렀지만 팀원들이 잘 따라와 주고 배려 깊고 착하셔서 잘 진행이 된 거 같다.

👍 잘한 점

스스로 해결하는 습관

• 검색하는 것이 서툴렀던 내게 동기 재현님이 구글링 하는 법을 알려주었다.

  생각보다 간단했는데 이걸로 스스로 많은 것을 해결할 수 있었고 내 스스로 해결하는 즐거움을 느꼈다.

• 이제는 누군가의 도움을 받기 보다는 내 스스로 해결하고 싶고 개발자의 기본적인 애티튜드 이기 때문에 이 좋은 습관을 지속 시키려 한다.

개발의 즐거움

• 개발을 시작하게 된 동기가 내 적성에 맞아서 이지만, 지식을 깊이 배우다 보면 어려워서 힘들 때도 있었다. 근데 계속 하다 보니 어려운 순간에도 즐겁게 개발하는 순간들이 생겼다.

• 모르는 것을 새롭게 알게 되어 바로 적용 시켜보거나, 아는 것에 지식을 더하여 그게 화면에 잘 구현 될 때,
  어려워 보이는 기능을 차분히 앉아서 골똘히 생각하고 내 지식의 한계가 닿았다고 생각할 때 검색을 해서 결국 스스로 해결 했을 때,
  안 해본 기능을 구현할 때 신나는 느낌이 들었을 때
  등 개발하는 순간이 즐거울 때가 늘어나고 있다.

• 공부하는 게 즐거웠던 몇 몇의 순간들이 있는데 그게 내 인생에 많은 시간을 할애할 내 직무라서 기쁘다.

• 앞으로도 꾸준히 이렇게 즐겁게 개발하면서 더 많은 것을, 더 큰 것을 구현하고 싶다.

장기전에 임하는 태도를 배우다

• 적당한 긴장감을 갖추는 법

  • 이제껏 했던 모든 프로젝트, 프로그램을 합쳐서 가장 긴 한 달이라는 기간이 주어졌다.
  • 자칫 루즈해질 수 있고 나는 많은 양의 질적인 코드를 생산하고 싶어서 한달, 2주, 1주 단위로 계획을 세우고 이를 지키고자 노력했다
  • 지켜진 부분도 있고 지켜지지 못한 부분도 있다.
  • 하지만 내가 당시 상황에 최선을 다하려고 했다는 것을 알기에 스스로에게 잘했다고 하고 싶다.

• 멘탈 관리

  • 앞으로 나는 계속 개발을 할 것이기 때문에 장기적으로 할 때는 지난 프로젝트들 처럼 스파르타 식으로 하면 안되고 천천히, 차분히, 꾸준하게, 최대한 즐기면서 하는 것이 중요하다는 생각이 들었다.

=> 결론: 개발 외적으로나 내적으로나 힘든 순간에 나는 어떠한 마음가짐으로 스스로를 다스려야 하는지에 대해 경험치를 쌓았다고 생각한다.

👊 아쉬운 점

생산성 및 클린 코드

• 질적인 코드의 다량 생산을 중요시 하는 나의 기대치에는 솔직히 못 미치는 것 같다.

• 후반부로 갈 수록 루즈해지는 느낌은 부정할 수 없다. 백엔드의 DB도 이미 구축이 되었고 시간적으로도 애매했기 때문에 새로운 페이지나 무언가를 만들기 애매했고 뭔가 전체적으로 다 어중간했기에 아쉽다.

• 다음부터는 차분히 처음부터 클린 코드를 작성해가고 중요한 기능 부터, 스트레스 받지 않고 차분히 한다면 더 나은 코드와 결과물이 완성되지 않았을까 하는 생각이 든다.

  이제부터라도 잘하자

리덕스

• 리덕스를 해보고 싶었는데 시간이 애매해져서 해보지 못했다.

  리덕스를 했더라면 좀 더 클린 코드를 작성할 수 있었을 텐데 하는 아쉬움이 남는다.

  리팩토링 할 때 리덕스로 진행해보고 싶다!