미리보기
기본 정보
# 중견기업 다우데이타에서 새롭게 시작하는 웹 서비스인 캐드친구를 개발한 초창기 멤버입니다. 기존 개발 환경이 부재한 가운데, 인프라 구축과 협업 문화 조성을 주도할 기회를 잡아 기획, 디자인, 개발, CI/CD 등 프로젝트 라이프사이클의 모든 측면에 적극적으로 기여하여 캐드친구라는 웹 서비스를 성공적으로 출시하였습니다. # 단순 반복적인 작업을 개선하여 업무 효율을 높이는 일을 즐겨합니다. 기획/디자인/개발/배포/운영 등 다양한 업무를 맡고 있다 보니 시간을 효율적으로 사용하기 위해 코드 작성 시 재사용성을 고려하고 jenkins와 github webhook을 사용해서 자동화 배포 환경을 구축하면서 개발자는 문제 해결을 하는 데 필요한 모든 도구를 도입해서 해결하는 것일 뿐, 한계란 없다는 생각으로 개발하고 있습니다. # 소통과 토론을 좋아합니다. 비개발자들과의 원활한 소통을 위해 전문 용어의 사용을 최소화하고 이해하기 쉬운 예시를 활용하여 소통하고 있으며, 의견을 제시하기 전에는 뒷받침할 근거와 반대 의견에 대한 정보 또한 조사하여 문서에 기록하고 근거에 기반한 소통을 하고 있습니다.
기술 스택
React, next.js13, HTML/CSS, JavaScript, TypeScript, scss, nginx, Docker, Azure, Jenkins, ubuntu
경력
다우데이타
사원 | Professional Services팀 | 재직 중
2023.05. ~ 재직 중 (1년 6개월)
[소개]
저는 캐드친구 웹 서비스의 신규 개발 및 유지보수를 담당하고 있으며 도커라이징, 클라우드 서비스 배포, Jenkins를 활용한 자동화 배포, 웹 디자인까지 다양한 기술 영역에서 역량을 쌓고 있습니다. 이를 통해 전체적인 웹 개발 생태계를 이해하고, 다양한 직군과 깊은 의사소통을 하며 팀 내 업무 효율성을 높이는 데 기여하고 있습니다.
[기여 부분]
- Next.js 13과 TypeScript를 사용한 프론트엔드 개발
- Azure ubuntu VM, Nginx, Docker를 사용한 리버스 프록시, 로드 밸런싱 등 인프라 구축
- Blue/Green 무중단 배포 구축을 통해 운영 서버 안정화
- github webhook과 Jenkins를 사용한 자동화 배포 구축
- Figma를 사용한 웹 기획 및 웹 디자인 생성
- Google Search Console과 Light House를 사용한 성능 및 SEO 분석 및 개선
- Google Analytics 4를 통한 트래픽 및 사용자 행동 분석
- Notion을 통한 기술 문서 공유/배포 history 관리, Slack을 통한 사용자 행동 알림/배포 알림, Figma를 사용하여 협업 환경 구축
- 코드 컨벤션을 확립하여 협업 및 개발 생산성 향상
프로젝트
다우 Autodesk Platform Service
다우데이타
2024.08. ~ 진행 중
[소개]
협업 및 설계 검토를 위해 Autodesk Platform Service의 API 를 이용하여 설계 도면 등을 실제 프로그램을 구동시키지 않고도 여러 기기의 디바이스에서 쉽게 검색하고 다운로드하며 공유할 수 있고 B2B로 제공되는 웹사이트입니다.
[기술 스택]
react,
scss/sass,
IIS 배포
[맡은 역할]
전체적인 프론트엔드 개발
APS의 API를 사용하여 2D/3D 뷰어 연동
Figma를 사용한 웹 디자인
캐드친구 사용자 웹 페이지
다우데이타
2023.05. ~ 진행 중
[소개]
AutoCAD, Inventor, Revit등 Autodesk사 솔루션을 더 쉽게 사용할 수 있도록 하는 Add-in 프로그램인 캐드친구를 소개하고 다운로드 받을 수 있는 웹이며 사용자의 문의와 라이선스 신청, 컨텐츠 조회 및 다운로드 등을 할 수 있습니다.
[기술 스택]
프론트엔드 : Next.js 13(app router), typescript,
scss/sass,
axios, tanstack-query, recoil
인프라 : Azure ubuntu, nginx, docker, ACR, Jenkins, github webhook
디자인 : Figma
[트러블 슈팅]
Axios Interceptors를 활용하여 AccessToken이 만료될 때 RefreshToken을 이용하여 새로운 AccessToken을 받을 수 있도록 토큰 인증 방식 구현을 하였고, XSS를 방지하기위해 RefreshToken은 httpOnly cookie로 저장을 하고, 유효성 검사와 sanitize를 사용하여 XSS 보완 (상세내용)
SSR이 되지 않는 Editor 라이브러리를 lazy Loading과 forwardRef를 활용하여 CSR로 해결
Blob객체를 활용하여 파일 다운로드 기능 구현
SCSS의 중첩과 mixin, Module CSS 방식을 활용하며 컴포넌트별 스타일 격리하여 className 충돌 문제 해결 및 유지보수성 향상
이벤트 버블링을 활용하여 모바일 버전의 Header 컴포넌트 상태값 처리
[검색엔진 최적화]
sitemap.xml, robots.txt, Semantic Tag, 구조화된 데이터 적용
generateMetadata를 활용한 동적 메타 데이터 생성으로 SEO 향상 및 공유성 개선
(상세내용)
[성능 최적화]
자동 코드 스플리팅, 폰트 최적화, 이미지 사이즈 최적화를 위한 Next/Image 사용, Link 태그를 사용한 prefetch로 페이지 로드 시간 단축, nested layout을 통해 변경된 부분만 렌더링하여 성능 향상 등 Next.js 13의 기능을 적극 활용
api routes와 주문형 재검증(ISR)을 사용하여 서버 부담 최소화
효과적인 form 관리와 유효성 검사를 위해 React Hook Form과 yup 도입
서버 데이터의 캐싱, 동기화 및 업데이트를 위해 React Query 도입
(상세내용)
[UX 개선]
반응형 웹 적용
스켈레톤 UI, 404 페이지 제안 및 개발
사용자의 이탈률을 막기 위해 Loading, Progress 컴포넌트 생성
[기술 스택]
프론트엔드 : Next.js 13, TypeScript, SCSS/SASS, React Hook Form, Tanstack Query, Recoil, Axios
인프라 : Azure, Ubuntu, Docker, ACR, Jenkins
협업 : Notion, github, Slack
디자인 : Figma
포트폴리오
교육
한세대학교
대학교(학사) | ICT융합
2017.03. ~ 2023.02. | 졸업
자격증
정보처리기사
기사 | 한국산업인력공단
2022.06.
대외활동
모던 리액트 Deep Dive 책 스터디
기타
- React의 동작원리, 웹 성능, 보안 등에 대해서 근본적으로 탐구하기 위해 진행한 스터디입니다.
- 현업에 종사한 6명의 프론트엔드 개발자들이 한주간 있었던 이슈와 현업에서 겪은 이슈들을 나누며 다양한 경험을 쌓았습니다.
Github Repository
감자 웹 개발 동아리
한세대학교
- 웹 개발자를 꿈꾸는 학생들이 서로 모여 프로젝트와 개발 지식을 공유하는 동아리입니다.
- 현직 개발자들과의 스터디, 조언, 코드리뷰 등을 통해서 실력을 향상하며, 프로젝트 진행을 통해 개발 지식을 습득하며 프론트엔드와 백엔드, 디자이너 등 다양한 직군과 협업하며 소통 경험을 배우고 있습니다.
- 저는 2020년부터 2023년까지 활동하며, 아래와 같은 프로젝트를 진행하였습니다.
날씨별 옷차림
: 매일매일 온도별 자신이 입은 옷을 기록하는 웹 사이트, 프로젝트 리더와 멘토 역할도 겸하였습니다.몽몽 : 애완동물 커뮤니티
: 애완동물 여행추천 커뮤니티청와대 국민청원 소통 커뮤니티
: 국민청원 커뮤니티슬기로운 감자 생활
: 한세대학교 학사일정 및 동아리 활동 확인하는 웹