중간 회고

어느덧 데브캠프를 시작한 과정이 마지막 기업 연계 프로젝트를 남기고 있습니다.
마지막 기업 연계 프로젝트 전 데브 캠프를 진행하면서 어떤 토이 프로젝트를 진행했는지에 대해 말씀드리면서 회고를 진행하고자 합니다.

토이 프로젝트 1

토이 프로젝트1에서는 전혀 예상하지 못했었던 바닐라 자바스크립트로 프로젝트를 진행하였습니다.
처음 바닐라 자바스크립트로 프로젝트를 진행하면서 React나 Next가 아닌 바닐라 자바스크립트를 사용하는 것에 대해 의문점을 가질 수 밖에 없었습니다. 하지만 지금에 와서 생각해본다면 개인적으로는 바닐라 자바스크립트도 좋은 경험과 배움이 있다고 생각하고 있었습니다.

기획부터 개발 구현 그리고 리팩토링까지 팀원들과 협업하여 토이 프로젝트를 진행하였습니다.

백엔드 서버를 구축하는 대신 대체할 수 있는 Firebase를 사용하였고,
Firebase에는 실시간 데이터베이스, 인증, 호스팅 등을 제공하기 때문에 프로토타입을 개발하고 데이터 처리를 간단하게 구현할 수 있을 뿐만 아니라 RealTime Database를 활용하여 데이터를 관리 하였습니다.

코드 컨벤션을 귀한 커밋 규약 설정
프로젝트의 일관성과 가독성을 유지하기 위해 commitlint, EsLint, Prettier를 사용하여 코드 스타일을 엄격하게 관리하고자 노력하였습니다. Husky를 통해 커밋 단계에서 자동으로 코드 스타일을 체크하고, 커밋 컨벤션에 어긋나는 커밋 메시지를 방지하였습니다.

협업을 위한 코드 리뷰 - PR 단계에서 검토
기능 구현 후에는 PR(Pull Request) 단계에서 팀원들과 코드 리뷰를 진행했습니다. 코드 리뷰를 통해 서로의 코드를 확인하고, 개선할 부분이나 문제점을 발견할 수 있었습니다. 또한, 리뷰를 통해 코드 스타일을 통일하고 서로의 개발 방법을 공유하며 학습할 수 있었습니다. 팀원들과의 코드 리뷰는 개발 과정에서 필수적인 부분으로 자리잡았고, 이를 통해 최종적으로 더 완성도 높은 코드를 도출하기 위해 노력했습니다.

토이프로젝트 2(일정 관리, 급여)

이번 토이프로젝트는 저번 토이 프로젝트1을 이어서 하는 느낌입니다.

요구 사항에 정해져 있는 기술 스택은 Firebase, React, Redux, React-Calndar, Styled-components를 사용해야 했습니다.

미팅

저번 토이 프로젝트1을 진행하면서 기획단계에 시간을 오래 할 수록 개발 기간이 짧아질 수 밖에 없어 기획 단계에 시간을 많이 사용하지 못하였습니다. 이로 인해 개발 진행하면서 중간 중간 에로 사항들이 빈번이 일어나게 되었습니다.

그래소 문서작업이나, 일정관리, 개발 컨벤션등에 오랜 시간 미팅을 통해 좀 더 엄격하고 일관성 있게 관리할 수 있도록 미팅을 진행하였습니다.

저는 이번 프로젝트에서 일정 관리 파트를 맡아 개발을 진행하였습니다.

일정 관리에 대해 기획하는 중 직원들을 관리하는 총 관리자가 모든 직원들에 대한 일정을 확인하고 추가,수정,삭제를 할 수 있어야한다고 판단하여 사용자를 구분지을 수 있게하고 이를 관리할 수있는 관리자와 사용자가 따로 존재해야 한다고 생각해서 관리자 부분을 맡아서 진행하게 되었습니다.

캘린더에서 해당 날짜를 클릭하면 카드 형식으로 날짜에 해당 하는 모든 직원에 일정 볼 수 있고, 수정과 삭제는 아이콘을 클릭하면 Modal을 통해 수정, 삭제할 수 있도록 하였습니다.

