카테고리 보관물: 개발

개발과 관련된 이야기들~*

svelte 현재 url 경로 구하기

svelte에서는 page라는 스토어에서 현재 페이지에 대한 정보가 보관되고 있습니다.
import 하는 방법은 아래와 같습니다.

import {page} from "$app/stores";

$page.url.pathname을 이용하면 “/about”과 같이 현재 url을 얻을 수 있습니다.

과거에는 $page.path 였는데, 현재 제가 확인한 버전 svelte 3.44.0 기준으로는 $page.url.pathname을 이용하셔야 합니다.
아래와 같이 한다면 현재 경로를 화면에서 확인할 수 있습니다.

<script>
import {page} from "$app/stores";
</script>

<div>{$page.url.pathname}</div>

네비게이션 메뉴에서 현재 페이지의 링크를 굵게 표시하고 싶다면 아래와 같이 처리할 수 있습니다.

<script>
  import {page} from '$app/stores';
</script>

<header>
  <nav>
    <a href="/" class="{$page.url.pathname === '/' ? 'selected' : ''}">홈페이지</a>
    <a href="/about" class="{$page.url.pathname === '/about' ? 'selected' : ''}">이 사이트는?</a>
  </nav>
</header>
<slot/>

<style>
.selected {
  font-weight: bold;
}
</style>

간단한 $page.url.pathname 소개였습니다.

SvelteKit 라우팅 +page와 +layout 사용 방법

우선 SvelteKit은 현재 RC 단계에 있습니다. 현재 최신 버전은 1.0.0-next.542이네요.
라우팅 구조와 관련된 것들을 찾아보다보니, 과거와 현재는 조금 달라져 있었습니다.
이를테면 기본 라우팅 페이지가 index.svelte 였던 것이, 현재는 +page.svelte 로 바뀌었다든지 말입니다.
__layout.svelte도 +layout.svelte로 변경되었죠.
아직 정식 릴리즈가 된 게 아니라서 앞으로 또 무슨 변화가 일어날 지 모르겠지만, 그럼에도 불구하고 간단한 라우팅 방식은 매우 맘에 드네요.
그럼 SvelteKit의 라우팅 구조 간단히 살펴보겠습니다.

라우팅 경로 = 디렉토리 경로

디렉토리 경로를 그대로 라우팅 경로로 사용합니다.

src/routes/+page.svelte 파일이 바로 루트 경로(/)가 됩니다.
src/routes/about/+page.svelte 파일은 /about 이라는 경로가 됩니다.

그럼 +page.svelte 파일이 무엇인지 확인해 봅시다.

+page.svelte

우선 src/routes 하위의 디렉토리에 있는 모든 +page.svelte가 index 파일의 역할을 합니다.

+layout.svelte

웹 페이지의 공통 레이아웃에 대한 설정입니다. 아래 코드는 SvelteKit 공식문서에서 가져왔습니다.

<nav>
  <a href="/">홈페이지</a>
  <a href="/about">오솔길은?</a>
  <a href="/settings">설정</a>
</nav>

<slot></slot>

위의 코드에서 nav 영역은 공통으로 들어가는 부분이고, slot이 각 페이지마다 다르게 들어가는 부분입니다. 위와 같이 +layout을 설정하면, 네비게이션이 모든 페이지에 공통으로 들어가고 각 페이지는 slot에 들어가게 됩니다.

<h1>홈페이지</h1>

홈페이지를 위와 같이 작성하고, 이제 아래와 같이 /about 페이지를 작성해 보겠습니다.

<h1>오솔길은?</h1>

/about를 브라우저로 열면, 다음과 같이 slot 부분에 src/routes/about/+page.svelte의 내용이 들어갑니다.

<nav>
  <a href="/">홈페이지</a>
  <a href="/about">오솔길은?</a>
  <a href="/settings">설정</a>
</nav>

<h1>오솔길은?</h1>

중첩 +layout

+layout을 각 라우팅에서 사용하면 중첩하여 사용할 수 있습니다. 이를테면, src/routes/about/+layout.svelte를 작성하면, about 하위에 있는 +page는 해당 레이아웃을 추가 적용받게 된다.
예를들어 about 하위에 introduction 이라는 페이지가 더 있는 경우 +layout가 있다고 가정해 봅시다.

<nav>
  <a href="/about">오솔길은?</a>
  <a href="/about/introduction">소개</a>
<nav>

<slot></slot>

그리고 introduction을 다음과 같이 작성해 줍니다.

<h1>소개</h1>

브라우저에서 /about/introduction을 열면 아래와 같은 페이지가 열립니다.

