📍참고 https://www.gatsbyjs.com/blog/how-to-use-the-contentful-rich-text-field-with-gatsby/ How To Use The Contentful Rich Text Field with Gatsby | Gatsby Contentful’s Rich Text Editor provides content creators with powerful text editing capabilities via the use of Contentful’s "What you see is what you get" (wysiwyg) editor. www.gatsbyjs.com https://github.com/contentful/rich-text/tree/master/pack..

📍Gatsby Image components 2가지 1️⃣StaticImage - Static image - 컴포넌트나 템플릿에 관계 없이 항상 똑같은 이미지이어야 할 때 - 예시 import { StaticImage } from "gatsby-plugin-image" export function Dino() { return ( ) } 2️⃣GatsbyImage - Dynamic image - CMS로부터의 데이터 또는 컴포넌트에서 전달받은 값에 따라 이미지가 달라져야 할 때 - 이미지를 포함하는 모든 GraphQL 객체는 childImageSharp 필드 형태로 존재 - gatsbyImageData 리졸버를 통해 이미지를 설정 - getImage 함수를 통해 이미지를 쉽게 꺼낼 수 있다 ( .child..

내가 쓰려고 만든 ESLint & Prettier 사용법 (for React & TypeScript) ESLint 1. package.json 확인 - eslint 관련 패키지가 설치되어 있는지 확인 - CRA의 경우 eslint config도 내장되어 있음 - Vite의 경우 내장 X (230824 현재는 내장되어 있음) 2. (없는 경우)패키지 설치 및 CLI 설정 실행 npm i -D eslint npm init @eslint/config // 또는 yarn create @eslint/config CLI 방식으로 설정하는 이유 - React나 TS를 사용할 때 필요한 플러그인도 함께 다 설치해줌 3. 순서대로 아래처럼 입력 4. rule 추가 (널리 쓰이는 rule) "@typescript-esli..

Create-React-App 보다 훨씬 빠르게 React 개발 환경 구축 TypeScript도 지원 1. 설치 npm create vite@latest 2. CLI 에서 프로젝트명, 프레임워크, 타입스크립트 사용 여부 지정 3. 프로젝트 생성 npm i npm run dev 그 밖에 - tsconfig.json도 그대로 써도 될만큼 잘 되어 있음 - 환경 변수를 새롭게 제공 import.meta.env.~ 이렇게~

Bootstrap이란? - 웹 디자인용 오픈소스 프레임워크 - HTML, CSS, JS 사용 - 트위터에서 개발 그런데 Framework란? - 소프트웨어의 생산성을 높이기 위해 개발된 방법 - 반복된 구조나 기능들을 추상화시켜 재사용이 가능하도록 하는 소프트웨어 환경 - 즉, 미리 만들어놓은 기능을 어플리케이션에서 손쉽게 재사용할 수 있도록 해준다 - 따라서 라이브러리에 비해 프레임워크의 주도권이 강함 (전용 문법 多) Bootstrap의 장점 - 오픈소스 - 디자인 코딩 부담 완화 - Grid disply를 바탕으로 다양한 사이즈와 비율을 지원 - 반응형 웹 대응 쉬움 Bootstrap의 단점 - 기존 코드와 충돌 - 추가 메모리 소요 (부트스트랩 전체 이용시 126kb의 CSS, 29kb의 JS 코..

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=", ..