비전공 개발자

Main.js에서 사용하는 세 개의 컴포넌트를 작성해야한다. 배경 컴포넌트, 공룡 컴포넌트와, 세균 컴포넌트이다. 세 컴포넌트 모두 독립적으로 작동하도록 작성하였다. 배경 컴포넌트는 공룡이 오른쪽으로 움직이는 효과를 내기 위해 작성하였다. 배경 이미지가 왼쪽으로 계속해서 움직여 공룡이 오른쪽으로 움직이는 효과를 낸다. 이외의 기능은 없는 단순한 컴포넌트이다. Background.js import React, { useState, useEffect, useRef } from 'react'; import { makeStyles } from '@material-ui/core/styles'; import BackgroundImg from '../image/background.png'; const useStyle..

여기서부터는 React를 이용한 화면 코드를 설명한다. client.js에서는 Main.js의 코드를 index.html의 root라는 id를 가진 div 태그에 렌더링 한다. Main.js부터 Main.js에서 사용하는 컴포넌트를 설명하겠다. Main.js import React, { useState, useEffect, useRef } from 'react'; import Chracter from './component/Character'; import Background from './component/Background'; import Enemy from './component/Enemy'; import { makeStyles } from '@material-ui/core'; import Butt..

리액트를 이용하여 간단한 웹게임을 구현해보고자 이 프로젝트를 시작하였다. 인터넷 연결이 되지 않은 상태에서 크롬을 실행하면 나오는 공룡 게임에서 착안하였다. 다들 한 번씩은 해본 게임일 것이다. 공룡 점프게임은 이와 매우 유사한 게임이다. 비슷하게 장애물을 넘는 게임인데 선인장 대신 병균처럼 생긴 캐릭터를 넘는다는 점만 제외하면 같다. 모바일에서 접속하는 경우는 고려하지 않았다. 웹게임 배포 링크는 다음과 같다. https://jb-game-jump.herokuapp.com/ Jump Game jb-game-jump.herokuapp.com 게임 실행화면은 다음과 같다. 첫 화면을 클릭하면 게임이 시작된다. 병균이 한마리씩 공룡에 가까이 오게 되고 스페이스바를 눌러 점프해 병균을 피한다. 만약 피하는데 ..

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

새로운 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 다음과 같은 구조로 프로젝트 생성됨을 확인할 수 있다. 확인을 위해 다음과 같이 명령어를 입력하여 프로젝트를 실행한다...

공지 화면에서 게시판 형태의 데이터 중 특정 행을 클릭하면 공지 상세 화면으로 넘어간다. 공지 상세 화면에서는 공지 화면으로부터 클릭한 행의 상세 정보를 받아 보여주며 댓글 기능을 제공한다. 스타일은 이전 화면과 동일하게 withStyles을 이용하였고 댓글 정보와 이미지를 Firebase에서 받아 오는 방법도 동일하다. 상세 정보는 Board component에서 props.location.state에서 받아온다. BoardDetail.js import React, { Component } from 'react'; import { Link } from 'react-router-dom'; import Reply from './Reply'; import { withStyles } from '@materia..

상단 세 번째 탭의 SALLABERS를 클릭하면 공지 화면으로 넘어간다. 공지 화면에서는 게시판 형태로 정보를 전달하고 편의를 위한 검색기능과 페이지 당 보여주는 게시물의 갯수를 변경하는 기능을 제공한다. 또한 여기서 제목을 클릭하면 세부 내용을 보여주는 화면으로 넘어가며 조회수가 1 증가한다. 각 게시물에서는 댓글을 작성할 수 있다. Board.js에서는 리스트 형태로 받아오는 공지 정보를 보여줘야한다. 이때 게시판 형태로 정보를 제공해야하는데 이를 위한 component는 material-ui에서 제공하므로 이를 이용하였다. 공지 화면의 기본적인 뼈대는 material-ui의 tables를 참고하였다. https://material-ui.com/components/tables/ Board.js imp..

상단 두 번째 탭의 MENU를 클릭하면 메뉴 화면으로 넘어간다. 메뉴에서도 특별한 기능 없이 샐랩의 메뉴만 보여준다. 주문하기 버튼이 있지만 기능 구현은 하지 않았다. 이전 화면들과 다른 점은 메뉴와 메뉴 카테고리를 나타내는 component를 만들어 이용했다는 점과 Firebase의 database에서 메뉴 정보를 가져왔다는 점이다. 이 두 가지 내용을 중점적으로 설명하고자 한다. Menu.js에서는 리스트 형태로 받아오는 메뉴 정보를 보여줘야한다. 비슷한 형태에서 데이터만 달라지는데 반복적으로 보여줘야 하므로 MenuContent, MenuCategory라는 component를 만들었고 이를 menu.js에서 이용하였다. MenuContent.js import React, { Component } f..