SvelteKit node adapter로 node.js 서버 배포 방법

SvelteKit을 이용해서 개발한 후 서버에 배포하는 다양한 방법이 있습니다. 이를 위해서 다양한 공식 어댑터가 있습니다. 여기에서는 node.js 서버로 SvelteKit 프로젝트를 빌드하는 방법을 알아보도록 하겠습니다.

SvelteKit 어댑터 auto를 node로 변경

SvelteKit에서는 다양한 서버 배포에 맞게 각 어댑터를 제공하고 있습니다. 오늘은 Node.js서버로 SvelteKit 프로젝트를 구동하기 위해서 배포 설정하는 과정을 알아보도록 하겠습니다.

SvelteKit프로젝트의 기본 adapter 설정은 아래 그림 1과 같이 adapter-auto로 설정돼 있습니다.

그림 1. SvelteKit 기본 배포 어댑터는 auto로 설정돼 있음
그림 1. SvelteKit 기본 배포 어댑터는 auto로 설정돼 있음

node.js 서버에 배포하려면 이 부분에 대한 수정이 필요합니다. 기본값으로 되어 있는 @sveltejs/adapter-auto 패키지를 @sveltejs/adapter-node로 변경해 주어야 합니다. 아래 명령어를 사용해서 @sveltejs/adapter-auto 패키지를 먼저 제거해 줍니다. 그리고 @sveltejs/adapter-node 패키지를 설치해 줍니다.

yarn remove @sveltejs/adapter-auto
yarn add -D @sveltejs/adapter-node
ShellScript

SvelteKit node adapter 설정

@sveltejs/adapter-node로 패키지를 변경한 후 해야 할 일이 하나 더 있습니다. 그건 바로 프로젝트 루트 디렉토리에 있는 svelte.config.js 파일에서 사용하는 어댑터의 패키지명을 변경해 주어야 합니다.

그림 3. 기존 @sveltejs/adapter-auto로 설정된 부분
그림 3. 기존 @sveltejs/adapter-auto로 설정된 부분

위의 그림 3의 Line 1을 보면 adapter를 @sveltejs/adapter-auto에서 import하는 부분이 있습니다. 여기를 아래와 같이 @sveltejs/adapter-node로 변경해 주셔야 합니다.

그림 4. SvelteKit node adapter로 설정 변경
그림 4. SvelteKit node adapter로 설정 변경

SvelteKit node adapter에 대한 설정을 마쳤습니다. 이제 빌드한 후에 무엇을 어떻게 배포해야 하는지 확인하셔야겠죠?

Node.js 서버에 배포하기 위한 빌드

이제는 어댑터를 변경했으므로 node 서버에 배포할 수 있게 준비되기 때문에 빌드 후의 결과물이 다릅니다. 우선 SvelteKit 배포를 위한 빌드 명령어를 실행하겠습니다.

yarn build
ShellScript

이제 node.js로 서버를 실행해 주면 됩니다.

node build
ShellScript

아래와 같이 서버가 3000번 포트에서 잘 구동하는 것을 확인할 수 있습니다.

그림 5. node.js로 sveltekit 프로젝트 서버 구동
그림 5. node.js로 sveltekit 프로젝트 서버 구동

빌드 결과가 어디에 저장됐을까요? 눈치 채셨을까요? 루트 디렉토리 하위에 build 디렉토리가 생성되며 그 아래에 클라이언트 코드와 서버 코드가 모두 배포를 위해 준비돼 있습니다.

그림 6을 보면 build 디렉토리 하위에 생성된 디렉토리와 파일을 볼 수 있습니다. index.js가 실행된 것이라는 걸 알 수 있습니다. 상용 서버 배포시에 index.js를 실행해 주시면 됩니다. 위의 그림 5와 같이 build 디렉토리로 지정해 주셔도 index.js가 실행되는 거 아시죠?

PORT 및 HOST(환경변수 설정)

