diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 00000000..13566b81 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,8 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ +# Datasource local storage ignored files +/dataSources/ +/dataSources.local.xml diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 00000000..07115cdf --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 00000000..7dec97e7 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/portfolio.iml b/.idea/portfolio.iml new file mode 100644 index 00000000..d6ebd480 --- /dev/null +++ b/.idea/portfolio.iml @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 00000000..35eb1ddf --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/README.md b/README.md index 30db947a..8b137891 100644 --- a/README.md +++ b/README.md @@ -1,70 +1 @@ -

-

Developer's Portfolio ✨

-

-Profolio는 개발자를 위한, 쉽고 빠르게 제작 할 수 있는 정적 포트폴리오 템플릿 입니다.
Github 페이지로 호스팅 됩니다.
웹 사이트는 DEMO에서 확인하실 수 있습니다. -
-
더 많은 템플릿은 portfolio-collection 저장소에서 보실 수 있습니다. -
-
- - - -
-
- -

- -## Overview ⭐️ - -- static website로 Github pages 활용한 웹 호스팅 가능 -- 개발자 맞춤형 포트폴리오 웹 페이지 -- 제작자 표기 시, 무료로 활용가능 - -## Prerequisites 🍪 - -- PC에 git이 설치되어 있어야하며, Github 계정이 있어야 합니다. -- HTML 문법을 몰라도 텍스트만 교체하여 활용 가능합니다. -- HTML 문법을 알면 레이아웃이나 디자인을 변경할 수 있습니다. -- CSS를 몰라도 제작 가능하지만, CSS에 친숙하다면 디자인도 자유롭게 변경할 수 있습니다. - -## Setup And Deployment 🔧 - -1. 내 프로젝트로 Fork합니다. -2. repository를 clone하여 로컬로 내려받습니다. - - ``` - git clone {저장소URL} - ``` - -3. 내용을 원하는대로 수정합니다. -4. github commit & push 합니다. - -```bash -git commit -m 'initial project' -git push - u origin master -``` - -6. github Settings에서 pages로 이동하여, Source를 main branch로 바꿔줍니다. -7. publish 되었다는 URL로 접속하여 확인합니다 (시간이 좀 걸리니, 5분정도 기다려주세요) - -## Documentation 📑 - -튜토리얼 문서는 [웹 포트폴리오 제작 튜토리얼](https://www.notion.so/cucus/85e3bec77d904f1fa282cec4756232c3)에서 확인해주세요. - -## Deploy History 🌳 - -2021-12-28 - -- 지킬 셋팅 제거 -- 커스텀 도메인 연결 제거 -- 데모 사이트 및 이미지 경로 변경 - -2021-04-22 - -- 전체 레이아웃 수정 -- header 사진 변경 - -2021-04-20 - -- 프로젝트 생성 diff --git a/css/style.css b/css/style.css index 331bf04f..0bac49e7 100644 --- a/css/style.css +++ b/css/style.css @@ -9641,6 +9641,56 @@ textarea.form-control { animation: loader-dash 1.5s ease-in-out infinite; stroke-linecap: round; } +/* Technical Challenge 스타일 */ +.challenge-badge { + display: inline-block; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + color: white; + padding: 5px 12px; + border-radius: 15px; + font-size: 0.85em; + font-weight: 600; + margin-bottom: 10px; +} + +.challenge-title { + color: #667eea; + font-weight: 700; + font-size: 1.1em; + margin-top: 15px; + margin-bottom: 10px; +} + +.challenge-section { + background: #f8f9fa; + padding: 15px; + border-left: 4px solid #667eea; + margin: 10px 0; + border-radius: 4px; +} + +.challenge-section h4 { + color: #667eea; + font-size: 1em; + font-weight: 600; + margin-bottom: 8px; +} + +.challenge-section p, +.challenge-section ul { + font-size: 0.95em; + line-height: 1.6; + margin-bottom: 10px; +} + +.challenge-section ul { + padding-left: 20px; +} + +.challenge-section li { + margin-bottom: 5px; +} + @-webkit-keyframes loader-rotate { 100% { -webkit-transform: rotate(360deg); diff --git a/images/ProfileView.jfif b/images/ProfileView.jfif new file mode 100644 index 00000000..edb5757a Binary files /dev/null and b/images/ProfileView.jfif differ diff --git a/images/about.jpg b/images/about.jpg deleted file mode 100644 index aacc77dd..00000000 Binary files a/images/about.jpg and /dev/null differ diff --git a/index.html b/index.html index 08af1253..bff3f17c 100644 --- a/index.html +++ b/index.html @@ -1,797 +1,562 @@ - - + - 프론트엔드 개발자 구민정 - - - - - - - - - - - - - - - - - - - + 풀스택 개발자 한재경 + + + + + + + + + + + + + - - - - -
-
-
-
-
-
- Hey! I am -

