기타치는 개발자의 야매 가이드

$: 이게 무엇인가?

Svelte에서 $:는 반응성 선언(reactive declarations)을 나타냅니다.

반응성 선언을 사용하면 변수나 표현식이 변경될 때마다 자동으로 업데이트되는 코드를 작성할 수 있습니다.

예를들어

$: ({ postArr } = data); 는 data 객체의 변경을 감지하여 자동으로

postArr 변수를 업데이트하도록 지시하는 코드입니다.

이 구문의 각 부분의 의미는 다음과 같습니다.

$: - 반응성 선언을 시작합니다.
({ postArr } = data) - 객체 구조 분해 할당(object destructuring assignment)를 사용하여 

data 객체에서 postArr 속성을 가져옵니다.

결과적으로, data 객체가 변경될 때마다 postArr 변수가 자동으로 업데이트되어 해당 변경사항을 반영합니다. 

이를 통해 Svelte 컴포넌트에서 데이터가 변경되는 경우 자동으로 UI를 업데이트할 수 있습니다.

조금더 자세한 내용은

https://beomy.github.io/tech/svelte/reactivity-syntax/

이 페이지를 참고하시면 좋을 것 같습니다.

요즘 aws ec2 docker nginx svelteKit 이렇게 해보고 있는데

일단 build 경로에 대해 이야기 해보자

빌드경로가 다른 블로그나 사이트에선 /app/build에 있다는데 왜 안나올까 한다

일단 svelte.config.js 파일에서

이렇게 되어 있으면 별도로 빌드 경로를 지정해 주지 않는이상 .svelte-kit 에만 빌드 파일이 

만들어 지는것 같다.

따로 경로 지정해 줘도 안먹히는거 같고

그러다가 nginx 한번에 연결시키는건 포기하고 

사실 프록시 할필요도 딱히 없고 해서 단독으로 올려보려고 하는데

node로 올리면 된다는 글을 보았다. 

그런데

node build/index.js 뭐 이런명령어를 치라는데

안먹힌다

일단 뭐가 문제일까 생각해보니

build 경로도 없고 index.js 파일은 .svelte-kit 폴더의 아웃풋 안에 서버폴더 안에 있었다.

다시 여기저기 작은 svelte 생태계를 찾아 보니

svelte.config.js 파일의 어댑터를 노드로 설정을 해야 한다고 한다

그래 어댑터가 오토로 되어 있어서 자동으로 막 해준다고 하는데 

이젠 명확히 어떤 서버에 올릴지 목적이 생겼지 않은가 svelteKit 프로젝트를 node서버에 올리기 위해

npm i -D @sveltejs/adapter-node 

이 명령어로 노드어댑터 설치 해주고 

svelte.config.js 파일 상단에 

aws ec2 환경에서 gitaction이랑 docker을 사용해 

svelteKit 으로 된 프로젝트를 도커로 빌드해서 ecr에 푸시하고 ec2에 npm run dev 로  CI/CD로

띄우는것까지는 작업을 하고

이제 nginx를 붙여볼까 하면서 도커파일좀 건드려 보고 있는데

검색해서 나온 것들은 

엔진스에 스벨트 빌드해서 나온 아티팩트를 서빙하려고

COPY --from=build /app/public /usr/share/nginx/html

이렇게 해뒀는데 

COPY failed: stat /app/public: file does not exist
Error: Process completed with exit code 1.

이런 에러가 나온다

도커 빌드 할때 저 위치를 찾을수 없다고 나오는데 한참을 헤매다가 

빌드파일은 .svelte-kit에 있다는걸 알아냈다

그러나

COPY --from=build /app/.svelte-kit /usr/share/nginx/html

으로 수정을 하더라도 도커 빌드는 되지만 nginx에서는 게이트웨이 오류가 난다.

스벨트가 따로 index.html 파일을 생성하지 않기 때문이다.

아마 nginx를 사용하려면 컨테이너 2개 띄워서

nginx->svlete로 프록시해주는 구조로 가야 할것 같다.

괜히 한큐에 끝내보려고 아둥바둥 시간 많이 썻다.

svelteKit으로 만든 프로젝트를 개발환경 docker compose 에서 올려보려고 하는데

페이지가 작동되지 않는다는 메세지만 나타난다?

포트설정도 제대로 했고 도커에서 정상적으로 올라간것도 확인 했는데

뭐가 문제인지를 몰라 한참을 헤맸다

아래는 svelteKit 프로젝트에 만든 도커 파일이다.

1. DockerFile

2. docker-compose.yml 파일

?? 뭐 문제가 없어 보인다. 그리고 저 문제로 검색을 해봐도

nginx관련된 내용만 잔뜩 나온다 난 nginx 안쓰는데!

그러다 한 문서를 발견했다.

