권돌선생님의 블로그

스벨트에서 객체 및 배열 반복하는 경우가 있어 예제를 작성한다.

1. 배열 및 배열 안의 객체 반복

let  test_state1 = [1,2];
let  test_state2 = [{uid:1,name :'test1'},{uid:2,name :'test2'}];

{#each test_state1 as item} 
    <option value={item}>{item}</option>
 {/each}

{#each test_state2 as item} 
    <option value={item.uid}>{item.name}</option>
 {/each}

2.객체 반복

let  test_state = {"meat":"육류","fish":"어류"};

{#each Object.entries(test_state) as [key, value]}              
              <option value={key}>{value}</option>
{/each}

​

끝~!

개발환경에서 자바스크립트에 console.log 쓸 일이 매우많다. 지워주면 가장 좋지만,

개발하고 배포하고 개발하고 배포하고 하는 일들이 비일비재하기 때문에

너무 귀찮다.

​

vite를 활용하여 노출이 안되게 처리해주자.

​

1. vite-plugin-remove-console npm 라이브러리 설치

스벨트를 빌드해서 Docker 로 배포하려고 한다.

이때 설정하는 .dockerignore , Dockerfile 에 대해 설정하는 법을 작성해보고자 한다.

​

1) .dockerignore

node_modules
.svelte-kit

나의 경우 svelte-kit를 포함하고 있어서, svelte-kit를 사용하지 않는 사람은 생략해도 된다.

node_modules는 어차피 docker build를 할때 npm i 명령어로 install 하기 때문에 따로 건드리지 않는다.

​

2) DockerFile

# 이미지의 기반이 될 이미지 선택
FROM node:20.10.0

# 앱의 소스코드를 포함할 디렉토리 생성
WORKDIR /app

# package.json 파일을 복사한다. 만약 다시 빌드할 때 변경사항이 없을 경우 npm install까지 그냥 넘어간다.
COPY package.json /app


# 이미지를 받으면 npm install을 자동으로 해줌
RUN npm install

# 어떤 파일이 이미지에 들어가야 하는지 
# 첫 번째 .은 이 프로젝트의 모든 폴더 및 파일들 (Dockerfile을 제외한)
# 두 번째 .은 파일을 저장할 컨테이너 내부 경로 (ex /app)
COPY . /app

# 앱 빌드
RUN npm run build


# 포트 설정
EXPOSE 3000

# 프로그램 실행
CMD ["npm","run","preview", "--", "--host"]

DockerFile의 경우 설정법이야 워낙 많지만.. 최소한의 것만 작성한다.

일단 나의 경우 vite를 썼기 때문에 npm run build를 적용하고 preview로 실행하는 데, 이때

포트가 0.0.0.0 으로만 켜지는 것을 방지하기 위해 --, --host를 추가적으로 작성해준다.

​

보통 프론트에서 백엔드 API 로 데이터 요청을 할때 같은 서버내에 프론트서버,백엔드서버 둘다 존재한다면

localhost.. 이런식으로 요청하거나 xxxx.co.kr 이런식으로 도메인을 따서 요청할 것이다.

그런 경우 .env 파일에 경로를 지정해서 import 해서 요청하는 방식을 적용할 것이다.

​

위와 같은 식으로 말이다..

​

그러나 그것을 매번 소스코드에 입력하기도 귀찮고 보안상 그리 좋은 거 같지는 않다.

​

스벨트에 vite 를 적용했다면 다음과 같이 설정해보자

​

import { sveltekit } from '@sveltejs/kit/vite';
import  { defineConfig } from 'vite';

export default defineConfig({
	plugins: [sveltekit()],
	server: {
	  proxy: {
		'/api': {    
		  target: 'http://localhost:8081', 
		  changeOrigin: true,
		  rewrite: (path) => path.replace(/^\/api/, ''),
		},
	  },
	},
  });

위의 target은 실질적으로 백엔드 API 주소 를 말하며, '/api' 는 백엔드 API 주소를 치환하겠다는 말이다.

그럼 위 코드를 변경하면

​

이런식으로

.env 파일이 필요 없어지고 긴 api 주소는 /api 문자열로 처리한다.

훨씬 깔끔한거 같다.

Svelte Kit 사용중 외부 라이브러리 css 모듈을 사용할 일이 있는데.. 간혹

import 시 css 파일이 통합 적용 안되어 있는 모듈이 있다.

​

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">

그렇다고 매번 위와 같은 방식을 적용하면 매번 css 파일을 웹으로 접근해서 가져와야 하므로 매우 비효율적이다.

​

자 Svelte Kit 프로젝트 내의 vite.config.ts 로 접근해보자.

import { sveltekit } from '@sveltejs/kit/vite';
import  { defineConfig } from 'vite';

export default defineConfig({
	build: {
		rollupOptions: {
		  // 외부 모듈을 번들링합니다.
		  external: ['tabulator-tables-css'],
	
		  // 번들에 포함할 모듈의 경로를 설정합니다.
		  output: {
			globals: {
			  'tabulator-tables-css': 'Tabulator', 
// 모듈 이름과 전역 변수 이름을 설정합니다.
			},
		  },
		},
	  },
	  resolve: {
		alias: {
		  // 사용할 모듈의 별칭을 설정합니다.
		  'tabulator-tables-css': 'tabulator-tables/dist/css/tabulator_modern.min.css',
		},
	  },

	plugins: [sveltekit()],
  });

​

위 코드의 주석을 살펴보면, 먼저 resolve 객체를 가면

  'tabulator-tables-css': 'tabulator-tables/dist/css/tabulator_modern.min.css',

왼쪽이 프로젝트 내에서 어떻게 사용할지 별명을 짓는것이며, 우측은 node_modules 내의 소스코드 경로이다.

​

위의 css 파일 경로를 작성하고, 실제 사용할 .svelte 및 js, ts파일에서 로드하는 방법은

import 'tabulator-tables-css'; // CSS 파일이 import됩니다.

이런식으로 호출해서 사용한다.

그외 scss 나 static 폴더내에 css 를 정의해서 app.html에 정의하는 방법이 있으나

node_modules 내의 css 파일을 import 하는 방법은 저런식으로 사용한다.