욕심도 참 많아

클로저(Closure) 란 1. 함수와 그 함수가 선언된 렉시컬 환경의 조합2. 다른 곳으로 넘긴 함수 내에서 외부 변수를 사용하는 경우 , 해당 변수는 어딘가에 접근해야 하므로 js에서는 함수를 프로그램 내 어디에서 실행했는지와는 상관없이 함수를 정의할 때 결정된 스코프를 유지하는 것 이 클로저의 특징은 함수가 자신이 생성될 때의 렉시컬 환경을 "기억한다" 는 함수라는 것이다.그러므로 외부 함수가 종료된 후에도 외부 함수의 변수에 접근 할 수 있다. 주로 비동기 처리 , 데이터 캡슐화 , 고차 함수 콜백등의 상황에서 사용된다. function createGreeting(greeting) { return function(name) { console.log(greeti..

스코프(Scope) 란변수나 함수같은 식별자가 유효한 범위를 의미한다.크게 Global Scope / Local Scope로 분류된다.JS엔진 입장에서 오류가 발생하는걸 알수 잇는 방법은 오류가 발생한 문이 실행 되기전 에 프로그램 내 스코프와 변수 관계 전부를 사전 파악하는 것이다.프로그램이 컴파일 되는 이 시점에 스코프는 결정이 된다. (== 런타임 환경에는 영향을 받지 않는다.)이렇게 컴파일 타임에 결정되는 스코프를 렉시컬 스코프라고 한다.컴파일 도중에 프로그램 실행에 필요한 모든 렉시컬 스코프가 들어간 지도가 만들어지고, 실제 각 스코프를 실행해야만 하는 런타임 전까지 스코프가 생성되지 않는다(렉시컬 : 컴파일 단계 중 첫 단계인 렉싱(파싱) 을 의미) 사실 프로그램이 실행 되는 동안 js ..

Javascript => 객체 지향 프로그래밍 언어 클래스가 없어서 객체지향이 아니라고 생각하는 사람들도 있으나 프로토타입 기반의 객체지향 언어다. 객체의 특징 - 다양한 타입의 값을 하나의 단위로 구성 - 변경 가능 - 0개 이상의 프로퍼티로 구성 / 프로퍼티는 key : value 로 구성 - function도 프로퍼티의 값으로 설정 가능 : 이때 일반 함수와 구분하기 위해 method 라 칭한다. (프로퍼티 : 객체의 상태를 나타내는 값) 자바스크립트는 클래스 개념이 없고 별도의 객체 생성 방법이 존재한다. => ES6 부터는 클래스도 지원한다! 객체 리터럴 object 생성자 함수 생성자 함수 Object.create 메서드 클래스(ES6) 여기서 객체 리터럴 이란? 객체를 표현할 때 , 중괄호 ..

회사에서 gif 파일을 메인화면에 띄워줄 필요가 있었는데, 그냥 gif링크를 올리는 것은 언제 gif가 없어질 지 모르고, 링크가 바뀔 수 도 있으니 Base64 파일형식으로 firebase storage에 저장하고자 하였다. if (newSeason.img) { const response = await fetch(newSeason.img); const blob = await response.blob(); const base64 = await new Promise((resolve) => { const reader = new FileReader(); reader.readAsDataURL(blob); reader.onloadend = () => { const base64data = reader.result;..

회사에서 firebase database에서 데이터들을 받아오고 화면에 띄우는 작업을 하는 도중, 전체 데이터가 안받아져 오는 에러를 발견했다. 코드상 문제는 없었다고 생각해서 계속 고쳐봤는데도 똑같은 문제가 발생해서 서칭을 해보니 js 에서 map 은 그 자체로 체이닝을 할 수 없고 , map 이후에 코드를 실행하려면 Promise.all 을 사용해 줘야 한다는 것을 발견했다. Promise.all(arr.map(data)=>{ ~~~~~~~~ ).then(()=>{ ~~~~ }) } 이런식으로 map 을 한번에 Promise.all() Scope 로 감싸주면 , map에서 여러번 반복되는 데이터를 한꺼번에 모아서 할수있어진다! 하지만 이 방식은 map 의 새로운 원소들은 끝나는 순서대로 리턴되기에, ..

1. div와 span 의 차이점 콘텐츠의 영역이나 그룹화를 할때 사용 다른 텍스트와 구별하기 위해 사용 div는 가로공간 전체를 차지하고 인라인요소가 아니기에 width, height 크기 지정이 가능하고 줄바꿈이 되지만 span은 인라인 요소이며 문장의 길이공간만큼 차지함 핵심은 줄바꿈!!!! 2. 이벤트 버블링 이란? 어떤 객체에 대한 이벤트가 발생했을때, 해당 객체의 최상위 부모까지 이벤트가 전달 되는 과정 html구조상 자식 요소에 발생한 이벤트가 상위 요소에 영향을 미치는 것인데 이를 차단하고 싶을때는 e.stopPropagation을 호출하면 이벤트 전파를 막을 수 있다. 3. 'Call by value'와 'Call by reference'란? 변수 혹은 객체등이 함수의 인자로 들어와 매개..