toothlessdev/toothlessdev.gitbook.io

https://toothlessdev.gitbook.io/main

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

소개 : 성격 / 수면습관 / 생활습관 등에 따른 룸메이트 매칭 플랫폼
기간 : 2024.05 ~
사용기술 :

✏️ Lingo

소개 : 의료 번역 AI 플랫폼 (김재일 교수님 LAB Project)
기간 : 2024.05 ~
사용기술 :

✏️ KNU-Fest

소개 : �경북대학교 축제 홍보 및 안내 사이트
기간 : 2024.05
사용기술 :

✏️ �SaveMyReceipt

소개 : OCR 을 이용해 소모임, 동아리, 단체 회계장부를 쉽게 관리 할 수 있는 플랫폼
기간 : 2024.05 ~
사용기술 :

✓ DX 개선

‣ 생산성을 높이기 위해 Tailwind CSS 를 학습, 도입하였습니다

✏️ Get-P WebSite

소개 : �대학생 외주 매칭 플랫폼
기간 : 2024년 04월 ~
사용기술 :

{% embed url="https://github.com/Principes-Artis-Mechanicae/get-p-frontend" %}

✓ 구현

‣ 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

소개 : 금융 / 경제 교육 플랫폼
기간 : 2023년 09월 ~ 2023년 12월
사용기술 :

{% embed url="https://github.com/toothlessdev/stocodi-web-legacy" %}

✓ 구현

‣ 랜딩 페이지, 로그인 및 회원가입 페이지, 강의 홈 페이지, 강의 상세 페이지, 강의 검색 페이지, 금융역량테스트 페이지, 테스트 결과 페이지를 구현했습니다

‣ 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

소개 : 아마추어 사진작가와 이용자를 연결해주는 플랫폼 (우리동네 사진작가 리스트)
기간 : 2023.09 ~
사용기술 :

{% embed url="https://github.com/toothlessdev/Udongsari_Frontend" %}

✓ 구현

‣ 복잡한 상태를 Redux Toolkit 으로 관리하고, Redux Thunk Action 을 통해 서버 상태를 관리하고 비동기 작업을 처리했습니다

‣ WebSocket 을 이용해 채팅방 기능 구현을 시도하였습니다

✏️ BrandAI

소개 : 아마추어 사진작가와 이용자를 연결해주는 플랫폼 (우리동네 사진작가 리스트)
기간 : 2023.09 ~
사용기술 :
팀원 : FrontEnd 2 + BackEnd 3
기여 : Figma UI Design (총 22화면 중 21화면 디자인) + Frontend Develop ()

{% embed url="https://github.com/Team-Brand-AI/brand-ai-frontend" %}

✓ 구현

‣ 로그인, 회원가입, 마케팅 리스트 페이지, 마케팅 추가 페이지, 결과페이지, 설정페이지를 구현하였습니다

‣ 이미지 업로드를 위해 ExpressJS / CloudFlare Image API 를 사용한 웹 서버를 구축하였습니다

✓ UI / UX 개선

‣ PWA 를 적용시켜 UX 를 향상시켰습니다

✓ DX 개선

✏️ Alcoholic

소개 : 한국 전통주 시장 부흥을 위한 전통주 MBTI 및 성향에 따른 술 추천 서비스
기간 : 2023.05
사용기술 :

{% embed url="https://github.com/toothlessdev/Alcholic" %}

✓ 구현

‣ 여러 페이지에 걸쳐 사용자로부터 입력받은 설문에 대해 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)

dd

🍼 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 서버를 구축하였습니다

‣