비전공 개발자

최근 웹사이트를 접속하면 색 테마를 유저들이 바로 변경할 수 있는 기능을 제공하는 모습을 많이 본다. 주로 Light 테마, Dark 테마를 선택할 수 있고 특정 버튼을 클릭하면 테마가 바뀐다. 이러한 코드를 직접 작성하면 시간이 오래 걸리고 유지 보수가 까다로운 문제가 발생한다. Material-UI에서는 Theme을 이용하면 이를 쉽게 구현 가능하다. 이를 실습하기 위해 최소한의 기능이 있는 예제를 작성해보았다. 예제는 함수형으로 작성하였다. 다음과 같이 상단 탭 우측의 BLUE, RED, GREEN, DARK 버튼을 클릭하여 웹 사이트의 전체적인 색 테마를 변경한다. 이를 구현하기 위해 Material-UI의 ThemeProvider, CreateMuiTheme, Palette를 이용하였다. Col..

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에서 제공하는 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 ..