[Svelte] Svelte 개발환경 세팅 (2)

[Svelte Kit 개발환경 세팅]

• 지난번에 이어 스벨트 킷 개발환경 세팅을 진행하도록 하겠습니다.
• 앞으로 작성된 모든 코드는 아래 깃허브 리포지터리 주소를 통해 확인하실 수 있습니다.
• 깃허브 리포지터리 주소 : https://github.com/psm817/sksb_2407

GitHub - psm817/sksb_2407

 

[TailWind 설치 및 적용]

• 스벨트 킷에 tailwind를 적용하는 방법은 vscode에서 터미널을 열어 아래의 명령어를 실행한다.

cd frontapp
npm install -D tailwindcss postcss autoprefixer --legacy-peer-deps
npx tailwindcss init -p

 

• 명령어를 실행하면 frontapp 내에 tailwind.config.js라는 파일이 하나 생성된다.
• 그 다음은 아래 tailwind 홈페이지의 가이드를 보고 3번 부터 동일하게 진행하면 된다.
• 테일윈드 문서 주소 : https://tailwindcss.com/docs/guides/sveltekit

Install Tailwind CSS with SvelteKit - Tailwind CSS

 

• 문서에 나온 순서대로 세팅을 마쳤다면 frontapp > src > routes의 +page.svelte에 아래와 같이 tailwind를 적용한 코드를 작성하면 폰트 굵기가 굵고, 텍스트의 색상은 green-600인 '안녕하세요'가 출력되는 것을 볼 수 있다.
• <h1 class="font-bold text-green-600">안녕하세요</h1>

테일윈드 css 적용

 

• tailwind와 관련된 문법은 치트시트를 통해서 확인할 수 있고, 치트시트는 아래 주소를 통해 참고 부탁드립니다.
• 테일윈드 치트시트 주소 : https://nerdcave.com/tailwind-cheat-sheet

Tailwind CSS Cheat Sheet

 

[Svelte 정적 라우팅]

• 일반적으로 스프링부트를 통해 articles 라는 게시물의 리스트를 보고 싶다면 매핑된 주소가 http://localhost:8080/articles와 같이 되어있는 것을 알 수 있다.
• 위의 예시처럼 articles와 같이 정적 라우팅을 하고자 할 때, 스벨트에서는 기본적으로 routes라는 폴더가 존재하고 해당 폴더 안에 article 폴더를 생성하고 +page.svelte 파일을 생성하 HTML을 작성해주면 된다.

정적 라우팅

[Svelte 동적 라우팅]

• 일반적으로 스프링부트를 통해 articles 라는 게시물 중에 id를 통해 하나의 게시물의 상세 정보를 보고 싶다면 매핑된 주소가 http://localhost:8080/articles/{id}와 같이 되어있는 것을 알 수 있다.
• 위의 예시처럼 articles/{id}와 같이 동적 라우팅을 하고자 할 때, 스벨트에서는 정적 라우팅을 위해 만들어진 articles 폴더 아래에 대괄호를 사용하여 [articleId] 라는 폴더를 생성하고 +page.svelte 파일을 생성하여 HTML을 작성해주면 된다.
• 여기서 화면에 각 id 값을 표출하기 위해서는 +page.js 파일도 생성하여 아래와 같이 코드를 작성한다.
• JavaScript 코드를 살펴보면 export는 id 값을 내보낸다는 뜻으로, 여기서 params는 id에 해당하는 숫자를 의미한다.

// id 값 내보내기
export function load({params}) {
    const id = params.articleId;

    return {id}
}

동적 라우팅

 

[Spring Security, JPA 기본 세팅]

• 이제는 Intellij를 통해 스프링부트 쪽에서 스프링 시큐리티와 JPA와 관련된 기본 세팅을 진행해봅시다.
• 작성된 코드는 깃허브 리포지터리를 통해 참고하시면 좋을 것 같고, 추가된 부분을 간단히 설명하자면 application.yml을 통한 기본 속성과 엔티티, 컨트롤러를 생성하였다.
• 추가적으로 global 패키지를 새로 생성하여 security와 관련된 ApiSecurityConfig.java와 SecurityConfig.java 클래스를 생성하고 WebMvcConfig.java 클래스도 생성하였다.
• 여기서 주의할 점은 현재 vscode와 intellij에서 모두 프론트엔드와 백엔드 서버를 실행하고 있다는 점이다.
• 브라우저 정책 상 하나의 서버에서 다른 도메인이 접근하려 하면 보안상 접근을 막아놓기 때문에 WebMvcConfig.java 클래스에 아래와 같이 코드 작성을 하여 프론트엔드 서버에서도 백엔드 서버의 접근이 가능하도록 한다.

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("https://cdpn.io", "http://localhost:5173")
                .allowedMethods("*")
                .allowedHeaders("*")
                .allowCredentials(true);
    }
}