배움을 나누며 함께 성장하는 것을 좋아합니다. ✈️

스터디를 하며 지식을 나누고 팀원들과 함께 성장하려고 합니다. 블로그를 운영하고, 다양한 주제에 대해 60+개 포스팅을 작성하였습니다.

사용자 경험을 중요하게 생각합니다.

기존에 불편했던 학교 입학 지원 서비스, 학교 공식 홈페이지를 개발한 경험이 있습니다. 총 **2,000+명의 사용자가 접속하였고, 검색엔진에 3,000+번 노출되었습니다.

누구나 배울 수 있는 세상을 만들어 나가고 싶습니다.

스터디와 블로그 활동을 하면서 누군가에게 배움을 나눌 때 성취감을 느꼈습니다. 그래서 누구나 배울 수 있는 ‘교육’이라는 도메인에 관심이 있습니다.

📧 **[email protected]

📞 010-9201-5487

🐼 Github

📗 **Velog** (누적 조회수 37,000+회, 누적 좋아요 920+개)

🏫 광주소프트웨어마이스터고등학교 (졸업)

경력

🏢 클래스팅

프론트엔드 개발자(Org Squad) ⏤ 2024. 1. 29 ~ 재직중

평소 교육이라는 도메인에 관심이 많아 제가 가진 개발 능력으로 교육 서비스를 개발하고자 하는 생각을 가졌습니다.

클래스팅 또한 기술로 교육을 연결하는 가치관을 가지고 있어 2024년 초에 입사하게 되었습니다.

프로젝트

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB3UlEQVQ4y71Uu0pDQRDdJGAj6BeIhZWNCAZsBUEQ9T4SJZW9XyBYWFmJ/oFg6weInZWF2IidjSKWfoCFicmsZ3fO5u69UdFCA4fN7p05e2ZmZ4z5l19mFXmA8AyrwboEtGjzY7ICDZPaummDbAP7VBo4q5uW/IDUfUwJ5xRI3X4bSCR8M/6S+OK8SpxHZKrCGY4BO8A5cAvcIOwTrIuwMWaxEs1ImErY8LnKpImzR+ztCDKPQ2+/wty68DftSN6oTBaArjpjzew70Cd6OB+Q9IBCGmbVpSQQJp6sRtJx4JlKet4xtYJVoZcMItJ5iqj7NJRC1YQfkayrDhLIQqj8Lz3aHRepcgrTWJ1MYX2loUTKbAn+XPq0u/TKQtUr6vbp1B2Sfkaol/X5/0qjlJo+fLdpW+2AzN5FlRwwX/IJmfWF0vW0HHLxgJt0eACeKk5xUcRfkkqPuVzTZwbCTpkwB/ZY8TnmKhRnEBXHhfrGbxdeXcIabDnCDb6fDqvdHrZezudhv3jc18Ak1dWKblnGwTqnR+gSVzElnQXOgJehsszew2YX9oGkXm69TMxIkydRkpV4ApgBphGBXpZHZOl3U6c6cUpThT3rh4cUYjryywHrcyQEI0iYppb922H/AbLJF2CSwgf8AAAAAElFTkSuQmCC

Untitled

Official GSM

광주소프트웨어마이스터고등학교 공식 홈페이지입니다. 임시 운영 기간동안 1,300+명의 사용자가 접속하였습니다.

배포 링크 → ㅤㅤGithub →

5 ~ 현재 임시 운영중

Frontend 5명, Backend 2명, DevOps 1명, Designer 3명

👩🏻‍💻 내가 기여한 부분

학교 소개 페이지 제작

8개 섹션 중 섹션 2, 3, 5, 6 제작. 기여도 50+%
useRef로 스크롤 값을 계산해주는 커스텀 훅 제작
- 스크롤 위치에 따른 섹션 2 애니메이션 제작
- 스크롤 할때마다 섹션 5 학과 설명을 변경하게 제작
- passive option과 throttle을 적용하여 스크롤 성능 60+% 향상
- 애니메이션 학습 블로그 →

관리자 페이지 헤더 제작

emotion css prop으로 가입 요청에 따른 알림 스타일링 구현
react-query를 활용하여 회원 승인/거절, 로그아웃 api 연동
컴포넌트 props에 따른 스토리북 제작

🖥️ 사용 기술

