💡 우아한 테크코스 프리코스 4, 5주차 오픈 미션

🎯 미션 주제명

🌐 Frontend Portfolio

🖥️ 관련 링크

목록	링크	비고
figma	피그마 작업물 링크
vercel	웹사이트 vercel 링크	구글, 깃허브 로그인 필요; 웹사이트 열람 시 전체화면 권장
velog	오픈 미션 회고록 링크

🚀 프로젝트를 통해 기대하는 성장

이번 미션의 목표는 단순히 포트폴리오를 완성하는 것에 그치지 않고, 프리코스에서 배운 테스트의 중요성을 실제로 적용하고 새로운 기술 스택에 도전하며 React 개발자로서 한 단계 더 성장하는 것입니다.

🎯 프로젝트를 시작하게 된 계기

제가 개발자가 되고 싶은 동기는 사람들에게 편리함과 유용함을 제공하는 웹 서비스를 만드는 것입니다. 제가 추구하는 개발자가 되기 위해 필요한 태도인 "끊임없는 학습"과 "지식 공유"라는 태도는, 지속적으로 배우며 성장하는 개발자를 지향하는 우테코 프리코스의 가치와 일치했습니다.

프리코스의 핵심주제는 끊임없이 도전하고 도전 과정에 몰입하는 것 입니다. 그래서 이 과정에서 미션의 결과도 중요하지만, 이 코스 기간 동안 새로운 도전에 몰입하여, 제가 더 나은 개발자로 성장하자는 과정에 주안점을 두었습니다.

로또, 자동차 경주, 문자열 계산기 등 다양한 미션을 수행하며 처음 접하는 개념에 부딪히고, 수없이 시행착오를 겪었지만 그 도전에 몰입하는 과정 속에서 문제를 해결하고, 함께 배우며 성장하는 즐거움 을 알게 되었습니다.

특히 피어 리뷰를 통해 JEST 테스트 코드의 장점과 중요성을 배운 것은 큰 수확이었습니다. 이는 **테스트 코드를 내 프론트엔드 분야에 어떻게 효과적으로 적용할 수 있을까?**라는 즐거운 고민으로 이어졌습니다.

그러던 중, 프리코스 경험 기반으로 미션을 설계하고 구현한다는 마지막 오픈 미션을 만났습니다. 이는 저의 '즐거운 고민'과 "지금까지의 성장 과정을 어떻게 증명할까?"라는 두 질문을 한 번에 해결할 기회였습니다.

그래서 이번 미션의 주제를, 프리코스에서 배운 테스트의 중요성을 실천하는 동시에 저의 성장 과정을 기록하는 테스트 프레임워크를 접목시킨 포트폴리오 웹사이트로 정했습니다.

이 프로젝트는 단순한 자기소개 페이지가 아닌, 끊임없이 배우고 시도하며 성장하는 개발자로서의 기록이자, 우테코 프리코스의 핵심 가치인 도전과 몰입을 실천하는 제 마음가짐이 담겨있습니다.

• 프리코스에서 경험한 기능 활용: Jest를 위시한 테스트 라이브러리 활용
  

🎯 도전 목표

스스로 도전하고 싶은 목표를 설정하고, 그에 맞는 실행 계획을 세워 미션을 진행한다.

🎨 기술적 목표

• React + TypeScript를 사용하여, 타입 안정성과 유지보수성을 갖춘 프로젝트 구조 설계
• 컴포넌트 기반 설계를 통해 UI를 효율적으로 재사용하고 관리
• 프리코스에서 배운 **테스트 코드(Vitest(Jest), React Testing Library)**를 작성하여 안정적인 애플리케이션 구현
• React의 '관심사 분리(Separation of Concerns)' 원칙 적용
• • SkillInfo.tsx와 같은 컨테이너(Controller/Model) 컴포넌트가 상태와 로직을 관리하고, SkillBadge.tsx 같은 프리젠터(View) 컴포넌트는 UI만 그리도록 설계하여 테스트가 용이한 구조 구현
• 반응형 디자인 & UI 완성도 향상을 통해 다양한 환경에서 일관된 사용자 경험 제공

💡 개인적 목표

• “몰입하는 개발자”로서의 태도와 열정을 보여주는 공간 구축
• 처음으로 프리코스에서 배운 JEST를 내 React 프로그램에 접목
• Tailwind CSS, Framer Motion, Lottie, Lenis 처럼 처음 써보는 기술로 스타일해보기

📁 프로젝트 구조 (와이어프레임 완성)