구민정

-

I'm a - -

-
-
-
-
- -
- -
- -
-
- -
-
-
-
-
-
-
-
-
-
-
-
-
-

About

-

About Me

-

커피와 노트북만 있다면, 언제 어디서나 즐겁게 일하는 6년차 개발자 정쿠입니다.

-
    -
  • Name: 구민정
    • -
  • Address: 성남시 분당구 정자동
    • -
  • Email: cookie00421@gmail.com
    • -
  • Phone: +82-10-1234-5678
    • -
-
-
-
-
-

- 0 - Project complete -

-

이력서 다운받기

-
-
-
-
-
-
- -
-
-
-
-
-
- 0 - 코딩한 일수 -
-
-
-
-
-
- 0 - Complete Projects -
-
-
-
-
-
- 0 - Happy Customers -
-
-
-
-
-
- 0 - Cups of coffee -
-
-
-
-
-
- - -
-
-
-
- -
-
-
-

Education

-
-
- -
-
- 2010-2015 -

컴퓨터 공학 & 전자 공학 복수 전공

- Handong Global Univercity -

전산 동아리 활동과 기숙사 생활을 통해, 함께 일하는 밥을 배웠습니다. Computer Science 기초 지식을 4년간 탄탄히 쌓아 빠르고 올바른 - 방향으로 성장할 수 있는 개발자가 되었습니다.

-
-
-
-
- -
-
- 2014-2015 -

Computer Processing Systems/Computer Software

- Cambridge University -

A small river named Duden flows by their place and supplies it with the necessary - regelialia. It is a paradisematic country, in which roasted parts of sentences fly - into your mouth.

-
-
-
-
- -
-
- 2014-2015 -

Diploma in Computer

- Cambridge University -

A small river named Duden flows by their place and supplies it with the necessary - regelialia. It is a paradisematic country, in which roasted parts of sentences fly - into your mouth.

-
-
-
- -
-

Work Experience

-
-
- -
-
- 2019.09-2021.04(1년 8개월) -

Full Stack Developer

- 주식회사 더라피스 -

동남아 스파 예약 서비스 Web 개발, 온라인 요가 수업 예약/결제 서비스 개발

- 기술 스택 -

ReactJS, Next.js,Typescript, Styled-components, AWS S3 static hosting

- 주요 업무 -
-
- React + typescript 기반 웹 서비스 개발/운영
-
- 디자인 시스템 도입을 위한 UI 컴포넌트 관리용 storybook 도입
-
- SEO를 위한 Next.js 도입
-
- Serverless 환경을 위한 s3 기반의 static hosting 구축
-
-

-
- -
-
-
- -
-
- 2014-2015 -

Web Designer

- Cambridge University -

A small river named Duden flows by their place and supplies it with the necessary - regelialia. It is a paradisematic country, in which roasted parts of sentences - fly - into your mouth.

-
-
-
-
- -
-
- 2014-2015 -

Web Marketing

- Cambridge University -

A small river named Duden flows by their place and supplies it with the necessary - regelialia. It is a paradisematic country, in which roasted parts of sentences - fly - into your mouth.

-
-
-
-
- -
-
- 2014-2015 -

Art & Creative Director

- Side Tech -

A small river named Duden flows by their place and supplies it with the necessary - regelialia. It is a paradisematic country, in which roasted parts of sentences - fly - into your mouth.

-
-
-
-
-

Skills

-
-
-
-

CSS

- - -
- - - - - - -
-
90%
-
-
- - - -
-
-
28%
Last week -
-
-
60%
Last month -
-
- -
-
- -
-
-

HTML

- - -
- - - - - - -
-
80%
-
-
- - - -
-
-
28%
Last week -
-
-
60%
Last month -
-
- -
-
- -
-
-

jQuery

- - -
- - - - - - -
-
75%
-
-
- - - -
-
-
28%
Last week -
-
-
60%
Last month -
-
- -
-
-
-
-
-
-

