러닝패스

Create React App(CRA) 없이 리액트 프로젝트 설정해보기

무료
시리즈
⚡ 2시간이면 이런걸 할 수 있어요!
React element, JSX, babel, webpack의 상관관계를 살펴보며 CRA가 하는 역할을 알 수 있게 돼요.
학습 시간을 줄였어요!
2시간
핵심 콘텐츠만 선별했어요!
11개 콘텐츠
이 분들은 꼭 보세요.
React 입문자, 초보자
미리 알고 있어야 해요.
리액트
이 러닝패스가 어떠신가요?
(내 보관함에서 다시 볼 수 있어요)
페이스북에서는 Create React App(CRA)으로 리액트 프로젝트 셋팅을 편하게 할 수 있도록 돕고 있습니다. 하지만 해당 러닝패스에서 만큼은 CRA가 아닌 웹팩으로 직접 리액트 프로젝트 설정을 해보는 것은 어떨까요? 그동안 우리에게 CRA가 무엇을 해주었는지, 리액트가 왜 SPA(Single Page Application)인지, static page인지, JSX가 의미하는 것인지 등을 알게 되실 거에요.
NOTE
우리는 그 동안 남들이 쓰니까, 회사에서 쓰니까, 쓰다보니까 등등 많은 이유로 리액트를 사용해왔습니다. 요즘 말로 '무지성'으로 리액트를 사용 중이었다고 볼 수 있겠네요. 분명 리액트의 장점을 어렴풋이 들었던거 같은데 말이죠. 이번 기회에 다시 한 번 리액트를 왜 사용하는지 상기하고 가볼까요?
Video
React 기본 강좌 1-1. 리액트를 왜 쓰는가
출처: https://youtu.be/V3QsSrldHqI
서원석 님의 학습노트
NOTE
컴포넌트 재사용, SPA 특징 덕분에 사용 경험 향상, 데이터와 UI를 일치 시켜주는 등 리액트로 하여금 우리는 많은 도움을 받습니다. 이제 리액트를 더욱 자세히 알아볼까요? 그토록 자주 만들었던 컴포넌트를 createElement로 만들어보면서 말이죠.
Video
React 기본 강좌 1-2. 첫 리액트 컴포넌트
출처: https://youtu.be/e-ZeEi6ABFY
서원석 님의 학습노트
NOTE
createElement는 React element를 반환합니다. React element란 무엇일까요? React에서 element는 최소한의 단위이죠. 또 React Element는 화면에서 우리가 원하는 정보를 표시해줍니다.(in React app) 그런데 createElement로 리액트 컴포넌트를 만드는 위의 영상을 보니 JSX가 그립진 않으셨나요? 이제 JSX로 리액트 컴포넌트를 만들어보죠!
Video
React 기본 강좌 1-4. JSX와 바벨(babel)
출처: https://youtu.be/yw8JtQ6Iek8
서원석 님의 학습노트
NOTE
JSX는 자바스크립트가 이해하지 못합니다. 그래서 babel로 컴파일을 해서 createElement로 변환해서 사용하는 것이죠. 그런데 말이죠, 그동안 JSX는 html tag처럼 느껴졌었는데 이제 javascript object처럼 느껴지지 않나요? 저는 이 정보를 깨달은 이후로 return 문 아래에서 뿐만 아니라 return문 위에서도 JSX를 다뤄야겠다는 생각이 들더라구요! 얘기 나온 김에 JSX에 대해서 더욱 자세히 알아볼까요? 리액트 공식문서에서 설명하는 JSX의 특징 목록입니다. 1. JSX는 string도 HTML도 아니며 JS에 가깝습니다. 2. JSX는 UI를 구축하는데 직관적입니다.(강제되진 않습니다, createElement를 써도 무방합니다.) - 가독성과 에러 핸들링을 위해 JSX 형태로 많이 쓰긴 합니다. 3. 그래서 expression을 감싸고 표현합니다. 4. 또한 JSX 자체가 expression입니다.(if문, for문에서 활용가능) 5. JSX는 자식을 가질 수 있습니다. 6. JSX는 attribute를 가질 수 있습니다. 이제 간단하게 JSX로 리액트 element를 만들 수가 있겠네요. 하지만 또 다른 문제가 기다리고 있죠. 바로 리액트 앱이 커질 수록 js 파일이 많아질 것이고 이를 하나의 js 파일에서 관리하기 어렵다는 문제이죠. CRA에서는 이 문제를 고민하지도 않았죠? 왜냐하면 여러 개의 js파일을 알아서 하나의 js파일로 빌드해줬기 때문이에요. 이 시간을 통해 직접 위의 과정을 손보는 작업을 지켜볼까요? 빌드 후 하나의 js파일로 출력되고 이 js파일이 index.html에서 로딩되어 화면을 구성시키는 이 로직을 CRA만 쓰다보면 망각할 수 있게 되므로 번들링 전 과정을 지켜보며 우리가 사용하는 리액트가 어떻게 실행가능한 파일로 변환되는지 지켜보는 것은 분명 의미있는 일입니다. 웹팩 강의 첫 번째, 설치 영상입니다.
Video
React 기본 강좌 2-3. 웹팩 설치하기
출처: https://youtu.be/66_D4RYpFqY
서원석 님의 학습노트
NOTE
웹팩 강의 네 번째, 위의 세 과정을 빠르게 다시 돌려보는 영상입니다.
Video
React 기본 강좌 2-6. 구구단 웹팩으로 빌드하기
출처: https://youtu.be/rmcoEHv4OY0
서원석 님의 학습노트
NOTE
웹팩 강의 다섯 번째, @babel/preset-env에서 타겟 브라우저를 맞춘 빌드 방법과 plugins에 대한 설명 영상입니다.
Video
React 기본 강좌 2-7. @babel/preset-env와 plugins
출처: https://youtu.be/LoMFC4kdrnQ
서원석 님의 학습노트
NOTE
웹팩 강의 마지막, 리액트 프로젝트가 변경되면 알아서 다시 빌드하도록 하는 방법에 대한 영상입니다.
Video
리액트 무료 강좌 2-9. 웹팩 데브 서버와 핫 리로딩(2021년 버전 )
출처: https://youtu.be/RCb0UF7Lu90
서원석 님의 학습노트
저는 리액트를 배우고 사용하다보니 어느새 다음 기술 스택을 배워야할거 같은 강박이 느껴졌었어요. 타입스크립트, Next.js, 테스팅 툴, 백엔드 코드, 함수형 프로그래밍 등등 말이죠. 그런데 정작 중요한 리액트 기초에 대해 많이 부족했다고 느꼈던 계기가 우연하게 읽게된 리액트 공식문서 앞 부분, 즉 해당 러닝패스에서 다뤘던 내용이었어요. 잘 알고 있다고 생각했던 리액트였는데 실상은 사용법만 익히느라 알맹이는 하나도 모르고 있던 것이었죠. 해당 러닝패스는 그렇게 느끼고 알아보며 공부한 내용을 정리해서 전달 드린 결과물이었답니다. 부디 도움이 되셨길 바라며 퀴즈 하나를 제시해드리며 그만 인사드리도록 할게요!
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기