gaki gaki

React-Redux 의 API, Hooks 1. Provider React Redux includes a component, which makes the Redux store available to the rest of your app Provider 는 stroe 에 접근해 state 를 사용 할 수 있게 해준다. / 앱 최상단을 감싸는 부모컴포넌트이다. import React from 'react' import ReactDOM from 'react-dom' import { Provider } from 'react-redux' import store from './store' import App from './App' const rootElement = document.getElementById('r..

-p5.js 사용법 p5.js 는 index.html 에 p5.js 파일 script 를 import 한 후 사용할 수 있다. (리액트에서는 p5-react.js 를 사용한다.) p5.js 의 기본 화면 생성코드는 다음과 같다. function setup() { createCanvas(400, 400); } function draw() { background(220); } p5.js 는 setup 함수와 draw 함수가 필수 함수이다. setup 함수는 말그대로 처음 브라우저가 load 되었을때 init 되는 함수이고, draw 함수는 requestAnimationFrame() 함수와 같이, 1초당 60번씩 지속적으로 실행되는 애니메이션 드로잉 함수이다. -p5.js 의 도형 그리기 함수들 p5.js 의..

-p5.js 사용법 p5.js 는 index.html 에 p5.js 파일 script 를 import 한 후 사용할 수 있다. (리액트에서는 p5-react.js 를 사용한다.) p5.js 의 기본 화면 생성코드는 다음과 같다. function setup() { createCanvas(400, 400); } function draw() { background(220); } p5.js 는 setup 함수와 draw 함수가 필수 함수이다. setup 함수는 말그대로 처음 브라우저가 load 되었을때 init 되는 함수이고, draw 함수는 requestAnimationFrame() 함수와 같이, 1초당 60번씩 지속적으로 실행되는 애니메이션 드로잉 함수이다. -p5.js 의 도형 그리기 함수들 p5.js 의..

리액트의 동작 원리 리액트는 state, view, action 으로 구성됩니다. 리액트는 현재 state 를 기준으로 UI 를 렌더링합니다. 특정 이벤트로 인해서 action 이 발생하여 state 가 변경되면 UI 는 리랜더링 되어서 변경된 state 를 기준으로 새로운 view 를 보여줍니다. React 는 어떻게 state 가 변경되었다는걸 알아낼까요? 이전 state 와 변경 후의 state 를 빠르게 비교하는게 성능상의 이점을 가져옵니다. 그래서 React 는 Obejct.is(prevState, newState) 를 활용하여 state 의 변경상태를 알아냅니다. 이것이 React 에서 불변성이 중요한 이유입니다. 예를들어 { number : 13, age : 24} 라는 state 가 있다고..

100일 동안 매일 알고리즘을 하면? - 12일차 https://programmers.co.kr/learn/courses/30/lessons/42862 코딩테스트 연습 - 체육복 점심시간에 도둑이 들어, 일부 학생이 체육복을 도난당했습니다. 다행히 여벌 체육복이 있는 학생이 이들에게 체육복을 빌려주려 합니다. 학생들의 번호는 체격 순으로 매겨져 있어, 바로 앞번 programmers.co.kr

일주일에 4번 2시간씩 프로젝트를 하는데 요즘 너무 바빠서 블로그에 글을 올린건 오랜만인것같다. 지금 팀생성 페이지에서 꾸밈요소를 좀 만들고싶어서 p5.js 를 사용해서 광고판을 만들고있다. 이렇게 오렌지색 구슬 사이에 풋볼러브라고 글자가 자동으로 써지게끔 만들고있다. 이를 위해서 글자가 써지는 위치의 좌표를 얻어야하는데 처음에는, 노가다로 계산할까 했다가 생각해보니 좌표를 얻을 수 있는 방법이 있어서 그 방법을 사용했다. const mouseReleased = () => { console.log("mouseRelease"); console.log(JSON.stringify(xPos)); console.log(JSON.stringify(yPos)); }; const mouseDragged = (p) =>..

https://programmers.co.kr/learn/courses/30/lessons/42584 코딩테스트 연습 - 주식가격 초 단위로 기록된 주식가격이 담긴 배열 prices가 매개변수로 주어질 때, 가격이 떨어지지 않은 기간은 몇 초인지를 return 하도록 solution 함수를 완성하세요. 제한사항 prices의 각 가격은 1 이상 10,00 programmers.co.kr 수학으로 풀었다. 약간 수학적 귀납법, DP 느낌으로 푼것같은데 이게 직관적인 풀이는 아닌것같긴하다. 다른 사람들의 코드를 보니깐 다 고만고만한데, 다들 시간복잡도 O(N^2) 으로 풀었다. 내 코드 또한 O(N^2) 이긴한데 break 문 덕분에 시간초과가 안난듯하다. def solution(prices): ret = ..