Without CRA (1)

LESA·2022년 11월 27일
2

withourCRA

목록 보기
1/3
post-thumbnail

내가 작성할 Without CRA 시리즈는 의식의 흐름대로 공부한 것을 정리할 것이다.

모든 게시물은 반말로 진행되며, 맞춤법은 신경 쓰지 않을예정이다.

왜 ?

우리는 CRA, CV와 같은 편리한 보일러 플레이트로 손쉽게 React 환경을 구축할 수 있다.
근데 왜 실무에서 프로덕션레벨의 서비스를 제공할 때 CRA 를 사용하지않을까 ?
사실 이 질문에 대해 나는 완벽한 답변을 할 수 없다.
왜냐하면 react 기반으로 실무를 경험한적이 없기때문이다.
하지만 필드에서 뛰고있는 대부분의 개발자들이 말하길, CRA로 프로젝트를 생성하지 않으며
생성한다해도 회사 내부에서 쓰이는 admin 프로젝트의 경우 CRA 를 사용한다고 들었다.
IT 기업마다 판매하는 서비스들이 다를것이고, 회사마다 커스텀된 코드들이 있다.
CRA 는 개발자 입장에서 셋팅하기 번거로운 번들러등을 포함하여 제공하기 때문에 이를 다시 커스텀하기 힘들다.
그리고 포함된 코드들중 사용하지 않을 코드도 있을 것이고 이는 프로젝트를 무겁게한다.
그렇기에 개발자가 커스텀 함으로써 효율 좋은 프로젝트를 만든다고 나는 생각하고있다.

react 공부를 이제막 시작한 사람들은 CRA 가 많이 친숙할거다.
왜냐하면 대부분의 강의 영상들은 CRA 를 통해 프로젝트를 진행한다.
그렇지 않은 강의도 있다. CDN 으로 react를 접하게 해주는 강의도 있었다.
내가 처음 react를 공부했을땐 CRA 가 필수인줄 알았다.
CDN, Bundlers, Babel 이런 부분적인 개념을 몰랐을땐 react의 시작은 CRA 다 라고 착각하고있었다.
그렇기에 이번기회에 깊지는 않지만, CRA 없이 react를 다룰 수 있게 환경을 구축 할 생각이다.

Module + Bundler = Module bundler

번들러, 모듈이란 뭘까 이것들도 제대로 모르는데 모듈 번들러란 뭘까 ?

프로그래밍 공부를하면서 매번 느끼는 거지만 내가 모듈, 번들러에 대해 안다고하면 그것은 100% 이해한게 맞나 ?

라는 의문이 든다. 이런 딜레마에 빠지게되면 진도가 멈춰버린다.

필자는 틈만나면 저 딜레마에 빠져있다. 그래서 100% 이해하는것을 포기하고 대화가 통할정도의 개념만 알아보기로 타협했다.

뜬금없이 게임 캐릭터 움짤이 들어가있다. (필자는 롤 11년차) 이유없이 쓴건 아니고 내가 도움받았던 블로그글이

위와같이 게임 캐릭터의 움직임을 통하여 빗대어 표현하는 방식이 재밌어서 나도 넣어봤다.

[참고 / 비동기 개념 학습] - https://velog.io/@shitaikoto/Javascript-asynchronous

움짤에 나오는 낫을든 챔피언의 이름은 케인이다. 케인은 상대를 공격하여 나온 영혼을 통하여 변신할 수 있다.

모듈의 개념을 간략하게 설명하자면, 보다 작고 이해할 수 있는 단위로 나뉘어진 것이다. 가볍게 분리된 여러개의 것이라고 생각해보자

그리고 번들러의 개념을 이어 설명한다.

번들러는 여러개의 파일을 하나의 파일로 묶어주는 것이다. 많이들 들어본 Webpack이 대표적인 번들러이다.

그럼 이제 모듈 번들러란 나뉘어진 것을 묶어주는 것이라 이해할 수 있다.

케인은 공격(코딩)을 하여 영혼(모듈)을 생성할 수 있으며, 끝으로 영혼(모듈)을 흡수(번들러)할 수 있다.

별 내용 아닌데 한번 이렇게 정리해보고싶었다. 글쓰는것보다 움짤찾는게 더힘든것같다.

Module bundler의 필요성

우리는 분할정복(Divide and Conquer)을 지양하며 코딩을 한다.

여러가지 이유가 있겠지만, 유지보수 등 장점이 많은 기법이다.

하지만 프로젝트의 크기가 커질수록 파일은 많이 생성될 것이다.

시간이 지나면서 새로운 기능이 나오고 이는 늘어나는 파일개수를 의미한다.

그렇기에 모듈들을 모아 묶는것으로 성능을 높이고 최적화한다.

profile
Always All ways

0개의 댓글