회사 프로젝트 개발 후기 - 프론트엔드 개발자로서의 성장 경험

프로젝트 개요

회사: 셈웨어
기간: 2024.08 - 2024.12 (약 4개월)
역할: 프론트엔드 개발자 (React)
주요 기술: React, TypeScript, Spring, MyBatis

셈웨어에서 React 프론트엔드 개발자로 약 4개월간 근무하며 여러 프로젝트에 참여했습니다. 초기 4개월 동안은 React 기반 프론트엔드 개발에 집중했고, 이후 셈웨어에서 진행한 잇다 SM 프로젝트에 합류하여 풀스택 업무까지 경험할 수 있었습니다. 이 글에서는 보안을 고려하여 구체적인 프로젝트 세부 정보는 제외하고, 기술적 경험과 배운 점만 공유합니다.

기술 스택

Frontend

React, TypeScript, Next.js
styled-components, Tailwind CSS
Zustand (상태 관리)
CSS-in-JS, 반응형 웹

Backend

Spring Framework, Spring Boot
MyBatis, iBatis
JSP, jQuery (레거시 시스템)
MariaDB, MySQL

주요 프로젝트 경험

1. React 기반 웹사이트 리뉴얼

입사 후 처음으로 맡은 메인 프로젝트는 React를 활용한 웹사이트 리뉴얼이었습니다.

주요 작업:

React와 styled-components를 활용한 컴포넌트 기반 개발
반응형 웹 디자인 구현 (모바일 퍼스트 접근)
API 기반 라이브러리로의 마이그레이션
접근성 고려한 웹 개발 (시맨틱 HTML, 키보드 네비게이션)

배운 점:

CSS-in-JS의 장단점을 직접 경험할 수 있었습니다.
점진적 마이그레이션 전략의 중요성을 배웠습니다.
디자이너와의 협업을 통해 UI/UX에 대한 이해도가 높아졌습니다.
성능 최적화(이미지 최적화, 코드 스플리팅, React.memo)의 필요성을 깨달았습니다.

2. 교육 콘텐츠 플랫폼 개발

React와 TypeScript를 활용한 교육 콘텐츠 플랫폼 개발에 참여했습니다.

주요 작업:

문제와 정답 관리 구조 설계 (도메인 데이터와 사용자 상태 분리)
Zustand를 활용한 전역 상태 관리 및 sessionStorage 연동
초중등 테마 분리 및 Context API 활용
재사용 가능한 컴포넌트 구조 설계

배운 점:

복잡한 도메인에서 타입 정의의 중요성을 실감했습니다.
Zustand의 persist 미들웨어를 통해 sessionStorage 연동이 간단하다는 것을 배웠습니다.
Record 타입을 활용한 효율적인 상태 관리 방법을 익혔습니다.
테마 시스템 구축을 통해 유지보수성을 높일 수 있었습니다.

3. 잇다 SM 프로젝트 합류 및 풀스택 개발

약 4개월간 React 프론트엔드 개발에 집중한 후, 셈웨어에서 진행한 잇다 SM 프로젝트에 합류하여 프론트엔드뿐만 아니라 백엔드까지 아우르는 풀스택 업무를 경험할 수 있었습니다.

주요 작업:

Spring Framework를 활용한 백엔드 API 개발
MyBatis를 활용한 데이터베이스 연동
프론트엔드와 백엔드 연동
보안 기능 구현 (OTP 인증 시스템 등)
이벤트 시스템 설계 및 개발

배운 점:

프론트엔드와 백엔드가 어떻게 연동되는지 전체적인 흐름을 이해할 수 있었습니다.
API 설계 시 프론트엔드 개발자의 입장에서 어떤 데이터 구조가 편한지 고려할 수 있게 되었습니다.
Spring의 DI(Dependency Injection) 개념과 MyBatis의 XML 매퍼 작성법을 배웠습니다.
보안 기능 구현을 통해 인증 로직과 보안 흐름에 대한 이해도가 향상되었습니다.

4. 레거시 코드 개선 및 마이그레이션

기존 내장 라이브러리를 API 기반 서비스로 마이그레이션하는 작업을 진행했습니다.

주요 작업:

레거시 코드 분석 및 이해
API 엔드포인트 설계
점진적 마이그레이션 전략 수립
프론트엔드와 API 연동

