백엔드 개발자로서 Frontend, React 에 대해서 어느 정도 할 줄알고, 어느 정도 알아야 의사 소통에도 도움이 되며, 백엔드 개발에도 도움이 될 것 같아 React 를 배우려고 했다. 마침 사내에서 React를 알려주시기로 한 분이 계셔서, study를 진행하게 되었다. 따라서 기본적인 React 에 대해 배우고, 내용을 정리할 예정이다.
SPA (Single Page Application)
기존에 Server side 에서 Html 을 통째로 브라우저에 주던 것을 Html 과 JS, 즉 페이지를 그려내기 위한 App 을 주고, 그 App 에서는 동적 데이터만 Backend 에 요청하는 패턴이다.
React
-
React 의 전략 -> 가상 DOM 사용
-
React 의 역할 -> DOM 을 그려주고, 지워주고, 다시 연결한다.
-
React 에서는 State 가 가장 중요하다 -> state 의 로직을 정하는 것이 프론트개발자의 역할
-
React에서는 state 가 변할 때만 ReRendering 한다.
-
Component -> 앱을 이루는 최소 단위
-
Route -> url path 에 따라 다른 컴포넌트를 rendering 해주는 요소
Webpack
- 여러 Tsx 를 합쳐주는 bundler
- webpack.config.js 에서 어떤 확장자들을 합치고, 나눌건지 설정한다.
Babel
- Javascript 버전을 맞춰주고, tsx 를 html, js 로 바꿔주는 자바스크립트 컴파일러
- babel.config.js 에서 설정한다.
Node
- Js 코드를 서버위에서 돌아가게 해주는, 자바스크립트 런타임
