이 시리즈에서는 내 블로그(ashutosh.dev)의 코드를 Next.js로, Mojolicious를 백엔드로 다시 작성합니다. 이 시리즈의 첫 번째 기사입니다.

왜 다시 작성합니까?

대부분의 경우 응용 프로그램을 다시 작성하는 것은 좋은 생각이 아닙니다. 애플리케이션을 다시 작성해서는 안 되는 수많은 이유가 있습니다. 나는 비판과 다르지 않다.

하지만 제 경우에는 제 블로그의 UI가 별로였습니다. 모범 사례를 사용하여 개발되지 않았으며 등대 점수는 낮은 편입니다. SEO 친화적이지 않고 최적화되지 않았으며 올바르게 반응하지도 않습니다. 그냥 개발을 위해 개발했습니다.

웹 앱에서 확인된 문제가 너무 많아서 다시 작성하기로 결정했습니다. 게다가 1주일, 2주일, 3주일 정도 늦춰도 시간제한이 있는 건 아니고, 그래도 살 수 있어요.

사용할 기술 스택

프론트엔드

CSS 프레임워크로서의 Tailwind

NextJS

동화책

GraphQL

백엔드

Perl 애호가이기 때문에 Mojolicious(Mic Drop)를 사용할 것입니다.

프로젝트 프론트엔드 설정

기사의 이 부분에서는

NextJs 프로젝트

Tailwind CSS 프레임워크 설치

스토리북 설정

Apollo Client로 GraphQL 설정하기

Git 저장소

Next.js 프로젝트 설정

Next.js에서 새 프로젝트를 만들려면 다음 명령을 실행합니다.

npx create-next-app

다음 단계에서는 응용 프로그램 이름을 묻고 이름을 ashutosh-dev로 지정합니다. 제 블로그 이름인데 이해가 가네요.

Tailwind CSS 설치

npm을 사용하여 Tailwind CSS를 설치하겠습니다.

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

구성 파일을 만듭니다.

npx tailwindcss init -p  

tailwind.config.js를 열고 purge: []를 다음으로 바꿉니다.

purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],

그게 다야. Tailwind CSS를 구성했습니다. 애플리케이션 개발을 시작할 때 _app.js 아래에서 가져올 것입니다.

스토리북 설치

스토리북은 UI 개발 툴킷입니다. 구성 요소를 분리하고 개발 속도를 높입니다.

스토리북을 설치하려면,

npx sb init  

# Starts Storybook in development mode
yarn storybook

포트 6006에서 스토리북 클라이언트를 시작합니다.

사용법은 나중에 다루도록 하겠습니다. 지금은 Next.js 프로젝트를 설정해 보겠습니다.

Apollo 클라이언트가 있는 GraphQL

Apollo 클라이언트를 설치하려면 다음 명령을 실행하십시오.

npm install @apollo/client graphql 

힘내 설정

이 기사의 마지막 섹션은 GitHub에서 Git 리포지토리를 설정하는 것입니다.

이미 GitHub에 Git 저장소를 만들었습니다. 이제 거기에 내 코드를 푸시하기만 하면 됩니다.

그 전에 다음을 실행해야 합니다.

git remote add origin https://github.com/akuks/ashutosh-dev.git
git branch -M main
git push -u origin main

요약

이 기사에서는 블로그를 개발하는 데 사용할 기술 스택을 결정합니다. 우리는 또한 설치하여 프로젝트를 설정합니다.

Next.js

Next.js 프로젝트 생성

스토리북 설정

Apollo 클라이언트 설정

git 저장소 설정

다음 기사를 기대해 주세요.

다음 기사에서는 웹 애플리케이션의 UI 개발을 시작할 것입니다.