About

안녕하세요, 열정적인 개발자입니다 👋

저는 개발을 통해 창조하고 배우는 즐거움을 누리며 살아가는 열정적인 개발자입니다.

🚀 소개

“성장과 혁신을 추구하는 개발자”라는 마음가짐으로 매일 발전하는 프론트엔드 개발자입니다. 2년이 넘는 실무 경험을 통해 기술적 도전을 즐기고, 복잡한 과제를 해결하는 과정에서 성취감을 찾았습니다.

제 커리어는 Solidity를 전문으로 하는 블록체인 개발자로 시작되었으며, 이후 프론트엔드 개발로 역량을 확장했습니다. 메타클럽 앱웹 애플리케이션의 유지보수를 담당하며 Nuxt.js에서 React로의 리팩토링을 성공적으로 이끌었고, SSR에서 CSR 전환을 통해 비용 절감을 실현했습니다. 점진적 개선을 위한 모노레포 아키텍처를 구성하고, 라이센스 최적화를 위해 GSAP에서 Motion.js로의 전환도 수행했습니다.

기술적으로는 세탁기 블루투스 송신 관련 오류를 체계적으로 문서화하고, Sentry를 도입하여 실시간 모니터링 시스템을 구축함으로써 사용자 경험을 개선하고 이슈 발견 시간을 단축했습니다. 현재는 Vue와 React 생태계를 깊이 탐구하며, 새로운 기술과 혁신적인 프로젝트를 통해 끊임없이 성장하고 있습니다.

협업 과정에서의 효율성을 소통과 체계적인 기록으로 향상시키는 것을 중요시합니다. 특히 복잡한 업무 상황에서 명확한 문서화를 통해 팀 전체의 효율을 높이는 데 기여했습니다. 대규모 리팩토링 과정에서 팀 간 원활한 의사소통을 위해 주간 기술 공유 세션을 제안하고 진행했으며, 개발 과정에서 발견된 반복적인 케이스들을 문서화하여 지식 공유 시스템을 구축했습니다. 또한 디자이너-개발자 간 협업 효율화를 위해 스토리북을 도입하여 컴포넌트 시각화 및 공통 언어 확립에 기여했습니다. 이러한 접근 방식은 프로젝트 일정 준수와 팀 협업 문화 개선에 실질적인 성과를 가져왔습니다.

💻 기술 스택

프론트엔드

React
Vue

백엔드 & 데이터베이스

Node.js
Prisma
Sequelize
MySQL
MariaDB

블록체인 & 시스템

Solidity
Rust

📋 경력 및 프로젝트

2022-09 ~ 현재

프론트엔드 개발자

  • Nuxt.js에서 React.js CSR로 프로젝트 마이그레이션 성공적 수행
  • 효율적인 코드 관리를 위한 모노레포 아키텍처 구성
  • 애니메이션 라이브러리를 GSAP에서 Motion.js로 마이그레이션하여 성능 최적화
  • 세탁 블루미터 서비스에 Sentry 모듈 도입으로 실시간 에러 추적 및 사용자 경험 개선
React TypeScript Motion.js Sentry
2022-12

Delica NFT 민팅 프로젝트

블록체인 기반 NFT 민팅 프로젝트로, 사용자 친화적인 인터페이스 구현

Solidity Web3.js React
2022-08

Bellygom NFT 민팅 프로젝트

인기 캐릭터 IP를 활용한 NFT 민팅 플랫폼 개발

Solidity Ethereum Smart Contract
2022-06 ~ 2022-09

블록체인 개발자 (Solidity)

블록체인 기술과 스마트 컨트랙트 개발에 집중, 기술적 기반 확립

Solidity Web3 DApp

🔍 포트폴리오

Blog

개인 블로그

개발 여정과 기술적 통찰을 공유하는 공간 (2024)
GitHub

GitHub 프로필

실제 프로젝트 코드와 오픈소스 기여 활동을 확인할 수 있는 공간입니다. React, TypeScript, 블록체인 관련 작업물들을 포함하고 있습니다.

📬 연락처

Gmail Instagram

📚 공부 노트 & 기술 블로그

알고리즘

AWS

[AWS]

  1. [AWS] 떠먹여주는 s3 buckets 만들기
  2. [AWS] s3 이미지,파일 덮어쓰기시 변경안됨
  3. [AWS] Bitbucket pipeline / aws s3 Deploy
  4. [AWS] CSR / SSR infura 구성도 흐름도 파악해보고 트렉픽 증가시 어떻게 처리할까?
  5. [AWS] Route 53 파악해보고 트렉픽 증가시 어떻게 처리할까?

