지수의 블로그

5 분 소요

Course

Wanted Pre Onboarding FE Course

study

팀 프로젝트

발표 준비

간단한 서비스 소개

구현 과제 소개

로그프레소 과제는 듀얼셀렉터를 구현하는 것입니다.

설명하자면, 기본적으로 아래와 같이 두개의 컨테이너가 있고, 그 안에 아이템이 리스트 형태로 나타나게 됩니다.

이 아이템을 선택하여 한쪽에서 다른 쪽으로 이동시키는 기능을 가지고 있습니다.

또한, 기능들에 대한 세팅을 할 수 있는 메뉴를 구현하여 완성하는 과제입니다.

상세 기능

아이템 순서 이동

  • 드래그앤드롭으로 아이템의 순서 변경

검색

  • 검색 input을 비활성화disable
  • 엔터를 누르면 텍스트가 포함된 모든 아이템을 나열

아이템 이동 버튼

  • 선택된 아이템만 이동 > 버튼: 선택한 아이템을 왼쪽 영역에서 오른쪽 영역으로 이동 < 버튼: 선택한 아이템을 오른쪽 영역에서 왼쪽 영역으로 이동
  • 모든 아이템 이동 >> 버튼: 왼쪽 영역의 아이템 전부를 오른쪽 영역으로 이동 << 버튼: 오른쪽 영역의 아이템을 전부 왼쪽 영역으로 이동
  • 초기화 선택된 모든 아이템의 선택을 취소함

타이틀 제목 수정

  • 소메뉴 중 하나
  • ‘on’(초록색)인 경우에만 수정할 수 있음
  • ‘off’(빨간색)인 경우에는 input 창이 비활성화
  • available options / selected options 타이틀을 각각 수정할 수 있음
  • 엔터를 누르면 저장
  • 둘 다 입력하지 않아도 저장

하나씩만 옮기기

  • 소메뉴 중 하나
  • ‘하나씩만 옮기기’ 옵션이 ‘on’(초록색)인 경우 다중 선택 안됨
  • ‘하나씩만 옮기기’ 옵션이 ‘off’(빨간색)인 경우 다중 선택 가능

아이템 크기 조절

  • 소메뉴 중 하나
  • available options / selected options 에 있는 모든 아이템들의 텍스트 크기 조절 (xs, s, m)

영역 크기 조절

  • 소메뉴 중 하나
  • 가로/세로 : available options / selected options 각각의 가로/세로 크기
  • 영역의 크기를 픽셀 단위로 입력
  • 엔터를 치면 저장
  • 둘 다 입력하지 않아도 변경 가능함

다중 선택

  • ‘하나씩만 옮기기’ 옵션이 ‘on’인 경우에만 가능함
  • shift키를 누르고 아이템1, 아이템2를 클릭하면 그 사이에 있는 모든 아이템이 선택
    • 첫번째 클릭을 기준이고 두번째 클릭으로 어디까지 선택될지 결정함
  • control / command 키를 누르고 아이템을 클릭하면 여러 아이템을 선택/취소
  • 선택된 아이템의 개수를 available options / selected options 각각 영역 아래에서 확인할 수 있음

사용 스택

    library: React
    css: tailwind
    etc: notion

React: 팀원들의 러닝 커브 고려, 모두가 바로 사용 가능하며 가장 빠르게 구현할 수 있는 React를 사용했습니다.

tailwind: Javascript의 기능이 중요한 과제라고 판단하였고, CSS는 직접 구현하는 것보다 UI가 완성되어 있는 라이브러리를 사용하여 생산성 높였습니다.
결과적으로도 깔끔한 UI를 구현할 수 있었습니다.

notion: 기능 명세를 정리하고, 컨벤션 기준을 명시해두어 통일성을 높이는 데에도 도움을 주고, 협업 프로세스의 효율성을 높일 수 있었습니다.

배포

netlify를 통한 배포.

github repo main branch와 netlify를 연동하여 main branch에 merge가 완료되면 자동 배포되도록 설정하였고,

현재 배포 완료하여 링크를 통해 결과물을 확인할 수 있습니다.

주제별 발표: 협업

  • 컨벤션

    Git commit과 PR 컨벤션을 미리 노션에 정해두어 통일성을 높였습니다.

    세분화하여서 commit 메시지를 작성하는 것보다 조금 더 쉽게 직관적으로 만들어 컨벤션을 잘 지킬 수 있었다고 생각합니다.

    commit 형식 | 유형 | 설명 | | — | — | | Feat | 새로운 기능 추가 | | Add | 파일추가(이미지, 아이콘, 폰트…) | | Fix | 버그 수정 | | Docs | 문서 수정 | | Style | 스타일(CSS, 퍼블, UI적인 요소) 수정 | | Comment | 주석 추가, 수정, 삭제 | | Chore | 빌드업 업무, 패키지 매니저 수정 | | Refactor | 수정 | | Rename | 변수명, 함수명, 파일명, 폴더명 변경 | | Remove | 변수, 함수, 기능, 파일, 폴더 삭제 | | !BREAKINGCHANGE | 큰 api 변경, 큰 구조적인 변경 | | !HOTFIX | 급한 치명적인 버그 수정 | | Deploy | 배포 |

    PR 형식

    • PR 제목
    Feat: 작업 내용
Refactor: 작업 내용
    • PR 본문
    ### 반영 브랜치
feature/toggle -> dev

