리액트 환경에서 어떤 디자인 시스템을 적용해야 하는가에 대한 고민을 담았습니다.
react state에 관하여
리액트의 state에 대해 알아보자
Scope
스코프에 대해서 알아보자
Callback hell 탈출기
Promise와 Async로 Callback Hell을 탈출해보자
Function declared in a loop contains unsafe references to variable(s)
문제상황 run = (timeout: number) => new Promise<void>((resolve) => { let direction = 'r'; const todos = []; for (let i = 0; i < 15; i += 1) { if (i === 6) direction = 'l'; if (i === 10) direction = 'r'; todos.push(() => { this.dragonBGmove(`${direction + 4}`, timeout); }); todos.push(() => { this.dragonBGmove(`${direction + 3}`, timeout); }); } resolve(); }); 7,8번째 줄에서 다음과 같은 에러가 뜬다. Function...
var vs let
공통점 박스 선언 둘다 어떤 값을 넣기 위한 박스를 만드는데 사용된다. 함수 안에서 밖을 참조 함수 밖에있는 값들을 함수 안에서 참조할 수 있다. var outVar = 100; function test1() { console.log(outVar); } test1(); // 100 let outLet = 200; function test2() { console.log(outLet); } test2(); // 200 함수 안에 함수가 있어도 마찬가지이다. function outside() { var myVar = 100; let myLet = 200; function inside() { console.log(myVar); // 100 console.log(myLet); // 200 } inside(); }...
new 작동 방식
function Person(saying) { this.saying = saying; } Person.prototype.talk = function() { console.log(this.saying); } var me = new Person("안녕하세요 저는 윤병인입니다"); me.talk(); // "안녕하세요 저는 윤병인입니다" new Person("안녕하세요 저는 윤병인입니다");에서 무슨 일이 일어난걸까? customNew new의 작동방식을 이해하기 위해서 new 연산자와 비슷한 일을 하는 customNew를 구현해보자. function customNew(constructor) { var obj = {}; // 1. 빈 오브젝트를 만든다 Object.setPrototypeOf(obj...
Webpack 이미지 경로 처리
참고 : 현재상황 파일 구조 style.scss #page { overflow: hidden; .bg{ background:url('./assets/bg.png') no-repeat; overflow:hidden; } .... webpack.config.js const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = require('clean-webpack-plugin'); const join = require('path').join; module.exports = { entry:...
Module not found: Error: Can’t resolve ‘./keyboard’ in ‘..\Desktop\tetris\src’
문제상황 keyboard.ts파일에 Keyboard class를 만들고, export했다. main.ts파일에서 keyboard.ts파일을 import했는데 다음과 같은 에러가 나왔다. Module not found: Error: Can't resolve './keyboard' in 'C:\Users\W24946\Desktop\tetris\src' 내 코드 keyboard.ts class Keyboard { ..... } export default Keyboard main.ts import './style.css'; import Keyboard from './keyboard'; const a = new Keyboard(); 해결방안 찾기 webpack.config.js 파일에 문제가? webpack에서...
code ELIFECYCLE errno 1
문제상황 typescript와 webpack을 같이 사용하려고 했다. webpack, webpack-cli, webpack-dev-server를 devDependencies로 깔고 typescript는 global로 깔았다. 근데 build해보니까 아래와 같은 에러가 났다. ./src/main.ts 1.01 KiB [built] [code generated] 1 ERROR in child compilations webpack 5.4.0 compiled with 1 error in 1919 ms npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! tetris@1.0.0 build: `webpack` npm ERR! Exit status 1 npm ERR! npm ERR...