Development Vlog

Promise란?비동기 작업이 완료되면 값을 알려 주는 객체이고, 작업이 완료되면 값을 알려줄 것을 약속하기 때문에 이름이 Promise 입니다. Promise 객체는 세 가지 상태로`Panding` : 비동기 작업이 끝나기를 기다릴 때`Fulfilled` : 비동기 작업이 성공적으로 끝났을 때, 비동기 작업의 성공 결과 값으로 갖게 됨.`Rejected` : 비동기 작업이 실패했을 때, 비동기 작업에서 발생한 오류를 결과 값으로 갖게 됨. Promise 기반의 코드// Promise 기반const response = await fetch('...');const data = await response.json();console.log(data); 평소에 사용하는 코드와 비슷한 모습이며, 비동기 작업을 처..

모던 자바스크립트 종합 정리Spread 구문, 구조 분해, forEach, filter, reduce 등 복습한 내용 종합 정리 URL 모음자바스크립트 문법과 표현 (Spread 구문, 구조 분해, try...catch문 등) Codeit/JavaScript 중급/모던 자바스크립트/자바스크립트의 문법과 표현/종합정리.md at main · hwiiron/CodCodeit Sprint. Contribute to hwiiron/Codeit development by creating an account on GitHub.github.com  자바스크립트의 유용한 내부 기능 (forEach, map, filter, find, reduce 등) Codeit/JavaScript 중급/모던 자바스크립트/자바스크립트의..

자바스크립트 모듈 (module)하나의 파일에 많은 코드를 작성하게 되면 각 코드를 이해하는데 어렵고, 기능 수정이 필요할 때 그 부분을 찾기 쉽지 않기 때문에 하나의 파일에 관리하는 것이 아닌, 기능별로 여러 개의 파일로 분리해서 관리하는 것을 모듈화라고 합니다. 자바스크립트 모듈화는 코드를 효율적으로 관리할 수 있고, 다른 프로그램에서 재사용이 가능하다는 장점이 있습니다.type="module"`script` 태그에 `type="module"`을 적용하지 않으면 여러 파일에 각각 작성된 코드가 하나의 파일에 작성된 것처럼 공유가 됩니다. 이렇게 공유가 되어 버리면 문제가 없어보일 수 있지만 같은 함수명을 가진 함수는 덮어써질 수도 있고, 중복된 변수나 상수를 선언하여 의도치 않은 결과와 에러를 발생시..

forEach 배열 메소드`forEach`와 map 배열 메소드를 확인하기 전에 `for...of`문을 `forEach`배열 메소드와 비교해보려고 한다.// for...of문const members = ['휘철', '은주', '꿈', '달'];for (let member of members) { console.log(`${member}`);}// 휘철// 은주// 꿈// 달// forEach 배열 메소드members.forEach(function (member) { console.log(`${member}`);})// 화살표 함수 사용 예시members.forEach((member) => { console.log(`${member}`);}) 위처럼 `for...of`문을 `forEach` 배열 메소..

에러와 에러 객체자바스크립트에서는 코드 실행 중 발생할 수 있는 다양한 에러를 처리하기 위해 에러 객체를 사용합니다. `ReferenceError` : 존재하지 않는 변수나 함수를 호출할 때 발생하는 에러`TypeError` : 잘못된 방식으로 자료형을 다루면 발생하는 에러`SyntaxError` : 문법에 맞지 않는 코드를 작성하면 발생하는 에러 의도적으로 에러 객체 생성코드 실행 중 에러를 강제로 발생시킬 때는 `throw`를 사용하여 에러 객체를 던지고, 생성한 에러 객체를 발생시켜 이후 코드 실행을 중단합니다.// 에러 객체 생성const error = new ReferenceError('에러가 발생');const error = new TyprError('에러가 발생');const error = ..

옵셔널 체이닝(Optional Chaining)이란?중첩된 객체에서 프로퍼티에 안전하게 접근할 수 있게 해주는 방법입니다. 객체가 `null`이나 `undefined`일 때 오류 없이 `undefined`를 반환합니다.Error 예시 function printName(user) { console.log(user.dog.name);}const user1 = { name: 'hwichul', dog: { name: 'dal', }}printName(user1); // dalconst user2 = { name: 'shin',}console.log(user2.dog); // undefinedprintName(user2); // TypeError: Cannot read property 'name'..

콜백 함수(Callback)란?콜백 함수란 다른 함수의 인수로 사용하는 함수는 가리킨다. 함수에 파라미터로 들어가는 함수이며, 순차적으로 실행하고 싶을 때 사용한다.함수 이름 사용해 콜백 함수 실행const btn = document.querySelector('button');function display () { alert('click!');}btn.addEventListener('click', display); // 버튼을 클릭하면 display 함수 실행addEventListener() 함수 안에 display() 함수를 넣을 때 소괄호는 없다는 것에 주의해야 한다. `addEventListener()` 함수에서 미리 선언한 `display()` 함수를 인수로 사용하고 있다.이렇게 다른 함수의 인수..

파라미터 (Parameter)함수 선언 부분에서 소괄호 안에 작성된 것이 파라미터, 함수 호출하는 부분에서 파라미터로 전달하는 값을 아규먼트라고 한다.function Func (파라미터) { console.log(파라미터);}Func(아규먼트);파라미터의 기본값기본값이 있는 파라미터는 함수를 호출할 때 아규먼트를 전달하지 않으면, 함수 내부의 파라미터의 기본값을 가지고 동작하게 된다.function Hello (name = 'hwichul') { console.log(`Hi! ${name}`);}Hello('eunju'); // Hi! eunjuHello(); // Hi! hwichularguments 객체arguments 객체는 함수를 호출할 때 전달한 아규먼트들을 배열의 형태로 모아둔 유사 배열 객체..

Boolean true? false?False(Falsy) - `false`, `null`, `undefined`, `NaN`, `0`, `""`Ture(Truthy) - 나머지 값들 ! `{}`, `[]` 빈 객체, 배열도 포함AND 연산자왼쪽 값이 ture이면 오른쪽 값을 리턴하고, 왼쪽 값이 false이면 왼쪽 값을 리턴console.log(true && true) // true (오른쪽 값 리턴)console.log(true && false) // false (오른쪽 값 리턴)console.log(false && true) // false (왼쪽 값 리턴)console.log(false && false) // false (왼쪽 값 리턴) OR 연산자왼쪽 값이 ture이면 왼쪽 값을, 왼쪽 값이 f..

이벤트 핸들러 등록HTML의 속성이나 DOM 프로퍼티를 활용해 이벤트를 등록하는 방법 외에 `Element.addElementListener('type', 'handler')`를 통해서 이벤트 핸들러를 등록 가능하다.// HTML 속성 사용 예시Click// DOM 프로퍼티 사용 예시Click이벤트 핸들러 삭제`addEventListener` 메소드를 활용하여 이벤트 핸들러를 등록했다면, `Element.removeEventListener('type', 'handler')`를 통해서 이벤트 핸들러 삭제 가능하다.브라우저 기본 동작브라우저 기본 동작인 마우스 오른쪽을 클릭하면 상황에 맞는 메뉴 창이 뜨거나, `input`태그에 커서를 두고 키보드 키를 누르면 해당 값이 입력되는 것을 `preventDefa..