미리보기

• 배포: https://easiest-cv.vercel.app

• GitHub: https://github.com/SihyeonHong/EasiestCV

프로젝트 소개

가장 심플한 연구자 학술 개인 홈페이지 제작 툴.

철학과 박사과정생 지인의 요청으로 시작된 프로젝트로, 연구 업적과 이력을 간단히 정리하고자 하는 인문학 및 사회과학 분야의 교수 및 연구자를 대상으로 합니다.

컴퓨터로 이메일 보낼 줄 아는 수준이면 충분한, 디자인 고민 없이 오직 내용만 입력해서 CV 웹사이트를 만들 수 있는 서비스.

기술 스택

Next.js, Typescript, PostgreSQL, TailwindCSS, TanStack Query

풀스택 개발 및 배포까지 1인 개발.

주요 기능

• JWT를 이용한 회원관리: 회원가입, 로그인, 회원정보 수정, 비밀번호 초기화.

• 게시글 작성, 수정, 삭제.

  • React Quill 기반 텍스트 에디터

  • 드래그 앤 드롭으로 탭 순서변경

• 이미지, pdf 파일 업로드.

• 한/영 언어 설정(next-intl), 다크 모드 지원.

성과

• 성능 개선

  • 서버 컴포넌트 범위를 점진적으로 확대하며 초기 로딩 속도를 개선했습니다.

  • TanStack Query를 도입하여 상태 관리와 데이터 페칭을 최적화했습니다.

• UI/UX 개선

  • 드래그 앤 드롭 순서변경 기능을 useRef를 사용하여 라이브러리 없이 직접 구현했습니다.

  • 관리자 페이지와 완성된 CV 페이지 간의 UI 일관성을 원칙으로 직관적인 사용성을 확보했습니다.

  • 초기에는 React Bootstrap과 Styled Components를 사용했으나, 이후 Tailwind CSS로 전환하여 스타일 관리의 일관성을 높이고 유지보수를 용이하게 했습니다.

• 코드 개선

  • 초기에 전역 상태관리를 위해 Redux를 사용했으나 커스텀 훅으로 리팩터링 후 불필요성을 확인하고 삭제하여 코드 구조를 간소화하고 성능을 개선했습니다.

  • Next.js 13 앱 라우터를 사용하며 폴더 구조 정리에 어려움을 겪다, 부트캠프에서 컴포넌트 중심 구조를 경험하고 리팩터링 과정에서 코드를 모듈화하며 가독성과 유지보수성을 개선했습니다.

  • 기존 페이지 라우터 기반의 API 구조를 앱 라우터 방식으로 재구성하여 데이터 흐름을 효율적으로 관리할 수 있도록 리팩터링했습니다.

• 배포: https://timecodi.netlify.app/

• GitHub: https://github.com/hail2222/Timecodi

프로젝트 소개

그룹 멤버들의 ‘비는 시간’을 자동으로 추출해서 약속을 잡는 웹 서비스.

대학에서 캡스톤디자인프로젝트 과목 수강 중 팀프로젝트로 한 학기 동안 제작.

기술 스택

React, Javascript, Python, FastAPI, MariaDB , Styled Components

역할

프론트엔드 3명, 백엔드 2명 중 프론트엔드 담당. 백엔드 병행.

• Frontend

  • 전체 API 연결 담당.

    My Group 페이지 담당.

  • 그룹 페이지에서 멤버들의 주간 일정 합산해 시간표에 표시하는 기능 구현.

• Backend

  • 그룹 멤버들의 일정 데이터에서 ‘비는 시간(available time)’ 추출하는 기능 구현.

  • 그룹의 정보와 주간 일정을 데이터베이스에서 조회해 클라이언트로 전달하는 API 구현.

성과

• styled-components를 이용하여 CSS-in-JS 방식으로 컴포넌트별 독립적인 스타일을 적용하고 유지보수성을 높였습니다.

• 사전 지식이 부족한 상황에서 학습과 개발을 병행하며, 필요한 기술을 빠르게 습득하고 실무에 적용하는 능력을 길렀습니다.

• 팀원들과 적절하게 소통하며 협업을 통해 문제를 해결할 수 있습니다.

• A+ 학점을 받았습니다.

• 배포: https://rest-mate.vercel.app/

• GitHub: https://github.com/fesi-05-01/frontend

프로젝트 소개

모임 개설, 참여, 리뷰 작성 서비스.

백엔드 API와 피그마 디자인 시안을 제공받아 프론트엔드 부트캠프에서 팀 프로젝트로 제작.

기술 스택

Next.js, Typescript, TailwindCSS, TanStack Query , Jest, React Testing Library

역할 및 성과

• 모임 찾기 페이지(메인 페이지) 담당: 무한 스크롤, 필터링, 반응형 디자인.

• Jest와 React Testing Library 를 활용한 컴포넌트 단위 테스트 코드 작성

• GitHub Issue 및 Pull Request 기반으로 협업.