전체 글90 [생활코딩] React - 컴포넌트 이벤트 만들기 태그에 이벤트를 직접 만들어서 그 태그, 컴퍼넌트를 사용하는 사람들이 이벤트 프로그래밍을 할 수 있도록 하는 방법이 있다. (이벤트의 소비자가 아닌 생성자) 다시 원래대로 돌려놓고 이 subject라고 하는 컴퍼넌트는 onChangePage라는 이벤트가 있어서 이 컴퍼넌트 안에서 링크를 클릭했을 때 이벤트에 설치한 함수를 호출하도록 만들것이다. onChangePage 함수는 어떤 형태로 subject로 전달될까? 바로 props 실행됐을 때 첫 번째 인자로 이벤트 객체가 전달되는데, 그 객체에 preventDefault()를 실행해서 페이지가 새로고침 되는것을 방지한다. WEB을 클릭해보면 아래 코드와 같이 경고창이 잘 뜬다. 경고창이 뜨도록 만든 부분의 코드를 아래와 같이 수정해보자. 그러면 클릭시 m.. 2020. 8. 20. [Vanilla-JS] 7. Saving the Image 이미지를 우클릭하면 아래와 같이 저장이 가능하다. canvas는 pixel을 다루는 거니까 기본적으로 image를 만든다. 그래서 download와 save파트는 이미 내장되어 있다. 하지만 아래와 같이 저장했을 때 버그가 있다. canvas의 배경색이 transparent(투명)로 저장이 된다. canvas의 배경색을 설정하지 않아서 실제 pixel manipulator canvas에 background를 설정하지 않았다. ( HTML 의 background만 설정한거다.) 그래서 canvas가 load 되자마자 설정되도록 해야된다. fillStyle을 black으로 만들기 전에 이렇게 설정을 하면 기본적으로 canvas의 background는 default에 의해서 하얀 배경이 되는거다. 이러한 co.. 2020. 8. 20. [Vanilla-JS] 6. Filling Mode fillRect() : width와 height에 의해서 결정된 사이즈로 (x, y)위치에 색칠된 사각형을 그린다. 캔버스에서는 위에서부터 아래로 내려오면서 실행이 된다. 색상을 클릭하면 strokeStyle과 fillStyle을 color값으로 설정해주는 거다. 기본 색상값도 설정해놓겠다. 클릭 시 사격형이 만들어지게 하는 함수를 만들어보자. 하지만 색을 채우고 painting을 하면 paiting한 색으로 채워지는 문제점이 발생한다. 그래서 filling variable이 필요하다. filling이 true 상태에서만 색이 채워지도록 만들었다. ※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다. 2020. 8. 20. [Hooks] 3. useInput 앞으로 만들게 될 hooks들의 다른점을 살펴보는 건 꽤 가치 있는 일이 될거다. 처음으로 다뤄볼 hooks는 useInput이다. useInput은 기본적으로 input을 업데이트 한다. 우선 초깃값을 받을거다. Mr.를 내 이름의 기본값으로 설정하자. 우리는 어떤 변화를 주기 전에, 이 기본값(Mr.)을 value와 함께 return하고 싶다. useInput은 value를 return 할거고 이제 name은 value랑 같아지고, 그런 다음 value는 name.value를 갖게 된다. Mr. 라는 값을 initialValue로 받아서 useState의 initalValue로 전달돼서 value로 잘 갈거다. onChange 함수를 만들어보자. 값을 입력하면 console.log에 아래와 같이 출력.. 2020. 8. 18. 이전 1 2 3 4 5 6 7 ··· 23 다음
