미리보기
기본 정보
웹 접근성, 웹 표준에 대한 높은 관심이 있으며 사용자 친화적인 서비스를 만드는 것을 목표로 하고 있습니다. 반복되는 코드를 컴포넌트 기반으로 재구성하여 유지보수성을 높이고, 프로젝트의 효율성을 극대화하며 팀원들과의 협업을 원활하게 만들기 위해 노력합니다. 저는 작은 문제부터 차근차근 해결하는 것이 중요하다고 믿기 때문에, 콘솔 창의 경고와 오류를 해결하는 작업을 특히 선호합니다. 이런 디테일한 문제 해결을 통해 코드의 품질을 높이고, 안정적인 애플리케이션을 유지하는 데 기여할 수 있습니다.
기술 스택
HTML/CSS, JavaScript, TypeScript, scss, tailwind-css, Bootstrap, React, Next.js, Redux, redux-saga, zustand, GitHub, MySQL
교육
방송통신대학교
대학교(학사) | 컴퓨터과학과
2024.09. ~ 현재 | 재학 중
패스트캠퍼스
사설 교육 | 프론트엔드 개발 스쿨 16기
2020.03. ~ 2020.09. | 졸업
부천대학교
대학교(전문학사) | 섬유의류비즈니스
2015.03. ~ 2017.02. | 졸업
경력
주식회사마그마바이트
팀원 | 플랫폼팀
2022.07. ~ 2023.11. (1년 5개월)
Galaxy Commanders Admin
기간 : 2023.03 ~ 2023.10
Description
Galaxy Commanders 게임의 전반적인 데이터 관리를 위한 어드민 페이지입니다.
UI/UX 설계, 프론트엔드 작업을 포함한 전반적인 기능을 혼자서 개발하고 관리하여 프로젝트를 성공적으로 완성했습니다.
Experience
Canvas 드로잉으로 직관적인 함선 패턴을 제공, 게임 작업 효율성 증대
좌표를 미리 계산하여 도형을 생성함으로써 중복 없는 드로잉 가능
React-Table을 이용하여 테이블 컴포넌트 및 페이지네이션 제작
데이터 CRUD 기능 개발 시 코드 리팩토링을 통해 통일성을 높여 유지보수성을 개선하고, 개발 생산성 50%p 이상 향상
Sheet.js를 사용한 액셀 Export, Import 기능 완성
Import 기능이 많아지면서 여러 유형의 엑셀 파싱을 한 번에 처리할 수 있는 컴포넌트 생성
엑셀 파일 업로드 시 프로그래스 바를 적용하여 사용자에게 현재 작업 상태를 시각적으로 제공, UX 개선
Galaxy Commanders web
기간 : 2023.03 ~ 2023.10
Description
Galaxy Commanders 게임의 소개와 정보를 제공하는 페이지입니다.
Experience
TikTok과 Twitter의 픽셀을 적용하여 사용자 행동을 추적하고 분석하여 맞춤 타켓팅을 개선
게임팟 오픈 API를 호출하여 공지사항 페이지 제작
게임 내에서 사용할 Web View 페이지를 제작하여 사용자 경험을 향상
GameTribes
기간 : 2022.07 ~ 2023.01
Description
블록체인을 이용한 NFT 커뮤니티입니다.
지갑을 연결하여 본인의 자산을 확인할 수 있고, 다른 사용자의 자산도 확인할 수 있습니다. 자산을 비교하여 순위를 선정합니다.
핵심 기능은 등록된 지갑의 암호화폐 및 NFT를 활용한 자산 랭킹 및 정보 제공 서비스입니다.
Experience
로그인 개발 시 RefreshToken과 AccessToken을 사용하여 보안성 강화(JWT)
DApp 개발
지갑을 연결하여 자산을 확인할 수 있는 기능
Metamask, Coinbase, Kaikas, Phantom 지원
Metamask, Coinbase provider 충돌 이슈 Web3.js 사용하여 해결 경험
기존 Scroll Event를 이용한 무한 스크롤 방식에서 Intersection Observer을 제안하고 변경하여 이벤트 발생의 횟수를 줄이고 성능 최적화
커스텀 훅을 사용해 페이지 스크롤 위치 저장 및 복원 기능 개발. 페이지 이동 시 스크롤 위치를 유지하여 UX 개선
GA 적용 후 사용자 유입 추적이 제대로 안되는 문제 발생
Navigate로 Router를 변경하는 방식에서 Link 태그를 사용하여 GA가 페이지 전환을 감지할 수 있도록 수정
프로젝트
Travel-Tales
사이드 팀 프로젝트
2024.06. ~ 진행 중
인원
프론트엔드 1 / 백엔드 1
Description
여행 가는 사람들과 함께 계획을 작성하고 공유하고 싶어서 제작하였습니다.
여행계획을 작성할 수 있으며 여행을 다녀온 후 함께 여행 후기도 작성할 수 있습니다.
작성된 계획과 후기를 게시하여 다른 사용자도 함께 감상할 수 있으며 이를 통해 여행을 추천받고 새로운 여행 계획을 세우는 데 도움을 받을 수 있습니다.
Experience
서버 사이드 렌더링(SSR) 기능을 구현하여 SEO와 사용자 경험을 향상
OAuth 로그인 적용 (Google, Kakao)
Socket.IO를 사용해 사용자 간의 실시간 데이터 통신 및 업데이트 기능 구현
Fetch API의 HTTP 요청 처리 과정에서, Axios의 Interceptor 기능을 참고하여 커스텀 Interceptor를 구현
RefreshToken 만료 시 재발급 로직 구현
ReactMarkdown으로 마크다운 에디터 생성, 여행 계획과 후기 작성 가능
마크다운 에디터 내 텍스트를 파싱하여 이미지 리스트를 관리하고 서버와의 동기화를 수행
Cine-Square
사이드 팀 프로젝트
2024.03. ~ 2024.06.
인원
프론트엔드 1 / 백엔드 2
Description
영화에 대한 기본적인 정보와 박스오피스 순위, 씨네스퀘어 자체 순위 등을 제공합니다.
사용자는 영화를 별점으로 평가하고 보고 싶은 영화를 저장할 수 있습니다.
Experience
J
a
v
a
Script에서 TypeScript로 마이그레이션
영화 별점 CRUD
보고싶은 영화 저장 기능
코멘드 CRUD
다른 사용자의 코멘트에 좋아요 및 댓글 작성 기능
영화 제목으로 검색 기능
S3 버킷을 이용한 웹 호스팅
GitHub Actions를 활용한 CI/CD 파이프라인으로 배포 자동화 구현
JWT방식으로 로그인 제작, AccessToken 과 RefreshToken으로 클라이언트 측에서 사용자의 세션 유지
VFive Games 웹페이지
VFive Games (외주)
2024.04. ~ 2024.04.
인원
프론트엔드 1
Description
VFive Games의 자사 홈페이지를 제작했습니다.
Experience
React를 사용하여 반응형 웹사이트 개발
Swiper 라이브러리를 이용한 슬라이더 기반 원페이지 제작
Iframe을 이용하여 Google Maps 적용
Cafe24 활용하여 호스팅
