전체 글119 SyntheticEvent and throttle 탁구 게임에서 paddle(탁구채)의 위치를 canvas의 onMouseMove 이벤트를 통해 서버에 반영하려고 했다. 그러던 와중에 onMouseMove의 event.currentTarget에서 신기한 현상을 발견했다. 아래 동영상은 다음 코드를 출력한 동영상이다. console.log(3, event.currentTarget); 보이는가... null이었다가 어느 순간 currentTarget이 생겨난다. (아래 사진은 event만 출력했을 때 사진이다.) 아래는 사용하고있는 react 버전이다. "react": "^17.0.2", "react-dom": "^17.0.2", 우선, currentTarget이 존재하다가 null이 된 것이 아니고, null이었다가 currentTarget이 존재하게 되.. 2021. 8. 7. ReactElement.js ReactElement.js 파일을 분석해 보자. hasValidRef function hasValidRef(config) { if (process.env.NODE_ENV !== 'production') { if (hasOwnProperty.call(config, 'ref')) { var getter = Object.getOwnPropertyDescriptor(config, 'ref').get; if (getter && getter.isReactWarning) { return false; } } } return config.ref !== undefined; } React Element가 생성될 때, defineRefPropWarning가 호출되기 때문에, React Develop mode에서 props가.. 2021. 8. 4. Factory Method Pattern ReactElement.js를 보다가 주석에서 Factory method를 보았다. Factory method(Virtual Constructor)는 무엇인가? // ReactElement.js ("react": "^15.4.2") /** * Factory method to create a new React element. This no longer adheres to * the class pattern, so do not use new to call it. Also, no instanceof check * will work. Instead test $$typeof field against Symbol.for('react.element') to check * if something is a React E.. 2021. 8. 4. 디자인 패턴 사이트 모음 하나하나씩 공부해보자. https://refactoring.guru/design-patterns/what-is-pattern What’s a design pattern? What’s a design pattern? Design patterns are typical solutions to commonly occurring problems in software design. They are like pre-made blueprints that you can customize to solve a recurring design problem in your code. You can’t just find a pattern a refactoring.guru https://sourcemaking.com/design_p.. 2021. 8. 4. 다트 게임 알고리즘도 풀어보자. https://programmers.co.kr/learn/courses/30/lessons/17682?language=javascript 코딩테스트 연습 - [1차] 다트 게임 programmers.co.kr const bonusType = { S: (x)=>x, D: (x)=>Math.pow(x, 2), T: (x)=>Math.pow(x, 3), } const pointType = { '*': 2, '#': -1 } function solution(dartResult) { const scores = dartResult.split(/\D/).filter((score) => score !== ""); const bonus = dartResult.split(/\d/).filter((x).. 2021. 8. 4. Single Source of Truth 정보의 중복, 비정합성 등의 문제를 해결하고자 나온 이론. 아래 예시를 보자. 홈페이지를 만든다. About 페이지에서 네비게이션 기능이 필요해서 만들었다. Category 페이지에 네비게이션 기능이 없어서 About 페이지에 있는 네비게이션 소스를 복사 붙여넣기 했다. 위의 예시는 Single Source of Truth를 위배된다. 네비게이션 소스 코드의 중복이 발생 했기 때문이다. 만약, 네비게이션에 기능이 추가가 된다고하면, About과 Category 페이지에 있는 네비게이션 소스를 모두 수정해야한다. 홈페이지를 만든다. About 페이지에서 네비게이션 기능이 필요해서 만들었다. 또한, 이후 재사용성을 고려해 네비게이션 코드를 모듈로 만들었다. Category 페이지에 네비게이션 기능이 없어서 .. 2021. 8. 3. 이전 1 ··· 6 7 8 9 10 11 12 ··· 20 다음
