“달다” 프로젝트 [22.09 ~ 22.11]

관련 링크

Dalda

설명

• 주문제작 케이크를 더욱 편리하게 주문 할 수 있는 웹 플랫폼
• In 소프트웨어 마에스트로

기술 스택

• React Typescript Redux Tailwind-css vite

이렇게 프로젝트를 진행 했어요

• Git commit - Gitmoji 를 통한 커밋 내용이 대한 한줄 설명
• 이슈 등록
  • 개발에 들어가기전에 어떤 것을 해야할지 이슈로 등록을 해서 방향성을 잡았습니다.
• 셀프 리뷰
  • 개발 후, 작성하였던 코드들을 보면서 개선 방향 및 코드 작성 에 대한 이유를 셀프리뷰 하였습니다.
  • 개발 하면서 생긴 이슈(성능상에 대한 문제, 정상적으로 작동하지 않았던 문제)들을 리뷰를 통해서 어떤 문제가 있고 어떻게 해결 하였는지 작성 하는 하나의 장 으로서 활용 하였습니다.

이렇게 개발 했어요

1. Atomic-Design-Pattern 채용

   • 맨 처음 Feature 단위로 폴더구조를 구성 하였는데, “재활용 하는 컴포넌트를 만들기 힘들다” 라는 한계를 받았습니다
     • 재활용 하는 컴포넌트를 만들더라도, 어디에 위치를 시켜야 할지 또한 Feature 단위로 만들었기 때문에 컴포넌트 추상화를 시키기는 것이 새로운 컴포넌트를 만드는것 보다 어려워서 폴더 아키텍쳐를 변경하는 계기가 되었습니다.

   Atomic 네이밍

   • atoms : 가장 기초적인 재활용 되며 깊게 추상화된 컴포넌트
   • molecules: atoms 를 2개 이상 사용 하며, 컴포넌트 내부에서 상태관리 X, 상태를 읽어와 사용하기만 한다
   • blocks: atoms 또는 molecules 를 2개 이상 사용 하며, 컴포넌트 내부에서 상태를 불러오거나 사용 O
   • pages : page 에서 사용, 컴포넌트 내부에서 상태 관리 하며 실제로 보여지는 데이터를 주로 다룸

2. ContextAPI 을 통한 서비스로직, UI로직 분리화

   • Props Driling 을 해결하기 위해서 Context API 사용하였습니다.
   • “같은 상태” ex) 프로필 수정 및 등록에 대한 상태 를 공유하는 상태관리로서 사용
   • 읽기전용 context 와 쓰기전용 context 를 따로 만들어서 사용
     • 컴포넌트 리렌더링 최적화에 대한 이점
     • 읽기, 쓰기 에 대한 로직 분리화
   • 해당 Context 를 사용 하는 컴포넌트는 Props 로 상태를 받지 않고 hook 으로 불러와 사용 하였습니다
     • Component 내 에서 로직을 구현하지 않음 으로써 서비스로직 과 UI 로직 을 분리 하였습니다.

3. 서버 와 연동이 안되어 있는 개발 환경 에서 서버 연동이 되어 있는 배포 환경 과 동일한 코드를 사용하기 위해 노력 하였습니다.

   • 프론트엔드 개발과 백엔드 개발이 동시에 진행 되는 상황 에서 비동기 통신 을 가정 하고 코드를 작성 해야 할때가 있는데, 백엔드 서버가 배포가 안되어 연결이 안되어 있는 문제가 생겼습니다.
   • 목업 데이터를 따로 만들어, 서버와 연결되어있는 환경 과 연결되어 있지 않은 환경 에 대한 차이 없는 코드를 작성하고 싶었고, msw 라이브러리를 사용하여 이 문제를 해결하였습니다.
   • msw 를 통해서 목업 서버를 직접 만들었습니다
     • 실제 api 와 동일한 요청 파라미터, header, body 들을 받아서 동일하게 응답하는 목업 api 를 직접 작성 하였고, 이를 토대로 백엔드 개발자와 소통이 원할 하게 되었습니다
     • 목업서버를 만드는데 시간이 들었지만, db 및 서버 통신에 대한 이해도가 높아져 프론트엔드 로직을 탄탄하게 작성 하였습니다.
   • 동일한 코드로 목업 서버와 실제 서버 에 대한 서버통신 을 하기 때문에 높은 생산성을 가졌습니다

4. UI/UX 를 고려한 개발을 하였습니다.

   1. 모바일 브라우저 어플리케이션 (사파리, 크롬) 등이 각자 브라우저에 대한 상단바, 하단바 가 존재하고 사파리의 경우 하단바가 브라우저 스크롤에 따라 사라지거나, 생기기 때문에 서버 통신 및 화면 전환에 대한 View 는 UI 의 상단에 위치 하도록 구현 하였습니다.

5. React.lazy 를 통한 코드스플리팅

   • 사용자가 페이지를 렌더링하는 동안 다른 요소와 상호작용하지 않도록 한다
   • 해당 페이지에서 필요하지 않은 것을 로드 하지 않도록 하여 앱 크기를 줄이지 않더라도 큰 초기 로딩 속도 개선을 할 수 있다

   DOM 로드시간: 27.37 → 17.38
   전체 로드시간: 28.23 → 18.13
   

   약 10초의 로드 속도를 개선 하였음

   전)

   후)