월별 글 목록: 2022년 10월월

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>

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

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

LetsEncrypt certbot으로 생성한 인증서 삭제하는 방법

인증서를 발행했는데 쓸 필요가 없어진 인증서를 삭제하고 싶을 때 아래의 명령어를 사용하면 됩니다.
대다수는 그냥 내비두겠지만, 나중에 혼란이 생길 수 있으므로 저는 삭제하기로 했습니다.

certbot delete --cert-name 도메인주소

delete –cert-name을 함께 적어주어야 합니다.

The following certificate(s) are selected for deletion:

  * test.osg.kr

Are you sure you want to delete the above certificate(s)?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(Y)es/(N)o: Y
Deleted all files relating to certificate test.osg.kr.

명령을 내리면 삭제할 것인지 물어보고, Y를 눌러서 응답하면 삭제됩니다.

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와 같은 메시지가 나와서 어려움을 겪으신 분들께 도움이 되길 바랍니다.

티스토리 북클럽 스킨 h1 두 개 발생하는 문제 해결 및 SEO 개선 방법

티스토리 북클럽 스킨에서 h1 태그 두 개 나와서 SEO가 제대로 되지 않는 문제를 겪는 분들 계시죠.
원인과 해결 방법까지 모두 알려드리겠습니다.

원인

북클럽 스킨에 h1 태그가 2개 나오는 것은, 버그입니다. 명백하게 스킨 제작 단계에서 SEO 이슈를 고려하지 않고 만들어서 생긴 부분인데, 아직도 해당 문제를 겪는 분들이 계신 걸 보면 티스토리 측은 딱히 개선의 의지가 없어보이네요.

h1 태그가 2개 이상이 되면 안되는 이유

기본적으로 검색 엔진들은 웹 페이지를 Bot이 크롤링해서 분석합니다.

html 태그에서 h1~h6 태그는 6단계의 제목을 의미합니다. 그런데 h1이 2개다. 그럼 무슨 문제가 생기냐면, 하나의 웹 페이지는 하나의 큰 제목 하에 구성돼야 하는데, 2개로 구성된 것으로 파악합니다. 그러면 첫번째 h1이 중요한지, 두번째 h1이 중요한지 크롤러는 파악하기 어려워집니다. Mozilla의 Document에서도 페이지의 목적을 가장 잘 설명하는 h1 태그 1개를 사용할 것을 권장하고 있습니다.

한마디로 검색엔진은 h1이 여러 개인 문서를 싫어합니다. 따라서, h1 태그가 2개 이상 사용되면 해당 페이지는 검색 결과에 노출될 확률이 줄어듭니다. 특히 수익형 블로그를 하고 있다면, h1 태그는 해당 페이지에서 하나만 작동하도록 해야 합니다.

해결방법

티스토리 블로그 관리자 페이지에서 스킨 편집으로 들어갑니다.
오른쪽 화면에서 HTML 편집 버튼을 눌러줍니다.

스킨 편집 화면에서 html 편집버튼 위치
스킨 편집 화면에서 html 편집버튼 위치

아래에 형광펜으로 색칠해 놓은 h1 보이시나요? 블로그 링크와 블로그 타이틀이 들어가는 구간이죠. 라인 수는 각자 다를 수 있습니다.

id="header" 내의 h1 태그 찾기
id=”header” 내의 h1 태그 찾기

h1을 아래와 같이 div class=”blog-header”로 변경해 줍니다. </h1>도 </div>로 변경해 주셔야 합니다. html은 기본적으로 열고 닫고를 잘 해 주어야 하거든요. 당연히 검색엔진의 봇들도 html 규칙을 잘 지키는지 봅니다. 그리고 블로그 타이들이 들어가는 이곳이 아닌 다른 곳을 수정하면 엄한 곳에 수정사항이 생기니 주의해서 작업하세요.

h1 태그 div class="blog-header"로 변경하기
h1 태그 div class=”blog-header”로 변경하기

이제 HTML 수정은 끝났습니다. 상단의 CSS 탭을 선택합니다. Ctrl + F를 눌러서 검색창을 열고 #header h1이라고 입력하면, 5개가 검색됐다고 나옵니다. 5군데를 모두 고쳐주셔야 합니다.

CSS에서 #header h1 찾기
CSS에서 #header h1 찾기

#header h1을 #header .blog-header로 바꿔주시면 됩니다. #header h1이 아닌 다른 곳에 있는 h1을 고치면 안됩니다. 주의해서 작업하세요.

CSS에서 #header h1을 #header .blog-header로 고치기
CSS에서 #header h1을 #header .blog-header로 고치기

이제 3개를 고쳤으니 2개 더 남았죠. 찾아보겠습니다. 네 아직 2개 더 남아있다고 나오죠. 이번에는 @media screen의 max-width:1080px 아래의 #header h1을 #header .blog-header로 변경해 줍니다.

@media screen max-width:1080px의 #header h1 찾기
@media screen max-width:1080px의 #header h1 찾기
@media screen max-width:1080px의 #header h1을 #header .blog-header로 변경하기
@media screen max-width:1080px의 #header h1을 #header .blog-header로 변경하기

마지막으로 1개 더 찾아보겠습니다. 역시 1개가 남아있습니다.

@media screen max-width:767px의 #header h1 찾기
@media screen max-width:767px의 #header h1 찾기

이번엔 max-width:767px의 #header h1을 #header .blog-header로 변경해 줍니다.

@media screen max-width:767px의 #header h1을 #header .blog-header로 변경하기
@media screen max-width:767px의 #header h1을 #header .blog-header로 변경하기

다 됐습니다. 고생하셨습니다. 이제 마지막으로 적용 버튼 눌러서 적용해 주시면 h1 태그는 페이지에 하나만 유지하게 됩니다.

사실 blog-header라는 이름은 여러분이 원하는 이름으로 알아보기 쉽게 바꿔서 사용하셔도 됩니다. 대신 위에서 blog-header로 고쳤던 부분에 모두 적용해 주셔야 합니다.

티스토리 블로그에서 북클럽 스킨 사용하는 분들께 도움이 되길 바랍니다.