취미로 코딩하기

전체목차 : https://gauryan.tistory.com/214

이제 생성한 프로젝트의 구조에 대해 간단하게 알아볼 시간입니다. 먼저, VSCode 의 왼쪽에서 프로젝트 폴더를 봅시다. 이렇게 생겼어요.

node_modules 폴더가 먼저 보이네요. 이 폴더에는 내가 설치한 node 모듈들이 있는 장소입니다. 처음 용량이 거의 160MB로 꽤 큽니다. package.json 에 필요한 패키지 목록을 가지고 있어서, node_modules 폴더가 없더라도, 다시 만들수가 있습니다. 그래서, git에는 저장하지 않도록 설정되어 있어요.

public 폴더의 index.html 도 봅시다. 여기에서 눈여겨 볼 곳은 app 으로 id를 설정한 부분입니다. 이 곳에 우리가 작성한 코드들이 자동으로 들어가게 되는데요. 자동으로 관리되는 부분이므로, index.html 파일을 직접 건드리지 않는 것이 좋습니다.

이제 가장 중요한 src 폴더를 보겠습니다. 이 밑에는 main.js, App.vue, assets 폴더, components 폴더가 있네요. main.js 는 프로그램의 진입점이 될 것입니다. App 컴포넌트를 호출해서, 위에서 보았던 app 에 마운트를 합니다. 이 파일도 거의 수정할 일이 없지만, 간혹 전역으로 적용되어야 할 js 파일이나 css 파일을 import하는 경우가 있습니다. 이미 지난 시간에 Bootstrap 을 위해서 추가했었지요.

그리고, App.vue 는 메인 컴포넌트입니다. Vue는 컴포넌트 기반의 프론트엔드 프레임워크 입니다. Vue 뿐만 아니라, React, Svelte 등도 컴포넌트 기반입니다. 하나의 페이지도 컴포넌트이고 페이지를 구성하는 다양한 영역도 컴포넌트로 구성할 수 있습니다. Vue에서 컴포넌트는 ~.vue 라는 확장명으로 만들어집니다. 파일 하나가 컴포넌트입니다. React의 경우는 클래스 기반, 함수 기반의 컴포넌트여서, 한 개의 파일에 여러개의 컴포넌트를 만들 수 있다는 점에서 차이가 있습니다. 컴포넌트를 만들어 놓으면 재사용하기에 좋습니다.

assets 폴더에는 이미지를 넣어서 사용하면 됩니다. 그리고, components 에는 폴더명처럼 재사용할 수 있는 컴포넌트를 작성해서 넣으시면 되겠습니다. 

여기에서는 기본으로 만들어주지 않았지만, 보통 views 또는 pages라는 폴더도 만들어 주게 됩니다. 말 그대로 페이지를 표현하는 컴포넌트를 작성하는 폴더입니다. 우리는 views 폴더를 만들어두겠습니다.

이제, 본격적으로 시작해봅시다. 우선, https://code.visualstudio.com/ 에서 Visual Studio Code를 다운로드하여 설치합니다. 에디터는 자신이 원하는 다른 것(IntelliJ IDEA, Atom, Eclipse 등)으로 하셔도 괜찮습니다.

Svelte에 관련된 확장프로그램은 아래와 같이 설치하였습니다.

https://nodejs.org/ 에서 Node.js를 다운로드하여 설치한다.

node.js 설치를 마치고 다음처럼 설치가 잘 되었는지 확인해보자~! 저는 LTS버전을 설치했는데, 아무거나 설치하셔도 됩니다.

yarn도 설치해봅시다. npm 보다 설치속도가 더 빠르다고 하네요. 전역(-g 옵션)으로 설치하는 패키지는 npm을 사용하고, 그 외에는 yarn을 설치하는 것이 좋다고 합니다.

Svelte 프로젝트 생성합니다. : > npx degit sveltejs/template svelte-tutorial

이제, 웹브라우저가 자동으로 실행이 되며, http://localhost:5000 으로 접속되어, 아래와 같은 화면이 나오게 됩니다. 그러면 일단 성공~!!!

Svelte 코드 컨벤션을 지키기 위해 Prettier를 적용해보고자 합니다. prettier-plugin-svelte를 디펜던시로 받아줍니다.

npm i --save-dev prettier-plugin-svelte prettier
# or yarn add prettier-plugin-svelte prettier -D

Prettier에도 기본 설정이 있는데, 프로젝트의 루트 디렉토리에 .prettierrc 파일을 생성해서 설정을 변경할 수 있습니다.

{
  "svelteSortOrder": "scripts-styles-markup",
  "svelteStrictMode": true,
  "svelteBracketNewLine": true,
  "svelteAllowShorthand": false
  // ... 기타 커스텀 옵션
}

라우팅 설정을 위해서 svelte-routing 을 설치합니다.

npm install --save svelte-routing

크롬 확장프로그램을 설치할거에요. chrome 웹 스토어에서 Svelte를 검색하여, Svelte Devtools를 설치합니다. 크롬에서 Vue 디버깅할때 아주 유용하다고 합니다.

CSS Framework로는 Svelte Material UI 를 사용할 것입니다. 이 녀석은 다른 프레임워크와는 다르게 컴포넌트마나 매번 별도의 설치를 해야 합니다. 그래서, 튜토리얼을 진행하면서 설치를 그때마다 하겠습니다.

이제, 코드를 살짝 수정해볼까요? App.svelte 파일을 열어서, 다음처럼 바꾸어봅니다. ~.svelte 파일을 컴포넌트라고 합니다. 컴포넌트는 script, style, html 로 구분이 되고, 순서는 상관이 없습니다. 일반적으로 HTML파일도 거의 같은 구조로 되어 있고, Vue의 컴포넌트 파일도 거의 같은 모양입니다. html 코드 내에서 중괄호{} 안에 변수를 넣으면, 변수의 내용을 출력합니다. 백엔드 프레임워크의 일반적인 템플릿(뷰)의 형식과 거의 비슷합니다. Vue도 역시 비슷한 방법을 사용하고 있습니다.

<script>
	let name = "세상아";
</script>

<main>
	<h1>안녕, {name}!</h1>
</main>

<style>
	h1 {
		color: #2ab11e;
		font-size: 4em;
		font-weight: 100;
	}
</style>

결과는 아래처럼 나오겠지요~!! 여기까지가 Svelte를 위한 개발환경 구성 및 프로젝트 생성, 헬로월드 만들어보기 였습니다. 기존의 다른 프레임워크들보다는 상당히 단순하게 구성이 되어 있어서 공부하는데 어렵지 않을거에요.

.eslintrc.js 파일의 rules 항목에 semi를 추가해준다.

  rules: {
  ...
    'semi': [2, 'always'],
    // or
    // 'semi': 'off',
  ...
  }

이렇게 설정하면, 미리 만들어진 다른 파일에서 세미콜론이 추가되어 있지 않은 경우, 에러를 낼 것이다. 이 에러를 무시하려면 해당 파일에 아래 주석을 넣어주면 된다.

/* eslint-disable */
// 위의 주석은 파일 전체에 에러를 무시하게 된다.

// eslint-disable-next-line
// 위의 주석은 다음 줄의 에러만 무시한다.

[참고]

• https://eslint.org/docs/rules/semi
• https://blog.naver.com/1ilsang/221337351543
• https://develoger.kr/frontend/eslint-기본적인-사용법