웹 개발 학습 노트

🌐 웹 개발 학습 노트

간단한 연락처 웹 프로젝트를 진행하면서 겪은 시행착오와 깨달음을 바탕으로 작성한 개인 학습 정리입니다.

---

1. HTML

• form, input, button 구조에 따라 UX 흐름이 완전히 달라짐.
• <label for="id"> 같은 접근성 요소도 모바일 터치 UX에서 중요함.

---

2. CSS

• flex, grid 레이아웃이 익숙해지면 position: absolute보다 훨씬 유연함.
• 반응형 구현 시 @media (max-width)보다 버튼 간격 확보가 중요함.
• z-index는 간단해 보이지만 요소가 많아질수록 디버깅 난이도 상승.

---

3. JavaScript (Vanilla)

• querySelector는 범용적이라 getElementById보다 유리한 경우 많음.
• addEventListener 등록 순서, 중첩 호출에서 실수하기 쉬움.
• localStorage, fetch + JSON 활용은 기본 중 기본.
• onclick="..." 방식은 유지보수에 좋지 않음 → JS 코드에서 분리 필요.

---

4. 상태 저장과 동기화

• localStorage는 클라이언트 테스트용으로 편리하지만, 실서비스에는 적합하지 않음.
• JSON 파일을 fetch로 불러오는 방식은 익혀야 할 핵심 기술.
• 서버에서 파일을 수정하려면 결국 백엔드 API가 필요함 → Node.js, Spring 연동 필요.

---

5. UI 기획 (Figma 기반)

• 버튼의 위치와 흐름 하나만으로도 사용자 피로도가 크게 달라짐.
• 보여주는 것보다 "무엇을 숨길지"를 먼저 설계해야 복잡해지지 않음.

---

6. 데이터 구조 설계

• 연락처 예시:

  {
    "id": "uuid123",
    "name": "홍길동",
    "phone": "010-1234-5678",
    "email": "example@email.com",
    "tag": "친구",
    "updatedAt": "2025-06-17T12:00:00"
  }