2장 간단하게 페이지 띄워보기2-1. TypeScript로 컴포넌트 작성하기2-2. GraphQL Query 알아보기 1) GraphQL에서의 Query는 어떻게 사용할까?GraphQL : 필요한 데이터만 받아올 수 있음 (REST API와 다르게) 예시) 모든 유저들의 id과 name을 조회하는 getPeopleList 쿼리query getPeopleList { allPeople { edges { node { id name } } }} 반환값 { "data": { "allPeople": { "edges": [ { "node": { "id": "cGVvcGxlOjE=", ..

2장 간단하게 페이지 띄워보기2-1. TypeScript로 컴포넌트 작성하기 1) TypeScript의 핵심 기능, Types리액트에서는 함수형 컴포넌트를 위해 FunctionComponent 타입을 제공한다 // index.tsximport React, { FunctionComponent } from 'react'import Text from 'components/Text'const IndexPage: FunctionComponent = function () { return }export default IndexPage   2) React에서 Types를 잘 활용할 수 있게 해주는 GenericGeneric : 어떤 클래스나 함수에서 사용할 타입을 사용할 장소에서 결정할 수 있게 해주는 기능 예시) ..

1. TypeScript 설치하기프로젝트에서 TypeScript를 사용하기 위해 설치 진행 npm i -D typescript 또한 Gatsby에서 타입스크립트 사용을 위한 플러그인 설치 npm i gatsby-plugin-typescript 설치후 gatsby-config.js 파일에서 타입스크립트 플러그인 추가, contents 파일 디렉토리 탐색하도록 옵션 변경 그리고 tsconfig.json 설정을 위해 루트디렉토리에서 아래 코드 실행 tsc --init paths 옵션을 위주로 수정 (paths : 절대경로를 사용하기 위해 경로를 매핑해주는 옵션)- baseUrl : "./src" 매핑 경로 사용을 위해 gatsby-node.js 파일에서 Webpack Config 추가 gatsby-node.j..

1. Gatsby 프로젝트 생성 npx gatsby-cli new '[프로젝트명]' 이후 생성된 폴더로 이동해 gatsby develop 명령어 실행 gatsby develop 로컬 서버 동작 확인 후 디렉토리 세팅 2. 디렉토리 세팅Rootㄴcontent : 블로그 포스트 관련 파일 저장ㄴ src    ㄴ components : React 컴포넌트 저장    ㄴ hooks : 커스텀 Hooks 저장    ㄴ pages : 페이지 컴포넌트 저장 -> 브라우저에서 pages 디렉토리의 파일들에 접근하기 때문에다른 컴포넌트 배치하면 절대 안됨    ㄴ templates : 게시글 페이지같이 페이지의 역할을 하면서 같은 형식의 여러 컨텐츠를 보여주는 컴포넌트를 저장Gatsby에서 제공하는 API를 통해 이 디..

1. React 2. GraphQL- 페이스북에서 개발한 쿼리 언어 (SQL과 비슷한)- 각각의 엔드 포인트에서 고정된 데이터를 받을 수 있는 Rest API와 다르게단일 엔드포인트에서 원하는 데이터만을 받을 수 있다는 장점이 있음 - 쿼리를 작성해 데이터를 받아올 수 있으며,- 데이터 변경을 위한 Mutation- 실시간 기능을 위한 Subscription이 있음 query 기능 위주로 사용하기 때문에 query 작성 코드만 이해하면 됨

Gatsby가 무엇인지 알기 전에 먼저 JAM Stack이 무엇인지 알아야 한다 JAM Stack이란?더 빠르고 안전하고 확장하기 쉬운 웹페이지를 만들기 위해 디자인된 아키텍쳐 JavsScriptAPIMarkup의 약자로, 어떤 기술을 사용하는지 이름에서 명시되어 있다 기존 웹사이트의 방식은서버/데이터베이스에서 데이터를 가져와 프론트엔드에 뿌려주는 방식으로 절차가 길어 복잡 반면, JAM Stack을 이용한 방식은 절차가 매우 간단빠르게 만든 정적 웹사이트를 CDN을 통해 빠르게 구현JAM Stack의 장점1. 기존 방식에 비해 더 빠르게 웹 사이트 제공- pre-render 방식으로 시간 단축- CDN을 통한 제공=> 브라우저에서 첫 응답을 받기까지 걸리는 시간인 TTFB(Time to First By..

Gatsby 프레임워크를 사용하면 정적 페이지를 빠르고 간편하게 만들 수 있다고 들은 적이 있다. 나도 나만의 웹사이트를 쉽고 빠르게 만들어보자 인프런 강의 시작~