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 함수의 실행..

Q. 질문JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #12) A. 답변현재 상황요즘 채용 공고를 보면 대부분 타입스크립트를 할 수 있는 사람을 우대하는 것을 쉽게 볼 수 있다.그만큼 타입스크립트가 중요하고 대부분의 기업에서 프론트엔드 개발을 할 때 타입스크립트를 채택해 사용하고 있다는 것을 알 수 있다. 타입스크립트 사용 이유그렇다면 자바스크립트 대신 왜 귀찮게 타입스크립트를 사용하는 것일까? 바로 프로그램의 안정성 을 위한 것이다. 자바스크립트는 알다시피 동적 언어라서 고정된 타입 없이 자유롭게 변수를 선언하고 사용할 수 있다.이게 자바스크립트의 장점이 될 수 있지만 타입 오류가 코드를 실행하기 전까지 알 수 없..

시작하며...코드잇 스프린트 이전 팀원들과 함께 코어 자바스크립트를 읽고 자신이 맡은 부분을 정리해서 발표하는 테크톡 스터디를 하였다. 한 챕터에서 분량을 나눠 각자 내용을 공부하고 정리해서 10분 정도 설명하는 방식으로 진행하였으며, 내가 발표한 부분의 내용을 이해하고 다른 사람의 발표를 들으면서 내용을 이해하는 방식이었다. 총 7개의 챕터를 일주일에 1 챕터씩 진행하여 총 7주가 소요되었다. 스터디 내용 정리[챕터1 - 불변객체][챕터2 - environmentRecord][챕터3 - call & apply 메서드][챕터4 - 제어권 - 인자 & this][챕터5 - 부분 적용 함수][챕터6 - 메서드 오버라이드][챕터7 - ES6의 클래스 및 클래스 상속] 스터디 회고지금까지 한 번도 스터디를 진행..

시작하기 앞서기존 자바스크립트로 만든 프로젝트에서 새로운 프로젝트를 생성하지 않고 그 프로젝트에서 타입스크립트로 마이그레이션 하는 방법에 대해 알아볼 것이다. 마이그레이션 방법1. TypeScript 설치타입스크립트과 타입스크립트에 필요한 기타 모듈들을 설치한다.npm install --save typescript @types/node @types/react @types/react-dom @types/jest2. tsconfig.json 작성기존 자바스크립트에 있던 jsconfig.json 을 제거하고 tsconfig.json 파일을 작성한다.나는 아래 코드에 있는 내용을 작성했다.{ "compilerOptions": { "baseUrl": "src", "target": "es5", "..

Q. 질문 1이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #5) A. 답변1. 이벤트 버블링이벤트 버블링이란 무엇일까?이벤트 버블링이벤트가 발생하면, 같은 타입 이벤트를 가진 부모 핸들러도 동작즉, 자식 요소에서 부모 요소로 이벤트가 전파되는 것을 이벤트 버블링이라고 한다. 버블링 적용이런 코드가 있을 때, content 오늘 할 일 list 자바스크립트 공부 유튜브 시청 저녁 약속  요소를 클릭했을때, 실제 핸들러 이벤트가 동작하는 요소(currentTarget)와 문구를 출력하도록 자바스크립트 코드를 만든다.const content = document.querySelector('#content');const title = docu..

1. 평균 구하기 [프로그래머스 1단계 - 평균구하기] 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 1-1. 나의 풀이 reduce 를 사용하여 배열 요소들의 합을 sum 에 리턴하고, 평균 값을 구하기 위해 arr 의 길이만큼 나누었다. function solution(arr) { const sum = arr.reduce((acc,item) => { return acc + item; },0) return sum / arr.length } 1-2. 다른 사람 풀이 내 코드와 구현 방법은 동일하지만, 더 간단하게 표현하였다. function average..

Q. 질문자바스크립트에서 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #4) A. 기본 배경자바스크립트에서 기본형 데이터는 불변값이고, 참조형 데이터(객체)는 가변값이다. 불변객체변하지 않는 객체 자바스크립트에서 객체는 가변값인데, 원본 객체가 변하지 말아야 할 상황에 불변 객체가 필요하다. 불변 객체가 필요한 상황student1 객체에서 name 만 수정한 새로운 객체를 만들기 위해student1 객체를 newStudent 에 복사하고, newStudent 의 이름을 변경하고 리턴하였다.결과는 student2 에서 바뀐 이름이 나올 것 같지만, 실제로는 둘 다 Lee 로 변경되었다. 결론위에 코드처럼 객체의 가변성 에 따른..

☘️ 이진 탐색 이진 탐색 정의 이진 탐색은 정렬된 요소들을 절반씩 줄여가며 찾는 알고리즘이다. 이진 탐색 정렬이 되어 있어야 함 배열, 이진 트리 사용하여 구현 시간 복잡도 O(log n) 로 빠름 이진 탐색 구현 - 배열 원하는 숫자를 찾기 방법은 다음과 같다. 정렬된 배열에서 맨 앞을 left, 맨 뒤를 right, 가운데를 mid 로 설정 찾는 숫자를 mid 값과 비교 mid 값이 더 크면 right = mid - 1 mid 값이 더 작으면 left = mid + 1 새롭게 설정된 left 또는 right 값으로 mid 값 다시 설정 이를 반복하여 mid 값과 찾는 숫자가 같으면 종료 배열을 사용하여 이진 탐색을 구현하면 선형 시간 O(n) 이 소요된다. 그래서 이를 해결하기 위해 이진 탐색 트리..