1. 프론트엔드 개발자를 위한 추천 Snippet

1) React

1. React 함수형 컴포넌트

   import React from 'react'
   
   const ComponentName = () => {
     return (
       <div>
         
       </div>
     )
   }
   
   export default ComponentName
   

   • 스닙펫의 Variables를 활용한 응용

2. React useEffect 훅

   useEffect(() => {
     return () => {
   
     }
   }, [])
   

   • 스닙펫의 다중 커서를 활용한 응용

3. React useState 훅

   const [state, setState] = useState(initialState)
   

   • 스닙펫의 다중 커서를 활용한 응용

4. React useCallback 훅

   const [state, setState] = useState(initialState)
   

2) Next.js

1. Next.js getServerSideProps

   import { GetServerSideProps } from 'next';
   export const getServerSideProps: GetServerSideProps = async (context) => {
     return {
       props: {}
     }
   }
   
   

2. Next 페이지 컴포넌트

   import { NextPage } from 'next'
   
   const PageName: NextPage = () => {
     return (
       <div>
         <h1>PageName</h1>
         
       </div>
     )
   }
   
   export default PageName
   

2. 블로그 작성자를 위한 추천 Snippet

1. Markdown

   ---
   title: "제목을 입력하세요"
   date: "YYYY-MM-DD"
   author: "작성자 이름"
   tags: ["태그1", "태그2"]
   ---
   
   # 제목
   
   ## 소개
   
   여기에 블로그 포스트의 소개를 작성하세요. 이 글에서 다룰 주요 내용을 간략히 설명합니다.
   
   ## 주요 내용
   
   ### 1. 첫 번째 주제
   
   첫 번째 주제에 대한 내용을 여기에 작성하세요.
   
   ### 2. 두 번째 주제
   
   두 번째 주제에 대한 내용을 여기에 작성하세요.
   
   ## 코드 예시
   
   필요한 경우 코드 예시를 포함할 수 있습니다:
   

3. Variables

Snippet Wizard에서는 동적 값을 삽입하기 위해 변수를 사용할 수 있습니다. 변수는 ${} 괄호 안에 넣어 사용합니다.

• 예시

  "init component": {
    "prefix": "init component",
    "body": [
      "interface ${TM_FILENAME_BASE}Props {",
      "}",
      "export default function ${TM_FILENAME_BASE}() {",
      "  return <div></div>;",
      "}"
    ],
    "description": "Generated snippet: init component"
  },
  

1. TM_FILENAME: 현재 파일의 이름 (확장자 포함)
2. TM_FILENAME_BASE: 현재 파일의 이름(확장자 제외)