[연쇄개발자] Remix로 수익형 서버 사이드 렌더링(S-SSR) BLOG 만들기(2) - 레이아웃, loader 구현

안녕하세요~ 연쇄개발자 류찬규입니다.

 

오늘은 지난 [연쇄개발자] Remix로 수익형 서버 사이드 렌더링(S-SSR) BLOG 만들기(1) - 기획, remix 셋팅, Routing 구현 에 이어 2편으로 블로그 레이아웃과 데이터 Loader부를 구현해보려고 해요.

[연쇄개발자] Remix로 수익형 서버 사이드 렌더링(S-SSR) BLOG 만들기(1) - 기획, remix 셋팅, Routing 구현

 

그럼 오늘도 시작해보겠습니닷

 

1. 레이아웃 라우트 구조 잡기

우선 리믹스의 경우 레이아웃 라우팅이 일어나는 방식에 대해 예시를 통해 설명해드릴게요.

예를들어 아래와 같은 routes 구조를 만든다고 했을 때를 볼게요

app/
├── routes/
│   ├── _index.tsx
│   ├── about.tsx
│   ├── concerts._index.tsx
│   ├── concerts.trending.tsx
│   └── concerts.tsx
└── root.tsx

 

/ Url에는 _index.tsx 파일의 내용이 렌더링 될테고 root.tsx 내용이 레이아웃으로 적용되어져요.

/about Url에는 about.tsx 파일의 내용이 렌더링 될테고 별도의 layout 선언 파일이 없으니 root.tsx 내용이 레이아웃으로 적용되어지겠죠?

/concerts Url에는 concerts._index.tsx 파일의 내용이 렌더링 될테고 concerts.tsx 파일이 존재하기 때문에 해당 파일(concerts.tsx)이 layout으로 잡힙니다.

/concerts/trending Url에는 concerts.trending.tsx 파일의 내용이 렌더링 될테고 마찬가지로 concerts.tsx 파일이 존재하기 때문에 해당 파일(concerts.tsx)이 layout으로 잡힙니다.

 

 

그러면 이제 이 구조를 바탕으로 한번 지난번에 말한 블로그 구조에 맞춰서 작업해볼게요.

home page 구조

홈 페이지를 봤을때, 상단 Header부와 main contents영역, 그리고 그림에는 없지만 하단 Footer는 모든 페이지에서 그대로 나올 것 같아서 이것들을 root.tsx에 정의할 수 있을것 같네요.

 

기존 root.tsx

기존 root.tsx인데요. 여기에 Grid로 layout을 잡아볼게요.

 

현재 실무에서는 주로 스타일링은 emotion을 사용하고 있는데, Remix SSR 방식의 이점을 제대로 활용하기 위해서는 런타임 오버헤드를 더하는 css-in-js 방식의 emotion보다 빌드 시점에 ts를 css로 변환하는 Zero-runtime CSS in JS인 vanilla-extract를 사용해서 스타일링 해보려고 해요.

 

vanilla-extract의 장점은 아래와 같아요.

빌드타임에 ts파일을 css파일로 만듭니다. (sass와 같음)
type-safe하게 theme를 다룰 수 있습니다.
프론트엔드 프레임워크에 구애받지 않습니다.
Tailwind 처럼 Atomic CSS를 구성할 수도 있습니다.
Sttitches 처럼 variant 기반 스타일링을 구성할 수 있습니다.

 

1. install package

yarn add -D @vanilla-extract/css

 

2. /app/components/Header 추가

components 디렉토리

헤더를 별도의 컴포넌트로 관리하는게 좋을것 같아 /app/components/Header Path에 위와 같이 파일을 생성해주고 아래와 같이 내용을 추가해주었어요.

Header 컴포넌트 / 스타일링 파일 추가

이후 root.tsx에 header를 추가해주구요.

 

이대로 실행했더니 에러 발생!!

에러메시지

  The plugin "vanilla-extract-plugin" was triggered by this import

    app/components/Header/index.tsx:20:23:

요런 에러메시지가 나와서 찾아보니까 package.json에 "name" key가 없는 경우 발생한다고 하더라구요.

그래서 package.json에 name: "blog-tutorial" 을 추가해주니 다시 정상적으로 동작하더라구요.

 

(좌) / 홈페이지, (우) /post/123 디테일 페이지

root.tsx에 적용된 Layout이 홈과 상세 페이지에 모두 적용되었네요.

이대로 main 컨텐츠 영역과 footer를 작업해볼게요.

 

 

레이아웃 잡은 결과

