느닷없는 IT+人 성장기 느닷없는 IT+人 성장기

Javascript 엔진에서의 작업 실행처리 JS 내부 동작 과정 1. MemoryHeap 일반적으로 우리가 선언하는 변수들이 저장되는 곳 (메모리 할당) 2. Heap object 들이 담기는 구조화 되지 않은 메모리 영역 3. CallStack last in first out 원칙 function 들을 call 해서 stack 처럼 쌓아두고(저장) 하나씩 (싱글스레드) 실행하는 곳 4. Callback queue first in first out 원칙 다른 fuction 에게 인자로 전달된 function 들이 queue 처럼 쌓여있는 곳 5. Event Loop 콜스택과 콜백큐를 항상 주시하고 콜스택이 비어지면 콜백큐의 콜백함수를 콜스택으로 보내준다 6. Web APIs 비동기처리를 담당하는 API..

호이스팅이란? 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동 호이스팅은 스코프 내부에서 일어나기 때문에, 예를들어 함수 내의 스코프에서도 TDZ 의 영향을 받아, let이나 const 는 할당을 하기 전에 사용할 수 없다 함수보다 먼저 선언된 let 변수가 있고, 함수내에 같은 let 변수가 선언이 되어 있을때, 호이스팅이 일어나지 않는다면 함수보다 먼저 선언된 let 변수를 사용할 수 있어야한다. 하지만 함수라는 스코프 내에 let 변수가 선언이 되어 있고, 이것은 호이스팅으로 해당 스코프(해당 함수) 내에서 최상위에 선언된 것 처럼 여겨지기 때문에 호이스팅과 TDZ 의 영향을 모두 받아 에러가 발생한다고 볼 수 있다. var 는 선언하기 전에 사용할 수 있다 var 로 선언된 변수는..

Filter 메서드 더보기 filter 메서드는 기본적으로 특정 조건을 주고, 해당 조건이 부합하는 데이터를 말 그대로 필터링해 새로운 배열로 반환해 준다. -> 그렇기 때문에, 조건에 대한 로직을 확실히 이해하고 설정해야 하는 것이 당연하다. ->> 필터를 사용하기 전에 먼저 확인해야하는 것은 또 당연한 이야기지만, 그 조건에 필요한 요소들이 제대로 갖춰졌는가 이다. import React from "react"; import styled from "styled-components"; import ChildComment from "./ChildComment"; const ChildList = props => { const childList = props.dataList.childComment; cons..

다수의 이벤트가 일어날때 사용되는 대표적인 관리 방법 예를들어, 검색창에 검색을 할때 타이핑 한글자 한글자에 따라 연관검색어가 바뀌는 이벤트에서 너무 많은 요청들이 동시에 발생되는 것을 막아주는 것. 온체인지의 발생 자체를 막는게 아니라, 온체인지가 일어나면 실행되는 콜백을 효과적으로 제어해준다. Debounce 이벤트가 일어났을때 일정시간을 기다렸다가 이벤트를 수행함. 정해놓은 일정 시간내에 이벤트가 또 들어오면, 이전 요청을 취소하고 새로운 이벤트가 들어온 그 시점을 기준으로 다시 일정시간을 기다린다. -> 마지막 이벤트로부터 일정시간이 다 지나면 그때 API 요청을 한다. Throttle 일정시간동안 일어난 이벤트를 모아서 주기적으로 한번씩 실행. 일정 시간동안 새로운 이벤트가 일어나도 이전요청을 ..

자바스크립트는 싱글 쓰레드 동작 언어 (쓰레드는 일꾼의 개념) -> 동시작업이 안되고, 작업을 하나씩 수행한다. 그러나, 비동기작업은 동시에 수행할 수 있다. 동시에 수행한다는 표현으로 혼동이 있을 수 있어, 비유하자면 다음과 같다. 자바스크립트 비동기 작업 -하나의 일꾼이 2개의 작업을 동시에 수행하는 것이 아니라, 일꾼을 도와주는 존재에게 위임을 해서 그 위임된 작업이 처리 될때까지 각각 다른 작업을 동시에 진행하는 것. - 어떤 작업하나를 요청해두고, 다른 작업을 수행하다가, 요청한 작업에 대한 결과가 나오면 또 그 결과에 이어서 진행하는 것. 요청하고, 즉시 결과가 나오는게 아니고, 요청 후 결과가 나올때까지 기다려야 하니까 그 텀에 다른 작업을 하면서 기다리기 때문에, 동기가 아니라 비동기. 자..

자바스크립트에서는 함수를 특별한 값으로 취급한다 값인데, 행동(동작)이 있는 값이다 -> 응용하면 함수 복사, 매개변수처럼 전달하는 것도 가능. *더 공부해보면 좋은 이론 -> 렉시컬 환경이란? 함수 선언문과 표현식 선언문 표현식 *화살표 함수는 생성자로, 제너레이터로는 못쓴다. (ex, 표현식에서 this는 그 자체인데, 화살표함수는 부모를 불러온다) 생성자로도 만들수 있다.(오류 발생시 문제소지가 많기 때문에 권하지는 않는다) 지역변수와 외부 변수 지역변수는, 함수 내에서 선언, 함수 내에서만 접근 가능. 외부(global)변수는, 함수 외부에서 선언, 함수내에서도 접근 가능. ->하지만 함수내부에 같은 이름의 지역변수가 있다면 지역변수가 우선시 된다. *매개변수는 인수를 복사한 값이다 ->함수는 ..

원시형과 객체형의 가장 큰 차이 - 원시형은 하나의 타입만, 객체형은 여러 타입의 데이터를 담을 수 있다. 구성 {...} 중괄호 안에 여러 쌍의 프로퍼티를 넣을 수 있고, 프로퍼티는 key : value 로 구성. 이때, key 에는 문자형만, value는 모든 자료형이 들어갈 수 있다. (배열도 객체이다. 키가 없어보일 수 있지만, 순서index로 가져올 수 있다) Const 재할당 *const는 재할당이 안된다고 했지만, 객체는 수정될 수 있다. 원시형은 변수 설정 과정에서 메모리에 값이 바로 들어가지만, 객체형은 객체가 생기는 메모리에 값이 들어가고, 그 주소를 가져온다 (객체에 대한 참조) ->주소가 변하지 않기 때문에 객체 자체는 수정을 할 수가 있다. (객체의 프로퍼티는 보호되지 않는다.)

변수의 종류 선언 -- 초기화(메모리에 값을 넣을 공간을 확보) -- 할당 의 순서로 진행. -var : ES5 까지 사용하던 변수 (같은 이름으로 변수를 설정할 수 있기때문에 오류가 생겼을 때 찾아내기 쉽지 않다) 재선언, 재할당이 가능. 함수레벨 스코프 (함수 안에서 자유롭게 사용할 수 있다) 선언이 되어있지 않고 할당만 먼저 되어있어도 호이스팅에 의해서 사용할 수 있다. *호이스팅 : 파일을 읽어올때 선언을 맨 위로 끌어올리는 것. (var선언이 맨 아래에 있어도 맨위에 있는것 처럼 동작하게 만든다) -let : 재선언 불가, 재할당 가능 블록레벨 스코프 (예를들어, if 문 안에 {} 블록 안에서 설정이 되면, 밖에서는 사용할 수 없다.) -const : 재선언, 재할당 불가 (상수) 블록레벨 스..