데이터베이스

[DB]

  1. [DB] SQL 종류별 비교및 장단점
  2. [DB] SQL vs NoSQL: 게임으로 이해하기!

JavaScript

[JavaScript]

기초

  1. [JS] Js기초
  2. [JS] Js기초 변수
  3. [JS] Js기초 자료형
  4. [JS] Js기초 형변환
  5. [JS] Js기초 연산자
  6. [JS] Js기초 반복문
  7. [JS] Js기초 switch
  8. [JS] Js기초 function
  9. [JS] Js기초 객체
  10. [JS] Js기초 배열

중급

  1. [JS] Js중급 호이스팅(Hoisting)과 TDZ(Temporal Dead Zone)
  2. [JS] Js중급 생성자함수
  3. [JS] 객체 메소드(Object methods), 계산된 프로퍼티(Computed property)
  4. [JS] 심볼(Symbol)
  5. [JS] WeakMap WeakSet
  6. [JS] 숫자, 수학 method (Number, Math)
  7. [JS] 문자열 메소드(String methods)
  8. [JS] 배열 메소드(Array methods)
  9. [JS] 구조 분해 할당 (Destructuring assignment)
  10. [JS] 매개변수 리스트와 전개 문법(Rest parameters and spread syntax)
  11. [JS] 클로저(Closure)
  12. [JS] setTimeout / setInterval
  13. [JS] call / apply / bind
  14. [JS] 상속, 프로토타입(Prototype)
  15. [JS] 클래스(Class)
  16. [JS] 클로미스(Promise)
  17. [JS] 비동기 처리(Async/Await)
  18. [JS] Generator
  19. [JS] 메모리 릭(Memory Leak)

React

[React]

  1. [React] vite React설치
  2. Project initial setting
  3. Hooks && Library
    1. [React] Javascript 파일을 Typescript Import해보자
    2. [React] react-router-dom 알아보고 사용하자
    3. [React] child 컴포넌트에서 함수호출하기
    4. [React] useCallback
    5. [React] framer-motion 알아보고 사용하자
    6. [React] Context API
    7. [React] react lazy 지연로딩 예제
    8. [React] react에서 캐싱처리를 위한 react queryd와 indexDB 비교분석
    9. [React] 스타일 라이브러리 styled-components stitches 비교
  4. [React] 프론트 에러추적 도구 Sentry 사용해보기
  5. [React] React 19 주요 변경점
  6. [React] DOM이란 무엇이고? 가상 DOM이란 무엇인가?
  7. [React] preact 알아보기

Rust

[Rust]

  1. [Rust] Rust 설치
  2. [Rust] Hello Cargo
  3. [Rust] VSCode 설정
  4. [Rust] Rust 공부 시작
  5. [Rust] Rust 기초
  6. [Rust] Rust 제어문
  7. [Rust] Rust 자료형
  8. [Rust] Rust 제네릭
  9. [Rust] Rust 소유권, 대여, 데이터
  10. [Rust] study Text
  11. [Rust] Rust 객체지향 프로그래밍
  12. [Rust] Rust 스마트 포인터
  13. [Rust] Rust 프로젝트 구성 및 구조

개발 일반

[DEVELOP]

  1. [DEVELOP] DDD, TDD, BDD
  2. [DEVELOP] 개인정보 보호 웹사이트 구축을 위한
  3. [DEVELOP] 예제로 이해하는 웹 접근성 (accessibility)
  4. [DEVELOP] 예제로 보는 이미지 사용법 (Images)
  5. [DEVELOP] 예제로 보는 반응형 디자인 사용법 (Responsive Design)
  6. [DEVELOP] PWA 이해하기 (Progressive Web App)
  7. [DEVELOP] 개발 프로세스 Agile / Waterfall 이란?
  8. [DEVELOP] 주니어 개발자의 역습
  9. [DEVELOP] MCP(Model Context Protocol)
  10. [DEVELOP] MCP claude 적용하고 사용해보기

프로젝트 관리

[Project Management]

  1. [Npm] License
  2. [Npm] npm vs yarn vs pnpm Package Manager 비교
  3. [Npm] Npm package version Management
  4. [Npm] Npm package module 만들기

블로그

[Blog]

  1. [Blog] ga4 Analytics Setting 방법
  2. [Blog] 깃허브 댓글 utterances 사용법
  3. [Blog] Google AdsensePermalink
  4. [Blog] Kakao Adfit
  5. [Blog] git_blog 검색엔진 세팅 등록(구글/네이버/다음)
  6. [Blog] git_blog Using multiple accounts
  7. [Blog] google indexing api 자동색인 처리해보자
  8. [Blog] 깃허브 댓글 giscus 사용법