### 작업 사항 상세
로그인 시, 구글 소셜 로그인 기능을 추가했습니다.

  • 협업 프로세스

    첫 과제를 진행하면서 구현을 빠르게 진행해야한다는 압박감에 기능 명세를 미리 작성하지 못하고, 협업을 진행하게 되었습니다.

    그래도 페이지가 3개로 나누어져 있어 feature 분리 및 역할 분담은 어렵지 않았으나 명세가 없다보니 개발하는 도중 구현해야할 것들, 안해도 되는 부분들을 고민을 하게 되었습니다.

    이것이 비효율적이라고 생각되었고, 회고를 통해 다음 과제부터 미리 과제에 대해서 같이 분석하고 피쳐를 분리하고자 했습니다.

    따라서, 이번 로그프레소 과제를 분석하면서 기능 명세를 작성했습니다.

    과제 안내를 보며 각자 이해한 것을 정리하고, 취합하는 과정에서 모호했던 부분(아이템 순서 이동, Input 엔터 시 적용, 검색 Dropdown or 리스트에서 바로 filtering할지 등)들을 토론을 통해 개발 전 피쳐들을 명확히 할 수 있었습니다.

    이번 과제에서는 페이지가 나누어져 있지 않았기 때문에 이 기능 명세 작성이 더 빛을 발했다고 생각합니다.

    큰 기능 즉, 아이템 이동 기능 / 아이템 순서 이동 (D&D) / 세팅 소메뉴 / UI 이렇게 나누어 효율적으로 작업할 수 있었습니다.

  • 재사용 컴포넌트와 props를 미리 설계

    협업뿐만 아니라 설계 또한 구조를 빌드했습니다.

    • 필요 컴포넌트 정리
      • <Input /> - placeholder
      • <StackedList /> - width, height 전달 받아 인라인 스타일로 적용
      • <ListItem /> - children 전달받기
      • <Button /> - 스타일만 필요
      • <Toggle /> - on, setOn, onCallback, offCallback
      • <Radio /> - 라디오
      • <Dropdown /> - 소메뉴

    위와 같이 필요한 컴포넌트와 props를 미리 정해두어 아래와 같이 폴더 구조를 먼저 생성하여 App.js에 모든 기능을 구현하지 않고, 컴포넌트를 나누어 작업하여 머지 시 conflict를 최소화했습니다.

    📁src
│  App.js
│  constances.js
│  index.css
│  index.js
│
├─📁components
│	│ Button.js
│	│ Input.js
│	│ ListItem.js
│	│ Popover.js
│	│ Radio.js
│	│ Selector.js
│	│ Setting.js
│	│ StackedList.js
│ │ Title.js
│ └─Toggle.js
│ └─📁icons
│
├─📁hooks
│      useDragAndDrop.js
│
└─📁utils
      moveItems.js

    DragAndDrop과 moveItems 기능은 컴포넌트에 바로 존재한다면 가독성이 떨어지고, 큰 conflict를 유발할 수 있기 때문에 각각 custom hook과 util 함수를 생성하여 import해서 사용함으로써 효율성과 가독성을 높였습니다.

  • 잘했던 점

    기능 명세 작성 -> 설계 -> 피쳐 분담 -> 피쳐 구현 -> 머지 플로우로 효율성 있게 진행하여 과제를 마무리할 수 있었습니다.

  • 개선할 점

    생산성의 이유로 코드 리팩토링이 충분히 이루어지지 못한 점이 있습니다. 이 후 시간을 활용해서 중복 로직 혹은 비효율적인 로직을 확인해서 리팩토링을 하면 좋다고 생각했습니다.

발표 회고

너무 떨어서 끝나고 나니 긴장이 풀렸는지 멍해졌다ㅠㅠㅠ

이게 뭐라고 이렇게 긴장을 하는지…

다음엔 더 잘할 수 있을 것 같다.

또 해볼까 생각한다. 만약 시켜준다면ㅋㅋㅋ 못미더워서 못시키는거 아닌가 몰라.

발표 구성을 이렇게 하면 좋을 것 같다.

1. 맡은 기업 과제 소개

2. 과제들의 기능 전반적으로 소개

3. 사용한 기술 스택과 그 이유

4. 협업 프로세스 (노션 정리)

5. 기능 구현에서 힘들었던 점, 해결한 점 한두가지

6. 과제 전체 잘한 점, 개선할 점

우리 팀도 figma 나 다른 툴을 사용하면 좋을 것 같다.

회고 (TIL)

2022.02.25 Daily 회고

✏오늘 한 일

  • 팀 과제 수행 및 제출
    • 작업 내용 머지
  • 팀 과제 정리 및 발표
  • 클린 코드 study

⁉느낀 점

팀 과제가 생각보다 잘 마무리되어 너무 좋다. 팀원들의 도움 덕분에 무사히 기능을 구현할 수 있었다. 너무 다행이고, 또 많이 배웠다. 나도 언젠가는 잘할 날이 올까ㅠ

팀 발표를 맡게 되었는데, 이상하게 긴장을 해버려서 끝나고 나니 힘들었다. 다음에 만약 다시 발표를 하게 된다면, 구성을 좀 더 잘 짤 수 있을 것 같다. 뭐든지 처음이 제일 어려우니까.

1주차가 끝이 났는데 화수목금 정말 빨리 지나갔고, 그 만큼 에너지 소비가 심한 것 같다. 그래도 설렁설렁하면서 타협할 생각은 없다.

🎃현재 나의 상태

팀원 이대로라면 과제 수행하는 데에는 걱정이 없다. 나만 잘하면 된다. 그러니 멘탈 관리하자.

댓글남기기

참고