개발공부일지/React32 React - CRA(Create-React-App) 사용하기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 환경을 보다 편리하게 구성하게 도와주는 CRA 에 대해서 알아보도록 하겠습니다. 간단한 예제형태로 구성되어 있고, 실제 어떠한 기능들을 담당하는지에 대한 간략한 설명만을 포함하므로, 개념에 대해서 알아보시는분들에게 도움이 될 거 같습니다. ========== HTML 삽입 미리보기할 수 없는 소스 ========== HTML 삽입 미리보기할 수 없는 소스 CRA 는 Create React App 의 약자로 기존의 React 애플리케이션을 보다 쉽게 생성하기 위한 CLI (Command Line Interface) 도구입니다. 이전 포스팅들을 살펴보신다면 이해하시겠지만, React 를 구성하기 위해서, 사용자는 React 를 CDN 으로 추가하거나.. 2023. 3. 15. React - StyledComponent / CSS-Loader 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 에서 StyledComponents , CSS-Loader 를 사용하여 Component 에 CSS를 적용하는 방법을 알아보도록 하겠습니다. 기존의 HTML/CSS 를 학습하신분들이라면, 어떠한 방식으로 문법을 작성하는지만 익히셔도 도움이 될 거라고 생각합니다. =========== HTML 삽입 미리보기할 수 없는 소스 =========== HTML 삽입 미리보기할 수 없는 소스 먼저 두가지의 차이점을 이해해야 코드의 상황에 맞는 CSS 적용이 가능합니다. 이 두개의 동작방식은 다르게 동작되므로, 그에 맞는 사용법이 필요합니다. Styled-Components 와 CSS-Loader 는 CSS를 적용하는 결과물은 같지만, 어떻게 적용하는지에 대.. 2023. 3. 15. React - Module-Bundler(Feat. WebPack) 알아보기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 와 같이 활용하게 될 Webpack 에 대한 기초적 사항만을 알아보도록 하겠습니다. =========== HTML 삽입 미리보기할 수 없는 소스 =========== HTML 삽입 미리보기할 수 없는 소스 Webpack은 서비스의 명칭은 아니고, Library 의 명칭입니다. 유사한 서비스들도 많지만, Webpack 보다 먼저 나온 서비스도 존재합니다. 이 Webpack 과 같은 라이브러리가 가지고 있는 정식명칭은 "Module-Bundler" 라고 하며, 최초에는 대규모 프로젝트의 복잡성을 관리하기 위해 출발한 라이브러리입니다. 일반적으로 Module-Bundler 는 아래와 같은 형태의 서비스를 제공합니다. "여러개의 module을 하나의 파.. 2023. 3. 14. React - 합성/상속 알아보기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 에서 상속,합성 개념을 어떻게 다루고 어떻게 사용하는지에 대해서 기본적인 사항을 알아보도록 하겠습니다. React는 사실 강력한 합성 모델을 가지고 있다고 공식 홈페이지에서 소개하고 있습니다. 이를 한번 살펴보고, 어떻게 사용해야하는지도 알아보도록 하겠습니다. ============== HTML 삽입 미리보기할 수 없는 소스 ============== HTML 삽입 미리보기할 수 없는 소스 먼저 React 에서 말하는 강력한 합성 모델의 핵심은 우리가 이전에 계속 다루었던 Component 에 기반하고 있습니다. 즉, Component 에 기반하고 있는 React 에서는 기존의 A 라는 Component 에 B Component 를 끼워넣을 수 .. 2023. 3. 7. React - 상태 끌어올리기 (Lifting State up) 안녕하세요. Hynn 입니다. 이번 포스팅에서는 상태 끌어올리기 (Lifting State up) 에 대해서 알아보도록 하겠습니다. 유사한 방법으로는 Sharing State Between Components, 컴포넌트 간 상태 공유 라는 방법도 존재합니다. 이에 대해서는 가볍게 개념과 기본 동작형태만 알아보도록 하겠습니다. 이에 대해서 각각 알아보도록 하겠습니다. ============ HTML 삽입 미리보기할 수 없는 소스 ============ HTML 삽입 미리보기할 수 없는 소스 먼저 아래의 그림을 통해, 각각의 Component 의 구조가 어떻게 이루어지는지를 살펴보겠습니다. 이 개념도를 이전 포스팅에서도 잠시 다룬 적이 있습니다. React 에서는 기본적으로 데이터 흐름(Data Flow) .. 2023. 3. 6. React - Form 사용하기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 HTML 에서 사용할 수 밖에 없지만, React 에서는 동작이 다르게 이루어지는 Form Element 에 대해 알아보도록 하겠습니다. 이번 포스팅은 다소 난해할 수 있기 때문에, 최대한 풀어서 작성해보도록 하겠습니다. ========== HTML 삽입 미리보기할 수 없는 소스 ========== HTML 삽입 미리보기할 수 없는 소스 먼저 이를 이해하기 위해서는 Component 의 개념으로 접근해야 합니다. 기존의 HTML 에서의 Form Element 는, "제어(Controller)", "비제어(unController)" Component 로 분류할 수 있습니다. 여기서 말하는 제어와 비제어의 차이는, 제어의 경우 Form Element 의 처리를.. 2023. 3. 6. 이전 1 2 3 4 5 6 다음
