코드 스니펫으로 개발을 개선할 수 있습니다.

저는 개발자로서 반복적인 것을 만드는 것을 싫어합니다. 나는 React 개발자로 일하고 있으며 모든 기능적 구성 요소, 후크 및 스타일을 계속해서 생성하는 것이 나를 짜증나게 합니다.

대부분의 IDE 및 코드 편집기는 템플릿을 만드는 데 도움이 되는 코드 스니펫을 지원합니다. 저는 VS 코드 편집기를 사용하고 작업 중인 각 프로젝트에 대해 코드 스니펫을 추가하려고 합니다.

기능성 성분

기능적 구성 요소를 만드는 간단한 예부터 시작하겠습니다.

import React from ‘react’
import * as S from ‘./${TM_FILENAME_BASE}.styles’

interface ${TM_FILENAME_BASE}Props {

}

function ${TM_FILENAME_BASE}(props: ${TM_FILENAME_BASE}Props) {

}

export { ${TM_FILENAME_BASE} }
export type { ${TM_FILENAME_BASE}Props }

확장자가 없는 파일 이름을 나타내는 변수${TM_FILENAME_BASE}를 사용합니다. 일반적으로 파일 이름과 구성 요소 이름은 동일하므로 구성 요소 이름으로 모든 변수를 자동으로 채웁니다.

반응형 컴포넌트

저는 styled-components 로 구성 요소 스타일링을 즐깁니다. 이에 대한 기사를 확인할 수 있습니다. 아래 예에서 볼 수 있듯이 코드 스니펫에는 반응형 구성 요소를 만드는 데 필요한 모든 것이 포함되어 있습니다.

import React, { useCallback } from ‘react’
import { ${TM_FILENAME_BASE}Props } from ‘./${TM_FILENAME_BASE}’
import * as S from ‘./Responsive${TM_FILENAME_BASE}.styles’

type Responsive${TM_FILENAME_BASE}Props = ${TM_FILENAME_BASE}Props

function Responsive${TM_FILENAME_BASE}(props: Responsive${TM_FILENAME_BASE}Props) {
  const renderDesktop = useCallback(() => <S.Desktop${TM_FILENAME_BASE} {...props} />, [props])
  const renderMobile = useCallback(() => <S.Mobile${TM_FILENAME_BASE} {...props} />, [props])

  return <ResponsiveLayout renderDesktop={renderDesktop} renderMobile={renderMobile} />
}

export { Responsive${TM_FILENAME_BASE} as ${TM_FILENAME_BASE} }
export type { Responsive${TM_FILENAME_BASE}Props }

반응형 구성 요소 스타일

반응형 구성 요소에 대한 스타일이 포함된 코드 스니펫은 더 까다롭습니다. 주요 문제는 정규식 구문입니다. 파일 이름과 responsive 부분에서 조건부 .styles 단어를 제거해야 합니다. /(Responsive|)(.*)\\..+$/$2/를 전달하여 기능 구성 요소의 이름만 취하고 다른 부분은 제거합니다.

import styled from ‘styled-components’
import { ${TM_FILENAME_BASE/(Responsive|)(.*)\\..+$/$2/} } from ‘./${TM_FILENAME_BASE/(Responsive|)(.*)\\..+$/$2/}’

const Desktop${TM_FILENAME_BASE/(Responsive|)(.*)\\..+$/$2/} = styled(${TM_FILENAME_BASE/(Responsive|)(.*)\\..+$/$2/})``
const Mobile${TM_FILENAME_BASE/(Responsive|)(.*)\\..+$/$2/} = styled(${TM_FILENAME_BASE/(Responsive|)(.*)\\..+$/$2/})``

export { Desktop${TM_FILENAME_BASE/(Responsive|)(.*)\\..+$/$2/}, Mobile${TM_FILENAME_BASE/(Responsive|)(.*)\\..+$/$2/} }

Redux 표준 동작

다음은 표준 redux 작업에 대한 코드 스니펫의 예입니다. 흥미로운 부분은 페이로드 인터페이스의 이름 지정에 있습니다. 구성 요소 이름이 대문자로 시작하는 경우 redux 작업 이름은 대문자로 시작해서는 안 됩니다. 인터페이스의 이름을 올바르게 지정하려면 upcase 단어를 사용하여 파일 이름을 변환해야 합니다. /([A-z]{1})/${1:/upcase}/ 첫 번째 문자를 선택하고 대문자로 변환합니다.

import { createStandardAction } from ‘typesafe-actions’

interface ${TM_FILENAME_BASE/([A-z]{1})/${1:/upcase}/}Payload {

}

const ${TM_FILENAME_BASE}Action = createStandardAction(‘$0${TM_FILENAME_BASE}’)<
  ${TM_FILENAME_BASE/([A-z]{1})/${1:/upcase}/}Payload
>()

export { ${TM_FILENAME_BASE}Action }
export type { ${TM_FILENAME_BASE/([A-z]{1})/${1:/upcase}/}Payload }

결론

보시다시피 코드 스니펫은 강력한 기능이며 개발 속도를 개선하고 높일 수 있습니다. 반복되는 코드 구조가 있거나 유사한 파일을 많이 생성해야 하는 경우 코드 스니펫을 살펴보십시오.

사진 제공: Adi Goldstein on Unsplash