개발기술/React기반 Gatsby로 블로그 개발하기

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

EmotionsJS란 Sass, Css같은 경우 스타일 파일을 따로 만들고, 이를 컴포넌트 파일에서 불러와 적용하는 방식 EmotionJS 라이브러리는 `CSS-in-JS` 라이브러리로, 자바스크립트 파일 내에서 스타일을 지정할 수 있는 라이브러리다 왜 EmotionJS인가? 다운로드 횟수를 보면 ㄷ부분 사용자가 `styled-components 라이브러리` 또는 `EmotionJS 라이브러리`를 사용하는데, EmotionJS 라이브러리가 월등히 높다 styled-components `장점` 템플릿 리터럴 또는 객체를 통해 손쉽게 스타일을 적용한 컴포넌트를 만들 수 있고 손쉽게 적용할 수 있다 Sass 문법을 지원하기 때문에 더 간결한 코드 작성이 가능하고, 서버사이드렌더링을 지원해주기 때문에 이를 위해..

[React기반 Gatsby로 블로그 개발하기] Gatsby Link API

Gatsby 페이지 이동 Link API를 통한 페이지 이동 를 통해서도 링크이동이 가능하지만, 새로고침이 일어남 Gatsby에서는 기본적으로 페이지 이동을 위한 APi 제공하고 있음 => Link API import React, { FunctionComponent } from 'react' import Text from 'components/Text' import { Link } from 'gatsby' const IndexPage: FunctionComponent = function () { return ( To info ) } export default IndexPage Gatsby Link API의 이점 Gatsby는 `Prefetch`를 통해 페이지에서 사용할 리소스의 로딩 속도를 높인다 그럼 ..

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

GraphQL에서의 Query 사용법 GraphQL은 필요한 데이터만 받아올 수 있다는 점에서 매력을 가진다 [입력값] query getPeopleList { allPeople { edges { node { id name } } } } [결과 반환값] "data": { "allPeople": { "edges": [ { "node": { "id": "cGVvcGxlOjE=", "name": "Luke Skywalker" } }, { "node": { "id": "cGVvcGxlOjQ=", "name": "Darth Vader" } }, ] } } } 이처럼 원하는 데이터만 가져올 수 있다 GraphiQL : 강력한 기능 Gatsby에서는 홈페이지의 메타데이터, 마크다운 관련 데이터, 이미지 데이터 등을 Q..

[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 장점 기..