dada's

01. split() : 인자로 구분자와 limit를 받는다. limit는 구분자로 분리할 문자열의 개수이다. (배열로 리턴) 인자로 아무것도 전달하지 않으면 문자열 전체를 배열에 담아 리턴한다 let str = 'Hello, Word, Javascript' console.log(str.split(',')) // => ['Hello', 'Word', 'Javascript'] console.log(str.split(',', 1)) // => ['Hello'] console.log(str.split(',', 2)) // => ['Hello', 'Word'] // 아래와 같이 리턴받으면 각각의 값이 변수에 저장됨 let [a, b, c] = str.split(' ') console.log(a) // => He..

class란 자바스크립트에서 클래스란 함수의 한 종류이다. 동일한 종류의 객체를 여러개 생성해야하는 경우 new 연산자와 생성자 함수, 클래스를 사용할 수 있다. [ 기본 문법 ] class User { constructor(name) { this.name = name; } sayHi() { alert(this.name) } } // 사용법 let user = new User("Kim"); user.sayHi() // Kim 출력 » new User호출시 일어나는 일 새로운 객체 생성 → 넘겨받은 인수와 함께 constructor가 자동으로 실행된다. 이때 인수 'kim'이 this.name에 할당 » class User{...} 문법 구조가 진짜 하는 일 User라는 이름을 가진 함수를 만든다 → 함수..

fetch() 함수가 지원이 되면서 대부분의 경우 사용 할 수 있기 때문에 굳이 라이브러리(axios, jquery)를 사용하지 않아도 원격 api를 호출 할 수 있다. 📌 fetch() 사용법 : 첫번째 인자로 url, 두번째 인자로 옵션 객체를 받고 promise타입의 객체를 반환한다. 반환된 객체는 api호출이 성공했을 경우에는 응답(respones) 객체를 resolve(해결)하고 실패의 경우 예외(error)객체를 reject(거부)한다. fetch(url, options) .then((response) => console.log("response:", response)) .catch((error) => console.log("error:", error)); 옵션객체에는 HTTP방식(method..

자바스크립트에서 var와 let은 변수를 선언해주는 키워드이다. 그렇다면 이 둘의 차이점은 무엇이 있고 왜 let으로 사용하길 권장하는지 알아보자. 일단, let은 javascript es6문법이다. var사용시 나타났던 문제들을 보완하여 나온 문법인것이다. 기존 var사용시 문제점들을 알기 전에 '호이스팅'이라는 개념에 대해 먼저 알아보자. 💡 호이스팅 : 자바스크립트엔진이 자바스크립트 코드를 순차적으로 읽기 전에 변수,함수들이 어떤것이 있는지 선언되어있는 변수,함수를 먼저 체크를하고 변수가 사용되는 곳에서 처음에 체크한 리스트에서 꺼내서 주는데 이렇게 코드가 실행되기 전에 선언된 변수,함수가 맨 위로 끌려올라가서 체크 당하는 현상을 호이스팅이라고 한다. [var사용시 문제점] 1. 변수가 선언되기 전..

📍동기(Synchronous) : 동기란 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식이다. 모든 일이 순차적으로 실행됨. 📍 비동기(Asynchronous) : 요청을 즉시 처리하지 않아도 대기 시간 동안 또 다른 동작이 이루어지는 방식이다. 모든 일이 병렬적으로 실행됨. [ 비동기 처리를 사용하는 경우 💡 ] 1. 사용자 이벤트 처리 브라우저 화면에서 발생하는 사용자의 이벤트는 예측이 불가능하여 특정 이벤트가 발생할 때 호출을 원하는 내용을 callback함수에 전달하게 된다. (클릭이나 마우스오버 등등..) 2.네트워크 응답 처리 화면단에서 서버에게 요청을 보냈을 때, 그 응답이 언제 올 지 알 수 없기 때문에 이런 서버에 대한 응답처리도 비동기 적으로 처리해야된다. 3. 파일을 읽..

순수 자바스크립트로 tab기능을 만들어 보았다 1. ui 만들기 [HTML] Products Information Shipping Shipping 상품설명입니다. Product 상품정보입니다. Info 배송정보입니다. Shipping 배송정보입니다. Shipping [CSS] ul.list { list-style-type: none; margin: 0; padding: 0; border-bottom: 1px solid #ccc; } ul.list::after { content: ''; display: block; clear: both; } .tab-button { display: block; padding: 10px 20px 10px 20px; float: left; margin-right: -1px; ..

javascript 안에서 this는 4가지 정도의 의미를 가지고 있다. 1. window object 💡window : javascript의 기본 함수들이 들어있는 object이다 console.log(this); //window object 출력 function 함수(){ console.log(this); } 함수(); //window object 출력 이렇게 아무것도 없이 this를 출력하면 window object를 뜻한다. 그런데 'use strict' 모드에서 출력을 하면 undefined가 나온다. 2. object안의 함수(메소드)에서의 this = 해당 메소드를 가지고 있는 object var object = { data : 'kim', 함수 : function(){ console.log..