배운 점:

레거시 코드를 개선하는 것이 얼마나 중요한지 배웠습니다.
점진적으로 마이그레이션하는 전략이 리스크를 최소화한다는 것을 경험했습니다.
API 기반으로 전환하면 유지보수성과 확장성이 향상됩니다.
타입을 명확히 정의하면 API 연동 시 실수를 미리 방지할 수 있습니다.

기술적 성장 경험

프론트엔드 개발

React 생태계:

컴포넌트 기반 개발의 장점을 직접 경험했습니다.
상태 관리 라이브러리(Zustand)를 선택하고 활용하는 과정에서 각 라이브러리의 특성을 이해하게 되었습니다.
TypeScript를 실무 수준으로 활용하면서 타입 안정성의 중요성을 깊이 이해했습니다.

스타일링:

CSS-in-JS(styled-components)와 유틸리티 CSS(Tailwind CSS)를 모두 경험했습니다.
각각의 장단점을 이해하고 프로젝트에 맞는 선택을 할 수 있게 되었습니다.

성능 최적화:

이미지 최적화, 코드 스플리팅, 불필요한 리렌더링 방지 등 다양한 최적화 기법을 적용했습니다.
성능 모니터링의 중요성을 깨달았습니다.

백엔드 개발

Spring Framework:

DI, IoC 등의 개념을 이해하고 실무에 적용했습니다.
RESTful API 설계 원칙을 배웠습니다.

데이터베이스:

MyBatis를 활용한 데이터베이스 연동을 경험했습니다.
SQL 쿼리 최적화의 중요성을 배웠습니다.

보안:

OTP 인증 시스템 구현을 통해 보안 기능 개발 경험을 쌓았습니다.
인증과 인가의 차이를 이해하게 되었습니다.

협업 경험

디자이너와의 협업

피그마 디자인 시안을 보고 개발하는 과정을 경험했습니다.
기술적인 제약사항을 미리 공유하는 것이 중요하다는 것을 배웠습니다.
디자인 시스템을 이해하고 일관된 스타일을 유지하는 것이 중요합니다.

팀원과의 협업

PM, 디자이너, 외부 업체와의 협업을 통해 다양한 역할 간 커뮤니케이션 능력을 향상시켰습니다.
기술적인 용어를 사용하지 않고 비개발자도 이해할 수 있게 설명하는 것이 중요합니다.
정기적인 회의와 업데이트를 통해 프로젝트 진행 상황을 공유하는 것이 중요합니다.

아쉬웠던 점

1. 테스트 코드

대부분의 프로젝트에서 테스트 코드를 작성하지 못했습니다. 지금은 테스트 코드의 중요성을 알지만, 그때는 기능이 동작하는 것에만 집중했습니다.

2. 문서화

코드 문서화가 부족했습니다. 나중에 다시 보면 "이 코드가 왜 이렇게 작성되었지?"라고 생각할 때가 많았습니다.

3. 성능 모니터링

성능을 모니터링하는 시스템을 구축하지 못했습니다. 사용자가 실제로 어떤 성능을 경험하는지 측정하지 못했습니다.

4. 코드 품질

지금 다시 보면 코드 품질이 아쉬운 부분이 많습니다. 중복 코드가 많았고, 에러 처리가 부족했습니다.

총평

셈웨어에서 약 4개월간의 프로젝트 경험을 통해 프론트엔드 개발자로서 많은 것을 배울 수 있었습니다. 처음 4개월 동안은 React를 사용한 프론트엔드 개발을 진행하다가, 팀 개편 후 SM 프로젝트에 합류하면서 백엔드까지 아우르는 풀스택 개발 경험을 쌓을 수 있었습니다.

특히 "왜 이렇게 해야 하는가"를 고민하게 되었고, 단순히 코드를 작성하는 것을 넘어서 사용자 경험과 비즈니스 가치를 고려하는 개발자로 성장할 수 있었습니다.

아쉬운 점도 많지만, 그 아쉬운 점들이 다음 프로젝트에서 개선할 수 있는 동력이 되었습니다. 짧은 기간이었지만, 이 경험들을 통해 많은 것을 배울 수 있었던 것 같습니다.

앞으로도 지속적인 학습과 개선을 통해 더 나은 개발자가 되고 싶습니다.