이 과정에서 일반적인 Modal 구현과 React Portal에 대해 알게 되었고 React Portal에 대해 알려드리고자 합니다.

React Portal

React Portal은 컴포넌트를 DOM 트리의 다른 부분에 렌더링할 수 있게 해주는 기능입니다.

장점

• DOM 구조와 독립적으로 렌더링 가능
• 오버레이나 모달을 페이지 최상위에 렌더링하기 적합
• 의미론적으로 더 명확한 HTML 구조 제공

단점

• 추가적인 코드 설정 필요
• 복합 상태 관리가 필요할 수 있음

일반 모달

일반 모달은 컴포넌트 내부에 직접 렌더링 되는 방식입니다.

장점

• 구현이 간단함
• 컴포넌트 내부상태 관리가 용이

단점

• DOM 구조상 부모 컴포넌트 내부에 제한됨
• z-index 등 스타일링 이슈 발생 가능
• 스크린 리더 등 접근성 문제 발생 가능

<!-- index.html -->
<div id="root"></div> <!-- React app이 렌더링되는 기본 div -->
<div id="modal-root"></div> <!-- Portal을 위한 추가 div -->

위 코드를 보시면 root 영역이 아닌 새로운 Portal을 위한 div를 추가합니다.

import { ReactNode } from 'react';
import { createPortal } from 'react-dom';

const ModalPortal = ({ children }: { children: ReactNode }) => {
	const modalRoot = document.getElementById('modal') as HTMLElement;
	return createPortal(children, modalRoot);
};

export default ModalPortal;

<ModalPortal>
	<Modal>
</ModalPortal>

토이 프로젝트 3

사용자들이 만든 자신만의 영상 링크 기반(유튜브, Vimeo, Dailymotion, Twitch 등) 플레이 리스트를 공유하고, 구독하여 자신만의 타임 라인을 만들고 네트워킹 할 수 있는 SNS 서비스 구현이였습니다.

이번 프로젝트는 서비스를 처음부터 끝까지 완성해보는 경험이었습니다

여러 협업 프로젝트를 경험하면서 요구 사항에 맞는 기능 구현에 급급하여 사용자 경험 향상에 대한 생각을 가지고 있었지만 지나쳤던 경험이 많았습니다.

이번에는 페이지 이동 처리, 비동기 데이터 처리, toast,Skeleton,LodingSppiner 메시지로 사용자 경험을 개선하고자 했으며 라이브러리 도움 없이 직접 구현하기로 하였습니다.

영상 공유 SNS 플랫폼

기술 스택

• Typescript, React
• Vite
• Zustand
• TanStack Query
• styled-components
• playwright

상태 관리 라이브러리의 경우 recoil, zustand, redux 이 세 가지 중에 기술 스택에 대한 고민을 하게 되었습니다. 각각 하나씩 어떤 장점이 있고 단점이 있으며 해당 기술 스택을 선택하게 된 배경을 말씀드리고 싶습니다.

recoil
Recoil은 React의 useState와 비슷한 API를 제공하여 러닝 커브가 낮고 사용이 직관적입니다. 이를 통해 상태 관리의 복잡도를 줄이고 React 개발자들에게 친숙한 경험을 제공합니다.
그러나 Recoil은 아직 정식 버전이 출시되지 않았고, 업데이트 주기가 느린 점이 아쉬운 부분으로 다가왔습니다.
또한, 저는 이미 여러 협업 프로젝트에서 Recoil을 사용한 경험이 있기 때문에 새로운 기술 스택을 탐색하고 싶어 이번 프로젝트에서는 선택하지 않았습니다.

redux
redux가 flux 패턴의 가장 표본이 되는 기술 스택이라고 생각합니다.
하지만 많은 보일러플레이트 필요하고 비교적 규모가 있는 프로젝트에서 사용되기도 하며 이를 근거로 비교적 짧은 기간에 프로젝트를 완성하기 위해 선택하지 않았습니다.

