vanillaJS (4) 썸네일형 리스트형 [바닐라 자바스크립트로 SPA 만들기] 3. 라우팅 사실상 SPA 구현의 핵심이라 할 수 있는 라우팅을 추가해 보자. 라우팅 구현하기 라우팅을 위한 주요 기능은 "프레임워크 없는 프론트엔드 개발" 도서의 라우팅 부분을 참고했으며, 전반적인 틀은 앞서 구현한 컴포넌트 기반 폴더 구조에 맞추었다. 폴더 구조 페이지 간 이동을 위해 파일을 추가했다. - HomePage.js: 초기 접근 페이지 - index.js: pages 컴포넌트의 export 모음 src/pages/HomePage.js 초기 접근 시 렌더링 되는 페이지로, 기존 App 컴포넌트의 역할을 대신하는 페이지 컴포넌트이다. 일단은 페이지 구분 용도이기 때문에 별 내용은 없다. import Component from '../core/Component.js'; export default class .. [바닐라 자바스크립트로 SPA 만들기] 2. 비동기 처리 지난 글에서는 카운터 컴포넌트를 통해 기본적인 SPA의 구조를 잡았다. 이번에는 조금 더 나아가서, API 통신을 위한 비동기 처리 컴포넌트를 만들어 보자. 비동기 컴포넌트 만들기 이 부분의 구조는 "프레임워크 없는 프론트엔드 개발" 도서의 HTTP요청 부분을 참고했으며, 더미 API를 통해 패치 컴포넌트를 만들어 볼 것이다. 폴더 구조 새롭게 추가된 부분은 다음과 같다. - api/http.js: HTTP 통신 메서드 모음 - components/List.js: API 결과를 출력할 리스트 컴포넌트 - pages/FetchPage.js: API 패치를 위한 페이지 컴포넌트 src/api/http.js Fetch API를 기반으로 HTTP 통신 메서드를 추상화한 파일이다. (참고 링크) 최대한 외부 라.. [바닐라 자바스크립트로 SPA 만들기] 1. 컴포넌트 만들기 개요 프레임워크 없이 바닐라 자바스크립트로 웹 애플리케이션을 만들 수 있는가? 뭐 만들 수야 있지만 굳이..?라는 생각을 가지며 지내온 시간이 꽤 흘렀다. 그리고 사실 웹 개발 입문 당시 DOM 하나하나를 조작하며 노가다스럽게 만들어본 경험만 있을 뿐, 효율적으로 바닐라 자바스크립트를 활용하는 방법은 몰랐기 때문에 뭐부터 시작해야 할지 잘 몰랐다. 하지만 취업을 준비하면서 바닐라 자바스크립트만을 활용한 과제를 해결해야 하는 순간이 있었기에, 바닐라 자바스크립트를 리액트스럽게 활용하는 방법을 알긴 알아야겠다는 생각이 들었다. 게다가 최근 "프레임워크 없는 프론트엔드 개발"이라는 책을 읽게 되면서 실습 겸, 간단하게 바닐라 자바스크립트로 SPA를 만들어 보았다. 컴포넌트 만들기 SPA의 구조를 잡기 위한 가.. [JavaScript] 바닐라 JS가 기억이 안날 때 빠르게 복습하기 1. 개요 React만 주로 사용하다가 vanillaJS로 테스트를 봐야하는 상황에 놓였다. 분명 처음에는 JS로만으로 이것저것 할 수 있었는데, 지금은 프로젝트 구조는 어떻게 해야할지, 데이터 통신을 어떻게 하는지.. 기억이 전혀 나지 않는다😱. 즉, 이 글은 같은 상황에 놓일 미래의 나를 위해 정리해두는 글이다. 약 1년 반 전 수강했던 노마드 코더의 [바닐라 JS로 크롬 앱 만들기]를 다시 복습하면서 필요한 부분만 기록할 것이다. 2. HTML, CSS, JS 연결 이런 것까지 해야되나? 해야 된다. 지금의 나를 믿으면 안된다. 프로젝트 구조 > tree /f HTML에 연결하기 참고) js 파일을 연결하는 방법은 다양하지만 위의 코드를 기본값으로 기억하되, 추가로 여기서 4가지 방법을 자세히 설명.. 이전 1 다음
