Javascript

자바스크립트 함수 쓸때 팁!>>>>첫번쨰>왠만하면 함수 쓸때 함수를 변수에 담아서 쓸것 const ff = (a,b) => { return a + b}왜냐면 호이스팅이 안되니 좋음!===========================두번째>함수를 오브젝트(객체)안에 서 쓸

얕은복사 깊은복사 메소드

promise 약속즉, 나는 이걸 실행할꺼야 라고 약속을 하는거죠.언제쓰냐면, 주로,서버에서 데이터를 가져올떄씀.왜 약속을 해야하나?그냥 내가 일을 처리하면 안되나?자바스트립트는 싱글 쓰레드이다.일을 하나밖에 못한다는거다.즉, 밥을 먹으면서, 전화를 받지 못하는거다.

클로저는 콜백 함수와 외부 변수의 관계를 가리키는 말입니다.

자주 쓰이는 es6 문법\-const & letArrow Fn (화살표함수)\-Template Literals (템플릿 리터럴) ${}\-Default Prameters(기본 매개 변수)const func = (name, age) => { return 이름${name}

자바스크립트 함수 리턴 //js 에서특히함수 안에서리턴을 만나면 바로 함수 종료이다.즉,function solution(num1, num2) { if(num1 === num2){ return 1; }else{ return -1;

자바스크립트 면접질문>1.프로토타입 \-프로토타입이 뭐에요?\-funtion.bind 되는 이유는?\-상속을 구현해 볼래요?this\-this는 언제 결정되냐?\-화살표함수 this는?\-this를 변경시키려면?\-call, apply 설명3.디버깅\-버그 문제를 어떻

자바스크립트에서 날짜 시간 다루는 법>>>======================================원래있는 방법>let date = new Date(2022,9 , 31)function addMonths(date, months){ let d = date.ge

자바스크립트reduce라는 함수,배열의 원소들을 누적시켜서 하나의 값으로 만들어주는 기능을 한다.reduce((prev, curr) => {}, initial);const arr = 1,2,3,4,5arr.reduce((x, y) => { log(${x}+${y} =

자바스크립트 map고차함수 HOC 맵은배열에서 각각의 원소들마다 주어진 함수를적용시켜주고그 함수에서 반환된 결과를 담은새로운 배열로 변형시켜줌. 1 2 3map()을 돌리면fn(1) -> 리턴값fn(2) -> 리턴값fn(3) -> 리턴값이렇게 배열 원소마다 다 돌려준다

Array , Object method : 객체안에 프로퍼티로 정의된 함수Object \-entries\-keys\-values====================Array\-push, pop, shift, unshift\-splice\-reverce\-isArray

일일이 모든 li 요소에이벤트리스너 붙이면 , 성능이 않좋아짐ul태그에만 이벤트리스너 붙여서하면 됨.

typeof 연산자typeof null // Objecttypeof \[] // Objecttypeof {} // Objecttypeof new Data() // Objecttypeof function // functiontypeof '' // stringtypeof

e.stopPropagation();e.stopImmediatePropagation();이벤트 전파 방지 떄문에,이 두개를 흔하게 자주 쓰시는데,비추 합니다.이벤트 전파를 이용한 코드도 짤 수 있기떄문에,꼬여버릴 수 있다.그래서예방차원의 코드는부모 단계에서미리 타겟과

fetch 사용법>프론트엔드,리액트 js에서다른서버에 있는 데이터를 요청할떄,어떤식으로 받아오는지?노드js에서 다른서버 api를 가져올떄,fetch를 사용해 가져오는 방법이 있다.axios 사용도 다룬다.일단,모질라 공식문서보면 다나온다. 일단 기본은 이 형태이고,fe

프로미스 체이닝방식function test() { fetch("https://api.testdomain.com") .then(response => { // do something }) .catch(error => { //do something });}에이싱

class Coffee { 우유종류 = "저지방우유"; makeCoffee() { this. }}new Coffee().makeCoffee(); //커피만드는중..const coffee = new Coffee();//coffee. 지금 //////////

class Coffee { 우유종류 = "저지방우유"; makeCoffee() { this. }}new Coffee().makeCoffee(); //커피만드는중..const coffee = new Coffee();//coffee. 지금 //////////

// 프로그래밍을 하다보면, 분기처리해야할 코드들이 많이 있는데, // 그럴떄는 당연히 switch 문과 , if문을 많이 사용하는데요. // 간단한 코드에서는 꽤 괜찮은데, // 조건상황이 많아지는경우는 , 코드의 중복이 많아지는것 같고,

//콜백 지옥setTimeout(() => { console.log("처리중"); setTimeout(() => { console.log("여전히"); setTimeout(() => { console.log("곧 완료"); render(

const arr = { name: "kin", age: 20 }, { name: "seoul", age: 30 }, ;

const pipe = (...fns) => (x) => fns.reduce((v, f) => f(v), x);// app만들기function App(todoList) { const inputHTML = InputView(); const todoListHT

HTML>==============================================JS > const coffeeMakingMap = { americano: () => "물" + "," + "커피원두", cappuccino: () => "우유" + ","

// 여러개의 url 에, fetch 요청을 보내는 방법은 다양합니다. 아무래도 반복처리를 해야하기 때문에 // 고차함수들 즉, promise.all, foreach, for-of .. 써야되겠죠. // 그런데 동작결과는 완전히 다를 수 있다는 점!

// const URL = "https://jsonplaceholder.typicode.com/todos/";

//자바스크립트에서 this는 결국, this가 어디에 있던 간에, 그 this를 어떻게 부르냐, 어떻게 호출을 하냐에따라서 this 가 정해진다.즉, 바뀐다//원래 this 는 window이다.function foo() { console.log(this);}//지금

//자바스크립트 객체 표현 패턴 총정리//객체 리터럴 방법// const Cars = {// init(name, year) {// this.carName = name;// this.carYear = year;// },// getCarName()

// const handler = (e, id) => { // console.log(${id} 여길 클릭했구나 ${e.offsetX}); // };

//원본코드function orderCoffee(el, orderList) { if (el) { if (Array.isArray(orderList)) { el.addEventListener("click", function () { setTi

// spread operator 스프레드 연산자 ... 펼칠수있다. // 펼침 연산자는 // 배열이나 문자열 등을 풀어서 요소 하나 하나로 전개 시킬 수 있다. //...만 붙이면 자유롭게 그 객체를 펼칠 수 있어서 여러 곳에서 유용하게 사

// i++ 와 ++i 차이//i++ 는 원래 i 값을 저장하고 그뒤에 연산 ++ 을 한다.//++i 는 미리 연산을 하고 , 결과를 리턴한다.//////////////let i = 1;let e = i++;console.log(e); // 1// let i = 1;/

// 배열 중복제거 방법 3가지/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

//reduce 함수//배열안에 모든수를 합했을떄, 나오는 값을 구하는것임.// const arr = 3, -1, 10, 5, 0;// let fruits = "apple", "banana", "orange", "pineapple", "grape";// const ar

// const obj1 = {// a: "a",// b: 1,// c: {// e: null,// f: -1,// },// };const obj1 = { a: "a", b: 1, c: "a", "b", "c", d: { e:

//배열에서 특정 인덱스를 삭제할떄는 , delete 절대 사용하지말고,// splice 써라,let fruits = "apple", "banana", "orange", "pineapple", "grape";console.log(fruits.length);console

// 애너그램 판별하기//두단어의 글자 나열 순서는 다르지만, 구성이 일치할시 -> 애너그램!//예시//LISTEN <-> SILENT//이런식임..//방법1//split, sort, join 순서대로 쓸꺼고//방법2//hashmap 오브젝트를 생성해서, 각각의

//프로미스는 비동기 async러넌스 라고하죠. 비동기나 비동기 작업 때, 주로사용되는 오브젝트.//자바스크립트 네에서는 es6떄부터 지원되는기능//// 함수에 콜백을 전달하는 대신에, 콜백을 프로미스 오브젝트내에 첨부를 하는 그런방식의 객체임.//즉.,프로미스를 사용

Document *{ box-sizing: border-box; } #result { width: 180px; height: 50px;

태그의 기본동작을 막는거는,event.preventDefault();태그의 버블링을 막는거는,event.stopPropagation();e.currentTarget직접 이벤트가 걸린 태그e.target내가 클릭한 요소버블링은 위로 타고가는 특징이다.자식에게 직접 이벤트

자바스크립트 계산 할때,인풋 1,2,3,4,5아웃풋 15기본스타일(성능은 제일 좋다)>function solution(list){ let sum = 0; for (let i =0 ; i < list.length ; i++){ sum += listi; } retur

//널 병합 과 옵셔널 체이닝

//원래는 맵과 셋이 필요도 없었다. //근데 왜 맵과 셋이 추가가 되었을까요? //우선, // 맵, 셋은 객체와 배열을 다루는 건데요... //오브젝트리터럴(객체) 과 어레이리터럴(배열) 의 차이가 있겠죠? 다른점이요. /

const obj = { name: "curryyou", job: "engineer", };

const fruits = "apple", "banana", "orange", "kiwi", "mango", "grape", "dragonfruite", "tanger

const answer = 3, 1, 4, 6; const value = "3214"; let strike = 0; let ball = 0;

//배열함수 모음 (array func)

자바스크립트 입장에서,HTML은 문자열이다.js는 html, css 를 컨트롤하는 입장임.여튼js 로 html 문자열을 다루는건랭쓰, 슬라이스정도인데,DOM을 컨트롤하면 많은걸 할 수 있다.그래서자바스크립트 입장에서는html 문서는 그냥 문서기떄문에,나름대로 정의를 하

const wrapper = document.createElement("div"); document.querySelector("body").append(wrapper); const text = document.createElement("span");

// for (let index = 1; index < 10; index++) {// for (let jdex = 1; jdex < 10; jdex++) {// console.log(index \* jdex);// }// }const numX

// const word = "hqllo my name is hyqwon";// function replaceAll(string, searchString, replaceString) {// const result = string.split(searchString).

const day = "sun", "mon", "tue", "the", "fri", "funckin Sat";function sol(a, b) { const theDay = new Date(2022-${a}-${b}); console.log(daytheDay.get

const aClass = 10, 20, 30, 40, 50;const bClass = 10, 20, 80, 40, 90;function grade(gNum) { let total = 0; for (let i = 0; i < aClass.length; i++)

const num = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;// function findX(x) {// let result = \[];// //console.log(result + "처음");// for (let i = 0; i < nu

const num = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;// console.log(Math.max("1", 20, 2, "90"));console.log(Math.max(...num));//spread 연산자는// 배열릐 대괄호를 제거해주고, 안에

const num = 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;// console.log(Math.max("1", 20, 2, "90"));console.log(Math.max(...num));//spread 연산자는// 배열릐 대괄호를 제거해주고, 안에

// 가격을 파라미터로 입력하면 10% 할인 반환 하는 함수.// 첫구매 여부가 맞을시, 추가 할인 3000원.function 할인계산기(금액, 첫구매여부) { let 할인률 = 1000; //let 첫구매여부; let 합계 = 금액 - 할인률; // if

//숫자 4개를 겹치지 않고, 랜덤하게 뽑기////답://// 즉, 랜덤하게 뽑은 숫자를 만들어서 즉,//랜덤숫자 만들때 원래는0에서 9까지 랜덤 숫자 뽑게한다음,//그 0에서 9숫자중 뽑힌 랜덤숫자를//index라는 변수로 저장하고, candidateindex 하면

"use strict";//자바스크립트는 동기적이다.//하나하나씩 동기적으로 실행된다.//콜백지옥class UserStorage { loginUser(id, passsword, onSeccess, onError){ setTimeout(() =>

const arr = 1, 2, 3, 4, 5;for (let i = 0; i < arr.length; i++) { console.log(arri);}//for offor (let arr of array) { console.log(array);}//forEac

const array = 1, 2, 3, 4;//forfor (let i = 0; i < array.length; i++) { console.log(arrayi);}// for infor (key in array) { console.log(key);}// fo

//Shorthand property names{ const ellie1 = { name: "Ellie", age: 18, }; const name = "Ellie"; const age = "18"; //old way const ellie2 = {

// 얕은 복사 , 즉 레퍼런스만const user = { name: "dave", age: "30" };const user2 = user;user2.name = "coder";console.log(user);// 깊은 복사 // 옛날 방식const user3 = {}

//false: 0 , -0 , '', null, undefined, NaN,//true: -1 , 'hello', '아무문자열', \[] , {}//즉, 로직에 뭘 수식을써서 0이 나오거나 하면 false 로 넘길 수 있고,// -1 이 나오게하면 트루이다.//로직은

function 더하기함수(num1, num2) { return num1 + num2;}function 나누기함수(num1, num2) { return num1 / num2;}function 기능하다함수(콜백함수) { const result = 콜백함수(2, 3)

class Counter { constructor() { //여기 컨스트럭쳐안에는 데이터 타입만 즉, 초기값 설정 세팅 부분 this.counter = 0; } //여기는 함수 등... increase() { this.counter++; c

//함수에서 함수를 전달할때 중요한것function doSometing(add) { console.log(add); const result = add(2, 3); console.log(result);}function add(a, b) { const sum = a

fetch 사용법>프론트엔드,리액트 js에서다른서버에 있는 데이터를 요청할떄,어떤식으로 받아오는지?노드js에서 다른서버 api를 가져올떄,fetch를 사용해 가져오는 방법이 있다.axios 사용도 다룬다.일단,모질라 공식문서보면 다나온다. 일단 기본은 이 형태이고,fe

e.stopPropagation();e.stopImmediatePropagation();이벤트 전파 방지 떄문에,이 두개를 흔하게 자주 쓰시는데,비추 합니다.이벤트 전파를 이용한 코드도 짤 수 있기떄문에,꼬여버릴 수 있다.그래서예방차원의 코드는부모 단계에서미리 타겟과

SPA의 히스토리 관리기본적인 SPA는 CSR(Client Side Rendering, 클라이언트 사이드 렌더링) 방식을 채택한다. 필요한 부분만 렌더링하며 새로고침이 없고 변하는 부분만 새로 그리는 것인데, URL이 바뀌지 않기에 히스토리 관리가 어려워질 수 있다.

Array , Object method : 객체안에 프로퍼티로 정의된 함수Object \-entries\-keys\-values====================Array\-push, pop, shift, unshift\-splice\-reverce\-isArray

클로저는 콜백 함수와 외부 변수의 관계를 가리키는 말입니다.

자바스크립트 함수 쓸때 팁!>>>>첫번쨰>왠만하면 함수 쓸때 함수를 변수에 담아서 쓸것 const ff = (a,b) => { return a + b}왜냐면 호이스팅이 안되니 좋음!===========================두번째>함수를 오브젝트(객체)안에 서 쓸

우선 20, 10, 9,8,7,6,5,4,3,2,1의 배열에서 a-b라는 연산을 모두 한 다음 그 결과값으로 정렬하는 것이 결코 아닙니다.뭐하러 굳이 뺄셈을 하고 그 값으로 또 정렬하겠습니까? 자바스크립트의 정확한 알고리즘은 아니지만 쉽게 정렬 알고리즘을 설명하면 이렇

===참 / 거짓== , != 은 쓰지말자이렇게 보통 씀..===!==<== '' "" 이것도 문자다\`\` 백틱 이것도 문자열 넣을때 사용undifined 컴퓨터가 넣은 빈값null 은 내가 넣은 빈값var 로 컴퓨터한테 기억하라고 함숫자를 문자로 바꾸는법va

자바스크립트에서스코프는기본적으로자기에게 가장가까운 순서대로 움직인다.즉,변수든 함수든 ,,,예를 들어변수를 부르면일단 그 변수가 속해있는 곳에서 한번 찾는다그다음없으면바깥에 나가서 찾는다 이게 스코프의 기본 원리이다.자바스크립트는 기본적으로 함수 스코프인데기본적으로 함

const 상수 = 값 값을 넣으면 변경할수없음블록스코프let 변할수있음스코프가 달라요블록스코프var은 함수 스코프백틱 백틱안에서는 ${} 이 안에 변수를 표시한다.${a}${b} 이런식..지저분하게 + 이거 안붙여도 된다hello${a}you화살표함수와 일반 함수의

비동기 처리>>>>>>>>>>>>>>>>>>>>>>>>>>일단 동기적 처리는 순서대로 처리한거다.예를들어글작성 -> 이메일발송 -> 작성완료이런 순서로 처리하는게 동기적 처리다.그러나 문제점은 3시간이 걸린다는 문제가있다.왜 3시간이 걸리냐면,기다리고 처리하고 기다리는

잘 모르는 "간단한" 자바스크립트 문법 5가지>{} 중괄호이거는 객체죠 , 객체리터럴이라고도 부르죠{let a = '3';}console.log(a); // 이렇게 하면 레퍼런스에러죠 밖에서 찾았으니까..그리고중요한 점은a는 블록스코프 니까 실행후 메모리에서 사라져 버

//map set 자주 씁니다. // set의 장점은 중복이 없는 배열 이죠.// set은 자료구조중에 중복이 없는 배열이기 떄문에, set은 쓸 일이 많구요.//map은 사실 저는,,사실 잘 안써봤던것 같아요.// 저는 그냥 일반 객체 써가지고,,하고,,//set 은

console.log 를 안쓰고 디버깅 하기>>>>>>​​크롬에서 개발자툴Network탭에서불러오는지 알수 있음,거기서 status 보면 200 은 잘날라온거고,400 이나 4자로 시작된거는 에러임.그런거 열어보면,하단에 Header탭으로가서 보며는,확인을 쭉 해보고,

자바스크립트 기초>인터프린터 = 해석—————렉시컬 그래머 = 기본적인 문법———컨트롤 캐릭터 = 제어문자 (우리눈에안보이는 문자)White space 공백문자Line terminators 라인을 끝내는문자커맨트키워드 미리정해져 있는 키워드 자바스크립트 언어스팩에저장되

고차함수 는 함수안에서 함수를 다루는것(파라미터로 받거나 , 리턴하거나) , 즉 고차함수는 함수를 반환한다.예) function x (high){…}function high () {…}var newFunc = new X(high());이렇게 x(high){… 처럼 함수

전치 연산자 / 후치 연산자var a = 10;var b = ++a; 이렇게 전치일때는 b는 11이 나옵니다. (a를 찍어보면 11이나옵니다.)왜냐면 1을 먼저 더한후 b로 대입시키니까요즉 ,그럼 a도 11이란 소리죠.근데 후치일떄는var a = 10;var b= a+

명령형 스타일의 코딩 방법//함수형 자바스크립트와동시성 프로그래밍===========================문제>// ( f 함수에 파라미터로 있는) list에서 홀수를 length 만큼 뽑아서 제곱한 후 모두 더하기기본 코드function f(list,lengt

아래 주어진 두개의 JS function 2개중 , 어떤것이"더 좋은 코드"라고 생각하는지와그 이유를 설명해주세요.function creacteOrUpdate1(id : number , title : string){const card = Card.find(id);if(

const let의 선언의 이유 / 재할당 할거냐 안할거냐 명시적if else 조건식은 스크립트 성능을 저하return 중복 / 코드 중복은 가독성이 떨어진다​

자바스크립트 새로운 스펙 등장했습니다.배열관련1,2,3.at(-1);이런식 입니다.옛날에는자바스크립트개발자들이배열 뽑을때const arr = 1,2,3,4,5arrarr.length - 1//5arrarr.length - 2//4arrarr.length - 3//3이런

자바스크립트에서 날짜 시간 다루는 법>>>​​원래있는 방법>​let date = new Date(2022,9 , 31)​function addMonths(date, months){ let d = date.getDate(); date.setMonth(date.getMon

​프로미스 체이닝방식function test() { fetch("https://api.testdomain.com") .then(response => { // do something }) .catch(error => { //do something });}​​

비동기 처리>>>>>>>>>>>>>>>>>>>>>>>>>>일단 동기적 처리는 순서대로 처리한거다.예를들어글작성 -> 이메일발송 -> 작성완료이런 순서로 처리하는게 동기적 처리다.그러나 문제점은 3시간이 걸린다는 문제가있다.왜 3시간이 걸리냐면,기다리고 처리하고 기다리는

먼저 함수를 선언하면 위와 같은 구조의 2개의 객체가 생성이 됩니다.하나는 function 객체이고, 다른 하나는 prototype 객체입니다.단순히 2개의 객체가 생성된 것만 아니라 두 객체는 서로 이어져 있는데함수에서는 프로토타입 객체에 prototype이라는 내

객체의 상속은즉, 주소값을 참조한다는 표현이 정확하다.상위의 값을 복사해서 내꺼에 붙여넣는게 아니고,상위의 하위가 값을 참조하는거다.(즉,하위가 상위를 가르키는게 참조다.)그러면,하위에서 상위 값을 변경할수없고(가능은하지만),참조만할뿐이고,수정하려하면 하위 자기자신의

여기서 보면,Person 함수(생성자함수)를 생성할때 순서는,먼저 오브젝트 프로토타입의 참조를 받아Person 프로토타입객체가 만들어지고,그다음Person 프로토타입객체를 바탕으로Person 함수객체(생성자함수)가 만들어진다.그리고 저기 kim은 new 해서 만든건데

그리고 생성된 함수는 prototype이라는 속성을 통해 Prototype Object에 접근할 수 있습니다. Prototype Object는 일반적인 객체와 같으며 기본적인 속성으로 constructor와 proto를 가지고 있습니다.constructor는 Prot

함수가 정의 될떄는2가지1.해당 함수에 Constructor(생성자) 자격 부여Constructor 자격이 부여되면 new를 통해 객체를 만들어 낼 수 있게 됩니다. 이것이 함수만 new 키워드를 사용할 수 있는 이유입니다.constructor가 아니면 new를 사용

객체는 항상 함수로 생성이 가능하다.function Person() {} // => 함수var personObject = new Person(); // => 함수로 객체를 생성그럼 var obj = {}; 이것도 사실 오브젝트 함수로 만든건데,그냥 저렇게 간단하게 쓰

this 로 만든 프로퍼티들은 메모리를 많이 차지한다function Person() { this.eyes = 2; this.nose = 1;}var kim = new Person();var park = new Person();console.log(kim.eyes)

프로토타입>>>>>>>>>>>>>>>>>>>>>>>>>>>>>함수가 호출을 받아 생성이 되는 시점은,사실내부에서 어떻게 동작하냐면,함수를 호출을 하면,먼저함수의 프로토타입이 먼저 생성이 되고 , 그다음 함수 그자체가 생성이 되고 실행이 된다.즉, 함수는 자기자신의 프로

일단 함수를 만들면, (그 함수가 생성자든) ,함수는 객체니까.특히 함수객체는 함수를 생성할때, 그 함수의 원형(프로토타입)이 함께 만들어진다.그러면 그 프로토 타입에는 뭐엇이 들어있냐면,(뭐 당연히 원형의 정보가 들어있겠지,,,)Prototype ObjectProto

javascript 기초 - Object prototype 이해하기소개이번 글에서 다룰 내용은 자바스크립트의 프로토타입 상속(prototypal inheritance) 이라는 확장과 객체의 재사용을 가능하게 해주며class 기반으로 인스턴스를 생성하지 않는 자바스크립트

스코프체인==================================소개이전글에서 소개한 function에 대한 글의 연속으로 이번글에서는 function 이 가진 여러가지 특성들에 대하여 알아보려고 한다. 이번 글에서 소개하는 function 의 특성은 Scope,

콜백 함수란 다른 함수의 인자로 전달된 함수를 의미합니다. 자바스크립트가 일급 객체로서 가지는 특징 중 하나죠. 콜백(콜 부른다 , 백 나중에 그니까즉, 나중에 지금말고 호출하는 함수죠)

자바스크립트 객체 문제>결론 :객체는 주소값을 저장한다.(별도의 공간에 실체를(실제값을) 따로 저장을 해놓는다.)이게 핵심입니다.(정수처럼 그냥 값을 저장하는게 아님)var json = { id : 'user1', pw : 'user1pw', dd : 'sa

자바스크립트 예외처리 1/4예외란 무엇인가? throw예외란정해진 규칙에서 벗어남즉, 자바스크립트 문법을 지켜서 코드를 짜야됨,,,그런데 실제적으로 코드가 실행이 될때문법은 맞더래도,,코드가 실행이 될때,,,정의되지않은 코드를 참조한다거나,정의되지 않은 함수를 참조할때

자바스크립트 예외처리 2/4try catch , Error 객체 일반코드function f2(){ console.log('f2 start'); console.log('f2 end');}function f1(){ console.log('f1 start'); f2(); c

자바스크립트 예외처리 3/4promise.catch();function wait(sec){ return new promise((resolve,reject) => { setTimeout(() => { reject('error'); },sec \* 1000); }

에러 해결방법 꿀팁>>>>>>>(잘못된 습관으로 코딩하는 분들이 계시기도 하셔서,,,사실 에러만 해결해도 코딩시간이 엄청 줄어듭니다. 대부분 다 에러와의 사투를 하고 계시죠, 진짜 코딩하는 시간보다, 코드를 어떻게 짤까하는 시간이 더 걸리고, 그다음에 ,에러를 찾느라

실무에서 쓰는 디자인 패턴>>>>(제로초 블로그에서 참고)\-추상팩토리\-어뎁터 (실무에 많이 쓰임)\-플라이급(프로토타입쓰는 패턴)\-퍼사드 (실무에 많이씀)\-프록시\-옵저버(실무 엄청 많이 쓰임)\-빌더

예를든것버튼이 일정시간이 지난이후 작동이 되게하는 예var a = document.createElement('button');a.innerHTML='버튼';a.classList='a';document.body.appendChild(a);var flag= true;var

연산자 우선 순위는1+1\*1일경우무조건곱하기먼저하고 더하기를 연산한다.1000+100\*010001000+100\*111001000+100\*212001000+100\*313001000+100\*122200

forEach는일단파라미터로 두개의 인자를 가짐하나는 그 해당 배열의 데이터와 인덱스즉,배열의 데이터의 각각의 데이터를 반복하는것임.물런for문도 하나씩 다 반복해서 도는것임사실 for문들의 공통점은 하나하나씩 다 각각 일일이 돌면서반복하는것임.

setTimeout()셋타임아웃에대해서셋타임 아웃은,일단 딜레이가 가장 특징적인 아이임.셋타임아웃은호출될 콜백함수와.지연시간을가짐

랜덤 숫자 생성하는법>>>>>>>>>일단 예를들어)색깔.concat(색깔후보.splice(Math.floor(Math.random() \* 색깔후보.length),1));이런 코드가 있는데,,,,이걸 분석해 보고자 이 정리를 만듬.....<랜덤 숫자 생성하는법>일

splice()함수는일단배열에서 사용하는 함수이고,사용법은,일단예를들어var a = "a","b","c","d","e","f","g";이런 배열이 있는데,이 배열을 스플라이스 하면,예를들어a.splice(0,1)이렇게 있으면괄호안에 왼쪽은 인덱스를 뜻하고,괄호안에 오른

html 에서 전체를 담당하는div를 하나 만들고자바스크립트파일에서그 전체div 를 불러와서,그냥 어펜드 차일드 해주면 그 div 안으로 들어간다.되게 간담함.

엘리먼트를 조작하는 방법 중에,클래스리스트를 통해서일단은,,css를 통해서 먼저 클래스 조건을 설정하고효과를 설정한다음클래스리스트 토글을 해서클래스가 있을땐 효과가 적용되고,없을땐 효과가 없어지는 그런 기능을 구현할수있다.

비동기 특성>비동기 특성상 만약 클릭이벤트를 구현해서 클릭을하면안의 함수가 실행이되고, 끝나면 그안의 변수에저장된거든뭐든 다 사라진다. 날아가버린다.즉, 저장이 되지 않는다는거다.이걸 방지 하기 위해서, 비동기 밖에서 변수를 선언해주고,비동기 안에서 비동기 처리를 해주

콜스택(호출스택) 순서function d(){ console.log('d');}function e(){ console.log('e');}function a(){ function b(){ function c(){ console.log('c'); } c(); c

for문 클로져 문제>>>>>>>>>>>>>>.참고로 i \* 1000 부분의 시간이 어떻게 돌아가냐면,1초기다리고 실행 그리고 2초기다리고실행 그리고 3초기다리고실행 ,,,,,99초기다리고실행 이게 전혀 아니고,그게 아니라1초와 2초 그리고 3초 이런식으로 간격을 정

클로져 쓰는 이유일단 클로져를 왜 쓰냐면?클로져는 이제 이럴때 쓴다.예를들어 뭔가를 껏다 켯다 해야되거나즉, 정해진값이 아닌 계속 업데이트된 값(변하는 값)을참조해야되는 기능을 만들때 쓰인다.예를들어) 스위치를 껏다 키는 기능은외부함수를 만들고 그안에 내부함수를 만들어

클로져 특성 1>>>>>>>>>>function hello(name) { var \_name = name; return function() { console.log('Hello, ' + \_name); };}var hello1 = hello('승민');var

클로져 특성 2>>>>>>>>>>클로져는 그 환경을 기억한다.함수 실행이 마무리되면 해당 컨텍스트는 사라집니다.(클로저 제외) 페이지가 종료되면 전역 컨텍스트가 사라집니다.여기서 클로져는 제외인데 왜그렇냐면 그 환경을 다 들고있기때문이다.예1)이거는버튼을 누르면 박스

비동기 / 이벤트리스너/참고로 비동기란 기다리는거다 즉, 대기중이었다가 실행하라고하면 그제서야 실행이되는 코드다. 그러면 비동기는 맨나중에 실행이되겠죠? /그럼 이벤트리스너는 뭔가?? 해당 이벤트에대해 대기중인 코드이다. 항상 리스닝 중이다. 그래서 듣고있다가 그 이벤

setTimeout 함수나 setInterval함수는글로벌영역에 정의될떄는 따로 호출이 필요없고, 그냥 자동으로 실행된다.셋인터벌함수는 인자에 함수나 함수명이 들어가는데, 그게 특정간격이로 실행이된다.

자바스크립트 함수>>>>함수는 \-변수에 저장할 수 있어야 한다.\-함수의 파라미터로 전달할 수 있어야한다. (함수의 파라미터로 함수를 받을수도있다.)\-함수의 반환값으로 사용할수 있어야한다. (리턴 , 함수를 리턴값으로 줄 수 있다)\-자료 구조에 저장할 수 있어야한

let / var https://poiemaweb.com/es6-block-scopehttps://gist.github.com/LeoHeo/7c2a2a6dbcf80becaaa1e61e90091e5d그니까var 는만약 var a = 10 var a =

클로져>>>>https://medium.com/@khwsc1/번역-자바스크립트-스코프와-클로저-javascript-scope-and-closures-8d402c976d19클로져 문제는왜냐하면 outer()함수가 선언될 당시의 유효한 환경을 기억하고 있다가, o

함수 스코프스코프가 어떻게 동작하는지 그림을 그려보자면, 취조실 특수 유리(단방향 투과성 유리)를 상상하시면 됩니다. 여러분이 바깥을 바라볼 수는 있지만, 바깥에 있는 사람들은 여러분을 볼 수 없죠.https://medium.com/@khwsc1/번역-자바스크

함수 return 아래에 코드를 적게되면 , 그 밑의 코드는 원래 실행이 안된다.왜냐면 return 은함수를 실행하게되면함수 안의 내용을 다 읽고, 리턴으로가서 리턴의 내용을 실행시키고,바로 함수를 그 즉시 종료시킨다.그게 리턴이다.https://www.you

로또 추첨기/자바스크립트 프로그래밍 강좌 ==============1부터 45까지 6개그리고보너스 숫자 하나더 해서총 7개를 뽑으면 되는건데그래서 로또 추첨기를 만들어 볼껀데요.=====================================1,2,3,4,5,6,7,

for문 과 배열>>>>>>for문에서var x = 'a','b','c';for(var i =0 ; i < x.length ; i ++){ console.log(xi);}여기서저 콘솔로그안에 xi 이부분에서 i 가 왜들어가냐면일단 i의 값은 분명히 숫자다.그럼 i

for문 안에 settimeout 함수 설명>질문> 1 2 3 이 출력되길 원하는데 왜 3 3 3 이 찍힐까?답>클로져 문제이다.일단 test = function () { for (i=0; i < 3; i++) { setTimeout(functi

객체안의 함수 를 그냥 접근하는 방법은a.a(); 이 있고a"a"이렇게 하는 게 있다.두번쨰 방법은 함수를 실행시키지는 않고 그냥 리터럴 값만 가져온다.함수실행은 무조건 () 괄호고"" 이건 그냥 실행하지않고 그 리터럴 내용만 가져오는것var myobject={myfu

팁>변수명 짓는거는,,팁은유니코드면 다된다.변수명으로 안되는건,1.예약어들 안되고,2.숫자로 시작하는거 안되고,3.달러 $4.언더스코어 \_5.여튼 특수문자로 시작하는거 안되고, 이것들 외에는 한글도되고,이모티콘도 되요,

실행 컨텍스트함수컨텍스트는 호출시에 만들어진다.즉 호출하기전에는 컨텍스트가 아직 없는거다.컨텍스트는 스코프로시작해서 this 로끝난다.컨텍스트는 한국말로 번역하면 문맥입니다. 쉽게 코드의 실행 환경이라고 이해하시면 될 거 같습니다.먼저 전역 컨텍스트 하나 생성 후

자바스크립트는 인터프리터 언어이다.인터프리터 언어란 목적 파일 산출과정이 없이 실행과 동시에 줄 단위로 번역이 되고, 저용량 소스에 적합하다. 코드가 실행되는 시점이 런타임이다.

렉시컬 스코프의 정확한 의미>=========================참조https://www.youtube.com/watch?v=-xqJo5VRP4A=====================================let i = 1;const f () =

자바스크립트의 실행컨텍스트 순서는var x1=1; 처음(언디) / 네번쨰(1)var x2=2; 두번쨰(언디) / 다섯(2)var x3=3; 세번쨰(언디) / 여섯(3)\*일단 여기서 파싱?순서는 위에서 아래로 한번 쭉 훍고, 다시 위에서 아래로 쭉 이렇게 순서

이벤트 흐름리스너===============이벤트 전파>(버블링과 캡처링)html 에서 이벤트는 예를들어 버튼은 input 태그에 감싸져 있고,input 태그는 fieldset이라는태그에,,,fieldset은 body태그에body태그는 html 태그에 감싸져 있다.즉

이벤트 기본동작 취소이벤트 객체DOM에 대한 이벤트에 연결한 함수는 이벤트 객체를 매개변수로 사용할 수 있습니다. 이벤트 객체에는 이벤트에 대한 정보들과 이벤트를 조작하는 메소드들이 들어있습니다.document.onclick = function(event) { eve

call , apply , bind 첫번째==========================call 는var obj = { num : 2 } ;var addToThis = function (a){ return this.num + a;};// 여기서 코드를 보면 이제 함수에

call , apply , bind 두번째==========================let add = function(c){ console.log(this.a + this.b + c);};let obj = { a:1, b:2};add.call(obj , 3); //

call , apply , bind 세번째==========================안녕하세요. 이번 시간에는 함수의 메소드에 대해 알아보겠습니다.초보 강좌에서 숫자, 배열, 문자열에 대한 메소드에 대해서만 알려드렸죠. 함수에도 기본 메소드가 있습니다. 하지만 초보

call , apply , bind 다섯번째==========================자바스크립트에서는 일반적인 방법 외에도, 함수를 어디서 어떻게 호출했느냐와 관계없이 this가 무엇인지 지정할 수 있다.callcall 메서드는 모든 함수에서 사용할 수 있으며,

call , apply , bind 여섯번째==========================javscript를 사용하면서, 자주 헷갈렸지만 중요한 this binding에 대해 다뤄보았다.binding이란?옛날에는 this를 binding한다는 말 조차 처음에는 이해가

첫번쨰편2 == 2.valueOf()===== (형과 값이 같아야한다 , 일치)는 2개 또는 는 3개는 어떻게 동작하는가?valueOf() / toString()이거는 뭔가?기본형 (String , Number , boolean , undefined , symbol)

두번쨰 편function abc(){var a = ‘bbb’;console.log(a) // bbbfunction c(){console.log(a); // undefined(function(){console.log(a); // undefineda = ‘ccc’;})

세번째 편this일단 this는 함수호출할때 어떻게 호출하냐 어떤방식으로 호출하냐로 정해진다this 는 스코프를 가리키지않는다상위 글로벌은 다 윈도우다함수에서 this 는 인터프린터시점에 만들어지지않고 , 실행할때 만들어진다함수를 실행시키면 this 랑 argument

네번쨰편var a = 0;for(var i = 5 ; i--;){ a++};console.log(a); //var b = 0;for(var i = 5; i--, i;){ b++};console.log(b); //표현식 (expression)\-자바스크립트 인터프리터가

다섯번째편===============================문장 statement\-명령을 수행\-예) if , for\-자바스크립트 프로그램이란 문장의 모음을 말한다.표현문i++;\++i;delete a.a;문장 안에 표현식이 존재한다.문장이란? \-복합문

여섯번째편====================================================여섯번쨰시간 본편!!!!!!========================값의 변환에대한 문제들>>>>>>>>>>>>0 < 1 참'a' < 'b' 참0 &l

일곱번쨰편 /여덟번째편============================이제 본격적인 일곱번째편 내용!!!==================6번 문제function Child(aa,bb){ if(this.constructor !== Child)new Child(); t

아홉번째편============================get 은 프로토타입 체인을 따라 검색한다.set 은 바로 객체에 쓴다.즉,둘은 비대칭적인면이 있다.근데 이 문법은 ECMA3 점때 버전에서는 이렇게 했지만 5점때 버전에서는 바꼇다set은 프로토타입체인을 타고

열번쨰 편==============================function f(x){return {fn:function(){return x}}}var a = f(0);a.fn();function f(x){return {}} // 함수생성하고 리턴값으로 빈객체 생성v

열한째 편===============================\*일치는 \-기본형일 경우엔 값과 타입이 같아야한다.\-참조형일 경우일 떄는같은 값을 참조하고 있어야 한다.\*일치하면 동등하다.(동등 = 일치(일치가 동등안에 속함))undefined = null 동등

호이스팅변수는처음 인터프리터시점에서는 어떻게 되냐면,\\var a = 1;이라는 코드를 보면처음에var a이런 형태로 처음 인터프린터가 되고,(그래서 저기를 처음에 찍어보면 undefined 가 나오는거다. 즉, undefined 로 할당이 되어나오는것 보다는 그냥 저

함수편====================================함수 종류1 내장함수 (중첩함수)2콜백함수(고차함수 (higher order function))3재귀함수내장함수function outter(){ var t1 = 1; var t2 = 2;}outter

객체편===============================객체사전적정의 : 물건 , 물체객체지향 : 세상의 수많은 객체를, 현재상태와 행동으로 정의 하고있다.(즉, 객체는 변수와 함수 이렇게? 정의가 되겠죠.)예)나무 , 뿌리 = 현재상태 (스테이트)나무 = 광합성

배열편 리터럴 방식이란:값을 직접 입력하는 방식\*리터럴은 문자자체라는 의미다.var a = "a","b","c";// 이렇게 대괄호만들어서 직접 작성한걸 리터럴 방식으로 작성한거다.var t = ;그리고저 배열안에 a b c 를 보통 데이터라고 부른다(떄에따라 엘리

변수편>변수 \-어떤 방에 문자나 숫자 들 어떤 값들을 담아내는 공간변수 이름 지을때,캐멀케이스가 있고,스네이크 케이스가 있다.캐멀은 koreaSeoulHome 이렇게 중간 시작점에 대문자로스네이크는 korea_seoul_home 중간에 언더바 넣는거변수의 데이터 타

출처 : 유튜버 프롱트님 면접 단골 질문 : \*클로져 외부함수a = 0;리턴되는내부함수b;a+b;이러면외부함수는 할일을 마쳐서 종료가 되어야되는데,지금 내부함수에서 a를 쓰고있기 때문에, 계속 참조를 하고 있기 때문에,외부함수가 종료를 못하고 있다.(보관 되어 메모리

출처 : 애플코딩Ajaxasynchronousjavascriptandxml서버와비동기적으로데이터 주고받는자바스크립트 기술.서버는그냥컴퓨터인데,하드 디스크 입니다.즉,저장공간이죠.서버는 저장공간, 하드디스크 입니다.내가,저장공간이 많을 수록,이거는 요고 저장하는 공간,저

<이제는객체, Map, Set 골라쓰기>참조https://velog.io/@himprover/%EC%9D%B4%EC%A0%9C%EB%8A%94-%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%

JavaScript 자바스크립트 배열의 중복값 제거하기출처 : https://jerryjerryjerry.tistory.com/157Set을 이용한 중복 제거const array = 1, 2, 3, 3, 4, 4, 5;const uniqueArray = ...

babel.config.js 파일과 .babelrc 차이점바벨을 설정할 때, babel.config.js 파일과 .babelrc 파일의 차이점이 궁금해서 찾아보았습니다.바벨 설정 파일 포맷바벨은 두 가지 설정 파일 포맷을 가집니다. 두 가지 파일 포맷은 단독으로 쓰일

출처 : https://velog.io/@duckgus/forEach-map-%EB%AC%B4%EC%8A%A8-%EC%B0%A8%EC%9D%B4%EA%B0%80-%EC%9E%88%EC%9D%84%EA%B9%8C사건의 발단자바스크립트에서 배열 내장 함수를 배우던

자바스크립트>\-DOM (document object model) manipulation예) 웹사이트에 있는 돔트리 중에서, 특정한 버튼을 찾아서 ,버튼의 색깔을 바꾸고, 크기를 조정하고 이런것들이다.\-백엔드와 커뮤니케이션할 수 있는 Fetch API / Ajax