Hello, I’m a Passionate Developer 👋

I’m a passionate developer who thrives on the joy of creating and learning through development.

🚀 Introduction

I’m a frontend developer who thrives on growth and innovation, constantly evolving my skills each day. With over two years of professional experience, I find fulfillment in embracing technical challenges and solving complex tasks.

My career began as a blockchain developer specializing in Solidity, and I’ve since expanded my expertise into frontend development. While maintaining the MetaClub web application, I successfully led the migration from Nuxt.js to React, implemented a transition from SSR to CSR that reduced operational costs, established a monorepo architecture for incremental improvements, and optimized licensing by transitioning from GSAP to Motion.js.

On the technical side, I systematically documented Bluetooth transmission anomalies in laundry systems and implemented Sentry to create real-time monitoring capabilities, enhancing user experience and reducing issue detection time. Currently, I’m deeply exploring the Vue and React ecosystems while continuously growing through innovative projects and emerging technologies.

I value enhancing team collaboration through effective communication and systematic documentation. In complex work environments, I’ve contributed to team efficiency through clear documentation. During large-scale refactoring, I initiated weekly technical knowledge-sharing sessions to facilitate seamless team communication, documented recurring development cases to build a knowledge sharing system, and introduced Storybook to improve designer-developer collaboration through component visualization and establishing common terminology. These approaches have delivered tangible results in meeting project timelines and enhancing collaborative team culture.

💻 Tech Stack

Frontend

React
Vue

Backend & Database

Node.js
Prisma
Sequelize
MySQL
MariaDB

Blockchain & Systems

Solidity
Rust

📋 Experience & Projects

2022-09 ~ Present

Frontend Developer

  • Successfully migrated project from Nuxt.js to React.js CSR
  • Configured monorepo architecture for efficient code management
  • Optimized performance by migrating animation libraries from GSAP to Motion.js
  • Improved user experience by implementing Sentry for real-time error tracking in laundry Bluemeter service
React TypeScript Motion.js Sentry
2022-12

Delica NFT Minting Project

Blockchain-based NFT minting project with user-friendly interface implementation

Solidity Web3.js React
2022-08

Bellygom NFT Minting Project

Developed NFT minting platform utilizing popular character IP

Solidity Ethereum Smart Contract
2022-06 ~ 2022-09

Blockchain Developer (Solidity)

Focused on blockchain technology and smart contract development, establishing technical foundation

Solidity Web3 DApp

🔍 Portfolio

Blog

Personal Blog

A space to share my development journey and technical insights (2024)
GitHub

GitHub Profile

A space where you can check my actual project code and open source contributions. Includes work related to React, TypeScript, and blockchain.

📬 Contact

Gmail Instagram

📚 Study Notes & Tech Blog

Algorithms

AWS

[AWS]

  1. [AWS] 떠먹여주는 s3 buckets 만들기
  2. [AWS] s3 이미지,파일 덮어쓰기시 변경안됨
  3. [AWS] Bitbucket pipeline / aws s3 Deploy
  4. [AWS] CSR / SSR infura 구성도 흐름도 파악해보고 트렉픽 증가시 어떻게 처리할까?
  5. [AWS] Route 53 파악해보고 트렉픽 증가시 어떻게 처리할까?

Database

[DB]

  1. [DB] SQL 종류별 비교및 장단점
  2. [DB] SQL vs NoSQL: 게임으로 이해하기!

JavaScript

[JavaScript]

기초

  1. [JS] Js기초
  2. [JS] Js기초 변수
  3. [JS] Js기초 자료형
  4. [JS] Js기초 형변환
  5. [JS] Js기초 연산자
  6. [JS] Js기초 반복문
  7. [JS] Js기초 switch
  8. [JS] Js기초 function
  9. [JS] Js기초 객체
  10. [JS] Js기초 배열

중급

  1. [JS] Js중급 호이스팅(Hoisting)과 TDZ(Temporal Dead Zone)
  2. [JS] Js중급 생성자함수
  3. [JS] 객체 메소드(Object methods), 계산된 프로퍼티(Computed property)
  4. [JS] 심볼(Symbol)
  5. [JS] WeakMap WeakSet
  6. [JS] 숫자, 수학 method (Number, Math)
  7. [JS] 문자열 메소드(String methods)
  8. [JS] 배열 메소드(Array methods)
  9. [JS] 구조 분해 할당 (Destructuring assignment)
  10. [JS] 매개변수 리스트와 전개 문법(Rest parameters and spread syntax)
  11. [JS] 클로저(Closure)
  12. [JS] setTimeout / setInterval
  13. [JS] call / apply / bind
  14. [JS] 상속, 프로토타입(Prototype)
  15. [JS] 클래스(Class)
  16. [JS] 클로미스(Promise)
  17. [JS] 비동기 처리(Async/Await)
  18. [JS] Generator
  19. [JS] 메모리 릭(Memory Leak)

