안녕하세요. 엔지엠소프트웨어입니다. 이전 시간에 로컬 개발 환경에 스벨트를 설치하고, 매인 페이지까지 실행 해봤습니다. 참고로, 스벨트를 간단하게 테스트하기 위한 Codesnadbox와 같은 도구가 공식 홈페이지에 포함되어 있습니다. 홈페이지의 REPL을 이용하면 스벨트를 코딩해볼 수 있습니다. 스벨트를 회사에 적용시키기에는 아직 무리가 좀 있을듯 합니다. 레퍼런스가 많지 않아서요. 개발자의 힘(?)은 레퍼런스니까요^^

 

스벨트를 처음 설치하면 아래와 같은 구조를 가집니다. 처음 보여지는 매인 페이지는 my-app > routes > page.svelte입니다.

 

 

스벨트가 리엑트(React)나 앵귤러(Angular)보다 좋은점은 아래와 같이 HTML을 그대로 사용할 수 있고 불필요한 코드를 넣지 않아도 된다는 점입니다. CSS 디자인도 바로 넣어서 처리할수도 있습니다. 그래서, 기본적인 웹관련 지식만 있으면 누구나 쉽고 빠르게 풀스텍 개발자가 될 수 있을거 같습니다. 물론~ 기초가 탄탄해야 하겠죠?

<h1>Welcome to NGMsoftware</h1>
<p>Visit <a href="http://ngmsoftware.com">ngmsoftware</a> to read the documentation</p>

<style>
    h1 {
        font-size: 30;
    }
</style>

 

콘트롤+S를 눌러서 저장하면 화면에서 바로 확인할 수 있습니다.

 

 

여기에 어떤 기능을 추가하고 싶다면 스크립트 태그안에 자바스크립트를 작성하시면 됩니다. info 변수안에 소개글을 추가했습니다. 변수를 사용하려면 중괄호 안에 변수 이름만 적어주면 됩니다. 저처럼 웹을 오래전부터 해왔던 개발자가 리엑트나 뷰 또는 앵귤러를 배우기 부담스러우면 스벨트를 사용하면 좋을거 같습니다. 전통적인 방식의 HTML과 스타일, 자바스크립트를 사용할 수 있습니다.

<script>
    let info = '업무 자동화 RPA 매크로';
</script>

<h1>Welcome to NGMsoftware - {info}</h1>
<p>Visit <a href="http://ngmsoftware.com">ngmsoftware</a> to read the documentation</p>

<style>
    h1 {
        font-size: 30;
    }
</style>

 

다시 저장(Ctrl+S)하고, 웹페이지를 보면 아래와 같이 적용된것을 확인할 수 있습니다.

 

 

여기까지 웹개발자라면 누구나 쉽게 페이지를 만들 수 있을겁니다. SPA 앱 개발이라 하더라도 대쉬보드나 차트 페이지 하나만 만들건 아니기 때문에 라우터에 대해서 알아야 합니다. 라우팅은 페이지간 이동하는 것을 말합니다. 웹페이지에서 링크 또는 메뉴를 클릭해서 다른 페이지로 넘어가는걸 생각하면 됩니다.

 

익스플로러의 routes에서 우클릭하고, about 폴더를 하나 만드세요. 그리고, 그 안에 +page.svelte파일을 추가하세요.

 

 

아래와 같이 간단하게 레이아웃을 만들어보세요.

<h1>안녕하세요. 엔지엠스프트웨어입니다.</h1>

 

그리고, 메뉴를 추가 해줍니다.

<script>
    let info = '업무 자동화 RPA 매크로';
</script>
  
<div>
    <a href="/">home</a>
    <a href="/about">about</a>
</div>

<h1>Welcome to NGMsoftware - {info}</h1>
<p>Visit <a href="http://ngmsoftware.com">ngmsoftware</a> to read the documentation</p>

<style>
    h1 {
        font-size: 30;
    }
</style>

 

