백엔드

패스트캠퍼스 챌린지 22일차 - 바벨과 JSX

꾸준이 2021. 9. 27. 23:46

0. 공부 인증 
공부 시작 22 : 53

공부 종료 23 : 30

오늘부터는 하루에 한강만 수강할 예정이다.

패스트 캠퍼스 챌린지도 중요하지만..... 학과 과제도 쌓여있기 때문에, 적절하게 시간 분배를 해야할 것 같다.

시험기간에도 패캠 챌린지를 할 수는 없으니...

 

 

1. 바벨과 JSX

앞선 강의에서 처럼 CDN을 통해서 리액트를 제작하는 것은 끔찍함.

그래서, 이런 불편한 것들을 해결하고자 새롭게 나온 것이 JSX 임!

 

JSX에 대해서 설명된 리액트 문서

https://ko.reactjs.org/docs/introducing-jsx.html#gatsby-focus-wrapper

 

JSX 소개 – React

A JavaScript library for building user interfaces

ko.reactjs.org

사실상 자바스크립트 확장 문법.

html DOM 요소를 변수에 담아서 활용할 수 있음.

 

그런데  JSX는 모든 브라우저에서 지원하지 않을 수 있음.

그래서 이것을 위한 것이 또 있음.

 

그것이 바벨인데, 어렵다고 들었음. (어렵나?)

https://ko.reactjs.org/docs/faq-build.html#gatsby-focus-wrapper

 

Babel, JSX, 그리고 빌드 과정들 – React

A JavaScript library for building user interfaces

ko.reactjs.org

 

현재 최신 문법을 과거의 문법으로 고쳐주는 것임.
그래서 존재하는 대부분의 브라우저에서 작동을 가능케 해줌.

 

여튼 JSX를 통해서, 코드를 훨씬 간결하게 수정할 수 있고, 이벤트도 기본 HTML 처럼 수정할 수 있음.

<div onClick={() => {onEvent()}}>

</div>

 와 같이 활용할 수 있음.

 

그리고 이 강의 다음으로 웹팩을 사용하는데,
이 강의와 연결해서 들으면 좋음.

 

이 두가지(바벨, 웹팩)을 활용하면 대부분의 브라우져에서 돌아가는 로딩이 비교적 빠른 웹페이지를 만들 수 있다고 함!!

 

오늘은 여기까지!

 

환급 챌린지 (22/30)

 

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/37BpXiC

 

패스트캠퍼스 [직장인 실무교육]

프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.

fastcampus.co.kr

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는Node.js웹프로그래밍초격차패키지