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) 이 소요된다. 그래서 이를 해결하기 위해 이진 탐색 트리..

☘️ 시작하며... 첫 번째 게시물로 자바스크립트 고차함수인 map에 대해 알아보았다. [자바스크립트/JavaScript] 고차 함수 map 사용 방법 #1 ☘️ 시작하며... 코딩 테스트 공부를 하려고 자료구조를 공부하고 있는데 문제를 풀다가 도중에 내가 자바스크립트 고차함수에 대해 잘 모르고 있다는 것을 알게 되어 글을 작성하면서 공부할 jjang-j.tistory.com 이번 게시물은 filter에 대해 알아볼 것이다. ☘️ Array.filter() filter는 무슨 역할을 할까? filter 배열을 for와 같이 돌면서, true에 해당하는 요소로 구성된 새로운 배열을 생성하여 반환 사용 예시 배열 numArr가 있을 때, 홀수로 된 배열을 반환받고 싶으면 아래처럼 코드를 작성한다. filte..

☘️ 시작하며... 코딩 테스트 공부를 하려고 자료구조를 공부하고 있는데 문제를 풀다가 도중에 내가 자바스크립트 고차함수에 대해 잘 모르고 있다는 것을 알게 되어 글을 작성하면서 공부할 겸 정보를 알려주기 위해 해당 글을 작성하게 되었다. 첫 번째 게시물은 map 에 대해 알아볼 것이다. ☘️ 고차 함수란? 고차 함수란? 함수를 파라미터(인자)로 받거나 결과로 반환해 주는 함수(메서드) ☘️ Array.map() map은 배열을 for와 같이 돌면서, 결과로 배열을 반환해 준다. 사용 예시 배열 array가 있을 때, 각 요소에 2를 곱한 배열을 반환받고 싶을 때, 아래처럼 코드를 작성한다. map의 첫 번째 인자인 item은 배열의 각 요소이다. (인자 이름은 사용자가 원하는 대로 작성할 수 있다.) ..