https://github.com/sveltejs/kit/discussions/5673

문제는

CMD npm run dev

이부분이었다.

이걸 

CMD npm run dev -- --host 

이런식으로 써줘야 한단다.

난 dev대신 start 스크립트를 따로 만들었으니 

도커파일을 수정하면

이렇게 수정을 해줘야 하는 것이었다.

한참동안 뭔가 문제인지 몰랐는데 문제점을 찾아서 다행이다.

이 블로그를 찾아오는 다른 사람들도 이와같은 문제였다면 잘 해결했길 바란다.

요즘 svelte랑 tailwind css 사용해서 조금씩 뭔가 만들어 보고 있는데

드롭다운 메뉴를 만들어 보려고 하던 와중

document is not defined 이런 에러가 나타났다.

문제가 되었던 코드는

이 부분이었다

이 에러는 JavaScript가 브라우저 내에서 실행되는 환경에서만 document 객체가 정의되기 때문에

 Node.js 환경에서 실행될 때 발생하는 에러였다 SvelteKit 프로젝트에서는 서버에서 실행 중인

노드 코드에서는 document 객체를 사용할 수 없기 때문이었다.

그래서 스택오버플로우를 찾아보니 onMount를 사용해 해결 하는 방법이 있었다

이렇게 온마운트 안에 다큐먼트를 사용하는 코드를 넣으면 해결이 된다.

onMount는 컴포넌트가 처음으로 DOM에 렌더링 될 때 실행되는 함수이다.

아마 위 코드를 사용할때 다큐먼트가 정의되지 않은 상태에서 에러가 발생하는듯 하다.

스벨트의 라이프 싸이클에 대해서 나중에 한번 정리를 해봐야겠다.

요즘 뜨는것 같은 css프레임워크 테일윈드

https://2022.stateofcss.com/en-US/css-frameworks/

확인해보니

이렇게 뭔가.. 뭔가 떠오르고 있다 흥미도가 높아지고 있다 그런게 보인다.

그래서 svelteKit에 tailWind를 사용해 보기로 했다.

친절하게도 프레임워크별 시작 가이드가 나와 있다.

https://tailwindcss.com/docs/guides/sveltekit

저 가이드에 나와있는대로 따라하면 적용은 금방 할수 있게 될것이다.

tailwind 장점은 컴포넌트들이 잘 만들어져 있고 직관적으로 만들어진 클래스명만 쭉 적용시키면 되니까 편하다는건데

단점은 그렇게 클래스네임을 쭉 나열해서 적다보면 코드가 좀 지저분해 보인다는거 정도?

자세한 내용은 

https://blog.hubspot.com/website/tailwind-css-vs-bootstrap

이 글을 참고해보면 도움이 많이 될것 같다

일단 tailWind는 사이즈가 작다 그래서 부트스트랩보다 로드가 빠르다

대신 부트스트랩만큼 다양하진 못하다 대충 이런 느낌인데

내가 뭐 엄청나게 다양한 컴포넌트를 사용할것도 아니고 부트스트랩이야 뭐 어디서든 쓸수 있으니

새로운거 하는김에 싹다 새로운거 해보자는 생각으로 tailWind를 선택했다. 

오랜만에 블로그에 들어와 본다.

얼마전까지 이직한 회사에서 react를 사용했었는데 너~~~무 오랜만에 react를 해보니 바뀐것도 많이 바뀌었고

프론트 개발하기 좀더 편하게 했던거 같다.

그리고 조금더 알아보니 요즘 프론트엔드에 vue 이후로도 svelte , qwik , solid  이런 새로운것들이

나타나고 있어서 그중 압도적으로 코드량이 적다고 하는 svelte를 시작해 보려고 한다.

svelte를 시작한 이유

1. 그나마 새로나온 애들중 커뮤니티 사이즈가 좀 있다.

2. 코드량이 압도적으로 적다.

3. qwik나 solid는 react랑 굉장히 유사하다고 해서 좀 다른걸 해보고 싶었다.

4. 원랜 vue를 하려고 했는데 뭐가 또 새로 잔뜩 나왔으니까 새로낭노걸로 해보자는 심리

일단 데모버전으로 좀 까작거려 보다가 이것저것 만들어볼 생각이다.

기본적으로 시작하기 위한 명령어 ( 부트스트랩보다 요즘 tailwind가 또 좋다길래 일단 써본다)

npm init svelte@latest my-app
npm install
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init tailwind.config.cjs -p

대충 이렇게 명령어 쳐놓고 한번 대충 올려보기나 해보자

이번기회에 타입스크립트도 공부하기 위해 타입스크립트 사용할수 있도록 선택을 했다.

외부망 끊겨있는 플젝도 끝났고 새로 공부하기로 했으니 다시 블로그에 글도 좀 올리고 해야겠다