식초의 지식보관소

Canvas 이벤트 / 2D Context / path로 좌표 연동 / 색 바꾸기 / 붓 크기 / 채우기 모드 / 이미지 저장 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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109..

1. reset.css (매우 좋은 CSS 기본툴) - 검색해서 복붙 2. style.css (꾸미기 CSS) : @import "reset.css"; 맨위에 써서 연결한다 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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 1..

캔버스 / 컨트롤러 (붓 크기 조절 / 채우기 버튼, 저장 버튼 / 색상 버튼) 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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 PaintJS Fill Save Colored by Color Scripter cs

Variable (변수선언) 한 줄에 한 개씩 한다 (예시) const ... ; const ... ; const ... ; 변수에 함수 할당하는 등 다양한 표현 가능하다 =중간에 함수 넣으면 가독성이 떨어진다 =한 줄에 하나씩 변수 선언한다 String template (글자열 템플릿) ` ` 와 ${ } 를 활용한다 (2문장 처럼) Array (배열) 1. 불필요한 배열은 만들지 말자 (2문장처럼 - Array.from()배열은 삭제한다) 2. 배열을 생성하면서 바로 데이터 할당하는 경우 (사진1처럼 - API 사용해서 데이터 작성 보다는) 함수안에서 배열을 만들면서, 아이템 생성한다 (사진2처럼) 3. 배열을 만든 다음에 인덱스로 접근하기 보다는 (사진1처럼) 배열 안에 아이템들을 넣는다 (사진2처..

리드미 파일 (예시) -구현 상황 -구현 결과 -감상 -어려웠던 부분 등 용도에 맞게 활용하는 것이 좋다 리뷰어용 : 어디까지 구현, 어떻게 동적으로 만들었는지, 어떤점이 빠졌는지 상세히 적기 면접용 : 면접관이 쉽게 이해할 수 있는 것이 좋다 -프로젝트 이름 -스택 (기술) : 언어, 라이브러리, 프레임워크 & 왜 그 기술을 썼는지 -기간 -주요 기능 (스크린샷을 이용) : 단계별로 나타낸다 1,2,3 ... -아키텍쳐 : 구조를 한 눈에 알아볼 수 있게 한다

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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 //Fetch the items from the JSON file (fetch: 동적으로 받아온다) function loadItems() { return fetch('data/data.json') //경로를 지정하면 간단하게 데이터 받아온다 .then(response => response.json()) //성공하면, response 객체 전달해준다 //resopnse의 API인..

▶동적인 페이지 구성할 때, HTML 안에 데이터와 html요소(UI적 요소) 섞여 있는 것은 좋지 않다 ▶자바스크립트는 어플의 비지니스 로직 담당 : 코드가 들어있다 ▶데이터는 자바스크립트가 아닌 곳에 따로 보관하는 것이 좋다 : 백엔드, 데이터 파일 등 ▶현재 프로젝트는 백엔드가 없기 때문에, JSON에 데이터를 보관한다 ▶JSON = javascript object notation, 오브젝트와 유사하다 ▶object는 key : value로 구성된다 ▶JSON은 주석을 허용하지 않는다 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 42 43 4..

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 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 :root { /* color */ --color-black: #3f454d; /*전체 색을 먼저 변수로 저장한다*/ --color-..

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 Online Shopping Blue Yellow Pink Colored by Color Scripter cs HTML까지 완성 후 페이지

123456789101112131415161718192021/함수 출력 = 함수 선언 + 함수 호출 //함수 선언function doSomething(add) { console.log(add); const result = add(2, 3); console.log(result);} function add(a, b) { const sum = a + b; return sum;} //함수 호출//doSomething(add); //add: 함수 자체가 전달, add() 안 됨!! const addFun = add; //addFun은 함수자체만 가리킨다console.log(addFun);addFun(1, 2); //호출: addFun에 인자를 넣어준다 Colored by Color Scriptercs