본문 바로가기

Front-End: Web/JavaScript

(85)
[js] Math.floor vs trunc vs parseInt Math.floor vs trunc vs parseInt Math.floor(): 작은 정수로 소수점 버림 (-3.2 -> -4, 2.3 -> 2) trunc() : 소수점 버림 (-3.2 -> -3, 2.3 -> 2) parseInt() : Math.floor()와 동일하게 작동, 두 번째 파라미터로 n진수로 변환 가능(default Value: 10)
[코딩애플] js part 3-13. Optional Chanining(?.) / Nullish Coalescing (??) 신문법) ?. / ?? 연산자 (optional chaining) 자바스크립트에서 여러 문자, 숫자를 한 변수에 저장하고 싶다면, Object. var user = { name: 'kim', age: 20 }; 꺼내 쓰려면, user.name; // 'kim' use.age; // 20; ?. (optional chaning 연산자) 왼쪽에 있는 자료가 비어있으면, 오른쪽을 실행해주지 않는다. 즉, ?. 왼쪽이 null, undefined면 점안찍어주고 undefined 남겨준다. 언제쓰나? 중첩된 object 자료에서 자료뽑을 때 reference 에러 없이 안전하게 뽑을 수 있음 예로 들어보자. 중첩된 object를 만들어보자. var user = { name: 'kim', age: {value: 2..
[코딩애플] js part 3-12. class로 만들어보는 2D 게임 class로 만들어보는 간단한 2D 게임 (배웠으면 써먹어야하니까) 자바스크립트만으로도 간단한 게임을 만들 수 있다. HTMl, CSS, JS만으로 만든 게임 중 해볼만한 명작: candy box, Synergism 우리는 크롬 공룡 게임을 만들어 보자. 게임 개발 원리와 구현 방법 화면에 네모, 원 그릴 수 있어야 함 (네모 위에 공룡, 선인장 등 그림을 입힘) -> 태그를 이용하면 자바스크립트로 간단하게 네모를 그릴 수 있다. 프레임마다 코드실행 가능해야 (애니메이션을 위해) 예로 들어서 공룡이 방향키를 누르면 60px 이동해야 한다. 근데 순간이동하면 안되겠지. 서서히 60px로 이동시켜야 한다. 그러면 1초에 60번 정도 +1px 해주면 된다. 그래서 1초에 60번 움직이도록 자바스크립트 코드를 ..
[코딩애플] js part 3-11. shadow DOM과 template으로 HTML 모듈화하기 shadow DOM과 template으로 HTML 모듈화하기 shadow DOM이란? 가끔 보면 복잡한 HTML 태그가 있는데, 이렇게 작성하면 두세 개로 만들어진 것 같은(실은 맞음) range input이 뜬다. 이게 어떻게 가능할까? shadow DOM 덕분이다. 이게 div 태그가 맞는지 확인해보자. ![](.\images\01.png) 확인하고 싶다면 개발자 도구에 설정 > Preferences > Elements > 'Show user agent shadow DOM' 옵션을 체크한다. 그러면 이제 input 태그를 까볼 수 있다. 이제 다시 보면, ![](.\images\02.png) div 3개로 이뤄진 걸 확인할 수 있다. 어떻게 숨길 수 있었을까! 이처럼 태그 하나를 써서 태그 세 개가 ..
[코딩애플] js part 3-10. Web Components: 커스텀 HTML 태그 만들기 Web Components: 커스텀 HTML 태그 만들기 HTML을 쓰다보면 자주 출몰하는 덩어리들이 있다. 이걸 한 단어로 축약하고 싶은 충동이 든다. 이때 커스텀 태그로 치환할 수 있다. Web Components 자바스크립트 문법으로 구현할 수 있는 **브라우저 기본 기능**임 [상식] 웹개발 잘하고 싶으면 브라우저 기능을 잘 알아야한다. 자바스크립트 문법은 도구일 뿐이다. 로 길고 복잡한 HTML 축약하는 법 과 태그를 으로 축약해보자. ➡️ 이렇게 쓰면 label과 input이 나옴 **connectedCallback()** : 우리가 만든 태그가 HTML에 장착될 때 실행할 코드 적는 곳. 정해진 함수명임. **this.innerHTML** : 새로 생성될 요소 HTML 생성하는 다른 방법 t..
[코딩애플] js part 3-9. Map, Set 자료형 매우 짧게 알아보는 Map, Set 자료형 ES6부터 추가된 신자료형. Map 자료형: key, value를 저장 ⭐[목적] Map 자료형은 자료간의 연관성을 표현하기 위해 쓴다. Object와 비슷하게 key, value를 저장하는데, 담는 형태가 다르다. 콜론(:)이 아니라 화살표(=>)로 담긴다. var person = new Map(); person.set('name', 'Kim'); person.set('age', 20); person; // Map {"name" => "Kim", "age" => 20} name은 Kim과, age는 20과 연관이 되어 있다는 걸 나타낸다. Object 자료형은 자료 이름으로 글자(string)만 가능했지만, Map 자료형은 다 가능하다. 숫자, array, ...
[코딩애플] js part 3-8. Symbol 자료형 Symbol 자료형은 쓸모없어보이는데 왜 있는거죠 쓸데없는 Symbol ES6부터 추가된 자료형 그렇게 실용성있진 않음 사용법 var 심볼 = Symbol('설명'); 용도 1. Object 자료형의 비밀스런 key값 object를 하나 만들어보자. var person = { name : 'Kim'}; 근데 만약 밖에 공개하기 싫은 비밀스런 데이터(weight)를 저장하고 싶다면? 일반적이면 이렇게 저장하겠지만 person.weight = 100; person; // {name: 'Kim', weight: 100} Symbol을 이용해서 비밀스런 데이터를 저장해보자. **원래 Object의 key값에는 string만 가능했는데, 이제 Symbol도 넣을 수 있다.** var weight = Symbol(..
[코딩애플] js part 3-7. for in / for of 반복문과 enumerable, iterable 속성 for in / for of 반복문과 enumerable, iterable 속성 반복문 코드 여러번 실행할 때 Array, Object에서 자료를 꺼내쓸 때(2,3,4) 1. 그냥 for 반복문(어려움) for (var i = 0; i < 3; i++){ } 2. forEach() 반복문 (Array 전용) [1,2,3].forEach(); 3. for in 반복문 (Object 전용) object에 있던 값을 전부 하나씩 꺼내서 사용할 때 사용 사용법 var 오브젝트 = { name: 'Kim', age: 30}; for (var key in 오브젝트){ console.log(오브젝트[key]); } // Kim // 30 특징 1. enumerable 한 것만 반복해준다. 이 오브젝트에는 'Kim'말..

반응형