미리보기

프로젝트 소개

Albaform은 구인·구직자가 공고를 손쉽게 등록·지원할 수 있는 긱워커 플랫폼입니다.

구직자와 구인자에게 다른 UI/UX를 제공해야 해 상태 분기 관리가 복잡했고,

SPA 구조의 폼 작성 페이지에서는 이전 설정값 유지가 핵심 과제였습니다.

🗓 작업 기간

2024.11.21 ~ 2024.12.28

👥 팀원

FE 개발자 4명으로 이루어진 프로젝였습니다.

그 중 팀장을 맡았습니다.

🛠기술 스택

Next(App-routing), Typescript, Tailwind, Jotai, react-hook-form, Zod

🧑‍💻 맡은 역할

알바폼 상세 페이지, 사장님 전용 페이지, 지원자 목록 페이지 구현

🔎 Lighthouse 분석을 통한 웹 성능 개선 작업 : 점수가 아닌 의미를 살펴보다

• 문제 : 일부 페이지에서 Lighthouse Best Practices 점수가 78점으로 낮게 측정됨

• 해결 : HTTP 통신으로 인한 보안 경고 확인, 배포 시 SSL 적용으로 HTTPS로 전환

• 결과 : Lighthouse 측정 결과, Best Practices를 포함한 모든 지표가 90점 이상으로 측정됨

• Blog : https://buly.kr/1n3tHzm

🔎 App Router 기반 SSR·Streaming·에러 처리 구조 설계 및 개선

• 문제 : App Router의 구조와 장점을 제대로 이해하지 못한 채 프로젝트를 시작

• 해결 : Hydration 최소화, Suspense 활용, 이미지 최적화 등 App Router의 강점 전반을 점검

• 결과 : 클라이언트 컴포넌트를 최소화하여 JS 번들 축소, Suspense로 FCP 개선, TTI 및 UX 향상

• Blog : https://buly.kr/2UivDHk

프로젝트 소개

Linkbrary는 자주 방문하는 사이트를 카드 형식으로 관리하고 공유할 수 있는 웹 플랫폼입니다.

상호작용 요소가 집중된 페이지 구조로 인해, 상태 분기 관리와 리렌더링 최소화가 핵심 과제였습니다..

🗓 작업 기간

• 2024.11.06 (수) - 2024.11.19 (화)

👥 팀원

FE 개발자 5명이서 진행한 프로젝트입니다.

🛠기술 스택

Next(Page-routing), Tanstack Query, Typescript, Tailwind, Zustand

🧑‍💻 맡은 역할

링크 페이지, 검색 기능 구현

🔎 Tanstack Query로 중복 API 제거 및 UX 지연 1.2s → 0s 개선한 사례

• 문제 : 비동기 요청이 반복적으로 발생하면서, 사용자에게 대체 UI가 자주 노출되는 문제가 발생

• 해결 : Tanstack Query의 useQuery 메서드를 활용해 기존 fetch 요청을 캐싱된 데이터로 대체

• 결과 : 평균 1.2초 소요되던 중복 API 요청이 제거되어 재방문 시 콘텐츠가 즉시 표시되었고, 사용자 체감 속도가 개선됨

• Blog : https://buly.kr/8pgCWhS

🔎 JSX 분리와 상태 추상화로 DX 개선하기(with Frontend Fundamentals)

• 문제 : 페이지 컴포넌트가 상태와 JSX를 함께 관리하면서 로직이 복잡해지고 가독성이 저하된 상황

• 해결 : Frontend-Fundamentals 클린코드 가이드를 바탕으로 리팩터링을 진행

• 결과 : 상태는 Hook이, 페이지는 UI만 담당하도록 구조 개선 → 유지보수성과 가독성 향상, DX 개선

• Blog : https://buly.kr/2qYRAy3

프로젝트 소개

Wikied는 지인 정보를 위키 형태로 작성·공유할 수 있는 플랫폼입니다.

무한 스크롤 구현과 HTML 콘텐츠를 마크다운 스타일로 렌더링하는 것이 주요 과제였습니다.

🗓 작업 기간

2024.10.18 ~ 2024.11.05

👥 팀원

FE 개발자 4명이서 진행했고, 그 중 팀장을 맡았습니다.

🛠기술 스택

Next(Page-routing), Typescript Tailwind, Zustand

🧑‍💻 맡은 역할

위키 목록 페이지, 검색 페이지, 공유하기 기능 구현

🔎 HTTP 상태 코드 기반 UI 분기 처리 위한 커스텀 훅 설계 작업

• 문제 : 서버에서 404, 500 오류 발생 시 사용자에게 안내가 없어 혼란 발생

• 해결 : 에러 코드를 감지해 Next.js의 404.tsx, 500.tsx 등으로 리다이렉션

• 결과 : 사용자에게 오류 상황을 명확히 전달하고, 빠르게 대처할 수 있는 UX 제공

• Blog : https://buly.kr/C09qBRJ

🔎 XSS/CSRF 대응을 위한 안전한 인증 흐름 설계 (with. Next.js API Route)

• 문제 : AccessToken과 RefreshToken을 로컬 스토리지에 저장해, XSS로 인한 노출 위험 발생

• 해결 : 로그인 시 토큰을 HttpOnly 쿠키에 저장하고, 인증 처리는 서버 API Route에서 Proxy 방식으로 수행

• 결과 : 클라이언트에서 토큰 접근을 차단하고 서버 중심 처리로 전환하여 XSS/CSRF 보안 강화

• Blog : https://buly.kr/6ih6ky2

• CS 공부를 하기 위한 목적으로 "면접을 위한 CS 전공지식 노트 책"을 1회독하고 주1회 발표하는 스터디를 운영했습니다.

• 깃허브 :https://github.com/junjeeong/CS_book_study

• Javascript의 기본 개념과 동작원리를 학습하기 위한 목적으로, 주 5회씩 각자가 읽은 부분을 발표하고 토론하는 스터디를 운영했습니다.

• 깃허브 : https://github.com/junjeeong/JS_Deepdive_book_study

• 3번의 프로젝에서 모두 팀장을 맡았습니다.

• 기술 블로그를 꾸준히 운영해 관련한 상을 받은 경험이 있습니다.

• 회고록 : https://velog.io/@wn8624/Sprint-6%EA%B0%9C%EC%9B%94-%EA%B3%BC%EC%A0%95%EC%9D%84-%EB%A7%88%EC%B9%98%EB%A9%B0