<nav>
  <a href="/">홈페이지</a>
  <a href="/about">오솔길은?</a>
  <a href="/settings">설정</a>
</nav>

<nav>
  <a href="/about">오솔길은?</a>
  <a href="/about/introduction">소개</a>
<nav>

<h1>소개</h1>

스타일링만 잘 해 주면 사용자가 접근하기 좋은 네비게이션이 완성되겠죠.

SvelteKit을 처음 사용하면서 저는+page.svelte가 뭐지? 하는 궁금함에 공식 문서 확인하다가 알게된 내용입니다.
자세한 내용은 https://kit.svelte.dev/docs/routing을 확인하시면 됩니다.
처음 SvelteKit 접해본 분들께 도움이 되길 바랍니다.

전기요금 계산기를 만들었어요

이번에 처음 접하게 된 SvelteKit을 활용하여 전기요금 계산기를 만들었습니다.
정말 그동안의 React, Vue, Angular를 돌아보지 않게 만들 정도의 작품이라는 생각이 듭니다.
Svelte에 대한 감탄은 그만하고, 전기요금 계산기에 대해 간단히 설명드릴게요.

누진요금 계산원리

확실하게 어떤 원리로 누진요금이 계산되는지 알 수 있습니다. 누진 단계별로 요금이 계산되어 각 누진요금이 어떻게 되는지 합계는 어떻게 되는지도 한 눈에 볼 수 있습니다. 너무 복잡하다고 생각하시는 분들은 그냥 이용전력량과 해당 월만 선택하시면 간단히 전기요금을 확인하실 수 있습니다.

모바일 & PC 지원

휴대폰과 데스크탑 모두 지원합니다. 너무 오래된 장비만 아니라면 이용하기 어렵지 않을 것입니다.

향후 계획

이후에는 전기요금 관련 정보들을 보강하고, 추가 기능 개발도 이어갈 예정입니다.

전기요금 계산기 링크는 여기 있습니다.

https://save.osg.kr

svelte 컴포넌트 tag 사이의 내용 slot으로 전달받기

컴포넌트 안에 들어갈 내용을 props를 통해서 전달하지 않고 그대로 tag를 모두 전달하고 싶다면, slot을 사용하면 됩니다.

예를 들어, 버튼을 하나 만든다고 가정해 보겠습니다. main.svelte에서 Button 컴포넌트를 이용하는 경우를 두 가지 살펴보겠습니다. 첫째는 아래와 같이 태그 사이에 버튼의 이름을 적어주는 것입니다.

<PushButton>확인하기<Push/Button>

둘째는 아래와 같이 props로 전달하는 방식입니다.

<PushButton name="확인하기"/>

props를 통해서 전달하기 좋은 것들은 어떤 상태 값들일 것입니다. 대신에 props를 통해서 특정 태그를 전달하거나 하기는 적절하지 않죠. 만약 Button 태그 사이에 넣는 태그가 경우에 따라 달라지고, 전달한 태그를 보여줘야 한다면, 망설임 없이 첫번째 방법으로 처리해야겠죠. 그럴 때 사용하는 것이 slot 태그입니다. 첫번째 경우는 아래와 같이 slot을 이용해서 작성할 수 있습니다.

<button><slot/></button>

두번째의 경우에는 다음과 같이 전달받은 props를 원하는 곳에 출력하게 하면 되겠죠.

<script>
  export let name;
</script>

<button>{name}</button>

경우에 따라 적절한 방법을 사용하면 되겠습니다. 그리고 본인이 더 선호하는 방법이 있다면 양자택일이 가능할 땐 원하는 방식을 선택하셔도 되겠죠.

여하튼 항상 개발자는 고민하는 자리에 있게 됩니다. 어떤 것이 더 나을지도 고민해야 하고, 우리 팀의 약속도 생각해야하죠. 즐거운 개발 하시길 바랍니다.

vite로 배포용 빌드하고 테스팅 하는 방법

열심히 개발을 하고 나면 배포를 해야겠죠.
package.json의 scripts에 보면 build와 preview가 있는데, 이 녀석들입니다.

다음과 같이 실행하면 현재 개발한 프로젝트가 dist 하위 디렉토리에 배포본으로 생성됩니다.

yarn build
or
vite build

배포본에 대해 서버에 띄워서 확인을 해야 하는데, 그 전에 로컬에서 테스트할 수 있으면 좋겠죠. 그 때 사용하는 것이 preview 입니다.

yarn preview
or
vite preview

