[React/TypeScript] 절대경로 CRA 템플릿 npm 배포

⚡ npm배포

---

지금껏 오픈소스에 대한 막연한 환상을 지닌 채로

언젠가는 나도 도전해봐야 할 일이라고 생각하며 가슴 한편에 묻어두고 있었습니다.

 

그러다 약간의 여유가 생겼고 도전해봄직 하다는 자신감도 생겼지만 막상 뭘 해야 될지 몰랐습니다.

 

고민에 고민을 거듭하다, 일단 최대한 간단하고 npm 배포 연습용 소재를 찾다

저만의 템플릿을 올려보기로 결정했습니다.

 

항상 새로운 프로젝트를 만들 때마다 매번 똑같이 정형화된 포맷을 만들어주기도 귀찮았고,

남들이 안써도 내가 쓰면 그만이라는 생각으로 제작해 봤습니다.

 

그럼 어떤 라이브러리와 보일러 플레이트가 템플릿에 녹아있는지 소개드립니다.

 

 

 

⚡ cra-template-lasbe

---

React - TypeScript와 recoil, styled-components, craco를 이용한 절대경로 설정 등이 적용되어 있는 템플릿입니다.

오류를 발견하신 분은 devlasbe@gmail.com으로 연락 바랍니다.

---

📌 git repository

GitHub - LasBe-code/cra-template-lasbe: React - TypeScript와 recoil, styled-components, craco를 이용한 절대경로 설정

---

📌 npm

cra-template-lasbe

---

📌 프로젝트 생성

$ npx create-react-app my-app --template lasbe

---

📌 템플릿 적용 목록

• React (^18.2.0)
• TypeScript (^4.9.5)
• .prettierrc
• Craco
• Axios
• styled-components
• @types/styled-components (dev)
• react-spinners
• react-router-dom
• recoil
• @tanstack/react-query
• @tanstack/react-query-devtools (dev)

---

🔎 index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { RecoilRoot } from 'recoil';
import { BrowserRouter } from 'react-router-dom';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      suspense: true,
      staleTime: 5 * 60 * 1000,
      cacheTime: 5 * 60 * 1000,
    },
  },
});

root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <RecoilRoot>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </RecoilRoot>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  </React.StrictMode>,
);

• react-router-dom - <BrowserRouter /> in index.tsx
• recoil - <RecoilRoot /> in index.tsx
• @tanstack/react-query - <QueryClientProvider /> in index.tsx
• @tanstack/react-query-devtools (dev) - <ReactQueryDevtools /> in index.tsx

---

🔎 절대 경로

절대 경로와 관련된 설정은 /craco.config.js, /tsconfig.paths.json 파일에 위치합니다.

• craco.config.js

const path = require('path');
module.exports = {
  webpack: {
    alias: {
      '@apis': path.resolve(__dirname, 'src/apis'),
      '@components': path.resolve(__dirname, 'src/components'),
      '@constants': path.resolve(__dirname, 'src/constants'),
      '@hooks': path.resolve(__dirname, 'src/hooks'),
      '@pages': path.resolve(__dirname, 'src/pages'),
      '@states': path.resolve(__dirname, 'src/states'),
      '@styles': path.resolve(__dirname, 'src/styles'),
      '@utils': path.resolve(__dirname, 'src/utils'),
    },
  },
};

 

• tsconfig.paths.json

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@apis": ["./apis/index.ts"],
      "@apis/*": ["./apis/*"],

      "@components": ["./components/index.ts"],
      "@components/*": ["./components/*"],

      "@constants": ["./constants/index.ts"],
      "@constants/*": ["./constants/*"],

      "@hooks": ["./hooks/index.ts"],
      "@hooks/*": ["./hooks/*"],

      "@pages": ["./pages/index.ts"],
      "@pages/*": ["./pages/*"],

      "@states": ["./states/index.ts"],
      "@states/*": ["./states/*"],

      "@styles": ["./styles/index.ts"],
      "@styles/*": ["./styles/*"],

      "@utils": ["./utils/index.ts"],
      "@utils/*": ["./utils/*"]
    }
  }
}

제가 주로 사용하는 구조에 맞게 @xxx 형태로 절대 경로를 설정해 주었으며,

tsconfig에는 폴더 인덱스까지 적용되어 있습니다.

 

만약 다른 구조를 사용한다면 두 파일에서 수정하시면 됩니다.

 

[React + Craco + TS] Alias 절대경로 + 폴더 index 절대경로 설정 방법

절대 경로 설정에 관한 자세한 내용은 위 글을 참고해 주세요.

---

🔎 .prettierrc

{
  "Semicolons": true,
  "singleQuote": true,
  "trailingComma": "all",
  "Tabs": true,
  "tabWidth": 2,
  "printWidth": 140
}

프리티어 설정파일입니다.

입맛에 맞게 수정하시면 됩니다.

 

 

 

⚡ 후기

---

📌 난이도

정식 버전으로 배포하고 공식 문서도 만들어보며 “정말 별거 없다”라고 느꼈습니다.

그냥 안 해봤기 때문에 막연하게 어려워 보였는데 막상 해보니 역시나 할만했습니다.

---

📌 배워간 것

• Semantic Versioning
• npm 배포 방법
• 배포를 위한 package.json 작성 방법
• 리액트 템플릿 배포를 위한 프로젝트 구조

---

📌 이걸 누가??

 

첫 배포 후 4일밖에 안 됐는데 weekly downloads 수가 500이 넘었습니다.

 

처음 보고 기쁘다기보단 이걸 누가 어떻게 찾아서 왜 사용하는지가 더 궁금했습니다.

 

아직까지도 뭔가 떫떠름하고 사람보다는 악성코드 체크하는 봇들이 설치해 봤나?라는 생각이 듭니다.

 

---

📌 계획

앞으로 블로그에 이번에 배우게 된 npm이나 오픈소스에 관한 글들을 정리해 올려볼 생각입니다.

 

그리고 오픈소스 관련해선 리액트에서 모달을 편리하게 사용할 수 있는 라이브러리 제작에 몰두할 예정입니다.

 

이렇게 감 좀 키우다가 큼지막한 오픈소스 기여자에 이름을 한번 올려봐야겠습니다.