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. 문자열의 지정된 부분을 ..

• format_list_bulleted Tech/JavaScript
• · 2022. 1. 18.
• textsms

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 ..

• format_list_bulleted Tech/JavaScript
• · 2022. 1. 16.
• textsms

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..

• format_list_bulleted Tech/JavaScript
• · 2022. 1. 13.
• textsms

섬네일 갤러리 구현 / 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 ..

• format_list_bulleted Tech/JavaScript
• · 2022. 1. 11.
• textsms

모바일 디바이스 분기 / Javascript 반응형 처리

사용자들이 Web App을 모바일 디바이스에서 사용하는 비율이 늘어남에 따라, 우리는 작업을 하면서 Web App의 모바일 화면을 자주 확인해야 합니다. 이번 포스팅에서는 Javascript로 모바일 디바이스를 감지하고 분기처리 하는 방법을 알아보겠습니다. 1. User Agent Detection 모바일 디바이스 분기 처리를 하는 한 가지 방법은 user agent를 이용하여 확인하는 방법입니다. 이 방법은 난이도가 쉽기 때문에 많이 사용되고 있지만 가장 좋은 방법은 아닙니다. user agent string이 쉽게 spoofing 될 수 있기 때문입니다. 우리는 navigator.userAgent 속성을 이용해 user agent string을 얻을 수 있습니다. User Agent 확인 가능 사이트..

• format_list_bulleted Tech/JavaScript
• · 2022. 1. 10.
• textsms

Chapter 02: 화살표 함수 (Arrow Function)

💡 도서 모던 자바스크립트 핵심 가이드를 읽고 정리합니다. # 2.1 화살표 함수 // 일반 함수 const greeting = function(name) { return "hello " + name; } // 화살표 함수 const greeting = (name) => { return `hello ${name}`; } // 화살표 함수 (매개 변수가 하나 일 경우, 괄호 생략) const greeting = name => { return `hello ${name}`; } // 화살표 함수 (매개 변수가 없을 경우, 괄호 필수) const greeting = () => { return `hello`; } 참고 : 템플릿 리터럴 Template Literals 백틱을 사용하여 string + 변수의 형태를..

• format_list_bulleted Tech/JavaScript
• · 2022. 1. 8.
• textsms

Global Object

전역 객체 Global Object (전역 객체) 자바스크립트는 최상위에 1개의 전역객체(Global Object)를 가집니다. 브라우저 환경 : window Node.js 환경 : global 그 외 호스트 환경 : globalThis (표준화) 브라우저 에서의 window 객체 어느 전역 객체나 함수는 window 객체의 프로퍼티로서 접근될 수 있습니다. 자바스크립트에서는 코딩할 때 전역객체를 생략할 수 있습니다. 전역 객체엔 Array와 같은 내장 객체, window.innerHeight(뷰포트의 높이를 반환함)같은 브라우저 환경 전용 변수 등이 저장되어 있습니다. 전역 변수 접근 브라우저에서 let이나 const가 아닌 var로 선언한 전역 함수나 전역 변수는 전역 객체의 프로퍼티가 됩니다. 단,..

• format_list_bulleted Tech/JavaScript
• · 2021. 8. 6.
• textsms

rest와 spread

rest와 spread (나머지 매개변수와 전개 문법) rest와 spread는 서로 떼어놓을 수 없는 개념이다. 두 문법 모두 ...을 사용하는 문법으로 눈으로 볼 때는 매우 유사해보이지만 실제 그 역할은 정반대의 개념이다. 두 개념을 비교하여 함께 알아보자. rest (나머지 매개변수) 매개변수의 마지막 위치에 사용하며 인수 목록의 나머지를 배열로 모아주는 역할을 한다. 인수 개수에 제한이 없는 함수를 만들 때 나머지 매개변수를 사용한다. 객체, 배열, 그리고 함수의 파라미터에서 사용 가능하다. 객체 사용 예시 rest는 객체와 배열에서 사용할 때 이렇게 비구조화 할당 문법과 함께 사용된다. 주로 사용할 때는 관용적으로 rest라는 키워드를 사용하지만 꼭 rest일 필요는 없다. const purpl..

• format_list_bulleted Tech/JavaScript
• · 2021. 7. 22.
• textsms