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에서는 기본적으로..

시작하며...이번 코드잇 인턴 프로젝트인 "Codeit Resources"가 11월 1일에 무사히 완료되었고 긍정적인 평가를 받았다!그러나... 실제 직원분들이 사용하고 피드백을 받기 위해서는 구글 캘린더가 연동이 필수적이라고 요구사항을 받았다. 사실 여기서 프로젝트를 마무리할 수도 있었지만, 팀원들과의 회의 끝에 구글 캘린더 연동 작업을 추가로 진행하기로 결정을 내렸다. 다행히도 코드잇 측에서 2주간 리소스(AWS)를 제공할 수 있다는 답변을 받아 계속 프로젝트를 이어나가게 되었다. 구현 초기 단계백엔드 서버가 필요해!먼저 구글 캘린더 API와 연동을 하기 위해서는 백엔드 서버가 필요했다. 현재 프로젝트의 AWS Amplify Gen2를 사용하고 있어 간편하게 풀스택 개발을 할 수 있었다.그런데.. ..

시작하며이번 코드잇 인턴에서 AWS Amplfiy Gen2를 기술스택으로 선정하였고, 나는 그중에서 User 관리 기능을 담당하게 되었다. 이 기능을 구현하면서 AWS Cognito를 적극적으로 활용했다. 그러나 기본 제공 기능만으로는 프로젝트 요구 사항을 완전히 충족하기 어려워, AWS SDK를 통해 보다 세밀한 User 관리 기능을 개발하게 되었다. 그래서 해당 구현 과정을 기록하기 위해 글을 작성하게 되었다. 구현한 기능우선 해당 프로젝트는 사내에서 사용하는 서비스로 회원가입 기능은 없이 ADMIN이 멤버를 추가하고 수정하고 삭제하는 방식이다. 그래서 크게 다음과 같은 기능을 구현하였다.멤버 추가멤버 수정멤버 삭제로그인비밀번호 재설정비밀번호 변경 1. AWS SDK 사용 이유Cognito의 기본 메..

시작하며...지금까지 다양한 프로젝트를 진행하면서 클라이언트에서 상태 관리를 간편하게 하기 위해 라이브러리를 사용하였다.그중 Recoil, Zustand, Jotai 라이브러리를 사용해 보았고, 각기 다른 방식으로 상태 관리를 했다. 그래서 이번 글에서는 그동안 사용해 본 Recoil, Zustand, Jotai를 비교하고, 각 라이브러리를 어떤 상황에서 사용했고 느낀 장단점을 정리하게 되었다. 1. Recoil1-1. 사용 배경개발 동아리 DND 9기에서 진행한 NewPle 프로젝트에서 Recoil을 사용했다. Recoil을 선택한 이유는 단순했다.사실 React Query(TanStack Query)와 Recoil의 조합이 좋다는 이야기를 들어서 깊이 있는 이해 없이 그냥 선택하게 된 것이다.(당시 ..