뒤로 가기
홈으로 이동
러닝패스
공유하기
Create React App(CRA) 없이 리액트 프로젝트 설정해보기의 대표 이미지

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

무료
시리즈

⚡ 11개의 콘텐츠로 2시간이면 이런걸 할 수 있어요!

React element, JSX, babel, webpack의 상관관계를 살펴보며 CRA가 하는 역할을 알 수 있게 돼요.
이 분들은 꼭 보세요.
React 입문자, 초보자
미리 알고 있어야 해요.
리액트

페이스북에서는 Create React App(CRA)으로 리액트 프로젝트 셋팅을 편하게 할 수 있도록 돕고 있습니다.

하지만 해당 러닝패스에서 만큼은 CRA가 아닌 웹팩으로 직접 리액트 프로젝트 설정을 해보는 것은 어떨까요?

그동안 우리에게 CRA가 무엇을 해주었는지, 리액트가 왜 SPA(Single Page Application)인지, static page인지, JSX가 의미하는 것인지 등을 알게 되실 거에요.

큐레이터의 노트 소개
우리는 그 동안 남들이 쓰니까, 회사에서 쓰니까, 쓰다보니까 등등 많은 이유로 리액트를 사용해왔습니다. 요즘 말로 '무지성'으로 리액트를 사용 중이었다고 볼 수 있겠네요. 분명 리액트의 장점을 어렴풋이 들었던거 같은데 말이죠. 이번 기회에 다시 한 번 리액트를 왜 사용하는지 상기하고 가볼까요?
서원석의 프로필 이미지
서원석 님의 학습노트

학습노트 제목: 리액트를 사용하는 이유

Video

React 기본 강좌 1-1. 리액트를 왜 쓰는가

출처: https://youtu.be/V3QsSrldHqI
#전체 #개발자 #프론트엔드 #node.js #node #server #노드 #자바스크립트 #js #javascript #zerocho #lecture #강좌 #제로초 #프로그래밍 #programming #express #익스프레스
큐레이터의 노트 소개
컴포넌트 재사용, SPA 특징 덕분에 사용 경험 향상, 데이터와 UI를 일치 시켜주는 등 리액트로 하여금 우리는 많은 도움을 받습니다. 이제 리액트를 더욱 자세히 알아볼까요? 그토록 자주 만들었던 컴포넌트를 createElement로 만들어보면서 말이죠.
서원석의 프로필 이미지
서원석 님의 학습노트

학습노트 제목: JSX 없이 리액트 컴포넌트 만들기

Video

React 기본 강좌 1-2. 첫 리액트 컴포넌트

출처: https://youtu.be/e-ZeEi6ABFY
#전체 #개발자 #프론트엔드 #node.js #node #server #노드 #자바스크립트 #js #javascript #zerocho #lecture #강좌 #제로초 #프로그래밍 #programming #express #익스프레스
큐레이터의 노트 소개
createElement는 React element를 반환합니다. React element란 무엇일까요? React에서 element는 최소한의 단위이죠. 또 React Element는 화면에서 우리가 원하는 정보를 표시해줍니다.(in React app) 그런데 createElement로 리액트 컴포넌트를 만드는 위의 영상을 보니 JSX가 그립진 않으셨나요? 이제 JSX로 리액트 컴포넌트를 만들어보죠!
서원석의 프로필 이미지
서원석 님의 학습노트

학습노트 제목: JSX로 리액트 컴포넌트 만들기 feat. 바벨(babel)

Video

React 기본 강좌 1-4. JSX와 바벨(babel)

출처: https://youtu.be/yw8JtQ6Iek8
#전체 #개발자 #프론트엔드 #node.js #node #server #노드 #자바스크립트 #js #javascript #zerocho #lecture #강좌 #제로초 #프로그래밍 #programming #express #익스프레스
큐레이터의 노트 소개
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
#전체 #개발자 #프론트엔드 #node.js #노드 #자바스크립트 #js #javascript #zerocho #lecture #강좌 #제로초 #프로그래밍 #programming #web #react #리액트 #웹게임
저는 리액트를 배우고 사용하다보니 어느새 다음 기술 스택을 배워야할거 같은 강박이 느껴졌었어요. 타입스크립트, Next.js, 테스팅 툴, 백엔드 코드, 함수형 프로그래밍 등등 말이죠. 그런데 정작 중요한 리액트 기초에 대해 많이 부족했다고 느꼈던 계기가 우연하게 읽게된 리액트 공식문서 앞 부분, 즉 해당 러닝패스에서 다뤘던 내용이었어요. 잘 알고 있다고 생각했던 리액트였는데 실상은 사용법만 익히느라 알맹이는 하나도 모르고 있던 것이었죠. 해당 러닝패스는 그렇게 느끼고 알아보며 공부한 내용을 정리해서 전달 드린 결과물이었답니다. 부디 도움이 되셨길 바라며 퀴즈 하나를 제시해드리며 그만 인사드리도록 할게요!
이 러닝패스가 어땠나요?
(내 보관함에서 다시 볼 수 있어요)
👋 다양한 인사이트를 읽어보고 계신가요?
나만의 학습 기록을 남기고, 관리하고 싶다면!
다양한 전문가의 멤버십 전용 콘텐츠를 보고 싶다면!
나의 학습 내용을 공유하고, 수익을 올리고 싶다면!
3초 회원가입/로그인으로, 런핏의 커뮤니티에 여러분도 함께하세요.
3초 만에 가입하기