비전공 개발자

여기서부터는 React를 이용한 화면 코드를 설명한다. 이전 글에서는 client.js까지 설명하였다. client.js에서는 Main.js의 코드를 index.html의 root라는 id를 가진 div 태그에 렌더링 한다. 여기서부터 Main.js부터 Main.js에서 사용하는 컴포넌트를 설명하겠다. Main.js import React from 'react'; import AppBar from '@material-ui/core/AppBar'; import Tabs from '@material-ui/core/Tabs'; import Tab from '@material-ui/core/Tab'; import PredictWithFile from './component/PredictWithFile'; imp..

Material-UI를 이용하여 icon을 사용하는 방법은 세 가지가 있다. Material-UI에서 제공하는 컴포넌트인 Material Design icon을 사용하는 방법 사용자가 SVG icon을 정의하고 SvgIcon 컴포넌트로 감싸서 사용하는 방법 사용자가 icon을 정의하고 Icon 컴포넌트로 감싸서 사용하는 방법 각각의 방법으로 icon을 구현해보았다. IconTutorial.js import React, { Component } from 'react'; import HomeIcon from '@material-ui/icons/Home'; import Icon from '@material-ui/core/Icon'; import SvgIcon from '@material-ui/core/SvgI..

Material-UI 스타일 패키지를 이용해서 스타일을 적용할 때 Theming을 사용하는 방법도 있다. Thme은 제작하는 어플리케이션의 전체적인 테마를 의미한다. 각 테마에 맞게 theme을 설정하며 아무 설정이 없다면 default theme을 사용한다. 이전의 withStyles는 컴포넌트의 스타일을 적용하는데 사용하고, theme은 어플리케이션의 전체적인 스타일을 적용하는데 사용한다. 이전과 같은 예제 화면이지만 theme을 이용하여 구현하도록 코드를 작성하였다. theme은 StyleTutorial2.js에서 설정하였고 이를 StyleTutorial2Inner.js에서 받아 스타일을 적용하도록 구현하였다. StyleTutorial2.js import React, { Component } fro..

Material-UI에서 제공하는 Box 컴포넌트 실습을 진행한다. BoxTutorial 컴포넌트를 생성해 Main.js에서 불러오고 BoxTutorial 컴포넌트에서 Box 컴포넌트를 이용한다. Box 컴포넌트는 컴포넌트를 감싸는 역할을 하는데 주로 CSS의 사용성을 더 높이기 위해 사용된다. 이를 확인하기 위해 예제를 작성해보았다. BoxTutorial.js import React, { Component } from 'react'; import Button from '@material-ui/core/Button' import Box from '@material-ui/core/Box'; class BoxTutorial extends Component { render() { return ( Button ..

Material-UI를 사용하기 위해 다음과 같이 명령어를 입력하여 모듈을 설치한다. npm install @material-ui/core package.json 파일의 dependencies에 @material-ui/core 모듈이 추가되었는지 확인한다. 리액트의 컴포넌트에는 두 가지 종류가 있다. 함수형 컴포넌트와 클래스형 컴포넌트이다. 둘의 차이를 여기서 설명하진 않겠다. Material-UI 웹 페이지에서는 제공하는 대부분의 예제가 함수형이므로 클래스형으로도 한번 작성해보고 싶어 여기서는 클래스형으로 컴포넌트를 생성하였다. Create React App에서 App.js는 함수형으로 작성되었으므로 클래스형으로 수정한다. App.js import React from 'react'; import Mai..

새로운 React 프로젝트를 시작하기 위해 Create React App을 생성해야한다. 프로젝트를 생성할 위치에서 다음과 같이 명령어를 입력하여 create-react-app 모듈을 설치한다. Node js 설치되었다고 가정였다. npm install -g create-react-app 그리고 앱을 생성상하기 위해 다음과 같이 명령어를 입력한다. 프로젝트 이름은 material-ui-tutorial로 설정했다. create-react-app material-ui-tutorial 그리고 생성된 프로젝트를 확인하기 위해 프로젝트 위치로 이동한다. cd material-ui-tutorial 다음과 같은 구조로 프로젝트 생성됨을 확인할 수 있다. 확인을 위해 다음과 같이 명령어를 입력하여 프로젝트를 실행한다...