분류 전체보기62

• display: inline-block, 가로 정렬 flex, grid https://www.youtube.com/watch?v=6KwQo8oqb7Y&list=PLpJDjPqxGWGp3Pitou_dT_DeEIPK_aPxo&index=4 Tip 메뉴1 메뉴2 메뉴3 메뉴4 1) display:inline inline 은 넓이, 높이 속성이 없다. .menus > li { display: inline; /* li 블록을 inline으로. w,h 안먹힘*/ width: 3200px; height: 100px; } 2) float: left; 수직 맞추기가 어렵다. 3) display: flex; (추천) 부모 클래스 ul 에 주면, 자식 정렬. 수직은 align-items: center; 수평 간격은 justify-content 4) display: grid /* display:.. html_css 2022. 11. 2.

• 제너레이터 요약 제너레이터는 제너레이터 함수 function* f(…) {…}을 사용해 만듭니다. yield 연산자는 제너레이터 안에 있어야 합니다. next/yield 호출을 사용하면 외부 코드와 제너레이터 간에 결과를 교환할 수 있습니다. 모던 자바스크립트에서는 제너레이터를 잘 사용하지 않습니다. 그러나 제너레이터를 사용하면 실행 중에도 제너레이터 호출 코드와 데이터를 교환할 수 있기 때문에 유용한 경우가 종종 있습니다. 그리고 제너레이터를 사용하면 이터러블 객체를 쉽게 만들 수 있다는 장점도 있습니다. 다음 챕터에선 for await ... of 루프 안 비동기 데이터 스트림을 다룰 때 사용되는 비동기 제너레이터(asnyc generator)에 대해 알아볼 예정입니다. 비동기 제너레이터는 페이지네이션을 사용해.. 자바스크립트 문법/중고급(비동기_프라미스_this) 2022. 10. 31.

• arr.filter(callback) arr.filter(callback) ** 코어 자바 스크립트 arr.filter(callback(element[, index[, array]]) [, thisArg]) const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present']; words 배열에서 원하는 요소만 뽑아서(필터) -> 원하는 조건을 callback 으로. 각 요소를 시험할 콜백 함수(true->반환) : 내부적으로 for 가 있다는 의미 배열을 만든다. --> return 값 이 배열 다음 세 가지 매개변수를 받습니다. element : 처리할 현재 요소. index : 처리할 현재 요소의 인덱스. array : filter를 호출한 배열. thisArg.. 자바스크립트 문법/배열_반복문_객체 2022. 10. 28.

• 

  비동기 promise, async/await (생활코딩) 생활코딩이 짱! 콜백 Hell --> Promise --> async / await Promise 사용하기 // 남이 만든 promise 를 사용. (소비자) fetched = fetch('https://jsonplaceholder.typicode.com/posts') .then(response=>response.json()) // response.json()은 promise리턴->.then .catch(reason=>console.log(reaseon)) // rejected .then(data=>console.log('프라미스 체이닝',data)) // 프라미스 chaining 방식 생산자. 남이 Promise 를 사용하도록 (기초) // 매개변수에 성공,실패를 알려주는 콜백함수 필요. // var .. 자바스크립트 문법/중고급(비동기_프라미스_this) 2022. 10. 28.

• 27-3) 배열 고차 함수(sort, forEach,map,filter 등) 9 배열 고차 함수 (★★★) 고차함수는 인수로 함수를 받거나, 함수를 리턴하는 함수. 조건문과 반복문을 제거하여 간단하게하고, 변수 사용을 억제하여 상태 변경을 피하기 위함. 함수형 프로그래밍은 순수 함수를 통해 부수 효과를 최대한 억제하여 오류를 피하고, 프로그램의 안정성을 높이려는 노력의 일환이다. sort 27-87 const fruits = ['Banana', 'Orange', 'Apple']; // 오름차순(ascending) 정렬 fruits.sort(); // sort 메서드는 원본 배열을 직접 변경한다. console.log(fruits); // ['Apple', 'Banana', 'Orange'] 27-88 const fruits = ['바나나', '오렌지', '사과']; // 오름차순.. 자바스크립트 문법/배열_반복문_객체 2022. 10. 27.

• 27-1) 배열 : 생성/수정/삭제 1. 배열이란 배열이 왜 뒤에 나올까 했는데, 클래스/프로토타입과 콜백 함수(화살표, this) 등 한꺼번에 다루기 위함이였음. 27-06 const arr = [1, 2, 3]; arr.constructor === Array // -> true Object.getPrototypeOf(arr) === Array.prototype // -> true 27-09 js 배열은 배열이 아니다? 프로퍼티로 index와, length를 갖는 객체다. // "16.2. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체" 참고 console.log(Object.getOwnPropertyDescriptors([1, 2, 3])); /* { '0': {value: 1, writable: true, enumerable: tru.. 자바스크립트 문법/배열_반복문_객체 2022. 10. 26.

• 26 ES6 함수의 추가 기능 code 25장 클래스까지 1독 후, ES6 함수의 추가 기능이란 제목에 쉽게 생각했는데.... 이건 뭐. 거의 공부했다고 풀어졌다가, 완전 피X 싸고, 자괴감이 들었던 장. 역시 마음 가짐이 중요해.... ㅠㅠ 전에 자바 공부할 때 생각하면, 문법 이론을 공부하는 파트는 대부분 책의 절반을 차지하는데, 그 후부터는 공부했다 생각하기에, 설명없이 그걸 기본으로 깔고, 진도가 나가기 때문에 기초가 잘 돼 있으면, 이제 뭘 좀 하는구나라는 재미를 느낄 수도 있고, 개념이 안잡혀있으면.... 이렇게 현타가 올 수 있는거다. 나는 뭘 공부했나. 그럴 때는 빨리 기초 과정 재학습이 필요하다는 것을 다시 상기시켜주었다. 일반 함수 : 다 있음. constructor, prototype, super, arguments 메서드.. 자바스크립트 문법 2022. 10. 25.

