웹 프론트/React

웹 프론트/React

리액트[React] - 현재 시간 표시 및 실시간 시계(live-clock) 만들기

React - react-live-clock React + Express 활용한 라즈베리파이 관련 IoT 프로젝트 개발 막바지에 상단에 실시간 시계 표시 기능 추가 요청이 들어왔습니다. 전체적으로 짜임새 있고 구조적으로 소스코드를 관리해왔던지라 해당 부분을 component로 구성하고 싶어 이와 관련된 라이브러리가 있어 소개해 봅니다. 불과 몇 분만에 뚝딱 구성해서 적은 코드로 타임존 까지 국가별로 완벽하게 구성 할 수 있었습니다. React 관련 open-library의 장점이라 생각합니다. React, React Native 관련 프로젝트 진행 중이신 분들께 도움이 되길 바라면서 이와 관련 된 자세한 사용 방법은 문서 하단에서 기술하겠습니다. React 관련 포스팅 : React 참고 React - ..

웹 프론트/React

리액트[React] - ES6 문법 + Babel 기초 예제 및 다운로드

리액트[React] - ES6 + Babel 기본 설명 ① ES6와 Webpack 등을 활용한 개발 방법이 주가 되고 있습니다.② ES6의 클래스 모듈, 새로운 변수 선언, 키워드, Promise 등을 활용해서 복잡한 애플리케이션의 코드 표현력을 높일 수 있습니다.③ React는 ES6 문법이 주가 되기 때문에 Babel 사용은 필수적이라고 볼 수 있습니다.④ React와 궁합도 좋아서 간단하게 아래 예제를 작성했습니다. 참고하시면 도움이 될 것입니다. 리액트[React] - ES6 + Babel 설명 및 예제 전체 소스코드- 아래 예제는 입문, 초보자를 위한 CDN 방식으로 HTML 파일로 구성 된 간단한 예제입니다.- 실제 프로젝트에서는 아래와 같이 Webpack Build 없이 사용하면 문제가 될 ..

웹 프론트/React

리액트[React] - 라우터(Router) 기초 설명 및 다운로드

React[리액트]- Router 기본 예제 설명 ① 리액트(React)에서는 URL 값에 따른 뷰(View)를 보여주는 Router를 제공한다. ② 렌더링(Rendering)을 서버쪽에서 담당하는 것은 자원 소모가 있으므로, 뷰(View) 렌더링을 브라우저에서 담당 하는 것이다. ③ 즉, 브라우저에서 압축과 캐싱 기능을 활용하여 렌더링을 후 서버에서 필요한 데이터만 전달받아 보여준다. React Router + Redux 기본 구조 React Router + Redux 기반 어플리케이션의 일반적인 구조는 아래와 같다. 참고 하자. React 라우터(Router) 예제 코드 index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 Colored by Color Scripter cs sty..

웹 프론트/React

리액트[React] - 생명주기(LifeCycle) 기초 설명 및 다운로드

React[리액트]- 생명주기(LifeCycle) 설명 ① 리액트(React)에서는 Props, State값이 변화 될 때 컴포넌트(Component)에 많은 변화가 일어난다. ② 컴포넌트(Component) 생성, 업데이트, 제거 될 때 일어난다. ③ 리액트(React) 에서는 DOM 혹은 페이지에 올라갈 때를 마운트(Mount), 그 반대는 언마운트(Unmount) 라고 정의한다. React Life Cycle React에서는 아래 그림과 같은 생명주기(LifeCycle)을 원칙으로 한다. React 생명주기(LifeCycle) 예제 코드 main.js 1 2 3 4 5 6 7 8 9 import React from 'react'; import ReactDOM from 'react-dom'; impo..

[좋은사람]
'웹 프론트/React' 카테고리의 글 목록