시작하며...사실 AWS에 대한 두려움이 있었다ㅋㅋㅋㅋ😨전에 1년 프리티어 기간이 끝나고 나서 생성해 둔 EC2, RDS 때문에 금액에 부과되었다... 다행히 고객센터를 통해 일부분 환불 받을 수 있었지만, 이런 경험 때문에 AWS를 사용하는 게 무섭다ㅠㅠ! 라는 편견이 생겼다. 하지만 최근(?)에 AWS Amplify로 풀스택 개발을 하게 되었으며, AWS의 다양한 자원인 DynamoDB, Cognito, CloudWatch 등을 사용하게 되면서 그 두려움과 편견을 극복할 수 있게 되었다. 어려워 보이는 UI 때문에 진입장벽이 있었으나 막상 사용해 보니 생각보다 유용한 기능들이 많았고 이를 이해하고 나니 매우 편리하였다. 그러다 문득..! React 웹 어플리케이션을 Vercel이 아닌 AWS를 사용..

1. 클로저의 의미 및 원리 이해클로저란? "어떤 함수에서 선언한 변수를 참조하는 내부함수에서만 발생하는 현상"을 의미한다. var outer = function () { var a = 1; var inner = function () { console.log(++a); }; inner();};outer();위 코드는 outer 함수의 실행 컨텍스트가 종료되면 LexicalEnvironment에 저장된 식별자들(a, inner)에 대한 참조를 지우게 된다. 그러면 참조하는 변수가 하나도 없게 되므로 가비지 컬렉터의 수집 대상이 된다. var outer = function () { var a = 1; var inner = function () { return ++a; }; retur..

1. 콜백 함수란?콜백 함수는 다른 코드의 인자로 넘겨주는 함수이다. 콜백 함수를 넘겨받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행할 것이다. callback은 '부르다', '호출하다'는 의미인 call과, '되돌다'는 의미인 back의 합성어로, '되돌아 호출해 달라'는 명령이다. 즉, 어떤 함수 X를 호출하면서 '특정 조건일 때 함수 Y를 실행해서 나에게 알려달라'는 요청을 함께 보내는 것이다. 이. 요청을 받은 함수 X의 입장에서는 해당 조건이 갖춰졌는지 여부를 스스로 판단하고 Y를 직접 호출합니다. 결론적으로, 콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수이다. 콜백 함수를 위임받은 코드는 자체적인 내부 로직에 의해 이 콜백 함수를 ..

자바스크립트에서 this는 어디서든 사용할 수 있다. 그러나 상황에 따라 this가 바라보는 대상이 달라지게 된다.그래서 상황별로 this가 어떻게 달라지고, 왜 그렇게 되는지 알고 있어야 한다. 1. 상황에 따라 달라지는 this자바스크립트에서 this는 기본적으로 실행 컨텍스트가 생성될 때 함께 결정된다. 즉, this는 함수를 호출할 때 결정된다고 할 수 있고 함수를 어떤 방식으로 호출하느냐에 따라 값이 달라지는 것이다. 1-1. 전역 공간에서의 this전역 공간에서 this는 전역 객체를 가리킨다. 전역 컨텍스트를 생성하는 주체가 바로 전역 객체이기 때문이다. 참고로 브라우저에서 전역객체는 window이고, Node.js 환경에서는 global이다. 전역변수그래서 전역변수를 선언하면 자바스크립트 ..

1. 실행 컨텍스트란?실행 컨텍스트실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, "콜스택"에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서 보장한다. 실행 컨텍스트를 구성하는 방법은 "함수 실행"이다. 실행 컨텍스트 동작처음 자바스크립트 코드를 실행하는 순간 "전역 컨텍스트"가 콜스택에 담음.outer 함수를 호출하면서 outer에 대한 환경 정보를 수집해서 "outer 실행 컨텍스트"를 생성하여 콜스택에 담음.inner 함수를 호출하면서 inner에 대한 환경 정보를 수집해서 "inner 실행 컨텍스트"를 생성하여 콜스택에 담음.inner 함수의 실행..

시작하며...지금까지 다양한 CSS 라이브러리를 사용해 보았다. 그중에서 가장 많이 사용해 본 라이브러리는 Tailwind CSS와 Emotion이다. 이 두 라이브러리를 성격이 많이 다른 라이브러리이다. 그래서 각 라이브러리의 특징을 알아보고 비교해 보면 좋을 거 같아 글을 작성하게 되었다. 1. Tailwind CSS🥇 마음속 1위우선 Tailwind CSS가 나에게는 1위이다.Tailwind CSS를 사용한 프로젝트의 회고록을 보았더니 정말 찬양할 정도를 Tailwind CSS를 좋아했다...ㅋㅋㅋㅋ 그래서 해당 라이브러리를 사용하면서 느낀 장점과 단점을 정리해 보았다. Tailwind CSS 장점1. 빠르고 간편한 반응형 디자인Tailwind는 미디어쿼리를 사용하지 않고 sm: md: lg: 이..

01. 데이터 타입의 종류자바스크립트 데이터 타입에는 크게 2가지가 있다. 기본형숫자, 문자열, 불리언, null, undefined 등이 있다. (ES6에서 심볼이 추가됨.) 참조형객체, 배열, 함수, 날짜, 정규표현식 등이 있다. (ES6에서 Map, WeakMap, Set, WeakSet이 추가됨.) 구분 조건기본형은 값이 담긴 주솟값을 바로 복제하는 반면, 참조형은 값이 담긴 주솟값들로 이루오진 묶음을 가리키는 주솟값을 복제한다. 02. 데이터 타입에 관한 배경지식모든 데이터는 메모리 주솟값을 통해 서로 구분하고 연결할 수 있다. 식별자와 변수변수: 변할 수 있는 무언가(데이터), 변경 가능한 데이터가 담길 수 있는 공간식별자: 어떤 데이터를 식별하는 데 사용하는 이름, 즉 변수명 03. 변수 선..