📍설치yarn add -D husky lint-staged 📍husky 초기화npx husky init- 그러면 .husky 폴더가 만들어지고, 그 안에 pre-commit 파일이 생긴다- pre-commit 파일에 pre commit hook을 작성할 수 있다- 그리고 설치한 내용을 반영하기 위해 커밋을 한번 해준다 📍husky 테스트- 일단 .husky/pre-commit 파일에 테스트 명령어를 입력해서 pre commit hook이 잘 동작하는지 테스트해본다echo "pre commit hook test"- 빈 커밋 날려보기 (VS Code에서 소스 컨트롤(GUI)로 커밋을 하면 husky 적용이 안되므로 터미널에 입력해야 함)git commit --allow-empty -m "test com..

📍참고 https://www.react-hook-form.com/get-started 📍예시 코드 1 import { useForm } from "react-hook-form"; export default function App() { const { register, handleSubmit, watch, formState: { errors } } = useForm(); const onSubmit = data => console.log(data); console.log(watch("example")); // input 밸류 이름을 watch 함수에 전달하여 값 확인 return ( /* handleSubmit은 onSubmit을 호출하기 전에 입력 유효성 검증 실행 */ {/* register함수를 호출하..

📍참고 https://docs.npmjs.com/cli/v9/using-npm/workspaces?v=true workspaces | npm Docs Working with workspaces docs.npmjs.com 📍환경 체크 NPM 버전 확인 npm --version 9.6.3 # 230403 현재 최신버전 NPM을 최신 버전으로 업데이트하기 npm install npm@latest -g 📍Workspace 란? ✅단일 최상위 루트 패키지 내에서 로컬 파일 시스템의 여러 패키지 관리를 지원하는 npm cli의 기능 집합을 지칭 예) 최상위 package.json 이 하위 폴더의 package.json을 관리하고 보조 Workspace ├ package.json ├ view │ └ package.j..

📍참고 https://docusaurus.io/docs/markdown-features/react MDX and React | Docusaurus Using the power of React in Docusaurus Markdown documents, thanks to MDX docusaurus.io 📍마크다운에서 JSX 사용하기 - .mdx 확장자는 마크다운에서 jsx를 사용할 수 있게 해준다 - .mdx 내의 jsx는 리액트 컴포넌트처럼 렌더링된다 📍MDX는 JSX이다 - HTML 스타일 대신 JSX 스타일을 사용해야 한다 /* Instead of this: */ Foo /* Use this: */ Foo 📍컴포넌트 import 하기 - mdx에서 다른 파일에서 작성된 컴포넌트 또는 다른 라이브러리의..

📍참고 https://docusaurus.io/docs/installation Installation | Docusaurus How to install Docusaurus locally, and start a Docusaurus site in no time. docusaurus.io 📍설치 npx create-docusaurus@latest my-website classic --typescript 📍프로젝트 구조 개요 ✅/blog/ - 블로그 포스트용 md 파일을 포함 - 블로그 플러그인을 사용하지 않는다면 삭제해도 됨 ✅/docs/ - 문서용 md 파일을 포함 - sidebar.js 파일을 수정하여 문서 순서를 수정 가능 - 문서 플러그인을 사용하지 않는다면 삭제해도 됨 ✅/src/ - md 파일이 아..

📍참고 https://www.gatsbyjs.com/docs/how-to/plugins-and-themes/adding-gatsby-image-support/#adding-a-gatsbyimagedata-graphql-resolver Adding Gatsby Image support to your plugin | Gatsby The new Gatsby image plugin includes React components for displaying images, and these can be used with data from plugins. The plugin… www.gatsbyjs.com 📍gatsbyImageData 리졸버 - 이미지의 크기를 조절 (layout) - 이미지가 위치할 자리에 처음부터..

📍참고 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..