png 파일 색 변경하는 방법

혁명이다. 이건.. 비상.. flaticon 에서 아이콘을 받았지만 정작 필요한 회색은 없었다. 그래서 포토샵으로 바꿔야하나 싶었는데 , 포토샵을 설치해야되서 그러고 싶진 않았다. https://codepen.io/sosuke/pen/Pjoqqp CSS filter generator to convert from black to target hex color Added License 2022-07-15; this is retroactive for whatever help that is. 0-clause Free BSD License Permission to use, copy, modify, and/or distribute... codepen.io 위 코드펜으로 들어가서 다음 input 에 원하는 색상을 입..

조금의 sass 그리고 css module

https://codesandbox.io/s/pedantic-darwin-jvgioy?file=/src/styles.module.scss pedantic-darwin-jvgioy - CodeSandbox pedantic-darwin-jvgioy by ehddud1006 using node-sass, react, react-dom, react-scripts, styled-components codesandbox.io sass 에 대해 조금 배웠다. 변수를 선언할수도 있고, if문 for 모두 사용할 수 있었다. 가장 와닿았던 것은 mixin 기능인데 다음처럼 sample 이라는 mixin 을 만들면 재사용이 가능하게끔 만들어져있다. @content 를 추가하면 @include 한 class 에서 css 를..

[웹 게임을 만들며 배우는 React] 6장

반복문을 기점으로 컴포넌트를 쪼개기 render() { const { winBalls, bonus, redo } = this.state; return ( 당첨 숫자 {winBalls.map((v) => )} 보너스! {bonus && } {redo && 한 번 더!} ); } setTimeout을 배열에 넣어서 한꺼번에 unmount runTimeouts = () => { console.log('runTimeouts'); const { winNumbers } = this.state; for (let i = 0; i { this.setState((prevState) => { return..

[웹 게임을 만들며 배우는 React] 5장

클래스 컴포넌트의 라이프 사이클 componentDidMount (처음 렌더가 실행되고 componentDidMount 가 실행된다.) componentDidUpdate (리렌더가 발생하고 실행된다.) componentWillUnMoun (컴포넌트가 제거되기 직전에 실행된다.) constructor -> 렌더링 -> ref -> componentDidMount -> (setState/props 바뀔때)-> shouldComponentUpdate -> render -> componentDidUpdate // 부모가 나를 없앴을 때 -> componentWillUnmount -> 소멸 Closure 문제 비동기 함수인 setInterval 안에서 비동기 함수 밖에 있는 변수를 참조하면 Closure 가 발생..

[웹 게임을 만들며 배우는 React] 4장

4장에서 다시한번 상기시키면 좋을 것은 다음과 같다. import React, { useState, useRef, useCallback, useMemo } from 'react'; const ResponseCheck = () => { const [state, setState] = useState('waiting'); const [message, setMessage] = useState('클릭해서 시작하세요.'); const [result, setResult] = useState([]); const timeout = useRef(null); const startTime = useRef(0); const endTime = useRef(0); const onClickScreen = useCallback(() ..

[웹 게임을 만들며 배우는 React] 3장

import , require const React = require('react'); import React from 'react'; module.exports = NumberBaseball export default NumberBaseball; // export default 차이 export const hello = 'hello'; // import {hello} from './[파일경로]' export default NumberBaseball; // import NumberBaseball from './[파일경로]' // default 는 한번만 사용가능 Key 에 index 를 써도 되는 경우는 요소가 추가만 되는 경우이다. 복잡하고 긴 부분 컴포넌트로 따로 빼기 전체코드 더보기 import R..

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

웹팩 설정하다 만난 오류이다. arrow function 이랑 class 의 차이 때문에 발생한 것 같은데, 문제를 찾는데 오래걸렸다. 아래는 웹팩의 전체코드이다. const path = require("path"); // path는 node 에서 기본적으로 제공하는 모듈 const webpack = require("webpack"); const RefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin"); module.exports = { name: "wordRelay-setting", mode: "development", // 실서비스: production devtool: "eval", resolve: { extensions: [".j..

[웹 게임을 만들며 배우는 React] 2장

className 리액트를 사용하면서 처럼 className 으로 css class이름을 정해주곤 했다. 왜 그런지 이유를 알게 되어 기록한다. className 인 이유는 class 로 할경우 자바스크립트 class 와 중복되기 때문에 className 으로 정해진 것이고, 비슷하게 for 속성도 htmlFor 로 정해졌다. 웹팩 설정 npm init npm i react react-dom npm i -D webpack webpack-cli 우선 WordRelay.jsx 파일을 만들어주었다. const React = require("react"); const { Component } = React; class WordRelay extends Compnent { state = {}; render() {}..

[웹 게임을 만들며 배우는 React] 1장

1. 가장 근본적인 코드 2. Babel + JSX 위 코드를 보면 다음처럼 바벨 cdn 을 추가해준 모습이다. 왜 바벨을 추가해줬어야했을까? 그 이유는 자바스크립트 코드에서 JSX 문법을 해석할 수 없기 때문이다. 즉 해석을 하려면 바벨이 필요하다. cdn 으로 바벨을 추가해주고 script의 type을 다음과 같이 설정해준다. button onClick 에서 this.onClickButton 을 사용하기 위해서는 다음처럼 바인딩이 필요하다. this.onClickButton = this.onClickButton.bind(this); 3-2. Constructor 를 안쓰는 방법 다음처럼 화살표 함수를 사용해서 constructor 를 쓰지 않고도 this.onClickButton을 사용할 수 있게 된..

javascript super

문제 정의 아래와 같은 class 가 있을때 나는 Person 을 상속해서 PersonPlus 라는 class 를 만들고 싶다. class Person{ constructor(name, first, second){ this.name = name; this.first = first; this.second = second; } sum(){ return this.first+this.second; } } 만약 PersonPlus의 constructor 에 third 라는 세번째 값을 추가 하고 싶다면 어떻게 해야할까? 다음처럼 상속없이 그냥 constructor 의 this 에 넣어주는 방법이 있을 것이다. 하지만 상속을 사용하면 코드를 재사용 할 수 있게된다. class PersonPlus{ construct..