상용 서버에서 호스트나 포트 설정이 필요한 경우가 있을 수 있습니다. 동일 서버에서 여러 포트를 사용해서 서버를 운용한다든지 하면 이런 설정은 필수겠죠? 물론 docker를 이용해서 배포한다면 크게 신경쓸 일은 아니지만 말입니다. 어쨌거나 port와 host를 설정하고 싶다면 아래와 같이 서버를 구동해 주시면 간단히 host와 port를 설정해서 production 서버를 구동할 수 있습니다.

HOST=0.0.0.0 PORT=3001 node build
ShellScript

여기까지 SvelteKit node adapter 설정 방법을 알아보았습니다. node 서버로 SvelteKit 프로젝트를 배포해야 하는 분들에게 도움이 되셨길 바랍니다.

관련자료

SvelteKit의 Node servers 페이지를 참고했습니다. 더 자세한 내용은 이 페이지를 참고하시기 바랍니다.

같이 읽으면 좋은 글

Python 문자열 붙이기 4가지 방법

문자열끼리 붙이거나, 숫자를 문자열에 합치거나, 변수 값을 문자열에 넣는 등 다양하게 문자열을 합치거나 붙이기 작업을 할 때가 있습니다. 여기에서는 Python 문자열 붙이기 방법 4가지를 확인해 보겠습니다.

더하기(+) 연산자 활용

제일 먼저 가장 쉬운 방법인 단순하게 문자열끼리 붙이는 방법을 알아보겠습니다. 숫자 값의 덧셈 연산과 같이 더하기(+) 연산자를 사용하면 문자열끼리 붙습니다.

txt_y = "2013"
txt_m = "05"
print(txt_y + txt_m)
Python
그림 7. Python 문자열 붙이기: 덧셈 연산자
그림 7. Python 문자열 붙이기: 덧셈 연산자

이번에는 문자열에 숫자를 붙여주는 방법을 알아보겠습니다. “201305”라는 문자열에 숫자 값 11을 붙여주고 싶다면 어떻게 해야 할까요? 아래와 같이 하면 안됩니다.

txt_y = "2013"
txt_m = "05"
txt_d = 11
print(txt_y + txt_m + txt_d)
Python
그림 8. Python 문자열 조작: 숫자를 그냥 문자열에 붙이면 안 돼요
그림 8. 숫자를 그냥 문자열에 붙이면 안 돼요

위와 같이 바로 붙여주면 문자열을 이어 붙이는 것은 문자열끼리만 가능하다고 TypeError: can only concatenate str (not “int”) to str 오류메시지로 알려줍니다.

이럴 땐 아래와 같이 str()로 타입 캐스팅(casting)을 해 주면 원하는 결과를 얻을 수 있습니다.

txt_y = "2013"
txt_m = "05"
txt_d = 11
print(txt_y + txt_m + str(txt_d))
Python
그림 9. Python 문자열 붙이기: 캐스팅 사용하여 숫자를 문자열로 변환
그림 9. Python 문자열 붙이기: 캐스팅 사용하여 숫자를 문자열로 변환

변수 값을 문자열에 넣기: 문자열 포매팅

변수값을 깔끔하게 문자열에 넣는 방법은 없을까요? 소수점 자리수를 맞추어 출려하고 싶으신가요? C언어나 Java에서와 같이 formatter를 사용해서 문자열에 변수를 넣을 수 있습니다. C나 Java와 포맷팅 방식은 같습니다. 단, %를 사용해서 값을 매칭해 주는 부분이 파이썬의 특징이라고 할 수 있습니다.

print("%04d" % 13)
print("%10.3f" % 13.123456789)
print("%10s" % "abc")
print("%10s" % "abcd")
print("%10s" % "abcde")
print("%10s" % "abcdefghijklmnop")
Python

% 연산자는 숫자를 대상으로 할 때에는 나머지 연산을 위해 사용하지만, 문자열을 대상으로 할 때에는 문자열의 포맷을 결정할 때 사용합니다. 4자리의 숫자인 문자열을 만들되 빈자리는 0으로 채우라는 것이죠. 그래서 Line 1의 숫자 13은 0013이라는 문자열로 출력됩니다.

