250910 TIL

❗어떤 문제가 있었는지

• 웹개발 실전 과제들을 수행하면서 각 파일들의 역할이나 구성, 처리방식에 대한 기본적인 이해도가 많이 부족했었음
• 기본이 없다보니 접근방법이나 해결방법에 대해 큰 틀을 잡고 구성하기 어려웠음

---

📝  내가 시도해본 것들

• 프로젝트 구성에서의 파일별 코드를 뜯어보며 어떤 기능을 수행하고 어느 변수,상수로 저장되는지 흐름을 읽고자 하였음
• 어렵게 생각하지 않고 기초에 기반하여 가장 간단하게 구현될 수 있는 방법들을 고민하고자 했음

---

💡 어떻게 해결했는지

• 완벽하게 진행하지는 못했지만 진행했던 과제들을 쭉 복습하며 MVC, SPA, Servlet 개념 등.. 개념들을 까먹지 않도록 정리하고 넘어가려고 함
  • 아래 내용에 금일 진행했던 내용에 대해서 쭉 정리하고자 함 (GPT의 도움을 적극적으로.. 활용)

---

👍 무엇을 새롭게 알았는지

웹개발 실전 마지막 과제를 진행하며 사용되었던 함수& 명령어들을 우선 쭉 정리하여 넘어가고자 함

• Js 기본/언어

• export function foo(){...} / export const x = ...
  • 이 파일 밖에서 쓸 수 있게 내보냄 — model.js, view.js
• 백틱 문자열 & 템플릿 리터럴 `…${값}…`
  • 문자열 안에 변수를 끼워 넣음 — view.js(테이블 행 만들 때)
• 배열 메서드 map, filter, find, findIndex, push
  • map: 배열을 다른 모양의 배열로 바꾸기
  • filter: 조건에 맞는 것만 남기기
  • find: 조건에 맞는 첫 요소 찾기
  • findIndex: 조건에 맞는 요소의 인덱스
  • push: 배열 뒤에 값 추가
  • — view.js(map), model.js(filter/find/findIndex/push)
• join("")
  • 문자열 배열을 하나로 합침 — view.js(여러 <tr> 합치기)
• Number(값) / Number.isNaN(...)
  • 숫자로 변환 / 숫자가 아닌지 검사 — controller.js(폼 검증)
• Date.now()
  • 현재 시간을 밀리초로 — model.js(id/createdAt 생성)
• (환경에 따라) crypto.randomUUID()
  • 고유 id 생성(지원 시) — 단순 대체로 Date.now()도 사용 가능
• alert, confirm
  • 간단한 알림/확인 대화상자 — controller.js(검증/삭제 확인)

• DOM 조작/이벤트

• document.querySelector(selector)
  • CSS 선택자로 요소 1개 찾기 — 전 파일 공통(특히 controller.js, view.js)
• Element.innerHTML = "..."
  • 요소의 안쪽 HTML을 통째로 바꿈 — view.js(목록 렌더)
• addEventListener("submit" | "click" | "hashchange" | "DOMContentLoaded", handler)
  이벤트 연결 — controller.js
  
  
  • DOMContentLoaded: 문서가 파싱 끝났을 때 초기화
  • hashchange: #해시가 바뀔 때 라우팅
  • submit: 폼 제출 처리(등록/수정 저장)
  • click: 목록의 수정/삭제 버튼 처리(이벤트 위임)
• e.preventDefault()
  • 폼의 기본 제출(새로고침)을 막음 — controller.js
• 이벤트 위임: e.target.closest("button[data-action]")
  • 표 안의 버튼을 부모 하나에 걸어 처리(행마다 리스너 X) — controller.js
• element.style.display = "none" | "block"
  • 보이기/숨기기 — controller.js의 show()(간단한 SPA 전환)
• element.classList.add/remove(...)
  • 클래스 토글(선택적으로 페이드 등 효과 줄 때 사용)
• element.dataset (예: btn.dataset.action, btn.dataset.id)
  • data-* 속성 접근 — view.js(버튼 출력), controller.js(식별)

• 라우팅

• location.hash
  주소의 # 뒷부분(예: #list, #register) — controller.js
  
  • 읽어서 어떤 화면을 보여줄지 판단
  • 쓰면(대입) 화면 전환 트리거: location.hash = "#list"
• window.addEventListener("hashchange", onRoute)
  • 해시가 바뀔 때마다 onRoute() 호출 — controller.js
• 기본 해시 설정
  • 첫 진입에 해시가 없으면 원하는 기본 화면으로:
    if (!location.hash) location.hash = "#register"; — controller.js

• 폼/입력

• HTML 속성: required, type="number", min, step
  • 브라우저 기본 검증/입력 제한 — index.html 폼
• form.reset()
  • 폼 입력값을 초기화 — 저장 후 비워주기 — controller.js
• toLocaleString("ko-KR")
  • 숫자를 보기 좋게(천 단위 구분) — view.js(가격 표시)