React

[React]

  1. [React] vite React설치
  2. Project initial setting
  3. Hooks && Library
    1. [React] Javascript 파일을 Typescript Import해보자
    2. [React] react-router-dom 알아보고 사용하자
    3. [React] child 컴포넌트에서 함수호출하기
    4. [React] useCallback
    5. [React] framer-motion 알아보고 사용하자
    6. [React] Context API
    7. [React] react lazy 지연로딩 예제
    8. [React] react에서 캐싱처리를 위한 react queryd와 indexDB 비교분석
    9. [React] 스타일 라이브러리 styled-components stitches 비교
  4. [React] 프론트 에러추적 도구 Sentry 사용해보기
  5. [React] React 19 주요 변경점
  6. [React] DOM이란 무엇이고? 가상 DOM이란 무엇인가?
  7. [React] preact 알아보기

Rust

[Rust]

  1. [Rust] Rust 설치
  2. [Rust] Hello Cargo
  3. [Rust] VSCode 설정
  4. [Rust] Rust 공부 시작
  5. [Rust] Rust 기초
  6. [Rust] Rust 제어문
  7. [Rust] Rust 자료형
  8. [Rust] Rust 제네릭
  9. [Rust] Rust 소유권, 대여, 데이터
  10. [Rust] study Text
  11. [Rust] Rust 객체지향 프로그래밍
  12. [Rust] Rust 스마트 포인터
  13. [Rust] Rust 프로젝트 구성 및 구조

General Development

[DEVELOP]

  1. [DEVELOP] DDD, TDD, BDD
  2. [DEVELOP] 개인정보 보호 웹사이트 구축을 위한
  3. [DEVELOP] 예제로 이해하는 웹 접근성 (accessibility)
  4. [DEVELOP] 예제로 보는 이미지 사용법 (Images)
  5. [DEVELOP] 예제로 보는 반응형 디자인 사용법 (Responsive Design)
  6. [DEVELOP] PWA 이해하기 (Progressive Web App)
  7. [DEVELOP] 개발 프로세스 Agile / Waterfall 이란?
  8. [DEVELOP] 주니어 개발자의 역습
  9. [DEVELOP] MCP(Model Context Protocol)
  10. [DEVELOP] MCP claude 적용하고 사용해보기

Project Management

[Project Management]

  1. [Npm] License
  2. [Npm] npm vs yarn vs pnpm Package Manager 비교
  3. [Npm] Npm package version Management
  4. [Npm] Npm package module 만들기

Blog

[Blog]

  1. [Blog] ga4 Analytics Setting 방법
  2. [Blog] 깃허브 댓글 utterances 사용법
  3. [Blog] Google AdsensePermalink
  4. [Blog] Kakao Adfit
  5. [Blog] git_blog 검색엔진 세팅 등록(구글/네이버/다음)
  6. [Blog] git_blog Using multiple accounts
  7. [Blog] google indexing api 자동색인 처리해보자
  8. [Blog] 깃허브 댓글 giscus 사용법
FEATURED TAGS
git 알고리즘 algorithm js 기초 js 기초 문법 js 문법 자료구조 Data Structure Graphs React 그래프 러스트 rust 집합 Sets front 수학 정렬 Math Sorting 간단예제 문자열 Strings github AWS 이벤트 버블링 이벤트 캡처링 탐색 LLM MCP Searches 컴파일러 트리 AI Cloud Front Cursor MCP 사용법 bubbling capturing s3 개발자도구 광고 구글 자동색인 깃허브 광고 라이브러리 러스트 설치 리엑트 버킷 비교 사이트맵 아마존 예제 웹 접근성 이미지 업로드 최장 공통 부분수열 캐시 텍스트 프레임워크 AI통합 API Adsense Claude Compiler SQL SWC Speedy Web Compiler Trees js 변수 js 생성자함수 npm nuxt pipeline project management robots rust 구축 rust setting rust setup text utterances
ABOUT ME

어떤거를 해야될지 몰라!
블로그 글쓰면서 공부
같이 공부하실분!(급구)

FRIENDS