> For the complete documentation index, see [llms.txt](https://toothlessdev.gitbook.io/main/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://toothlessdev.gitbook.io/main/about-me.md).

# About ME

Hello I'm Javascript Engineer KIM DAE GEON 😊\
안녕하세요 Web FrontEnd 에 관심이 많은 소프트웨어 엔지니어 김대건입니다!

## 🦶 FootPrint 발자취

***

> ‣ ***효율적이고 창의적인 문제해결의 매력***
>
> 한국관광공사의 데이터베이스 번역본 업데이트 아르바이트를 Python 의 Selenium 을 통해 5\~6 배의 효율로 자동화 하였습니다. 이를 통해 프로그래밍의 효율적이고 창의적인 문제 해결에 매력을 느껴 개발자가 되고자 했습니다

> ‣ ***다양한 운동 애플리케이션을 사용하며 UI / UX 의 중요성을 알게 되었습니다***
>
> 여러 운동 애플리케이션을 사용하던 중, 내장된 기능들은 모두 비슷하지만 UI 에 따라 사용자의 경험이 크게 달라지는 것을 깨달았고 "프론트엔드 개발" 에 매료되었습니다

## 🛠️ TechStack 기술스택

***

![](https://shields.io/badge/JavaScript-black?logo=javascript\&style=flat\&color=FF9A00) ![](https://shields.io/badge/TypeScript-black?logo=typescript\&style=flat\&color=033963)![](https://shields.io/badge/ReactJS-black?logo=react\&style=flat\&color=0086CA) ![](https://shields.io/badge/NextJS-black?logo=nextdotjs\&style=flat\&color=202020) ![](https://shields.io/badge/Redux_Toolkit-black?logo=redux\&style=flat\&color=7648BA) ![](https://shields.io/badge/Tanstack_Query-black?logo=reactquery\&style=flat\&color=720020)\
![](https://shields.io/badge/CSS_Module-black?logo=cssmodules\&style=flat\&color=202020) ![](https://shields.io/badge/Styled_Components-black?logo=styledcomponents\&style=flat\&color=202020) ![](https://shields.io/badge/SCSS-black?logo=sass\&style=flat\&color=A9225C) ![](https://shields.io/badge/Tailwind_CSS-black?logo=tailwindcss\&style=flat\&color=033963)\
![](https://shields.io/badge/NestJS-black?logo=nestjs\&style=flat\&color=E0234E) ![](https://shields.io/badge/TypeORM-black?logo=nestjs\&style=flat\&color=E0234E) ![](https://shields.io/badge/SQLite-black?logo=sqlite\&style=flat\&color=003B57) ![](https://shields.io/badge/PostgreSQL-black?logo=postgresql\&style=flat\&color=033963) <img src="https://shields.io/badge/OracleDB-black?logo=oracle&#x26;style=flat&#x26;color=F80000" alt="" data-size="original">

‣ ReactJS 를 활용해 SPA 를 구현할 수 있습니다\
‣ Redux 의 Flux 아키텍쳐를 이해하고, 복잡한 클라이언트 상태를 관리 할 수 있습니다\
‣ Redux Thunk Actions 를 통해 비동기 작업을 처리할 수 있습니다\
‣ NextJS 페이지 라우터를 활용해, 적절한 렌더링 패턴 (SSG, ISR, SSR) 을 적용시킬 수 있습니다\
‣ SCSS 의 import, mixin, include 를 활용하여, 중복되는 스타일시트를 줄일 수 있습니다\
‣ NestJS 와 TypeORM 을 이용해 간단한 CRUD 서버를 만들 수 있습니다

## 📖 Projects 프로젝트

***

### *<mark style="background-color:orange;">✏️ KNU RoomMate</mark>*&#x20;

**소개 : 성격 / 수면습관 / 생활습관 등에 따른 룸메이트 매칭 플랫폼**\
**기간 : 개발 진행중**\
**사용기술 :** ![](https://shields.io/badge/TypeScript-black?logo=typescript\&style=flat\&color=033963)![](https://shields.io/badge/NextJS-black?logo=nextdotjs\&style=flat\&color=202020)![](https://shields.io/badge/NestJS-black?logo=nestjs\&style=flat\&color=E0234E)![](https://shields.io/badge/TypeORM-black?logo=nestjs\&style=flat\&color=E0234E)![](https://shields.io/badge/SocketIO-black?logo=socketdotio\&style=flat\&color=202020)![](https://shields.io/badge/PostgreSQL-black?logo=postgresql\&style=flat\&color=033963)

### *<mark style="background-color:orange;">✏️ Lingo</mark>*&#x20;

**소개 : 의료 번역 AI 플랫폼 (김재일 교수님 LAB Project)**\
**기간 : 개발 진행중**\
**사용기술 :** ![](https://shields.io/badge/TypeScript-black?logo=typescript\&style=flat\&color=033963) ![](https://shields.io/badge/NextJS-black?logo=nextdotjs\&style=flat\&color=202020) ![](https://shields.io/badge/Tailwind_CSS-black?logo=tailwindcss\&style=flat\&color=033963)

### *<mark style="background-color:orange;">✏️ KNU-Fest</mark>*&#x20;

**소개 : 경북대학교 축제 홍보 및 안내 사이트 (Google Analytics - 총 사용자 1.1만명, 총 이벤트 24만회)**\
**기간 : 2024.05** \
**사용기술 :** ![](https://shields.io/badge/TypeScript-black?logo=typescript\&style=flat\&color=033963) ![](https://shields.io/badge/ReactJS-black?logo=react\&style=flat\&color=0086CA)![](https://img.shields.io/badge/AWS_Route53-black?logo=amazonroute53\&style=flat\&color=512BD4) ![](https://img.shields.io/badge/AWS_CloudFront-black?logo=amazonwebservices\&style=flat\&color=8C4FFF) ![](https://img.shields.io/badge/AWS_S3-black?logo=amazons3\&style=flat\&color=006600)

<details>

<summary><strong>구현</strong></summary>

‣ React-SVG 와 Intersection Observer 를 활용해 자체 Map 컴포넌트를 구현하였습니다

‣ AWS Route53, S3, CloudFront 를 사용해 배포를 진행하였고, Github Actions 를 활용해 <mark style="background-color:orange;">배포자동화</mark> 파이프라인을 구성하였습니다

</details>

<details>

<summary>UX 개선</summary>

‣ *<mark style="background-color:orange;">**Browser FingerPrint**</mark>* 를 사용해 로그인 없이 서비스를 사용가능하도록 하여 ***UX 를 향상***&#xC2DC;켰습니다

‣ ***구글 애널리틱스 GA*** 로 분석한 <mark style="background-color:orange;">방문 페이지별 세션수</mark>를 활용해 *<mark style="background-color:orange;">**Lazy 로딩을 적용시켜 FCP 를 향상**</mark>*&#xC2DC;켰습니다

</details>

<details>

<summary>DX 개선</summary>

‣ 공통된 스타일을 추출, 디자인 시스템을 만들어 DX 와 생산성을 높였습니다

‣ useBooth, useVisitor 등 커스텀 훅을 적극 활용하여 비스니스 로직의 재사용성을 높였습니다

</details>

### *<mark style="background-color:orange;">✏️ SaveMyReceipt</mark>*&#x20;

**소개 : OCR 을 이용해 소모임, 동아리, 단체 회계장부를 쉽게 관리 할 수 있는 플랫폼**\
**기간 : 2024.05 \~** \
**사용기술 :** ![](https://shields.io/badge/TypeScript-black?logo=typescript\&style=flat\&color=033963) ![](https://shields.io/badge/NextJS-black?logo=nextdotjs\&style=flat\&color=202020) ![](https://shields.io/badge/Tailwind_CSS-black?logo=tailwindcss\&style=flat\&color=033963)

<details>

<summary><strong>UX 개선</strong></summary>

‣ Skeleton 컴포넌트를 구현해 <mark style="background-color:orange;">Cumulative Layout Shift 를 최소화</mark>하였습니다

</details>

<details>

<summary><strong>DX 개선</strong></summary>

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

</details>

### *<mark style="background-color:orange;">✏️ Get-P WebSite</mark>*&#x20;

**소개 : 대학생 외주 매칭 플랫폼**\
**기간 :** 2024년 04월 \~\
**사용기술 :** ![](https://shields.io/badge/TypeScript-black?logo=typescript\&style=flat\&color=033963)![](https://shields.io/badge/ReactJS-black?logo=react\&style=flat\&color=0086CA)![](https://shields.io/badge/Redux_Toolkit-black?logo=redux\&style=flat\&color=7648BA)![](https://shields.io/badge/Redux_Persist-black?logo=redux\&style=flat\&color=7648BA)![](https://shields.io/badge/Vite_SSR-black?logo=vite\&style=flat\&color=512BD4)

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

<details>

<summary><strong>구현</strong></summary>

‣ Redux Persist 를 사용해 인증 / 인가 상태와 토큰을 저장하였습니다. Vite SSR 플러그인을 사용해 Server Side Rendering 중 Persist Storage 의 부재로인한 Hydration 에러를 해결하면서 React Server API 와 Server Side Rendering 의 동작원리를 습득하였습니다 (<https://github.com/Principes-Artis-Mechanicae/get-p-frontend/issues/18>)

‣ 회원가입 퍼널에서 <mark style="background-color:orange;">사용자로부터 입력받은 복잡한 상태를 Redux Thunk Action</mark> 을 사용해 처리했습니다 (<https://github.com/Principes-Artis-Mechanicae/get-p-frontend/blob/develop/src/store/thunk/auth.thunk.ts>)

‣ 기존 useInputValidation 커스텀 훅을 구현해 입력 검증을 진행하였습니다

</details>

<details>

<summary><strong>UI / UX 개선</strong></summary>

‣ Framer Motion 을 사용한 페이지 전환 애니메이션을 통해 UX 를 개선하였습니다

</details>

<details>

<summary><strong>DX 개선</strong></summary>

‣ StoryBook 을 사용하여 공통 컴포넌트에 대한 UI 테스팅을 진행하였습니다

‣ 구현 전, 프론트엔드 팀원들과 재사용성 측면에서 컴포넌트를 분류하고 분류한 컴포넌트에 대한 요구사항을 문서화하였습니다

‣ Jira , Confluence 를 이용한 애자일 기반의 프로젝트를 진행하며, 커뮤니케이션 능력을 향상시켰습니다

‣ Github Actions 와 Netlify 를 통해 베타 서버 배포를 자동화하였습니다

</details>

<details>

<summary><strong>성능개선</strong></summary>

‣ Lazy Loading / Suspense 를 통한 코드 스플리팅을 이용해 FCP / LCP 등 초기 렌더링 속도를 향상시켰습니다

‣ Vite SSR 플러그인을 통해 자체 서버사이드 렌더링을 적용시켰습니다

‣ Skeleton 컴포넌트를 구현해 <mark style="background-color:orange;">Cumulative Layout Shift 를 최소화</mark>하였습니다

‣ 토큰 만료시 Refresh 토큰을 사용해 토큰 재발급 시에 클라이언트에서 요청 전, JWT 를 Decode 를 하여 토큰이 만료되었는지 확인 후 토큰 재발급 요청을 진행시켜 <mark style="background-color:orange;">토큰 재발급에 필요한 네트워크 트래픽을 감소</mark>시켰습니다

</details>

### *<mark style="background-color:orange;">✏️ Stocodi</mark>*&#x20;

**소개 : 금융 / 경제 교육 플랫폼**\
**기간 :** 2023년 09월 \~ 2023년 12월\
**사용기술 :** ![](https://shields.io/badge/TypeScript-black?logo=typescript\&style=flat\&color=033963)![](https://shields.io/badge/ReactJS-black?logo=react\&style=flat\&color=0086CA)![](https://shields.io/badge/Redux_Toolkit-black?logo=redux\&style=flat\&color=7648BA)![](https://shields.io/badge/SCSS-black?logo=sass\&style=flat\&color=A9225C)![](https://shields.io/badge/CSS_Module-black?logo=cssmodules\&style=flat\&color=202020)![](https://shields.io/badge/Docker-black?logo=docker\&style=flat\&color=033963)

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

<details>

<summary><strong>구현</strong></summary>

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

‣ JWT 를 활용해 Access / Refresh 기반의 로그인 플로우를 구현하였습니다

‣ Mobile / Tablet 에 대한 Figma 디자인이 없음에도 Flex Grid 를 이용해 BreakPoint 를 기준으로 반응형 페이지로 구현하였습니다

‣ T-Syringe 를 활용해 API 호출과 실제 서비스를 추상화한 클래스를 구현, 의존성 주입 / 싱글톤 패턴 적용을 시도했습니다 (<https://github.com/Stocodi/stocodi-web-legacy/pull/114>)

‣ 금융역량테스트 페이지 구현시, 문항의 선택지에 이벤트 핸들러를 바인딩 하는 과정에서 발생한 문제를 해결하며 클로져 / 렉시컬 스코프에 대한 개념을 습득했습니다  (<https://github.com/Stocodi/stocodi-web-legacy/issues/40>)

</details>

<details>

<summary><strong>UI / UX 개선</strong></summary>

‣ 실 사용자로부터의 피드백을 통해 총 72개의 요구사항을 반영시켜 UI / UX 를 개선시켰습니다 (<https://github.com/Stocodi/stocodi-web-legacy/issues?q=is%3Aissue+is%3Aclosed>)

</details>

<details>

<summary><strong>DX 개선</strong></summary>

‣ ESLint / Prettier 를 이용해 코드 컨벤션을 통일시켰고, Github Actions 를 사용해 CI 파이프라인을 구축했습니다

‣ Github Actions 와 Docker 를 이용해 배포 자동화 파이프라인을 구축했습니다

‣ SCSS 의 MixIn / Include 등을 사용해 중복되는 271줄의 스타일시트를 96줄로 줄였습니다

‣ 프로젝트 규모가 커짐에 따라 중복되는 ClassName 을 방지하고자 BEM 을 도입하였고, CSS Modules 와 SCSS 를 도입하였습니다

‣ 기존에 분류되지 않았던 컴포넌트를 Atomic Design Pattern 을 사용해 재사용성을 높였습니다

‣ Atomic Design Pattern 의 컴포넌트 파편화를 줄이고자 컴포넌트의 기능을 기준으로 재분류 하여 개선된 디렉토리 구조를 설계하였습니다

</details>

<details>

<summary><strong>성능개선</strong></summary>

‣ 기존의 WebPack / JS 기반의 CRA 프로젝트를 EsBuild 기반의 <mark style="background-color:orange;">Vite / TS 로 마이그레이션</mark> 하여 빌드속도를 향상시켰습니다

‣ 스크롤에 반응해 애니메이션이 적용되는 애니메이션을 구현하는 도중 기존의 Scroll Event 기반에서 <mark style="background-color:orange;">Intersection Observer 를 사용해 성능을 개선</mark>시켰습니다

‣ <mark style="background-color:orange;">Lazy Loading / Suspense</mark> 를 통한 코드 스플리팅을 이용해 FCP / LCP 등 초기 렌더링 속도를 향상시켰습니다\
(Chrome 빠른 3G 기준 LightHouse 지표 45점 / <mark style="background-color:orange;">FCP 5.9s / LCP 5.9s -> 82점 / FCP 1.0s / LCP 1.5s</mark> 로 개선)

</details>

### *<mark style="background-color:orange;">✏️ UdongSari</mark>*&#x20;

**소개 : 아마추어 사진작가와 이용자를 연결해주는 플랫폼 (우리동네 사진작가 리스트)**\
**기간 :** 2023.09 \~\
사용기술 : ![](https://shields.io/badge/JavaScript-black?logo=javascript\&style=flat\&color=FF9A00)![](https://shields.io/badge/ReactJS-black?logo=react\&style=flat\&color=0086CA)![](https://shields.io/badge/Redux_Toolkit-black?logo=redux\&style=flat\&color=7648BA)![](https://shields.io/badge/SCSS-black?logo=sass\&style=flat\&color=A9225C)![](https://shields.io/badge/SocketIO-black?logo=socketdotio\&style=flat\&color=202020)

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

<details>

<summary><strong>구현</strong></summary>

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

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

</details>

### *<mark style="background-color:orange;">✏️ BrandAI</mark>*&#x20;

**소개 : 아마추어 사진작가와 이용자를 연결해주는 플랫폼 (우리동네 사진작가 리스트)**\
**기간 :** 2023.09 \~\
**사용기술** : ![](https://shields.io/badge/JavaScript-black?logo=javascript\&style=flat\&color=FF9A00)![](https://shields.io/badge/ReactJS-black?logo=react\&style=flat\&color=0086CA)![](https://shields.io/badge/Redux_Toolkit-black?logo=redux\&style=flat\&color=7648BA)![](https://shields.io/badge/SCSS-black?logo=sass\&style=flat\&color=A9225C)![](https://shields.io/badge/Express_JS-black?logo=express\&style=flat\&color=202020)![](https://shields.io/badge/Cloudflare-black?logo=cloudflare\&style=flat\&color=ECD53F)\
**팀원** : FrontEnd 2 + BackEnd 3\
**기여** : Figma UI Design (총 22화면 중 21화면 디자인) + Frontend Develop (95%)

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

<details>

<summary><strong>구현</strong></summary>

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

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

</details>

<details>

<summary><strong>UI / UX 개선</strong></summary>

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

</details>

### *<mark style="background-color:orange;">✏️ Alcoholic</mark>*&#x20;

**소개 : 한국 전통주 시장 부흥을 위한 전통주 MBTI 및 성향에 따른 술 추천 서비스**\
**기간 :** 2023.05\
**사용기술 :** ![](https://shields.io/badge/JavaScript-black?logo=javascript\&style=flat\&color=FF9A00)![](https://shields.io/badge/ReactJS-black?logo=react\&style=flat\&color=0086CA)

{% 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)

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