Tech/JavaScript33 Chapter 09: Spread와 Rest (Spread operator and rest parameters) 💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 9.1 The Spread operator (스프레드 연산자) spread 라는 단어가 가지고 있는 의미는 펼치다, 퍼뜨리다 이 문법을 사용하면 이터러블한 요소를 개별 요소로 분리하거나, 객체 혹은 배열을 펼칠 수 있음 기존의 배열 혹은 객체를 건드리지 않고 새로운 배열 및 객체를 생성해야 하는 경우 유용하게 사용할 수 있음 → 기존의 것을 건드리지 않고 새로운 것을 만든다는 것이 핵심 // ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3) console.log(...[1, 2, 3]); // 1 2 3 // 문자열은 이터러블이다. console.log(...'Hello'); // H e l l o // 이터러.. 2022. 1. 23. Chapter 08: 배열 메서드 (Array improvements) 💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 8.1 Array.from() 배열처럼 보이지만 배열이 아닌 개체를 받아 실제 배열로 변환해 반환한다. Apple Banana Orange const fruits = document.querySelectorAll(".fruits p"); const fruitArray = Array.from(fruits); console.log(fruitArray); // [p,p,p] const fruitNames = fruitArray.map( fruit => fruit.textContent); console.log(fruitNames); // ["Apple", "Banana", "Orange"] 아래와 같이 단순화할 수도 있다. const fruits = A.. 2022. 1. 22. Chapter 07: 반복문 (Loop) 💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 7.1 for (value of iterable) for...of 문은 배열에 관한 반복문을 돌리기 위해서 만들어진 반복문이다. 따라서 이터러블 객체(Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에만 사용 가능하다. 사실 이 구문은 배워놔도 사용 할 일이 별로 없다. 보통 배열을 반복할 때에는 map 등의 배열 내장 함수를 많이 사용하기 때문이다. 기본 문법 const array = [1, 2, 4, 5]; for (let value of array) { // use strict 환경이 아닌 경우 let을 빼도 됨 console.log(value); } // 1 // 2 // 4 // 5 배.. 2022. 1. 20. Chapter 06: 디스트럭처링 - 구조 분해 할당 (Destructuring) 💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 6.1 객체 디스트럭처링 // ES6 이전 var person = { first: "Alberto", last: "Montalesi" } var first = person.first; var last = person.last; // ES6 const person = { first: "Alberto", last: "Montalesi" } const { first, last } = person; 중첩된 객체 형태로 데이터가 주어진 경우에도 사용 가능하다. const person = { name: "Alberto", last: "Montalesi", links:{ social: { facebook: "https://www.facebook.com/alb.. 2022. 1. 19. Chapter 05: 문자열 메서드 (Additional string methods) 💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 5.1 기본적인 문자열 메서드 indexOf() Gets the position of the first occurrence of the specified value in a string. 문자열에서 지정된 값이 처음 나타나는 위치를 반환 const str = "this is a short sentence"; str.indexOf("short"); // Output: 10 활용 예시 // 파일의 확장자 혹은 정규식 검사 등에 많이 사용된다. if ( file.indexOf("xlsx") > -1 ) { // ... } slice() Pulls a specified part of a string as a new string. 문자열의 지정된 부분을 .. 2022. 1. 18. Chapter 04: 템플릿 리터럴 (Template literals) 💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 4.1 문자열 삽입 // ES5 var name = "Alberto"; var greeting = 'Hello my name is ' + name; console.log(greeting); // Hello my name is Alberto // ES6 let name = "Alberto"; const greeting = `Hello my name is ${name}`; console.log(greeting); // Hello my name is Alberto 4.2 표현식 삽입 // ES5 var a = 1; var b = 10; console.log('1 * 10 is ' + ( a * b)); // 1 * 10 is 10 // ES6 var .. 2022. 1. 16. Chapter 03: 함수 기본값 인수 (Default function arguments) 💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. 3.1 함수 인수의 기본값(ES6 이전) ES6 이전에는 함수 인수의 기본값을 설정하는 것이 쉽지 않았다. 아래와 같은 코드로 기본값을 설정할 수 있다. function getLocation(city,country,continent){ if(typeof country === 'undefined'){ country = 'Italy' } if(typeof continent === 'undefined'){ continent = 'Europe' } console.log(continent,country,city) } getLocation('Milan') // Europe Italy Milan getLocation('Paris','France') // Eu.. 2022. 1. 13. 섬네일 갤러리 구현 / Gallery with Thumbnail Slider / Swiper - Thumbs gallery 준비하기 CDN 연결 섬네일형 갤러리 생성을 위해 캐러셀 플러그인 코어 소스를 연결합니다. 본 글에서는 Swiper API 를 사용합니다. 아래 코드를 head 태그 사이에 붙여 넣어줍니다. 마크업하기 총 두 개의 swiper 마크업이 필요합니다. 이미지를 크게 보여줄 메인 슬라이드와 섬네일로 사용할 섬네일 슬라이드를 각각 마크업합니다. CSS 기본 코어 소스의 CSS 덕분에 사용하는 데에 크게 문제가 없지만, 원하는 디자인이 있다면 CSS를 추가해줍니다. .gallery-box{margin:0 auto;max-width:800px;} .gallery-box .gallery-main-box{padding:0 0 10px;} .gallery-box .gallery-main-box .swiper-slide .. 2022. 1. 11. 모바일 디바이스 분기 / Javascript 반응형 처리 사용자들이 Web App을 모바일 디바이스에서 사용하는 비율이 늘어남에 따라, 우리는 작업을 하면서 Web App의 모바일 화면을 자주 확인해야 합니다. 이번 포스팅에서는 Javascript로 모바일 디바이스를 감지하고 분기처리 하는 방법을 알아보겠습니다. 1. User Agent Detection 모바일 디바이스 분기 처리를 하는 한 가지 방법은 user agent를 이용하여 확인하는 방법입니다. 이 방법은 난이도가 쉽기 때문에 많이 사용되고 있지만 가장 좋은 방법은 아닙니다. user agent string이 쉽게 spoofing 될 수 있기 때문입니다. 우리는 navigator.userAgent 속성을 이용해 user agent string을 얻을 수 있습니다. User Agent 확인 가능 사이트.. 2022. 1. 10. 이전 1 2 3 4 다음
