내가 쓰려고 만든 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=", ..

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 작성 코드만 이해하면 됨