Development Vlog

1️⃣ 자바스크립트 실행 컨텍스트(Execution context)에 대해 설명해 주세요.자바스크립트에서 실행 컨텍스트는 코드가 실행되는 환경을 의미합니다. 즉, 코드를 실행하기 위해 필요한 정보들을 모아둔 상자와 같은 것이라고 생각하면 됩니다. 자바스크립트는 코드를 실행하기 전에 어떤 변수들이 있고, 어떤 함수들이 있는지, 그리고 현재 this가 무엇을 가리키는지 알고, 실행 컨텍스트가 관리합니다. 실행 컨텍스트의 종류1. 전역 실행 컨텍스트자바스크립트 파일을 처음 실행할 때 가장 먼저 만들어지는 환경이며, 전역 변수나 전역 함수가 여기에 저장됩니다. 2. 함수 실행 컨텍스트함수를 호출할 때마다 그 함수만의 실행 환경이 따로 만들어집니다. 즉, 함수가 실행될 때마다 새로 만들어지는 환경입니다. 실행 컨..

1️⃣ 렉시컬 스코프(Lexical scope)에 대해 설명해 주세요.렉시컬 스코프는 변수의 유효 범위가 함수의 정의 위치에 따라 결정되는 규칙입니다. 자바스크립트에서 함수가 어디에 선언되었는지에 따라 해당 함수가 접근할 수 있는 변수가 정해지며, 이는 함수의 호출이 아닌 선언에 따라 결정됩니다.  주요 특징상위 스코프 접근 : 중첩된 함수는 자신이 정의된 상위 함수의 변수에 접근할 수 있습니다.하위 스코프 접근 불가 : 상위 함수는 하위 함수에서 선언된 변수에 접근할 수 없습니다.정의 시점 : 함수가 호출되는 시점이 아닌, 정의된 시점에 따라 변수가 결정됩니다.// 예시function outerFunc() { let outerVar = 'outer'; function innerFunc() {..

HTTP 메소드란?HTTP 메소드란 웹에서 클라이언드(브라우저)와 서버 간의 통신을 정의하는 방법이며, method 옵션은 요청의 유형을 지정하며, `GET`, `POST`, `PATCH`, `DELETE` 등의 값을 가질 수 있고, method를 지정하지 않으면 기본 값은 `GET`입니다. `GET` : 서버로부터 데이터를 요청할 때 사용`POST` : 서버에 데이터를 전송할 때 사용`PUT` : 서버의 기존 리소스를 업데이트하거나 새로운 리소스를 생성할 때 사용`DELETE` : 서버에서 특정 리소스를 삭제할 때 사용`PATCH` : 리소스의 부분적인 업데이트를 수행할 때 사용`fetch()` 기본 문법const res = await fetch('url');// 리스폰스 상태 코드res.status;..

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()` 함수를 인수로 사용하고 있다.이렇게 다른 함수의 인수..