portfolio/
├── node_modules/
│   └──  /...
├── public/
│   ├── images/
│   │   ├── icons/ #아이콘 이미지 모음
│   │   │   └── /...
│   │   └── pics/  #기타 이미지 모음
│   │       └── /...
├── src/
│   ├── App.tsx
│   ├── Main.tsx
│   ├── assets/ # lottie 아이콘 json 파일 모음
│   │   ├──lottie/
│   │       └── /...
│   │
│   ├── components/ # View: 재사용 UI
│   │   ├── common/ #공통 컴포넌트 관리
│   │   │   ├── Gnb.tsx: gnb 컴포넌트 
│   │   │   ├── Quickmenu.tsx: 퀵메뉴 컴포넌트
│   │   │   ├── SideText.tsx: 사이드 라인, 문구 컴포넌트
│   │   │   ├── AnimatedLetters.tsx: 한 글자씩 차례로 나오는 애니메이션 기능
│   │   │   ├── ScrollFadeIn.tsx: 스크롤을 내릴 때 컴포넌트가 등장하는 애니메이션 기능
│   │   │   └── ScrollPinAnimation.tsx: 프로필 컴포넌트 애니메이션 기능
│   │   └── layout/ #공통 틀 관리
│   │
│   ├── constants/ #메시지, 데이터, 타입 폴더
│   │   ├── HyperLink.ts: 링크 관련 상수 메시지
│   │   ├── ImageInfo.ts: 이미지 관련 상수 메시지
│   │   ├── Projects.ts: 프로젝트 데이터, 타입 
│   │   ├── Skills.ts: 스킬 데이터, 타입
│   │   ├── Experience.ts: 프로필 카드 뒷면 경험, 교육 정보 데이터, 타입
│   │   └── Text.ts: 문장, 단어 등 상수 메시지
│   │
│   ├── pages/  # View: 페이지 단위
│   │   ├──main/ # 메인페이지 컴포넌트 관리
│   │   │   ├── Title.tsx: 타이틀 컴포넌트
│   │   │   ├── ScrollFixedComponents.tsx: 스크롤 시 고정되는 공통컴포넌트들의 상위 컴포넌트
│   │   │   ├── Profile/ # Profile 페이지
│   │   │   │   ├──index.tsx: Profile 컴포넌트들의 최상위 컴포넌트
│   │   │   │   └──.../
│   │   │   ├── Skills/ # Skills 페이지
│   │   │   │   ├──index.tsx: Skills 컴포넌트들의 최상위 컴포넌트
│   │   │   │   └──.../
│   │   │   ├── Projects/ # Projects 페이지
│   │   │   │   ├──index.tsx: Project 컴포넌트들의 최상위 컴포넌트
│   │   │   │   └──.../
│   │   │   ├── Contact/ # Contact 폼 제출 페이지
│   │   │   │   ├──index.tsx: Contact 컴포넌트의 최상위 컴포넌트
│   │   │   │   └──.../
│   │   └──sub/ # 서브페이지 컴포넌트 관리
│   │
│   ├── styles/ # View: 전역 스타일, Tailwind 설정
│   │   └── App.css: 공통 스타일 파일
│   │
│   ├── hooks/  # Controller: 로직/이벤트 제어
│   │   └── useSmoothScroll.ts: lenis 훅 관리
│   │
│   ├── utils/  # Model: 공용 로직, 데이터 가공
│   │   └── staggerContainer.ts: text 모션 이벤트 타입 관리
│   │
│   ├── store/  # Model: 전역 상태
│   └── tests/  # 테스트 코드 
│       ├── setup.ts: Vitest가 'jest-dom'의 편리한 기능들을 사용할 수 있도록 설정하는 파일  
│       ├── pages/skills # skill 페이지 테스트 폴더   
│       ├── pages/projects # project 페이지 테스트 폴더
│       ├── pages/profile # ProfileBack 컴포넌트 페이지 테스트 폴더
│       ├── pages/contact # contact 폼 작동 테스트 폴더
│       └── components/gnb # gnb 작동 테스트
├── .gitignore
├── eslint.config.js
├── index.html
├── package-lock.json
├── package.json
├── postcss.config.js
├── tailwind.config.js
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── vite.config.ts
└── README.md

🧩 개발 환경

분야	기술
Frontend	React, Typescript, Vite
Library	Lenis, Lottie, Swiper, formspree
Styling	CSS3, Tailwind CSS, Framer Motion
Test	Jest(Vitest), React Testing Library
Version Control	Git, GitHub
Deployment	Vercel
Design Tool	Figma

🗓️ 개발 과정

• 2025-11-05 ~ 2025-11-07

• 자료조사 및 와이어프레임 작성 (Figma 활용)

• 2025-11-08 ~ 2025-11-13 (와이어프레임, 반응형 설계, 스타일 다듬기)

• 1. 컴포넌트 코딩

  • 헤더 컴포넌트(타이틀) 코딩
  • 자기소개 컴포넌트 코딩
  • 스킬소개 컴포넌트 코딩
  • 프로젝트소개 컴포넌트 코딩
  • contact 컴포넌트 코딩 및 formspree 폼 제출 서비스 구독

• 2. 스타일 다듬기 (tailwindCss 첫 사용)

  • 폰트, 색상 등의 디자인 설계 및 반응형 설계
  • vercel 배포 및 연동

• 2025-11-14 ~ 2025-11-18

• 1. 사용자 경험(UX) 고도화:

  • Lenis: 부드러운 스크롤(Smooth Scroll) 기능 적용
  • Framer Motion: 스크롤에 반응하는 섹션 등장 애니메이션 적용
  • Lottie: 헤더 타이틀 등 주요 영역에 인터랙티브 Lottie 아이콘 적용
  • Gnb.tsx: 앵커 기능 추가 (skills 버튼을 누르면 skills 페이지로 넘어가는 기능)

• 2. 컴포넌트 추가:

  • components/common/ScrollPinAnimation.tsx: Framer Motion, CSS를 활용하여 Profile 컴포넌트의 성장 배경 설명 강화

• 3. 테스트:

  • React Testing Library / Vitest: Vite에서는 Jest 대신 Vitest를 사용 (JEST랑 문법이 99% 똑같다.)