👨‍👨‍👧‍👦 TEAM 보람삼조

인턴십 기간동안 보람찬 3조가 되자!

Name	황수현	이준호	박수현	이상민	유동혁
Profile
GitHub	@rjsej12	@wujuno	@pySoo	@sangminlee98	@robin14dev

Name	강명주	박겸영	정정수	고영욱	추헌재
Profile
GitHub	@myungju030	@seoltang	@wjdwjdtn92	@free-ko	@Chuhj

원티드 프리온보딩 프론트엔드 인턴십 1주차 과제

동료학습을 통해서 팀에서 생각한 원티드 프리온보딩 프론트엔드 인턴십 선발 과제의 Best Pratice를 만들고 제출해주세요

Best Practice란 모범사례라는 말로서, 특정 문제를 효과적으로 해결하기 위한 가장 성공적인 해결책 또는 방법론을 의미합니다.

진행 기간: 2023-04-25 ~ 2023-04-28

목차

• 🚀 배포 링크
• 🖥️ 동작 화면
• 📚 사용한 라이브러리
• 📂 프로젝트 구조
• 🕹️ 프로젝트 실행 방법
• 📌 컨벤션
  • type vs interface
  • Commit convention
  • Branch protection rule 설정
• 🎯 과제 수행 방향
  • 👑 Best Practice
  • 수행 방향
  • 구현 사항
  • 고민했던 사항들

배포 링크

https://wanted-boram3-1.vercel.app/

동작 화면

메인 페이지	회원가입 페이지
로그인 페이지	Todo 페이지

사용한 라이브러리

Area	Tech Stack
Frontend

프로젝트 구조

📦src
├── 📂assets
├── 📂components
│   ├── 📂AddTodoInput
│   ├── 📂AuthForm
│   ├── 📂Loading
│   ├── 📂Navbar
│   └── 📂TodoItem
├── 📂constants
├── 📂hooks
├── 📂pages
│   ├── 📂SignIn
│   ├── 📂SignUp
│   ├── 📂Todo
│   └── 📂Welcome
├── 📂routes
├── 📂services
├── 📂styles
├── 📂types
└── 📂utils

프로젝트 실행 방법

레파지토리 클론

$ git clone https://github.com/WANTED-TEAM03/pre-onboarding-10th-1-3.git

패키지 설치

$ npm install

애플리케이션 실행

$ npm start

컨벤션

type vs interface

💭 확장성 면에서는 interface가 좋으나 여러 타입을 정의하는데는 type 이 좋다.

💭 interface의 변수명 맨 앞에 ‘I’를 붙여서 무엇을 위한 변수인지 인지하기 좋다.

💭  ‘I’를 붙이는 관행이 사라지는 추세다.

결론: type을 사용

Commit convention

# <타입> : <제목> 형식으로 작성하며 제목은 최대 50글자 정도로만 입력
# 제목을 아랫줄에 작성, 제목 끝에 마침표 금지, 무엇을 했는지 명확하게 작성

구분	내용
FEAT	새로운 기능 추가
FIX	버그 수정
STYLE	코드 의미에 영향을 주지 않는 변경사항
REFACTOR	코드 리팩토링
DOCS	문서 수정
TEST	테스트 코드 추가
CHORE	빌드 부분 혹은 패키지 매니저 수정사항

Git convention

• 이슈 템플릿

---
name: "Custom issue template \U0001F60A"
about: 이슈생성시 이 템플릿을 사용해주세요:)
title: ''
labels: ''
assignees: ''

---

## 🐣 만들고자 하는 기능
기능 구현
## 🐣 해당 기능을 구현하기 위해 할 일
- [ ] todo1
- [ ] todo2

## 🐣 해당 기능에서 신경 쓸 부분

## 🐣 예상기간
0월00일 ~ 0월00일

• PR 템플릿

## 🐣 개요

## 🐣 작업사항

* 

## 🐣 공유사항

*

네이밍 컨벤션

• 컴포넌트 함수 선언은 export default function으로 시작해야 합니다.
• 페이지 컴포넌트의 함수명은 Page로 끝나야 합니다.
• 함수 네이밍은 handle로 시작해야 합니다.
• boolean 타입의 변수명은 is로 시작해야 합니다.

Branch protection rule 설정

main 브랜치와 develop 브랜치에 branch protection rule을 설정하여 브랜치에 직접 push하는 것을 방지하고 코드 리뷰와 approve를 통해 merge되도록 설정했습니다.

• Require approvals
• Require review from Code Owners
• Require conversation resolution before merging

과제 수행 방향

Best Practice

best practice 선정 기준

• 코드의 가독성 및 재사용성
  • 가독성이 좋은 코드는 협업 프로젝트에 있어서 중요한 요소입니다.
• 성능 최적화
  • 성능 최적화를 통해 사용자 경험을 높힐 수 있고 프론트엔드 개발자에게 경쟁력을 갖추게 할 수 있는 요소입니다.
• 유저 편의성
  • 프론트엔드는 유저와 가장 가까이 있는 포지션이기 때문에 사용자 경험을 잘 고려하는 것이 중요합니다.

assignment 단위로 B.P 선정 기준에 따른  B.P 선정

팀원 과제와 본인 과제를 비교하여 어필할 수 있는 부분 체크

