윈도우 로컬 환경에서 React 를 활용한 반응형 앱을 만들기 위해서는 크게 4가지 단계를 거치면 됩니다. 1. 노드를 설치 2. 개발 툴 설치 (Visual Studio 등..) 3. React App 생성 4. App을 실행 (1) 노드 설치 https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 노드 사이트에서 최신 버전의 node.js 를 받아줍니다. LTS 버전을 다운받아 설치하면 됩니다. (2) 개발 툴 설치 (Visual Studio Code) https://code.visualstudio.com/download Download Visual St..

React 를 컴포넌트로 관리하게 될 때 컴포넌트로 만든 js 파일이나 렌더링할 내용이 있는 jsx 파일을 사용하려면 export를 해주어야 하고, 그 컴포넌트를 사용하는 파일에서는 import 를 시켜주어야 합니다. 이 export와 import를 사용하는 방법을 조금 더 알아보겠습니다. 단일 Export / Import math.js const pi = 3.1415962; export default pi; index.js import React from "react"; import ReactDOM from "react-dom"; import pi from "./math" ReactDOM.render( {pi} , document.getElementById("root") ); 컴포넌트인 math.js ..

React 의 가장 큰 장점 중 하나는 컴포넌트를 사용한 깔끔한 프로젝트 구성과 관리 효율성이 있습니다. 하나의 파일 안에 필요한 모든 코드를 넣는 것이 아니라 필요한 기능들과 input 되어져야 될 파일들을 따로 구분시켜 필요할 때마다 해당 기능들을 가지고 있는 컴포넌트 파일만을 간편하게 import 해서 사용하는 것입니다. 단일 컴포넌트 파일을 만들어 놓기만 해도 원할 때마다 재사용하여 구성할 수 있습니다. 이 컴포넌트를 어떻게 사용하고 구성하는지에 대해 예시 코드로 테스트해보며 정리해보겠습니다. 기존의 React 파일 구성 index.js import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( My Favourite..

JSX 문법에 스타일링 하는 것은 기본 Javascript와 다르지 않습니다. 다만 약간의 차이점이 있을 뿐입니다. JSX 문법에 스타일링 하는 방법에 대해서 간단하게 알아보겠습니다. 기본 스타일링 index.html index.html 에는 React JSX 를 import 하고 있습니다. 여기서 일반 Javascript를 import 하는 것이라면 type을 "text/javascript" 라고 했겠지만, JSX 이기 때문에 type은 "text/JSX"입니다. index.js import React from "react"; import ReactDOM from "react-dom"; ReactDOM.render( My Favourite Foods Bacon Jamon Noodles , documen..

React는 Angular, Vue를 비롯한 많은 프레임워크 중에서 가장 많이 사랑받는 프론트엔드 웹 프레임워크 입니다. js인 만큼 사용자 인터페이스 구축을 위한 JavaScript 라이브러리라고 정의가 되어있습니다. React 특징 1. 데이터 흐름 React는 데이터의 흐름이 한 방향으로만 흐르는 단방향 데이터 흐름을 가집니다. Augular.js와 같은 양방향 데이터 바인딩은 규모가 커질수록(대규모 애플리케이션의 경우) 데이터의 흐름을 추적하기가 힘들고 복잡해지는 경향이 있어, 복잡한 앱에서도 데이터 흐름에서 일어나는 변화를 보다 예측 가능할 수 있도록 단방향 흐름을 가지도록 했다고 합니다. 2. Component 기반 구조 Component는 독립적인 단위의 소프트웨어 모듈을 말합니다. 즉, 소..

레이아웃은 기본적으로 12개의 열로 이루어져 있습니다. 컨테이너를 생성하게 되면 해당 컨테이너 내부에도 기본적으로 보이진 않지만 12개의 열로 구분되어져있습니다. Bootstrap을 사용하게 되면 각 열 컨텐츠들을 col 이라고 칭합니다. 기본적으로 각 컨텐츠들에게 너비를 정해주지 않으면 전부 동일한 크기를 가지게 됩니다. Bootstrap Container Bootstrap을 사용하여 컨테이너를 만들게 될 때 컨테이너 클래스 속성 명과 값이 정해져있습니다. 각 container 클래스 속성명에 따라 부여된 반응형 크기가 존재합니다. - container : 가장 작은 컨테이너로서 가장 작은 화면에 한해서만 전체 크기를 가집니다. - container-sm : container와 유사합니다. 가장 작은 ..