개발을 하다보면, 코드 상에서 직접적으로 DOM을 조작하기도 합니다. 대표적으로 innerHtml을 사용하는 것이 직접적으로 DOM을 조작하는 것입니다.const article = document.getElementById('soccer-article');article.innerHTML = "content . . ."; 하지만, 이렇게 '직접적으로 DOM을 조작하는 것'은 보안적인 측면에서 위험할 수 있습니다. React에서도 이런 행동이 위험할 수 있다는 것을 상기시키기 위해, 직접 DOM을 조작할 때는 아래와 같이 어느정도 이름에서 위험도가 유추되는 'dangerouslySetInnerHtml'이라는 기능을 사용하도록 합니다.const contentHtml = 'First · Secon..
'프로토타입과 프로토타입 체인에 대해 아는 대로 설명 부탁드립니다.' 최근에 기술 면접을 보면서 Javascript의 프로토타입에 대한 질문을 받았습니다. 평소 프로토타입에 대해 완전히 이해하지 못하고 있었기 때문에 결국 어정쩡하게 둘러댈 수밖에 없었는데요. 이번 글에서는 그때의 상황을 돌아보며, Javascript의 프로토타입에 대해 제대로 다시 공부하고 이해한 내용을 공유하려고 합니다. Javascript와 Prototype클래스(Class)는 객체지향에서 중요한 개념입니다. 때문에 대부분의 객체지향 언어(e.g. Java, C++)에서는 이러한 클래스가 기반이 되지만, Javascript는 객체지향 언어이긴 하나, 그 기반이 프로토타입(Prototype-Based)이 됩니다. 즉, 클래스 없이도 객..
Axios의 Interceptoraxios의 interceptor는 요청의 응답을 가로챈 후 그 응답을 미리 처리할 수 있는 기능을 지원합니다.그렇기에 인가가 필요한 요청에서 401(Unauthorized) 에러가 발생하면 응답(에러)을 먼저 가로채서 토큰 Refresh를 진행하고, refresh된 토큰을 에러가 발생했던 요청의 헤더에 다시 넣어서 요청을 retry 할 수 있습니다.이러한 interceptor은 모든 요청과 응답에 대해 공통적인 작업을 수행할 수 있어 중복되는 코드를 없애며, 효율적인 인가 처리를 도와줍니다. 다음은 interceptor의 base 코드입니다.export const instance = axios.create({ baseURL: NEXT_PUBLIC_BASE_URL,});..
이번 글에서는 최근에 우연히 공부하게 된 'IIFE'라는 꽤나 유용한 개념에 대해 이야기 하려고 합니다.꽤나 어렵지 않은 개념이니 한 번 공부해둔다면 여러모로 도움이 될 것 같습니다 :) What is 'IIFE'IIFE는 Immediately Invoked Function Expression의 약자로, 정의와 동시에 즉시 실행되는 JavaScript 함수를 의미합니다. IIFE는 다음과 같은 형태를 가집니다.(function() { console.log("This is an IIFE");})(); IIFE에서는 '()()', 이 괄호 두개가 하는 역할을 아는 것이 중요합니다.첫번째 괄호는 ()로 감싸진 익명함수입니다. 이는 전역 스코프에서 불필요한 변수로 인해 일어나는 오염을 방지하고, IIFE..
개발을 하다보면 개체의 식별을 위해 각 개체에 중복되지 않는 고유적인 id를 부여 해줘야 할 상황이 있습니다. 오늘은 uuid를 라이브러리 없이 효율적으로 생성하는 법을 알아보겠습니다.기존의 방식 - uuid원래 uuid를 생성할때는 'uuid'라는 javascript 라이브러리를 사용하여 생성합니다. 이렇게 아주 간단하게 패키지를 다운로드 받아 사용 가능합니다.새로운 방식 - cryptocrypto는 기본적으로 암호화 기법을 제공하는 강력한 난수 생성기입니다.let example = crypto.randomUUID();console.log(example); // "36b8f84d-df4e-4d49-b662-bcde71a8764f" 사용할 때도 위와 같이 매우 간단히 사용할 수 있습니다. 이렇게 cry..
들어가며동작 원리를 파악하기에 앞서 짚고 넘어가야 할 Javascript의 특징을 먼저 알아보려 합니다.바로 Javascript가 싱글쓰레드 언어라는 것 입니다. 이는 Javascript의 메인쓰레드를 담당하는 이벤트루프가 싱글쓰레드이기 때문이고,이에따라 Javascript는 한 번에 한 가지 일만 처리가 가능하다는 사실을 알 수 있습니다.그렇다면 정말 시간을 오래 소요해야 하는 하나의 작업이 있을 때, 이 하나의 작업이 다 끝나기 전까지 브라우저는 아무것도 할 수 없게 될까요?그렇진 않습니다. Javascript는 이러한 문제 상황을 대비해 비동기 콜백을 사용합니다.이번 글에서는 이런 Javascript의 비동기 콜백을 포함한 기본 동작 원리를 아주 간단하게 알아보겠습니다.동작 FlowJavascrip..
