미리보기

[소개]

저는 Autodesk 프로그램을 쉽게 사용할 수 있는 캐드친구의 웹 서비스의 신규 개발 및 유지보수를 시작으로 다양한 업무와 프로젝트를 하고 있으며, 프론트엔드 개발, 도커라이징, 클라우드 서비스 배포, Jenkins를 활용한 자동화 배포, 웹 디자인까지 다양한 기술 영역에서 역량을 쌓고 있습니다. 이를 통해 전체적인 웹 개발 생태계를 이해하고, 다양한 직군과 깊은 의사소통을 하며 팀 내 업무 효율성을 높이는 데 기여하고 있습니다.

[소개]

AutoCAD, Inventor, Revit등 Autodesk사 솔루션을 더 쉽게 사용하는 기능을 제공하는 Add-in 프로그램인 캐드친구를 소개하고 다운로드 받을 수 있는 웹이며 사용자 문의와 라이선스 신청, 컨텐츠 조회 및 다운로드 등을 할 수 있는 서비스를 개발하였습니다. (링크)

[기술 스택]

• 프론트엔드 : Next.js(app router), TypeScript, Sass/SCSS, Axios, TanStack Query, Recoil

• 인프라 : Azure ubuntu, Nginx, Docker, ACR, Jenkins, GitHub WebHook

• 디자인 : Figma

[기여 부분]

1. Next.js와 TypeScript를 사용한 프론트엔드 개발

2. 자사(다우데이타) 통합 인증 서버(OAuth 2.0) 연동

3. Azure ubuntu VM, Nginx, Docker를 사용한 리버스 프록시, 로드 밸런싱 등 인프라 구축

4. Blue/Green 무중단 배포 구축을 통해 운영 서버 안정화

5. Jenkins와 github webhook을 사용한 자동화 배포 구축

6. Figma를 사용한 웹 기획 및 웹 디자인 생성

7. Google Search Console과 Light House를 사용한 성능 및 SEO 분석 및 개선

8. Notion을 통한 기술 문서 공유/배포 history 관리, Slack을 통한 사용자 행동 알림/배포 알림, Figma를 사용하여 협업 환경 구축

9. 코드 컨벤션을 확립하여 협업 및 개발 생산성 향상

[트러블 슈팅]

1. Next.js의 API Routes와 주문형 재검증(ISR)을 사용하여 서버 부담 최소화

   • Next.js 서버의 부담을 최소화하기 위해 SSG로 페이지를 생성하였고 사용자의 이용이 많거나 자주 변경이 되지는 않지만 변경될 가능성이 있는 페이지에 대해서 빌드를 다시하게 하는 API를 생성하여 게시글이 수정되었을 때 해당 API를 호출하여 최신의 페이지를 제공

2. PM2 -> Docker로 마이그레이션

   • 최초엔 PM2로 무중단 배포를 도입하였지만 Next.js 서버 종료시 PM2의 자동 재실행 설정으로 인해 Azure VM의 메모리를 모두 차지해서 SSH 접속조차 안되는 버그가 있었고 Docker를 도입하여 VM의 안정성을 향상

3. 배포 프로세스 및 프론트엔드 서버 점진적 개선 (12m -> 3m 배포 시간 단축) (상세내용)

   • 최초 배포시 로컬 PC에서 프로젝트를 docker 빌드하는 스크립트, 원격 서버에서 docker container를 구동하는 스크립트를 만들어서 진행했지만 잦은 배포 요청, 수동 배포의 불편함과 휴먼 에러라는 취약함을 해결하기 위해 Jenkins와 GitHub WebHook를 사용하여 자동화 배포를 구축

4. API 성능 최적화: 74개 콘텐츠의 효율적 데이터 가져오기 문제 해결 (5s 이상 -> 1s 미만 시간 단축)

   • 개발자 도구 네트워크 탭에서 API 자체 속도가 느린 것을 확인 후 이미지 파일을 Base64로 관리하기로 했던 기획 문제임을 깨닫고 모든 파일을 Azure Blob Storage에 이관하는 방식으로 설득하여 5초 이상 소요되던 API가 1초도 걸리지 않도록 해결

5. 검색 엔진 최적화 (상세내용)

   • sitemap.xml, robots.txt, 시맨틱 마크업 적용, generateMetadata를 활용한 동적 메타 데이터 생성으로 SEO 향상 및 공유성 개선

6. 성능 최적화

   • 자동 코드 스플리팅, 폰트 최적화, 이미지 사이즈 최적화를 위한 Next/Image 사용, Link 태그를 사용한 prefetch로 페이지 로드 시간 단축, nested layout을 통해 변경된 부분만 렌더링하여 성능 향상 등 Next.js 13의 기능을 적극 활용하고

     이미지는 webp, 동영상은 webm 확장자를 사용하여 정적 리소스의 용량 압축,

     서버 데이터의 캐싱, 동기화 및 업데이트를 위해 TanStack Query 도입

