본문 바로가기

프론트엔드/React & React-Native37

리액트 네이티브 React Native | EAS를 통해 APK를 빌드하는 방법 ⭕ 리액트 네이티브 React Native | EAS를 통해 APK를 빌드하는 방법➡️ eas.json 파일 설정하기eas.json 파일은 프로젝트의 빌드 프로세스를 구성하기 위해 사용됩니다. 이 파일에서는 다양한 빌드 환경(예: 개발, 내부 릴리스 등)에 대한 설정을 정의할 수 있습니다. 각 환경은 특정 타깃(Android/iOS)에 대한 세부 사항을 설정할 수 있습니다. ➡️ 개발 빌드 설정개발 빌드 환경에서는 주로 디버깅과 개발을 목적으로 하는 APK를 생성합니다.buildType: 빌드 타입을 "apk"로 설정하여 Android APK 파일을 생성하도록 합니다.gradleCommand: Gradle을 사용한 빌드 명령을 지정합니다. 여기서 :app:assembleDebug는 디버그 버전의 앱을 .. 2024. 4. 26.

리액트 네이티브 React Native | JSX (JavaScript, XML) ⭕ 리액트 네이티브 React Native | JSX (JavaScript, XML)XML 태그 이름을 자유롭게 사용할 수 있는 JSX(JavaScript XML)는 리액트와 리액트 네이티브에서 자바스크립트와 XML 구문을 결합하여 사용하는 것을 의미합니다. ➡️ JSXJSX는 JavaScript XML의 약자로, XML에 자바스크립트를 결합할 목적으로 만들어진 구문입니다. 이를 통해 React.createElement 호출 코드를 간단하고 명확하게 만들 수 있습니다.// JSX 예시const element = Hello, world!; ➡️ 자바스크립트 확장자바스크립트 확장은 표준 ESNext 자바스크립트나 타입스크립트 문법에는 JSX 구문이 없음을 의미합니다. 리액트와 리액트 네이티브 프레임워크 개발.. 2024. 3. 20.

리액트 네이티브 React Native | react 패키지 ⭕ 리액트 네이티브 React Native | react 패키지➡️ react 패키지리액트와 리액트 네이티브 프레임워크는 공통적으로 react 패키지를 사용합니다. 이 패키지는 애플리케이션의 가상 DOM 구조를 만들어주는 역할을 담당합니다. ➡️ react-native 패키지리액트 네이티브에서는 react-native 패키지가 사용됩니다. 이 패키지는 리액트 요소를 안드로이드 프레임워크나 iOS용 UIKit 프레임워크의 화면 UI 객체로 변환하는 역할을 합니다. ➡️ 브리지 방식 렌더링리액트에서는 자바스크립트를 사용하여 DOM 렌더링 과정을 직접 확인할 수 있습니다. 그러나 리액트 네이티브에서는 네이티브 렌더러의 동작을 코드로 확인할 수 없습니다. 이는 리액트 네이티브 프로젝트의 Android와 iOS .. 2024. 3. 19.

리액트 네이티브 React Native | DOM과 렌더링 ⭕ 리액트 네이티브 React Native | DOM과 렌더링DHTML(Dynamic HTML) 방식은 자바스크립트가 텍스트를 만드는 것이 아니라 객체 지향 언어의 상속 관계로 설계한 문서 객체 모델(DOM) 타입 자바스크립트 객체를 생성하는 방식으로 동작합니다. 웹 브라우저는 HTML 문서를 만나면 파싱 과정을 거쳐 다양한 형태의 자바스크립트 객체 구조를 만듭니다. 이러한 클래스를 DOM이라고 하며, DOM의 인스턴스를 DOM 객체라고 합니다. DOM 객체는 부모/자식 형태의 나무 구조를 이루는데 이를 DOM 트리 구조 또는 줄여서 DOM 구조라고 합니다. 웹 브라우저가 HTML을 파싱하여 자바스크립트 DOM 구조로 만드는 것을 렌더링이라고 합니다.// 예시: HTML 문서에서 div와 h1 요소를 가.. 2024. 3. 19.

리액트 네이티브 React Native | 정적 HLTML과 동적 HTML ⭕ 리액트 네이티브 React Native | 정적 HLTML과 동적 HTML1997년, 마이크로소프트는 웹 기술의 새로운 패러다임을 발표했습니다. 이것이 정적 HTML에서 동적 HTML로의 전환입니다. 정적 HTML은 웹 서버에서 미리 작성된 HTML 문서를 클라이언트에게 전달하는 방식으로 동작했습니다. 그러나 마이크로소프트의 발표는 이러한 전통적인 방식을 벗어나, 웹 브라우저에서 자바스크립트 코드를 실행하여 동적으로 HTML을 생성하는 방식으로 웹 기술을 발전시켰습니다. ➡️ 정적 HLTML정적 HTML은 변하지 않는 콘텐츠를 제공하는 데에 적합했습니다. 그러나 동적 HTML은 사용자의 상호작용에 따라 콘텐츠를 동적으로 생성하고 업데이트할 수 있어서 웹 애플리케이션의 기능성과 사용자 경험을 향상했습니.. 2024. 3. 19.

