JAVASCRIPT
1.[JS & ES6 신문법 학습]this키워드 1
this 이건 뭐시여를 하면 window 어쩌고 하면서 출력된다.이렇게 해도 window 어쩌고를 출력하는 것을 볼 수 있다.따라서 this의 1번째 뜻은 window !'use strict'를 이용하면 더 엄격하게 js를 실행시킬 수 있다.이렇게 하면 x=300으로
2.[JS & ES6 신문법 학습]this키워드 2
또 this또 다른 this의 뜻 기계 안에서 쓰면 새로 생성되는 오브젝트를 뜻함여기서 기계는 constructor를 말하고, 오브젝트 생성기계(constructor)를 요롷게 했을 때, this는이 기계로부터 새로 생성되는 오브젝트(instance)를 뜻한다.한 마디
3.[JS & ES6 신문법 학습] Arrow function은 function을 대체?
자바스크립트에서는 함수를 만드는 여러 방법이 있다.근데 특이한 화살표 함수도 있다.요롷게 여러가지로 만들 수 있지.함수는 그냥 쓰는 문법이 아님함수를 만드는 이유는 크게 2가지코드들을 기능으로 묶고 싶을 때 사용입출력 기계를 만들고 싶을 때 사용이런 식으로 쓴다는 말이
4.[JS & ES6 신문법 학습] this & arrow function 연습문제 3개
사람이라는 오브젝트가 하나 있습니다. 이 오브젝트에 sayHi라는 함수를 (메소드를) 하나 추가하고 싶습니다.위의 코드처럼 사람.sayHi()라고 작성하면 콘솔창에 '안녕 나는 손흥민' 이라는 글자가 나와야합니다. '손흥민'이라고 이름을 하드코딩해서 출력하기보다는 실제
5.[JS & ES6 신문법 학습] 변수 신문법 총정리 1. var let const와 선언,할당,범위
기본적으로 변수는 아래처럼 사용된다.var 변수이름 = 저장할값변수는 선언, 할당, 범위에 대해서 이해하면 된다.재선언은 변수 이름을 중복해서 사용할 수 있음을 의미와 같은 예이다.let과 const는 재선언이 불가능하다.이렇게 하면 에러를 띄운다.재할당은 변수의 값을
6.[JS & ES6 신문법 학습] 변수 신문법 총정리 2. Hoisting, 전역변수, 참조
변수에는 Hoisting이라는 현상이 있음.Hoisting : 변수의 선언을 변수 범위 맨위로 끌고오는 현상만약 아래처럼 되어있다면javascript는 아래처럼 해석을 한다.변수를 만나면 선언부분을 강제로 맨위로 끌어올림(자바스크립트 언어가 그런 것이라 사용자가 뭐..
7.[JS & ES6 신문법 학습] 변수 연습문제 6개
변수 연습문제 6개1~4. 다음 코드의 콘솔창 출력결과는 무엇일까요?(문제1) let을 사용했으므로 undefined가 아닌 오류를 출력함(문제2)함수 안에서는 var을 사용했으므로 undefined를 출력함하지만, 함수 또한 var 함수 = 을 이용해서 사용했기에,
8.[JS & ES6 신문법 학습] 자바스크립트가 문자 다루는 신기한 방법 (Template literals)
변수 선언을 할 때 " 또는 '를 사용할 수도 있지만 \` 백틱을 이용할 수 도 있다.backquote 문자열의 장점1\. 엔터키 가능2\. 중간중간 변수넣기 쉬움처럼 줄바꿈을 하고도 작성이 가능하기 때문이다.이런식으로 기존에는 +기호를 이용해서 문자열을 분리 시켜줬던
9.[JS & ES6 신문법 학습] Template literals / tagged literals 연습문제 2개와 풀이
문제1갯수가 잘 못되어서 바지와 양말을 바꾸고 싶다면?!이렇게 하면 양말20바지100이 나온다.이런식으로 사용이 가능하다.문제2만약 pants가 0개면 '바지안팔아요 양말 100'이라는 문자로 바꾸는 해체분석기를 제작해보십다.요롷게 된다.
10.[JS & ES6 신문법 학습] 모든 괄호를 없애주는 Spread Operator 활용방법 1
...spread operator : 뭔가 내용물을 빼고 싶을 때 사용1.Array에 붙이면 대괄호를 제거해서 내용물을 나열해줌.문자에 붙이면? 문자열을 펼쳐줌% 문자열도 array처럼 인덱싱이 가능함....spread operator 어디다가 쓰면 좋을까?이렇게 하면
11.[JS & ES6 신문법 학습] Spread Operator 활용방법 2 & apply, call 함수 알아보기
spread operator는 함수 파라미터 넣을때도 사용 가능하다.요롷게 있다면?!3개니까 이렇게 가능하지 엄청 많으면?! 그리고 array에 있으면?!이렇게 하면제대로된 값을 내놓지 못한다.이 방법도 있지만, 번거롭다!!!!!!!!!옛날 고대의 사람들은 다음처럼 햇
12.[JS & ES6 신문법 학습] 자바스크립트 함수 업그레이드하기 (default parameter/arguments)
함수의 default 파라미터b가 아무것도 안들어왔을 때 b = 10으로 설정됨.수학 연산자를 넣는 것도 가능함이것도 됨함수도 입력가능!모든 파라미터를 한꺼번에 싸잡아서 다루고 싶을 경우에 arguments를 사용하면된다.이런식으로 arguments를 활용한 확장성 가
13.[JS & ES6 신문법 학습]함수에서 쓰는 점3개 Rest 파라미터를 알아봅시다
arguments를 사용하는 것은 옛날문법임여기서arguments가 이렇게 되어있을 때, 난 a,b,c라는 파라미터만 콘솔창에 출력하고 싶다\~\~~ 하면 또 기능을 수정해야함.이럴때 Rest 파라미터를 사용해보자....파라미터들 이렇게 한다면 이 자리에 오는 모든 파
14.[JS & ES6 신문법 학습] Spread, rest 파라미터 연습문제 8개
spread 문제 1c = '김', '밥', 1, 2, 3 이 되므로 '김', '밥', 1, 2, 3가 출력된다.spread 문제 2대괄호가 가득한 위 코드의 출력 결과는? \[1,2,3, 'you', 'are'] 이 되는데 여기서 1을 출력해야하므로 'you'가 출력
15.[JS & ES6 신문법 학습] 이상한 Reference data type과 더 이상한 예제 3개
여기 어레이와 obj각각 이 가지고 있는 값은 해당 값이 저쪽에 있습니다\~~라는 화살표가 들어있다. 그러니까 주소지가 들어있다.이런 식으로 변수를 선언하고 할당을 한다.Array, object는 변수에 값이 저장이 안됩니다.이렇게 하면 둘다 김이 나온다.이러면박김으로
16.[JS & ES6 신문법 학습] 객체지향1. Object 생성기계인 constructor를 만들어 써보자
constructor 언제 사용함? object를 만들어내고 싶을 때, (object를 마구 복사하고 싶을 때 사용한다.)(비슷한 object를 쉽게 직어낼 수 있다.)예시: 학생 출석부를 만들어보자.아주 간단하지만 이런게 constructor임new 기계()이렇게 사
17.[JS & ES6 신문법 학습] 객체지향2. prototype
기계가 가지고 있는 name, age를 비롯한 속성들을 물려받음. 이를 전문용어로 상속 이라고 함.상속을 구현할 수 있는 또 하나의 문법 prototype자바스크립트에서만 있는 문법기계(constructor)를 만들면 prototype이라는 공간이 자동으로 생김.pro
18.[JS & ES6 신문법 학습] 객체지향3. prototype의 특징 몇가지
1) prototype은 함수에만 몰래 생성됨2) 내 부모 유전자(부모의 prototype)를 검사하고 싶다면 \_\_proto\_\_ 를 사용한다.3) \_\_proto\_\_를 이용해 부모님 강제 등록하기이런 방식으로 부모 자식을 강제 할 수 있지만, 이런 방식을
19.[JS & ES6 신문법 학습] constructor, prototype 연습문제 4개
오브젝트 자료 여러개를 만들고 싶습니다. 제일 잘하는게 하드코딩이기 때문에 하드코딩해봤습니다. var 학생1 = { name : 'Kim', age : 20 } var 학생2 = { name : 'Park', age : 21 } var 학생3 = { name : '
20.[JS & ES6 신문법 학습] ES5방식으로 쉽게 구현하는 상속기능
prototype, function 기게(){}이것들은 사실 고대유물이다.쉽게 구현하는 상속기능을 아라보자.ES5방법 : Object.create()부모가 가진 name, age를 그대로 물려받은 자식 object를 만들고 싶으면?1\. constructor 함수를 만
21.[JS & ES6 신문법 학습] 객체지향4. ES6방식으로 안쉽게 구현하는 상속기능 (class)
요롷게 자식을 만들수 있다.함수를 추가하고 싶으면1\. constructor에 추가하든가(자식이 직접 함수를 가짐)2\. class 안에 넣던가(여기에 쓰면 자식 오브젝트에 추가 안됨, 부모.prototype에 추가됨.)부모의 유전자에 만들어두면 모든 자식들이 공통적으
22.[JS & ES6 신문법 학습] 객체지향5. class를 복사하는 extends / super
extends와 super에 대해서 배워보자.우선 이렇게 할아버지 오브젝트를 생성가능함.이거랑 유사한 class를 만들고 싶음할아버지의 속성들 그대로 물려받을거임.extends를 이용하면 됨나이도 넣어주자. 이렇게 하면 땋에러가 발생한다. extend해서 만든 clas
23.[JS & ES6 신문법 학습] getter, setter 대체 왜 쓰는지 알아보기
직접 내용물을 건드려서 다루지 않는게 추세임.근데 왜 nextAge(){}처럼 만들어서 사용함?object 자료가 복잡할 때 이득object 자료 수정시 더 편리숫자를 집어 넣어야 하는데, 문자를 집어넣는 이런식의 오류 등을 방지하기 위해서지.사전에 필터나 차단이 가능
24.[JS & ES6 신문법 학습] class, extends, getter, setter 연습문제 5개
직접 class 구조 만들어보기갑자기 강아지 SNS를 만들고 싶어서 자바스크립트로 열심히 코딩하던 중, 여러 강아지 정보들을 담은 유사한 오브젝트 자료형을 테스트삼아 몇개 만들려고 합니다. var 강아지1 = { type : '말티즈', color : 'white' }
25.[JS & ES6 신문법 학습] 틀린그림 찾기능력이 향상되는 Destructuring 문법
array 가 있다고 하자.var arr = 2,3,4 array 데이터를 전부 변수에 담으려면?var a = arr0 var b = arr1이런 방법도 있겠지?하지만 다른 방법!var arr = 2,3,4var a,b,c = 2,3,4모양만 맞춰 변수를 선언하
26.[JS & ES6 신문법 학습] import / export 를 이용한 파일간 모듈식 개발
기존에는 script가 길어지면 아래처럼 js파일을 html에서 가져다가 사용했다.<script src="library.js"></script>es6부터는 더 직관적인 파일 첨부 방식을 제공ES6 import/export가 되겠다.사용방법은 아래처럼 사용할
27.[JS & ES6 신문법 학습] Stack, Queue를 이용한 웹브라우저 동작원리
문법만 배운다고 코딩잘하는 사람이 되는게 아닙니다.오늘 배울 건 웹브라우저의 동작원리인데 상식으로 알아두면 여러분 코딩생활에 도움이될 수 있습니다.이벤트리스너, setTimeout 같은거 다룰 때 의도와는 다르게 미스터리하게 동작하는 경우가 많은데그것은 이런 이유였다고
28.[JS & ES6 신문법 학습] 동기/비동기처리와 콜백함수라는 용어 깔끔하게 정리
자바스크립트는 동기식 처리(Synchronous) 이런식으로 작동하는게 동기식처리(Synchronous) 그와 반대로 아래처럼 처리하는게 비동기식처리(Asynchronous) 여기서 setTimeout()은 비동기식처리를 하도록 도와주는 함수 => 오래걸리는 작업
29.[JS & ES6 신문법 학습] 인간의 언어로 설명하는 ES6 Promise
Promise라는 것도 코드 디자인 패턴.사용방법은이렇게 먼저 선언을 하고 사용하면 된다.(콜백함수 만드는 거랑 비슷함)근데 콜백함수보다는 약간 기능이 많음.코드가 콜백함수에 비해서 옆으로 길어지지가 않음.then말고 catch()를 이용해서 실패했을때의 코드도 가능하
30.[JS & ES6 신문법 학습] ES6 Promise 간단 연습문제 & 해설
Q1. 이미지 로딩 성공시 특정 코드를 실행하고 싶습니다. HTML 안에 있는 이미지 로딩이 끝나면 무언가 코드를 실행하고 싶습니다. 이 이미지가 로드가 되면 콘솔창에 성공, 로드가 실패하면 콘솔창에 실패를 출력하고 싶은데Promise 문법의 then, catch 함
31.[JS & ES6 신문법 학습] Promise 어려워서 싫으면 async/await을사용합시다
연산이 끝나면 특정 코드를 실행하고 싶을 때, 위처럼 사용해서 더하기를 먼저하고 그다음 함수를 실행해주세요.new Promise() 를 이용해서 위처럼 작성이 가능하다.aysnc는 함수 앞에서만 사용할 수있고, 해당 함수가 Promise역할이 가능하게 해준다.함수 실행
32.[JS & ES6 신문법 학습] for in / for of 반복문과 enumerable, iterable 속성
javascript에는 반복문이 있다.요롷게 생겨먹었지.반복문은1\. 코드 여러번 실행할 때2\. Array, Object에서 자료 꺼내쓸 때이런식으로 사용하면 된다.enumerable 한 것만 반복해 줌우리가 object 변수를 만들면 사실 key value만 생각하
33.[JS & ES6 신문법 학습] Symbol 자료형은 쓸모없어보이는데 왜 있는거죠
Symbol 자료형 어디에 쓰지...???심볼만드는법Symbol('설명아무거나')var 심볼 = Symbol('설명')이게 끝!근데 어디에? 왜 씀??????이게 나온 이유는Object 자료형의 비밀스러운 key값으로 사용이 가능하다.근데 왜 key값으로??이렇게 하면
34.[JS & ES6 신문법 학습] 매우 짧게 알아보는 Map, Set 자료형
Map자료형도 object 처럼 ?? : ?? 방식으로 만들수 잇다.: 대신 => 으로 표현되어있는 것을 볼 수 있다.화살표가 있는 이유는 Map자료형은 자료간의 연관성을 표현하기 위해 사용하기 때문Object 자료형은 자료 이름으로 글자만 가능Map 자료형은다 가능M
35.[JS & ES6 신문법 학습] Web Components : 커스텀 HTML 태그 만들기
코딩애플이 말하는 상식웹개발 잘하고 싶으면 브라우저 기능을 잘 알아야함JS문법은 도구일 뿐이거는 정해진 양식임이렇게 하니 잘 등장해준다.this는 클래스로부터 새로 생성될 인스턴스.여기서는 새로 생성될 이 되겠다.아까의connectedCallback(){}안에 위 j
36.[HTML, CSS, JS] shadow DOM과 template으로 HTML 모듈화하기
개발자 도구의 설정(톱니바퀴)에 들어가서 preferences에 elements에서 show user agent shadow DOM을 활성화표시하면 보이게 된다.input태그 중 range type에 대한 것인데 이렇게 숨겨진 div들을 볼 수 있다.우선 태그를 하나
37.[HTML, CSS, JS] class로 만들어보는 간단한 2D 게임 1 (배웠으면 써먹어야하니까)
우선 canvas를 이용하자.이렇게 하면 이런 green의 박스가 생성된다.이것을 게임에서 이용할 수 있도록 수정해주자.등장 캐릭터의 속성부터 object 자료에 정리해두면 편리여기서 dino를 더 수정하자.장애물도 그려보자.class를 이용하자.오 그려졌다.근데 애니
38.[HTML, CSS, JS] class로 만들어보는 간단한 2D 게임 2 (collision detection)
지난 시간에 이어서.. 필요없어진 장애물을 제거 하자. 화면을 넘어가면 없어지도록 해주자. 점프도 구현해주자. 스페이스바를 누르면 점프하게! 변수를 이용해서 점프와 다시 내려오는 것을 구현해줬다. 충돌을 감지하자!!!!! 충돌하냐()함수를 통해서 실행해준다.