webpack3 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. 이전 1 다음
