본문 바로가기

프론트엔드/React27

리액트 React | React: Props 및 State ⭕ 리액트 React | React: Props 및 State 프런트엔드 개발을 위한 JavaScript 라이브러리 ➡️ Virtual DOM 자바스크립트 객체 복제본: DOM 노드 트리의 경량화된 복사본, 실제 DOM보다 빠른 연산 가능 diffing 알고리즘: 이전과 현재의 Virtual DOM을 비교하여 실제 DOM에 반영해야 할 변경사항을 파악 배치 업데이트 기능: 변경사항을 모아두었다가 한 번에 실제 DOM에 적용하여 성능 최적화 ➡️ render() 컴포넌트의 렌더링: 컴포넌트가 호출될 때 실행되며, Virtual DOM을 생성하고 업데이트 결정 순수 함수: props나 state의 변경에 따라 결과가 결정됨 렌더링 단계: 'render phase'에서 Virtual DOM 생성 및 비교, '.. 2024. 3. 9.

리액트 React | DOM(Document Object Model) ⭕ 리액트 React | DOM(Document Object Model) HTML 문서의 계층적 구조와 정보를 표현하고 제어할 수 있는 API, 프로퍼티, 메서드를 제공하는 트리 자료구조 구성 요소: 노드(Node), 객체(Object) ➡️ 프레임워크 및 라이브러리 발전 동기: 애플리케이션 규모 확장에 따라 API 통신 데이터 업데이트, 이벤트 및 상태(state) 조작 필요성 증가 기존 방식의 한계: document.getElementById() 같은 DOM API로 HTML을 직접 조작하는 방식은 불편하고 비효율적 예시: Angular, React, Vue, Svelte 역할: 브라우저 DOM 조작을 프레임워크 및 라이브러리에 위임 ➡️ DOM 등장 배경 서버에서 HTML 동적 생성을 가능하게 하는.. 2024. 3. 9.

리액트 React | 웹의 역사: AJAX (Asynchronous JavaScript and XML), Node.js, jQuery ⭕ 리액트 React | 웹의 역사: AJAX (Asynchronous JavaScript and XML), Node.js, jQuery ➡️ AJAX (Asynchronous JavaScript and XML) 문제점: 전통적인 웹 페이지 방식은 페이지 전환 시 전체 HTML 페이지를 서버로부터 받아오기 때문에 화면 깜빡임이 발생함 기능: JavaScript를 통해 서버와 비동기 방식으로 데이터 교환 및 조작 가능 구현: XHR (XMLHttpRequest) 객체 사용하여 데이터 요청 및 수신 장점: 페이지 전체 새로고침 없이 페이지 일부만 업데이트 가능 ➡️ Node.js 확장성: JavaScript를 서버 사이드에서 사용 가능, JavaScript의 범용성 증가 기술 도입: CommonJS 모듈 시.. 2024. 3. 9.

리액트 React | Redux-Toolkit ⭕ 리액트 React | Redux-Toolkit Redux를 사용하여 애플리케이션의 상태를 관리할 때 발생할 수 있는 복잡성과 반복적인 코드를 줄이기 위해 고안된 공식 도구 ➡️ useDispatch() dispatch: Redux store에 action을 보내는 함수 useDispatch(): React 컴포넌트 내부에서 dispatch 함수를 쉽게 사용할 수 있게 해주는 React hook ➡️ useSelector() Redux store의 state에서 필요한 부분만을 선택(select)하여 가져올 수 있게 해주는 함수 컴포넌트가 useSelector를 사용하여 store의 state 일부를 선택하면, 해당 state 부분이 변경될 때마다 컴포넌트가 리렌더링됨 ➡️ crateSlice() sl.. 2024. 3. 8.

리액트 React | Redux ⭕ 리액트 React | Redux JavaScript 앱을 위한 예측 가능한 상태 컨테이너 애플리케이션의 상태 관리를 효율적이고 일관된 방식으로 수행할 수 있음 상태 관리의 복잡성을 줄이고, 애플리케이션의 동작을 더 예측 가능하도록 함 ➡️ Redux 3가지 원칙 단일 진실의 원천(Single Source of Truth): 애플리케이션의 전체 상태는 하나의 객체 트리 스토어(store)로 저장됨, 애플리케이션 내 어디서든 같은 상태에 접근할 수 있음 상태는 읽기 전용(States Are Read-Only): 상태를 변경할 수 있는 유일한 방법은 액션(action)을 발생하는 것 변화는 순수 함수에 의해 이루어진다(Changes Are Made with Pure Functions): 상태 변화는 리듀서.. 2024. 3. 8.

