Nuxt.js, 마이크로CMS 및 Netlify

난 아직 미숙하니까 따뜻하게 지켜줘요.
나는 업계에 경험이 없는 사람이다.
이제 웹에서 만든 태그를 높여서 앞부분을 작업으로 집에서 공부하고 싶어요.
딸이 유치원에 가게 돼서 위기지만 열심히 하겠습니다.
프런트엔드 트렌드를 배우다가 Jamstack이라는 단어를 만났다.
상당히 상세히 설명했지만 조사 결과 SSG(Static Site Generator)를 이용해 API로 데이터를 가져와 정적 사이트의 상태를 표시해 해당 접대 서비스를 할 수 있다는 사실이 밝혀져 잼택의 블로그를 만들기로 했다.
완성물
https://yu-k1blog.netlify.app/

기술을 사용하다

Nuxt.js

SSG가 가능한 JavaScript 프레임은 Next입니다.js、Gatsby js、Nuxt.js 등이 있는데, Vue의 학습을 추진하고 있기 때문이다.js를 채택했습니다.

microCMS

Jamstack에서 필요한 것은 API를 통해 데이터를 얻는 목적지입니다.
여기에 사용된 것은 머리 없는 CMS로, 일반적인 CMS와 달리 Json 형식 등 처리 데이터로만 외관을 구성할 수 있다.
전위 CMOS는 다양한 서비스가 있지만 UI, 일본산 풍부한 일본어 문서를 좋아해 마이크로CMOS를 사용하기로 했다.

Netlify

접대 서비스에는 Firebase, Vercel, Netlify 세 가지 고민이 있다.
평소에는 Firebase를 사용하지만 Jamstack에서는 주로 Vercel과 Netlify를 사용하는데 모를 때 조사할 때 상기 두 가지가 비교적 많기 때문에 Firebase는 선택 항목에 포함되지 않는다.
Vercel과 Netlify에서 고민한 결과 Vercel의 속도가 더 빠른 것 같았지만 저도 검색하면 Nuxt와 Netlify의 조합이 많아서 어려울 때 도움이 될 것 같아서 Netlify를 선택했습니다.

개발 프로세스

Let's Nuxt.js

Let's microCMS

설계

개발

이것은 상당히 대략적인 네 가지 절차로 진행된 것이다.

Let's Nuxt.js

Vue.js에서 몇 차례 개발을 했기 때문에, Nuxt.처음으로 js를 사용했지만 특히 문제 제작을 추진할 수 있습니다.
Vue Router와 달리 파일 이름으로 경로를 구분하는 것은 직관적이고 이해하기 쉽다.

Let's microCMS

마이크로CMOS와의 통신은 공식 문서와 블로그도 간단하고 알기 쉬울 뿐 거의 완성되지 않았다.
물론 일본어 문서도 있지만 그 전에 기술한 내용은 이해하기 쉽다.
https://document.microcms.io/
데이터 획득

<script>
import axios from 'axios'
export default {
  async asyncData() {
    const { data } = await axios.get(
      // your-service-id部分は自分のサービスidに置き換えてください
      'https://your-service-id.microcms.io/api/v1/blog',
      {
        // your-api-key部分は自分のapi-keyに置き換えてください
        headers: { 'X-API-KEY': 'your-api-key' }
      }
    )
    return data
  }
}
</script>

만 기입하면 됩니다.
또한 마이크로CMS의 컨텐츠 API를 통해 데이터를 필터링할 수 있습니다.
https://document.microcms.io/content-api/get-list-contents

설계

좋아하는 사이트가 좋아하는 부분을 참고했어요.
참고라고는 하지만 거의 패러디(수치 등이 자신의 사이트와 일치)였기 때문에 이곳도 막히지 않았다.글을 읽는 사이트이기 때문에 세련된 공연을 통제하면서 차분한 느낌을 유지하는 것이 목표입니다.

개발하다

위에서 말한 바와 같이, 특히 개발은 매우 지루하게 진행되었다.
Nuxt.js, 마이크로CMS를 공부하는 과정에서 저는 매일 2일까지 디자인을 가지고 다녔습니다. 개발한 지 약 3일이 되는 일주일 정도에 디자인을 완성했습니다.

총결산

공식적인 문헌이 풍부해 처음 학자라도 도전하기 쉬운 내용이다.
학습의 기초와 동시에 의식적으로 흐름을 파악하기 때문에 학습이 매우 중요하다.
Jamstack이 웹 제작 환경을 바꿀까요?