1-3. Gatsby 프로젝트 생성하기

2022. 8. 8.·🎨 프론트엔드 공부/기타

1. Gatsby 프로젝트 생성

 

npx gatsby-cli new '[프로젝트명]'

 

이후 생성된 폴더로 이동해 gatsby develop 명령어 실행

 

gatsby develop

 

로컬 서버 동작 확인 후 디렉토리 세팅

 

2. 디렉토리 세팅

Root

ㄴcontent : 블로그 포스트 관련 파일 저장

ㄴ src

    ㄴ components : React 컴포넌트 저장

    ㄴ hooks : 커스텀 Hooks 저장

    ㄴ pages : 페이지 컴포넌트 저장 -> 브라우저에서 pages 디렉토리의 파일들에 접근하기 때문에

다른 컴포넌트 배치하면 절대 안됨

    ㄴ templates : 게시글 페이지같이 페이지의 역할을 하면서 같은 형식의 여러 컨텐츠를 보여주는 컴포넌트를 저장

Gatsby에서 제공하는 API를 통해 이 디렉토리에 저장된 템플릿 컴포넌트로 여러 페이지 만들기 가능

 

안쓰는 라이브러리 제거

- gatsby-plugin-manifest : PWA (progressive web app)

- gatsby-plugin-gatsby-cloud : Gatsby Cloud

'🎨 프론트엔드 공부/기타' 카테고리의 다른 글
  • 2-1. TypeScript로 컴포넌트 작성하기
  • 1-4. TypeScript 개발 환경 구성하기
  • 1-2. Gatsby를 위해 필수로 알아야 할 기술
  • 1-1. Gatsby란 무엇일까?
지식물원
지식물원
지식이 자라는 식물원!
  • 지식물원
    지식물원
    지식물원
  • 전체
    오늘
    어제
    • 분류 전체보기 (516)
      • 🎨 프론트엔드 공부 (253)
        • JS & TS (92)
        • HTML & CSS (22)
        • React & Next (49)
        • Vue & Nuxt (22)
        • 기타 (68)
      • 🤓 기술 학습 & 공부 기록 (116)
        • Node.js (0)
        • Python (37)
        • 백엔드 (0)
        • 딥러닝 (1)
        • 컴퓨터 일반 (72)
        • 개발 인프라 (6)
      • 👨‍💻 프로젝트 경험 (6)
        • Work (0)
        • Toy (6)
      • ⚙️ 개발 팁 & 노하우 (21)
        • 프론트엔드 (6)
        • 기타 (15)
      • ☕️ 커리어 & 인터뷰 준비 (88)
        • 코딩 테스트 (88)
      • 📰 기술 트렌드 & 생각 정리 (4)
      • 📚 기타 (25)
        • 마케팅 (15)
        • 비개발서적 (10)
  • 블로그 메뉴

    • 태그
  • 링크

  • 공지사항

    • 모바일 접속 시 코드 하이라이팅 깨질 때
  • 인기 글

  • hELLO· Designed By정상우.v4.10.3
지식물원
1-3. Gatsby 프로젝트 생성하기
상단으로

티스토리툴바