어차피 yarn을 쓰나 vite를 쓰나 명령어에 차이는 없으니, 편한 방식으로 이용하면 되겠습니다.

vite cli 명령어 호스트와 포트 설정하기

Vite를 번들러로 사용할 때, yarn dev 하면 개발 서버가 구동된다. 호스트는 기본으로 localhost로 설정되고, 기본 포트는 5173 으로 설정된다.

localhost로만 해 두는 경우 개발 서버를 띄운 곳에서만 접속이 가능하므로 외부 접속을 원한다면 호스트를 설정해 주어야 한다. 현 개발 서버의 IP 주소가 192.168.0.10 이라면 아래와 같이 명령하면 된다. 포트도 5173이 싫고 4000 이라고 하고 싶다면 아래와 같이 하면 된다.

vite --host 0.0.0.0 --port 4000

하지만 늘 그렇듯, 우린 귀찮은 걸 싫어한다. yarn dev 한 방에도 실행되게 하려면 당연히 package.json을 수정해주면 된다. package.json의 scripts는 다음과 같은 내용으로 되어 있다.

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
},

위에서 사용한 명령어를 dev에 그대로 넣어주면 된다.

"scripts": {
    "dev": "vite --host 0.0.0.0 --port 4000",
    "build": "vite build",
    "preview": "vite preview"
},

이제는 yarn dev만 입력해서 개발 서버를 띄우면 된다.
이제 localhost로도 접속할 수 있고, 192.168.0.10으로도 접속이 가능하다.

Svelte 프로젝트 새로 만들기

Svelte 처음으로 접해 보았습니다. 대체 얼마나 대단하길래 다들 난리인건지 말입니다.
프로젝트 새로 만드는 방법 소개합니다. 사실 소개라기보단 그냥 기록용이죠.

일단 Svelte는 Svelte 제작자인 Rich Harris가 만든 RollUp에서 SnowPack으로, 그리고 현재는 에반 유의 Vite를 공식 번들러로 사용하고 있습니다. 자신이 만든 RollUp에 목숨걸지 않고, 길지 않은 기간에 공식 번들러를 저렇게 변경했다는 건 그만큼 변화에 빠르게 대응한 것이라는 점, 그리고 그의 유연성을 엿보게 됩니다.

yarn create vite project_name
or
npm create vite project_name

위의 명령어를 입력하면, framework를 어떻게 할 것인지 물어봅니다. Svelte를 선택합니다.

이제 Variant를 선택할 차례입니다. JavaScript, TypeScript, SvelteKit 중에 선택하면 됩니다.

cd project_name

위의 명령어로 프로젝트 디렉토리로 이동해서, 개발 서버를 띄우려면 다음과 같이 합니다.

yarn
yarn dev
or
npm install
npm run dev

그리고 배포를 원한다면 아래와 같이 하면 dist 디렉토리에 배포할 녀석들이 생깁니다.

yarn build
or
npm run build

Svelte 프로젝트 생성과 개발서버 구동 그리고 배포 방법까지 간단히 살펴봤습니다.
간단하네요. Svelte를 이용한 어플리케이션은 가볍다고 하는데, 얼마나 가벼운지 이제 조금씩 써 봐야 하겠네요.

역시 React, Vue, Angular는 종착점이 아니었죠. 또, Svelte도 생태계가 무르익을 즈음이면 새로운 녀석이 나타나지 않을까 조심스레 생각해 봅니다.

Python unittest 모든 테스트 한 번에 하는 방법

파이썬으로 유닛테스트 처음 해 보는 분들 계시죠.
파일 하나씩은 실행시켜봤는데, 한 번에 모든 테스트 파일 실행하고 싶을 때 어떻게 해야 하는지 알려드릴게요.

테스트 실행하기

아래 명령어 한 줄이면 끝납니다. 프로젝트 루트에서 실행하도록 하세요.

python -m unittest

실행했는데, 아래와 같은 결과가 나왔나요? 그렇다면 이렇게 된 2가지 가능성이 있는데, 그 두 가지 확인해 보겠습니다.

----------------------------------------------------------------------
Ran 0 tests in 0.000s

OK

해결해야 할 이슈 2가지

파일이름

테스트 파일 이름은 test_로 시작해야 합니다. 그렇지 않으면 unittest가 파일을 찾을 수 없어요.

__init__.py

테스트 파일이 있는 경로에 __init__.py가 없다면 꼭 만들어 주세요. 아래 한 줄로 끝나는 거 아시죠.

touch __init__.py

파이썬의 unittest 한 번에 하는 방법 확인해 봤습니다.
동일한 이슈 겪고 계신 분들께 도움이 되길 바랍니다.

