식초의 지식보관소

하... 어떻게든 해결법 찾아내느라 ... 정말 고생 많이 했습니다ㅎㅠ localhost에서는 이미지가 잘뜨는데 github page site에서는 안뜬다?? 해결법은 html에서 이미지의 src 표기법 입니다. 원래하던 방식 (이미지 폴더 안에 있는 이미지 경로) src = "img/picture.png " 해결 방식 (./를 붙여준다!!!!!) src = "./img/picture.png" 이렇게 하면 이미지 뜹니다...(감동) 근데 이렇게해도 안 된다면?? html 파일 뿐만아니라 다른 파일에서도 모두 이런 방식으로 바꿔줘야합니다. (저는 json 파일에서 바꿔야되는 걸 겨우 알아서 겨우 고쳤습니다....) 20.10.31 추가) ./ 의미는 같은 디렉토리라는 의미이다

1. 만드는 프로젝트에 .prettierrc 파일을 만들고 아래 내용을 입력한다 1 2 3 4 5 6 7 8 9 { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } cs 2. Window일 경우 (ctrl+ , 해서) setting 메뉴로 간다 settings.json 파일을 열어서 아래와 같이 추가 입력한다 (prettier. editor. 포함된 부분만 추가하면 된다) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 { "workbench.colorTheme": "Community Material Theme", "workbench...

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-..