React

-
-
- 90% -
-
-
-
-
-
-

jQuery

-
-
- 85% -
-
-
-
-
-
-

HTML5

-
-
- 95% -
-
-
-
-
-
-

CSS3

-
-
- 90% -
-
-
-
-
-
-

WordPress

-
-
- 70% -
-
-
-
-
-
-

SEO

-
-
- 80% -
-
-
-
-
-
-
-

Projects

-
-
- -
-
- 2019.09-2020.08 -
-

웰리스 여행 상품 예약 플랫폼 개발

- -
- 주식회사 더라피스 -
기술 스택 : React, Typescript, Next.js, Styled-Component, - MobX -
-
주요 기능 : 회원 관리 및 SNS 로그인, 상품 리스트 확인, 상품 상세 정보 - 확인, 예약 관리, 결제
-

React

-
-
-
-
- -
-
- 2014-2015 -

Top 5 LeaderShip Exellence Winner

- Cambridge University -

A small river named Duden flows by their place and supplies it with the necessary - regelialia. It is a paradisematic country, in which roasted parts of sentences - fly - into your mouth.

-
-
-
-
- -
-
- 2014-2015 -

Top 4 Web Tester

- Cambridge University -

A small river named Duden flows by their place and supplies it with the necessary - regelialia. It is a paradisematic country, in which roasted parts of sentences - fly - into your mouth.

-
-
-
-
- -
-
- 2014-2015 -

Art & Creative Director

- Cambridge University -

A small river named Duden flows by their place and supplies it with the necessary - regelialia. It is a paradisematic country, in which roasted parts of sentences - fly - into your mouth.

-
-
-
-
-
-
-
- - -
-
-
-
-

Projects

-

Side Projects

-

꾸준히 사이드 프로젝트를 진행하며, 다양한 분야의 기술 스택을 경험해왔습니다.

-
-
-
-
-
-
-
-

QPI - 소개팅 서비스 소개 페이지 개발

- UI/UX 디자인부터 웹 호스팅까지 전체 영역을 담당하였습니다. -
-
-
-
-
-
-
-

Branding & Illustration Design

- Web Design -
-
-
- -
-
-
-
-

Branding & Illustration Design

- Web Design -
-
-
-
-
-
-
-

Branding & Illustration Design

- Web Design -
-
-
-
-
-
-
-

Branding & Illustration Design

- Web Design -
-
-
-
-
-
-
-

Branding & Illustration Design

- Web Design -
-
-
-
-
-
- -
-
-
-
-

Blog

-

My Blog

-

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia

-
-
-
-
-
- - -
-

Why Lead Generation is Key for Business Growth -

-
-

- Sept. 12, 2019 - Admin - 3 -

-
-

A small river named Duden flows by their place and supplies it with the necessary - regelialia.

-
-
-
-
-
- - -
-

Why Lead Generation is Key for Business Growth -

-
-

- Sept. 12, 2019 - Admin - 3 -

-
-

A small river named Duden flows by their place and supplies it with the necessary - regelialia.

-
-
-
-
-
- - -
-

Why Lead Generation is Key for Business Growth -

-
-

- Sept. 12, 2019 - Admin - 3 -

-
-

A small river named Duden flows by their place and supplies it with the necessary - regelialia.

-
-
-
-
-
-
- -
-
-
-
-
-

함께할 회사를 찾는 중 입니다.

-

A small river named Duden flows by their place and supplies it with the necessary regelialia.

-

연락주세요.

-
-
-
-
- -
-
-
-
-

Contact

-

Contact Me

-

회사와 함께 성장하는 개발자가 되겠습니다. 연락주세요.

-
-
- -
-
-
-
- -
-
-

Address

-

성남시 분당구 정자동

-
-
-
-
-
-
- -
-
-

Contact Number

-

+ 010 4277 1234

-
-
-
-
-
-
- -
-
-

Email Address

-

cookie00421@gmail.com

-
-
-
-
-
-
- -
-
-

Website

-

yoursite.com

-
-
-
-
- -
-
- - - - - - - -
- - -
- - - - - - - - - - - - - - - - - + +
+
+
+
+
+
+ Hey! I am +

한재경

+

I'm a + +

+
+
+
+
+ +
+ +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

About

+

About Me

+

