💲토스 웹페이지 클론 코딩

🔁개요

• 간결하면서도 좋은 UI를 가지고 있는 사이트
• 직관적이면서 깔끔한 디자인

기간

• [HTML & CSS] - 2025.10.17 ~ 2025.11.3
  
• [JAVASCRIPT] - 2026.1.8 ~ 2026.1.13

⚒️기술 스택

📂커밋 컨벤션 가이드

• feat: 새로운 기능 추가
• fix: 버그 수정
• docs: 문서 수정
• style: 코드 스타일 변경 (코드 포매팅, 세미콜론 누락 등)
• design: 사용자 UI 디자인 변경 (CSS 등)
• perf: 성능 개선
• chore: 자잘한 수정이나 빌드 업데이트
• rename: 파일 혹은 폴더명을 수정만 한 경우
• remove: 파일을 삭제만 한 경우
• test: 테스트 코드, 리팩토링 (Test Code)
• refactor: 리팩토링 (Production Code)
• build: 빌드 파일 수정
• ci: CI 설정 파일 수정

🚩목표

• 프론트엔드 이해와 리엑트, 노드, 데이터베이스의 확장의 발돋움

결과물 및 느낀점

사이트 : https://kdobi.github.io/TossWeb_CloneCoding/

gif 변환파일이라 느리고 화질 안좋음.

나름 변수명을 신경쓰며 작업을 했음에도 획일화 되지 않은 부분들이 생겼고, 유지보수를 해야했다면 상당한 대가를 치루어야 할 코드같다.

또한 코드의 사용에서도 position, display에 대한 부분과 부모 자식요소들의 상호작용에 대해서 이해도가 낮음을 느꼈다.

다시금 작업을 할 때에는 좀 더 구조화에 대해서 신경쓰고, 이해가 낮은 부분에 대해서는 블로그에 정리하며

더 좋은, 내가 만족할 수 있는 결과물을 만들어 봐야곘다.