미리보기
기본 정보
내가 모르는 누군가에게 편의를 주기 위한, 조금은 편한 세상을 만들어 주기 위한 개발자를 꿈꾸는 김상초입 니다.
자기소개
다양한 경험을 해왔습니다.
4년 차 개발자로 웹과 앱 서비스를 개발/배포한 경험을 가지고 있습니다. 주로 웹 서비스 개발에서 FRONT 단을 담당했으며, 필요에 따라 BACK 단 부분도 개발하였습니다. 작은 규모의 팀에 첫 번째 커리어를 시작하였고, 짧은 시간에 다양한 경험들을 쌓았습니다.
협업에 가치를 중요하게 생각합니다.
다양한 직무의 팀 구성원들과의 "협업"을 중요시하는 개발자입니다. 혼자가 아닌 여러 명이라면 더 나은 창조적인 결과물과 예상치 못했던 가능성을 이끌어 낼 수 있기 때문입니다. 비즈니스 성장은 팀원들간의 신뢰에서 이뤄질 수 있다고 생각합니다.
노력의 무한한 가능성을 믿습니다.
"노력"의 무한한 가능성을 신뢰합니다. 스스로를 변화시키는 것은 "노력"이라고 믿습니다. 20살 부상으로 인해 10년간의 선수생활을 끝낼 때, 영어를 읽을줄도 모르면서 뉴질랜드에 간다고 했을 때, 체대를 졸업하고 개발자를 한다고 했을 때, 모두가 말도 안되는 길이라며 우려의 목소리를 냈지만, 하루하루의 "노력"은 지금의 "나"를 만들어 주었습니다.
경력
이스트소프트(ESTsoft)
팀원 | 웹프론트엔드팀 | 재직 중
2022.08. ~ 재직 중 (2년 3개월)
프로젝트 기능 구성 및 유지 보수
- 직관적인 코드로 다양한 그래픽 결과물을 빠르게 개발 및 구현
- 효율적인 상태 관리 시스템 구축을 통해 복잡한 글로벌 상태를 효과적으로 관리, 디버깅 간소화
- 성능 최적화 및 다국어 지원을 통해 애플리케이션의 전반적인 성능과 접근성 향상
지속적인 기술 학습과 전문성 향상
- 프론트 챕터 기술 스터디(북 스터디, 오픈소스, 블로그) 운영
- 최신 프로그래밍 패러다임과 아키텍처 원칙을 심도 있게 학습함으로써, 프로젝트의 효율성, 확장성, 그리고 팀 협업을 강화하는 데 기여
유의미한 데이터 분석 및 사용자 경험 개선
- Google Analytics(GA)와 Google Tag Manager(GTM)에서 수집된 데이터를 분석하여 프론트엔드 개발에 적용, 사용자 경험을 개선
- A/B 테스팅을 실시하여, 분석 결과를 적용함으로써 웹사이트의 상호작용성과 전환율을 효과적으로 향상
스탠드포인트
팀원 | 개발/사원
2020.06. ~ 2022.08. (2년 3개월)
효율적 프로젝트 관리
- 다양한 시스템과 소프트웨어의 통합을 주도하며, 명확한 요구사항 정의와 체계적인 타임라인 관리
- 프로젝트를 기한 내에 성공적으로 완료하고 고객 만족도를 극대화
기술 솔루션의 최적화
- 최신 기술을 적극적으로 도입하고 기존 시스템과의 호환성을 검증
- 통합 과정에서 발생할 수 있는 기술적 문제를 사전에 해결하고 전체 시스템의 성능과 안정성을 향상
팀 협업 및 리더십 강화
- 다양한 팀과의 협업을 강화하고 효과적인 커뮤니케이션을 통해 프로젝트의 명확한 방향성을 제시
- 정기적인 진행 상황 리뷰 및 피드백 세션을 통해 신속한 해결책을 제시, 프로젝트의 지연을 최소화하고 고객 만족을 극대화
프로젝트
AI PERSO STUDIO
이스트소프트(ESTsoft)
2022.09. ~ 진행 중
[소개]
PERSO는 AI Human 영상 제작 서비스를 제공하는 웹 기반 서비스입니다.
[작업 성과]
그래픽 결과물 구현
- Fabric.js를 사용하여 HTML5의 Canvas 기능을 효율적이고 직관적인 코드로 개선하며, 다양한 그래픽 결과물을 빠르게 개발하고 구현
상태 관리 관련
- Recoil.js를 도입하여 복잡한 글로벌 상태를 쉽고 효율적으로 관리하면서, 데이터를 Atom 단위로 관리하며 디버깅 간소화
- 기본적인 기능 이외에 Recoil이 제공하는 심화된 기능을 적절하게 이용함으로서 동기/비동기 데이터 처리 안정화
역할의 분리,MVC 디자인 패턴 적용
- 비즈니스 로직을 처리하는 Model과 데이터를 가공하여 보여주는 View, View와 Model을 연결 및 조합하는 Controller로 나누어 처리함으로서 코드 가독성 증가
- 상태의 업데이트 흐름 예측 용이, 역할 분리로 인한 직관적인 디버깅, 컨벤션 구조화로 학습시간 최소화
UI 개발 및 다국어 지원
- MSW를 사용하여 API 데이터를 Mocking, UI 제작 속도를 개선
- 한/영 기능을 제공하기 위한 react-i18next과 json 파일을 이용해 locale에 따라 직관적으로 정리할 수있는 기틀 마련
최적화 및 안정화 작업
- Esbuild로 미리 번들링 한 모듈을 필요시 동적으로 가져오는 Vite로 번들러 마이그레이션을 통한 생산성 향상
- Tree shaking ,Lazy, Bundle analyzer를 사용하여 빌드 사이즈 30% 최소화
테스트 및 개발자 경험(DX)
- Unit 및 e2e 테스트를 도입하여 리팩토링 시 버그를 최소화
- File generator인 pop.js를 적용함으로 반복적인 작업 최소화생산성 향상
- Lint를 통한 팀원 간의 컨벤션 정의, 협업을 위한 기반 마련
- 유령 의존성 현상, 외부환경 영향 최소화를 위해 yarn berry로 변경함으로써 개발 시간 절약
효과적인 에러 관리 및 디버깅 프로세스 구현
- 각 Error Class에 특화된 Effect Handler를 정의하고, try-catch 문을 사용하여 에러 처리를 구조화로 오류 발생 시 정확한 디버깅과 신속한 문제 해결이 가능
- 에러 처리 로직의 가독성을 향상시키고, 특정 사이드 이펙트에 대한 반응적인 처리를 가능하게 하여 전반적인 시스템 안정성 향상
SPTEK CMP 시스템
스탠드포인트
2021.09. ~ 2022.08.
[소개]
분산 서버 관리 플램폼 CMP(Cloud Management Platform)시스템을 고도화 한 프로젝트입니다.
[작업 성과]
프론트엔드 라우팅 및 UI 프레임워크 설정
- vue-router 이용하여 routing 환경 셋팅
- vuetify를 이용한 빠른 UI 개발로 개발 기간 10%축소
비동기 처리 및 에러 관리
- SuspenseWithErrors 컴포넌트 만들어 loading과 error 상태를 한 곳에서 처리
- Axios 활용하여 비즈니스 로직 셋팅 및 개발 및 Interceptor, validateStatus 활용하여 커스 텀 error 처리
상태 관리 및 데이터 흐름 최적화
- Vuex 사용하여 상태관리 및 서비스 분리, Props 복잡도를 개선
한밭대학교 연구홍보포털
스탠드포인트
2021.03. ~ 2021.09.
[소개]
아카이빙된 연구성과물을 다양한 방식의 검색 및 조회가 가능한 최신 연구정보를 공유하는 플랫폼입니다.
[사이트]
[작업 성과]
모듈화 및 코드 최적화 전략
- 재사용성과 유지 보수성, 겹치는 네임스페이스를 최소화 하기 위해 Module을 만들어 구성
- Module의 확장성과 독립성을 높이기 위해 DI 패턴을 적용, 반복되는 코드를 줄임으로써 개발 기간 5%감소
코드 효율성 및 관리 방법
- 불변성 관리 및 코드를 줄이기 위해 Immer, Loadsh 도입
- 다수의 생성자 인자 관리 및 코드 가독성을 위해 Builder패턴을 사용
크로스 브라우징 및 호환성
- 다양한 브라우저 환경에서 구동될 수 있도록 Babel 및 Polyfill 설정
BODY-CLASS
스탠드포인트
2021.01. ~ 2022.08.
[소개]
오늘밤을 위한 실전 섹스 테크닉 온라인강의 플랫 폼입니다.
[사이트]
[작업 성과]
효율적인 프로젝트 관리 및 팀 협업
- 팀원들 (기획,디자인, 개발)과 칸반보드를 이용하여 같은 기간 동안의 개발 목표보다 10% 더 완료
- VAC 패턴을 이용하여 비즈니스 로직과 View의 관심사를 분리
에러 관리 및 상태 관리 최적화
- context 기능을 이용하여 상태관리 및 서비스 분리
- AsyncErrorBoundary 컴포넌트를 만들어 loading과 error 상태를 한 곳에서 처리
성능 최적화 및 사용자 경험
- 코드스플리팅을 이용하여 번들링사이즈 15% 줄여 초기 로딩속도를 개선
- 쿠키&세션 인증 방식의 Legacy 로직을 Token 인증 방식으로 개선
MERRAC
스탠드포인트
2020.09. ~ 2021.02.
[소개]
북서 태평양 행동 계획 해양 환경 비상 대비 및 대응 지역 활동 센터 사이트
[사이트]
[작업 성과]
코드 효율성 및 관리 방법
- javaScript ES6를 활용, 웹앱 페이지 제작
- 단일 책임원칙 및 관심사의 분리를 지키기 위해 Controller, Service, View 로직을 나누어 각 역할에 맞게 구성,유지 보수 기간 10% 축소
사용자 경험 최적화
- 모바일 디바이스에 최적화 된 화면 구성으로 UI 설계
지속적인 데이터 관리 및 갱신
- GIS 지도에 표출되는 갱신된 데이터 DB 정보 업데이트
현대산업개발
스탠드포인트
2020.06. ~ 2020.08.
[소개]
IPARK 분양, 계약, 입주, AS등 다양한 관련 정보를 조회할 수 있는 공식 고객용 앱
[사이트]
[ios](https://apps.apple.com/us/app/ipark- %EB%AA%A8%EB%B0%94%EC%9D%BC/id1516767886)
aos
[작업 성과]
효과적인 라이팅 및 상태관리
- React-navigation 이용하여 routing 환경 조성
- Redux 사용하여 상태관리 및 서비스 분리, Props 복잡도를 개선
구조화된 컴포넌트 설계
- Presentational and Container Component Pattern 활용하여 비즈니스 로직과 UI 관심 사분리
- Style-component 활용하여 코드의 유연성 및 확장성
애플리케이션 배포 및 관리
- App market (Android, Ios) 에 해당 앱을 배포 관리
대외활동
글또 9기
글또
[소개]
글을 작성하는 개발 직군분들이 모여서, 좋은 영향을 주고 서로 같이 자랄 수 있는 커뮤니티
[작업 성과]
- 2주마다 최소 글 1편 작성 및 공유
- 5개월 동안 12편의 글 기고
SIPE 1,2기
SIPE
[소개]
현직 개발자들이 함께 경험을 쌓으며 성장하는 IT 커뮤니티
[작업 성과]
- 매주 성장에 기여 할수 있는 아티클/컨퍼런스를 읽거나 시청한뒤 정리
- 8주 동안 16편 아티클 정리
ZIPJUNG 1기
ZIPJUNG
[소개]
Estsoft 사내 프론트팀 스터디 그룹 활동
[사이트]
[작업 성과]
북 스터디
- 이펙티브 타입스크립트: 타입스크립트 동작원리의 이해와 조언들을 책을 통해 이해한 후 해당 내용을 정리
- 함수형 자바스크립트 프로그래밍: 함수형 자바스크립트 프로그래밍의 이해와 조언들을 책을 통해 이해한 후 해당 내용을 정리
- 그림으로 공부하는 마이크로 서비스 구조: 마이크로서비스구조에 대한 이해와 조언들을 책을 통해 이해한후 해당 내용을 정리
법무법인 Namsan 사이트 제작
- 맞춤형 법률 서비스를 제공하는 법무법인 Namsan 사이트 제작
- 더 빠르고, 안전하며, 스케일링하기 쉬운 웹을 만들기 위해 디자인된 아키텍처인 JAM Stack 방식으로 초기 구성 및 셋팅
- 정적 페이지가 위주, 데이터 serving이 필요에 따라 CSR과 SSR, lazy loading을 적절히 섞어 사용할 수 있는 Gatsby를 사용
- 제한된 시간으로 인해 Serverless 환경 선택, 학습 러닝커브가 낮은 Firebase를 이용.
- Firebase storage를 손 쉽게 가공하기 위한 firecms를 사용하여 관리자 페이지 제작.
DDD 7기
DDD
[소개]
개발자와 디자이너가 함께 성장하는 IT 연합동아리
[활동]
프로젝트 소개
런두잇 - 빨래고민을 해결하고자 하는 사용자들에게 파편화 되어있는 다양한 세탁정보들을 제공하는 플랫폼
프로젝트 사이트
프로젝트 작업 성과
- 프로젝트 구성 및 초기 셋팅
- 높은 수준의 코드 탐색과 디버깅을 환경을 조성하기 위해 TypeScript 도입
- ReduxToolkit 이용하여 상태관리 및 서비스 분리
- AsyncErrorBoundary 컴포넌트를 만들어 loading과 error 상태를 한 곳에서 처리
- 클라이언트 store에 본래의 역할이 변질되는 문제 및 코드 가독성 문제로 인해 React-query 활용하여 데이터(서버, 클라이언트)를 분리하여 관리
요식업 소개 사이트 제작 및 유지보수
트리니티
[소개]
부엉이산장 - 차가운 도심 속 따듯하고 아늑한 공간속에서 주막요리를 즐기며 하루를 마감할 수 있는 레스토랑
[사이트]
- 2024년 4월까지 유지 보수.
[작업 성과]
- 프로젝트 구성 및 초기 셋팅
- 팀원들(기획,디자인, 개발)과 칸반보드를 이용하여 진행 상황을 파악, 같은 기간 동안의 개발 목표보다 10%를 더 완료
- 모바일 디바이스로 접근시 모바일 웹페이지로 바로 보여질 수 있도록 구성
- 호스팅 사이트 Vercel 이용해 production 운영
DND 6기
DND
[소개]
8주간 개발자와 디자이너가 협업하는 사이드 프로젝트 활동
[활동]
프로젝트 소개
흐릿 - 걱정을 기록하고 검증하는 서비스
프로젝트 사이트
프로젝트 작업 성과
- Atomic Pattern 활용하여 디자인팀과 협업하기 좋은 환경 구성, 일련의 패턴을 확립하여 더 빠르고 유연성 있는 필드 프로세스 구성
- 높은 수준의 코드 탐색과 디버깅을 환경을 조성하기 위해 TypeScript 도입
- Context 기능을 이용하여 상태관리 및 서비스 분리
- 클라이언트 store에 본래의 역할이 변질되는 문제 및 코드 가독성 문제로 인해 React-query 활용하여 데이터(서버, 클라이언트)를 분리하여 관리
- 비즈니스 로직은 hook으로 분리
교육
한국체육대학교
대학교(학사) | 스포츠청소년지도학과
2010.03. ~ 2018.09. | 졸업
한국방송통신대학교
대학교(학사) | 컴퓨터과학과
2019.09. ~ 2021.08. | 졸업
포트폴리오
기술 스택
JavaScript, TypeScript, React, Next.js, HTML/CSS, GA4, Google Tag Manager, Jest