<aside> 👋🏻 개발자는 기술로서 문제를 해결하는 사람이라고 생각합니다. 기술 스택, 플랫폼을 넘어서 정말 다양한 문제를 끈기 + 문서와 씨름하며 성공적으로 해결해 왔습니다. 매일 매일 배우는 것이 설레는 개발자로서 ‘조금만 더’를 외치며 목표를 달성 하겠습니다.

</aside>

📧 [email protected]

📞 010-8488-0583

👾 github.com/cgm-16

https://medium.com/@sdgwsld

🎓 HUFS 경영학 / AI융합 (학사)

💼 인턴

🌐 코리아엑스퍼트(주) - 풀스택 개발자

• 근무 기간/구성(기여도): 2021. 03 ~ 2021. 06 / 팀장님 + 인턴: 2명 (50%)
• 기술 스택: Apache Tomcat, Spring Framework, MariaDB

✍🏻 주요 업무

• 지능형현장진료 PJT
  • 상병코드 일괄 수정 기능 개발 - REST POST 활용, 업로드 파일을 MariaDB 테이블에 저장
  • 페이지 응답성 개선 - Lighthouse 활용, INP (Interaction to Next Paint) 지표 기반 UX 개선
• 개발 속도 개선 (배치 파일로 개발 서버 부팅 자동화 )

📚 배운점

• Lighthouse를 활용해서 웹페이지의 UX를 개선 할 수 있음
• BEM 기반 CSS Class Naming Convention을 개발에 적용 할 수 있음
• MariaDB/MySQL에서 파일을 읽어서 테이블에 적용할 때 Load 쿼리를 사용하는 것이 Batch Insert 비해 더 빠르단 사실을 개발에 활용함
• DevOps 활동을 개발에 적용 할 수 있음

⚒️ 프로젝트

🛒 Shoppy - 웹 개발자

• 배포 링크 Github
• 개발 기간/구성(기여도): 2024. 08 ~ 2024. 08 / 개발: 1명 (100%)
• 기술 스택: React, TypeScript, NextJS, Vite, TanStack Query(React Query), Vercel, CSS

타임 세일 페이지

브랜드 세일 페이지

👨🏻‍💻 기여한 기능

타임 세일 페이지

• Custom Hooks 통한 타임 세일 마감 타이머 기능
• 서버와의 통신 오류 검출 및 적절한 반응 표시

브랜드 세일 페이지

• TanStack Query useInfiniteQuery, Intersection Observer API 활용, 무한 스크롤 기능
• Intersection Observer API 활용해 화면 내 위치에 따라 반응하는 컴포넌트

🤔 Why this tech?

• NextJS: Routing 관리, 쇼핑몰 같은 서비스에서 SSG(Static Site Generation)을 통한 장점(SEO, 성능 등)을 위해 선택
• TanStack Query: Query Key를 통한 Caching으로 효율적인 상태관리에 기여하고, 무한 스크롤 등 강력한 기능을 편하게 쓰게 해줘 선택
• CSS3: React의 CSS Module을 통해 Component간 CSS 오염을 방지하며 사용

📚 배운점

• SSG, SSR, CSR 개념을 이해하고 적절한 Use Case에 활용 할 수 있음
• TypeScript를 통해 API로 받는 데이터 포맷을 Type으로 정의하여 개발의 안정성에 기여할 수 있음
• 무한 스크롤, 타이머 등 쇼핑몰의 Use Case에 맞는 컴포넌트를 개발 할 수 있음
• Component Based Architecture의 개념을 이해하고 개발에 적용 할 수 있음
• Absolute Import의 중요성을 인식하고 개발에 사용할 수 있음
• 프로젝트의 복잡도에 맞게 컴포넌트 파일들의 폴더 구조 설계를 할 수 있음
• REST Server 개발을 통해 API를 통한 REST 서버 통신을 구현 할 수 있음

🏁 Marblr - 프론트엔드 개발자