리액트 네이티브 React Native | 윈도우 개발 환경: Scoop, Node.js, JDK ⭕ 리액트 네이티브 React Native | 윈도우 개발 환경: Scoop, Node.js, JDK리액트 네이티브(React Native)는 모바일 앱 개발을 위한 프레임워크로, 개발자가 JavaScript를 사용하여 iOS와 안드로이드 양쪽 플랫폼을 위한 네이티브 앱을 개발할 수 있게 해 줍니다. 윈도우 서 리액트 네이티브 개발 환경을 설정하는 과정을 용이하게 만드는 중요한 도구 중 하나가 Scoop입니다. ➡️ Scoop 설치 과정Scoop은 윈도우용 커맨드 라인 인터페이스(CLI) 기반의 패키지 매니저로, 소프트웨어 설치와 관리를 간소화합니다. 특히 개발 도구와 라이브러리를 쉽게 설치하고 업데이트할 수 있는 기능을 제공하여, 수동 다운로드와 설치의 번거로움을 줄여줍니다.PowerShell 관리자 .. 2024. 3. 19.

리액트 네이티브 React Native | 개발 환경 ⭕ 리액트 네이티브 React Native | 개발 환경리액트 네이티브(React Native)는 모바일 앱 개발의 패러다임을 바꾼 크로스플랫폼 프레임워크입니다. 이 기술을 사용하여 개발자는 하나의 코드베이스로 iOS와 안드로이드 양쪽 플랫폼에서 실행 가능한 앱을 만들 수 있습니다. 그러나 각 운영 체제에 맞는 앱을 효과적으로 개발하기 위해서는 특정 개발 환경 설정이 필요합니다. ➡️ 개발 환경 구성리액트 네이티브의 개발 환경은 기본적으로 Node.js 기반으로, 이는 다양한 운영 체제에서 지원됩니다. 개발자는 Node.js를 설치한 후, 마이크로소프트가 오픈소스로 제공하는 비주얼 스튜디오 코드(Visual Studio Code) 같은 편집기를 사용하여 코드를 작성할 수 있습니다. 이는 윈도우, 맥, 리.. 2024. 3. 19.

리액트 네이티브 React Native | 브릿지(Bridge) 방식 ⭕ 리액트 네이티브 React Native | 브릿지(Bridge) 방식리액트 네이티브(React Native)는 모바일 앱 개발에 있어 혁신적인 접근 방식을 제시합니다. 이 플랫폼은 안드로이드와 iOS 개발을 위해 각각 자바(Java)와 오브젝트-C(Objective-C) 또는 스위프트(Swift)로 작성된 기존의 네이티브 프레임워크에 의존합니다. 안드로이드의 경우 안드로이드 프레임워크, iOS의 경우 UIKit 프레임워크가 이에 해당합니다. 이 두 프레임워크는 각각의 운영체제에서 GUI 구성요소를 다루는 데 필요한 다양한 뷰(View) 클래스를 제공합니다. ➡️ 브릿지(Bridge) 방식리액트 네이티브는 이러한 네이티브 프레임워크와 자바스크립트 엔진 간의 통신을 가능하게 하는 '브릿지' 방식을 채택합.. 2024. 3. 19.

리액트 네이티브 React Native | 크로스 플랫폼(Cross Platform) ⭕ 리액트 네이티브 React Native | 크로스 플랫폼(Cross Platform)리액트 네이티브(React Native)는 페이스북에 의해 2015년에 발표된 혁신적인 크로스플랫폼 모바일 앱 개발 프레임워크입니다. 이 기술은 모바일 앱 개발의 패러다임을 전환시키며, 개발자들에게 안드로이드와 iOS 운영체제를 위한 앱을 단일 코드베이스로 개발할 수 있는 능력을 부여합니다. 리액트 네이티브의 등장으로 인해, 웹 개발자들은 별도의 네이티브 언어 학습 없이도 효율적으로 모바일 앱을 개발할 수 있게 되었습니다. ➡️ 네이티브 앱 (Native App)네이티브 앱 개발은 각 운영체제별로 최적화된 성능과 사용자 경험을 제공하지만, 이는 개별 플랫폼마다 별도의 앱 개발을 필요로 합니다. 안드로이드 앱 개발에는 .. 2024. 3. 19.

리액트 네이티브 React Native | 리액트 기반 프레임 워크 ⭕ 리액트 네이티브 React Native | 리액트 기반 프레임 워크리액트 네이티브(React Native)는 페이스북이 개발한 크로스플랫폼 모바일 앱 개발 프레임워크로, 널리 사용되는 웹 개발 언어인 자바스크립트를 기반으로 합니다. 리액트 네이티브는 리액트와 기술적으로 약 10%만 공유하며, 주로 웹 브라우저 대상으로 동작하는 리액트와는 달리, HTML과 CSS를 사용하지 않고도 실행 가능한 앱을 만들 수 있다는 점에서 큰 차이를 보입니다. 이는 기존에 안드로이드 앱 개발에 사용되는 자바나 코틀린, iOS 앱 개발에 필요한 오브젝트C나 스위프트와 같은 언어에 비해 훨씬 접근성이 좋다고 할 수 있습니다. 그 결과, 리액트 네이티브는 개발자들에게 자바스크립트를 이용하여 네이티브 수준의 성능을 내는 모바일.. 2024. 3. 19.

리액트 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.

이전 1 2 다음

티스토리툴바