본문 바로가기

react15

Project - React 를 사용한 SPA 홈페이지 구축 안녕하세요 Hynn 입니다. 오랜만에 작성하는 블로그 게시물이 되었습니다. 지난 기간동안, 개인적 학습결과물을 이용해, React 를 이용한 SPA 홈페이지 구축을 프로젝트로 진행했습니다. 3인에서 진행하는 프로젝트였고, 다양한 API 와 Library 및 배포환경에 대한 공부를 하면서 진행했습니다. 프로젝트에서 구현하고자 한 점은, OTT 서비스의 대한 쉽게 볼 수 있는 요금제와 각 특징, Youtube 의 경우, 해외 요금제와 원화를 비교하여, 현재 각 국가별 환율을 적용하여 일자별로 비교할 수 있는 서비스, 다인사용이 가능한 요금제의 경우, 쉐어를 할 수 있는 모집 게시판을 간단하게 구축하고자 했습니다. 간략하게 소개하고, 어떠한 점들을 중점적으로 다루었는지 작성해보도록 하겠습니다. ========.. 2023. 4. 17.
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.

티스토리툴바