빌드하고 페이지를 보면 메뉴가 생겼을겁니다. about를 클릭하면 새로 추가한 페이지로 라우팅되는걸 확인할 수 있습니다.

※ 페이지 라우팅을 적용하려면 page.svelte 파일앞에 꼭! 플러스 기호를 붙여야 합니다. +page.svelte와 같이요. 안그러면, 404 Not Found 에러가 발생합니다.

 

 

직접 URL에서 주소를 적어줘도 정상 동작합니다.

 

 

자 이제 페이지마다 반복적으로 등장하는 HTML들은 하드코딩할 필요는 없고, 매인 페이지 루트에 +layout.svelte 파일을 하나 추가해주면 공통으로 코드를 불러서 사용할 수 있습니다.

 

 

매인 페이지에 있던 네비게이션 메뉴를 +layout.svelte로 옴겼습니다. 이렇게하면 모든 하위 페이지에 자동으로 HTML이 보여집니다.

 

 

아래에 컴포넌트를 자식 요소로 가질 수 있게 슬롯을 추가 해주세요. 레이아웃이 최상위가 되고, 그 안에 매인페이지가 표시됩니다. slot안에 page.svelte가 표시됩니다. 전통적으로 iframe을 사용해서 메뉴나 네비게이션을 구현했는데요. 지금은 슬롯으로 처리합니다.

<div>
    <a href="/">home</a>
    <a href="/about">about</a>
</div>

<slot></slot>

 

저장하고, 미리보기 브라우저에서 보면 아래와 같이 네비게이션이 잘 동작하는걸 확인할 수 있습니다.

 

 

풀스택 개발자가 갖춰야할 7가지 요건중에 2가지를 배워봤습니다.

1. HTML 레이아웃 디자인
2. 라우팅
3. 데이터 응답
4. 데이터 요청
5. 백엔드 서버 구성
6. 인증 처리
7. 데이타베이스 쿼리

 

요즘은 프론트엔드, 백엔드를 나누지 않고 혼자서 다 하는 추세입니다. 아무래도 풀스택 개발자를 찾는 곳이 많아지다보니 개발자들도 이에 적응해서 프론트엔드와 백엔드를 같이 하게 되는거 같습니다. 물론, 저도 그렇고요. 프론트엔드는 리엑트가 대세이긴 합니다. 회사에서 무조건 리엑트를 쓰라고 하니까요. 백엔드는 스프링 부트입니다. 회사에서 이미 리엑트를 사용하고 있다면 다음에 만드는 SPA 프로젝트는 스벨트로 해보는것도 좋겠다는 생각이 듭니다.

 

서버에서 사용자에게 데이타를 전송해볼건데요. about 폴더안에 +page.js 파일을 하나 추가하세요. dummyson.com은 개발이나 프로토타입 테스트에서 사용할 더미 JSON 데이터를 가져옵니다. 간단하게 샘플 코드를 작성하거나 데모를 만들때 편리하니 알아두시면 좋을거 같습니다.

export async function load({ fetch }){
    let res = await fetch('https://dummyjson.com/products/1');
    let result = await res.json();
    return result;
}

 

실제로 dummy json 데이타를 요청해보면 아래와 같은 응답을 받을 수 있습니다.

 

 

+page.svelte에 아래와 같이 데이타 오브젝트를 가져오고 타이틀을 표시 해보세요.

<script>
    export let data
</script>

<h1>안녕하세요. 엔지엠스프트웨어입니다. {data.title}</h1>

 

 

 

서버 사이드에서 코드를 랜더링하려면 아래와 같이 파일명을 변경하면 됩니다. 이렇게하면 서버에서 미리 처리한 후 랜더링을 거쳐서 HTML을 사용자에게 내려줍니다.

 

 

이제 사용자가 서버로 데이터를 요청할 때는 어떻게 해야 하는지 알아볼께요. 적절한 예로 로그인 페이지가 좋을듯 합니다. 아래와 같이 디자인을 해보세요.

