[포트폴리오] poompoom 개선

✅ 프로젝트 도중 발생한 애로사항

1. container/presenter/styles 구조 적용에 대한 애로사항

1-1. 파일 구조 불일치 문제 발생

1-2. 3가지 그룹으로 분리하기 애매한 컴포넌트 발생( 작은 컴포넌트에선 과도한 분리가 부담 )

1-3. 파일 이름이 길고 반복됨.

=> 관심사의 분리(SoC: Separation of Concerns)라는 목적은 분명히 장점이 있으나, Presenter는 Container 없이도 다양한 페이지에서 재사용 가능하다는 등 재사용성과 작업 기한에 무리가 있어, PostCard/Container.tsx 같이 역할을 구분하여 개선하였다.

 

 

2. 폴더 구조가 중구난방이어서 이해하기 어려운 애로사항

=> 도메인 기준으로 폴더를 분리하여 FSD 방식으로 구조화하였다.

 

3. 

✅ 프로젝트 개선 방향

우선순위	범주	As-Is (기존 문제)	To-Be (개선 방향)
1	구조/설계	폴더 구조가 기능별로 명확히 구분되지 않아 이해가 어려움	도메인 기준(FSD: Feature-Sliced Design)으로 구조화하여 가독성 향상
2	구조 /설계	container/presenter/styles 구조 적용이 일관되지 않음 (파일 구조 불일치)	역할별 파일 분리 후, PostCard/Container.tsx 등으로 폴더 통일
3	구조 /설계	작은 컴포넌트도 억지로 3단 분리해 과도한 분리 부담 발생	컴포넌트 복잡도에 따라 유연하게 분리
4	구조 /설계	파일명이 반복되어 이름이 길어짐	폴더 구조로 관리하여 파일명은 간결하게 변경
5	구조 /설계	상태 관리가 전역 없이 개별 컴포넌트 관리로 흩어짐	Redux 도입하여 전역 상태 통합 및 구조화
6	구조 /설계	JavaScript + Styled-Components 사용, 타입 안전성 부족	TypeScript + Emotion으로 마이그레이션하여 타입 안정성 확보
7	보안/인증	단순 accessToken 여부로만 로그인 상태 확인 (불필요 요청 발생)	JWT 토큰 검증 및 payload 활용으로 중복 요청 제거
8	보안/인증	로컬 스토리지에 accessToken 저장 (보안 취약)	HttpOnly 쿠키를 통해 토큰 저장, 보안 강화
9	사용자 경험	사용자가 읽은 리뷰 데이터를 매번 백엔드 fetch	클라이언트 세션(local state/sessionStorage)로 관리하여 통신 최소화
10	사용자 경험	팔로우, 좋아요 기능 비동기 동작 실패 (UI 즉시 반영 안 됨)	optimistic update 적용하여 즉각 반영 후 서버 동기화
11	사용자 경험	회원가입 시 회원 정보 초기화 문제 (입력값 유실)	회원 정보 입력값을 로컬 상태 또는 캐싱하여 유지되도록 개선
12	사용자 경험	무한스크롤 코드가 중복되고 가독성이 낮음	커스텀 훅으로 중복 제거 및 가독성 향상
13	사용자 경험	게시글 내 사진 크기 문제 (원본 비율에 따라 잘림 발생)	object-fit: cover/contain 적용, 컨테이너 조정
14	성능/최적화	50KB를 초과하는 이미지 빌드시 에러 발생	이미지 압축 또는 스플리팅으로 최적화
15	성능/최적화	Figma에서 export한 SVG 파일들이 비효율적인 구조	단일 프레임 + 단일 벡터로 정리하여 최적화
16	성능/최적화	고정된 가로폭 설정으로 반응형 미지원 (1028px 이상)	3열 grid 기반 최소 반응형 대응
17	코드 스타일	품질 관리 및 테스트 자동화 부재	ESLint + Prettier 적용, Github Actions 통한 자동화
18	코드 스타일	CSS 속성 정렬 일관성 없음	Stylelint + stylelint-order 적용으로 속성 순서 자동 정렬

 

최종적으로 포트폴리오 서술할 때 이렇게 정리하면 자연스러워:

기존 FE 프로젝트의 구조적, 기능적 한계를 보완하고자,
container/presenter 분리와 FSD 방식 폴더 구조화, TypeScript + emotion 마이그레이션을 진행했습니다.
또한, 백엔드 부재로 인한 데이터 관리/배포 한계를 인식하여 Express 기반 BFF 서버를 구축하고,
Nginx 리버스 프록시와 Docker 통합 빌드를 적용해 구조적 완성도를 높였습니다.
이외에도 회원 정보 캐싱, 무한 스크롤 커스텀 훅 리팩터링, 디자인 리소스 최적화,
파일 사이즈 최적화 및 반응형 대응 등을 통해 실질적인 문제 해결 경험을 쌓았습니다.