공부하자

문제상황우리 서비스는 한 페이지에서 get 요청을 어마무시하게 많이 날리고 있다!후덜덜물론 받아오는 데이터들이 전부 간단한 string이지만 요청을 한 번에 처리하기엔 서버에 무리가 갈 수도 있다고 판단하였다.그리고 이런 대량의 api의 get 요청은 어떻게 진행시키면 좋은지 궁금해져서 어떻게 처리를 하나 찾아보았다.해결 방법get요청을 병렬적으로 실행한다!병렬적으로 서버 요청 보내는 함수 만들기: Promise.all을 사용하여 여러 API 요청을 병렬적으로 실행한다.사용자에겐 로딩중을 띄워서 조금 기다리게 한 후 그 사이에 순차적으로, get 요청을 병렬적으로 실행하여 데이터를 받아오는 방법을 사용하면 된당 Promise.allPromise.all은 여러 개의 프로미스를 병렬로 실행할 수 있게 해주는..

해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV 프론트엔드 날개달기이 강의를 통해 Webpack, NPM, 모듈시스템 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.www.youtube.com 이벤트 버블링과 캡처링이벤트 전파의 개념이벤트 전파: HTML 요소에서 이벤트가 발생했을 때 브라우저가 이벤트를 전달하는 방식.이벤트는 두 가지 방식으로 전파됨: 캡처링(Capturing)과 버블링(Bubbling).이벤트 전파 단계캡처링(Capturing): 이벤트가 최상위 요소(html)에서 시작하여 타겟 요소까지 내려감.버블링(Bubbling)..

해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV 프론트엔드 날개달기이 강의를 통해 Webpack, NPM, 모듈시스템 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.www.youtube.com  자바스크립트의 this 키워드 이해하기this란 무엇인가?this는 자바스크립트에서 객체를 가리키는 키워드이다.⇒ 간단히 말해 this는 호출한 객체를 의미한다! 호출한 놈!!호출한 객체가 없으면 기본값은 전역 객체인 window이다.예외도 있다전역스코프에서 this는 window 객체 이다.화살표 함수(Arrow Function)에서 this가 ..

해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV 프론트엔드 날개달기이 강의를 통해 Webpack, NPM, 모듈시스템 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.www.youtube.com HTML 파일에서 자바스크립트 파일을 효과적으로 가져오는 방법기본적인 자바스크립트 파일 가져오기HTML 파일 생성 (index.html)자바스크립트 파일 생성 (script.js)HTML 파일에서 브라우저에서 라이브 서버 실행하여 확인버튼 클릭 시 경고창 띄우기HTML 파일에 버튼 추가:Click me     2. 자바스크립트 파일에서 버튼에 이벤트..

해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV 프론트엔드 날개달기이 강의를 통해 Webpack, NPM, 모듈시스템 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.www.youtube.com   브라우저 객체 모델(BOM)이란 무엇인가?브라우저 객체 모델(BOM) 개요브라우저 객체 모델(Browser Object Model, BOM)은 웹 브라우저를 객체화한 것이다.BOM은 자바스크립트로 브라우저를 제어하기 위해 사용된다.브라우저에서 제공하는 여러 기능들을 자바스크립트로 제어할 수 있다.주요 브라우저 객체Window 객체브라우저 창 자체..

지나친 이론 공부를 다시 해보겠다... 해당 글은 하단 강의와 교안을 바탕으로 작성되었습니다.https://www.youtube.com/playlist?list=PLlaP-jSd-nK9LiA2n07uBhzOn9wI53xGV 프론트엔드 날개달기이 강의를 통해 Webpack, NPM, 모듈시스템 등 프론트엔드 개발자가 되기 전에 꼭 알아야할 지식을 탄탄히 다질 수 있습니다.www.youtube.com  돔(DOM)이란 무엇인가?자바스크립트의 탄생 배경자바스크립트는 웹문서를 제어하기 위해 개발된 언어이다.HTML 요소를 추가, 제거, 변경하는 등의 작업을 위해 사용된다.HTML 파일을 자바스크립트로 제어하는 방법브라우저에는 웹 문서를 해석할 수 있는 렌더링 엔진이 있다.ex) 크롬 : 블링크, 파이어폭스: 게..

JavaScript에서 동적으로 객체 속성을 만들어 값을 할당하는 예시 // ES5 방식 var combined = {}; combined['one' + randomKeyString] = 'some value'; // ES6 방식 var combined = { ['one' + randomKeyString]: 'some value', }; 1. combined라는 빈 객체를 생성한다. 2. randomKeyString은 어딘가에서 가져온 랜덤한 문자열! 이 문자열을 one과 결합하여 새로운 속성의 키를 만든다. 예를 들어 randomKeyString이 'ABC'라면 이 부분은 'oneABC'가 된다. 그리고 이 키에 'some value' 라는 값을 할당한다. 결과적으로 combined 객체는 다음과 같은..

지연 실행과 커링은 다른 개념이지만 때때로 함께 사용되어 비동기적인 작업을 다루거나 코드의 가독성과 유지보수성을 높이는 데 활용될 수 있다. 커링 (Currying) 커링은 다중 인자를 갖는 함수를 한 개의 인자를 받는 함수로 변환하는 기법이다. 커링을 통해 함수의 일부 인자를 미리 고정하고, 나머지 인자는 나중에 제공하여 함수를 실행할 수 있다. 이는 함수를 재사용하고 모듈화된 형태로 만들 수 있게 한다. 커링을 사용한 예제 const add = a => b => a + b; const add5 = add(5); console.log(add5(3)); // 8 console.log(add5(7)); // 12 지연 실행 (Delayed Execution) 지연 실행은 어떤 코드 블록이나 함수를 나중에 ..

자바스크립트에는 다음과 같은 내장 또는 외장 비동기 함수들이 있다. fetch : 서버로부터 데이터를 받아오는 API 호출을 해주는 함수 setTimeout : 특정 시간 이후 콜백함수를 실행시켜주는 함수 setInterval : 특정 시간 마다 틱을 발생시켜 콜백함수를 주기적으로 실행시키는 함수 이런 함수들은 모두 Promise를 반환하기 때문에 자동으로 비동기적으로 동작하게 되는데 가끔 비동기 함수의 결과값들을 바로바로 이용하고 싶을 때가 있다. 예를 들면 fetch를 이용해 A서버로부터 배열 형태의 게시글 데이터를 불러오기 데이터를 불러왔다면 특정 조건을 이용해 필터링 하기 이때 2번 동작을 실행시키기 위해서는 1번 동작이 끝난 다음에, 결과값을 받아와 실행시켜줘야 한다. 하지만 1번 동작이 비동기..