Development Vlog

`Axios`란?`Axios`는 JavaScript에서 HTTP 요청을 처리하기 위한 라이브러리입니다. `Axios`를 통해 웹에서 `API`와 상호작용할 수 있고, `GET`, `POST`, `PUT`, `DELETE` 등 다양한 HTTP 메소드를 쉽게 사용할 수 있습니다. `Axios`는 Promise 기반으로 작동하여 비동기 요청을 관리하고, 요청과 응답의 인터셉터, 자동 JSON 변환, 타임아웃 설정 등의 기능을 제공합니다.GET 리퀘스트`GET` 요청은 서버에서 특정 데이터를 조회하기 위해 사용됩니다. 클라이언트가 서버에 요청을 보내고, 서버는 해당 요청에 대한 응답으로 데이터를 반환합니다.// axiosasync function getAxios(id) { const res = await ..

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

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