git 기본 브랜치 master에서 main으로 변경하기

master냐 main이냐 등의 여러 논란 끝에 master를 사용하지 않는 분위기죠.
git init으로 초기화 했을 때 메인 브랜치를 main으로 설정하는 방법 확인해 보겠습니다.

기본 브랜치 설정 확인

우선 git init을 했을 때 별다른 말 없이 빈 Git 리포지터리를 만들었다고 한다면, 이미 메인 브랜치 이름에 대한 설정이 돼 있다는 것을 의미합니다.

만약 git init을 했는데, 아래와 같은 힌트 메시지가 나온다면, 기본 브랜치 값 설정이 안 된 상태라는 의미입니다.

hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint: 
hint: 	git config --global init.defaultBranch <name>
hint: 
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint: 
hint: 	git branch -m <name>

초기화하는 방법은 2가지가 있습니다.

명령어로 기본 브랜치 변경하기

위에서 힌트를 통해 알려주는 대로 명령어를 한 줄 입력하는 방식입니다.

git config --global init.defaultBranch main

설정파일 편집해서 기본 브랜치 변경하기

~/.gitconfig 파일을 열어서 아래의 내용을 넣어주는 것입니다.

[init]
  defaultBranch = main

현 리포지터리의 기본 브랜치만 변경하기

혹은, 기본설정은 그대로 두고, 현재 생성한 리포지터리의 기본 브랜치 이름만 바꾸고 싶다면 다음과 같이 명령합니다.

git branch -m main

IntelliJ IDEA 원격 개발 연동하기

혹시 IntelliJ IDEA Backend 원격 접속에 어려움을 겪고 계신가요.
원격 서버에 접속하는 방법을 간단히 요약해 보겠습니다.

원격 서버로 사용하는 머신이 Windows나 MacOS는 아직 지원을 하지 않습니다. 참고로 저의 개발 머신은 우분투 리눅스를 사용하고 있으므로, 가능합니다. Windows나 MacOS는 이후에 지원한다고 하니 참고하시기 바랍니다.

Jetbrains에서 IntelliJ IDEA로 원격개발이 가능하도록 기능이 추가된지도 시간이 좀 흘렀습니다. 저는 종종 주 작업 장비에서 작업하지 못할 때 사용하는데, 꽤 유용합니다. IntelliJ IDEA 구독을 연장한 이유가 이것 때문이었습니다. 자, 각설하고 본론으로 들어가겠습니다.

우선 클라이언트의 ssh 개인키와 공개키 쌍을 만듭니다. ssh-keygen 후 경로의 조건을 변경하지 않으면, ~/.ssh/id_rsa 라는 private key가 생성되고, 이와 동시에 id_rsa.pub라는 공개키도 생성됩니다. 이렇게 생성된 것을 가정하고 다음 단계로 넘어가겠습니다.

cd ~/.ssh
ssh-keygen

첫째, 클라이언트의 공개키 ~/.ssh/id_rsa.pub의 내용을 서버의 ~/.ssh/authorized_key에 추가해 줍니다. 이렇게 해 두면 클라이언트에서 서버에 바로 접근할 수 있습니다. 말 그대로 해당 클라이언트의 키를 인증해 주는 과정입니다.

vi ~/.ssh/authorized_key

둘째, IntelliJ IDEA에서 Remote Development의 Connect via SSH를 선택합니다.

Remote Development 진입화면
Remote Development 진입화면

셋째, Connection에는 New Connection을 선택해 주시고요, ssh 연결에 필요한 계정명 osolgil을 Username에, 주소 192.168.0.38은 Host에, ssh 포트 번호 22를 Port에 입력해 줍니다. 이제 우측 하단의 Check Connection and Continue를 선택해 줍니다. 이미 클라이언트의 공개키를 서버에 인증키로 등록해 두었으므로 별도로 private key를 선택하지 않아도 됩니다.

이제 성공적으로 연결됐다는 메시지와 함께 앞서 입력했던 접속 경로가 나오고, IDE 버전이 나옵니다. Back-end의 프로젝트 경로를 설정해 줍니다. 우측의 폴더 아이콘을 누르면 경로를 선택할 수 있습니다. 선택 후 우측 하단의 Download and Start IDE를 누르면 원격 IDE를 다운 받고, 프로젝트가 열립니다.

이제 원격으로 개발하시면 됩니다.

원격 접속이 안 돼서 failed to connect to IDE backend connection refused와 같은 메시지가 나와서 어려움을 겪으신 분들께 도움이 되길 바랍니다.