리액트 React | 상태관리: MVC/Flux ⭕ 리액트 React | 상태관리: MVC/Flux 상태 관리: 애플리케이션 내에서 데이터(상태)의 생성, 업데이트, 조회 및 삭제 등의 생명주기를 관리하는 전략 상태 변화가 발생할 때 해당 변화가 데이터를 필요로 하는 모든 컴포넌트에 자동으로 반영되도록 보장해야 함 props drilling: 상태를 컴포넌트 계층구조를 통해 전달하는 방법으로, 상위 컴포넌트에서 하위 컴포넌트로 데이터를 직접 전달함 ➡️ MVC 아키텍처: 모델(Model), 컨트롤러(Controller), 뷰(View) 모델(Model): 데이터를 처리함 컨트롤러(Controller): 인터페이스 뷰(View): 데이터를 사용자에게 보여주는 UI 다방향 데이터 흐름 ➡️ Flux 아키텍처 액션(Action): 상태 변화를 일으키는 정보.. 2024. 3. 8.

리액트 React | React에서 Ajax(비동기 통신) 사용하기: Axios 방식 ⭕ 리액트 React | React에서 Ajax(비동기 통신) 사용하기 Ajax는 서버에 새로고침 없이 요청을 할 수 있게 도와주는 일종의 JavaScript 코드입니다. React에서는 Ajax(Asynchronous JavaScript and XML)를 사용하여 서버와의 비동기 통신을 처리할 수 있습니다. 이를 통해 웹 애플리케이션에서 데이터를 동적으로 로드하거나 업데이트할 수 있습니다. 라이브러리로는 Axios, jQuery AJAX, 그리고 브라우저에 내장된 window.fetch 등이 있습니다. 주로 Axios와 window.fetch를 많이 사용합니다. ⭕ Axios 방식 ➡️ Axios 라이브러리 설치 가장 일반적으로 사용되는 Ajax 라이브러리 중 하나인 Axios를 사용하여 Ajax 요청.. 2024. 3. 8.

리액트 React | 리스트 ✅ 리스트 💡 JavaScript 리스트 JavaScript에서 배열을 다루는 기능 중 map() 함수를 활용하여 리스트를 변환할 수 있습니다. map() 함수는 각 배열 요소에 대해 주어진 함수를 실행하고, 그 결과를 새로운 배열로 반환합니다. map() 함수는 배열의 각 요소를 인자로 받아 해당 요소를 가공한 후 새로운 배열을 반환합니다. 예를 들어, 주어진 배열의 각 요소를 두 배로 만들고 싶다면 다음과 같이 작성할 수 있습니다. numbers 배열의 각 요소를 두 배로 만들어 새로운 배열을 생성하고, 그 결과를 doubled 변수에 할당하여 출력하였습니다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number.. 2023. 7. 7.