zustand
Zustand는 작고 중간 규모의 프로젝트에 적합하며, 직관적인 API와 간결한 코드 구조 덕분에 상태 관리를 효율적으로 처리할 수 있습니다.
특히, React Context API와 달리 불필요한 리렌더링을 최소화하며, Redux DevTools와의 호환성을 통해 상태 디버깅도 가능합니다.
이러한 특징 덕분에 빠르게 프로젝트를 진행하면서도 간단하고 효율적인 상태 관리가 필요했던 이번 프로젝트에 잘 맞는 선택이라고 판단했습니다.

세 가지 라이브러리 모두 장단점이 있지만, 프로젝트의 규모, 기간, 효율적인 상태 관리라는 요구사항을 고려했을 때, Zustand가 가장 적합하다고 판단하여 선택하게 되었습니다.

검색 기능 구현 및 최근 검색어 구현

검색 페이지의 경우 2가지의 기능을 생각하였습니다

1. 사용자가 검색과 연관된 연관 검색어
2. 첫 렌더링 시에는 최근 검색한 검색어 보여주기(검색어가 비어있을 경우)

또, 위 2가지의 경우에 각각 맞는 세부 요구사항을 정리하게 되었습니다.

1.사용자가 검색과 연관된 연관 검색어

사용자가 검색한 내용에 포함되는 모든 제목을 supabase에서 가져오기

2. 첫 렌더링 시에는 최근 검색한 검색어 보여주기(검색어가 비어있을 경우)

최근 검색어의 경우 일반적인 useState를 사용 하여 관리할 경우 사용자가 브라우저에 다시 접속하거나 렌더링이 일어나면 초기화되기 때문에 이를 대체하고자 localStorage를 사용하였고 중복된 검색어는 관리할 필요가 없기 때문에 new Set을 통해 최근 검색어를 관리하였습니다.

위와 관련된 내용은 아래의 링크에서 자세히 확인할 수 있습니다.

검색 기능 구현 및 최근 검색어 구현

무한 스크롤 부자연스러운 컨텐츠 에러 해결

TanStack Query의 useInfiniteQuery와 Intersection Observer API를 사용하여 무한 스크롤을 사용하여 콘텐츠를 보여주는 상황이였습니다.
사용자 경험을 개선하기 위해 다음 콘텐츠가 로딩되는 상태에서는 Skeleton을 사용하여 사용자 경험을 향상 시키기 위한 과정에서 다음 콘텐츠를 가져오는 과정에서 전체 콘텐츠가 리렌더링 되면서 부자연스러운 현상이 일어났습니다.

이를 해결 하기 위해 placeholderData 와 keepPreviousData를 사용하여 해결하였습니다 이와 관련된 자세한 내용은 아래와 링크를 통해 확인할 수 있습니다.

무한 스크롤 부자연스러운 콘텐츠 에러 해결

후기

첫 번째 프로젝트에서 경험한 바닐라 자바스크립트는 개인적으로 React에 대한 기본 지식과 경험이 있다면 큰 도움이 될 것이라 생각합니다. 직접 store와 router를 구현하며 React가 왜 등장했는지, 그리고 SPA를 바닐라 자바스크립트로 만들어보는 과정을 통해 많은 것을 배울 수 있었습니다.

이 과정에서 단순히 요구사항에 맞는 기능 개발뿐만 아니라 하나의 서비스를 만들어가는 데 있어 개발 기획, 요구사항 정의서, 사용자 스토리 등 다양한 요소가 얼마나 중요한지 깨달았습니다. 특히, 개발 기획에 많은 시간을 투자할수록 개발 과정에서 효율적이고 편리하게 작업을 진행할 수 있다는 점을 실감했습니다.

3번의 토이 프로젝트를 진행하며, 마지막 기업 연계 프로젝트를 앞두고 있습니다. 이 토이 프로젝트들은 기업 연계 프로젝트를 위한 예행연습이라 생각하며 진행했습니다. 기업 연계 프로젝트에서는 UI/UX 디자이너, 프론트엔드, 백엔드 개발자가 협업하여 주어진 기간 내 문제를 해결하는 과정을 거치게 됩니다. 이를 통해 실제 현업에서 이루어지는 프로젝트처럼 진행할 수 있을 것이라 기대하며, 주어질 요구사항에 대한 문제를 해결하며 성장할 수 있다고 큰 기대를 품고 있습니다.