# 학습 내용 정리/Paint CloneCoding(JS) 검색 결과
4 개의 검색 결과가 있습니다.
# 학습 내용 정리/Paint CloneCoding(JS)

[그림판 클론코딩] 3. 페인트와 저장 기능!! (完)

벌써 마지막을 향해 달려가고 있는 그림판 클론코딩입니다. 생각보다 크게 어렵지 않기도 하고, 크롬 앱 클론코딩을 통해 VanillaJS에 조금이나마 익숙해져 있으시다면 금방 쫒아갈 수 있는 수업이라고 생각합니다. 이번 포스팅은 강의의 #2.4~#2.6까지의 내용을 담고 있습니다. 목차 0. 페인트통 기능 배경을 모두 다른 색으로 바꾸고 싶은데 페인트통 기능이 없다면 제일 두꺼운 브러시로 모두 칠해야 하는 불상사가 발생합니다. 이런 불상사가 일어나지 않게 하기 위해서는 베인트통 기능이 반드시 필요하겠죠? 먼저 이전 포스팅에서 미리 설계했던 Fill버튼 / Paint버튼의 구현이 필요합니다. 이 부분은 filling이라는 새로운 변수를 하나 만들어서, if문을 통해 filling 모드인지 아닌지 파악하고 그..

2021. 5. 20. 09:49
# 학습 내용 정리/Paint CloneCoding(JS)

[그림판 클론코딩] 2. 색칠을 해보자!

이전 포스팅에서 그림판에서 가장 핵심적인 부분이라고 할 수 있었던 클릭한 부분을 칠하는 것을 만들어보았습니다. 그렇다면 이번 포스팅에서는 색깔을 바꾸고 붓 사이즈를 바꾸는 것을 해 보도록 하겠습니다! 이번 포스팅의 내용은 강의 #2.3~#2.4를 다루고 있습니다. 목차 0. 붓 색을 바꿔보자! 먼저 html에 있는 각 색깔들을 담당하는 div의 class에 jsColor를 추가해줍니다. 간단하쥬? Fill Save 이제 추가한 jsColor Class를 가진 친구들을 getElementByClassName으로 모두 불러서 colors에 저장합니다. colors는 Object 형태의 데이터를 가지고 있는데, 이 데이터들을 array 형태로 바꿔서 사용하기 위해 Array.from()을 사용합니다. 그리고 ..

2021. 5. 20. 07:57
# 학습 내용 정리/Paint CloneCoding(JS)

[그림판 클론코딩] 1. 본격적으로 JS를 써보자!

이번 포스팅에서는 본격적으로 app.js파일을 건드려보도록 하겠습니다! 강의 내용 중 #2.0~#2.2 부분을 다루고 있습니다 :) 목차 0. 캔버스 내 마우스 컨트롤 마우스 컨트롤에 있어서 가장 필요한 부분이 무엇인지에 대해서 생각합니다. 먼저 캔버스 위에 마우스가 어느 위치에 있는지를 알아야 합니다. 또한 캔버스 위에서 클릭을 했을 때 색칠이 되고, 클릭을 떼면 더 이상 색칠이 되지 않아야 합니다. 그래서 다음과 같은 onMouseMove, onMouseDown, onMouseUp, stopPainting 함수를 만들어줍니다. 위처럼 코드를 짜면서 console.log(event)를 통해 원하는 값을 가져오고 있는지 확인할 수 있습니다. // app.js const canvas = document.g..

2021. 5. 20. 06:41
# 학습 내용 정리/Paint CloneCoding(JS)

[그림판 클론코딩] 0. JS로 그림판도 만들 수 있다고?

지난번에 크롬 앱 클론코딩과 2주 챌린지를 하면서 JS에 대해 포스팅을 올렸습니다. 챌린지 과정을 마치고 VanillaJS 관련 기초 강의가 하나 더 만들어져서 우테캠 2차 코딩테스트 공부용으로 바로 수강하려고 했으나 상황이 여의치 않아서 이제서야 강의를 수강하게 되었습니다. 이번 VanillaJS 클론코딩은 그림판 클론코딩 강의입니다. 텍스트로만 커뮤니케이션을 했던 지난 강의와 달리 조금 더 색다르게 마우스 클릭 등으로 컴퓨터와 상호작용을 할 수 있다는 점에서 재밌어보여서 지난번 클론코딩보다 하나하나 더 자세하게 기록을 남기며 수강해보려고 합니다! 그렇다면 바로 강의 정리로 들어가시죠! ※ 아래는 노마드코더 홈페이지에서 바닐라 JS로 그림판 만들기 강의를 무료로 수강할 수 있는 링크입니다! 바닐라 JS..

2021. 5. 20. 00:53