수행 방향

• 리뷰한 의견을 중점으로 개인이 특별히 잘했던 부분이나 맡아서 적용해보고 싶은 assignment를 맡아 진행합니다.
• 각 assignment단위로 이슈를 생성하여 브랜치를 생성 후 진행합니다.
• 완전히 새로 만드는 것이 아닌 Best Practice에 가까운 팀원 분들의 사전과제 코드를 가져온 뒤, 회의에서 적용해야 한다고 나온 부분을 추가 및 수정합니다.
• 완료된 작업은 커밋 후 PR을 올려 팀원들의 리뷰를 받습니다.
• 작업은 assignments 1-4 / 5-10 으로 나눠서 진행합니다.
• 코드의 가독성을 위해 함수/변수 네이밍을 명시적으로 합니다.

Assignment No.	이름
1	황수현
2	이준호
3	박수현
4	이상민
5	유동혁
6	강명주
7	박겸영
8	고영욱
9	정정수
10	추헌재

구현 사항

• 코드의 가독성 및 재사용성

  • input state의 관리와 validate를 옵션으로 할 수 있는 useInput 커스텀훅을 사용했습니다.
    • useInput hook은 initValue와 validator를 전달받아 input의 value, setValue, onChange를 다루는 객체와, validation의 Result를 배열로 반환했습니다.
  • 상수화
    • route path, URL, 유효성 검사 정규표현식, 에러 메세지 등 정적 데이터는 상수화하여 가독성과 유지보수를 용이하게 했습니다.
  • 회원가입과 로그인 페이지는 UI와 로직이 비슷하기 때문에 코드의 반복을 줄이기 위해 서로 다른 formType props를 AuthForm component에 전달하여 사용했습니다.
  • axios interceptor를 사용하여 request가 발생하는 시점에서 헤더에 토큰을 담아 보내주도록 설정하여 코드의 반복을 줄였습니다.
  • 라우팅 및 로그인 여부에 따라 리다이렉트 처리했습니다.
    • useRoutes를 사용하여 모든 페이지들을 “/”경로의 중첩라우팅으로 설정하여 GlobalLayout을 설정할 수 있도록 코드를 분리했습니다.
    • useCheckAuth 커스텀 훅을 사용하여 location.pathname이 변할 때 토큰 유무를 확인하여 로그인 여부를 판단하도록 했습니다.
    • 로그인 여부를 outlet의 context로 전달해 페이지 컴포넌트에서 useOutletContext훅을 사용하여 로그인 여부를 판단하고 리다이렉트 처리했습니다.

• 성능 최적화

  • lazy suspense를 사용한 코드 스플리팅을 통해 초기 페이지 렌더링 속도를 단축했습니다.
  • React.Memo와 useMemo, useCallback을 사용하여 성능을 최적화했습니다.

• 사용자 경험

  • 모바일, 데스크톱, 태블릿 사이즈에 맞는 반응형 UI를 구현했습니다.
  • input에서 엔터를 입력하여도 Submit이 일어나도록 구현했습니다.
  • 투두 리스트가 추가될 때 리스트를 auto scroll하도록 구현했습니다.
  • 에러 케이스 별로 alert하여 사용자가 원인을 쉽게 파악할 수 있도록 구현했습니다.
  • 수정 버튼 클릭 시 input에 auto focus되도록 구현했습니다.
  • error message 렌더링시 Layout shift가 일어나지 않도록 구현했습니다.
  • 투두 체크박스 클릭 시 취소선을 표시하여 완료된 투두임을 사용자에게 안내했습니다.
  • 투두 삭제 및 변경 시 사용자에게 재확인하는 알림을 구현하여 실수를 방지할 수 있도록 했습니다.
  • 페이지를 쉽게 이동하고 로그아웃을 할 수 있도록 Navbar를 구현했습니다.

고민했던 사항들

• 로컬스토리지를 다루기 위한 커스텀훅과 유틸함수 사용에 대해
  • 커스텀훅을 사용 시 네트워크 요청이 일어나는 service단에서 훅을 사용하여 관리할 수 없었습니다.
  • 유틸함수로 만들어 사용하는 방식은 코드 분리의 의미가 크게 없다고 판단했습니다.
  • 커스텀훅과 유틸함수를 사용하지 않고 로컬스토리지 로직이 필요한 부분에서 localStorage 객체를 직접 참조하여 사용하는 방식으로 결정했습니다.
• Todo의 CRUD 비즈니스 로직을 util함수로 분리할 지 컴포넌트단에서 만들어 사용할 지에 관하여
  • CRUD로직을 util함수로 분리하면 비즈니스 로직을 분리하여 컴포넌트 코드의 양을 줄일 수 있고 유지보수가 쉬워지며 단일 책임의 원칙을 지킬 수 있는 장점이 있습니다.
  • 컴포넌트단에 CRUD 로직을 구현하면 코드의 해당 state의 Setstate가 일어나는 과정을 한 눈에 볼 수 있어 코드의 가독성이 좋아 이해하기 쉽다는 장점이 있습니다.
  • 과제 특성 상 Depth가 깊지 않고 가독성 측면을 고려하여 컴포넌트단에서 투두의 CRUD 비즈니스 로직을 구현하도록 결정했습니다.