About ME
Hello I'm Javascript Engineer KIM DAE GEON 😊 안녕하세요 Web FrontEnd 에 관심이 많은 소프트웨어 엔지니어 김대건입니다!
🦶 FootPrint 발자취
‣ 운동을 취미로 하는 저는, 다양한 운동 애플리케이션을 사용하며 UI / UX 의 중요성을 알게 되었습니다
여러 운동 애플리케이션을 사용하던 중, 내장된 기능들은 모두 비슷하지만 UI 에 따라 사용자의 경험이 크게 달라지는 것을 깨달았고 "프론트엔드 개발" 에 매료되었습니다
🛠️ TechStack 기술스택
‣ ReactJS 를 활용해 SPA 를 구현할 수 있습니다 ‣ Redux 의 Flux 아키텍쳐를 이해하고, 복잡한 클라이언트 상태를 관리 할 수 있습니다 ‣ Redux Thunk, Redux Saga 를 통해 비동기 작업을 처리할 수 있습니다 ‣ NextJS 페이지 라우터를 활용해, 적절한 렌더링 패턴 (SSG, ISR, SSR) 을 적용시킬 수 있습니다 ‣ SCSS 의 import, mixin, include 를 활용하여, 중복되는 스타일시트를 줄일 수 있습니다 ‣ NestJS 와 TypeORM 을 이용해 간단한 CRUD 서버를 만들 수 있습니다
📖 Projects 프로젝트
✏️ KNU RoomMate
✏️ Lingo
✏️ KNU-Fest
✏️ SaveMyReceipt
✓ DX 개선
‣ 생산성을 높이기 위해 Tailwind CSS 를 학습, 도입하였습니다
✏️ Get-P WebSite
✓ 구현
‣ Redux Persist 를 사용해 인증 / 인가 상태와 토큰을 저장하였습니다. Vite SSR 플러그인을 사용해 Server Side Rendering 중 Persist Storage 의 부재로인한 Hydration 에러를 해결하면서 React Server API 와 Server Side Rendering 의 동작원리를 습득하였습니다
‣ 회원가입 퍼널에서 사용자로부터 입력받은 복잡한 상태를 Redux Thunk Action 을 사용해 처리했습니다
‣ 기존 useInputValidation 커스텀 훅에서 React Hook Form / ZOD 로 마이그레이션을 통해 런타입 타입 검증을 진행하였습니다
✓ UI / UX 개선
‣ Framer Motion 을 사용한 페이지 전환 애니메이션을 통해 UX 를 개선하였습니다
✓ DX 개선
‣ StoryBook 을 사용하여 공통 컴포넌트에 대한 UI 테스팅을 진행하였습니다
‣ 구현 전, 프론트엔드 팀원들과 재사용성 측면에서 컴포넌트를 분류하고 분류한 컴포넌트에 대한 요구사항을 문서화하였습니다
‣ Jira , Confluence 를 이용한 애자일 기반의 프로젝트를 진행하며, 커뮤니케이션 능력을 향상시켰습니다
‣ Github Actions 와 Netlify 를 통해 베타 서버 배포를 자동화하였습니다
✓ 성능개선
‣ Lazy Loading / Suspense 를 통한 코드 스플리팅을 이용해 FCP / LCP 등 초기 렌더링 속도를 향상시켰습니다
‣ Vite SSR 플러그인을 통해 서버사이드 렌더링을 적용시켰습니다
‣ Skeleton 컴포넌트를 구현해 Cumulative Layout Shift 를 최소화하였습니다
✏️ Stocodi
✓ 구현
‣ 랜딩 페이지, 로그인 및 회원가입 페이지, 강의 홈 페이지, 강의 상세 페이지, 강의 검색 페이지, 금융역량테스트 페이지, 테스트 결과 페이지를 구현했습니다
‣ JWT 를 활용해 Access / Refresh 기반의 로그인 플로우를 구현하였습니다
‣ Mobile / Tablet 에 대한 Figma 디자인이 없음에도 Flex Grid 를 이용해 BreakPoint 를 기준으로 반응형 페이지로 구현하였습니다
‣ T-Syringe 를 활용해 API 호출과 실제 서비스를 추상화한 클래스를 구현, 의존성 주입 / 싱글톤 패턴 적용을 시도했습니다
‣ 금융역량테스트 페이지 구현시, 문항의 선택지에 이벤트 핸들러를 바인딩 하는 과정에서 발생한 문제를 해결하며 클로져 / 렉시컬 스코프에 대한 개념을 습득했습니다
✓ UI / UX 개선
‣ 실 사용자로부터의 피드백을 통해 총 72개의 요구사항을 반영시켜 UI / UX 를 개선시켰습니다
✓ DX 개선
‣ ESLint / Prettier 를 이용해 코드 컨벤션을 통일시켰고, Github Actions 를 사용해 CI 파이프라인을 구축했습니다
‣ Github Actions 와 Docker 를 이용해 배포 자동화 파이프라인을 구축했습니다
‣ SCSS 의 MixIn / Include 등을 사용해 중복되는 271줄의 스타일시트를 96줄로 줄였습니다
‣ 프로젝트 규모가 커짐에 따라 중복되는 ClassName 을 방지하고자 BEM 을 도입하였고, CSS Modules 와 SCSS 를 도입하였습니다
‣ 기존에 분류되지 않았던 컴포넌트를 Atomic Design Pattern 을 사용해 재사용성을 높였습니다
‣ Atomic Design Pattern 의 컴포넌트 파편화를 줄이고자 컴포넌트의 기능을 기준으로 개선된 디렉토리 구조로 컴포넌트를 재분류하였습니다
✓ 성능개선
‣ 기존의 WebPack / JS 기반의 CRA 프로젝트를 EsBuild 기반의 Vite 으로 마이그레이션 하여 빌드속도를 향상시켰습니다
‣ 스크롤에 반응해 애니메이션이 적용되는 애니메이션을 구현하는 도중 기존의 Scroll Event 기반에서 Intersection Observer 를 사용해 성능을 개선시켰습니다
‣ Lazy Loading / Suspense 를 통한 코드 스플리팅을 이용해 FCP / LCP 등 초기 렌더링 속도를 향상시켰습니다 (Chrome 빠른 3G 기준 LightHouse 지표 45점 / FCP 5.9s / LCP 5.9s -> 82점 / FCP 1.0s / LCP 1.5s 로 개선)
✏️ UdongSari
✓ 구현
‣ 복잡한 상태를 Redux Toolkit 으로 관리하고, Redux Thunk Action 을 통해 서버 상태를 관리하고 비동기 작업을 처리했습니다
‣ WebSocket 을 이용해 채팅방 기능 구현을 시도하였습니다
✏️ BrandAI
✓ 구현
‣ 로그인, 회원가입, 마케팅 리스트 페이지, 마케팅 추가 페이지, 결과페이지, 설정페이지를 구현하였습니다
‣ 이미지 업로드를 위해 ExpressJS / CloudFlare Image API 를 사용한 웹 서버를 구축하였습니다
✓ UI / UX 개선
‣ PWA 를 적용시켜 UX 를 향상시켰습니다
✓ DX 개선
✏️ Alcoholic
✓ 구현
‣ 여러 페이지에 걸쳐 사용자로부터 입력받은 설문에 대해 Context API 를 사용해 상태를 저장하였습니다
‣ useReducer 와 Context API 를 조합하여 복잡한 상태 관리를 처리하였습니다
⛳️ Activities 활동
2023.03 ~ 2023.12 - 경북대학교 멋쟁이사자처럼 11기 아기사자 Frontend 2023.09 ~ 2023.12 - 금융경제교육플랫폼 Stocodi 창업팀 Frontend Developer 2024.03 ~ 2024.?? - 학생외주매칭플랫폼 GET-P 창업팀 Frontend Lead & Developer 2023.12 ~ 2024.12 - 경북대학교 멋쟁이사자처럼 12기 대표 2024.06 - 경북대학교 연합해커톤 운영 TF
🏆 Awards 수상내역
2023.05 - 멋쟁이사자처럼 11기 교내 아이디어톤 대상 (DeadLock) 2023.06 - GET-IT 해커톤 장려상 (Alcoholic) 2023.07 - 82 스타트업 X LIKELION USA 아이디어톤 Security 대상 (Luddit-Captcha) 2023.09 - 멋쟁이사자처럼 11기 대경권 연합해커톤 대상 (UdongSari)
🍼 ToyProjects 토이 프로젝트
- AutoClipping 오토클리핑
채팅 속도, 채팅 가속도, 채팅 내용 등을 분석해 생방송 중 하이라이트 부분을 추출해주는 서비스입니다
‣ Python Requests 모듈을 사용해 Twitch TV API 로 부터 생방송 채팅 내역을 가져왔습니다
- Contents-Lab 콘텐츠랩
콘텐츠랩 번역 아르바이트 자동화 프로그램입니다.
‣ 엑셀 번역본 파일을 콘텐츠랩에 자동화하여 적용시켜주는 프로그램입니다
‣ Python, Selenium, BeautifulSoup, Requests 모듈을 사용하여 자동화하였습니다.
- WhereIsMyTrashBin 어디있쓰
경북대학교 교양과목 디자인과 크리에이티브에서 개발한 "환경문제 (쓰레기 배출) 해결을 위한 쓰레기통 위치 공유 및 업사이클링 거래 플랫폼" 입니다
‣ Kakao MAP API 와 공공데이터 포털 API 를 사용해 사용자 위치 주변의 쓰레기통 위치를 표시하도록 구현하였습니다
- Luddit-Captcha 러딧캡챠
Captcha 의 취약점을 개선하기 위해 Stable Diffusion 모델을 사용한 프롬프트 기반의 Captha
‣ 해당 서비스의 랜딩페이지를 구현하였습니다
‣ 웹 사이트 보안과 관련된 취약점에 대해 공부하였습니다 (JWT, CSRF, XSS)
- Adv-Web-Programming 고급 웹 프로그래밍
컴퓨터학부 고급 웹 프로그래밍 수업에서 진행한 과제입니다
‣ NestJS 와 TypeORM, SQLite 를 활용해 CRUD 서버를 구축하였습니다
‣
Last updated