더 편한 세상을 만들고 싶은 개발자 한재경입니다. 레거시 시스템의 현대화와 사용자 경험 개선에 관심이 많으며, eGovFramework 기반의 전통적인 웹 개발부터 Next.js와 Spring Boot를 활용한 최신 아키텍처까지 다양한 환경에서 실무 경험을 쌓아왔습니다.

+
    +
  • Name: 한재경
    • +
  • Date of birth: 1997.04.30
    • +
  • Address: 경기도 부천시 원미구
    • +
  • Email: juliet61008@gmail.com
    • +
  • Phone: +82-10-3551-0430
    • +
+
+
+
+
+

+ 4 + 년차 개발자 +

+
+
+
+
+
+
+
+
+
+
+
+
+ 1545 + 코딩한 일수 +
+
+
+
+
+
+
+
+
+
+ +
+
+
+

Education

+
+
+ +
+
+ 2016.03 - 2020.02 +

의료정보과 졸업

+ 안산대학교 +

GPA: 3.54/4.5 학점으로 졸업하였으며, 프로그래밍 기초, 정보 시스템 관리 등을 학습하며 개발자로서의 기초를 다졌습니다.

+
+
+
+
+ +
+
+ 2020 - 2021 +

Java 풀스택 개발자 양성과정 수료

+ 구트아카데미 +

Java 기반 웹 개발 과정을 이수하며 Spring Framework, JSP, Servlet, Oracle 등 백엔드 개발의 기초를 다졌습니다. 실무 프로젝트를 통해 개발 프로세스 전반을 경험했습니다.

+
+
+
+
+

Work Experience

+
+
+ +
+
+ 2024.04 - 현재 (재직중) +

Full Stack Developer

+ 라드씨엔에스 +

CJ CGV 차세대 시스템 구축 프로젝트
+ 영화관 예매 시스템의 차세대 전환 프로젝트에 참여하여 인증 시스템과 사용자 페이지를 담당했습니다.

+ 주요 기술 스택 +

Spring Boot, Next.js, TypeScript, React Query, MyBatis, Oracle

+ 주요 업무 및 성과 +
+
• 인증 시스템: 일반/간편/생체/SSO/자동 로그인 등 다양한 인증 방식 구현
+
• 간편 로그인 리팩토링: 네이버/애플/카카오 간편 로그인 설정 전체 리팩토링으로 코드 일관성 개선
+
• 본인인증 커스텀 훅: PC(iframe popup), Mobile Web/App(redirect) 환경을 고려한 useNiceAuth 훅 개발
+
• Next.js 서버 컴포넌트 최적화: accessToken 갱신 로직 추가로 사용자 인증 경험 개선
+
• 쿼리 성능 개선: 프리퀀시 스탬프 계산 쿼리 최적화로 응답시간 30초~1분에서 3초 이내로 단축
+
• 트랜잭션 안정성: 결제 취소 시 수수료 결제와 환불 프로세스 간 정합성 보장 로직 구현
+
• 공통 컴포넌트: 결제 취소, 좋아요 등 재사용 가능한 컴포넌트 및 API 설계/구현
+
• 사용자 기능: 예약/결제 내역, 스마트 영수증, 내가 본 영화, 특별관 상세, 극장별 관람 가격, OMS 기능 개발
+
+
+
+
+
+ +
+
+ 2021.11 - 2024.02 (2년 4개월) +

Full Stack Developer

+ 한경정보기술 +

공공구매종합정보망 고도화 및 유지보수
+ 공공기관의 구매 시스템을 유지보수하고 고도화하며 결제/알림 시스템을 설계하고 구현했습니다.

+ 주요 기술 스택 +

Spring Boot, eGovFramework, MyBatis, Oracle, JSP

+ 주요 업무 및 성과 +
+
• 결제 시스템 리모델링: 직접생산 증명서 수수료 수납(KCP API) 및 환불 시스템 전면 개편
+
• 현금영수증 시스템: KCP API 연동을 통한 현금영수증 발행 및 취소 기능 개발
+
• 카카오톡 알림 시스템: 비즈엠 API를 활용한 카카오톡 발송/예약/예약취소 아키텍처 설계부터 E2E 개발
+
• 증명서 신청 시스템: 새로운 증명서 신청 프로세스 추가 구현
+
• 레거시 시스템 유지보수: eGovFramework 기반 시스템의 안정성 및 사용자 편의성 개선
+
+
+
+
+
+

Skills

