미리보기

Cypress 테스트 코드 리팩토링 및 최적화 작업 수행
1. 테스트 구조 개선:
- 기존 테스트 코드의 혼재된 test-structure를 분석하고 개선점 도출
- Cypress test-structure 비교 분석 후, 수행 시간, 테스트 독립성, 가독성 측면에서 'describe → (여러 개의) context → (여러 개의) it' 구조로 리팩토링 제안 및 구현
- 테스트 실행 시간을 01:39.2에서 00:35로 약 63% 단축

2. Angular 버전 업그레이드 대응:
- Angular 메이저 버전 업그레이드에 따른 CSS 구조 변경 대응
- 기존 CSS Selector 기반 테스트 코드의 취약점 식별
- 데이터 속성(data-*) 도입을 제안 및 구현하여 Angular 버전 및 CSS 구조 변경에 영향받지 않는 안정적인 테스트 코드 작성

3. 테스트 코드 유지보수성 향상:
- 데이터 속성 기반 선택자 사용으로 프론트엔드 코드 변경에 따른 테스트 코드 수정 필요성 최소화
- 명확한 테스트 구조와 네이밍으로 테스트 의도와 범위를 직관적으로 파악할 수 있도록 개선

📋 프로젝트 개요

• 개인

• 기간 : 2024.04. ~

• 기술 스택 : TypeScript, Next.js, Tailwind CSS, Supabase, NextAuth.js

• https://github.com/anonymousRecords/touslesjours-admin

🤔 프로젝트 배경 및 구현

뚜레쥬르 매장 아르바이트 경험 중 발생한 업무 분배 비효율성을 해결하기 위해 시스템적 접근을 시도했습니다. 이를 통해 실제 운영 중인 매장의 업무 분배 시스템을 개발했습니다.

1. 컴포넌트 상태 관리 구조 개선

관련 링크 : https://github.com/anonymousRecords/touslesjours-admin/issues/2
[문제] 드롭다운 컴포넌트의 상태 변경이 화면에 즉시 반영되지 않는 이슈 발생
[해결 과정]
- 공통 컴포넌트 내부 상태 관리에서 부모 컴포넌트로 상태 관리 책임 이전
- props를 통한 데이터 흐름 구현: onSelect prop을 사용하여 부모 컴포넌트에서 선택된 값의 인덱스를 공통 컴포넌트에 전달 / handleDropDownChange 함수를 부모 컴포넌트에서 정의하여 상태 업데이트 로직 중앙화
[결과]
- 컴포넌트 간 단방향 데이터 흐름 구현
- 컴포넌트 설계에 대한 고찰을 할 수 있게 됨
2. SSR과 CSR 간 불일치 해결


관련 링크 : https://github.com/anonymousRecords/touslesjours-admin/issues/1

[문제] 서버와 클라이언트 간 초기 렌더링 결과 불일치로 인한 hydration 오류 발생


[해결 과정]
- 서버와 클라이언트 간 날짜 표시 형식 불일치 문제 식별 (예: 'May 2024' vs '2024년 5월')
- 달력 컴포넌트에 locale="ko-KR" 속성 추가로 일관된 한국어 날짜 표시 구현
- 서버 사이드 렌더링 결과와 클라이언트 사이드 hydration 결과의 일치 보장
[결과]
- Text content mismatch 오류 해결
- Next.js의 SSR 동작 방식에 대한 깊이 있는 이해 획득

📋 프로젝트 개요

• 역할: Frontend 개발자 | FE (1) + BE(1) + PD (1)

• 개발 기간: 2023.08 ~

• 기술 스택: Next.js, TypeScript, Emotion CSS, Zustand

• https://github.com/najakgil

• 나작길 블로그 : https://najakgil-blog.vercel.app/

🤔 프로젝트 배경 및 구현

대학생 타겟 고트래픽 웹 애플리케이션 개발을 목표로, 사용자 참여형 캐릭터 커스터마이제이션 서비스를 구현했습니다. 베타 서비스 운영을 통해 사용자 피드백을 수집하고 UX를 개선했습니다.

1. 반복적 프로토타이핑을 통한 기술 스택 최적화

관련 링크 : https://najakgil-blog.vercel.app/posts/240605

- 총 4개의 버전으로 프로젝트 반복 개발
- 각 반복마다 기술 스택을 재평가하고 최적화하여 성능 및 개발 효율성 향상
2. Canvas 기반 캐릭터 커스터마이제이션 구현 과정
관련 링크 : https://najakgil-blog.vercel.app/posts/240611

초기 접근: Fabric.js 라이브러리 활용
중간 과정: 네이티브 Canvas API 직접 구현 시도
- Fabric.js 공식 문서의 높은 진입 장벽
- 네이티브 Canvas API를 활용한 커스텀 구현 시도 (마우스 이벤트 기반 기능 구현 성공, 터치 이벤트 지원의 어려움 직면, 코드 복잡성 증가로 인한 유지보수 우려)
- 오픈 소스 커뮤니티 및 다양한 구현 사례 연구
3. 상태 관리 및 컴포넌트 간 데이터 전송 최적화
관련 링크 : https://github.com/najakgil/najakgil-client/tree/1.0.0-beta

[문제] fabricjs-react로 구현한 에디터 상태를 프리뷰 컴포넌트로 전달하는 과정의 복잡성

[해결]
- Canvas 내용을 base64 인코딩된 이미지로 변환
- Zustand를 활용한 전역 상태 관리로 컴포넌트 간 데이터 흐름 단순화
- 에디터와 프리뷰 컴포넌트 간 일관된 상태 유지 메커니즘 구현

• 주어진 과제를, 가지고 있는 자원 내에서 해결해 보는 경험을 가짐

• 1초마다 대기자 API를 요청하여 이를 확인한 후 화면에 표시하여, 미니 게임 시 현재 동시 대기 인원을 표시함

IT 연합 동아리 UMC | 역지사지가 되어 본 경험

• 질문을 받는 입장으로, 좋은 질문에 대해 고민하는 계기가 됨

• 상대가 이해하기 쉽게 설명하는 방법을 익히게 됨

• Web 파트장으로 HTML, CSS, JavaScript, React를 기반으로 한, Web 교육을 담당하였습니다. 이를 통해 질문을 받는 입장이 되어 효과적으로 질문하는 방식에 대해 고민해 보게 되었습니다. 또한 동아리원들에게 쉽게 설명하기 위해 기본 개념을 익히고 비유 등 설명 방식을 시도해 볼 수 있었습니다.

기술 커뮤니티 활동 | 약한 연결의 힘

• GDSC Gachon 1기 멤버

• 개발자는 기술 커뮤니티와 함께 성장해 나간다고 생각합니다. 저는 제가 가지고 있는 고민을 커피챗을 통해 조언을 구하거나, 컨퍼런스를 통해 약한 연결을 맺기도 합니다. 이를 통해 저는 꾸준히 개발자로서의 역량을 확장하고자 노력합니다.