Vanila Js로 SPA 만들기 - 리팩토링
·
프론트엔드/JavaScript, TypeScript
링크 : https://hyunwoo12.tistory.com/3 기존 코드는 위에서 볼 수 있다. 위 링크의 리뷰한 사항을 바탕으로 리팩토링을 진행했다. 1,2) 라우팅 담당하는 부분을 기존 index.js 에서 router.js로 분리하기 router.js function Router() { this.route = () => { // 기존과 동일 } this.setUrl = (url) => { history.pushState(null, null, url); this.route(); } window.addEventListener('popstate', this.route) } const router = new Router(); export { router }; Router 함수를 따로 만들어서 분리했다...
Vanila Js로 SPA 만들기
·
프론트엔드/JavaScript, TypeScript
링크: https://programmers.co.kr/skill_check_assignments/199 개요 Vanila JS를 사용해서 쇼핑몰 사이트를 구현했다. 상품 목록페이지에서 상품 목록을 조회할 수 있고, 상품을 클릭 시 해당 상품의 상세 페이지로 이동한다. 상품 상세페이지에서 상품의 상세 정보를 조회할 수 있고, 상품의 옵션을 선택한 후 주문하기를 클릭하여 장바구니에 담을 수 있다. 장바구니 페이지에서 장바구니 에 담은 상품들을 조회할 수 있고, 주문하기 버튼을 클릭하여 해당 상품들을 주문할 수 있다. 라우팅 기본 - 주소에 따라 다른 화면 보이기 먼저, 주소에 따른 앱 내부를 해당 페이지로 변경하는 render 함수를 만들었다. 그 다음에 location의 pathname을 활용해서 주소가 ..