기존에 프로젝트는 netlify에 업로드를 했는데 sveltekit은 vercel에 올리는게 더 쉽고 좋은거 같다. SSR

1. 프로젝트를 깃허브에 올린다. 올리는 법 모르면 클릭

2. vercel에 로그인 후 https://vercel.com/dashboard 에서 add new project를 누른다.

3. vercel이 깃에 접근할 수 있도록 접근 권한을 주고 깃허브 리스트에서 올릴 프로젝트를 찾는다. 그리고 import

4.디플로이를 누르면 끝

https://shopify.dev/themes/getting-started/create

다큐먼트에 나와 있는데로 Down theme 설치 완료 후 

shopify theme init

로컬 서버 실행

shopify theme dev --store {store-name}

에러 발생

루비를 다운로드 해야 하나보다.  (루비를 건드려 볼줄이야....)

설치를 해본다. 생각보다 시간이 오래걸린다.

설치를 하고 {store-name}에 내가 사용할 스토어 이름을 넣고 명령어를 실행하니 작동이 된다.

이제 로컬에서 실행이 되는 것이다!

로컬호스트 localhost:9292로 들어가니 비밀번호를 입력하라고 한다. 

비밀번호는 Home 섹션에서 찾아 볼 수 있다

에디터에 수정을 하면 로컬에서 적용된 것을 볼 수 있다. 

shopify theme push --unpublished

이 명령어를 입력하면 퍼블리쉬가 안된체로 테마를 Theme library에 올릴 수 있다. (새로 생성)

ex)

기존에 있는 theme을 업데이트 하고 싶으면 그냥 flag를 빼고 아래 처럼 명령어를 입력하면 된다.

shopify theme push

publish 를 누르면 live로 적용을 시킬 수도 있고 혹은 commend를 통해서 live로 만들 수 있다.

shopify theme publish

Nameserver를 바꾸어주면 DNS를 관리 하는 사이트도 바뀐다. dns를 추가할때 바뀐 사이트에 추가해야한다.

나이가 먹었는지...ㅠㅠ 4년 전의 기억이 흐릿해 지는것 같다. 그래서 사람들이 '남는건 사진 밖에 없다' 라고 하는건가 보다. (남는건 동영상도 있다.) 

그 당시 퍼스에서 생활하던 나는 무작정 비행기를 타고 멜번으로 날아갔다. 그냥 갔겠는가... 사실 목적은 따로 있었다. 호주에서 웹개발을 경험해 보고 싶었기 때문이였고 어떻게든 웹개발을 해볼 수 있을 거라고 생각을 했다.

멜번에 도착했고 체크인 시간이 되지 않아 작은 광장에 새와...(왜 비둘기와 함께 앉아 있었다고 기억하고 있었는지 모르겠다...)  함께 앉아 호텔로 들어갈 수 있기만을 기다렸다. 뭘 할지 정하지도 않고 왔었다. 가진건 퍼스에서 일했던 호텔에서 받은 레퍼런스와 뭐라도 할 수 있을거라고 믿었던 근자감 뿐이였다.  

역시 멜번은 큰 도시였다. 사람도 많았고 빌딩도 높았다. 그래도 공원과 도심이 잘 어울려져 있었다. 호주는 역시 공원이 참 아름다운거 같다.

내가 묵었던 숙소(YHA)인데 로비의 분위기가 꽤 분위기가 좋았다. 

여기서 몇일간 묶으면서 어디로 이사갈지 정하고 있었다. 한창 프로그래밍에 빠져 있을 때고 여기서 일하던 스테프가 룩셈부르크에서 개발자를 하고 있는데 현재는 YHA에서 일하면서 숙박을 해결하고 있다고 했다. 자기도 vuejs(컴퓨터 웹사이트 제작프레임워크)에 관심이 많다고 해서 여러가지 개발에 대한 얘기를 나누었다.

퍼스건 멜번이건 호주는 바다! 무조건 바다로 가는거다! 아침에 편의점에서 파는 싸구려 커피한잔을 하고 트램을 탄다. 어느세 도심이 스쳐지나 점점 멀어져가고 해변이 펼쳐진다.

자연이 아름다워서 그런지 많은 사람들이 수상스포츠를 즐긴다. 하지만 난 수영을 못하는 관계로 무서워서 수상스포츠를 즐기지 못했지만 너무 아쉽다. 

이후 나는 멜번시내에서 사는게 아닌 멜번 북쪽지역으로 이사를 했고 주방보조 일을 무난하게 잡을 수 있었다.  그 북쪽지역엔 멜번 바닷가로 흐르는 강물이 있었는데 너무 산책 하기 좋았고 아름다웠다.