처음에 블로그 계획했던 구조대로 우선 Layout을 잡아보았어요.

 

레이아웃 잡은 뒤 폴더트리

Header와 Footer를 컴포넌트로 분리하고 Layout 컴포넌트를 따로 두어서 Root.tsx에서 Outer를 wrapping하도록 했어요.

 

Layout 컴포넌트를 root.tsx에서 사용하는 코드

이제 원하는 구조대로 잘 나온것 같으니, 이제 data loader부를 구현해볼까요?

 

2. Data loader 구현

사실 SSR같은 경우 서버에서 미리 data를 Fetching하고 client에서는 내려준 데이터 그대로 보여주기만 하면 된다는 장점이 있는데, 사실 이번에 구현할 블로그는 DB에서 Data fetching이 필요없도록 Markdown 파일이 함께 빌드되어 배포되어지고, data loader에서는 markdown 파일을 가져오도록만 구현하면 되는데요.

 

한번 진행해볼게요.

 

우선 임의의 .md 파일 3개를 만들어볼게요.

 

 

 

npx create-remix@latest --template remix-run/indie-stack blog-tutorial

이제 새로운 Remix project를 initialize 해줄게요. 이번에는 Docs에 나온 대로 blog-tutorial이라고 지어볼게요.

저는 현재 실무에서 Typescript를 쓰고 있기도 하고 사이드 프로젝트처럼 내 맘대로 만들 수 있는 개발프로젝트의 경우 자바스크립트가 대충 개발하기 편할 수 있다고 생각하지만, 정말 아무 생각 없이 개발하려면 TypeScript로 타입을 선언하고 선언한 타입에 맞춰 개발을 해야 실수가 줄어드는 느낌이더라구요. 그래서 Typescript를 선택했어요!

remix install

 

cli에서 npm install까지 run 해줬으니 설치가 끝났으면 바로 아래 코드를 실행해 줍니다.

yarn run dev

localhost:3000

 

http://localhost:3000에서 잘 동작하는 걸 확인할 수 있는데요!

근데 사실 cypress 도 안 쓸 것 같고 SQLite DB도 안 쓸 것 같은데 그러면 잘못 설치했네요.

 

해당 디렉토리를 지우고 아래 명령어로 다시 설치하겠습니다.

npx create-remix blog-tutorial

그러면 아래와 같은 플로우로 설치를 하게 되는데요. 저는 TypeScript와 Cloudflare Pages 배포를 선택했어요.

재 install

(왼쪽) 현재 - (오른쪽) indie stack 디렉토리 차이

휴우~ 훨씬 깔끔해졌네요.ㅋㅋ이제 아래 코드를 순차적으로 실행해 볼게요

$ cd blog-tutorial
$ yarn
$ yarn run dev

Remix 첫 시작

잘 켜졌군요!

 

HomePage가 될 index path는 라우팅이 존재하는 것 같으니 post 라우팅을 만들어 볼게요.

 

 

3. /post/:slug 페이지 만들기

/app/routes 디렉토리에 있는 _index.tsx = "/" 파일이고,

/post/:slug로 접속했을 때 나올 페이지를 추가로 만들어줘야 하는데 remix에서는 :slug 처리를 위한 dynamic routing를 $slug로 해주면 되더라구요. 그래서 post.$slug.tsx 파일을 추가로 만들어주고 아래와 같이 채워줬어요.

post.$slug.tsx 생성

:8788

/post/123으로 접속했을 때 콘텐츠에 post id도 뜨고 설정한 meta도 잘 뜨는 걸 확인할 수 있네요.

 

근데 Slug는 동적으로 변하는데 meta tag의 Title은 고정 값이네요. 요것도 같이 바뀌어야 SEO 최적화시킬 수 있을 것 같은데 말이죠.

요것도 한번 변경시켜 볼게요

 

4. 동적 Meta tag 변경

console.log(meta tag data)

한번 V2_MetaFunction type의 경우 args에 어떤 것들이 오는지 로그를 찍어볼게요

meta tag log 내역

요런 것들이 오는데요 data의 경우 나중에 data loder를 구현하면 채워져 있을 것 같은 느낌이네요. 우선 params.slug를 통해 id값을 알 수 있을 것 같은데요. 요 값을 title에 넣어주면 동적 메타태그 구현도 될 것 같네요.

 

 

 

오늘은 여기까지 Remix를 이용해 수익형 블로그 만들기 글을 작성하고,

다음 편에 이어서 마크다운을 사용한 블로그 게시글 작성과 작성된 글을 data loader를 통해 가져오고 렌더링 하는 부분을 구현해 볼게요.