공부 기록일지📚

ES6에서는 클라이언트 사이드 자바스크립트(브라우저)에서도 동작하는 모듈 기능을 추가했습니다. 2019년 11월 기준으로 모던 브라우저 (크롬 61, 파이어폭스 60, 사파리 10.1 엣지 16이상)에서 ES6모듈을 사용할 수 있습니다. ES6 모듈 기능을 사용하지 않으면 분리된 자바스크립트 파일에 독자적인 스코프를 갖지 않고 하나의 전역을 공유하게 된다. 이렇게되면 원치않는 오류나 오버라이딩, 충돌 등이 날 것입니다. ES6 모듈은 파일 자체의 스코프를 제공합니다. 즉, 모듈은 독자적인 모듈 스코프를 가지게 되는 것입니다. ES6 모듈 상세 export import 문은 파일 단위의 영역을 기준으로 Top-level 영역에서만 사용할 수 있습니다. -> 파일 단위 최상단을 말하는 것이 아니라 depth..

백엔드 or 서드파티 API에 네트워크 요청이 필요한 어플리케이션을 개발할 때, Axios 및 Fetch와 같은 HTTP 클라이언트를 사용합니다. Fetch와 Axios 모두 Promise 기반의 HTTP 클라이언트입니다. 즉, 이 클라이언트를 이용해 네트워크 요청을 하면 이행(resolve)혹은 거부(reject)할 수 있는 promise가 반환됩니다. Fetch API는 모던 브라우저에 내장되어있어 따로 설치할 필요가 없는 반면 Axios는 서드파티 라이브러리로 CDN 또는 yarn 과 같은 패키지매니저를 통해 설치하여 node.js혹은 브라우저 환경에서 사용 가능합니다. 에러 처리에 있어서 Fetch, Axios 모두 이행(resolve)되거나 거부(reject)된 promise를 반환합니다. Pr..

자바스크립트의 싱글 스레드 작업 수행 방식(싱글 스레드? 콜스택이 1개라고 생각하시면 됩니다.) 스레드? 코드를 한줄씩 실행시켜주는 일꾼이라고 생각하면 된다. JS는 코드가 작성된 순서대로 작업을 처리함 이전 작업이 진행 중 일때는 다음 작업을 수행하지 않고 기다림 먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행함 -> 동기 방식의 처리 일을 하고 있을 때 다른 작업을 할 수 없는 방식을 "블로킹 방식"이라고도 합니다. 동기처리 방식의 문제점 하나의 작업이 너무 오래 걸리게 되면, 해당 작업이 완료될 때까지 모든 작업이 올 스탑되기 때문에 전반적인 흐름이 느려집니다. -> 멀티 쓰레드로 해결하면되지만 JS는 싱글 스레드라서 "비동기 작업"으로 해결합니다. 싱글 스레드 방식을 이용하면서..

이전에 정리한 생활코딩의 내용을 빌려오자면 this는 이렇게 정의할 수 있다. this ? this란 함수 내에서 함수 호출 맥락(context)를 의미한다. 함수를 어떻게 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 의미이다. 함수와 객체의 관계가 느슨한 자바스크립트에서 this는 이 둘을 연결시켜주는 실질적인 연결점 역할을 한다. this는 상위 객체를 가르킨다. apply ,call을 활용해 제어가 가능하다. 함수호출 어떠한 객체에 소속되어 있지 않은 함수를 호출했을 때 this는 무엇을 가리키는가? -> this === window 사실상 window가 생략됐을 뿐이지(암시적으로 사용되고 있는 window) window가 해당 함수를 포함하는 전역객체인 것이다. 🙋‍♂️this는 무엇..

복사에 대해서 이해하려면 우선 자바스크립트의 데이터타입에 대한 이해가 필요하다. 복사는 어떤 데이터 타입인지에 따라 다르게 진행되기 때문인데 자바스크립트에서 데이터는 원시타입과 참조타입으로 나뉜다. 변수에 원시 값을 담는다면 값 자체가 담긴다. 하지만 변수에 객체를 담는다면 객체 값이 아니라 객체 값이 저장된 메모리 주소가 담긴다. 자세한 내용은 아래의 내용을 참고하면 된다. 원시값: number/string/boolean/null/undefined/ symbol(ES6) -> 변경 불가능한 값 (immutable value) 참조값: Object(array, function, regExp)/ Map,Set 등(ES6) -> 변경 가능한 값(mutable value), 원시 값을 제외한 모든 것 // 문..

배경 바벨과 웹팩은 웹프론트엔드 어플리케이션을 제작할 때 없어서는 안되는 기반 기술이되었다. 테스트 프레임워크를 도입할 때, 별도의 빌드 과정이 필요할 때, 서버사이드 렌더링을 위해서 서버 측 코드를 빌드해야 할 때 등 바벨과 웹팩을 활용해야 한다. 엔진이 표준 전체를 지원하지 않고 일부만 지원하는 건 흔한 일이다. 특정 엔진에서 우리가 작성한 코드를 지원하지 않는다는 걸 알게 되는 경우가 있다. 명세서 내 모든 기능을 모든 (브라우저)엔진이 구현하고 있지 않기 때문이다. 바벨이란? 자바스크립트 컴파일러이다.(공식 홈페이지 번역, 컴파일러보단 트랜스파일러에 가깝다 생각한다. ) 📚컴파일러 - 한 언어를 다른 언어로 변환 e.g.) Java -> bytecode ✅트랜스파일러 - 한언어로 작성된 소스 코드..

[JS 기본 지식] 자바스크립트는 함수를 변수처럼 이용할 수 있다. 함수 선언문에도 해당함 b는 a의 콜백함수가 되겠네요. 콜백함수(callback)를 대충 지금 당장에 호출되는 것이 아니라 나중에 호출될 인자로 전달된 함수..정도로 이해하면 될 거 같습니다. function b() { console.log("b called"); } function a(another){ console.log("a started"); another(); // "b called" console.log("a ended"); } 자바스크립트에서 비동기 처리를 다룰 수 있는 방법은 여러가지가 있습니다. 주로 callback, Promise, async/await 를 활용합니다. 👾 Promise Promise는 비동기 작업을 처..

JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ? 느슨한 타입(loosely typed)의 동적(dynamic) 언어 자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속한다. 자바스크립트에는 8가지 기본 자료형이 있다. 자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다. -> 자료의 타입은 있지만 변수에 저장되는 값의 타입은 언제든지 바꿀 수 있는 언어를 '동적 타입 언어'라고 부른다. 데이터 타입 (primitive type, object type) JS 언어의 타입은 크게 원시 값과 객체로 나뉜다. *원시 값- 객체를 제외한 모든 타입은 불변 값(변경할 수 없는 값)을 정의한다. Primitive types : 문자열이든 숫자든 한 가지만 표현할 ..