Line 2의 부동 소수점 값인 경우에 10.3은 총 10자리의 문자열로 하되 소수점은 3자리까지만 문자열로 취하라는 의미입니다.

Line 3~5까지는 출력할 문자열을 다르게 하고, 모두 10자리의 문자열로 취할 것을 주문했습니다. 문자열은 10자리를 취하기로 했기 때문에 10자리에 맞추어 출력합니다.

하지만 Line 6 처럼 문자열이 긴 경우에는 자르지 않고 문자열이 모두 출력되는 것을 확인할 수 있습니다.

그림 10. Python 문자열 붙이기: 문자열의 포맷을 지정해서 출력
그림 10. Python 문자열 붙이기: 문자열의 포맷을 지정해서 출력

변수 값을 문자열에 넣기: 포맷 문자열 리터럴 f-string 사용

Python에서 문자열에 변수를 넣을 때 제가 자주 사용하는 방법인데, f-string을 사용하는 방법입니다. 소문자 f나 대문자 F를 문자열 앞에 적어주고 삽입하려는 변수는 {와 } 사이에 넣어주는 방식입니다.

day = 11
value = 43.234156675
name = "David"
txt = f"{day}일 승률 {'%.3f' % value}% {name}"
print(txt)
Python

숫자나 문자열을 그냥 넣어줘도 되고, 포매팅 한 결과는 문자열이니 당연히 위에서 사용한 포매팅 방식을 혼용할 수도 있습니다.

그림 11. Python 문자열 붙이기: f-string 사용해서 문자열에 변수값 넣기
그림 11. Python 문자열 붙이기: f-string 사용해서 문자열에 변수값 넣기

변수 값을 문자열에 넣기: format() 사용하기

format을 사용하면 다양한 활용이 가능합니다. 대신에 다양한 사용법을 좀 익혀야 합니다. 하나씩 살펴보도록 하겠습니다.

{}와 format()으로 값 연결

{}를 이용해서 변수 넣을 곳 만들어주고, format()으로 값을 연결해 줄 수 있습니다. {}의 값은 format에 있는 값들로 순차적으로 채워집니다.

print("안녕하세요. {}님, 아침 메뉴는 {}입니다.".format("Naru", "한정식"))
Python

위와 같이 하면 아래 그림 12와 같이 출력된다.

그림 12. {}와 format()으로 값 연결 출력 예시
그림 12. {}와 format()으로 값 연결 출력 예시

{숫자}와 format()으로 값 연결

{0}, {1}과 같이 숫자를 넣어주면, format에서 전달하는 객체의 위치 값으로 활용할 수 있습니다. 아래 코드의 실행결과는 그림 12와 같습니다.

print("안녕하세요. {1}님, 아침 메뉴는 {0}입니다.".format("한정식", "Naru"))
Python

{인수명}과 format()의 인수명으로 값 연결

모처럼 한글인수값을 사용해볼까요? 아래와 같이 작성할 수도 있습니다. format에 인수명을 지정해서 값을 설정하고, {}안에 인수명을 적어주면 해당 인수값이 들어갑니다. 아래 코드의 실행결과는 그림 12와 동일합니다.

print("안녕하세요. {사용자}님, 아침 메뉴는 {아침식사}입니다.".format(아침식사="한정식", 사용자="Naru"))
Python

딕셔너리 format() 사용하여 출력하기

아래에는 Dictionary 형식의 데이터 meal과 learning이 있습니다. format()에서 meal은 첫번째 인수로, learning은 두번째 인수로 전달했습니다.

{} 안에서 몇 번째 인수의 어떤 키값인지를 적어주면 반영됩니다. 그리고 콜론(:) 뒤에 문자열 포맷을 적어주면 문자열에 대한 포맷팅까지 적용됩니다.