<script>
    export let data
</script>

<form method="post" action="/">
    <input name="email">
    <input type="password" name="password">
    <button>로그인</button>
</form>

<h1>안녕하세요. 엔지엠스프트웨어입니다. {data.title}</h1>

 

코드를 보면 딱히 뭔가가 없습니다. 전통적으로 사용하던 방법을 그대로 사용하면 됩니다. 참고로, 숨겨야 할 데이터가 있다면 hidden을 사용하면 됩니다. 아래와 같이 페이지가 만들어졌는데요. 로그인 버튼을 클릭하면 서버로 데이타가 전송됩니다. 서버쪽에서는 request를 받아서 처리하면 됩니다.

 

 

서버를 만들기 위해 routes폴더 안에 api1이라는 폴더를 만들고, 그 안에 +server.js파일을 만듭니다. 이렇게하면 서버가 만들어진겁니다.

 

 

사용자의 요청에 대한 응답을 내려주기 위해 간단한 코드를 하나 작성 해봤습니다.

export async function GET({ fetch, request }) {
    return new Response(JSON.stringify({name: 'ngmsoftware', product: 'ngm macro'}));
};

 

클라이언트에서 응답을 잘 받았네요.

 

 

회원 인증 처리는 NextAuith.js를 주로 사용합니다. 패키지를 설치하면 거의 대부분의 인증 처리 방식을 쉽게 구현할 수 있습니다. 하지만, 스벨트와 호환이 잘 되는 패키지를 사용하는게 좋겠죠? 이와 관련한 패키지가 있긴한데... 프레임워크가 나온지 얼마 안되서 많은 기능을 제공하진 않고 있습니다. 이 부분은 다음에 좀 더 자세하게 알아보기로 할께요. 아무튼, 그동안 앵귤러와 리엑트 프로젝트만 진행하다가 스벨트를 처음 접해보니~ 저로써는 상당히 편리하다는 생각이 듭니다.

 

아무래도 오래전부터 웹프로그래밍을 해왔던터라 쌩 자바스크립트와 HTML, CSS를 사용하는게 아직도 직관적이고 편하거든요. 그리고, 대용량 데이타를 처리하는 반도체 산업쪽에 있다보니 항상 따라다니는 이슈가 속도 문제입니다. 스벨트 공식 사이트에 보면 거의 쌩 자바스크립트와 동일한 퍼포먼스를 낼 수 있고 리엑트에 비해 6배가량 빠르다고 합니다. 그렇다보니 많은 사람들이 주목하고 있는 프레임워크가 아닐까 생각되네요.

 

스벨트가 장점만 있는건 아닙니다. 물론, 앵귤러나 리엑트보다 러닝커브가 낮다는건 인정해야 할거 같습니다. 스케폴딩만큼은 아니지만 예약 파일과 함수가 너무 많고 복잡합니다. 그리고 왜 플러스(+) 기호를 사용해야 하는지 모르겠습니다. 더 세련된 방식으로 할 수 있지 않을까 생각되네요. 요즘 나오는 프레임워크들이 대부분 예약된 키워드와 네이밍을 가지고 있어서 어쩔 수 없을거 같긴하지만 그래도 매번 찾아야 해서 귀찮습니다. 아~ 한가지 더 있습니다. 확장자가 svelte로 너무 깁니다. 현업에 있는 개발자라서 아직까지는 심심풀이로 배워보고 있는중입니다. 하지만, 처음 회사에 입사할 때는 아무래도 리엑트를 중점적으로 하시는게 좋을거 같습니다. 지금 당장 개발하려면 리엑트를 알아야 하니까요^^

 

개발자에게 후원하기

 

추천, 구독, 홍보 꼭~ 부탁드립니다.

여러분의 후원이 빠른 귀농을 가능하게 해줍니다~ 답답한 도시를 벗어나 귀농하고 싶은 개발자~

감사합니다~

 

추천0 비추천0