1. 기본 설정 및 css 초기화
1. 터미널에서 npm init -y를 입력하여 프로젝트를 시작합니다.
이후 npm i -D parcel를 입력하여 설치합니다. 이것은 parcel번들러입니다. 이 번들러를 사용하는 이유는
Parcel은 번들러를 설정하는 번거로움 없이
빠르고 효율적으로 웹 애플리케이션을 개발할 수 있도록 도와주는 도구이고, 사용하기 쉽고
다양한 기능을 자동으로 제공하여 개발자가 코드에만 집중할 수 있게 해주기 때문입니다.2. package.json 파일을 열어 scripts부분에 dev,build 명령어를 추가합니다.
ex) "dev" = "parcel ./index.html"
3. reset.css를 검색하여 css를 리셋하는 link를 추가합니다.
css를 리셋하는 이유는 뭘까요?
CSS를 리셋하는 이유는 브라우저마다 기본적으로 제공하는 스타일이 다를 수 있기 때문입니다.
이러한 기본 스타일은 각 브라우저마다 조금씩 다르기 때문에,
웹페이지를 다양한 브라우저에서 일관되게 보이도록 하기 위해 CSS 리셋이 필요합니다.
CSS 리셋은 브라우저의 기본 스타일을 제거하거나 최소화하여,
개발자가 설정한 스타일이 모든 브라우저에서 동일하게 적용되도록 도와줍니다.4. main.css, main.js 연결
main.css파일과 main.js을 만들어 index.html과 연결하여 줍니다.
주의사항
main.js를 html과 연결하여 script태그를 사용할 때 type을 module로 그리고 defer를 추가해줍니다. 그 이유는
- type="module"
이 속성은 JavaScript 파일을 ES6 모듈로 인식하게 만듭니다.
모듈은 다른 모듈을 가져올 수 있고, 파일 간의 코드를 더 체계적으로 분리할 수 있게 도와줍니다.
모듈 스크립트는 기본적으로 "strict mode"로 실행되며, 전역 스코프를 오염시키지 않습니다.
또한, type="module"을 사용하면 import와 export 문법을 사용할 수 있게 됩니다.- defer
defer 속성은 HTML 문서가 모두 파싱된 후에 스크립트가 실행되도록 지시합니다.
이는 스크립트가 <head> 태그 안에 위치해 있을 때 유용합니다.
스크립트가 실행되기 전에 전체 HTML이 파싱되므로 DOM 요소들이 스크립트 실행 전에 준비된 상태가 됩니다.
또한, defer 속성을 사용하면 여러 스크립트가 있을 때, 이들이 선언된 순서대로 실행됩니다.5. index.html의 body에 div에 id로 root를 추가하여 줍니다.
6. core 폴더를 만든 후 heropy.js파일을 추가해주세요.
heropy.js에 대한 설명은 해당 링크를 통해 확인해주세요.
2. 기본 라우터 구성 및 방법
1. main.js와 App.js 파일 생성
먼저, main.js 파일이 있는 위치에 App.js 파일을 만듭니다. App.js 파일에서는 컴포넌트 개념을 도입하기 위해 파일 이름의 첫 글자를 대문자로 작성합니다. 이는 다른 JavaScript 파일들과 구분하기 위한 관례입니다.
2. App.js에서 Component 가져오기
다음으로, App.js 파일에서 다른 파일의 코드를 가져오기 위해 import 구문을 사용합니다. 여기서는 heropy.js 파일에서 Component를 가져옵니다.
import { Component } from './core/heropy'3. App.js에서 Component 상속
이제 App.js에서 Component를 상속받아 App이라는 클래스를 만듭니다. 이 클래스는 router-view라는 HTML 요소를 생성하여, 라우터가 관리하는 페이지들이 이곳에 표시되도록 합니다.
export default class App extends Component {
render() {
const routerView = document.createElement('router-view')
this.el.append(routerView)
}
}- router-view 생성: router-view는 동적으로 페이지를 렌더링하는 역할을 하는 HTML 요소입니다. 이 요소는 나중에 라우터에 의해 특정 페이지 컴포넌트로 교체됩니다.
4. routes 폴더 생성 및 index.js 파일 작성
라우팅을 관리하기 위해 routes라는 폴더를 만들고, 그 안에 index.js 파일을 생성합니다. 이 파일은 경로(path)와 해당 경로에 대응하는 컴포넌트를 정의합니다.
import { createRouter } from '../core/heropy'
import Home from './Home'
export default createRouter([
{ path: "#/", component: Home }
])- 라우트 정의: createRouter 함수는 경로와 컴포넌트를 매핑하는 배열을 받아서, 라우터를 생성합니다. 여기서는 "#/" 경로에 대해 Home 컴포넌트를 연결합니다.
5. Home.js 파일 생성 및 컴포넌트 작성
이제 routes 폴더 안에 Home.js 파일을 만들고, Home이라는 컴포넌트를 정의합니다. 이 컴포넌트는 Hello world! 메시지를 표시합니다.
import { Component } from '../core/heropy'
export default class Home extends Component {
render() {
this.el.innerHTML = '<h1>Hello world!</h1>'
}
}- Home 컴포넌트: 이 컴포넌트는 간단히 h1 태그 안에 "Hello world!"를 삽입하여 화면에 표시합니다.
6. main.js 파일 작성
마지막으로, main.js 파일에서 모든 설정을 초기화하고, 페이지를 화면에 렌더링합니다.
import App from './App'
import router from './routes/index.js' // index.js는 생략 가능
const root = document.querySelector('#root')
root.append(new App().el)
router()-
루트 요소 선택: document.querySelector('#root')를 사용해 HTML 문서에서 root 요소를 선택합니다.
-
이 요소는 애플리케이션이 렌더링될 루트 요소입니다.
-
App 컴포넌트 렌더링: root.append(new App().el)로 App 컴포넌트를 루트 요소에 추가합니다. 이 컴포넌트는 router-view 요소를 포함하고 있어, 나중에 라우터에 의해 페이지가 이곳에 렌더링됩니다.
-
라우터 초기화: router()를 호출하여 라우터를 초기화하고, 현재 경로에 맞는 페이지를 렌더링합니다.
전체적인 흐름
이 과정을 통해 우리는 간단한 SPA 구조를 만들었습니다. App.js는 애플리케이션의 진입점 역할을 하며, router-view를 통해 현재 경로에 맞는 페이지를 표시합니다. 라우터는 routes/index.js에서 설정되고, 각각의 페이지 컴포넌트는 별도의 파일로 관리됩니다. Home.js 파일은 "Hello world!" 메시지를 출력하는 예제 컴포넌트를 포함합니다.
이 구조는 이후 더 많은 페이지와 라우트를 추가할 때 확장할 수 있는 기본적인 틀을 제공합니다. 이 과정을 이해하면, 복잡한 SPA를 쉽게 구축할 수 있게 됩니다.
