반응형 📍 Front-End72 [JavaScript30/Day-9] Dev Tools Domination console 찍을 때 유용한 함수들 알아보는 문제인 것 같다 .. 문제라기보다 console 로그에 대해 알아보는 시간..! 2021. 7. 22. [TypeScript/타입스크립트] tsconfing.json에 대해 알아보자 .. 🧐 tsconfig.json 파일 생성 tsc --init tsconfig.json 파헤치기! 😵💫 루트 디렉터리 지정 //before "rootDir": "./", //after -> src 폴더의 상위 디렉토리에서는 .ts 파일 생성 불가 "rootDir": "./src", js파일로 컴파일된 ts파일의 디렉터리 지정을 하려면! //befor "outDir": "./", //after -> 현재 디렉토리에 build 디렉토리를 생성! "outDir": "./build", 브라우저에서 디버깅할 때 필요한 옵션 true로 설정하면 컴파일 시 IDE에 .map 파일이 생성되고 브라우저에서 ts 파일을 확인할 수 있다 "sourceMap": true, 2021. 7. 21. [자바스크립트] 마우스 이벤트(mouse event)의 종류 1. click 해당 요소에서 마우스를 클릭! 했을 때 See the Pen by Seoyoon Park (@yeleepark) on CodePen. 2. dblclick 해당 요소에서 마우스를 더블 클릭! 했을 때 See the Pen by Seoyoon Park (@yeleepark) on CodePen. 3. mousedown / mouseup 해당 요소에서 마우스가 눌러진 상태일 때 / 떼었을 때 See the Pen by Seoyoon Park (@yeleepark) on CodePen. 5. mousemove 해당 요소에서 마우스가 움직일 때 See the Pen by Seoyoon Park (@yeleepark) on CodePen. 6. mouseover 해당 요소에서 마우스가 요소 안으로.. 2021. 7. 21. [JavaScript30/Day-8] Fun with HTML5 Canvas HTML5 Canvas는 사용해본 적이 없어서 오래 걸렸다. (답안지의 도움을 많이 받음) How? 일단 마우스를 드래그할 때마다 Canvas에 그림이 그려져야 하고 이때 그려지는 그림은 색과 굵기(?)가 변경된다. 캔버스를 먼저 생성하고! 마우스 클릭한 상태일 때, 그리기 이벤트 생성! 마우스 드래그한 상태일 때, 그리기 이벤트 실행! 마우스 클릭을 땔 때, 그리기 중지 이벤트 생성! 마우스가 캔버스를 벗어났을 때, 그리기 중지 이벤트 생성! .... Solution 구조 분해 할당 x=10, y=10을 [x, y]=[10,10]으로! 마우스 이벤트 mouse 드래그 이벤트는 따로 없고 mousemove를 이용! offsetX, offsetY 특정 영역의 절댓값 좌표 2021. 7. 21. 이전 1 ··· 10 11 12 13 14 15 16 ··· 18 다음 반응형