JS

Proxy 객체 Proxy 객체란? Proxy는 Proxy 서버로 더 익숙하지만, JavaScript에서는 객체로도 사용되는 개념이다. 의미는 실제 Proxy 서버와 비슷하게 한 객체에 대한 기본 작업을 가로채고 재정의하는 프락시를 만드는 객체이다 이는 주로, 속성 액세스를 기록하고 입력의 유효성 검사, 형식 지정 등에 활용할 수 있다. 프락시 객체는 두 개의 매개변수를 사용하여 생성할 수 있다. target : 프락시할 원본 객체 handler : 가로채는 작업과 가로채는 작업을 재정의하는 방법을 정의하는 객체 -> 프록시 객체의 target 동작을 가로채서 정의할 동작들이 정해져 있는 함수 const target = { message1: "hello", message2: "everyone" }; co..

코어 자바스크립트를 읽으면서 공부한 내용을 저의 입맛에 맞춰 정리하였습니다. 혹시 이 글을 읽게 되시면 잘못된 내용이 있을 수 있으니 비판적인 시각으로 읽으시는 걸 추천드립니다. 콜백 함수 간단히 말해서 콜백 함수는 다른 코드의 인자로 넘겨주는 함수입니다. 콜백함수는 다른 코드에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수입니다. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 적절한 시점에 실행합니다. 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를 반환합니다. 다음 세 가지가 이에 해당합니다. 값..

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

react의 다양한 라이브러리들을 사용하다 보면 ref가 사용되는 것을 많이 볼 수 있다. 항상 ref는 어떤 기능을 하는 것인지 궁금했었기에 useRef와 ref에 대해 찾아보았다. 우선 JavaScript에서 getSelector, getElementById를 통해서 HTML 태그 (DOM)을 선택할 수 있다는 것은 알고 있었다. 하지만 나는 React에서는 이런 문법을 사용하기보다는 직접 그 태그 안에서 코드를 작성했기 때문에 리액트는 Dom Selector를 사용 안 하는 줄 알았지만, useRef가 이런 기능을 도와주고 있었던 것이다. 그렇다면 언제 useRef와 ref를 사용하는 것일까? 나는 외부의 DOM을 활용하여 다른 DOM의 상태에 영향을 주고 싶을 때 ref를 사용한다고 생각했다. 즉..

{errors?.email?.message || errors?.passwordConfirm?.message || errors?.extraError?.message} REACT를 공부하면서 JS 문법 중 &&연산자와 || 연산자를 활용하는 것을 많이 봤고, 그런 코드들이 깔끔하고 멋져 보여서 한번 정리를 해야겠다고 생각했다. 일단 내가 알고 있는 지식으로는 '&&'는 AND 연산자이고 '||'는 OR 연산자이다. 즉, and 연산자는 비교하는 두개의 값이 모두 true일 때, true를 반환하기 때문에 첫 값이 false라면 뒤에 값을 확인하지 않아도 false를 반환한다. or 연산자도 비슷하게 두 값 중 하나의 값이 true라면 바로 true를 반환한다. JS 특히 REACT는 이런 특성을 활용하여 코..