+
+
+
+

Spring Boot

+
+
+
+
+
+
+
+
+

Next.js

+
+
+
+
+
+
+
+
+

TypeScript

+
+
+
+
+
+
+
+
+

React Query

+
+
+
+
+
+
+
+
+

MyBatis

+
+
+
+
+
+
+
+
+

Oracle & PostgreSQL

+
+
+
+
+
+
+
+
+

React

+
+
+
+
+
+
+
+
+

eGovFramework

+
+
+
+
+
+
+
+
+
+

Main Projects

+
+
+ +
+
+ 2024.04 - 현재 +
+

CJ CGV 차세대 시스템 구축

+
+ 라드씨엔에스 +
기술 스택: Spring Boot, Next.js, TypeScript, React Query, MyBatis, Oracle
+
주요 기능: 인증 시스템, 예약/결제, 사용자 페이지, 결제 시스템
+

영화관 예매 시스템의 차세대 전환 프로젝트로, 다양한 인증 방식 구현 및 쿼리 최적화를 통해 사용자 경험을 크게 개선했습니다. 특히 프리퀀시 스탬프 계산 쿼리를 최적화하여 응답시간을 30초~1분에서 3초 이내로 단축시켰습니다.

+
+
+
+
+ +
+
+ 2021.11 - 2024.02 +

공공구매종합정보망 고도화

+ 한경정보기술 +
기술 스택: Spring Boot, eGovFramework, MyBatis, Oracle, JSP
+
주요 기능: 결제 시스템, 알림 시스템, 증명서 관리
+

공공기관의 구매 시스템 유지보수 및 고도화 프로젝트로, KCP API를 활용한 결제/환불 시스템과 비즈엠 API를 활용한 카카오톡 알림 시스템을 아키텍처 설계부터 구현까지 E2E로 개발했습니다.

+
+
+
+
+

Technical Challenges

+ + +
+
+ +
+
+ CJ CGV 프로젝트 +

Next.js SSR/CSR 환경에서의 JWT 토큰 자동 갱신

+ +
+

문제 상황

+

Next.js의 서버 컴포넌트(SSR)와 클라이언트 컴포넌트(CSR) 환경에서 JWT 토큰 자동 갱신 로직을 구현하는 과정에서 어려움을 겪었습니다.

+
    +
  • 클라이언트에서 401 에러 시 토큰 갱신은 구현했지만, 서버 컴포넌트에서 쿠키를 직접 수정할 수 없는 문제
    • +
  • 서버 컴포넌트는 클라이언트의 커스텀 fetch 함수를 사용할 수 없어 별도 갱신 로직 필요
    • +
  • 페이지 이동 시 만료된 토큰으로 인한 인증 에러 발생
    • +
+
+ +
+

해결 방법

+

1) 클라이언트 갱신 로직

+
    +
  • 커스텀 fetch 함수로 401 에러 감지 및 자동 토큰 갱신 API 호출
    • +
  • 새 토큰을 HttpOnly Cookie에 이중 암호화하여 저장
    • +
  • Bearer 헤더에 새 토큰을 담아 원래 요청 순차적으로 재실행
    • +
+

2) 서버 컴포넌트 갱신 로직

+
    +
  • middleware.ts 활용: 모든 페이지 진입 시 쿠키에서 토큰 추출 및 검증
    • +
  • 토큰 만료 시간 체크(exp claim 확인)
    • +
  • 만료 임박(5분 이내) 또는 만료 시 자동 갱신 API 호출
    • +
  • NextResponse.next()의 cookies.set()으로 새 토큰 쿠키 업데이트
    • +
+
+ +
+

결과

+
    +
  • 클라이언트/서버 컴포넌트 모두에서 자동 토큰 갱신 구현
    • +
  • 사용자가 갱신 과정을 인지하지 못하는 seamless한 UX 제공
    • +
  • 토큰 만료로 인한 인증 에러 방지 및 안정적인 인증 상태 유지
    • +
+
+
+
+ + +
+
+ +
+
+ CJ CGV 프로젝트 +

프리퀀시 스탬프 쿼리 성능 최적화 (30초→3초)

+ +
+

문제 상황

+

프리퀀시 스탬프 계산 쿼리의 응답 시간이 30초~1분까지 소요되어 사용자 경험에 심각한 문제가 발생했습니다.

