미리보기
기본 정보
안녕하십니까, 저는 사용자의 혁신을 주도할 프론트엔드 개발자 이승제입니다. 저는 프로덕트로 많은 사람들의 삶에 긍정적인 영향을 미치고 싶다는 야망이 있습니다. 학교 입학지원 서비스 및 학교 홈페이지의 기존 문제를 개선하여, 현재까지 도합 7,000+명의 사용자가 유입되었습니다. 꾸준히 유저 피드백을 받아 서비스를 확장 및 개선시키고 있습니다. 저는 기술적인 진보와 꾸준하고 폭발적인 성장을 원합니다. 11+개월 동안 매주 스터디를 통해 팀원들과 프론트엔드 기술에 관련하여 토의했습니다. 매일 꾸준히 코딩 테스트 문제에 도전하여, 현재까지 360+개의 문제를 해결했습니다. 관련 링크 입학지원 시스템 - https://www.hellogsm.kr/ 홈페이지 - https://official.hellogsm.kr/ 사용자 피드백 - https://righteous-cook-28b.notion.site/3fee99128c50478ea933d7d6248ddbfe
기술 스택
React, TypeScript, next.js13, Next.js, JavaScript, storybook, react-query, Express, zustand
프로젝트
Hello, GSM - 프론트엔드 개발
더모먼트 - 교내 프로젝트 팀
2022.04. ~ 진행 중
Hello, GSM은 광주소프트웨어마이스터고등학교 입학 지원 시스템입니다.
Hello, GSM은 빠른 합격 결과 확인과 편리한 입학 프로세스를 제공합니다.
2024 신입생 모집 기간 동안 700+명, 총 4000+명의 사용자가 접속하였습니다.
3년째 학교와 계약하여 신입생을 받으며 유지보수 되고 있는 서비스입니다.
- API 관련 모듈 업데이트 및 개선
서버가 마이그레이션되며 바뀐 API 스펙에 따라 모듈화된 API 관련 코드들을 업데이트 하였습니다. - 학교 소개 페이지 취업률 그래프 제작
매년 추가되는 그래프의 특성상, 확장성을 고려하여 개발하였습니다. 해당 코드 PR 바로가기 - 팀 소개 페이지 로직 개선
프로젝트 소개 애니메이션에서 throttle을 활용하여 일정 주기마다 스크롤 이벤트를 감지하도록 구현했습니다. 기존 팀원 소개는 각 팀원 하나하나 하드코딩 되어있었습니다. 이를 쉽게 팀원을 가감할 수 있도록 유연하고, 확장 가능한 설계로 리팩토링 하였습니다. 해당 코드 PR 바로가기 - 지원자 목록 검색 기능 구현
프로토타입에서 클라이언트 측에서 검색 기능 구현 이후 서버 측 API로 마이그레이션 하였습니다. 해당 코드 PR 바로가기 - 사용자 피드백과 QA를 통해 기존에 있었던 문제를 찾아내고 이를 개선, 해결
Official GSM - 프론트엔드 개발
더모먼트 - 교내 프로젝트 팀
2023.05. ~ 진행 중
Official GSM은 광주소프트웨어마이스터고등학교의 공식 홈페이지입니다.
기존 학교 공식 홈페이지는 낮은 검색 엔진 노출률과 혼잡한 페이지, 느린 응답 속도 등 여러 가지 문제가 있었습니다. Official GSM은 사용자 맞춤화된 UI와 향상된 성능, 접근성을 제공합니다.
베타 기간 동안 3000+명의 사용자가 접속하였습니다. 현재 교육청과 협의하여 교육청 서버, 도메인으로 이전 중에 있습니다.
Official GSM은 기존 학교 홈페이지보다 First Contentful Paint가 약 10배 빠릅니다.
- 학교 소식 페이지, 팝업존&팝업 카드 개발
게시글 상세 보기, 행사 갤러리 카드, 저작권 규정 페이지를 비롯한 여러 UI 및 기능 개발 storybook을 사용하여 컴포넌트의 재사용성을 상세 보기 페이지를 구현했습니다. - 렌더링 성능 최적화
nextjs의 Image 컴포넌트를 활용하여 이미지 포맷 변환 및 lazy loading을 통해 서비스의 성능을 향상시켰습니다. 번들 사이즈 최적화를 위해 enum 대신 as const를 사용하여 타입 안정성을 유지하면서 번들 사이즈를 줄였습니다. translate를 활용한 애니메이션 구현으로 reflow를 최소화 했습니다. react query의 캐싱으로 불필요한 요청을 줄여 렌더링 또한 줄였습니다. - 게시물 삭제 기능 개발
삭제 로직을 react-custom-hook으로 래핑 하여 코드를 분리, 모듈화하여 재사용성을 높였습니다.
EveryGSM - 프론트엔드 개발
더모먼트 - 프로젝트 팀
2023.03. ~ 진행 중
EveryGSM은 광주소프트웨어마이스터고등학교 프로젝트 링킹 서비스입니다.
운영하는 서비스들을 링킹하는 Hub의 역할을 합니다.
교내 서비스를 한눈에 파악할 수 있어 학교 홍보 목적으로도 활용됩니다.
- 프로젝트 구조 세팅
초기 NextJS AppRouter + YarnPnP로 세팅하였으나 AppRouter를 활성화하고 YarnPnP를 사용할 경우 빌드가 실패되는 문제가 있었습니다. 때문에 AppRouter와 사용이 가능하면서 속도 측면이나 디스크 용량 측면에서 유리한 pnpm으로 마이그레이션 하였습니다. - 메인 페이지 개발
전체 UI의 레이아웃을 제작하고 emotion의 theme를 사용하여 유연하게 전환이 가능한 다크 모드를 구현했습니다.
추후 유지 보수에서 전체적인 코드와 반응형 동작 품질 개선 기존에는 window width에 따라 동적으로 변하는 카드 슬라이더의 복잡한 코드를 간소화하여, 각 width에 맞는 모양의 컴포넌트를 분리하고 렌더링함으로써 코드의 가독성과 추상화 정도를 향상시켰습니다. 슬라이더 코드 개선 PR 바로가기 | 슬라이드 컨트롤러 개선 PR 바로가기 | 개선 경험을 담은 블로그 바로가기 - storybook 도입
기존 코드는 컴포넌트의 독립성이 떨어져서 storybook을 도입하고 컴포넌트가 단일 책임을 갖도록 리팩토링하였습니다.
GSM Networking - 프론트엔드 개발
더모먼트 - 프로젝트 팀
2023.10. ~ 진행 중
GSM Networking은 광주소프트웨어마이스터고등학교의 사이버 동문입니다.
광주소프트웨어마이스터고등학교는 8기까지 진행중인 학교입니다.
하지만 아직 동문회가 존재하지 않아 교장선생님과, 취업진로부의 사업으로 사이버 동문 커뮤니티를 개발했습니다.
1200+명의 사용자가 접속하였으며, 서비스 내에 등록된 120+명의 멘토가 존재합니다.
서비스 내의 익명 커뮤니티 기능을 통해 꾸준히 사용자 피드백을 받아 개선하고 있습니다.
릴리즈 내역 바로가기
- 익명 서비스 게시글 업로드 기능 개발
입력된 텍스트 길이에 따라 동적으로 크기가 변경되는 TextArea를 만들었습니다. 해당 코드 PR 바로가기 - 내 정보 수정 기능 개발
멘토들의 커리어 수정 기능을 요청하는 피드백을 받고, 내 정보 수정 기능을 개발했습니다. 내 정보 수정 기능 PR 바로가기 | 멘토 정보 수정 API 연동 PR 바로가기 - 마이 페이지를 비롯한 여러 UI 제작 유저 role에 따라 다른 UI를 보여줄 수 있도록 제작했습니다.
