KEEP CODING

캔버스에 마우스로 그림을 그리기 위해서는 mousemove event를 이용해줘야 한다. 과정 마우스로 그림을 그리는 과정을 생각하면 다음과 같다. 1. 마우스를 원하는 곳으로 이동시킨다. 2. 클릭한다. 3. 클릭한 채로 그림을 그린다. 4. 클릭을 뗀다. mousemove event 위의 과정과 관련된 이벤트들은 다음과 같다. mousedown 마우스 버튼을 누를 때 발생한다 mouseup 마우스 버튼을 뗄 때 발생한다 mousemove 마우스를 움직일 때 발생한다 mouseout 마우스를 해당 element 밖에서 안으로 이동시킬 때 발생한다 (mouseover) (마우스를 해당 element 안에서 밖으로 이동시킬 때 발생한다) 1 2 3 4 5 6 7 8 9 10 11 // mouse event..

Canvas는 Javascript를 이용해 원하는대로 그림을 그릴 수 있는 API이다. 보통 직사각형의 캔버스를 사용하는데, 특이한 모양의 캔버스를 만들고 싶어서 찾아보았다. 캔버스 만들기 1 2 3 4 5 6 7 8 9 const canvas = document.getElementById("canvas"); canvas.width = 300; canvas.height = 300; canvas.style.border = "1px solid black"; Colored by Color Scripter cs 300px*300px 크기의 캔버스를 화면에 만들고, 검은색 테두리로 캔버스를 구분할 수 있도록 한다. 원하는 모양 그리기 직사각형 직사각형 모양은 정해진 메소드로 쉽게 그릴 수 있다. 색칠된 직사각형 ..

복사하기 위해서는 두 가지 과정이 필요하다. 1. 복사할 내용 선택 2. 복사 1번에서 텍스트를 선택하는 .select()의 경우, textarea나 input과 같은 form 엘리먼트에서만 사용이 가능하다. 즉, textarea나 input을 사용하지 않는 경우 .select()를 사용해 문자를 선택할 수 없다. 선택할 내용이 다른 곳(div, span, p 등)에 있는 경우는 다른 방법을 사용해야 한다. execCommand를 사용한 복사 execCommand를 사용해 복사하기 위해서는 아래와 같은 과정을 거쳐야한다. 1. document에 .select()가 가능한 element 생성 2. 1번에 복사할 내용을 입력한다 3. .select()를 사용해 복사할 내용을 선택한다 4. 클립보드로 복사한다..

목차 다이어리에 대한 정보들을 JSON 데이터로 저장하려고 하니 생각보다 번거로웠다. 아예 python으로 스크래핑 할까 하다가... 어차피 tag정보는 상세정보 안의 jpg파일에 설명되어 있기 때문에 사람이 보고 확인하는 수 밖에 없었다. 그래서 조금이라도 쉽게 저장하기 위해 원하는 형식으로 정보를 만들어주는 양식을 만들었다. 위의 form을 작성한 후 Convert Info to Data 버튼을 누르면 아래에 JSON양식의 데이터가 나온다. COPY버튼을 눌러 쉽게 복사할 수 있다. HTML 구조 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 4..

우연히 state와 불변성에 대해 생각해보게 됐다. 분명히 같은 기능인데 handleDelBtn을 통해서는 변화가 바로 적용되고, handleAddBtn으로 전달한 키워드는 바로 업데이트 되지 않았다. 1 2 3 4 5 6 7 8 9 10 11 12 13 // DeleteBtn function handleDelBtn(e) { let id = e.target.id; keywords = keywords.filter(keyword => keyword !== id); props.onClick(keywords); } // AddBtn function handleAddBtn(e){ let id = e.target.id; keywords.push(id); props.onClick(keywords); } Colored..

State 끌어올리기 React에서는 기본적으로 하향식 데이터 흐름을 추천한다. 상위 컴포넌트에서 state를 관리하고, 하위 컴포넌트에서는 전달된 props를 처리하도록 한다. 그런데 동일한 데이터를 여러 컴포넌트에서 사용하고, 변경됐을 때 바로 반영되어야 한다면 공통된 상위 컴포넌트에서 state를 처리하고, 하위 컴포넌트에서는 상위로 전달하는 방법을 사용해야 한다. React에서는 이 방법을 state 끌어올리기라고 한다. 내가 React로 만든 component들은 아래와 같았다. 선택된 키워드를 모든 컴포넌트에서 공유해야 했다. 처음에는 여러 컴포넌트에 useState로 selectedKeywords를 정의해줬다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ..

만들다가 여러 컴포넌트에서 동일한 키워드를 공유하기 위해 최상위 컴포넌트에서 keyword 목록을 관리하게 됐다. 최종 형태는 이 글에서 확인할 수 있고, 아래 글은 참고하면 좋을 것 같다. https://joylee-developer.tistory.com/125 React - State 끌어올리기 State 끌어올리기 React에서는 기본적으로 하향식 데이터 흐름을 추천한다. 상위 컴포넌트에서 state를 관리하고, 하위 컴포넌트에서는 전달된 props를 처리하도록 한다. 그런데 동일한 데이터를 여 joylee-developer.tistory.com 위 사진에서 모든 부분이 Category 컴포넌트에 속해 있었는데 아래쪽의 SelectedKeywordLists를 따로 분리했다. 아래 그림처럼 다이어리 ..

만들다가 여러 컴포넌트에서 동일한 키워드를 공유하기 위해 최상위 컴포넌트에서 keyword 목록을 관리하게 됐다. 최종 형태는 이 글에서 확인할 수 있고, 아래 글은 참고하면 좋을 것 같다. https://joylee-developer.tistory.com/125 React - State 끌어올리기 State 끌어올리기 React에서는 기본적으로 하향식 데이터 흐름을 추천한다. 상위 컴포넌트에서 state를 관리하고, 하위 컴포넌트에서는 전달된 props를 처리하도록 한다. 그런데 동일한 데이터를 여 joylee-developer.tistory.com 카테고리 관련 기능 추가 - Reset버튼을 만들어 한꺼번에 목록이 사라지도록 한다. - 선택한 키워드를 아래에 보여주고, 그 목록에서도 선택해서 삭제할 ..

만들다가 여러 컴포넌트에서 동일한 키워드를 공유하기 위해 최상위 컴포넌트에서 keyword 목록을 관리하게 됐다. 최종 형태는 이 글에서 확인할 수 있고, 아래 글은 참고하면 좋을 것 같다. https://joylee-developer.tistory.com/125 React - State 끌어올리기 State 끌어올리기 React에서는 기본적으로 하향식 데이터 흐름을 추천한다. 상위 컴포넌트에서 state를 관리하고, 하위 컴포넌트에서는 전달된 props를 처리하도록 한다. 그런데 동일한 데이터를 여 joylee-developer.tistory.com 키워드에 대한 내용은 Category에서 관리하고, selectedKeyword라는 array를 만들어 array만 App에 전달하도록 했다. input에..

useEffect 에서 dependency 문제 React Hook useEffect has a missing dependency: 'props'. Either include it or remove the dependency array. However, 'props' will change when *any* prop changes, so the preferred fix is to destructure the 'props' object outside of the useEffect call and refer to those specific props inside useEffect react-hooks/exhaustive-deps useEffect(() => { // selectedKeyword 가 변할 때 ..