• this, 콜백 ::: 코어 자바 스크립트 1 2 3 코어 p.73 this var obj1 = { // 1) 객체 생성: obj1 안에 outer 익명 함수 프로퍼티 outer: function() { // 3) obj1.outer() 함수의 실행 컨텍스트 생성->호이스팅. obj1로 this 바인딩 console.log(this); // 4) this 는 obj1 var innerFunc = function() { // 5) innerFunc 는 지역변수.outer스코프에서만 접근 console.log(this); // 전역 or obj2 } innerFunc(); // 6) 일반함수로 직접 호출("." 이 없다.) this 는 전역 var obj2 = { innerMethod: innerFunc }; obj2.innerMethod(); //.. 자바스크립트 문법/중고급(비동기_프라미스_this) 2022. 10. 20.

• javascript 학습 중 (책과 강의 등) 웹은 나랑 정말 적성에 안맞는 것 같다. html, css 는 특히, 디자인이라는 인식이 커서 특히 관심이 없는 것 같다. 디자인은 컨텐츠에 집중할 수 있도록, 미니멀리즘, 심플이 좋아서, 더더욱 자바스크립트, css 에 관심이 안가는걸 어떡하니.... 파이썬 자동화라든가, ERP 같은 프로그램 만드는 것엔 집중이 매우 잘 되는데... 이건 정말 적성 문제인것 같다. 고민 최대한 빨리 끝내려고 하지만, 이건 뭐... 손에 잘 안잡혀서 ㅠㅠ 동기부여가 더 이상 안돼서 이 속도로 익히게 된다면, ERP 언어로 바꿔야할 것 같다. C# 이나 자바로 갈아타야하지 않을까... 동기 부여. 목표 구글 스프레드시트 연계 (코로나 보드) 눈이 반짝 뜨였던 부분이 또 블로그 글에서 제목, 소제목으로 자동 목차(TOC) .. 자바스크립트 문법 2022. 10. 13.

• 25장 클래스 (10/7) Deep Dive 책은 19장 프로토타입이 하이라이트였어... 서브 클래스의 super 호출 (슈퍼클래스 호출)이 중요한 이유 new 서브클래스() 호출 서브 클래스 constructor 에서 super() 슈퍼 클래스 constructor 에서 인스턴스 생성 후, 서브에 반환 : 수퍼클래스가 인스턴스를 생성했으나, "new와 함께 서브클래스가 호출"했으므로, new. target은 서브클래스. 즉, 수퍼클래스가 생성한(생성해서 반환한) 인스턴스는 서브클래스가 생성한 것으로 처리된다. 결과적으로 인스턴스의 프로토타입은 슈퍼클? 서브클? --> 서브클래스.prototype 서브클래스에서 인스턴스를 this 바인딩하여 그대로 사용. 25.8.3 동적 상속 (클래스 상속 or 생성자 함수 상속) 동적 상속 코.. 자바스크립트 문법 2022. 9. 30.

• 

  24장 클로저 준비 운동 js 엔진은 함수가 호출될 때, 1) 함수를 호출한 위치가 아니라 정의한 위치(렉시컬 스코프) 에 따라 상위 스코프를 결정하고, 2) 상위 스코프를 내부슬롯에 저장. 클로저? 어디에 써? 변수 직접 접근변경을 막는 것과 같이 상태를 은닉해서, 특정 함수에게만 상태 변경을 허용하기 위해 사용. 클로저(Closure)란? 중첩 함수에서 함수가 종료된 이후에도, 내부 함수가 외부 함수의 변수를 참조하게 만든다는 거. 몬소리야? 외부 함수가 실행 종료된 이후, 외부 함수의 변수에 어떻게 접근 가능한가? 몬소리야. 어떻게? 1) 실행 컨텍스트 2) 렉시컬 스코프 생성/기억 상위 스코프(외부 함수)의 변수를 참조하던 내부 함수를 return 외부 함수는 .... 죽어도, 유산은 남아있는 거. 어디에? 내.. 자바스크립트 문법/중고급(비동기_프라미스_this) 2022. 9. 30.

• 22장 this 1. this : 메서드에서는 호출한 객체를 가리킴 this 는 객체의 프로퍼티나 메서드를 참조하기 위한 자기 참조 변수 클래스 기반 언어 this 자바스크립트 this 인스턴스 함수가 호출되는 방식에 따라 동적 결정 전역에서, 일반 함수내에서 : window 전역 객체 ---> this 를 일치시킬 방법은? 생성자 함수 내부: 인스턴스 메서드(객체의 프로퍼티가 함수)에서는 호출한 객체 Function.prototype.apply/call/bind 메서드에 의한 간접 호출 //1. 전역 window console.log(this); // window //2. 생성자 함수 내부: 인스턴스 function Person(name) { this.name = name; console.log(this); } con.. 자바스크립트 문법/중고급(비동기_프라미스_this) 2022. 9. 30.