분류 전체보기

코어 자바스크립트를 읽으면서 공부한 내용을 저의 입맛에 맞춰 정리하였습니다. 혹시 이 글을 읽게 되시면 잘못된 내용이 있을 수 있으니 비판적인 시각으로 읽으시는 걸 추천드립니다. 클로저 클로저란? 클로저란 어떤 함수 A에서 선언한 변수 a를 참조하는 내부함수를 B를 외부로 전달한 경우 A의 실행콘텍스트가 종료된 이후에도 변수 a가 사라지지 않는 현상입니다. 클로저는 여러 함수형 프로그래밍 언어에서 등장하는 보편적인 특성입니다. 자바스크립트의 고유의 개념이 아니라서 ECMAScript 명세에서도 클로저의 정의를 다루지 않고 있고, 다양한 문헌에서 클로저를 다르게 정의하고 있습니다 MDN에서는 클로저에 대해 A closure is the combination of a function and the lexci..

코어 자바스크립트를 읽으면서 공부한 내용을 저의 입맛에 맞춰 정리하였습니다. 혹시 이 글을 읽게 되시면 잘못된 내용이 있을 수 있으니 비판적인 시각으로 읽으시는 걸 추천드립니다. 콜백 함수 간단히 말해서 콜백 함수는 다른 코드의 인자로 넘겨주는 함수입니다. 콜백함수는 다른 코드에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수입니다. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행합니다. var count = 0; var cbFunc = function() { console.log(count); if (++count > 4) clearInterval(timer); }; var timer = setInterval(cbFunc, 300); // -- 실행 결과 ..

코어 자바스크립트를 읽으면서 공부한 내용을 저의 입맛에 맞춰 정리하였습니다. 혹시 이 글을 읽게 되시면 잘못된 내용이 있을 수 있으니 비판적인 시각으로 읽으시는 걸 추천드립니다. this 자바스크립트에서 this는 실행컨텍스트가 생성될 때(VariableEnvironment와 LexicalEnvironment)와 함께 결정됩니다. 콘텍스트는 함수를 호출할 때 생성되므로, 바꿔 말하면 this는 함수를 호출할 때 결정된다고 할 수 있겠습니다. 즉, this는 상황별로 값이 달라질 수 있습니다. 전역공간에서의 this 전역 공간에서 this는 전역 객체를 가리킵니다. 전역 객체는 자바스크립트 런타임 환경에 따라 다른 이름과 정보를 가지고 있습니다. 브라우저 환경에서 전역 객체는 window이고 Node.js..

코어 자바스크립트를 읽으면서 공부한 내용을 저의 입맛에 맞춰 정리하였습니다. 혹시 이 글을 읽게 되시면 잘못된 내용이 있을 수 있으니 비판적인 시각으로 읽으시는 걸 추천드립니다. 실행 컨텍스트 (Execution Context) 실행 컨텍스트는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 자바스크립트는 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 이를 콜 스택에 쌓아 올렸다가, 가장 위에 있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장합니다. 이때, 자바스크립트 엔진은 해당 컨텍스트와 관련된 코드들을 실행하는데 필요한 정보를 수집하여 실행 컨텍스트 객체에 저장하며, 저장되는 정보는 아래와 같습니다. Variable..

코어 자바스크립트를 읽으면서 공부한 내용을 저의 입맛에 맞춰 정리하였습니다. 혹시 이 글을 읽게 되시면 잘못된 내용이 있을 수 있으니 비판적인 시각으로 읽으시는 걸 추천드립니다. undefined와 null 자바스크립트에는 '없음'을 나타내는 값이 두 가지 있습니다. 바로 undefined와 null입니다. 두 값의 의미는 같은 것 같지만 미세하게 다르고, 사용하는 목적 또한 다릅니다. undefined undefined는 사용자가 명시적으로 지정할 수도 있지만 값이 존재하지 않을 때 자바스크립트 엔진이 자동으로 부여하는 경우도 있습니다. 자바스크립트 엔진은 사용자가 값을 지정할 것이라고 예상되는 상황임에도 실제로 그렇게 하지 않을 때 undefined를 반환합니다. 다음 세 가지가 이에 해당합니다. 값..

코어 자바스크립트를 읽으면서 공부한 내용을 저의 입맛에 맞춰 정리하였습니다. 혹시 이 글을 읽게 되시면 잘못된 내용이 있을 수 있으니 비판적인 시각으로 읽으시는 걸 추천드립니다. 자바스크립트의 데이터 타입 자바스크립트의 데이터 타입에는 크게 두 가지 기본형(Primitive) 참조형(Reference)이 있습니다. 일반적으로 기본형은 할당이나 연산 시 복제되고 참조형은 참조된다고 알려져 있습니다. 하지만, 엄밀히 말하면 두 데이터 타입 모두 데이터 주소를 참조하고 있고, 기본형은 주소 값을 바로 복제하지만, 참조형은 값이 담긴 주소 값들로 이루어진 묶음을 가리키는 주소 값을 복제합니다. 즉, 기본형은 주소 값을 바로 복제하기 때문에 불변성을 가지게 되고, 참조형은 보통 그렇지 못합니다. 결국 둘 데이터 ..

Next.js 프로젝트를 진행하는 도중 난관에 부딪혔다, apis/ 폴더에서 동일한 Axios 함수를 호출하였는데 Client에서는 올바른 요청이 갔고, Server side에서는 axios에러가 발생하였다. ServerSide에서 이미 API통신 했었고, 이 에러가 났을 당시 우리 백엔드 서버의 이슈가 발생했었기 때문에 그것과 관계돼 있다고 생각했다. 하지만, 역시 프론트엔드의 문제였고 생각보다 단순한 이유였다. 먼저 우리의 Axios를 보면 로그인된 유저의 기본 헤더 값은 쿠키에서 가져온다. const AXIOS = axios.create({ baseURL: "", headers: { "Content-Type": "application/json", }, // withCredentials: true, ..

실행 화면 group과 ref, useFrame을 활용하여 자전하는 것과 같은 3D 애니메이션을 만들어 보았다. 가장 헤맸던 부분은 R3F의 기본으로 제공되는 카메라를 수정하거나 조작하고 싶었다. useThree훅을 활용하면 가능할 것 같았지만, 설명과 참고할 레퍼런스가 부족하여 카메라 조작을 어떻게 해야 할지 막막했다. 내가 해결한 방법은 react-three/drei의 카메라를 사용한 후 makeDefault 속성을 사용하는 것이였다. react-three-drei의 카메라는 three.js의 속성을 그대로 가지고 있었으며 컴포넌트로 제공되었기 때문에 ref를 통한 조작이 가능했다.