비전공 개발자

최근 AI 분야의 딥러닝 공부를 시작했다. 석사 과정 중에 딥러닝 수업을 들었지만 시간이 지나니 기억이 나지 않아 처음부터 다시 시작했다. 딥러닝을 처음 공부하면 코딩에서 Hello World 같은 존재가 바로 Mnist일 것이다. Mnist는 숫자 손글씨 데이터로 딥러닝 모델을 트레이닝하고 테스트하는 프로젝트이다. Mnist를 공부하다가 이를 웹앱으로 만들어서 웹상에서 손글씨를 이미지를 업로드하고 결과를 확인하면 재밌겠다는 생각이 들었다. 그래서 AI 숫자 판별 앱이라는 이름으로 Mnist 웹앱을 개발해보았다. 웹사이트 접속 링크는 다음과 같다. 클라이언트 배포 링크 https://jb-mnist-client.herokuapp.com/ Mnist jb-mnist-client.herokuapp.com 서..

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

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