너무 귀찮아요

솔직히 cra쓰면 리액트를 사용하기 위한 필수적인 세팅은 모두 해줘서 편하긴 하지만,

부가적인 것도 있고, 리액트 기본 페이지에 들어간 css도 모두 지워줘야해서 불편하다.

추가로 컴포넌트, 훅, libs, types 같은 폴더들은 어떤 프로젝트를 하든 똑같이 사용하기 때문에, 이런 것들을 편하게 해주고자 boiler plate를 사용해보기로 했다.

보일러 플레이트란?

“”컴퓨터 프로그래밍에서 상용구 코드 또는 상용구는 수정하지 않거나 최소한의 수정만을 거쳐 여러 곳에 필수적으로 사용되는 코드를 말한다. 이와 같은 코드는 최소한의 작업을 하기 위해 많은 분량의 코드를 작성해야 하는 언어에서 자주 사용된다.

리액트같은 경우 폴더세팅등이 위의 케이스에 해당한다.

보일러 플레이트 만드는법

일단 나의 경우 npm에 올라가는 프로젝트와 설치했을때 복사해오는 프로젝트 각각 두 레포지토리로 나눠서 작업했다.

package.json설정을 통해 명령어를 실행하면 연결된 레포지토리를 복사하는 원리이다.

내 보일러 플레이트

• 기본적으로 생성되는 css와 웹 바이탈체크, 테스트등의 파일을 전부 지워준 후, index.css에서 margin, font-size등을 이니셜라이징 해주고, 프리텐다드도 적용해준다.
• 폴더는 기본적으로 components, hooks, libs, types로 나뉘고 components안에는 router와 layout, Main이 있다.
• hooks에 auth기능을 포함시켜 로그인, 회원가입 훅을 미리 작성해두었다.
• libs에는 리액트 쿠키와 커스텀엑시오스를 세팅해두었다.
• types에는 auth에 필요한 인터페이스를 선언해두었다.
• styled-components를 이용하고, import * as S from './style'을 이용해 스타일드 컴포넌트를 사용한다.

내 보일러 플레이트 사용하기

있을진 모르겠지만 내 보일러플레이트 쓸 사람은

npx cher1sh-react-app ./

을 사용하면 된다.

(npm start하면 나오는 화면 ㅎ)

훈수는 언제나 환영