여기에 살다가 나중에는 퍼스에서 일하던 동료의 동생이 산다는 멜번 남쪽 모나쉬 대학교 쪽으로 이사를 갔다. 호주에서 강이나 바다를 보는 낙에 살았는데 거긴 물가가 멀어서 아쉬웠다. 그래서 거기선 자전거를 사서 우버잇을 하며 체력을 달련했는데.. (사실은 돈벌려고 한건데.... 하루에 3번만 배달하면 너무 힘들어서 쉬어야 했다. ㅠㅠ) 주말엔 자전거를 타고 바닷가까지 달렸다. 그런데 거기의 경관은 최고였다!

정말 그냥 걸었다. 미친듯 걸었다. 아름답다고 생각하면 그냥 걷는거다!! ㅋㅋ

이 글을 쓰면서 호주에서 찍은 사진들을 오랫만에 보니 감회가 새롭다. 꿈만 같다고 해야하나... 

그래도 4편까지 쓰면서 올리고 싶었던 사진을 올릴 수 있게되서 다행이다. 사실 그냥 컴퓨터에 묻어두기는 너무 아까워서 공유하고 싶었기 때문이다. 블로그 글도 기억이 생생할때 바로바로 써줘야 감정을 생생하게 전달할 수 있을텐데 오래전의 사진을 올리니 그때의 감정들을 기억해내는게 어렵다.

하지만 29살때 막바지라고 생각하며 모두들 말리던 워킹홀리데이는 후회 하지 않는다. 너무 나도 나에게 있어 그리운 추억이고 아름다운 기억을 나에게 남겨줬다. 거기서 만났던 친구들, 와인팩을 사서 체스 한번 움직일 때 마다 한모금씩 마시는 게임을 해던 기억, 같이 춤추고, 도전했던, 그리고 마음을 힐링해주는 자비롭고 아름다운 자연을 보던 날들,  그 1년은 나에게 보물이다.

그리고 나한테 묻는다. 지금은 행복한가?

기존에 만들었던 프로그램에서는 +page.svelte파일에서 onMount시 서버에서 필요한 데이터를 가져오도록 만들었다.

하지만 sveltekit에 보면 +papge.js나 +page.server.js를 사용하는 예를 볼 수 있다. 

간단하게 위의 코드를 설명하자면 /** @type {import('./$types').PageLoad} */ 부분은 JSDoc이다. 공식문서를 보면 javaDoc과 비슷하다고 하는데 자바는 안해봐서 모르겠지만 JSDoc의 @type 통해서 타입 체킹을 할 수 있다고 한다.

(스벨트킷은 자동으로  $types.d.ts를 생성하며 거기서 load되는 파라매터의 타입을 만들고 그 타입을 import하는 것) 

