Feat/add tailwind plugin and nvmrc

[up456]

작업 내용

사진, 코드 등 리뷰어가 쉽게 이해할수 있게 상세히 리뷰어에 입장에서 작성해주요.

eslint가 동작하지 않던 부분 수정

before

• yarn lint 명령어가 동작하지 않음
• 기본적으로 eslint 규칙이 적용되지 않아 경고를 띄위지 않았음.

after

• yarn lint 명령어가 동작하고
• 기본적으로 eslint 규칙에 의한 경고가 에디터에 노출됨.
• yarn lint:debug, lint:fix 명령어 추가

해결 방법

• ESLint는 설정 파일을 로드할 때 직접 내보낸 배열을 기대하기 때문에 직접 내보내는 방식으로 수정
• ❌ 잘못된 방식
  const config = [...]
  export default config
• ✅ 올바른 방식
  export default [...]

tailwind eslint 설치

before

• tailwind className에 대한 최적화없이 입력 그대로 적용

after

• tailwind className에 대한 최적화를 위한 경고가 나오고 저장 시 최적화됨
  
  

prettier가 동작하지 않는 버그

before

• tailwind className이 자동 정렬없이 입력 그대로 적용되고 빈공간이 유지됨.
  

after

• tailwind className이 저장시 고정된 기준으로 정렬되고, 빈공간이 삭제.
  

해결 방법

• 원인: npm에 최적화 되어 있는듯 하다. 다른 해결책으로는 nodule_modules를 상단에 하나 만들라고하는 해결책이 있었는데 좋지 않은 방법 같아서 아래와 같은 우회하는 방법으로 처리.

1. yarn unplug prettier-plugin-tailwindcss
2. prettier 파일을 js파일로 바꾸고 반드시 모듈 형태로 플러그인을 가져와야 된다.

module.exports = {
    plugins: [
    
        require.resolve('prettier-plugin-tailwindcss'),
    ],
}

• 관련 링크

이러한 변경이 이루어지는 이유는 무엇인가요?

• eslint가 동작하지 않던 부분 수정: 동작하지 않아서 수정
• tailwind className을 동일하게 정돈하기 위해서

테스트 방법

변경사항에 대해 리뷰어가 테스트할 수 있는 가이드를 step by step으로 제공하세요.

1. tailwind 클레스명의 순서를 변경하고 정렬이 되는 지 확인하세요.
2. tailwind 클레스명에 w-4 h-4를 넣고 size-4로 바뀌는지 확인하세요.
3. nvm use를 명령어로 v20.10.0으로 노드 버전이 설정되는 지 확인하세요.

병합 전 체크리스트

• 수정 내용에 오타나 컨벤션이 틀린 부분이 없는지 확인했나요?
• 추가된 리뷰에 대해 모두 수정 및 재리뷰를 완료했나요?