비전공 개발자

Scope 자바스크립트에서 scope란 변수에 접근할 수 있는 범위를 의미한다. 자바스크립트에서 두 가지 종류의 scope가 존재한다. Local scope와 gloabal scope이다. 함수 내에서 선언된 변수는 Local scope로 함수 내에서만 접근 가능하고, 함수 밖에서 선언된 변수는 global scope로 모든 곳에서 접근 가능하다. 대표적인 예시는 다음과 같다. 변수 a는 global scope로 선언하였고 변수 b는 func라는 함수 내에서 local scope로 선언하였다. a를 global scope로 선언하였기 때문에 func 함수 내에서 변수 a에 접근이 가능하다. 이때 다른 곳에서 변수 a와 변수 b에 접근이 가능할지 살펴보자. 결과는 다음과 같다. a는 gloabl scope..

console.dir() log 함수 다음으로 가장 많이 사용하는 함수가 dir 함수이다. dir 함수는 객체의 속성을 계층구조로 출력한다. 대표적인 예제는 다음과 같다. 예제는 크롬 개발자도구의 콘솔창을 이용하여 구현하였다. log 함수로 document.body 객체를 출력하면 태그내용이 나오고 dir 함수로 document.body 객체를 출력하면 객체의 속성이 출력된다. 함수인 객체를 log 함수와 dir 함수로 출력하면 결과는 다음과 같다. 다음과 같이 log 함수로 func 함수를 출력하면 함수의 코드가 출력되고 dir 함수로 출력하면 함수의 속성이 출력된다. console.count(), console.countReset() count 함수는 얼마나 많이 count 함수를 호출했는지 출력한다..

Console 자바스크립트에는 console이라는 객체가 존재한다. Console은 디버깅을 위해 존재하는 객체로, console의 함수를 이용하면 크롬 개발자도구의 콘솔창에 여러 정보를 출력할 수 있다. Console 객체 내부에 존재하는 함수들에 대해서 설명하도록 하겠다. 우선 가장 많이 사용하는 log 함수부터 설명하겠다. console.log() log 함수는 가장 일반적으로 사용하는 함수로 자바스크립트 객체를 콘솔창에 출력하는 함수이다. 주로 문자열을 출력하는데 자주 사용되며 예제는 다음과 같다. 예제는 크롬 개발자도구의 콘솔창을 이용하여 구현하였다. 다음과 같이 console.log 함수에 전달한 문자열이 콘솔창에 출력된다. 마지막에 < undefined이 뜨는 이유는 콘솔창에서 특정 함수를 ..

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

여기서부터는 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..

공룡 점프 게임은 리액트만 이용하여 구현하였다. 작성한 파일은 다음과 같다. package.json { "name": "react-app", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node server.js", "dev": "webpack-dev-server --hot", "build": "webpack" }, "author": "", "license": "ISC", "devDependencies": { "@babel/core": "^7.7.4", "@babel/plugin-proposal-class-properties": "^7.7.4", "@babel/preset-env": "^7.7.4", "..

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

마지막으로 수정하고 API와 리액트 앱을 배포하고 마무리한다. 기간 프로젝트 개발 기간 : 2019년 11월 1일 ~ 2019년 11월 15일 (2주) 블로그 정리 기간 : 2019년 12월 15일 ~2020년 1월 1일 (2주) 클라이언트 배포 링크 https://jb-mnist-client.herokuapp.com/ Mnist jb-mnist-client.herokuapp.com 서버 배포 링크 https://jb-mnist-server.herokuapp.com/ https://jb-mnist-server.herokuapp.com/ jb-mnist-server.herokuapp.com 클라이언트 소스 https://github.com/Jongbeom2/mnist-client Jongbeom2/mnis..