전체 글127 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. React - List & Key 사용하기 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 에서 배열(Array) 를 사용하여 List, Key 를 사용하는 방법을 알아보도록 하겠습니다. 기존의 포스팅에서는 객체(Object) 위주로의 작성이 이루어졌다면, 이제 Array 를 이용해 List 를 만들고 각 항목에 그에 맞는 Key 를 사용하는 방법을 알아보도록 하겠습니다. =========== HTML 삽입 미리보기할 수 없는 소스 =========== HTML 삽입 미리보기할 수 없는 소스 먼저 이를 위해서는 JavaScript 의 map method를 잘 이용해야 합니다. map method 를 사용하면 결과값을 배열로 반환할 수 있기 때문에, 이를 이용하면 쉽게 Array 배열을 만들 수 있습니다. 즉, Map method 는 항.. 2023. 3. 6. React - 조건부 랜더링 안녕하세요. Hynn 입니다. 이번 포스팅에서는 React 에서의 조건부 랜더링을 알아보도록 하겠습니다. 기존의 제 프로젝트나, 작성에서는 Nunjucks 를 이용하여, If 문등을 사용하여 작성했습니다. React 역시도 기본적으로는 If 나 조건부 연산자 등을 이용해서 작성을 하게 됩니다. 이를 자세하게 살펴보도록 하겠습니다. ============ HTML 삽입 미리보기할 수 없는 소스 ============ HTML 삽입 미리보기할 수 없는 소스 class Test extends React.Component { render() { const isLoggedIn = this.props.isLoggedIn if (isLoggedIn) { return Hynn Tistory Blog } else { r.. 2023. 2. 28. 이전 1 ··· 5 6 7 8 9 10 11 ··· 22 다음
