sveltekit을 vercel에 올리기(엄청 쉬움)

Computer 관심/Svelte|2023. 1. 8. 21:08
반응형

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

 

 

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

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

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

4.디플로이를 누르면 끝

 

댓글()

쇼피파이 Theme 개발 시작하기

Computer 관심/쇼피파이|2023. 1. 3. 15:50
반응형

 

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

 

Create a theme

Follow this tutorial to learn how to set up your development environment and build a new theme using our reference theme, Dawn.

shopify.dev

 

 

다큐먼트에 나와 있는데로 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

댓글()

DNS관리

Computer 관심|2022. 10. 28. 16:11
반응형

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

댓글()

[sveltekit] +page.js가 필요한 이유

Computer 관심/Svelte|2022. 10. 8. 22:56
반응형

기존에 만들었던 프로그램에서는 +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를 사용하면 서버로서 코드가 실행되며 필요에 따라 클라이언트에 넣지 못하는 민감한 정보를 넣을 수도 있다. 

댓글()

파라메터와 아규먼트

Computer 관심/이것저것|2022. 9. 18. 14:38
반응형

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

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

 

예를 들면

 

닦기라는 함수를 만들면 

 

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

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

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

댓글()

해외(유럽, 캐나다) 개발자에 대한 주저리 주저리

Computer 관심/이것저것|2022. 8. 21. 19:34
반응형

2017년 호주에 있을 때 일이다. 개발자를 5개월간 맛만 보고 그만둔 뒤 게스트하우스에서 살면서 여러사람들을 만났다. 현재는 모르겠지만 퍼스는 유난히 유럽에서 온 사람들이 동양사람보다 많았는데. 나한테 오기전에 하던 일을 물어봤다. 나는 IT개발자라고 했고 "우와 너 돈 정말 많이 벌었겠네!" 유럽애들이 감탄했던 기억이 있다.

 

하지만 현실은 국비지원 학원에서 찍어져나온 비전공 코더로 당시 세후 170에 미치지 않는 월급을 받았었다. 그런데 유럽애들은 프로그래머에 대해 너무 멋진 직업이라 생각을 하고 있었다. 그 당시 나는 뷰 vuejs 에 대해 관심을 가졌었고 어떻게 하다가 룩셈브루크에서 온 프론트엔드 개발자를 알게 되었고, 그 또한 뷰에 관심을 가지고 있었기 때문에 재미있게 대화를 나눌 수 있었다. 그런데 놀랐던 점은 2017년 당시 코로나 이전 인데도 그 친구가 다니는 회사의 복지가 놀라웠다. 

금요일은 맥주데이다. 와서 맥주 마시고 동료랑 이야기 하면 된다. 강제적 야근은 없다. 그리고 스스로도 야근을 안하려고 한다. 

 

그 친구는 "프로그래머는 지금 유럽에서 Rock star야" 이렇게 말했다. 신입이 조금 힘들지만 신입만 벗어나면 여기저기에서 개발자를 모셔올려고 난리라고 했다. 특히 유럽의 경우 국가에 상관 없이 일을 할 수 있기 때문에 유럽 어디든 일을 할 수 있다고 했다.  

 

특히 관심이 갔던 곳은 독일의 베들린이 였다. 영어권 국가에 비해 직업에 워킹 비자를 얻기 쉬운 국가였으며 (특히 호주) 비용이 꽤 들지만 부트캠프를 거치면 그 부트캠프가 직업을 구하는 것도 도와주는 과정도 있었다.  베를린 IT 회사는 워낙에 개발자들이 각국에서 온 경우가 많아 업무에 영어를 사용한다고 한다. 또한 경력을 쌓을 인정받고 다른 국가로 이동하기 쉽다. 

 

이때 관심이 있었던 부트캠프는 여기였다.

https://www.spiced-academy.com/en

 

Spiced Academy | Your new career starts here

Kickstart your new career with our intensive, on-site tech programs in Web Development and Data Science.

www.spiced-academy.com

웹 개발 과정 12주에 1,000만원 ㄷㄷ (7,800 유로)

데이터 사이언스 는 더 비싸다 12주 1300만원 (9,800유로)

10시 부터 6시까지 빡세긴 하다.

 

얼마전 태국에서 세르비아 출신 파이썬 서버 개발자와 얘기 해봤는데 70,000 - 80,000 달러를 받고 일을 하고 있다고 했다. 자기 나라 물가가 낮기 때문에 아주 풍족하게 살 수 있다고 했다. 그 사람은 강력하게 유럽에서 커리어를 시도 해보라 했는데 ㅎㅎ 모르겠다.

 

동생은 한국에서 대학교를 나오지 않고 국비 개발 학원을 통해 직업을 구하려고 했다. 완벽하게 실패했다. 지금도 그런지 모르지만 그 당시 학력이 고졸이라고 채용이 안된다는 거였다. 그리고 캐나다로 워킹홀리데이를 떠나 지금의 부인을 만나고 개발자로 일하고 있는데 작은 자신의 연봉이 캐나다에서 더 오래 일한(디자인 계통) 부인보다 높아져서 부인이 자기 연봉에 대해 불평 한다고 한다. 

 

이런 잡생각 주저리 주저리에 대한 결론은...

나이가 30대 이하면 주저하지 말고 해외 IT 개발자를 도전하면 좋을거 같다.

