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

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

 

오늘은 9월 계획하고 있는 웹 서비스가 있는데 그 서비스를 개발하기에 앞서 블로그가 필요하더라구요. 그래서 오늘은 블로그를 만들어보려고 해요. 사실 요즘 블로그 쪽에 관심이 생겨서 워드프레스와 Svelte로 블로그를 만들어서 운영하고 있는데요. 이번에는 Remix를 사용해서 수익형 서버 사이드 렌더링 블로그를 만들어 보려고 해요.

remix logo

 

수익형 블로그라고 적었지만 사실 일반 블로그에 에드센스를 붙이면 수익형 블로그가 되는거라 블로그의 목적이 수익이라는 것뿐이지 큰 차이는 없습니다ㅎㅎㅎ 수익형(S) 서버(S) 사이드(S) 렌더링(R)이라 S-SSR로 맘대로 지었어요ㅋㅋ

 

기술 스택은 Remix를 사용하려고 하는데, 사실 사용해본 적도 없고 깊게 연구해 본 적이 없기 때문에 단순 Remix Docs에 나온 내용을 따라 해보고, 중간중간 제 입맛대로 만들어보려고 해요.

Blog Tutorial (short)

 

그럼 시작해 볼까요!

 

1. 블로그 구조

우선 개발하려고 하는 블로그의 형태와 글 작성 방식에 대해서 설명드릴게요.

 

우선 / path의 Home Page에서 상단에는 GNB가 위치하고 내부 main에는 여러 아티클들 리스트를 볼 수 있는 형태로 작성할 예정이에요. Article에 보여질 정보는 제목, 내용, 작성일, 썸네일 정도가 있을 것 같고 추후에 추가될 정보가 있을 수 있을 것 같아요.

main은 max-width를 둬서 PC버전에서 양쪽 사이드에 충분한 빈 공간이 남도록 해서 vertical floating Ads가 뜰 수 있도록 구현해요.

home page 구조

 

상세 페이지에는 /post/:slug 형태의 routing path가 되고, Home page와 마찬가지로 상단에는 GNB가 위치하고 내부에 Article 콘텐츠가 위치하는 형태로 작성할게요.

 

post detail page 구조

 

그럼 아래와 같은 구조로 라우팅 될 수 있겠네요

블로그 라우팅 구조

 

2. Creating the Project

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를 통해 가져오고 렌더링 하는 부분을 구현해 볼게요.