프론트엔드 개발자

신준혁

지식을 기록하고 공유하며 성장하는 프론트엔드 개발자, 신준혁입니다
기록을 통해 얻은 지식을 공유하고, 사용자를 최우선으로 생각하는 서비스 개발에 몰두하고 있습니다. 
협업의 중요성을 인식하고, 적극적인 소통을 통해 팀 워크를 강화하고, 공동의 목표 달성과 함께 성장하는 것을 중요하게 여깁니다. 
이 같은 경험과 철학을 바탕으로 더 나은 서비스를 창출하여 사회 발전에 이바지하고자 합니다.

성실함

협업 지향

커뮤니케이션

열정적

긍정적

<ol><li>VanillaJS, HTML, CSS,&nbsp; React, Vue 등을 학습하고 2번의 팀 프로젝트를 경험</li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://www.youtube.com/watch?v=CiNrMZYtQDI">"렌더링 최적화와 렌더링 관계 트리</a>"라는 주제로 발표 경험</li><li>함께하는 성장을 위해 학습한 내용을 기술한 기술 아티클 및 회고 글을 14명의 팀 동료에게 공유\<ol><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://ydoag2003.tistory.com/287">노션클로닝 회고</a></li><li><a target="_blank" rel="noopener noreferrer nofollow" href="https://ydoag2003.tistory.com/453">useEffect 의존성 배열 경고를 무시하시나요?</a></li></ol></li><li>NextJS app router를 <a target="_blank" rel="noopener noreferrer nofollow" href="https://ydoag2003.tistory.com/460">팀 프로젝트에서 사용하며 발견한 버그</a>를 Next에<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/vercel/next.js/issues/63605"> Issue</a> 제기</li></ol>

프로그래머스 데브코스 프론트엔드 5기

정보처리기사

정보처리기능사

리눅스마스터

컴퓨터활용능력

무선설비기능사

신준혁_이력서&포토폴리오.pdf

포토폴리오

노션 포토폴리오

기술블로그

깃허브

기존 중고거래 시스템에서 경매 기능을 추가한 중고 경매 거래 사이트입니다.경매를 통해 중고 거래에 재미를 느끼고,판매자와 사용자 간의 네고가 없는, 서로 만족하는 가격에 거래 할 수 있도록 도와주는 것을 목적으로 하는 프로젝트입니다.🔗<a target="_blank" rel="noopener noreferrer nofollow" href="https://%20%20https//github.com/Programmers-HandsUp/FE-HandsUp">Github</a>🔗<a target="_blank" rel="noopener noreferrer nofollow" href="https://fe-hands-up-sbm9.vercel.app/">배포링크 </a>(현재 서비스 중단)담당<ul><li>다크모드, Toast, Navigation, Modal, Carousel 등의 컴포넌트 구현</li><li>TanstackQuery 활용 채팅 기능 구현</li><li>NextJs App router 활용</li></ul>포인트<ul><li>프로젝트가 사이드 프로젝트로 진행되면서 백엔드 개발자와의 작업 시간 차이로 API 작업 완료 전 컴포넌트를 개발하게 되어 테스트 시 API 연동이 필요했습니다.<ul><li>이를 해결하기 위해 MSW 기반의 Mock API를 구현하여 개발시간을 단축했습니다</li></ul></li><li>다크모드 기능 개발 중 SSR과 CSR의 다크모드 상태가 일치하지 않는 Hydration 문제를 해결하기 위해 &lt;script&gt;태그를 이용한 방식과 쿠키를 이용한 방식으로 다크모드 상태를 일치시켰습니다</li></ul>

중고 경매 거래사이트, Hands Up

리액트로 앱을 개발하면서 주로 사용하는 UI 들을 다양한 접근 방법으로 개발하면서 장단점을 찾기 위해 기획한 프로젝트입니다.🔗<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/oridori2705/react-ui">Github</a>🔗<a target="_blank" rel="noopener noreferrer nofollow" href="https://react-ui-vert-one.vercel.app/">배포링크</a>담당<ul><li>Accordion, Tooltip, Tab Menu, TextArea, LineClapm, LazyImage, InfinityScroll 등을 구현</li></ul>포인트<ul><li>각 기능마다 존재하는 다양한 접근 방법을 탐색하고, 실제로 적용해보며 최적의 방법을 경험하며 학습했습니다.</li><li>해당 기능들을 모듈화하여 사용할 수 있도록 재사용성을 높여 개발했습니다.</li><li>렌더링을 유발하는 상태 관리 대신 내장 기능을 활용하는 방법을 채택하여 최적화했습니다.</li></ul>

리액트 UI 컴포넌트

카드로 보는 약초와 잡초, 오픈 API 공공 데이터에서 약초와 잡초 정보를 이용해 온라인 도감을 만들어보았습니다.🔗<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/oridori2705/Herbs-Or-weeds">Github</a>🔗<a target="_blank" rel="noopener noreferrer nofollow" href="https://herbs-or-weeds.vercel.app/">배포링크</a>담당<ul><li>공공 API 요청</li><li>약초 카드 애니메이션 구현</li><li>검색어 추천 기능과 검색 기능</li></ul>포인트<ul><li>Modal을 사용하려면 useState와 Modal 컴포넌트를 따로 만들어 사용하는 것에 불편함을 느꼈고, useModal 커스텀 훅을 통해 더 간편하게 Modal을 사용할 수 있도록 했습니다.</li><li>useModal() 호출 하나만으로 Modal을 쉽게 만들 수 있게 됩니다</li></ul>

공공 API 활용 프로젝트, 약초꾼의 길

다양해진 OTT 플랫폼, OTT 플랫폼과 컨텐츠에 대해 얘기를 나눌 수 있는 서비스🔗<a target="_blank" rel="noopener noreferrer nofollow" href="https://github.com/prgrms-fe-devcourse/FEDC5_Owhat_Byunghyun">Github</a>🔗<a target="_blank" rel="noopener noreferrer nofollow" href="https://owhat.vercel.app/">배포링크</a>담당<ul><li>공통 컴포넌트 개발 (Image, Avatar, Button, Carousel, Divider, Badge)</li><li>회원가입 페이지 개발</li><li>로그인 페이지 개발</li><li>게시글 상세 페이지 개발</li><li>다크모드 구현</li></ul>포인트<ul><li>회원가입과 로그인에서 사용되는 input과 Validation이 중복되는 것을 느꼈고, 재사용성과 유지보수성 높은 useForn 커스텀 훅과 Formfield 컴포넌트를 만들었습니다</li><li>form 필드 간 의존성을 관리하여, 예를 들어 '비밀번호' 필드가 변경될 때 '비밀번호 확인 필드도 함께 검증하도록 구현했습니다. dependencies를 통해 연관된 필드들이 타이핑 시 동시에 검증됩니다</li><li>이를 통해 타이핑 할 때 동시에 검증해야 하는 경우를 해결 가능합니다</li><li>결과적으로 453개의 중복되는 코드를 제거했습니다.</li></ul>