본문 바로가기

Front-End: Web/JavaScript

 (97)
[코딩애플] 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'말..
[코딩애플] js part 3-6. async/await Promise 어려워서 싫으면 async/await을 사용합시다 async/await 2018년에 나온 신문법 프로미스를 더 깔끔하게 사용할 수 있는 키워드 순차적으로 많은 걸 사용할 때 유용함 예제 연산이 끝나면 특정 코드를 실행하고 싶다면 -> 콜백함수 쓰기 function 더하기(콜백){ 1 + 1; 콜백(); } 더하기(함수); 근데 이거 하기 싫으면 -> Promise 써보겠음 function 더하기(){ return new Promise(...) } 더하기().then(function(){ }) 근데 프로미스 만들기 너무 귀찮다 -> async / await **async를 funciton 앞에 붙이면 함수가 Promise 역할 가능** **함수 실행 후에 Promise 오브젝트가 남는다.**..
[코딩애플] js part 3-5. ES6 Promise 인간의 언어로 설명하는 ES6 Promise 사용 방법 콜백함수 만드는 거랑 비슷한데, 콜백함수보다는 약간 기능이 더 많다. 옆으로 길어지지 않아서 굳 실패할 경우에도 코드실행 가능 (catch) 일반 콜백함수 : 1번 실행 후 2번 실행해주세요~ Promise로 만든 거 : 1번 실행 후 성공시 2번 실행해주세요~ 실패시 3번 실행해주세요~ var 프로미스 = new Promise(); 프로미스.then(function(){ // 프로미스가 성공일 경우 실행할 코드 }).catch(function(){ // 실패할 경우에 실행할 코드 }).finally(function(){ // 성공이든 실패든 결과가 났을 때 실행할 코드 }) Promise = 성공/실패 판정 기계 그래서 성공, 실패 판정을 내가 판..
[코딩애플] js part 3-4. 동기/비동기처리와 콜백함수라는 용어 깔끔하게 정리 동기/비동기처리와 콜백함수라는 용어 깔끔하게 정리 자바스크립트는 동기식 처리(Synchronous) 한 번에 코드 한 줄씩 차례로 실행 병렬처리 가능하다? ㄴㄴ 자바스크립트는 오래걸리는 연산 만나면 멈춤 console.log(1); console.log(2); console.log(3); // 1 // 2 // 3 // => 동기! 비동기식처리(Asynchronous) 오래걸리는 작업이 있으면 제껴두고 다른거부터 처리하는 방식 자바스크립트가 아니라 자바스크립트 실행하는 브라우저 덕분에 가능 오래걸리거나 실행까지 오래 걸리는 함수들 setTimeout eventListener ajax setTimeout console.log(1); setTimeout(() => {console.log(2)}, 1000);..
[코딩애플] js part 3-3. Stack, Queue를 이용한 웹브라우저 동작원리 Stack, Queue를 이용한 웹브라우저 동작원리 문법만 배운다고 코딩잘하는 사람이 되는게 아닙니다. 오늘 배울 건 웹브라우저의 동작원리인데 상식으로 알아두면 여러분 코딩생활에 도움이될 수 있습니다. 이벤트리스너, setTimeout 같은거 다룰 때 의도와는 다르게 미스터리하게 동작하는 경우가 많은데 그것은 이런 이유였다고 합니다. 웹 브라우저란 서버에서 받아온 HTML CSS JS를 실행시켜주는 프로그램입니다. 근데 브라우저가 자바스크립트를 실행하는데 일련의 과정이 있습니다. 이걸 알고계시면 앞으로 코드잘짤 수 있습니다. 브라우저는 C++ 이라는 언어로 코드가 짜여져있습니다. 브라우저는 실행해야할 자바스크립트 코드를 발견하면 C++ 언어로 만들어둔 stack에 넣어 돌립니다. stack이 뭐냐고요? ..
반응형

티스토리툴바