-local repository(로컬 저장소) 개념 개인 PC에 파일이 저장되는 개인 전용 저장소이다. 이후, remote repository(원격 저장소)에 저장할 수 있다. -로컬 저장소에 저장 방법 1. git bash 또는 cmd명령 프롬프트에 접속하기 처음 들어가면 경로가 Desktop으로 나와있다. 명령어 : cd 들어가고 싶은 폴더명 위 명령어를 사용하여 git에 올리고 싶은 폴더 경로에 접속한다. 만약, 폴더 밖으로 나가고 싶으면 명령어 : cd.. 사용하면 상위 폴더로 나간다. 여기서 cd 입력하고 한 칸 띄우고.. 을 입력한다. 2. 폴더에서 Git 저장소 만들기 명령어: git init Initialized empty Git repository in C:/Users/경필/Desktop..

-개념 반복문처럼 배열의 length 만큼 한 바퀴 순회한다. array.forEach(callbackFunction(현재 값, 인덱스 번호, 배열 전체){ }) 1. 현재 값 한 바퀴 돌면서 배열의 값을 하나하나 출력한다. 2. 인덱스 번호 한 바퀴 돌면서 배열의 인덱스 번호 하나하나 출력한다. 3. 배열 전체 배열의 length만큼 배열 전체 값을 출력한다. -사용방법 1. 한 바퀴 돌면서 현재 값 가져오기 et array_foreach = ['foreach1', 'foreach2', 'foreach3']; array_foreach.forEach(function(value){ console.log(value); }) // foreach1 // foreach2 // foreach3 출력 array_fo..

-개념 배열의 끝에 원하는 값을 추가 시킨다. array.push(추가싶은 값) -사용방법 1. 배열 끝에 값 추가하기 let push_array = [1,2,3]; push_array.push(4); console.log(push_array); // [1, 2, 3, 4] 출력 push_array.push(4) push_array배열 마지막에 숫자 4가 들어간다. push()로 값을 추가하면 항상 배열 마지막에 값이 추가 된다. 또한, 문자도 추가할수있다. 2. 값 추가 후 배열 길이 가져오기 let push_array = [1,2,3,4]; let push_length = push_array.push(5); console.log(push_length); // 5 출력 let push_length = ..

-개념 문자열에서 특정 인덱스 값에 있는 문자를 반환한다. string에서만 사용 가능하다. String.charAt() -사용방법 1. 해당 인덱스 번호에 있는 값 출력하기 const charAt_string = 'charat'; console.log(charAt_string.charAt(1)); // h 출력 charAt_string.charAt(1) charAt() 함수에 1을 넣어서 인덱스 번호 1번에 해당하는 문자를 출력한다. charAt()와 비슷한 indecOf()는 찾고 싶은 문자 또는 숫자를 넣어서 해당 인덱스 번호를 출력한다. 2. charAt()에 찾고 싶은 문자를 넣었을 경우 const charAt_string = 'charat'; console.log(charAt_string.ch..

-개념 배열의 값을 원하는 지점부터 원하는 값으로 채워 넣을수있다. (배열의 값을 수정하고 싶을때도 가능하다) array.fill(value,start,end) 1.value 채우고 싶은 값의 자리 2.start 시작 지점의 인덱스 번호 3.end 끝 나는 지점의 인덱스 번호. 끝나는 지점의 이전까지만 값이 적용 된다. -사용방법 1. empty 배열에 값 넣기 let empty_array = Array(5); console.log(empty_array); // [empty × 5] 출력 empty_array.fill(1,0,5); console.log(empty_array); // [1, 1, 1, 1, 1] 출력 let empty_array = Array(5) Array()를 사용하여 빈공간이 5개가..

-개념 하나의 문자열을 구분자를 이용하여 여러 개의 문자열로 나눈다. string.split(cut, count) 1.cut 원본 문자열을 어떤 기준으로 끊어야 할지 설정한다. 즉, 문자열을 나누는 기준 2.count 끊을 문자열의 개수 -사용방법 1. 문자열 한 개씩 나누기 1 2 3 4 let split_string = 'super Pil'; let split_array = split_string.split(''); console.log(split_array); // ["s", "u", "p", "e", "r", " ", "P", "i", "l"] 출력 let split_arry = split_string.split('') split(나누는 기준) 이기 때문에 '' 할 경우 문자열 하나하나를 나눠서 ..

-개념 배열의 모든 값들을 연결하여 문자열로 출력한다. array.join() -사용방법 1. join()으로 합치기 1 2 3 let arry_join = ['Americano', 'Latte', 'Espresso', 'smoothie']; console.log(arry_join.join()); // Americano,Latte,Espresso,smoothie 출력 arry_join.join() . join()을 하게 되면 ', ' 문자열을 넣지 않아도 ', '를 넣어서 출력된다. 2. 배열 값 전부 연결해서 합치기 1 2 3 let arry_join = ['Americano', 'Latte', 'Espresso', 'smoothie']; console.log(arry_join.join('')); //..

