발표사진.jpg

🔗 GitHub

🔗 Blog

Email : [email protected]

안녕하세요.

프론트엔드 개발자 신준혁입니다.

기록하고, 성장합니다.

어떤 지식을 얻을 때마다 내 것으로 만들기 위해 블로그를 작성하고 있습니다.

꾸준하게 블로그를 작성해 450여개 글을 작성했습니다.

사용자를 생각합니다.

사용자에게 좋은 서비스를 제공하기 위해 항상 생각하고, 주어진 문제는 책임감을 가지고 반드시 해결합니다.

서비스를 개선해가는 과정을 기록하면서 더 나은 방법으로 개선할 수는 없는지 항상 생각합니다.

협업의 가치를 알고, 적극적으로 소통합니다.

협업은 서로 다른 개인들이 고유한 능력과 시각을 모아, 단순히 함께 일하는 것을 넘어서 함께 성장하고, 함께 목표를 달성하는 과정이라고 생각합니다.

팀의 시너지를 높이기 위해 항상 적극적으로 소통하고, 공유하는 분위기를 만들어갑니다.

✨Projects

OTT 플랫폼 커뮤니티, OWhat!

Untitled

🍀프로젝트 개요

많아진 OTT 플랫폼! 요새는 뭐가 재밌어?

OTT에 대해 얘기를 나눌 수 있는 서비스

🙌개발기간 및 인원

2023.12.22 ~ 24.01.17(약 1달)
FE: 5

🛠️Git Hub URL

🔗 OWhat 깃허브

💻Service URL

🔗 OWhat! OTT 플랫폼 커뮤니티

📘사용 기술

React, TypeScript, Storybook, Tanstack Query, Tailwind CSS

👨‍💻담당

공통 컴포넌트 개발 (Image, Avatar, Button, Carousel, Divider, Badge)
회원가입 페이지 개발
로그인 페이지 개발
게시글 상세 페이지 개발
다크모드 구현

🔗관련 링크

✨Point

회원가입과 로그인에서 사용되는 input과 Validation이 중복되는 것을 느꼈고, 재사용성과 유지보수성 높은 useForn 커스텀 훅과 Formfield 컴포넌트를 만들었습니다
- form 필드 간 의존성을 관리하여, 예를 들어 '비밀번호' 필드가 변경될 때 '비밀번호 확인 필드도 함께 검증하도록 구현했습니다. dependencies를 통해 연관된 필드들이 타이핑 시 동시에 검증됩니다
- 이를 통해 타이핑 할 때 동시에 검증해야 하는 경우를 해결 가능합니다
- 결과적으로 453개의 중복되는 코드를 제거했습니다.
TailwindCSS의 가독성 저하 문제를 해결하기 위해 tailwind-merge, clsx, class-variance-authority를 사용하여 클래스 조합과 최적화를 통해 재사용 가능한 스타일을 정의하고 코드 중복을 줄였습니다
Storybook 라이브러리를 통해 독립적으로 UI 컴포넌트를 개발하고, 시각적 테스트, 재사용성, 디자인 시스템 구축을 통해 개발자 경험을 향상시켰습니다.
- GitHub Actions를 통해 CI/CD를 구축했습니다

💭성장 경험

공통 컴포넌트 개발을 통한 깨달음

공통 컴포넌트 개발 과정에서 서비스 내에서 중복되는 컴포넌트를 파악하고, 재사용성을 높이기 위한 방안을 모색하는 과정에서 컴포넌트 단위 개발에 대한 이해와 역량을 키웠습니다.

개발한 공통 컴포넌트를 팀원들이 사용할 때 해당 컴포넌트에 대한 깊은 이해 없이도 쉽게 사용할 수 있도록 하는 것의 중요성을 깨달았습니다. 이를 위해 컴포넌트의 추상화 과정이 매우 중요함을 알게 되었습니다.

또한, Storybook을 활용함으로써 팀원들이 컴포넌트에 대한 피드백을 보다 쉽게 제공할 수 있었으며, 이는 개발 과정에서의 소통과 협력을 크게 향상시켰습니다.

약초꾼의 길

Untitled

🍀프로젝트 개요

약초와 잡초 구분할 수 있니? 도감으로 보는 약초와 잡초! 오픈 API 공공 데이터에서 약초와 잡초 정보를 이용해 도감을 만들어보았습니다.

🙌개발기간 및 인원

2023.01.19 ~ 진행 중
개인 프로젝트

🛠️Git Hub URL

🔗 HerbOrWeed 깃허브

💻Service URL

🔗 herbs-or-weeds.vercel.app

📘사용 기술

React, TypeScript, Storybook, Tanstack-Query, Emotion

👨‍💻담당

공공 API 요청
약초 카드 애니메이션 구현
검색어 추천 기능과 검색 기능
상세 페이지 구현
개발 중…🛠️

🔗관련 링크

🔗 깃허브 PR
🔗 Modal 기능을 만들면서

✨Point

Modal을 사용하려면 useState와 Modal 컴포넌트를 따로 만들어 사용하는 것에 불편함을 느꼈고**, useModal 커스텀 훅**을 통해 더 간편하게 Modal을 사용할 수 있도록 했습니다.
- useModal() 호출 하나만으로 Modal을 쉽게 만들 수 있게 됩니다
개발 단계에서 공공 API 사용 시 CORS 에러가 발생하여 클라이언트에서 해결해야 했고, Vercel의 Serverless 함수를 사용해 CORS 에러 없이 진행할 수 있게 되었습니다
앱 내 요소의 애니메이션과 rotate 효과로 인한 프레임 드랍 문제를 requestAnimationFrame을 활용해 해 결하여 프레임 시작 시 실행이 보장되었습니다.

💭성장 경험

스스로 개발하면서 문제점을 해결하는 방법을 배움

개인 프로젝트를 수행하며, 문제 발생 시 그 상황을 문서화하고, 스스로 해결책을 찾아 해결하는 방법을 배웠습니다.

특히, 프로젝트를 잠시 중단했다가 다시 시작할 때, 진행 상황을 잊지 않기 위해 Issue와 PR을 명확하게 정리하여, 프로젝트를 신속하게 재개할 수 있도록 했습니다.

애니메이션에 대한 고민

애니메이션을 적용하는 과정에서 성능을 개선하는 방법에 대해 고민하게 되었고, 이와 관련된 지식을 습득하고 정리하는 데 시간을 할애했습니다. 이 과정에서 브라우저 렌더링 과정과 Reflow와 Repaint의 차이점을 이해하게 되었습니다. 관련 내용은 GitHub에서 확인할 수 있습니다- 🔗 깃허브 PR