비전공 개발자

Stepper 설명과 예시 Stepper는 프로세스를 표현하는 UI 컴포넌트로 Stepper, 컨텐츠, 버튼이 항상 같이 등장한다. 우선 Stepper를 사용하는 가장 간단한 예제를 작성해보았다. 이때 상단에 위치한 UI 컴포넌트가 Stepper로 현재 스텝, 이미 지난 스텝, 남은 스텝을 적절하게 보여준다. Stepper 다음에는 step에 따라 정해진 컨텐츠를 보여주며, 마지막에는 스텝의 증가 감소를 조절하는 버튼을 보여준다. 첫 번째 step에서는 다음 버튼만 활성화하며 다음 버튼을 클릭하면 다음 step으로 넘어간다. 그 이후에는 이전 버튼과 다음 버튼을 모두 활성화하며 이전 버튼을 클릭하면 이전 step으로 돌아간다. 마지막 step에서는 다음 버튼의 글자를 완료로 바꿔 보여준다. 완료 버튼을 ..

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..

Tab, Tabs는 화면 전환을 위해 사용하는 컴포넌트이다. Tabs 컴포넌트 안에 Tab 컴포넌트가 위치하고 Tab을 클릭하면 화면이 전환되어야 한다. 두 컴포넌트를 이용하여 화면 전환을 하는 방법은 두 가지이다. 1. Tab, Tabs와 Route 컴포넌트를 활용하여 url이 변하면서 실제로 페이지가 전환되도록 하는 방법 이 방법은 이전에 [Lunch-Box] 프로젝트를 할 때 사용하였으므로 다음을 참고한다. https://jongbeom-dev.tistory.com/10?category=835620 [Lunch Box] 6. 상단탭과 라우팅 설정 상단 탭과 라우팅은 main.js에서 정의한다. Main.js import React, { Component } from 'react'; import { ..

이어서 Grid 실습을 진행한다. 이전에는 내부 컴포넌트에 xs 속성만 설정하였는데 이렇게 하면 화면 크기에 따라 내부 컴포넌트들의 크기와 배치를 변경할 수 없다. 각 화면에 따라 차지할 그리드의 갯수를 다르게 하면 화면 크기에 따라 변경이 가능하다. 다음과 같이 예제를 작성하였다. GridTutorial2.js import React, { Component } from 'react'; import { withStyles } from '@material-ui/core/styles'; import Paper from '@material-ui/core/Paper'; import Grid from '@material-ui/core/Grid'; const styles = theme => ({ root: { pa..

Material-UI에서 제공하는 Grid 컴포넌트 실습을 진행한다. Grid 컴포넌트는 화면의 크기에 따라 컴포넌트의 배치와 크기를 변경하는 기능을 제공한다. 기본적으로는 세로로 12칸을 기준으로 하며 컴포넌트의 lg, md, sm, xl, xs 속성에 따라 너비와 위치가 결정된다. 또한 특정 컴포넌트가 이전 컴포넌트 다음 여백에 들어갈 만큼의 크기라면 바로 옆에 위치하고 그렇지 않다면 다음 줄에 위치하게 된다. 좀 더 직관적으로 이해하도록 예시를 작성하였다. Paper라는 컴포넌트를 Grid를 이용하여 배치하였다. GridTutorial1.js import React, { Component } from 'react'; import { withStyles } from '@material-ui/core/..

Material-UI에서 제공하는 컴포넌트를 이용할 때 색을 설정하는 방법은 여러 가지가 있다. 1. 인라인 스타일을 이용 하는 방법 가장 쉽게 적용하는 방법으로 태그 내부에 스타일 속성을 이용하여 색을 설정. 2. .css 파일을 이용하는 방법 .css 파일에서 특정 클래스에 스타일이 적용되도록 작성하고 태그에서 해당 스타일이 적용되도록 클래스를 설정. 3. Material-UI의 withStyle을 이용하는 방법 이전 글에서 설명하였음. https://jongbeom-dev.tistory.com/31 [Material-UI 실습] 4. Style (1) - withStyles Material-UI 컴포넌트에서는 스타일을 적용할 때 스타일 패키지를 이용한다. 물론 CSS를 작성하여 className을 ..

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

Material-UI 컴포넌트에서는 스타일을 적용할 때 스타일 패키지를 이용한다. 물론 CSS를 작성하여 className을 설정해서 스타일을 적용하거나 style 속성에 직접 작성하여 스타일을 적용해도 된다. 스타일 패키지를 이용하면 여러 가지 장점이 있는데 작은 개발 프로젝트를 하는 단계에서는 아직 체감하기는 어렵다. 스타일 패키지를 이용하기 위해 다음과 같이 명령어를 입력하여 설치한다. npm install @material-ui/styles 스타일 패키지는 스타일을 적용시키는 세 가지 방법을 제안한다. Hook API를 사용하는 방법, Styles Components API를 사용하는 방법, HOC(Higher-order component) API를 사용하는 방법이다. 아직 이해한 방법은 HOC(..

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..