meal = {'name': '나루', 'breakfast': '한정식', 'price': 23.2}
learning = {
  'title': 'Python 문자열 붙이기',
  'desc': 'Python에서 문자열을 붙이는 다양한 방식을 배워보아요.'
}
print("안녕하세요. {0[name]}님, 아침 메뉴는 {0[breakfast]:s}, 가격은 USD {0[price]:.1f}입니다.\n그리고 오늘 학습 주제는 \"{1[title]}\"입니다.\n - 상세설명: {1[desc]}".format(meal, learning))
Python
그림 13. 딕셔너리와 format() 활용 출력 예시
그림 13. 딕셔너리와 format() 활용 출력 예시

**표기법을 사용하여 딕셔너리 키 값 바로 사용하기

여러 개의 딕셔너리도 따로 지칭할 필요 없이 그냥 키 값을 사용하는 방법으로 ** 표기법을 사용하면 됩니다. format()으로 넘겨줄 Dictionary 변수명 앞에 **을 붙여주는 것입니다. 키의 중복만 없다면 키 이름만으로 편하게 문자열을 구성할 수 있습니다. 아래의 코드도 실행하면 그림 13과 같은 출력 결과를 확인할 수 있습니다.

meal = {'name': '나루', 'breakfast': '한정식', 'price': 23.2}
learning = {
  'title': 'Python 문자열 붙이기',
  'desc': 'Python에서 문자열을 붙이는 다양한 방식을 배워보아요.'
}
print("안녕하세요. {name:s}님, 아침 메뉴는 {breakfast}, 가격은 USD {price:.1f}입니다.\n그리고 오늘 학습 주제는 \"{title}\"입니다.\n - 상세설명: {desc}".format(**meal, **learning))
Python

관련자료

Python 문서 StringsFancier Output Formatting을 참고했습니다.

같이 읽으면 좋은 글

Javascript 문자열 자르기 방법 3가지

프레임워크를 막론하고 Javascript를 기반으로 사용한다면 문자열을 자르는 작업은 필수적입니다. 이번엔 Javascript 문자열 자르기 방법 3가지를 알아보겠습니다.

Javascript 문자열 자르기

Javascript에서 문자열을 자르는 방법에는 prototype method인 substring과 slice가 있습니다. 과거에는 substr도 사용했었지만 2018년부로 deprecated 된 상태입니다. 아직 웹 표준에서 사라진 건 아니지만, substr()은 앞으로 사용처가 없어지면 명세에서 제거된다고 합니다. 따라서 substr 사용은 지양하고 substring과 slice를 사용하는 편이 좋습니다.

하지만 기존 substr로 작성된 코드를 substring나 slice로 변경하려면 substr에 대해서도 알고 있어야겠죠? 따라서 3가지 방법 모두 살펴보겠습니다. 우선 substr 사용법을 확인한 후에 substring과 slice를 차례대로 살펴보겠습니다.

substr 사용법

MDN Web Docs에서 명백히 Deprecated 되었음을 알리고 있으며 앞으로 사용하지 말 것을 권장하고 있습니다. substr을 substring이나 slice로 리팩터링 하기 위한 이해의 목적으로 먼저 설명해 드립니다.

const str = '123456789';

console.log(str.substr(1, 3));  // 예상결과: "234"
console.log(str.substr(2));     // 예상결과: "3456789"
JavaScript
그림 1. Javascript 문자열 자르기 substr 사용
그림 1. Javascript 문자열 자르기 substr 사용

substr의 문법은 다음과 같습니다. start는 시작인덱스 값이며, length는 길이입니다. parameter가 1개인 경우는 substring의 경우와 동일한 결과 값을 갖습니다.

substr(start)
substr(start, length)
JavaScript

substring 사용법

substring에는 2가지 파라미터를 입력받게 되어 있습니다. 첫째는 시작 index 값이며, 둘째는 끝 index 값입니다. 첫 index는 리턴 값에 포함되며, 둘째 index는 리턴 값에 포함되지 않습니다. 따라서 첫 인덱스부터 마지막 인덱스 직전 값까지 return 값으로 돌려받게 됩니다.

Line 3에서는 1번 인덱스에 해당하는 값인 “2”부터 3번 인덱스 직전인 “3”까지 “23”을 돌려받습니다.