타입체킹을 하고 싶지 않으면 저 라인을 무시하면 된다. 자세한 내용은 여기 보시면 된다. (https://kit.svelte.dev/docs/types#app)

어째튼 용도는 폴더의 이름으로 url이 리퀘스트 되면  +page.js이 먼저 실행되어 화면에 들어가는 데이터를 +page.svelte파일에 전달해주고 그걸 가지고 랜더링을 한다.

아래는 +page.svelte에서 onMount시 화면에 필요한 데이터를 받아오는 코드이다.

<script>
import {onMount} from 'svelte'

let datas=[];
onMount(async()=>{
  let res = await fetch('https://api.fake-rest.refine.dev/posts')
  datas = await res.json()
  console.log(datas)
})

</script>
{#each datas as data}
  <div>{data.title}</div>
{/each}

페이지 소스를 봤을때 div안이 비어 있다.

다음은 +page.js와 +page.svelte를 나누어서 +page.js에서 데이터를 요청하여 +page.svelte에 전달 하는 경우이다.

+page.js

  export async function load() {
    let res = await fetch('https://api.fake-rest.refine.dev/posts')
    let posts = await res.json()
    return {
      posts
    };
  }

+page.svelte

<script>
  import { error } from '@sveltejs/kit';
  export let data;
</script>
  {#each data.posts as post}
    <div>{post.title}</div>
  {/each}

위에 보듯이 전달은 data 변수를 통해 전달된다.  전의 예제와 다르게 리퀘스트 된 데이터가 페이지 소스에 랜더링 되어 추가된 것을 볼 수있다.

이를 통해 서버사이드랜더링을 할 수 있다! 또한 +page.server.js를 사용하면 서버로서 코드가 실행되며 필요에 따라 클라이언트에 넣지 못하는 민감한 정보를 넣을 수도 있다. 

요약

편도 수술은 좋다. 편도 결석도 안생기고 달고 살았던 고열도 막아주었다.

코골이수술인 목젖 성형과 연구개 수술은 아직 효과를 못보고 오히려 코를 심하게 고는 부작용이 있다. 

(병원에선 두 달간 더 기다려보자고 한다)

저번에 편도제거와 코골이 수술 초기에 관한 글을 쓴적이 있다.

수면 다원검사로 중등도 무호흡이 나와서 편도를 제거하는 것과 더해서 코골이 수술까지 받았다. 

한달이 넘었기 때문에 더 이상 통증은 없다. 하지만 요세 극심한 피로를 느끼고 낮에 조는 현상이 생겼다.

처음에는 이미 코골이 수술을 했기 때문에 코골이 때문은 아니고 다른 이유 때문인줄 알고 이유를 찾아 보았다. 하지만 아무런 이유를 찾을 수 없었고 코골이 어플을 사용해 얼마나 코골이가 좋아졌는지 체크해 보았다. 

밤새 녹음된 파일을 들어보니 코골이가 오히려 더 심해진 것을 알 수 있었다. 이전에는 깊은 잠에 빠져야 코를 골았는데 이번에 녹음된 파일에서는 그냥 잠을 자면 바로 코고는 소리를 들을 수 있었고 코를 안고는 구간을 찾기 어려울 정도 였다. 숨을 더 잘 쉬려고 수술을 했다가 숨쉬기 더 어려워진 것이다.

일단 병원에 찾아가 보았고 아직 수술의 상처가 내부적으로는 아물지 않았기 때문에 두 달만 기다려 보자고 한다. 병원 말처럼 두달 뒤 나아진다면 좋겠지만, 일단 두달을 버티는 자체가 너무 힘들다.

코골이 수술을 하면 1%라도 좋아질 줄 알았지 더 심해질 수도 있는건 상상도 못했다. 인터넷 보니 나아지거나 별 효과를 못본건 있어도 더 악화된건 못봤는데.... 지금으로선 코골이 수술까지 한걸 후회하고 있다. (더 심해진 코골이와 평소에도 연구개를 축소하는 수술 때문에 약간 입천장이 땡기는 느낌-이건 코골이만 좋아졌다면 무시할 수 있을정도인데 ㅠㅠ)

---- 10월 26일 2022 추가----

아직도 코골이는 나아지지 않았음. 수술 이후 깊이 잠들지 않아도 코를 고는 현상이 지속됨. 낮에 잠이오고 일어났을 때 두통과 함께 깨어나는 경우도 있음. 무기력함을 느끼고 이전 보다 집중에 어려움을 느낌. 양압기나 하악전진기가 도움이 된다면 당장에라도 사용하고 싶음.

기존에 시디즈 T50을 사용하고 있었다. 시디즈면 한국에서 꽤 유명한 의자 아닌가... 하지만 쓰면 쓸수록 허리가 너무 아파서 의자를 고르러 시디즈 매장에 갔다.

원래는 T40을 생각했으나 앉아보니 T20이 내 체형에 더 맞는거 같았다.

참고로 내 키는 165 CM정도이다.ㅠ

T30은 예전 회사 다닐때 사용하던 제품이였는데 그때도 사용하면서 허리아픔을 느끼진 않았었다. 하지만 매장에서 기업고객이 아닌 개인 고객에겐 팔지도 않는다고 했다. 어째튼 매장에 있는 의자중에 허리가 등에 완벽하게 닿는 의자였기 때문에 모델명은 낮지만 T20을 구매하기로 했다

3일 뒤 택배가 왔다. 직접 조립해야 한다.

조립이 끝났다. 어렵지는 않다.
그러면 기존에 쓰던 낡은 T50과 비교해보자

위에 사진응 보듯이 등받이가 T20이 더 앞으로 나온걸 볼 수 있다. T50은 보편적으로 시디즈에서 잘나가는 모델이라고 하지만 나는 키가 작아 등받이가 아주 일부만 닿고 있었다.

어째튼T20에 앉아보니 허리가 다 닿아 훨씬 편하다.

T50 저 모델은 원래는 척추를 잡아주는 받힘이 있었는데 개인적으로 아파서 뺏다...근데 동생은 개인적으로 엄청 편했다고 한다.

그래서 원래 T50의 주인이였던 키 178의 동생은 외국에서 저 의자를 아직도 그리워 하고 있다.

의자를 살때 매장에 가서 직접 앉아보는걸 추천한다. 특히 키가 작은 경우 앉맞는 의자에 앉다보면 허리가 금방 버린다. 병원에서 허리에만 몇 백만원 쓴거 같은데... 좀 빨리  맞는 의자를 사서 쓰는게 훨씬 이득이다 ㅠㅠ


참고 - 165에 발 받침대를 쓰고 있음. 안써도 편한데 쓰면 뒤로 완전히 기대서 머리 받치고 사용가능함

파라메터 - 함수(어떤시스템)을 정의하는 하나의 요인

아규먼트 - 함수에 제공되는 값

예를 들면

닦기라는 함수를 만들면 

def 닦기 (도구, 대상):
	도구를 든다.
    	도구로 대상을 3회 문지른다.

여기서 도구와 대상은 닦기라는 시스템의 파라메터이다.

그리고 아규먼트를 통해 실제 값을 제공한다.