사실인지 모르겠으나 경력을 쌓고 워킹홀리데이로 캐나다 IT 회사에 컨텍을 하고 가서 1년 일하면 영주권도 얻을 자격이 생긴다 들은거 같다.  

 

 

 

-----------광고-----------

독일 친구가 부탁 해서 씁니다.

독일유학 정보와 독일어 교육에 자신있는 친구입니다. 한국어 아주 능통!

 

독일어 온라인 과외 (1:1)/독일 유학,워홀,어학,직장&이민 준비 완벽히 도와드립니다!

안녕하세요! 탓샤 입니다. 

독일어 과외 A1-C2까지 진행하고 있습니다. 

독일어를 처음 시작하시는분,Telc,괴테,Testdaf,DSH 시험, 인터뷰 준비하시는분들 모두 환영합니다! 

독일어 과외는 현재 코로나 인해 스카이프이나 줌으로 진행중 입니다.

대면 수업 원하시면 상의를 통해 결정 가능합니다.

1회, 1시간, 4만원입니다.
과외는 한달 기준으로 주 1-5회 등 모두 자유롭게 선택 가능하며

주 1-3회: 10% 할인 

주 4-5회: 20% 할인

해드립니다.  

 

주 5회의 경우 레벨 당 8주 목표로 수업 진행합니다.

저와 함께 1년 열심히 하시면 왕초보에서 독일 원어민과 큰 문제 없이 대화가 가능한 B2레벨까지

갈 수 있습니다.

 

과외를 통해서 더 정확한 발음으로 교정도 받고 독일인이 사용하는 자연스러운 문장을 배울 수 있습니다.

기왕 독일어를 배우시려면, 제대로 배우세요!


저의 대해서 말하자면: 

-독일 태생
-독일,초,중,고, 대학교 졸업
-경희대 썸머 스쿨 
-외대 교환학생 
-서울대학교 어학연수 
-서울에서 2년 6개월 어학연수 
-한국 대학원 준비중
-독일어번역일
-유학원직원
-한국어와 영어 가능
-2016년부터 지금까지 초,중,고, 대학생, 현대 삼성 직장인 총 70명 이상 과외
-학생들 연령대: 8~50세
-과외 경력: 총 7년

저의 과외는 이런분들께 추천합니다!
-기초부터 독일어를 공부하고 싶으신분
-취미로 독일어를 배우고 싶으신분
-자격증 시험을 준비하시는분
-어학연수/워킹홀리데이/독일유학 위해 독일어를 공부하시는 분 및 도움이 필요하신 분
-독일 조기유학준비 또는 독일학교 다니신분 

 

교재는 걱정하지 마세요~
🌟교재들은 제가 전부 준비합니다.

관심 있으신분은 연락 부탁드립니다!

 

블로그 글 보고 연락 드렸다고 하시면 됩니다~

 

카카오톡: thatsha1025

 

 

댓글()

[flask] sqlalchemy로 디비 입력시 None 에러

Computer 관심/Flask|2022. 6. 28. 23:16
반응형

sqlalchemy로 디비에 정보가 none이 들어가게 되면 에러가 발생하게 된다. 

그래서 디비에 들어가는 orm을 만들기 전에 아래처럼 체크를 하여 none이 있으면 다른 값으로 바꾸어서 넣어준다.

그 전에 pandas를 사용할 때는 none을 다른 값으로 바꾸어주는 함수를 사용했는데 

아래의 방법이 더 나은것 같다. 

 

if inflow_product['customFields']['custom8'] == "part" or inflow_product['customFields']['custom8'] == "Part" :
                inflow_product['customFields']['custom8'] = True
            else:
                inflow_product['customFields']['custom8'] = False
            
            # checking none
            name = inflow_product['name']
            description = inflow_product['description'] or 'NO INFO'
            size = inflow_product['customFields']['custom3'] or 'NO INFO'
            if inflow_product['defaultPrice'] is None:
                price = 0
            else:
                price = inflow_product['defaultPrice']['unitPrice'] or 0
            
            if inflow_product['defaultImage'] is None:
                img_url = '/favicon.png'
            else:
                img_url = inflow_product['defaultImage']['originalUrl'] or '/favicon.png'
                
            material=inflow_product['customFields']['custom4'] or 'no info'
            is_part = inflow_product['customFields']['custom8'] or False
            discount_rate = inflow_product['customFields']['custom2'] or 0

            if not product_info:
                print('new product')
                counts['insert'] = counts['insert'] + 1 
                s1 = ProductInfo(article=name.strip(), description=description,size=size,\
                        price=price, img_url=img_url, material =material, is_part=is_part)
                try:
                    s1.online_shop = False
                    s1.discount_rate = discount_rate
                except Exception as e:
                    return(e)
                db.session.add(s1)      
            else:
                print('existing product')
                counts['update'] = counts['update'] + 1
                data_to_update = dict(article = name.strip(), description = description, size=size,\
                        price = price, img_url=img_url, material=material, is_part=is_part)  
                try:
                    data_to_update['discount_rate'] = discount_rate  
                    data_to_update['online_shop'] = product_info.online_shop or False
                    
                except Exception as e:    
                    return(e)
                db.session.query(ProductInfo).filter_by(article=name).update(data_to_update)
            db.session.commit()

댓글()

[svelte] svelte 버전 업그레이드

Computer 관심/Svelte|2022. 6. 25. 00:26
반응형

npm update

댓글()