gatsby

[React기반 Gatsby로 블로그 개발하기] Typescript 적용하기

Typescript 타입스크립트 : 자바스크립트의 동적 타입으로 인해 야기될 수 있는 문제를 해결할 수 있음 const str: string = "This is String" // Good const num: number = "This is String" // error TS2322: Type 'string' is not assignable to type 'number'. React 컴포넌트 작성할 때 타입 표시해줄 수 있는 것은 컴포넌트를 저장한 변수 뿐 리액트에서는 기본적으로 함수형 컴포넌트를 위한 타입 제공해줌 import React, { FunctionComponent } from 'react' import Text from 'components/Text' const IndexPage: Funct..

[React기반 Gatsby로 블로그 개발하기] Gatsby & GraphQL

왜 Gatsby React기반 프레임워크, Next.js가 1위, Gatsby가 2위 왜 1위인 Next.js안쓰고 Gatsby를 쓰는가? Next.js는 정적 사이트 생성기능도 있지만 주로 서버 사이드 렌더링을 위해 사용하는 프레임워크, 즉 서버와 통신을 해 요청을 받을때마다 동적으로 웹사이트를 생성 Gatsby는 서버없이 오로지 정적 사이트 생성을 위해 사용하는 프레임워크 => 블로그, 소개페이지, 포트폴리오 등에 많이 사용됨 블로그 개발이 목적이어서 Gatsby 사용 Gatsby & GraphQL Gatsby Gatsby는 React를 사용하는 `JAM Stack 기반 프레임워크` GraphQL 페이스북에서 개발한 쿼리 언어 각각의 엔드 포인트에서 고정된 데이터를 받을 수 있는 Rest API 그와..

[React기반 Gatsby로 블로그 개발하기] JAM Stack

JAM Stack JAM Stack이란, Javascript, API, MarkUp Stack의 약자로 자바스크립트와 API, HTML이나 CSS등을 칭하는 MarkUp으로 이루어진 웹 구성 방법 더 빠르고 안전하며 스케일링하기 쉬운 웹을 만들기 위해 디자인된 아키텍쳐 기존 웹사이트 방식은 대부분 서버에서 데이터 베이스 또는 CMS(Content Management System)로부터 추출한 데이터를 프론트엔드에 뿌려주는 방식 -> 복잡하다 JAM Stack은 기존 웹사이트 방식과 다르게 절차가 매우 간단 각종 마크업 요소와 다양한 API를 통해 만든 정적 웹사이트를 Pre-Render한 것을 CDN(Content Delivery Networ)을 통해 웹사이트를 열람할 수 있다 JAM Stack 장점 기..