코드잇 스프린트 9기36 [5주차 위클리페이퍼] HTTP 메서드 REST API에서 사용하는 HTTP 메서드 REST API는 웹 애플리케이션의 데이터를 교환하기 위해 사용되는 아키텍쳐 스타일이다. 이 REST API는 다양한 HTTP 메서드를 사용해서 자바스크립트의 fetch 함수나 axios 라이브러리 등을 이용하여 비동기 작업을 진행할 때 서버로부터 데이터를 주고받는다. HTTP 메서드에는 POST, GET, PATCH, DELETE, PUT, OPTIONS가 있다. 💡 POST 메서드POST 메서드는 서버로 사용자가 입력한 새 데이터를 제출하여 서버에 생성할 때 사용하는 메서드이다. fetch 함수를 사용할 때는 method: "POST"를 입력하고, JSON 형식의 데이터로 받아오기 위해 JSON 메서드를 호출하여 JSON.stringify(데이터명) 코.. 2024. 7. 30. [4주차 위클리페이퍼] 자바스크립트에서의 this 함수를 호출한 객체를 가리키는 키워드 자바스크립트에서 this 키워드는 함수를 호출한 객체를 가리키는 키워드로 사용된다. 그런데 함수 호출 방식에 따라 가리키는 값에 차이가 있다. 그래서 함수가 호출될 때 어떤 객체가 그 함수를 호출했느냐에 따라 this의 값이 달라진다. 몇 가지의 호출방식에 따른 예시는 다음 코드와 같다.// 일반 함수 호출function globalFunction() { console.log(this);}globalFunction(); // window 객체 출력// 메서드에서 호출const obj = { name: "mck", greet: function() { console.log(this.name); }};obj.greet(); // mck 출력// 생성자 .. 2024. 7. 26. [4주차 위클리페이퍼] 이벤트 버블링, 캡쳐링, 위임 이벤트 캡쳐링 이벤트 캡쳐링은 이벤트 호출 과정에서 가장 먼저 발생하는 과정으로, 이벤트가 발생했을 때 window 객체에서부터 이벤트 대상인 target까지 전파되는 과정이다.const colorBtn = document.querySelector(".btn");const changeColorHandler = () => { colorBtn.style.backgroundColor = "blue";}colorBtn.addEventListener("click", changeColorHandler); 위 코드를 실행하면 버튼의 배경색이 파란색으로 바뀌는데, 클릭이벤트가 실행되면 클릭과 동시에 실행되는 것처럼 보이지만 사실 캡쳐링 과정을 선행하여 target인 colorBtn 요소까지 도달한 후 실행이 된 것이.. 2024. 7. 26. ES2022에서 새로 추가된 top-level await Top-level await 내가 코딩을 본격적으로 하기 전인 2022년 6월에 ES2022가 발표되었다. 여기서 오늘 내가 새로 알게된 기능 하나가 포함되었다. 여러가지가 발표되었지만, 그중에서도 top-level await 기능이다. 비동기 처리를 위해서는 async와 await는 항상 함께 사용한다. 자바스크립트 문법 규칙이기도 하고, 사용할 때는 짝꿍이라고 생각하면서 사용했다. 그래서 async 내부에서 await를 사용해야 문법 에러가 뜨지 않았는데, top-level await는 모듈의 최상단 레벨에서 async없이도 모듈화된 자바스크립트 파일들이 마치 하나의 async 덩어리처럼 동작하여 육안상으로 await만으로도 비동기 처리가 잘 되도록 만들어졌다.💡 최상단 레벨이란 각 모듈 파일의 최.. 2024. 7. 25. 콜백 지옥 콜백이 중첩될 때의 가독성 저하 콜백지옥(callback hell)은 자바스크립트에서 비동기 작업을 처리할 때 콜백 함수를 중첩해서 사용하는 것을 말한다. 예시 코드를 보면 다음과 같다.const fetchData = (data) => { setTimeout(() => { data(null, "mouse"); }, 1000)};const processData = (data, callback) => { setTimeout(() => { callback(null, `${data} 진행중`); }, 1000)};const saveData = (data, callback) => { setTimeout(() => { data(null, `${data} 저장됨`); }, 100.. 2024. 7. 24. map 메서드와 forEach 메서드 활용 배열을 반복하는 메서드 오늘 팀미팅을 하며, 팀원님이 내가 낸 문제에 대한 질문으로 해당 문제를 forEach 메서드로도 풀이가 가능한지를 물어보셨다. 그런데 그 순간 '어.. 가능할까?' 생각하다가 다른 팀원님이 대신 답을 해주셔서 넘어갔는데, map 메서드에 비해 자주 쓰지 않아서, 조금만 응용할 줄 알면 사용이 가능한 부분을 제대로 몰랐기 때문에 답변을 못했다고 생각한다. forEach 메서드와 map 메서드는 모두 배열을 반복하는 메서드인데 약간의 차이점이 있다.forEach 메서드는 배열을 반복만 한다.map 메서드는 반복하면서 새 배열을 반환한다.위 차이점말고도 작년에 올린 포스팅에서도 차이점에 대해 적어보았다.(2023.09.12 - [자바스크립트] - map과 forEach의 차이) map.. 2024. 7. 23. 이전 1 2 3 4 5 6 다음
