전체 글

클로저의 의미 및 원리 이해클로저는 자바스크립트 고유의 개념이 아니기 때문에 ECMAScript 명세에는 클로저의 정의를 다루지 않고 있다.MDN에서는 클로저에 대해 "주변 상태(어휘적 환경)에 대해 참조와 함께 묶인(포함된) 함수의 조합" 이라고 소개하고 있다. 이는 즉 "어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상"이라고 볼 수 있다. 먼저, 외부 함수의 변수를 참조하는 내부 함수부터 살펴보자.var outer = function() { var a = 1; var inner = function() { return ++a; } return inner();};var outer2 = outer();console.log(outer2); // 2outer함수에서 ..

콜백함수란?콜백 함수는 다른 코드의 인자로 넘겨주는 함수이다. 콜백 함수는 제어권과 관련이 깊다.즉, 콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 제어권var count = 0;var cbFunc = function () { console.log(count); if(++count > 4) clearInterval(timer);}var timer = setInterval(cbFunc, 300);위 코드를 실행하면 콘솔창에는 0.3초에 한 번씩 count가 0부터 1씩 증가하며 출력되다가 4가 출력된 이후 종료된다.마지막 줄 setInterval 은 첫 번째 인자로서 cbFunc 함수를 넘겨주자 제어권을 넘겨받은 setInterval이 스스로의 ..

자바스크립트에서의 this는 클래스 뿐만아니라 어디서든 사용할 수 있다. 상황에 따라 this가 바라보는 대상은 달라지기 때문에 정확한 작동 방식을 이해하지 못하면 원인을 파악해서 해결할 수 없다. 상황에 따라 달라지는 this자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 떼 함께 결정된다. 실행 컨텍스트는 함수를 호출할 때 생성되므로 this는 함수를 호출할 때 결정된다고 할 수 있다. 전역 공간에서의 this전역 공간에서 this는 전역 객체를 가리킨다. 전역 객체는 자바스크립트 런타임 환경에 따라 다른 이름과 정보를 가진다. 브라우저 환경에서 전역객체는 window, Node.js 환경에서는 global이다. 전역 공간에서만 발생하는 특이한 성질전역변수를 설정하면 자바스크립트 엔진은 ..

실행 컨텍스트란?실행 컨텍스트(excution context)는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체다. 자바스크립트는 어떤 실행 컨텍스트가 활성화되는 시점에 선언된 변수를 위로 끌어올리고(호이스팅), 외부 환경 정보를 구성하고, this 값을 설정하는 등의 동작을 수행한다. 실행 컨텍스트를 살펴보기 전에 스택(stack)과 큐(queue)의 개념을 알아야 한다. 스택(Stack)스택은 출입구가 하나뿐인 데이터 구조다. 비어 있는 스택에 순서대로 데이터 a, b, c, d를 저장했다면, 꺼낼 때는 반대로 d, c, b, a의 순서로 꺼낼 수 밖에 없다.  큐(Queue)큐는 양쪽이 모두 열려있는 파이프를 떠올리면 된다. 종류에 따라 양쪽 모두 입력과 출력이 가능한 큐도 있으나 보통은 한쪽은 ..

데이터 타입의 종류데이터 타입에는 기본형과 참조형이 있다. 기본형은 값이 담긴 주솟값을 복제하는 반면 참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다는 점에서 차이가 있다. 또한, 기본형은 불변성(immutability)을 띈다는 점을 기억해두자.기본형(primitive type)숫자(number)문자열(string)불리언(boolean)nullundefined(ES6에서 추가된) 심볼(Symbol)참조형(reference type)함수(Function)날짜(Date)정규표현식(RegExp)(ES6에서 추가된) Map, WeakMap, Set, WeakSet데이터 타입에 관한 배경지식식별자와 변수의 개념변수는 '변할 수 있는 무언가'로 여기서 '무언가'란 데이터를 말한다.식별자는..

사건의 발단이번에 진행한 사이드 프로젝트 '그돈이면'의 홈 화면에는 gif애니메이션이 들어가있다. 나는 당연히 Next에 내장된 Image 컴포넌트를 사용했고 별 다른 문제 없이 적용되었다 생각하며 넘어갔다.주변 지인에게 프로젝트를 소개하면서 홈 화면에 이미지가 늦게 뜬다는 피드백을 받았는데 확인해보니 gif에 Image 컴포넌트를 사용했음에도 불구하고 WebP 포맷으로 변환되어 있지 않았다.게다가 용량도 7.7MB라니... 굉장히 큰 사이즈의 이미지를 가져오고 있었다. _log.warnOnce(`The requested resource "${href}" is an animated image so it will not be optimized. Consider adding the "unoptimized" ..

안하려고 했는데, 또 했네나는 이전에 312기 포텐데이에 참여했던 경험이 있다. 당시에 '오때(Otte)'를 만들고 네이버 클라우드 수상까지 하면서 느낀 점이 많았었는데 회고를 쓰지 못했던 게 너무 아쉽다. 그 때도 좋은 팀원들과 함께 기획하며 짧은 시간 내 몰입해서 완성했기에 뜻 깊은 경험이었다. 좋았던 경험이었음에도 불구하고 10일이라는 짧았던 기간 탓에 사실 포텐데이에 또 참여하고 싶지 않았다. 단기가 아닌 장기적인 사이드 프로젝트를 하고 진행하고 싶었다. 10일 동안 간단한 MVP구현은 할 수 있었지만 코드 퀄리티가 매우 떨어졌었기 때문이다. 실제로 많은 팀들이 기한 내에 서비스 배포를 하지 못한 경우도 다수 존재한다. 나는 우리가 구성한 기능만큼은 완성하고 싶었고, (당시에는 이게 내 실력의 척..

사이드프로젝트 시작에 앞서 개발환경 세팅하면서 배포를 먼저 시도했는데 문제가 발생했다. 오가니제이션에 있는 레포지토리는 프로 요금제로 변경해야 배포할 수 있다. 이전에 오때 사이드 프로젝트를 진행할 당시에는 조직 계정도 무료로 배포할 수 있었으나 최근에 정책이 변경된 듯 하다.. 검색해보니 다들 우회하여 무료로 배포하고 있었다. 우회하는 플로우는 대충 아래와 같다. 오가니제이션에 레포지토리를 생성한다.개인 계정에 해당 레포지토리를 fork한다.vercel에는 개인 계정에 레포지토리를 연동하여 배포한다.오가니제이션에 있는 레포지토리에서 Github Actions을 통해 프록시를 사용해 배포한다.위 순서에서 마지막이 핵심이다.즉, 깃헙액션에서 제공하는 runner(가상머신)을 이용해 직접 vercel에 소스..