Programming/Gatsby5 [Gatsby] Layout 컴포넌트 만들어 UI 재사용 하기 - #04 안녕하세요. 혀코입니다. 이번 시간에는 Gatsby로 각 페이지 마다 반복되는 UI를 layout 컴포넌트로 만들고 재사용 하는 방법에 대해서 알아보겠습니다. src 폴더 아래에 components 폴더를 만들고 layout.js 파일을 만들어 코드를 다음과 같이 작성합니다. import * as React from 'react' import { Link } from 'gatsby' /* const Layout = (props) => { const pageTitle = props.pageTitle const children = props.children return ( ... ) } */ /* JavaScript Destructuring Applied */ const Layout = ({ pageTitl.. 2022. 8. 25. [Gatsby] 새 페이지 만들고 Link component 사용하기 - #03 안녕하세요. 혀코입니다. 이번 시간에는 Gatsby로 새로운 페이지를 만들고 Gatsby의 Link component를 사용해 보겠습니다. /src/pages/Index.js 파일을 다음과 같이 수정합니다. import * as React from "react" const IndexPage = () => { return ( Home Page Welcome to my Gatsby site! I'm making this by following the Gatsby Tutorial. ) } export default IndexPage Index 페이지가 다음과 같이 수정되었습니다. /src/pages 에 about.js 파일을 만들고 다음과 같이 작성합니다. import * as React from 'react.. 2022. 8. 24. [Gatsby] Github에 소스코드 올리고 Gatsby Cloud에 호스팅하기 - #02 안녕하세요. 혀코입니다. 저번 시간에 Gatsby로 로컬에서 웹사이트를 만들었습니다. 이번 시간에는 Gatsby 웹사이트를 Github에 소스코드를 올리고, Gatsby Cloud에 호스팅을 진행해 보겠습니다. Github에가서 Repository를 하나 만듭니다. Repository 이름은 Gatsby로 웹사이트를 만들때 사용했던 폴더이름으로 만들고, 체크박스를 모두 체크 해제한 상태로 (README.md 파일 없이) 만듭니다. Gatsby로 웹사이트 만들었던 폴더로 이동해서 Github에 소스코드를 올려줍니다. $ git init /* 두개 이상의 Github 계정을 사용할 때 Github 계정 정보를 확인해서 업데이트 합니다. */ $ git config --list $ git config --gl.. 2022. 8. 23. [Gatsby] 설치하기 (MacOS) - #01 안녕하세요. 혀코입니다. 이번 시간에는 Gatsby 를 MacOS에 설치하는 방법에 대해서 알아보겠습니다. Terminal에서는 이상하게 설치가 안되어서 bash로 설치했습니다. Homebrew 가 설치되어 있는지 확인합니다. brew -v Xcode Command Line Tools 를 애플 개발자 센터에서 다운로드 받아서 설치합니다. https://developer.apple.com/download/all/?q=xcode%20command%20line node를 설치합니다. $ brew install node gatsby를 설치합니다. $ npm install gatsby-cli --location=global 설치가 완료되면, 다음 명령어를 통해서 gatsby가 제대로 설치되었는지 확인합니다. $ .. 2022. 8. 22. [Gatsby] 설치하기 (Windows) - #01 안녕하세요. 혀코입니다. Gatsby에 대해서 간략하게 설명하자면, React 기반 정적사이트 생성기 입니다. 이번 시간에는 Gatsby 를 설치해 보겠습니다. git bash 에서 텍스트가 깨지는 현상이 있어서 windows powershell을 사용하는 것을 추천 드립니다. gatsby-cli를 node package module을 사용해서 전역 설치합니다. npm install -g gatsby-cli 다음 명령어를 사용해서 gatsby로 웹사이트를 만들어 보겠습니다. $ gatsby new 그러면, 웹사이트 설정을 위한 여러 질문들이 나옵니다. What would you like to call your site? My Website What would you like to name the fold.. 2022. 8. 22. 이전 1 다음