그리고 Line 4에서는 첫 인덱스가 둘째 인덱스보다 크기 때문에 그 둘이 맞바뀝니다. 즉, 결국은 substring(1, 3)으로 처리되므로 Line 3과 동일한 결과가 출력됩니다.

Line 5에서는 시작 인덱스 2부터 문자열 끝까지 반환됩니다.

Line 6에서 음수는 0으로 치환되어 처리됩니다. 즉, substring(0, 3)과 동일한 결과가 됩니다.

Line 7에서 문자열 길이보다 큰 둘째 인덱스의 값은 str.length로 치환되어 처리됩니다. 따라서 substring(5, 9)와 동일한 결과가 됩니다.

여타의 프로그래밍 언어와 마찬가지로 Javascript에서도 인덱스의 첫 값은 0부터 시작하는 점 잊지 마세요.

const str = '123456789';

console.log(str.substring(1, 3));  // 예상결과: "23"
console.log(str.substring(3, 1));  // 예상결과: "23"
console.log(str.substring(2));     // 예상결과: "3456789"
console.log(str.substring(-3, 3)); // 예상결과: "123"
console.log(str.substring(5, 30)); // 예상결과: "6789"
JavaScript
그림 2. js 문자열 자르기 substring 사용
그림 2. js 문자열 자르기 substring 사용

substring의 문법은 아래와 같습니다. indexStart는 추출하고자 하는 첫 인덱스를 의미하며, indexEnd 기준으로 그 직전 인덱스까지 추출합니다.

substring(indexStart)
substring(indexStart, indexEnd)
JavaScript

slice 사용법

slice 사용법은 substring과 거의 같습니다. 하지만 substring에서는 음수를 0으로 처리하는 한편, slice는 python에서의 문자열 처리 방식처럼 음수 사용이 가능합니다. 그리고 indexStart는 항상 indexEnd보다 작은 값을 가져야 합니다.

Line 3은 substr, substring과 사용법이 같습니다. 해당 인덱스부터 끝까지의 값을 반환합니다.

Line 4는 substring과 사용법과 결과가 동일합니다.

Line 5는 substring에서는 9와 4의 자리가 치환되어 Line 4와 동일하게 처리되지만, slice에서는 빈 문자열을 출력합니다.

Line 6은 문자열의 뒤 3번째부터 문자열 끝까지 반환합니다.

Line 7은 문자열의 뒤 11번째부터 문자열의 뒤 6번째 전까지 반환합니다.

const str = 'The quick brown';

console.log(str.slice(10));      // 예상결과: "brown"
console.log(str.slice(4, 9));    // 예상결과: "quick"
console.log(str.slice(9, 4));    // 예상결과: ""
console.log(str.slice(-3));      // 예상결과: "own"
console.log(str.slice(-11, -6)); // 예상결과: "quick"
JavaScript
그림 3. js 문자열 자르기 slice 사용
그림 3. js 문자열 자르기 slice 사용

slice의 문법은 다음과 같습니다.

slice(indexStart)
slice(indexStart, indexEnd)
JavaScript

Refactoring(리팩터링): substr to substring or slice

기존에 substr로 된 코드를 substring이나 slice로 리팩터링하는 방법을 안내해 드립니다. 이미 위에서 각 사용법에 대해 숙지가 됐다면 충분히 할 수 있는 작업입니다. 어떻게 하면 되는지 살펴보겠습니다.

다음 코드와 같이 끝인덱스 값을 첫인덱스 값 + 길이로 처리해 주면 간단히 해결할 수 있습니다.

const str = '123456789';

console.log(str.substr(1, 3));       // 예상결과: "234"
console.log(str.substring(1, 1+3));  // 예상결과: "234"
console.log(str.slice(1, 1+3));      // 예상결과: "234"
JavaScript
그림 3. 리팩터링: substr to substring 및 substr to slice
그림 3. 리팩터링: substr to substring 및 substr to slice

관련 자료

MDN의 substr 페이지, substring 페이지, slice 페이지를 참고했습니다.

같이 읽으면 좋은 글