폴더

저장소 루트에 세 파일을 둔다. package.json도 node_modules도 필요 없다.

index.html
style.css
app.js

index.html이 문서다. style.css가 모양이다. app.js가 클릭과 데이터 호출이다. 스타일과 스크립트는 문서 안에서 경로로 연결한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>글 목록</title>
  <link rel="stylesheet" href="/webdev/static/style.css">
</head>
<body>
  <h1>글 목록</h1>
  <ul id="list"></ul>
  <script src="/webdev/static/app.js"></script>
</body>
</html>

script는 body 끝에 둔다. 그 시점에 ul이 이미 있어서 app.js가 찾을 수 있다.

다른 화면

경로는 파일이다. write.html을 만들면 링크는 href="/webdev/static/write"이다. Next.js의 app 폴더와 Link는 쓰지 않는다.

로컬에서 열기

파일 탐색기에서 HTML을 더블클릭하면 주소가 file://가 된다. 그 상태에서는 일부 브라우저가 CDN 스크립트와 Supabase 요청을 막는다. 폴더에서 간단한 HTTP 서버를 띄우거나, 배포 단원의 주소로 확인한다.