Create-React-App 에 대한 고찰

[KimKwon]

Create-React-App

CRA는 리액트 팀에서 리액트의 진입 장벽을 낮추기 위해 만든 툴이다.
사용법도 매우 간단하다.
shell에 create-react-app <프로젝트명> 과 같이 입력하면 리액트로 웹 애플리케이션을 만들기 위한 환경을 구축해준다.

왜 쓸까?

환경을 구축해준다는 말이 사실 엄청난 의미를 내포하고 있다.
자바스크립트.. 만만히 봤다가는 큰 코 다칠만큼 방대한 라이브러리와 프레임워크를 가지고 있다.
뿐만아니라 수많은 패키지가 쏟아져 나오고 있고, 당장 몇년전까지만해도 짱짱맨이었던 jquery나 ajax와 같은 것들도 지금은 여러 기술로 이미 대체되고 있다. 내가 좋다고 생각해서 사용했던 것들이 새로운 방법으로 대체되는 것이다.

그만큼 하나의 문제를 해결하기위해 다양한 해결책과 방법이 존재한다는 것인데, CRA에서는 우리의 이러한 선택지에서 최적의 선택을 해준다는 것.
당장 CRA에서 지원하는 기능만 봐도 상당히 효율적임을 알 수 있다.

webpack, babel 등 현재 react app을 만드는데 필수불가결한 존재인데 react 입문자(나)가 봤을 때는 한없이 어려운 존재이다...
이를 CRA에서는 기본적으로 지원한다. 감사합니다 진짜.
ES6 이상 버전에서 등장하는 혁신적인 문법, 메소드들도 구형 브라우저에서 사용할 수 있도록 해주며, 테스트 시스템까지 제공한다.

CRA를 사용하면 좀 더 우리의 시간을 중요한 곳에 할애할 수 있다는 것이다.

물론 CRA를 사용하지 않고 직접 개발환경 구축이 필요할 때도 있다.
일반 사용자를 대상으로 하는 웹사이트라 검색 엔진 최적화를 해야 한다면 CRA보다는 서버사이즈 렌더링에 특화된 next.js를 쓰는게 좋다고한다.

Webpack

react를 기초부터 찬찬히 다진 것이 아니라, 이러한 사실을 모르고 웹팩을 열심히 공부하면서 우리 프로젝트에 어떻게 어디서부터 적용시킬까 고민을 하고 있었다.

사실 이미 적용되어 있었던 것........
물론 웹팩의 이해도가 없는 채로 개발하다보면 분명 언젠간 벽을 마주치게 될 것이라고 생각한다.
앞으로도 계속 탐구해볼 것이다.

Webpack의 configuration은 root 디렉토리의 webpack.config.js 파일에서 이루어진다.
이 파일을 우리 프로젝트 폴더에서 못 찾아서 헤맸었다.
못 찾는게 당연한 것이, CRA가 설정 파일들을 숨겨놓는다. 그럼 여기서 생기는 궁금증

• 어랍숑 그러면 웹팩이나 바벨의 설정을 제가 참조/변경할 수는 없는건가요? 커스터마이징이 안된다는건데? 이거 이거 이거 좀 그런거 아닌가?

결론부터 말하자면 가능은 하다.

yarn eject
npm run eject

쉘에서 입력하게되면 감춰져있던 설정 파일들이 모두 드러난다.
package.json에서 보이지 않았던 패키지들도 모두 보인다.

이 방법을 추천하지 않곤 하는데, 그 이유는

• CRA에서 개선하거나 추가된 기능이 단순히 패키지 버전을 올리는 식으로 적용되지 않는다는 점
• 이전 상태로 돌아갈 수 없는 eject의 특징
• CRA에서 해주었던 개발환경의 구축/유지보수가 모두 개발자의 몫이 되는 점 ( 웹팩과 바벨에 굉장히 능통해야만 할 것으로 예상 )

결과적으로 내가 CRA 설정을 커스터마이징하고싶다면 커스터마이징을 함으로써 오는 이득이 기존에 제공하는 CRA의 이점보다 더 큰지 비교해볼 필요가 있다.

이 외에도 CRA의 설정을 변경하는 방법이 존재한다. 언급만하고 이 글에서 직접 다루지는 않겠다.

1. react-scripts 프로젝트를 포크해서 나만의 스크립트를 만드는 것. (package.json)
2. react-app-rewired 패키지를 사용하는 것.

ES6

CRA에서는 ES6의 모든 기능을 지원한다.
ES6이후에 추가된 것 중 CRA에서 지원하는 것은 다음과 같다.

1. 지수 연산
2. async , await
3. 나머지 연산, 전개 연산 (...rest)
4. 동적 Import
5. 클래스 필드
6. JSX
7. 타입스크립트, 플로타입 시스템

다음 이슈는 리덕스 관련이 될 것 같다.

참조 : 실전 리액트 프로그래밍 (진짜 좋음), https://github.com/facebook/create-react-app/issues (CRA)
@Seogeurim 피드백해주시면 좋겠고 더 열심히 못해서 미안 흑

[Seogeurim]

아 ㅋㅋㅋ 글 너무 잘 써서 너무 재밌게 술술 읽었네횽

그러니까 create-react-app으로 생성한 프로젝트는 웹팩, 바벨이 미리 설정되어있기에 우리가 따로 설정을 할 필요가 없다는 거고, ES6 이후의 문법 중 CRA에서 지원하는 것도 잘 알아둬서 적절히 써야하는군용

글에 나와있듯 이미 적용되어있지만 공부는 꼭 필요한 존재 같으니 나도 블로그 웹팩 2편 쓰면서 더 공부해보겠어융 ><
(#13) 이슈 해결 ?!

[KimKwon]

우리 문과출신이잖아
글 하나는 야무지다니까
(#13)은 close 했습니다!

[Seogeurim]

와 우리 그러고 보니 문과 출신 둘이서 개발을 뿌술라고 난리났네 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

[KimKwon]

지금은 이과로 완전히 둔갑해버렸지

[yoonjong-park]

처음부터 CRA를 아예 안배우는 게 나은 것 같아요ㅋㅋ 걍 next.js 부터 배우는 게 나은 것 같은 느낌...