[소개]

사용자 PC에 Agent 프로그램이 설치되어 레지스트리와 실행 프로그램들을 수집하고 관리자 페이지에서 수집된 데이터를 기반으로 필터링할 값을 설정하고, 설치 현황, 통계 등을 시각화하여 제공합니다. 필터링된 정보를 통해 기업은 소프트웨어 설치 현황 및 라이선스 준수 여부를 쉽게 파악하여 소프트웨어 관리의 효율성을 높이고, IT 자산을 보다 효과적으로 운영할 수 있는 온프레미스 서비스의 관리자 페이지를 개발하였습니다.

[기술 스택]

• 프론트엔드 : React, JavaScript, TanStack Query, React Hook Form, SignalR, Sass/SCSS, Recharts, Zustand

• 디자인 : Figma

[기여한 점]

1. React와 JavaScript를 사용한 전체적인 프론트엔드 개발

2. SignalR을 사용한 웹 소켓 연동

3. Recharts를 사용한 데이터 시각화

4. 반응형 페이지 개발

5. Figma를 사용한 웹 기획 및 웹 디자인 생성

[트러블 슈팅]

1. 온프레미스 서비스에서 동적으로 백엔드 url 설정 이슈

   • 각 회사의 window VM에 서비스를 구축하는 환경에서 각 회사 VM의 ip를 일일이 세팅해줄 수 없기에 env 파일을 설정하지 않고 window 변수를 사용하여 동적으로 protocol과 host를 접근하도록 하여 해결

2. get 요청시 url에 포함된 특수문자(&) 이슈

   • ?displayName=ACA & MEP 2019 Object Enabler 이러한 GET 요청 발생시 &를 쿼리 매개변수를 구분하는 역할로 간주하기에 GET요청에 들어가는 쿼리 파라미터들에 encodeURIComponent로 파싱하여 해결

[소개]

협업 및 설계 검토를 위해 Autodesk Platform Service의 API 를 이용하여 설계 도면 등을 실제 프로그램을 구동시키지 않고도 여러 기기의 디바이스에서 쉽게 검색하고 다운로드하며 공유할 수 있고 B2B로 제공되는 웹사이트를 개발하였습니다.

[기술 스택]

• 프론트엔드 : React, JavaScript, Sass/SCSS, Axios, Tanstack Query, Zustand

• 인프라 : IIS 배포

• 디자인 : Figma

[기여 부분]

1. React와 JavaScript를 사용한 전체적인 프론트엔드 개발

2. APS의 API를 사용하여 2D/3D 뷰어 연동

3. 반응형 페이지 개발

4. Window OS IIS 배포

5. Figma를 사용한 웹 기획 및 웹 디자인 생성

[트러블 슈팅]

1. 페이지를 PDF로 생성하는 요구사항

   • 최초에는 jsPDF를 사용하여 html을 이미지화하여 PDF를 생성하였지만 드래그 기능에 대한 추가 요구사항으로 jsPDF를 대신하여 window에서 제공하는 프린트 기능을 사용하여 PDF를 생성하는 기능 개발

2. 선택한 여러개의 파일 동시 다운로드 제한 이슈

   • 브라우저 정책상 많은 파일을 동시에 다운로드할 수 없어서 setTimeout을 활용하여 500ms의 시간을 두어 순차적으로 파일을 다운로드

3. url의 Query String을 활용해 data를 관리하여 SNS상에서 공유나 북마크 등을 고려함

• React의 동작원리, 웹 성능, 보안 등에 대해서 근본적으로 탐구하기 위해 진행한 스터디입니다.
• 현업에 종사한 6명의 프론트엔드 개발자들이 한주간 있었던 이슈와 현업에서 겪은 이슈들을 나누며 다양한 경험을 쌓았습니다.
  Github Repository

• 웹 개발자를 꿈꾸는 학생들이 서로 모여 프로젝트와 개발 지식을 공유하는 동아리입니다.

• 현직 개발자들과의 스터디, 조언, 코드리뷰 등을 통해서 실력을 향상하며, 프로젝트 진행을 통해 개발 지식을 습득하며 프론트엔드와 백엔드, 디자이너 등 다양한 직군과 협업하며 소통 경험을 배웠습니다.

• 저는 2020년부터 2023년까지 활동하며, 아래와 같은 프로젝트를 진행하였습니다.

1. 날씨별 옷차림 : 매일매일 온도별 자신이 입은 옷을 기록하는 웹 사이트, 프로젝트 리더와 멘토 역할도 겸하였습니다.

2. 몽몽 : 애완동물 커뮤니티: 애완동물 여행추천 커뮤니티

3. 청와대 국민청원 소통 커뮤니티 : 국민청원 커뮤니티

4. 슬기로운 감자 생활 : 한세대학교 학사일정 및 동아리 활동 확인하는 웹