-개념 기존 배열의 값을 삭제, 추가, 변경 등을 할 수 있다. array.splice(start, deleteCount, add) 1.start 배열의 값을 삭제, 추가, 변경하고 싶은 시작점이다. 인덱스 번호로 선택한다. 2.deleteCount 배열의 값을 삭제하고 싶은 개수. 3.add 배열에 추가하고 싶은 값 -사용방법 1. 기존 배열에 바로 값 추가하기 1 2 3 4 let cafe = ['Americano', 'Latte', 'Espresso', 'smoothie']; cafe.splice(0, 0, 'soldout'); console.log(cafe); //["soldout", "Americano", "Latte", "Espresso", "smoothie"] 출력 cafe.splice(0,..

-개념 문자열에서 찾고자 하는 문자열이 어디에 있는지 찾을 수 있다. 배열에서 찾고자 하는 배열값이 어디에 있는지 찾을 수 있다. **원하는 값이 있는곳의 인덱스 번호로 출력된다. -사용방법 1.문자열 1 2 3 4 let string_indexof = 'indexof'; console.log(string_indexof.indexOf('i')); //0 출력 string_indexof.indexOf('i') string_indexof변수 안에 i 문자열을 찾는다. i가 맨 앞쪽에 있기 때문에 0(인덱스 번호)을 출력한다. 1 2 3 4 let string_indexof = 'iddexof'; console.log(string_indexof.indexOf('d')); //1 출력 string_indexof..

개념 화면에서 움직임 또는 효과를 줄때 초당 60번 화면을 다시 그려서 끊김없이 부드럽게 나타내기 위함이다. requestAnimationFrame 사용해서 콘솔 반복 찍기 requestAnimationFrame(testing); 먼저 실행시키고 싶은 함수를 requestAnimationFrame()에 넣는다. 자기 자신을 호출 시키기 위해서이다. requestAnimationFrame는 재귀함수와 비슷하다. let counting = 0; 전역변수로 counting을 선언하고 값으로 0을 넣는다. 이후, testing함수에서 1씩 증가시킨다. 그렇게 되면 처음에는 0(counting) + 1(count++(1증가라는 뜻)) = 1(전역변수 counting에 저장) 두번째에는 1(1씩증가되어 저장된 전역..

-종류 address, article, aside, audio, blockquote, canvas, dd, div, dl, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, noscript, ol, output, p, pre, section, table, ul, video -특징 1. 한 줄 전부 사용한다. block 요소1 block 요소2 block 요소3 #warp{ background: black; width: 500px; margin: 100px auto; } #warp h1:nth-child(1){ background: crimson; } #warp h1:nth-child(2){ back..

-종류 a, span, abbr, acronym, b, bdo, big, br, button, cite, code, dfn, em, i, input, kbd, label, map, object, q, samp, small, script, select, strong, sub, sup, textarea -특징 1. 영역이 가로로 정렬된다. inlin_left: inlin_center: inlin_right: 텍스트가 block구조와 다르게 화면에서 가로로 나열된다. 줄 바꿈이 없다. 다만, 부모 요소인 warp의 영역에 비해 자식 요소인 span의 영역이 크면 줄 바꿈이 일어나서 warp영역 보다 넘는 span태그는 아래로 내려간다. 2. width, height값을 줄 수 없다. #warp span{ ba..

-개념 박스와 비슷한 느낌이다. 많은 양의 물건을 박스 한 곳에 담는다. 또한, 다양한 종류의 물건을 담을 수 있다. -변수의 종류 1. var 2. let 3. const (let, const는 ECMAscript6 (es6)에서 새로 생긴 변수의 종류) -변수 선언 1. 각각 선언 변수 a에는 숫자 1, 변수 b에는 숫자 2가 담긴다. var 없이 변수를 선언할 수 있지만 나중에 스코프(scope) 문제로 변수를 선언할 때 var을 꼭 붙여서 선언하는 게 좋다. 2. 한 번에 선언 ", "를 사용하여 var 없이 바로 선언 가능하다. -식별자(Identifier)와 리터럴(literal) 1. 식별자(Identifier) 개념 변수를 만들 때 개발자가 정의하는 이름을 식별자라고 한다. 즉, 박스끼리 ..

-Git의 메커니즘 -working directory 1. 개념 개인 컴퓨터에서 작업한 파일 또는 폴더를 말한다. 나중에 git에 저장시키고 싶은 파일 또는 폴더 이기도 하다. 2. 관련 명령어 2-1.git init 작업 폴더에 git폴더를 생성한다. -staging area(index) 1. 개념 저장소에 저장하기 전 staging area에 임시적으로 먼저 저장한다. 서브 저장소라고 할 수 있다. 진짜 저장소인 repository에 담기 애매하거나 저장 대기시키고 싶은 등등 repository에 저장시키고 싶지 않은 상황에 서브로 저장한다. 2. staging area가 필요한 이유 2-1. 일부분만 commit 할 때 2-2. 충돌을 해결할 때 2-3. 커밋 다시 할 때 "staging area가..

-최종 결과 -HTML click 0 input 타입을 text로 하고 class명으로 선택한다. 나중에 js에서 유사 배열로 가지고 오기 위해서다. SuM 합계 버튼이다. 0 합계한 값을 출력하는 태그로 사용한다. -javascript 1. html태그를 js로 가지고 오기 const sum_input = document.getElementsByClassName('sum'); const btn = document.getElementById('btn'); const display = document.getElementById('display'); const sum_input = document.getElementsByClassName('sum'); input 태그를 ClassName으로 받아와서 유사 배..