전체 글90 [Vanilla-JS] 4. 2D Context Context라는건 요소 안에서 우리가 픽셀에 접근할 수 있는 방법이다. canvas는 context를 갖고 있는 HTML의 요소인데, 우리는 그 요소 안에서 픽셀을 다루는것이다. const ctx = canvas.getContext("2d"); context의 default를 설정할거다. context는 fillColor를 가지고 있다. (fillStyle 색상이나 스타일을 shape안에 사용할 수 있다.) 이걸 사용하려는 사람이 저 색상을 첫 번째로 시작하도록 설정한거다. 우리가 그릴 선들이(context 안에 있는) 모두 이 색을 갖는다고 말해주는것. 이게 context의 lineWidth이다. (기억해둬야됨) lineWidth = 2.5 는 그 선의 너비가 2.5px 이라는 것. onMouseUp.. 2020. 8. 17. [생활코딩] React - 이벤트 state props 그리고 render 함수 리스트의 각각 링크에는 이벤트를 설치할거다. 일단 state설정부터 해보자. 현재 우리가 보고 있는 페이지가 웰컴 페이지인지, 읽기 페이지인지 구분하기 위해서 state에 mode라는 값을 줄거다. 리액트에서는 state의 값이 바뀌면 그 state를 가지고 있는 컴퍼넌트에 render함수가 다시 호출된다. 다시 호출됨에 따라서 그 render함수 하위에 있는 컴퍼넌트들도 render함수가 있는데 각각 싹 호출이 된다. (화면이 다시 그려지는것) render가 하는 역할은 어떤 html을 그릴것인가를 결정한다. 그래서 props나 state가 바뀌면 화면이 다시 그려진다. 모드의 값에 따라서 만들어지는 랜더링 결과가 달라지게 조건문을 사용해보겠다. 모드가 read라면? ※ 본 포스팅은 개인 공부 기록을 .. 2020. 8. 15. [생활코딩] React -Component 파일로 분리하기 / State / key 한 개의 파일안에 컴퍼넌트가 1000개라면 얼마나 복잡할까? 그리고 다른 파일에서 해당 컴퍼넌트를 가져다 쓰는것도 어렵다. 그래서 컴포넌트를 각각의 파일로 정리해보겠다. TOC.js안에 여러가지 변수나 함수들이 존재할수가 있다. 그러면 그 많은것들 중에서 어떤것을 외부에서 사용할 수 있게 허용할것인지 코드를 통해서 작성할 수 있다. 그게 export default TOC; state 개념은 props와 같이 살펴봐야된다. 제품을 만드는 사람들은 제품의 내부적인 구현을 위해서 다양한 상태를 사용하고, 다양한 내부적 조작장치, 매커니즘을 가지고 있다. 비유적으로 이야기하자면 그게 state이다. props는 사용자가 컴퍼넌트를 사용하는 입장에서 중요하고, state는 그 props의 값에 따라서 내부의 구현.. 2020. 8. 14. [생활코딩] React - props / React Developer Tools 여기서 Subject태그는 항상 같은 결과만 보여준다. 그래서 아래처럼 속성을 통해서 재사용성을 높이고 싶을거다. 리액트에서는 그 속성을 props라고 부른다. 현재의 상태를 알아내는 도구를 살펴보자. 이렇게 html 코드 말고 컴포넌트상의 코드를 보고싶을때가 있을거다. 그리고 값을 실시간으로 바꿀수도 있다. 이 도구를 이용함으로써 우리의 현재 문제점을 확인할 수 있게 되었다. ※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다. 2020. 8. 14. 이전 1 ··· 3 4 5 6 7 8 9 ··· 23 다음
