까막눈코딩

Intersection Observer는 타겟 요소와 상위 요소(또는 뷰포트) 사이의 변화를 비동기적으로 관찰하는 방법이다. MDN의 예시를 참조하여 사용 방법을 익혀 보고자 한다. 1. HTML Welcome to The Box! 2. CSS #box { background-color: rgba(40, 40, 190, 255); border: 4px solid rgb(20, 20, 120); transition: background-color 1s, border 1s; width: 350px; height: 350px; display: flex; align-items: center; justify-content: center; padding: 20px; } .vertical { color: white;..

Knowledge/Javascript 2021. 11. 5. 10:22

1초에 하나씩 번호를 뽑아 보여 주는 프로그램이다. 1. Class import React, { Component } from "react"; import Ball from "./Ball"; function getWinNumbers() { console.log("getWinNumbers"); const candidate = Array(45) .fill() .map((v, i) => i + 1); const shuffle = []; while (candidate.length > 0) { shuffle.push( candidate.splice(Math.floor(Math.random() * candidate.length), 1)[0] ); } const bonusNumber = shuffle[shuffle...

Knowledge/React.js 2021. 8. 1. 16:09

컴퓨터와 가위바위보를 해서 점수를 누적해 나가는 게임이다. 1. Class import React, { Component } from "react"; const rspCoords = { 바위: "0", 가위: "-142px", 보: "-284px", }; const scores = { 가위: 1, 바위: 0, 보: -1, }; const computerChoice = (imgCoord) => { return Object.entries(rspCoords).find(function (v) { return v[1] === imgCoord; })[0]; }; class RSPClass extends Component { state = { result: "", imgCoord: rspCoords.바위, score..

Knowledge/React.js 2021. 7. 27. 10:37

1. 반응 속도 체크 빨간색 상자가 초록색으로 변한 뒤 클릭하면, 색깔 변화와 클릭 사이의 시간을 체크하는 게임이다. 2. Class import React, { Component } from "react"; class ResponseCheckClass extends Component { state = { state: "waiting", message: "클릭해서 시작하세요.", result: [], }; timeout; startTime; endTime; onClickScreen = () => { const { state } = this.state; if (state === "waiting") { this.setState({ state: "ready", message: "초록색이 되면 클릭하세요." }..

Knowledge/React.js 2021. 7. 25. 16:50

1. Number Baseball 무작위로 주어진 네 개의 숫자를 순서를 포함하여 맞추는 게임이다. 숫자의 자리와 값을 맞추면 스트라이크(?), 값은 맞췄으나 자리가 틀린 경우에는 볼이 된다. 총 10회의 기회 안에 맞추면 된다. 2. NumberBaseball.jsx import React, { Component } from "react"; import Try from "./Try"; function getNumbers() { const candidate = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const array = []; for (let i = 0; i < 4; i++) { const chosen = candidate.splice(Math.floor(Math.random() * (9..

Knowledge/React.js 2021. 7. 23. 21:23

1. Webpack 웹팩은 여러 개의 .js, .jsx 파일을 하나의 .js 파일로 만들어 주는 역할을 한다. 웹팩의 설치 방법은 다음과 같다. npm init 해당 폴더에서 npm을 실행시킨다. name, author, license 등을 적당히 입력하면 package.json 파일이 생성된다. 다시 npm을 통해 필요한 패키지를 설치하면 package.json이 업데이트된다. npm i react react-dom react와 react-dom을 설치한다. npm i -D webpack-cli webpack-cli를 설치하되, D 옵션(devDependencies)을 통해 개발 시에만 이를 사용하고, 실제 배포 시에는 사용하지 않는다는 옵션을 추가한다. 이렇게 react, react-dom, webp..

Knowledge/React.js 2021. 7. 19. 23:45

1. Functional Component 함수형 컴포넌트는 초기에, state나 ref를 쓰지 않는 경우에 사용되었다. 그러나 이제는 함수형 컴포넌트에서도 state와 ref를 사용할 수 있게 되었는데, 이것이 Hooks이다. 클래스형 컴포넌트로 만든 구구단 게임을 함수형 컴포넌트로 리팩토링했다. const [first, setFirst] = React.useState(Math.ceil(Math.random() * 9)); const [second, setSecond] = React.useState( Math.ceil(Math.random() * 9) ); const [value, setValue] = React.useState(""); const [result, setResult] = React.us..

Knowledge/React.js 2021. 7. 19. 17:31

1. Multiplication Game 랜덤으로 두 개의 숫자를 전달하고, 사용자로부터 숫자를 입력받아 곱셈이 맞는지를 체크한 뒤 '정답' 혹은 '땡'을 출력하는 게임(...)이다. 2. React Code 이를 constructor, render, onSubmit으로 나누어 보면 아래와 같다. constructor(props) { super(props); this.state = { first: Math.ceil(Math.random() * 9), second: Math.ceil(Math.random() * 9), value: "", display: "", result: "", }; } 컴포넌트의 constructor에 this.state 객체를 생성하고, 바뀔 여지가 있는 것들을 state로 설정하여..

Knowledge/React.js 2021. 7. 8. 17:32