Backend 개발자인 제가 React 를 구성해보고 싶어 열심히 공부하고 테스트해가며 배운것들을 매우 심플하게 정리합니다.
검색하면 서로 너무너무 다른 방식으로 예제나 코드들이 설명되고 있어 했갈리더 군요.
그래서 너무 복잡한 바람에 그냥 매우 간단한 요점만 기재합니다.
세부적으로 파고듬은 전반적으로 이해한 후에 진행하는걸로 !
사전 설치 (맥 기준 )
brew install node
brew install npm
brew install yarn
brew install npx (맞나?)
React 로 프로젝트를 구성할 때 전반적인 구성요소
React 를 처음부터 구성하려면 여러가지 세팅을 해야한다.
- NPM 및 Yarn
- 그냥 패키지 매니저다. Ruby 나 Python 도 NPM 을 이용해 라이브러리들을 가져온다.
- Spring 의 Maven 혹은 Gradle 이라고 보면 된다.
- Babel
- 최신 브라우저의 자바스크립트 기능 및 문법이 과거 브라우저에선 통하지 않기에, 여러분이 작성한 코드를 컴파일시 자동으로 구버전 자바스크립트 ( ES5 등 ) 으로 변환해준다.
- WebPack
- 프로젝트를 보기좋고 깔끔하게 관리하려면 디렉토리등 구조적으로 작성해야 하는데, 배포할땐 단하나의 파일로 만들어 로딩 회수도 줄이고 Javascript Minified 도 하는등의 역할을 해준다.
- ESLint
- SonaLint 를 아는가? 똑같다. 그냥 문법문제가 있는것들을 콘솔상에서 Warning 으로 알려준다.
- TypeScript
- Java 변수에 String, integer 등의 형선을 생각하자. 개념상 똑같다. 타입을 지정해서 프로젝트를 좀더 안전하게 관리하자 이다.
- TailWind
- React 의 HTML 객체에 스타일을 적용할때 아래와 같이 작성해야 하는데, 기존문법처럼 작성하면 인식해준다.
- 기본
<div className="[{"div", "h2", "span"}]"></div>
- TailWind 가 아래 문법도 지원
<div class="div h2 span"></div>
* 좀더 HTML 작성스럽게 지원한다.
React CRA
React CRA 는 뭐냐? React 가 히스토리를 아는 프론트엔드 개발자들은 구성하기 쉽겠지만
나같이 Jquery 이후에 손 안대본 개발자나 처음부터 시작하는 사람은 라이브러리 종류도 많고 세팅법도 어려워서
페이스북이 BolilerPlate 를 만들어 두었다.
난 그것도 모르고 이걸로 시작했다가 웹팩 설정 어딨어. Tsconfig 어딨어 등 한참 해맸다.
Cra 프로젝트는 이렇게 만든다.
npx create-react-app my-app --template typescript이러면 my-app 폴더가 생기며 프로젝트가 생긴다.
npx command not found 뜨는 친구들은 검색해서 설치하고 오시길
npm 이랑 이런거 정도는 설치 간단하니까 설치하고 오자 .
CRA 는 설정파일을 내부에 숨겨서 관리하고 있다.
현시점에 이르러 딸랑 React 만가지고 프로젝트를 개발하기는 어렵다. 그래서 위에 열거한 것과 같은 라이브러리의 도움을
받아 프로젝트를 세팅하고 개발해야 하는데, 숙련자도 시간이 걸리고, 초보자는 너무 어려워 페이스북 형아들이 다 알아서 세팅해두고
배포한 보일러플레이트 인 것이다.
CRA 는 아래같은 패키지 및 설정들을 내포하고 있다.
- Webpack
- EsLint
- Tailwind
- Babel
- 기타 등등 또 뭐있을것이다 나도 아직 다 몰라서 확인한것은 이것들이다.
TypeScript 는 내포 안하고 있더라. 그래서 위에 첨 만들때 typescript 로 지정한 것이다.
설정 꺼내기
yarn eject이러면 숨겨진 설정파일들이 튀어나온다. 다시 되돌리진 못하니까 신중히 하라는 글들 많이 봤을 것이다.
난 너무 궁금해서 해봤지만 별거 없었다. 웹팩, eslint, 뭐 이런 설정들이 튀어 나오더라.
페북 형아들이 이렇게 해둔건 " 야 범용적으로 다 설정 해놨는데 뭐여 걍써 얼마나 대단한 설정 납신다고"
인거 같다.
내 생각도 같다. 뜬금없이 엄청 레거시한 프로젝트랑 지금 우리가 만드는 프로젝트를 병합하는 상황이 아니라면 별로 그럴일은
없을거 같다.
또 설정 override 도 지원하는거 같으니 개발자로서 당연히 찜찜한 걱정이 들겠지만 시원하게 CRA 로 시작해보길 바란다.
나도 프린이라 지금 시작하고있어서 잘 모르는 부분이 많아 잘못된 정보가 있을까 걱정이다.
이글을 보는 프린이 나와 함께 프른이가 되도록 같이 해보도록 하자.