프론트엔드/JavaScript

1. 객체란?자바스크립트의 객체는 관련된 데이터와 함수의 집합입니다. 객체는 프로퍼티(속성)와 메서드로 구성됩니다.const person = { name: 'Lee', // 프로퍼티 age: 20, // 프로퍼티 sayHello() { // 메서드 console.log(`Hello, I'm ${this.name}`); }};  2. 객체 생성 방법2.1 객체 리터럴가장 일반적이고 간단한 방법입니다.const obj = { property1: 'value1', property2: 'value2'};2.2 Object 생성자 함수const obj = new Object();obj.property1 = 'value1';obj.proper..

`제어문`은 코드의 실행 흐름을 제어하는 문입니다. 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용합니다. 1. 블록문 (Block Statement)0개 이상의 문을 `중괄호`로 묶은 코드 블록자바스크립트는 블록문을 하나의 실행 단위로 취급{ var foo = 10; console.log(foo);}2. 조건문 (Conditional Statement)2.1 if...else 문주어진 `조건식`의 평가 결과에 따라 실행할 코드 블록 결정if (조건식) { // 조건식이 true일 때 실행} else { // 조건식이 false일 때 실행}2.2 switch 문주어진 표현식의 평가 결과와 일치하는 case 문으로 실행 흐름 이동switch (표현식) { case 값1: // 표현식..

단위 테스트(Unit Test)특정 조건에서 어떻게 작동해야 할지 정의한 것 (기능을 테스트)Input에 따라 계산한 결과를 Output으로 반환하는 것 (`함수`)단위 테스트 3단계1. 준비(arrange) : Input을 준비하는 단계2. 실행(act) : Input을 전달받아 함수를 실행하는 단계3. 단언(assert) : 결과를 검증하는 단계이러한 단위 테스트를 통해 `테스트 주도 개발(TDD)`을 할 수 있다. 테스트 주도 개발(Test Driven Development)적색(Red), 녹색(Green), 리팩터(Refactor) 순환테스트하기 쉬운 코드관심사의 분리🔍 적색(Red), 녹색(Green), 리팩터(Refactor) 순환적색(Red) : 실패하는 테스트 작성녹색(Green) : 테..

연산자연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다.이 때 연산의 대상을 피연산자(operand)라고 한다. 피연산자는 하나의 값으로 평가될 수 있는 표현식이어야 한다.피연산자와 연산자의 조합으로 이뤄진 연산자 표현식 또한 값으로 평가될 수 있는 표현식이어야 한다.// 산술 연산자5 * 4 // 20// 문자열 연결 연산자'My name is ' + 'Lee' // 'My name is Lee'// 할당 연산자color = 'red' // 'red'// 비교 연산자3 > 5 // false// 논리 연산자true && false // false// 타입 연산자typeof 'HI' // string 산술 연산자산술 연산자 피연산자를 대..

데이터 타입데이터 타입은 값의 종류를 말한다. 자바스크립트(ES6)의 모든 값은 데이터 타입을 가지며, 7개의 데이터 타입을 제공한다. 7개의 데이터 타입은 원시 타입(primitive)과 객체 타입(object/reference)으로 분류한다. 숫자 타입C나 자바와 같은 경우 정수, 실수를 구분해서 int, long, float, double 등과 같은 다양한 숫자 타입을 제공하지만, 자바스크립트는 하나의 숫자 타입만 존재한다.숫자 타입의 모든 수를 실수로 처리하며, 정수만 표현하기 위한 데이터 타입이 별도로 존재하지 않는다.(배정밀도 64비트 부동소수점 형식)// 모두 숫자 타입var integer = 10; // 정수var double = 10.12; // 실수var negative = -20; /..

디바운스(Debounce)와 쓰로틀(Throttle)은 Javascript에서 특정 함수의 실행 빈도를 조절하는 기법으로 최적화 기법으로 사용해 본 경험이 있다. 디바운스(Debounce)이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술이다.즉, 순차적 호출을 하나의 그룹으로 '그룹화'할 수 있다.연이어 호출되는 함수들 중 마지막 함수만 호출하도록 하는 것이다.검색창에 '개발하는데 다 이유가 있지'를 검색하려고 한다. enter 없이 input 이벤트로 API 검색 요청이 된다고 가정한다.그러면 'ㄱ', '개', '갭', '바', '발',  ... 이런식으로 불필요한 API 요청이 많이 발생하게 된다. 글자가 어느정도 입력이 됐을 때 요청이 가도록 일정 시간동안 입력이 없을 때..

자바스크립트의 Promise 객체는 비동기 작업의 최종 완료 또는 실패를 나타내는 배열이나 객체처럼 독자적인 객체이다. 비동기 작업이 끝날 때까지 결과를 기다리는 것이 아니라, 결과를 제공하겠다는 '약속'을 반환한다는 의미에서 Promise라고 이름이 지어졌다. 사용 방법Promise 객체 생성Promise 객체를 생성하려면 new 키워드와 Promise 생성자 함수를 사용하면 된다. Promise 생성자 함수 안에 두 개의 매개변수를 가진 콜백 함수를 넣게 되는데, 첫번째 인자는 작업이 성공했을 때 성공(resolve)을 알리는 객체, 두번째 인자는 작업이 실패(reject)했을 때 실패를 알려주는 오류 객체이다.// Promise 생성자 안에 들어가는 콜백 함수를 executor라고 함const my..