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. 변수 선..

시작하며...사내 리소스 관리 서비스인 "Codeit Resources" 프로젝트가 끝이 났다.해당 프로젝트는 코드잇 미래 내일 일경험 인턴에서 진행했던 프로젝트로 총 10명의 인턴 인원에서 5명씩 두 팀으로 나뉘어 진행했다. 운이 좋게, 내가 속한 팀의 서비스가 한 달이라는 인턴 기간 안에 프로젝트의 MVP 기능을 모두 구현하였고 사내 직원분들에게 만족을 얻어내었다. 그러나 실제로 해당 서비스를 사용하기 위해서는 기존 사내 리소스들을 예약하던 "구글 캘린더"와 연동을 해야 된다는 요구사항이 있었다.그래서 인턴 기간이 끝난 후, 약 2주 동안 추가 기능 개발을 진행하게 되었고 무사히 개발을 잘 마치게 되어 사내에 실제로 오픈되어 사용하고 있다. 그래서 해당 프로젝트를 진행하면서 나는 어떤 부분을 개발 했..

시작하며...이번 Codeit Resoucres 프로젝트에서 기술스택으로 React, AWS Amplify Gen2, NoSQL 데이터베이스인 DynamoDB를 사용하고 있다. 마주친 문제점처음에 데이터베이스에 데이터를 추가할 때, 데이터가 시간순이나 id값을 기준으로 자동 정렬될 것이라 예상했지만, 실제로 사용을 해보니 DynamoDB에서는 데이터가 특정 순서 없이 저장되는 것을 발견하게 되었다. 프로젝트 요구사항을 구현하기 위해서는 시간순, 이름순으로 정렬된 데이터를 보여줘야 했기 때문에, 이를 어떻게 해결할지 많은 고민을 하게 되었다. 해결 과정?!?!AWS Amplify Gen2 공식 문서와 GitHub 레퍼런스를 통해 전체 데이터를 정렬하는 방식을 찾아보았으나...DynamoDB에서는 기본적으로..