sveltekit ver1 정식출시 정보
sveltekit ver1 정식출시
본문
이곳에는 svelte 에 대한 이야기가 별로 없네요..
최근 한 1년간 svelte 로 웹과 앱을(하이브리드)개발해서 납품을 하고 있습니다.
svelte의 개발 환경은 최상이고요. 거의 예전 jquery 쓰는 수준으로 업청 쉽습니다.
전 이부분 쉽다는 부분에 가장 큰 점수를 줍니다.
svelte 는 UI프레임워크고
svelte kit 은 라우팅 기능이 있는 spa 프레임워크 정도로 이해하시면 될 것 같습니다.
지난주에 svelte kit 이 그동안의 beta 테스트 기간을거처 정식 1버전이 오픈하였습니다.
그누보드 + svelte 가능합니다.
단, 한가지만 알아두셔야할 점이
최종 빌드하고 서버에 올리고 구현할때 좀 생소한 환경때문에 해맬 수 있습니다.
svelte 가 웹서버에 올리기만하면 php와 같은 빌드 어뎁터도 지원하지만,
기본 node 서버에서 실행되고,
그리고 saas 서비스에 올려서 실행하는 것을 주로 지원해줘서
커뮤니티 찾아보면 saas 에 올리는것만 잔뜩 나옵니다.
그래서 내컴에서 개발은 쉬운데 서버에 올리는 것 어려워서 해멜 수 있습니다.
저는 클라우드 서버 임대해서 ubuntu 설치해서 그곳에 php와 node 설치해서 사용합니다.
adapter-node 로 설정해서 빌드하고 이 빌드한 파일을 서버에 놀리고
node ./build/index.js 이렇게 실행하면 index.js 에 설정된 포트번호로 서버가 시행됩니다.
pm2 프로그램 같은 것 깔면, 무중단 실행 같은것으로 안정적으로 서비스 할 수 있습니다.
제가 svelte 를 쓰는 이유중 하나는
spa 환경을 쉽게 구축할 수 있어서, 하이브리드앱 개발하기 쉽다는 점입니다.
sveltekit + capacitor 조합으로 개발을 하면
cordova, ionic 기반 개발이 쉽게 이루어집니다.
adapter-static 으로 빌드하면 뒵니다.
ionic 기반으로 angler, react, vue 등이 있는데, 이것들은 어렵습니다.
그런데, svelte 로 개발하면 그야말로 쉽습니다. 그냥 php 페이지 만들듯이 만들면됩니다.
아래는 제 블로그인데, svelte로 하이브리드앱만드는 방법 설명올려 놓았습니다.
글쓴지 좀 되었는데, 큰 문제는 없을 것입니다.
그누보드 이용해서 api 구성한후 svelte 로 프론트 구성하시면 됩니다.
그런데, 그누보드의 로그인 세션이 크로스 브라우징으로 유지가 되지 않는 문제가 있어서
특히 하이브리드앱의 경우 앱은 http://localhost 로 접속헤서, 서버는 서비스 별도 도메인이라서
세션을 자동삭제하는 경우가 생겨 이경우에는 로그인 유지가 되지 않습니다.
처음에는 되는것처럼 보여도, 막상 서비스하려면 중간에 세션을 날립니다.
그래서 로그인은 jwt를 사용하셔야합니다.
그리고 크로스도메인 정책때문에 접속오류가 나는데 이부분도,
헤더에 http://localhost 잡히게 해 놓아야합니다.
4
베스트댓글
규모가 작아서 하나의 서버로 위 내용을 구성해 보고 싶어서 질문드립니다.
svelte 쉽긴한데 초기라 서비스에 넣기에 어떤가 체험해 보고 싶습니다...
좀 길 것 같네요.
저는 스벨트 + ciboard 로 api 를 구성해서 돌리고 있습니다.
그런데 얼마전 부터 ciboard에 글을 올릴 수 없어서 사용하는 라이브러리 올려볼려고 했는데, 못올리고 있어요.
스벨트는 adapter 라는 최종 결과물 빌드 기능이 있어서 여러가지 형태로 빌드가 가능합니다.
스벨트는 빌드 전후의 파일의 형태가 완전히 다른 형태로 변경됩니다.
압축 및 스벨트 문법으로 모두 변경되어 잘게 쪼게 집니다. 용량도 줄어들고, 순차적 로딩에 최적화된 상태로 작게 잘립니다.
adapter-static 으로 빌드를하면, 일반 html 파일에 js 사용하듯이 가능합니다. build 폴더를 복사해서 해당 폴더로 접속하면 되는 것으로 아는데, 이때 사용된 build 폴더가 최상위 도메인이어야 합니다. 그래서 이방법은 하이브리드 앱을 만들때만 사용합니다.
저는 apapter-node 를 이용해서 빌드하고 아무 폴더에 build 폴더를 올려주고
node 서버를 실행해 줍니다.
node 서버는 에러가 나면 죽는 경향이 있어서, 죽어도 다시 실행유지되도록 forever 라이브러리나, pm2를 이용해서 무중단 실행을 합니다. 저는 pm2를 사용합니다.
서버에 node가 설치되어 있거나 node가 싱행 될 수 있어야하겠죠.
이부분이 svelte의 수익원입니다. versel 이나 cloudflare 같은 saas 업체에 올리는 어뎁터가
준비되어 있는데, 스벨트로 쉽게 만들어서 saas업체에 쉽게 올려서 서비스하라는게 기본 모토입니다.
그리고 접속량 늘어나면 돈내라 뭐 그런것 같습니다.
그런데 저희같이 직접 서버돌려야 안심하는 부류에게는, 뭔가 깨름찍해서 용납이 안되죠.
그래서 찾아보면 서버에 올려서 실행하는 방법을 찾기 힘듭니다.
아마도 이런 이유때문에 한국 쪽에서는 저변 확대가 늦어지고 있는게 아닌가 싶습니다.
아무튼 node 서버로 실행하면 http://localhost:3000 포트로 실행됩니다. 도메인:3000으로 접속하면 실행이 되는데 그러면 접속에 대한 문제가 발행합니다.
이때 apach나 nginx 같은 proxy pass 를 이용해서 서브도메인이나 하위 폴더로 접속시 위에 생성된 http://localhost:3000으로 연결되도록 조치합니다.
폴더하위로 접속할때는 크로스 오리진 에러가 나지 않아서 세션등을 사용할 수 있을 것으로 보입니다.
그러나, 앱같은 경우 spa 접속이다보니, 도메인을 바꿀 수가 없습니다. 그래서 애초에 크로스오리진이
가능한 상태로 만들어 주고 접속해야 합니다.
그래서 저는 크로스 오리진을 풀어줍니다.(보안상 좋지 않다는게 정설입니다.)
header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Headers: Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, content-length");
header('Access-Control-Max-Age: 86400');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE,OPTIONS");
그리고,
크로스로리진 접속이 된다고 다된게 아니라, 로그인 세션이 크로스 오리진 체크하면서 풀어버리기 때문에,
로그인을 세션방식으로는 더이상 사용할수 없게 됩니다.
그래서 로그인을 jwt로 사용합니다.
그누보드용 jwt 라이브러리와 스벨트 강좌 만들어 들여야 겠네요.
댓글 7개
규모가 작아서 하나의 서버로 위 내용을 구성해 보고 싶어서 질문드립니다.
svelte 쉽긴한데 초기라 서비스에 넣기에 어떤가 체험해 보고 싶습니다...
좀 길 것 같네요.
저는 스벨트 + ciboard 로 api 를 구성해서 돌리고 있습니다.
그런데 얼마전 부터 ciboard에 글을 올릴 수 없어서 사용하는 라이브러리 올려볼려고 했는데, 못올리고 있어요.
스벨트는 adapter 라는 최종 결과물 빌드 기능이 있어서 여러가지 형태로 빌드가 가능합니다.
스벨트는 빌드 전후의 파일의 형태가 완전히 다른 형태로 변경됩니다.
압축 및 스벨트 문법으로 모두 변경되어 잘게 쪼게 집니다. 용량도 줄어들고, 순차적 로딩에 최적화된 상태로 작게 잘립니다.
adapter-static 으로 빌드를하면, 일반 html 파일에 js 사용하듯이 가능합니다. build 폴더를 복사해서 해당 폴더로 접속하면 되는 것으로 아는데, 이때 사용된 build 폴더가 최상위 도메인이어야 합니다. 그래서 이방법은 하이브리드 앱을 만들때만 사용합니다.
저는 apapter-node 를 이용해서 빌드하고 아무 폴더에 build 폴더를 올려주고
node 서버를 실행해 줍니다.
node 서버는 에러가 나면 죽는 경향이 있어서, 죽어도 다시 실행유지되도록 forever 라이브러리나, pm2를 이용해서 무중단 실행을 합니다. 저는 pm2를 사용합니다.
서버에 node가 설치되어 있거나 node가 싱행 될 수 있어야하겠죠.
이부분이 svelte의 수익원입니다. versel 이나 cloudflare 같은 saas 업체에 올리는 어뎁터가
준비되어 있는데, 스벨트로 쉽게 만들어서 saas업체에 쉽게 올려서 서비스하라는게 기본 모토입니다.
그리고 접속량 늘어나면 돈내라 뭐 그런것 같습니다.
그런데 저희같이 직접 서버돌려야 안심하는 부류에게는, 뭔가 깨름찍해서 용납이 안되죠.
그래서 찾아보면 서버에 올려서 실행하는 방법을 찾기 힘듭니다.
아마도 이런 이유때문에 한국 쪽에서는 저변 확대가 늦어지고 있는게 아닌가 싶습니다.
아무튼 node 서버로 실행하면 http://localhost:3000 포트로 실행됩니다. 도메인:3000으로 접속하면 실행이 되는데 그러면 접속에 대한 문제가 발행합니다.
이때 apach나 nginx 같은 proxy pass 를 이용해서 서브도메인이나 하위 폴더로 접속시 위에 생성된 http://localhost:3000으로 연결되도록 조치합니다.
폴더하위로 접속할때는 크로스 오리진 에러가 나지 않아서 세션등을 사용할 수 있을 것으로 보입니다.
그러나, 앱같은 경우 spa 접속이다보니, 도메인을 바꿀 수가 없습니다. 그래서 애초에 크로스오리진이
가능한 상태로 만들어 주고 접속해야 합니다.
그래서 저는 크로스 오리진을 풀어줍니다.(보안상 좋지 않다는게 정설입니다.)
header('Access-Control-Allow-Origin: ' . $_SERVER['HTTP_ORIGIN']);
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Headers: Authorization, X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, content-length");
header('Access-Control-Max-Age: 86400');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE,OPTIONS");
그리고,
크로스로리진 접속이 된다고 다된게 아니라, 로그인 세션이 크로스 오리진 체크하면서 풀어버리기 때문에,
로그인을 세션방식으로는 더이상 사용할수 없게 됩니다.
그래서 로그인을 jwt로 사용합니다.
그누보드용 jwt 라이브러리와 스벨트 강좌 만들어 들여야 겠네요.
Next도 좋은 듯해요. next-auth랑 함께... ㅎㅎ;a
