토이프로젝트 1
어떠한 라이브러리도 사용하지 않고 vanilla js(React,Next 등을 사용하지 않고)와 css(TailWind css, Css in js을 사용하지 않고), html로만 사용하여 프로젝트를 만들어 본것이 처음인거 같습니다.
프로젝트를 진행하면서 class형과 함수형의 차이점에 알게 되었고 왜 React가 각광받게 되었는지 알게 되었습니다.
진행 과정
프로젝트 기획 및 기능 정의
이번 프로젝트는 아이디어를 구체화하고 기능을 정의하는 것에서 시작했습니다. 기획 단계에서는 팀원들과의 브레인스토밍을 통해 사용자에게 필요한 기능들을 나열하고, 이 기능들이 사용자에게 어떤 가치를 제공할지 고민했습니다. 그 후 피그마(Figma)를 활용해 화면 구성과 인터페이스 디자인을 시각적으로 설계했습니다. 이렇게 준비한 와이어프레임과 UI 설계는 팀원들이 기능을 이해하고 개발할 때 기준이 되는 중요한 자료가 되었습니다.
데이터베이스 설계 - ERD 작성
서비스에서 사용하는 데이터의 흐름과 관계를 명확히 하기 위해 ERD(Entity-Relationship Diagram)를 설계했습니다. 관리자, 사용자의 휴가 신청 및 출 퇴근 관리 등 데이터베이스 설계는 Firebase와 연결될 테이블의 구조를 결정하는 데도 큰 도움이 되었습니다.
웹 반응형 디자인: media query 활용
사용자가 PC, 태블릿, 모바일 등 다양한 디바이스에서 서비스를 이용할 수 있도록 반응형 디자인을 적용했습니다. 이를 위해 CSS의 media query를 사용해 화면 크기에 따라 레이아웃과 UI 요소가 유동적으로 변화하도록 설정했습니다. 예를 들어, PC에서는 사이드바가 기본으로 표시되지만, 모바일에서는 메뉴 버튼을 누를 때만 사이드바가 나타나는 구조로 변경해 사용자 경험을 개선했습니다.
Firebase로 서버 대체
백엔드 서버를 직접 구축하는 대신 Firebase를 사용해 서버 역할을 대체했습니다. Firebase는 실시간 데이터베이스, 인증, 호스팅 등을 제공하기 때문에 빠르게 프로토타입을 개발하고 데이터 처리를 간단하게 구현할 수 있었습니다. RealTime Database를 활용하여 데이터를 관리 하였습니다.
코드 컨벤션을 위한 커밋 규약 설정
프로젝트의 일관성과 가독성을 유지하기 위해 commitlint, ESLint, Prettier를 사용해 코드 스타일을 통일했습니다. Husky를 통해 커밋 단계에서 자동으로 코드 스타일을 체크하고, 잘못된 커밋 메시지를 방지했습니다. 예를 들어, 커밋 메시지가 규칙에 맞지 않거나 코드 스타일이 어긋나면 푸시되지 않도록 하여 코드 퀄리티를 높였습니다.
협업을 위한 코드 리뷰 - PR 단계에서 검토
기능 구현 후에는 PR(Pull Request) 단계에서 팀원들과 코드 리뷰를 진행했습니다. 코드 리뷰를 통해 서로의 코드를 확인하고, 개선할 부분이나 문제점을 발견할 수 있었습니다. 또한, 리뷰를 통해 코드 스타일을 통일하고 서로의 개발 방법을 공유하며 학습할 수 있었습니다. 팀원들과의 코드 리뷰는 개발 과정에서 필수적인 부분으로 자리잡았고, 이를 통해 최종적으로 더 완성도 높은 코드를 도출하기 위해 노력했습니다.
리팩토링
렌더링 최적화
현재 하나의 데이터가 변경될 때 전체 페이지가 다시 렌더링되면서 repaint 시간이 길어지는 문제가 발생하고 있습니다. 이를 해결하기 위해 필요한 부분만 렌더링되도록 최적화하여 성능을 개선할 예정입니다.
공통 컴포넌트화
중복된 코드를 줄이고 유지보수성을 높이기 위해 공통 컴포넌트를 만들어 재사용할 계획입니다.
0개의 댓글
