본문 바로가기

프로그래밍/javacscript30

[220127] promise, then, resolve 목록 1. promise의 목적 2. promise의 매개변수 2가지 3. then 사용법 4. promise의 상태 3가지 5. resolve 사용하는 법 promise를 사용하기 위한 선수지식 : 객체와 this 간단 정리! this에 관한 자세한 설명은 아래 블로그 게시글에 --> https://hancoco.tistory.com/36 [220107] this와 new 그리고 arrow function 객체를 만드는 놀라운 기술을 배웠다! 이제 대량생산을 어떻게 쉽고 간단하게 만드는지 알아보자. 객체란 붕어빵을 만드는 붕어빵 틀, this !주의! 우선, 가볍게만 알자. 깊게 들어가면 내용이 상 hancoco.tistory.com promise의 목적 콜백 기능은 그대로! 하지만 코드는 좀 더 깔끔.. 2022. 2. 2.
[220128] 콜백 함수와 익명함수의 차이점, 콜백지옥 익명함수와 콜백함수의 차이점 익명함수 이름 없이 생성된 함수라고 생각하면 된다. 함수명 대신 변수명에 저장되고, 호출할때 변수명을 사용하면 된다. function을 생략하고 =>을 가진 모양으로도 나타낼 수 있으며, 화살표를 달고있다고해서 애로우 함수라고도 한다. 익명 함수에 대한 자세한 설명글은 아래 게시글에 적어놓음. let abc = function() { console.log('익명함수') } let abc2 = () => { console.log('익명함수') } https://hancoco.tistory.com/75 [220107] 익명함수, arrow함수, 함수가 생성되고 호출되는 순서 목록 1. 함수를 선언하는 여러가지 방법 2. 함수가 생성되는 순서 3. 익명함수 4. 호출되는 순서 함수.. 2022. 1. 28.
[220115] js를 이용한 class="on" 생성/제거하기 목차 1. 클릭으로 class 생성,제거하기 2. 원하는 위치에 생성하기 자바스크립트 그래서 대체 뭘 어떻게 쓰는건데..하다가 드디어 실사용을 하기 시작. 배우자마자 너무 미쳤다..하고 마음속에서 기립박수쳤다. 이걸 이렇게 쓴다고?? 이런 맛에 프로메테우스가 인간한테 불을 준건가. 박수 짝짝짝 손 터지게 치고 앞으로 세바퀴 굴렀다. 미쳤다. [웹페이지는 html, css, javascript 3개로 구현되고 있는데, 자바스크립트는 html을 조정할수 있다]란 말을 실천해보자. 클릭으로 class="on" 생성하기 See the Pen make_class_on by supermint (@ma_ad_shouri) on CodePen. 클릭함으로써 id가 box1인 div를 숨기는 코드다. 클릭을 함으로써 d.. 2022. 1. 15.
[220112] 동기적코드 / 비동기적 코드 / setTimeout(), setInterval() 동기적인 방법와 비동기인 방법은 뭘까? 동기적인 코드 자바스크립트 코드는 보통 동기적으로 실행된다. 마치 책을 읽듯이 위에서 아래로, 왼쪽에서 오른쪽으로 읽어내려오며 코드를 한줄한줄 차례로 실행된다는 뜻이다. 한 코드가 실행 될때까지 다음 코드가 실행되지 않는다는 특징이 있다. 장점은 코드를 파악하기 쉽고, 유지보수, 디버깅이 쉽다. 그래서 단순 목적을 지닌 기기의 프로그래밍에 자주 이용된다. (예 : ATM기계, 키오스크, 단순단말기) 단점은 한 코드의 실행이 오래 걸릴경우 손가락만 빨며 끝나기를 기다려야 한다는 것이다. 처리하는데 10초 처리하는데 10분 처리하는데 1초 이와 같은 코드를 실행한다고 치면, 3번 코드가 실행될때까지 총 10분 10초가 걸릴것이다. 만약 이 같은 일이 쇼핑몰 구매페이지에.. 2022. 1. 12.
[220110] queryselector, onload, addEventListener, 호출메서드() 목차 1. querySelector 2. addEventListener 3. onload 4. 호출메서드() document.querySelector(selectors); 제공한 선택자 또는 선택자 뭉치와 일치하는 문서 내 첫번째 Element를 반환한다. 일치하는 요소가 없으면 찾지 못한 것이므로 빈 값인 null을 반환한다. selector : 하나 이상의 선택자를 포함한 DOMString. 유효한 CSS 선택자여야만 한다. String과 같은 UTF-16문자열이기때문에 DOMString은 String으로 연결된다. DOMString을 받는 매개변수에 null을 전달하면 보통 문자열로 변환해 "null"이 된다 return : (Object) 제공한 CSS 선택자를 만족하는 첫번째 Element 객체.. 2022. 1. 10.
[220109] 1차 배열, 2차 배열의 합을 forEach, reduce, join으로 해결하기 목차 1. 1차배열의 합 2. 2차배열의 합 주기적으로 배열을 다뤄서 요소들의 합을 내놓으라는 문제를 접하는데, 계속 찾아보고 걔념 잡기 귀찮아서 한번에 정리. 1차 배열의 합 : reduce function a(arr){ return arr.reduce((v,i)=>v+i) } console.log(a([1,2,3,4,5])) 1차 배열의 합 : forEach function a(arr){ arr.forEach(v=>sum+=v); return sum; } console.log(a([1,2,3,4,5])) 1차 배열의 합 : map function a(arr){ arr.map(v=>sum+=v); return sum; } console.log(a([1,2,3,4,5])) forEach랑 map의 차이점.. 2022. 1. 9.
[220108] Array, fill, 덧셈 삼대장(map, reduce, forEach) 목차 1. array 2. fill 3. 덧셈 삼대장 Array ( 집어넣을 요소 | 생성할 빈 배열 수) Array( element1, element2... | arrayLength ) : 생성자 새로운 array 객체를 생성할때 사용 element1, element2... : array / 안에 채울 요소, 만약 자료형이 숫자이고 단 하나일 경우 arrayLength로 넘어간다 arrayLength : 유일한 매개변수가 2^32-1 이하의 정수인경우, 그 수 만큼의 빈 배열을 갖게된다. let arr1 = Array(2) //[ 빈 요소, 빈 요소 ] let arr2 = Array('apple', 'pear') //['apple', 'pear] fill (채울 값, 시작 인덱스 번호, 끝 인덱스 번호.. 2022. 1. 8.
[220107] this와 new 그리고 arrow function 목차 1. 객체와 this의 차이점 2. this로 객체만들기 3. this의 역할과 응용 4. class로 객체만들기 객체를 만드는 놀라운 기술을 배웠다! 이제 대량생산을 어떻게 쉽고 간단하게 만드는지 알아보자. 객체에 대해서 아래 블로그에 작성해놓았다. https://hancoco.tistory.com/23 [220104] 배열과 객체 / create:function(), 객체 안에 객체or배열 목차 1. 배열과 객체 2. 객체 안에 추가하기 3. 배열과 객체의 데이터타입 배열 (array) 과 객체 (object) 배열이랑 객체가 뭐더라 //배열 array // 배열명 = {값, 값, 값} let arr = [1, 2, 3]; //객체 obj.. hancoco.tistory.com 객체란 붕어빵을 .. 2022. 1. 7.
[220105] 메서드 (split, repeat, replace, repalceAll, includes, indexOf, substring, substr, concat, valueOf, slice, splice) 목차 1. 문자열을 다루는 메서드 오늘 수업은 감자특집이라고 하겠다. 수업을ㅋㅋㅋ 듣고는 있는데 하나도 이해를 못해서 그저 같이 흘러감ㅋㅋㅋㅋㅋㅋ 나는 말하는 감자지만 괜찮아!!!! 괜찮아!!!!! 나는 살아숨쉬는 감자니까 노력하면 나아진다!!! 메서드 특징만 잡자! 객체.함수() 행동하는 애들 -> 행동해서 어떤 것을 가져온다 -> 가져오는 어떤것은 어떤 데이터 타입인가? 이런 흐름을 알면 메서드를 사용할때 왜 리턴값을 알아야하는지, 어떤 데이터 타입에서 활동하는지 알아야하는지 알 수 있다. 문자열이 뭐더라? let str = "000-000-0000"; console.log(typeof(str)); //타입은 string이 나온다 console.log(str.length); //length가 10이 .. 2022. 1. 7.
[220107] 깊은복사, 얕은복사, spread문 목차 1. 저장할때 메모리의 변화 2. 깊은복사 3. 얕은복사 4. spread문 1. 빈 공간의 값은 서로 같을까? : {} == {} console.log(1==1) //true console.log({} == {}) //false //빈 공간이라 같아보이지만 객체는 만들때마다 새로운 값을 부여해서 다르다 //제품을 찍어낼때마다 생산넘버가 다른거라고 생각하자 let a = {} let b = {} console.log(a==b) //false //배열도 객체이므로 비교하면 false a = { name:'ingoo' } //ingoo라는 확실한 값으로 저장함 b = { name:'ingoo' } console.log(a.name === b.name) //true 2. 주소값 자체를 뜯어와서 참조를 해.. 2022. 1. 7.