React
-
React RouterReact 2023. 2. 23. 23:26
React SPA는 url마다 새로운 페이지를 불러오는 것이 아니고, url마다 해당하는 페이지를 렌더링 합니다. React 자체적으로 내장된 기능이 없으므로 라우팅 라이브러리가 필요합니다. 설치 먼저 react-router-dom을 설치해 줍니다. $ npm install react-router-dom 예제화면 다음과 같이 상단에 메뉴바가 있고 각각의 페이지가 아래 나오는 화면을 만들어 보겠습니다. 주요 컴포넌트 react-router-dom에서 BrowserRouter, Routes, Route를 불러옵니다. import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; react-router-dom에는 와 가 있습니다. 는 HT..
-
CRA(create-react-app)React 2023. 2. 21. 22:20
create-react-app이란? React를 작성할 때 Webpack, Babel 등 여러 도구를 필요로 합니다. 이런 복잡한 설정 없이 빠르게 React 개발 환경을 구성하고 이용할 수 있게 하는 것이 create-react-app입니다. create-react-app을 사용하기 위해 node.js가 필요합니다. node.js node.js는 Chrome V8JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. JavaScript는 브라우저(크롬, 사파리, 파이어폭스 등)에서 동작하는 언어입니다. JavaScript를 브라우저에서 독립시켜 실행할 수 있도록 한 것이 node.js입니다. node.js를 이용해 서버도 만들 수 있게 된 것입니다. node.js를 설치할 때 nvm을 설..
-
ReactReact 2023. 2. 20. 19:17
React 란? UI를 만들기 위한 자바스크립트 라이브러리로 SPA(Single Page Application)와 모바일 개발에도 사용됩니다. SPA란? 전통적인 웹페이지는 페이지 이동시 매번 페이지 전체를 렌더링을 해 화면이 깜박임이 발생해 좋지 못한 사용자 경험을 발생했습니다. 그리고 사용자와 서비스의 상호작용이 증가하면서 중복되는 요소를 불러오는 것은 서버의 불필요한 트래픽을 증가시켰습니다. 점점 발전해가면서 페이지 전체가 아닌 필요한 데이터만 서버로부터 전달받아 Javascript로 동적으로 화면에 보여주는 방식으로 변했습니다. SPA는 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말합니다. React ..