+
    +
  • 복잡한 JOIN과 서브쿼리로 인한 성능 저하
    • +
  • 대량의 데이터 처리 시 응답 지연
    • +
  • 실시간 조회가 필요한 기능에서 사용 불가능한 수준
    • +
+
+ +
+

해결 방법

+
    +
  • 메인 테이블 구조 변경 및 인덱스 재설계
    • +
  • 불필요한 JOIN 조건 제거 및 최적화
    • +
  • 실행 계획(Execution Plan) 분석을 통한 병목 지점 파악
    • +
  • 서브쿼리를 CTE(Common Table Expression)로 변환
    • +
+
+ +
+

결과

+
    +
  • 쿼리 응답 시간 30초~1분 → 3초 이내로 단축 (90% 개선)
    • +
  • 실시간 조회 기능 정상 작동
    • +
  • 사용자 만족도 크게 향상
    • +
+
+
+
+ + +
+
+ +
+
+ jChat 사이드 프로젝트 +

메시지 ID 생성 성능 최적화 (50ms→1ms)

+ +
+

문제 상황

+

메시지 전송 시 DB Sequence 조회로 인한 지연이 발생하여 사용자 체감 속도가 느렸습니다.

+
    +
  • 메시지 전송 → DB Sequence 조회(50-100ms) → 저장 → 응답
    • +
  • 실시간 채팅 특성상 즉각적인 피드백 필요
    • +
  • 메시지 생성 때마다 DB 조회로 인한 부하
    • +
+
+ +
+

해결 방법

+

1) 낙관적 업데이트 (Next.js)

+
    +
  • 메시지 전송 즉시 임시 ID(UUID)로 UI에 먼저 표시
    • +
  • React Query의 Optimistic Update 활용
    • +
  • 서버 응답 받으면 임시 ID → 실제 ID로 교체
    • +
+

2) Sequence 사전 조회 시스템 (Spring Boot)

+
    +
  • 메모리에 Sequence를 미리 조회해서 Queue에 보관
    • +
  • ConcurrentLinkedQueue로 Thread-Safe 구현
    • +
  • Queue 크기 20개 미만 시 비동기로 50개 조회, 0개 시 동기 조회
    • +
  • AtomicBoolean으로 조회 중복 방지
    • +
+
+ +
+

결과

+
    +
  • 메시지 ID 생성 시간 50ms → 1ms 미만으로 단축
    • +
  • 낙관적 업데이트로 사용자 체감 지연 완전 제거
    • +
+
+
+
+
+
+
+
+
+
+
+
+
+
+

함께 성장할 회사를 찾는 중입니다

+

더 편한 세상을 만들고 싶은 개발자 한재경입니다. 사용자 경험을 최우선으로 생각하며, 유지보수 가능하고 확장 가능한 시스템을 만들기 위해 노력합니다.

+

연락주세요

+
+
+
+
+
+
+
+
+

Contact

+

Contact Me

+

새로운 기회와 협업을 환영합니다. 언제든 연락주세요!

+
+
+
+
+
+
+ +
+
+

Address

+

경기도 부천시 원미구

+
+
+
+
+
+
+ +
+
+

Contact Number

+

010-3551-0430

+
+
+
+
+
+
+ +
+
+

Email Address

+

juliet61008@gmail.com

+
+
+
+
+
+
+ +
+
+

GitHub

+

github.com/juliet61008

+
+
+
+
+
+
+ + +
+ + +
+ + + + + + + + + + + + + + - - + \ No newline at end of file diff --git a/js/main.js b/js/main.js index 838e3176..83df38eb 100644 --- a/js/main.js +++ b/js/main.js @@ -193,6 +193,18 @@ }, 7000 ); }); + + $('.yearNumber').each(function(){ + var $this = $(this), + num = $this.data('number'); + console.log(num); + $this.animateNumber( + { + number: num, + numberStep: comma_separator_number_step + }, 2000 + ); + }); } diff --git a/js/test.js b/js/test.js new file mode 100644 index 00000000..b0653a7a --- /dev/null +++ b/js/test.js @@ -0,0 +1,11 @@ +const getDaysSinceCoding = () => { + const startDate = new Date('2021-11-01'); + const today = new Date(); + const diffTime = today - startDate; + return Math.floor(diffTime / (1000 * 60 * 60 * 24)); +} + +// 코딩한 일수 적용 +$('#codeDate').attr('data-number', getDaysSinceCoding()); + +