I. nvm 사용

💡 프로젝트 환경 마다 node -version 이 상이 할 수 있다.
이에 따라 우리는 node version 을 자유롭게 바꿀 수 있어야 한다.

Install

1. nvm 설치

아래 명령어를 terminal 에서 실행

curl -o- [https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh](https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh) | bash

공식 홈페이지: https://github.com/nvm-sh/nvm

2. ~/.zshrc 편집

vi ~/.zshrc    # 편집기 open

## 최 하단에 삽입
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

3. source ~/.zshrc 실행

4. nvm install --lts 실행한다.

Usage

# version download
nvm install v16

# version use
nvm use v12

II. Why? pnpm

💡 dependency를 한곳에서 관리하면서 동일 버전의 중복생성이나 같은 이름 다른 버전의 dependency 생성시 패키지가 삭제되었다가 다른 위치에 새로 생성되는 등 불필요한 I/O 과정을 없애준다.

pnpm ??

npm을 대체하기 위한 더 빠르고 효율적인 패키지 매니저

pnpm은 패키치를 설치 할 때 직접적으로 설치하는 방법 대신 심링크(하드링크)를 사용한다.

ex) loadsh를 사용하는 패키지 100개가 있다고 가정하였을 때, npm 이나 yarn 을 사용할 경우, 각 폴더별로 패키지 lodash 패키지가 100개 복사
but ) pnpm은 lodash를 단 한번 설치하고, 다른 100개의 프로젝트에는 심링크로 연결하여, 용량 측면에서 효율적으로 패키지를 관리

pnpm, 플랫하지 않은 패키지 매니저

III. npm init svelte@next my-app

Options :: Skeleton / TypeScript / EsLint, Prettier

IV. Route 관련

routes
├── route_a
│   ├── index.svelte  ## 자동으로 index를 찾으므로 path는 다음과 같다 (url/route_a)
│   └── c.svelte      ## path: /route_a/c
├── index.svelte      ## path: /
└── route_b.svelte    ## path: /route_b

V. Component 관련

💡 일반적인 Convention은 다음과 같다.

.
**|____lib
| |____Name.svelte**
|____global.d.ts
|____app.html
|____routes
| |____index.svelte
| |____route_a
| | |____index.svelte
| | |____c.svelte
| |____route_b.svelte
| |____route_b
| | |____[id].svelte

src 폴더 내에 lib 라는 폴더를 만들고 Component 를 제작한다.

import 시에는 $lib/Name.svelte 를 통해 import 한다.

따로 js(ts)config.json 에서 base url 을 설정해주지 않아도 $ 를 통해서 baseUrl 에 접근 할 수 있다.

공식문서

$lib

---

This is a simple alias to src/lib, or whatever directory is specified as [config.kit.files.lib]. It allows you to access common components and utility modules without ../../../../ nonsense.

VI. How Management QueryParam & PathParam

💡 해당 내용은 routes 의 page 쪽에서만 사용 할 수 있다.

<script context="module">
  /** @type {import('@sveltejs/kit').Load} */
  export async function load({ url, params }) {
    const query = url.searchParams;
    const id = params.id;
      return {
        props: { a: query.get('a'), id }
      };
  }
</script>

<script>
  export let a;
  export let id;
</script>

<div>
  {a}
  {id}
</div> 

1. QueryParam

1. queryString 같은 경우 url.searchParams 를 이용하여 전체 query를 긁어오고
2. return 측에 props: { a: query.get(’a’) } 를 통해서 .....url?a=123123 의 a쪽 value를 가지고 온다.

2. PathParam

1. pathparam 을 사용하는 쪽의 파일명은 [pathparam].svelte 로 되어 있어야 한다.
2. [params.id](http://params.id) 를 통해서 현재 path를 가져오고
3. 그 id를 return측 props에게 알려준다.

마무리

스벨트를 사용하는 이유는 React 에서 우리가 따로 설치나 설정해주어야 했던 부분을 조금 간소화 한 느낌이 든다.

이미 사용자가 어떠한게 필요한지 알고 있고, 그 것에 따라서 설계한 느낌이 든다.