SPA 기반 사이트 만들어 보기 with. 바닐라 자바스크립트 #2

이제는 콜핵함수를 리턴해주는게 아니라. 각각 path에 따라 엡 페이지를 나타나게 해줄 생각입니다.

우선 해당 웹페이지 컴포넌트를 만들어 봅시다.

 

추상화 컴포넌트(있는말 아님)  c++ virtual처럼 윤곽이 되는 컴포넌트를 만듭니다.

./path/AbstractView.js

export default class {
  constructor(params) {
    this.params = params;
}
  
    // 페이지 타이틀
    setTitle(title) {
      document.title = title;
    }
  
    // 뿌려질 Html
    async getHtml() {
      return "";
    }
  }

./path/Dashboard.js

import AbstractView from "./AbstractView.js";

export default class extends AbstractView {
    constructor(params) {
        super(params);
        this.setTitle("Dashboard");
    }

    async getHtml() {
        return `
            <h1>Welcome My Site!</h1>
            <p>
                안녕하세요. 바닐라 자바스크립트로 만든 권현성 페이지에 오신걸 환영합니다..!!
            </p>
            <p>
                <a href="/posts" data-link>View recent posts</a>.
            </p>
        `;
    }
}

./path/settings.js

import AbstractView from "./AbstractView.js";

export default class extends AbstractView {
  constructor(params) {
    super(params);
    this.setTitle("Settings");
  }

  async getHtml() {
    return `
      <h1>Posts</h1>
      <p>You're viewing the Settings!</p>
    `;
  }
}

./path/post.js

import AbstractView from "./AbstractView.js";

export default class extends AbstractView {
  constructor() {
    super();
    this.setTitle("http 요청 맛보기");
  }

  async getHtml() {
    return `
      <h1>http 요청 맛보기</h1>
      <p>url을 읽을거시와요!!</p>
    `;
  }
}

/* 코드 설명 */

AbstractView.js 에서 

// 페이지 타이틀
    setTitle(title) {
      document.title = title;
    }

 

은 doucument 객체를 이용해서 title를 설정해준다 => 페이지를 보면 각 탭에 제목을 보실 수 있을 거다. 그걸 설정한다고 보면 된다.

 

getHtml()이라는 ` ~ ~ ~ `문자열을 리턴해주게 만든 내가 만든 함수입니다.

이 코드를 인스턴스로 만들어서 이용하는게 Dashboard, settings,  post 자바스크립트 파일인거죠.

 

이제 index.js를 수정해서 화면을 클릭하면 각 컴포넌트 화면이 나오도록 만들려고 합니다.

./frontend/static/index.js

import Home from "./pages/Dashboard.js";
import Posts from "./pages/Posts.js";
import Settings from "./pages/Settings.js";

const router = async () => {
    const routes = [
        { path: "/", view: Dashboard },
        { path: "/posts", view: Posts },
        { path: "/settings", view: Settings },
    ];

// ...
  const pageMatches = routes.map((route) => {
    return {
      route, // route: route
      isMatch: route.path === location.pathname,
    };
  });
// ...

 

// index.js
let match = pageMatches.find((pageMatch) => pageMatch.isMatch);

const page = new match.route.view();
document.querySelector("#app").innerHTML = await page.getHtml();

/* 코드 설명 */

1. view부분에 콜백함수 대신 import 한 컴포넌트 함수를 넣어서 라우팅 해주는 원리.

2. 이전에도 설명했지만

....		
        routes.map((route) => { // routes 중에서
    return {
      route, // route: route
      // url주소를 통해 path 확인 => location.pathname 
      // router에 정의 path 경로 => route.path
      // 같은걸 isMatch에 넣는 것.
      isMatch: route.path === location.pathname,  
                                         
    };

3. 그결과를 math에 담는것.

let match = pageMatches.find((pageMatch) => pageMatch.isMatch);

4. 그 다음 이 세부 객체 val값을 new match.route.view() 생성한 다음 접근

page 변수에 담는 것.

5. 마지막으로 page 함수에서 이전 컴포넌트를 만들때 선언한 getHtml() 호출하면 해당되는 컴포넌트 파일에서 알맞은 html문서를 불러오고, 그걸 innerHtml에 넣는 작업입니다.

이 4~5에 작업이  아래에 코드 블럭인 것이죠.

let match = pageMatches.find((pageMatch) => pageMatch.isMatch);

const page = new match.route.view();
document.querySelector("#root").innerHTML = await page.getHtml();

 

그다음 index.html에 css 파일을 임포트해서 스타일링을 합니다. (css 설명은 생략)

 

body {
    --nav-width: 200px;
    margin: 0 0 0 var(--nav-width);
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
}

.nav {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--nav-width);
    height: 100vh;
    background: #3131ba;
}

.nav__link {
    display: block;
    padding: 12px 18px;
    text-decoration: none;
    color: #eeeeee;
    font-weight: 500;
}

.nav__link:hover {
    background: rgba(255, 255, 255, 0.05);
}

#app {
    margin: 2em;
    line-height: 1.5;
    font-weight: 500;
}

a {
    color: #705ac7;
}

이렇게 작업을 완료하면 다음과 같이 작동하는 SPA 페이지가 그럴듯하게 완성 됩니다.

 

 

 

---

후기

 

대충 그럴듯하게 랜더링 되는 SPA페이지를 만들었습니다.

다음에는 http요청을 하기위해 url 데이터를 읽어서 랜더링 하는 마지막 작업 까지

설명을 하고 마치려고 합니다.

이부분이 조금 복잡하고 난해합니다..

쨌든 즐거운 하루~