리액트 React | 조건부 렌더링(Conditional Rendering) ✅ 조건부 렌더링(Conditional Rendering) React에서는 상태(State)에 따라 컴포넌트를 조건부로 렌더링 할 수 있습니다. 이를 통해 애플리케이션의 상황에 맞게 필요한 컴포넌트만 보여주거나 숨길 수 있습니다. 조건부 렌더링은 JavaScript의 조건 처리와 유사하게 동작합니다. 조건부 연산자나 if 문을 사용하여 현재 상태에 따라 UI를 업데이트할 수 있습니다. 💡 사용자 로그인 상태에 따른 조건부 렌더링 사용자의 로그인 상태에 따라 다른 인사말을 보여주는 컴포넌트입니다. 다음은 로그인된 사용자에게는 "Welcome back!"을, 로그인되지 않은 사용자에게는 "Please sign up."을 보여주는 두 개의 컴포넌트입니다. function UserGreeting(props) {.. 2023. 7. 6.

리액트 React | 상태(State) ✅ 상태(State) React에서 상태(State)는 컴포넌트 내에서 관리되는 비공개적인 데이터로, 컴포넌트 내부에서 값을 변경하고 화면에 반영하는 데 사용됩니다. State는 컴포넌트의 동적인 데이터를 저장하고 업데이트하는 데 주로 활용됩니다. State는 일반 JavaScript 객체이므로 여러 가지 데이터 유형을 저장할 수 있습니다. 💡 상태(State)와 속성(Props) 차이점 React에서는 상태(State)와 속성(Props)이라는 두 가지 주요 개념을 사용하여 컴포넌트의 데이터를 관리합니다. Props는 읽기 전용 데이터로, 컴포넌트 외부에서 설정되고 컴포넌트 내부에서는 변경할 수 없습니다. Props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 데 사용됩니다. 반면에 State.. 2023. 7. 4.

리액트 React | 컴포넌트 설계 패턴 ✅ 컴포넌트 설계 패턴 컴포넌트를 역할과 관심사에 따라 분리 시키기 위해서는 코드 내부의 로직을 쪼개고 다른 코드로 위임을 해야된다. 제어를 위임하는 것의 문제는 쪼개고 위임 할수록 사용 코드에 대한 이해 난이도가 높아 가고, 가독성이 떨어진다 또, 커스텀 설정이 요구되는 경우가 많다. 이 역시 절대적인 것은 없고 개발자의 재량에 따라 최적을 찾아야 한다. 유지보수와 확장이 불가능한 스파게티 코드로 끝나버리지 않으려면, 리액트 개발자로서 더 경험이 많아질수록 다양한 컴포넌트 패턴에 대해 학습하는 것이 필요하다. 이것이 끝은 아닌 것이, 여러 가지 패턴을 알아가는 것 자체가 좋은 기초가 된다. 이것의 가장 중요한 면은 어떤 문제에 대해 어떤 패턴을 적용할지 그때를 알게 된다는 점이다. 5 Advanced .. 2023. 7. 4.

리액트 React | 프로젝트 구조 설계 패턴 ✅ 리액트 설계를 하는 원칙 우리는 확장성있고 재사용성 있는 코드를 만들어야 한다 관심사에 따라서 코드를 분리하고 단일 책임을 가지는 컴포넌트를 만들어야 한다 외부에 제어를 위임시키는 것을 고려 해야한다 깨끗하고 성능 좋은, 유지 보수가 쉬운 리액트 컴포넌트 만드는 법 배워보기 모든 프로그래머의, 적어도 나에게는 꿈같은 일이다. 나한테는 훌륭한 프로그래머와 좋은 프로그래머를 가르는 자질이기도 하다. 언제나 배워야 하고, 개선해야 할 점이 있기 때문에, 절대로 완벽해질 수 없다는 사실이 재미있는 지점이다. 아래 모범 사례를 따라가다 보면 팀원뿐만 아니라 자기 자신도 도움받을 수 있을 것이다. 스타일 가이드를 통해 어떻게 코드를 짜는지에 대한 중요한 내용을 정의해 둔 개발팀을 본 적이 있다. 어떻게 생각하느.. 2023. 7. 4.

리액트 React | Hook - useState, uesEffect, useRef, useCallback, useMemo ✅ Hook 리액트에서는 리렌더링 되는 조건들이 있는데 1. 부모 컴포넌트가 렌더링 되면 그에 해당하는 자식 컴포넌트들은 모두 리렌더링 된다. 2. state (상태) 가 변경되면 리렌더링 된다. 3. props 가 변경되면 리렌더링 된다. 💡 useState 💡 useState useState()가 호출되면 배열을 반환한다, [상태 값, 상태를 업데이트하는 함수] 렌더링과 관련된 상태를 관리하는 훅 state 가 갱신되면 리렌더링 된다 useState의 인자로 state의 초기값을 받을 수 있다. 💡 useEffect useEffect(function, deps) 부가 효과(side effect/부작용이지만 부가 작용 부가 효과가 더 맞는 거 같다.)를 수행하기 위한 훅 컴포넌트가 렌더링 될 때마다 특.. 2023. 7. 4.

리액트 React | React 엘리먼트(Element) ✅ React 엘리먼트(Element) 💡 React 엘리먼트(Element) 리액트 애플리케이션에서 엘리먼트(Element)는 가장 기본적인 구성 요소입니다. 엘리먼트는 JSX 문법을 사용하여 일반 JavaScript 객체로 생성할 수 있습니다. JSX 문법은 XML과 유사한 문법을 사용하여 리액트 컴포넌트를 작성하는 방식입니다. 엘리먼트는 사용자 인터페이스의 다양한 부분을 나타내기 위해 사용됩니다. const element = Hello, world; 이렇게 생성된 엘리먼트는 화면에 표시되기 위해 렌더링 되어야 합니다. 💡 가상 DOM(virtual DOM) 리액트에서는 가상 DOM(virtual DOM)을 사용하여 실제 DOM을 대신하여 UI를 관리합니다. 가상 DOM은 메모리 상에 존재하는 자바스.. 2023. 7. 3.

리액트 React | React란? ✅ 리액트 React 리액트(React)는 페이스북에서 개발된 자바스크립트 라이브러리로, 2013년에 처음 공개되었습니다. 동적인 웹사이트를 만들기 위해 자바스크립트를 효율적으로 활용할 수 있는 문법 모음집입니다. 리액트는 개발자가 재사용 가능한 컴포넌트를 만들고 최적화하는 기능을 제공하여 개발자들이 더욱 쉽게 웹 애플리케이션을 개발할 수 있도록 도와줍니다. 💡 라이브러리 Library 리액트(React)는 UI 컴포넌트를 만들고 관리하기 위한 강력한 라이브러리입니다. 이러한 리액트는 종종 프레임워크와 혼동될 수 있지만, 사실은 라이브러리로 분류됩니다. 기능의 범위: 프레임워크는 애플리케이션의 전체 구조와 흐름을 관리하는 많은 기능과 도구를 포함한다. 하지만 리액트(React)는 UI 컴포넌트를 만들고 .. 2023. 7. 3.

리액트 React | Link 컴포넌트 ✅ Link 컴포넌트 Link 컴포넌트는 React의 하이퍼링크 생성 컴포넌트로, 다른 페이지로 이동하기 위해 사용한다. react-router-dom 라이브러리에서 제공하며, 페이지 간 라우팅을 간편하게 처리할 수 있도록 한다. Link 컴포넌트를 사용하면 페이지를 전체적으로 새로고침하지 않고 필요한 부분만 업데이트하기 때문에 데이터 로딩이 줄어든다. 개발자 도구에서는 Link 컴포넌트가 태그로 표시된다. 💡 태그와 Link 컴포넌트의 차이점 태그 태그는 일반적인 HTML 태그로, 페이지 이동 시 전체 페이지를 다시 렌더링하고 브라우저의 주소를 변경한 후 페이지를 새로고침한다. 이러한 동작 방식으로 인해 상태 값이 유지되지 않으며 성능이 저하된다. // 태그 사용 function MyComponent(.. 2023. 6. 12.

리액트 React | index.html ✅ index.html index.html 파일은 초기 HTML 구조를 정의하고, index.js 파일은 리액트 애플리케이션을 초기화하고 컴포넌트를 렌더링 한다. index.html 파일은 웹 브라우저에 직접 로드되며, index.js 파일은 index.html 파일에 의해 호출되어 애플리케이션을 동적으로 렌더링 한다. 💡 DOCTYPE 선언은 HTML 문서에서 태그를 정의하기 전에 웹 브라우저에게 해당 문서가 어떤 HTML 버전으로 작성되었는지를 선언한다. HTML5는 최신의 웹 표준이며, 구조적인 개선과 새로운 기능을 포함한다. // HTML5를 사용하는 문서 DOCTYPE 선언은 문서 유형 선언(Doctype declaration)의 약어로, 문서가 따르는 DTD, Document Type Defi.. 2023. 6. 8.

리액트 React | HTTP 클라이언트 데이터 통신: Ajax, Fetch, Axios ✅ HTTP 클라이언트(Client) 리액트(React)는 사용자 인터페이스를 구축하는데 초점을 두고 있어, 서버와 데이터를 주고받는 기능(HTTP 클라이언트)을 포함하지 않는다. 리액트(React)에서 서버와의 데이터 통신을 위해서는 별도의 HTTP 클라이언트를 사용해야 한다. 클라이언트와 서버는 개별적인 메시지 교환에 의하여 통신한다. HTTP 클라이언트는 HTTP 프로토콜을 사용하여 서버로부터 정보를 요청(requests)하고, 서버는 요청에 따라 적절한 응답(responses)을 반환한다. 리액트(React)에서 API 요청을 할 때 페이지를 새로고침하지 않고 데이터를 가져오기 위해 Axios나 Fetch 라이브러리를 사용한다. 💡 HTTP, HyperText Transfer Protocol HT.. 2023. 5. 19.

리액트 React | React-bootstrap: UI 컴포넌트 디자인 ✅ React-bootstrap React-Bootstrap은 UI 컴포넌트 라이브러리이다. Bootstrap 프레임워크의 디자인과 기능을 React 컴포넌트로 사용하는 것이다. React-Bootstrap 공식 문서를 통하여 자세한 정보와 사용 방법을 확인할 수 있다. 💡 React-bootstrap 사용하기 프로젝트에 React-Bootstrap 라이브러리를 설치하여 사용한다. 별도의 bootstrap.js 파일을 프로젝트에 추가하지 않아도 된다. npm 명령어를 실행하여 React-Bootstrap과 Bootstrap을 설치한다. npm install react-bootstrap bootstrap index.js 파일에서 Bootstrap의 CSS를 import 한다. 전체 애플리케이션에 Boots.. 2023. 5. 18.

리액트 React | 리액트 라우터: react-router-dom 패키지 ✅ 라우팅 Routing 라우팅은 사용자가 요청한 URL에 따라 해당 URL에 맞는 컴포넌트를 보여주는 것이다. 사용자가 애플리케이션에서 다른 페이지로 이동하려고 할 때, 라우터를 사용하여 해당 페이지 컴포넌트를 렌더링 한다. ✅ 리액트 라우터 React Router 리액트 라우터(React Router)는 리액트 기반의 싱글 페이지 애플리케이션(SPA)에서 라우팅을 구현하기 위한 라이브러리이다. 리액트 자체는 View만을 담당하는 라이브러리로 페이지의 URL에 따라 적절한 컴포넌트를 렌더링 하고 상태를 관리하기 위해 리액트 라우터(React Router)를 사용한다. 💡 react-router 패키지 react-router React 기반의 웹 및 앱 라우팅을 처리하는 라이브러리이다. react-rou.. 2023. 4. 24.

리액트 React | 노마스 코더 영화 평점 웹서비스 | 로딩 현상 구현 ✅ Movie 컴포넌트 구성하기 💡 App 컴포넌트 작성 import React from 'react'; // App 컴포넌트 정의 class App extends React.Component { // render 메소드 정의 render() { return ( {/* 컴포넌트 내용을 추가 */} ); } } // App 컴포넌트를 다른 파일에서 사용할 수 있도록 내보냄 export default App; 💡 isLoding state React 애플리케이션에서 데이터를 불러오거나 처리한다. 로딩 중일 때 사용자에게 로딩 중임을 알리기 위해 UI를 업데이트하는 데 사용한다. isLoading 변수는 true 또는 false 값으로 설정한다. import React from 'react'; // App 컴.. 2023. 4. 4.

리액트 React | 노마스 코더 영화 평점 웹서비스 | 컴포넌트 생명주기 함수: 마운트, 업데이트, 언마운트, 에러 처리 ✅ 생명주기 함수 컴포넌트가 생성, 업데이트, 소멸될 때 호출되는 일련의 메서드이다. 생명 주기 함수를 통해 컴포넌트의 동작을 제어하고, 상태를 갱신하거나 데이터를 가져온다. 함수 실행 순서 constructor() 함수: 컴포넌트가 생성될 때 호출되며, 초기화 작업을 수행한다. static getDerivedStateFromProps() 함수: 컴포넌트가 생성될 때와 업데이트될 때 호출되며, 프로퍼티 값을 상태 값으로 변환을 수행한다. render() 함수: 컴포넌트의 UI를 생성하고 반환을 수행한다. componentDidMount() 함수: 컴포넌트가 마운트 된 후에 호출되며, 초기화 및 네트워크 요청 등의 작업을 수행한다. shouldComponentUpdate() 함수: 컴포넌트가 업데이트될 때.. 2023. 4. 3.

리액트 React | 컴포넌트 간 데이터 전달을 위한 속성(props) ✅ 속성(Props) React는 컴포넌트 간에 데이터를 전달하는 메커니즘으로 속성(Props)을 제공합니다. 이를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달할 수 있습니다. Props는 읽기 전용이므로 하위 컴포넌트에서는 Props 값을 수정할 수 없습니다. 데이터는 항상 상위 컴포넌트에서 하위 컴포넌트로만 흐르기 때문에 Props를 사용하여 컴포넌트에 필요한 데이터와 이벤트 핸들러를 전달할 수 있습니다. 💡 속성(Props)의 읽기 전용성 React 컴포넌트에서 함수형 컴포넌트나 클래스형 컴포넌트 모두 Props는 읽기 전용입니다. 함수형 컴포넌트에서는 Props를 함수의 매개변수로 받아와 사용하며, 클래스형 컴포넌트에서는 this.props를 통해 Props를 사용합니다. Props는 항.. 2023. 3. 26.

리액트 React | 컴포넌트(Components) ✅ 컴포넌트(Components) 컴포넌트(Component)는 React 애플리케이션을 구성하는 최소한의 단위입니다. React에서는 UI를 재사용 가능한 개별적인 조각으로 분리하여 컴포넌트로 만들고, 각 조각을 개별적으로 살펴볼 수 있습니다 과거의 웹 프레임워크들은 일반적으로 MVC, Model-View-Controller 방식으로 구성되어 있어 각 요소의 의존성이 높아 재사용이 어려웠습니다. 그러나 React에서는 컴포넌트를 독립적으로 구성하여 재사용성을 높일 수 있습니다. 이를 통해 우리는 새로운 컴포넌트를 쉽게 만들 수 있습니다. 컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM 노드를 출력하는 함수로 볼 수 있습니다. 💡 React 컴포넌트 네이밍 규칙 Reac.. 2023. 3. 26.

리액트 React | JSX와 Babel: JavaScript의 확장된 문법과 변환 도구 ✅ JSX, JavaScript XML JSX는 리액트에서 사용되는 자바스크립트의 확장 문법입니다. 이를 통해 XML과 유사한 형태로 UI를 작성할 수 있습니다. JSX는 리액트 컴포넌트 파일에서 UI를 표현하는 데 주로 사용됩니다. JSX는 XML과 비슷한 구문으로 UI 구성 요소를 작성하며, 자바스크립트 코드 내에서 시각적으로 UI를 표현하는 데 도움을 줍니다. 개발자들은 주로 JSX를 활용하여 UI를 작성하고 유지보수하는 것을 선호합니다. .JSX 코드를 브라우저에서 직접 실행할 수는 없기 때문에, Babel과 같은 도구를 사용하여 JSX 코드를 일반 자바스크립트로 변환해야 합니다. 💡 JSX를 이용한 방법 JSX를 이용하면 HTML과 비슷한 형태로 코드를 작성할 수 있습니다. JSX 코드는 실제로.. 2023. 3. 25.

리액트 React | CRA, Create React App: 리액트 애플리케이션 개발을 위한 보일러플레이트 - 폴더 구조 ✅ CRA, Create React App CRA, Create React App는 리액트(React) 애플리케이션을 개발할 때 사용하는 보일러플레이트(Boilerplate)입니다. 보일러플레이트는 개발자들이 프로젝트를 빠르게 시작하고, 일관된 구조와 설정을 가진 애플리케이션을 개발할 수 있도록 도와줍니다. CRA를 사용하면 바벨(Babel)이나 웹팩(Webpack)과 같은 빌드 도구 없이도 간편하게 리액트 프로젝트를 설정할 수 있습니다. 💡 CRA 설치하기 React 앱을 생성할 폴더를 만듭니다. VSCode나 다른 텍스트 편집기에서 해당 프로젝트 폴더를 엽니다. 터미널을 열고 다음 명령어를 입력하여 React 앱을 생성합니다. npx create-react-app . 터미널에서 명령어 [npm sta.. 2023. 3. 8.

리액트 React | React 웹 개발 환경 구축: Node.js, npm, npx ✅ React 웹 개발 환경 React는 사용자 인터페이스(UI)를 구축하기 위한 JavaScript 라이브러리입니다. React를 개발하기 위한 환경을 구축하는 것은 프로젝트를 시작하는 첫 단계입니다. 이러한 환경을 구성하기 위해 다음과 같은 도구들이 사용됩니다. 💡 Node.js Node.js는 Chrome V8 JavaScript 엔진으로 구동되는 오픈소스 자바스크립트 런타임 환경입니다. Node.js는 서버 측 자바스크립트 실행을 위한 플랫폼으로 사용되며, React 개발에서는 바벨(Babel)과 웹팩(Webpack)과 같은 도구들을 사용하기 위해 필요합니다. Node.js는 비동기 이벤트 기반의 입출력 모델을 사용하여 가볍고 효율적인 네트워크 애플리케이션 개발을 가능하게 합니다. Babel: B.. 2023. 3. 7.

이전 1 다음

티스토리툴바