NextJS 13 - App Router: SEO 최적화, metadata 간편 생성, 서버 컴포넌트를 사용하기 위해 App Router를 채택했습니다.
React-Query: server state와 client state 분리하기 위해 사용했습니다.
TypeScript: 컴파일에서 타입 에러를 발견하여 프로젝트 안정성을 높이기 위해 사용했습니다.
Storybook: 컴포넌트 문서화 및 컴포넌트 단위 개발로 개발하여 다음 프로젝트 인원에게 인수인계가 원활히 되도록 하였습니다.
Axios: 자동 JSON 파싱과 인터셉트 기능으로 중복 코드 개선하였습니다.
Emotion: css prop을 통해 조건부 스타일링을 하기 위해 사용했습니다.
MonoRepo: 관리자와 사용자 workspace 코드를 공유하기 위해 사용했습니다.

학교 소개 - Section2

학교 소개 - Section2

학교 소개 - Section3

학교 소개 - Section3

관리자 페이지 - 헤더

관리자 페이지 - 헤더

학교 소개 - Section 5

학교 소개 - Section 5

학교 소개 - Section6

학교 소개 - Section6

컴포넌트 스토리북

컴포넌트 스토리북

트러블 슈팅

🚨 문제 배경

학교 소개 section2 스크롤 애니메이션 구현 중 애니메이션 동작에 대한 문제가 발생했습니다. 스크롤 할 때마다 scrollTop 위치를 수정해서 잦은 렌더링이 발생했기 때문입니다.

⭐️ 해결 방법

잦은 함수 호출 방지, 이벤트 호출 조절 키워드를 검색해서 자료를 찾아보던 중 throttle이라는 개념을 알게 되었습니다. 저와 같은 문제를 다룬 블로그를 참고하여, 스크롤 할 때 0.3초마다 이벤트 함수를 호출해서 잦은 렌더링을 방지했습니다.

추가로 이벤트 리스너 함수에 대해 찾아보던 중 passive option이 이벤트 성능을 향상하는 역할이라는 것을 알게 되었습니다.

🙌 이전 코드와 비교

이전 코드는 스크롤 될 때마다 state 값이 변경되어 잦은 렌더링이 발생합니다. 하지만 throttle을 적용하고 나서는 스크롤 할 때 0.3초마다 함수를 호출하기 때문에 잦은 렌더링을 방지할 수 있었습니다.

throttle 적용 전 - 3초동안 콘솔 메세지 약 60개

throttle 적용 전 - 3초동안 콘솔 메세지 약 60개

throttle 적용 후 - 콘솔 메세지 약 20개

throttle 적용 후 - 콘솔 메세지 약 20개

🤩 해당 경험을 통해 알게된 점

이벤트 리스너 옵션 중 passive option을 알게되었습니다.

throttle과 debounce 개념에 대해 알게 되었고, 어떠한 상황에서 사용해야하는지 알게되었습니다.

Untitled

Hello, GSM

광주소프트웨어마이스터고등학교 입학 지원 서비스입니다. 2023학년도, 2024학년도 신입생 모집 기간동안 4,000+명의 사용자가 접속하였습니다.

배포 링크 →ㅤㅤGithub →ㅤㅤ프로젝트 회고록 →

v1 - 2022. 4 ~ 2022. 10 / v2 - 2023. 8 ~ 2023. 11

Frontend 2명, Backend 2명, DevOps 1명, Designer 1명

👩🏻‍💻 내가 기여한 부분

**성적 입력 페이지 개발**

react-hook-form 라이브러리를 사용하여 성적 값들을 배열로 저장

원서 페이지, 수험표 출력 페이지 개발

getServerSideProps를 사용하여 사용자 정보를 미리 가져옴
커스텀 타입 가드를 제작하여 엄격한 타입 검증

v1 문제점 개선

점검 페이지 배포를 vercel 재배포 → 엑셀 api 요청으로 변경, 빌드 시간을 1+분 단위 → 1+초 단위로 개선
채널톡을 도입하여 20+개 이상의 문의를 관리

애니메이션 개발

react-hook-form의 validate와 pattern속성을 이용하여 올바르지 않은 정보를 입력했을 때, ****keyframes shake animation으로 예외처리
모바일 헤더인 햄버거 메뉴를 개발하여 슬라이드 애니메이션을 구현

실제 2022년 입학 지원 기간(2022. 10 ~ 2022. 11)에 사용

교내 대회 "2022 전공 동아리 연구 활동 발표회"에서 최우수상을 수상하여 2023년에도 서비스 사용 예정