비전공 개발자

실행 다음의 명령어를 입력하여 개발 및 테스트한다. npm run dev 빌드 개발이 완료되면 웹 게임을 Heroku에 배포한다. 우선 배포 전 다음의 명령어를 입력하여 빌드한다. npm run build 빌드가 완료되면 build 폴더에 이미지 파일과 javscript 파일이 생성된다. 이때 index.html 파일은 자동으로 생성되지 않으므로 복하여 build 폴더에 같은 파일을 생성한다. server.js const path = require('path'); const express = require('express'); // create server const app = express(); // set production env app.use(express.static(path.join(__dir..

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

다음 명령어를 입력하여 서버를 실행하고 결과물을 확인한다. localhost:8080에 접속하면 확인할 수 있다. npm start 마지막으로 배포하고 마무리한다. 배포는 Heroku에 하였다. 기간 프로젝트 개발 기간 : 2020년 03월 1일 ~ 2020년 03월 15일 (2주) 블로그 정리 기간 : 2020년 04월 04일 ~2020년 04월 05일 (2일) 그림판 앱 배포 링크 https://jb-painter.herokuapp.com/ Painter jb-painter.herokuapp.com 그림판 앱 깃 주소 https://github.com/Jongbeom2/painter Jongbeom2/painter Contribute to Jongbeom2/painter development by c..

프로젝트의 모든 javascript는 app.js에 작성하였다. app.js // Constant const INITIAL_COLOR = '#2c2c2c' const INITIAL_BG_COLOR = 'white'; const INITIAL_LINE_WIDTH = 2.5; const BTN_CLICKED_CN = 'controls__color__clicked'; // Dom Element const canvasParent = document.querySelector('#canvas'); const canvas = document.querySelector("#jsCanvas"); const ctx = canvas.getContext('2d'); const colors = document.querySelec..

프로젝트에서는 두 개의 css 파일을 사용한다. reset.css와 style.css이다. 우선 reset.css에 대해 설명하겠다. reset.css는 직접 작성한 파일은 아니다. reset.css는 css를 초기화하기 위해 사용하는 파일이다. 브라우저마다 기본 태그의 스타일이 다르기 때문에 먼저 초기화를 한 후에 스타일을 적용시켜야 한다. reset.css는 다양한 버전이 있어 각자의 상황에 맞게 사용하면 된다. 이 프로젝트에서는 여기의 reset.css를 사용하였다. https://gist.github.com/DavidWells/18e73022e723037a50d6 reset.css GitHub Gist: instantly share code, notes, and snippets. gist.gith..

세팅 프로젝트 파일의 전체 구조는 다음과 같다. app.js, index.html, reset.css, style.css가 앞으로 작성할 파일들이다. 우선 server를 생성하고 시작하기 위한 초기 세팅을 한다. npm init 이를 실행하면 package.json이 생성된다. 이후 http-server를 다운받는다. npm i http-server 서버를 실행할 수 있도록 package.json에 스크립트를 작성한다. package.json은 다음과 같다. { "name": "painter", "version": "1.0.0", "description": "nomadcoders", "main": "app.js", "scripts": { "start": "http-server -c-1" }, "depen..

Vanilla JavaScript를 이용하여 웹에서 작동하는 그림판 앱을 구현하는 프로젝트이다. 데스크톱 프로그램 중에 그림판의 축소된 기능을 가진 앱이다. 접속 링크는 다음과 같다. https://jb-painter.herokuapp.com/ Painter jb-painter.herokuapp.com 완성된 형태는 다음과 같다. 기능은 크게 다섯 가지가 있다. 1. 캔버스의 크기를 조절하는 기능 2. 캔버스를 색칠하거나 그림을 그리는 기능 3. 결과물을 이미지로 저장하는 기능 4. 리셋 기능 5. 색 선택 기능 화면은 html 코드로 기능은 Vanilla JavaScript로 구현하였고 Heroku에 배포하였다. 소스 깃 주소 https://github.com/Jongbeom2/painter Jongb..

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

배경 컴포넌트에 이어 공룡과 병균 컴포넌트를 작성하였다. 공룡 컴포넌트에서는 공룡 이미지를 렌더링하고 스페이스바를 누르는 이벤트가 발생하면 공룡 이미지를 위아래로 이동시켜 점프 효과를 낸다. Character.js import React, { useState, useEffect} from 'react'; import { makeStyles } from '@material-ui/core/styles'; import CharacterImg from '../image/character.png'; const useStyles = makeStyles(theme => ({ root: { }, character: { position: 'absolute', width:'80px', height:'120px', left..

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