프론트엔드 포트폴리오:: 김수민

포트폴리오 사이트

2025.01 ~ 2025.01 (1人)

현재 보고 계신 사이트이자 프론트엔드 개발자로서 저를 어필하기 위한 포트폴리오입니다.서버 사이드 렌더링과 각종 기법을 통해 SEO를 최적화하여 구글과 네이버 검색 시 상위에 노출될 수 있었습니다.또한, framer-motion을 활용한 애니메이션을 적용하여 사용자의 흥미를 유도했습니다. 하지만 초기 진입 시 첫 컨텐츠 화면에서 렌더링 지연이 발생하는 문제가 있었습니다. 이를 해결하기 위해 클라이언트 컴포넌트에 코드 스플리팅을 적용하고 framer-motion의 부모인 서버 컴포넌트에서 최소한의 구조를 잡았습니다.그 결과, LCP 측면에서 약 2,000밀리초 개선시켜 초기 로딩 속도를 최적화 할 수 있었습니다.

결과

나를 어필할 수 있는 포트폴리오 완성

주요 기능

자기소개, 기술 스택, 프로젝트 경험 등 개발자 김수민 탐색
scroll을 통한 애니메이션

URL

기술 스택

Next.js
TypeScript
SASS
FramerMotion
Swiper

Investmetic

2024.10 ~ 2024.12 (프론트엔드 5人, 백엔드 6人, 디자이너 1人)

투자 매매 전략 공유 및 중개소셜 플랫폼 Investmetic은 트레이더와 투자자들이 투자 전략의 성과를 공유하고 이를 보며 학습하여 본인의 스킬들을 향상시킬 수 있는 장을 마련합니다. 기업의 RFP를 기반하여 대용량 데이터 시각화와 SEO최적화를 목표로 하였습니다.짧은 기간 동안 많은 UI/UX를 개발하기 위해 다수의 공통 컴포넌트가 디자인되었는데, 이를 담당하며 컴포넌트의 복잡성을 낮추고 재사용성과 유연성을 고려하여 설계하고자 노력했습니다. 이를 통해 팀원들 간의 개발 속도를 높이고 중복 코드를 제거하며 일관성 있는 구조를 가질 수 있었습니다.서버 컴포넌트와 클라이언트 컴포넌트를 구분하여 Suspense를 활용한 스켈레톤 UI를 적용하여 지연시간 동안 페이지의 구조를 미리 보여줌으로써 사용자 경험을 개선하였습니다. 또한 지역 상태와 전역 상태를 구분하여 검색바를 개발하며 액션 함수와 데이터 패치 함수간의 실행 타이밍 이슈를 해결하였습니다.전반적으로 컴포넌트 아키텍쳐 설계, 컴포넌트 디자인 패턴, 점진적 하이드레이션 등에 대해 공부하고, 고민해보며 적용 할 수 있었습니다.

결과

기업연계 프로젝트 최우수상

주요 기능

전략 리스트업과 검색 및 구독
전략 세부 사항의 성과를 모방하고 문의, 리뷰를 통한 소통의 장 마련

URL

기술 스택

Next.js
TypeScript
Tanstack-Query
Zustand
SASS
StoryBook
MSW
HighCharts

FE Pick

2024.10 ~ 2024.10 (1人)

프론트엔드 스택의 기초 개념 퀴즈 플랫폼 FEPick은 프론트엔드 스택에 대해 공부하고 있는 주니어 개발자가 다양한 퀴즈를 통해 스스로의 학습 진도를 체크하면서 실력을 쌓아갈 수 있는 유익한 시간을 제공합니다.전반적인 프로젝트의 파이프라인 경험을 목표로 하였으며 AWS로 배포를 처음 해보면서 HTTP와 HTTPS 간 보안 규칙이 달라 요청이 차단되는 문제를 겪었습니다. 이 문제를 해결하고자 직접 구글링을 해보면서 Route53에서 도메인을 생성하고 NginX를 통해 SSL 인증서를 발급받아 연결하여 해결한 경험이 있습니다.이를 통해 프로토콜 간의 보안 규칙과 브라우저의 보안 인증에 대해 학습할 수 있었고 프로젝트의 기획부터 배포, 운영까지 경험할 수 있었습니다.

결과

혼자서 시도해본 프로젝트의 전반적인 경험

주요 기능

각 스택의 기초 개념 객관식 퀴즈
카테고리 추천 및 피드백을 받기 위한 방명록

URL

기술 스택

React
TypeScript
Tanstack-Query
Zustand
Emotion
Node.js
MongoDB
AWS

PLY

2024.08 ~ 2024.09 (프론트엔드 5人)

영상 링크 기반 플레이리스트 공유 플랫픔 PLY는 자신만의 플레이리스트를 만들고 이를 공유하거나 탐색할 수 있습니다.플레이리스트를 추가하고 수정하는 페이지를 담당하며 역할에 따른 컴포넌트를 설계하고자 했습니다. 이 과정에서 자식 컴포넌트에서 부모 컴포넌트로 props를 전달하는 방법에 어려움을 겪었으나 구글링을 통해 useImperativeHandle 훅을 알게되었고 forwardRef 훅과 함께 사용하여 자식 컴포넌트에서는 사용자로부터 입력받은 데이터를 부모에게 전달해주는 역할만을 수행할 수 있었습니다. 부모 컴포넌트 또한 데이터를 모아 CRUD 작업만을 수행 할 수 있었습니다.이를 통해 새로운 React의 Hook을 학습할 수 있었고 적절하게 사용해보며 역할에 따른 컴포넌트를 설계할 수 있었습니다.

결과

토이프로젝트3 2등

주요 기능

플레이레스트 생성 및 공유, 탐색

URL

기술 스택

React
TypeScript
Tanstack-Query
Zustand
Emotion
Node.js
MongoDB
PlayWright

About me

김수민 웹 개발자(FE)

Archive

Skills

Basic

Frontend

Backend

Deployment

Tools

Project

포트폴리오 사이트

Investmetic

FE Pick

PLY