패스트캠퍼스 챌린지 41일차

로그인 앱 설계

 

로그인을 하기위해 서버에서는 로그인 할 당시에 권한처리나, 토큰 유지, API를 통해서 프로필 데이터를 JSON 형식으로 받아오는 등의 데이터 처리나 라우팅에 관한 작업들을 진행했다.

 

이번에는 클라이언트에서 서버에서 가져오는 데이터에 맞게 또는 라우팅이 변함에 따라 화면 부분을 변경하는 작업을 할 것이다.

 

import Store from './store';
import Login from './page/login';
import Profile from './page/profile';
import PageNotFound from './page/page-not-found';

const store = new Store();

function router() {
  const path = location.hash;

  switch(path) {
    case '':
    case '#/login':
      const login = new Login('#root', {
        store,
        title: 'JS & TS Essential'
      });
      login.render();
      break;
    case '#/profile':
      const profile = new Profile('#root', { store });
      profile.render();
      break;
    default:
      const pageNotFound = new PageNotFound('#root');
      pageNotFound.render();
      break;
  }
}

window.addEventListener('hashchange', router);
document.addEventListener('DOMContentLoaded', router);

클라이어트에서 라우팅 처리를 하기위해서 hash 형식을 사용한다. 이벤트리스너에 hashChange를 등록하고 해시가 변경됨에 따라 화면을 변경하는 방식인데 SPA를 구현하는 하나의 방식이다. 또한 Store 객체를 선언해서 전역적으로 Store에 관련된 필드나 변수 등을 사용한다. 로그인 페이지와 프로필 페이지로 나뉘고 해당하는 해시 값으로 url이 변경 될때마다 각각 해당하는 Login, Profile 인스턴스가 생성되고 render 메소드로 렌더링을 한다. 만약 처리하는 페이지에 url이 다른 값이 입력 됐을 시 미리 만들어 둔 pageNotFound 를 불러온다.

 

 

 

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential