바닐라 자바스크립트를 이용하여 spa형태의 웹페이지를 만들어 보려고 한다.
도브라는 유튜브 강의를 참고하여 만들었다.
1. 모든 웹의 근간이 되는 싱글 웹 페이지를 작성한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>권현성 사이트 입니다! with SPA</title>
<link rel="stylesheet" href="/static/css/index.css">
</head>
<body>
<nav class="nav">
<a href="/" class="nav__link" data-link>자기소개</a>
<a href="/posts" class="nav__link" data-link>http 요청 맛보기</a>
<a href="/settings" class="nav__link" data-link>기타</a>
</nav>
<div id="app"></div>
<script type="module" src="/static/js/index.js"></script>
</body>
</html>
2. 기타 라이브러리 사용을 관리하는 pakage.json 세팅과 경로 지정에 이용할 exprsss 설치 합니다.
- npm init -y // npm init 를 할때 생성될때 질문하는 질문에 대해여 모두 yes하겠다는 뜻
- npm install express
3. express.js를 이용하여 서브를 라우팅 할거다.
express를 이용하면 url을 통해겨 경로 지정할 수 있다. 이번 페이지 설계에서는 http요쳥을 해서 restapi설계는 하지 않을 거지만 이런식으로 한다는 느낌을 주는 형태의 설계까지는 마칠 것이다.
코드는 다음과 같이 짤 수 있다.
const express = require("express");
const path = require("path");
const app = express();
// middleware 설정
// __dirname을 빼도 되지만 포함하는 게 정석.
// '/static'으로 시작되는 경로로 접속 시 frondend/static이 기본 고정 경로가 됨.
app.use("/static", express.static(path.resolve(__dirname, "frontend", "static")))
// 여기에도 __dirname 추가
app.get("/*", (req, res) => {
res.sendFile(path.resolve(__dirname, "frontend", "index.html"));
});
app.listen(process.env.PORT || 5000, () => {
console.log("Server running...")
})* 코드 설명 *
- app.use() 미들웨어를 어플리케이션에 바인딩하는 것 (http 동사에 관계 없이 모든 경로에 응답)
- app.get()은 GetHttp 동사만 반응
- express.static(`public`)) 같은 코드는 public에 포함된 정적파일을 제공하는데 쓰인다.
- path.json, path.resolve - 인자로 받는 경로 인자를 맨오른쪽 부터 왼쪽까지 경로인자를 합치는 것 - resolve 반대는 json
- app.listen: 포트명과 리스닝이 성공했을때 그안에 콜백함수를 적은 것
서버를 실행할때 node sever.js라고 치면 사이트가 실행됩니다.
nodemon 과 node의 차이 nodemon은 코드를 업데이트 했을 때 새로고침 없이 즉각적으로 자기가 알아서 반영됩니다.
4. index.js를 만들어서 spa의 본 설계를 시작 해봅시다.
const router = async () => {
const routes = [
{ path: "/", view: () => console.log("Viewing Dashboard") },
{ path: "/posts", view: () => console.log("Viewing Posts") },
{ path: "/settings", view: () => console.log("Viewing Settings") },
];
// 현재 route와 현재 페이지 경로가 일치하는지 테스트
const potentialMatches = routes.map(route => {
return {
route: route,
isMatch: location.pathname === route.path
};
});
console.log(potentialMatches);
};
// DOM이 렌더링 되면 router 함수 실행
document.addEventListener("DOMContentLoaded", () => {
router();
});* 코드 설명 *
- DOMContentLoaded: 이벤트 HTML문서를 완전히 불러오고 분석했을 때, 스타일 시트, 이미지, 하위 프레임의 로딩을 기다리지 않음.
- location: url의 정보를 가져오는 객체
- location.pathname => ~.net/path/scirp.html 에서 /path/script.html 이부분의 데이터를 가져온다
- 결론적으로, /, /posts, /setting 의 url을 읽어서 매칭되는 url에 따라 콜백함수 consol.log()가 실행 될것이고, 그걸 다시 콘솔로그에 담으면 출력되는 것이 보여질 것 입니다.
후기
오늘은 여기까지 다음 포스팅때 이어서 가보겟다.
우리는 현재 간단하게 spa를 구현햇다고 볼 수 있다.
해당 웹 사이트 로딩시 미리 다운 되있던 콜백함수가
url에 정보에 맞게 실행됨으로써 간단하게 구현한 것
다음에는 진짜 사이트 답게 구현해볼거임!
'자바스크립트 끄적끄적' 카테고리의 다른 글
| 자바스크립트 프로토타입이란? (0) | 2022.08.31 |
|---|---|
| SPA 기반 사이트 만들어 보기 with. 바닐라 자바스크립트 #2 (0) | 2022.08.29 |
| 헬퍼 함수란? (0) | 2022.08.24 |
| forEach() 이용 정리 (0) | 2022.08.22 |
| 자바스크립트 filter 이용하는거 까먹지 말자!! (0) | 2022.08.21 |
