하루만에 다쓰는 개발일지다.

위 링크에서 완성본을 볼 수 있고

여기서 소스를 볼 수 있다.

gh-pages 이용해서 gh-pages 브랜치에 deploy 하므로

실제로 웹페이지에서 보여지는 건 gh-pages 으로 설정해놨다.

svelte 를 build 하면, bundle 이 생성되어, index.html 에 들어갔을 떄 bundle.js 파일에서 SPA 를 동적으로 구성해주는게 신기했다.

페이지 별로 핵심부분, svelte로 인해 어려웠던 부분 위주로 설명하겠습니다.

물론 svelte를 많이 활용하진 못했고 대부분 css 노가다...

( 사진이 안올라갔는데, 사진은 그냥 홈페이지캡쳐본이라 들어가서 보심 됩니다. )

/

맨 위 header, svelte-navigator 으로 내용이 바뀌는 contents, footer 으로 구성되어있습니다.

ST4RT 문구에 text shadow 를 적용해 글씨를 더 예쁘게 꾸몄습니다.

오른쪽 메뉴버튼은 각각 about, members 으로 이동합니다.

ST4RT 문구, 오른쪽 밑 사진도 루트디렉토리로 이동하게 해놨습니다.

svelte-navigator 으로 페이지를 이동시킬 떄, 버튼을 눌러 이동하면 화면 전체에

focus 되어 버튼 클릭한것처럼 bloack dotted border 이 생기는데,

<Router primary={false} > → Router 태그에 primary 속성을 false 로 하면 테두리가 생기지 않았다!

화면 넘기는 animation 은 svelte example 밖에 보이지 않아서 그걸 배껴왔는데,

RouteTransition 에서 in:fly 만 지정하고, out:fly 는 삭제했다.

내가 사용하는 display 속성이 달라서, out:fly 를 지정했을 때에는

먼저있던게 나가는동안 다음페이지가 먼저있던 페이지 밑에있다가 올라오기때문이다.

시간을 빨리해도 소용없었다.

반응형으로는 따로 제작하지 않았는데,

viewport scale 0.6인가 그걸로 조정하고, 화면이 작아졌을 때 flex 요소들이 자동으로 줄바꿈되게했다.

/about

CTFs, DOMESTIC CTFs 에서 각각 ctfs.json, d_ctfs.json 파일에서 import 한 뒤

{#each ctfs as ctf} {/each} svelte 반복문을 이용해 출력했다.

json 파일을 import 하기 위해서는,

@rollup/plugin-json 을 설치하고, 타입스크립트를 사용하므로 따로 컴파일옵션을 설정해줘야한다.

tsconfig.json 에 compilerOptions 의 resolveJsonModule 지정해야하면 되고,

rollup.config.js 에 json 플러그인을 추가하면 된다. 자세한건 구글에나와있다.

members 도 똑같이 json 파일 import 해서 반복문으로 출력해줬다.

css 노가다가 시간을 제일 많이잡아먹었다.

이제야 좀 css 으로 레이아웃을 어떻게 잡는지 알게되었고,

다음에는 scss 도 사용해봐야겠다.