CS 4

프론트엔드 빌드 시스템에 대해

👉 바벨이란? 모든 브라우저가 최신 자바스크립트 문법을 이해하지 못해서 바벨이 브라우저가 이해할 수 있도록 변환해준다 파싱 - 변환 - 출력 단계로 빌드를 진행한다. 코드를 읽고 추상 구문트리로 변환, 변경하여 나온 결과물을 출력한다. 바벨은 파싱, 출력을 담당하고, 변환은 플러그인이 담당한다. 바벨 플러그인은 바벨이 어떤 코드를 어떻게 변환할지에 대한 규칙을 나타낸다. 👉 폴리필이란? 최신 ECMAScript 환경을 만들기 위해 코드가 실행되는 환경에 존재하는 않는 빌트인, 메서드 등을 추가하는 역할 바벨을 ES6+를 ES5로 변환할수있는것만 변환하는데 Promise같이 변환할 수 없는 경우 에러가 발생한다. 이런 경우 폴리필을 통해 해결할 수 있다. 👉 Node.js이란? 자바스크립트가 구동되는 환경..

CS 2022.06.24

자바스크립트 비동기 처리에 대해

👉 동기와 비동기 동기 요청을 보낸 후 응답을 받아야지만 다음 동작이 이루어지는 방식이다. 모든 일이 순차적으로 실행된다. 비동기 요청을 보낸 순서와 상관없이 또 다른 동작이 요청하고 이루어지는 방식이다. 모든 일이 병렬적으로 실행된다. 👉 Callback과 Promise, Async & Await Callback 나중에 호출할 함수이다. 함수를 중첩적으로 사용하게 되면 콜백 헬이 발생하여 가독성이 떨어진다. Promise 동작 후에 어떤 종류의 결과가 반환됨을 약속해주는 Object이다. ES6부터 콜백의 단점을 보완했다. 실행이 성공하면 resolve를 반환, 실패하면 reject를 반환하여 결과를 알려준다. then과 catch를 사용하여 접근이 가능하다. Async & Await 기존 비동기 처리..

CS 2022.06.24

자바스크립트 이벤트 관리 ( 버블링, 캡쳐링 )

👉 이벤트 버블링 - Event Bubbling 특정 요소에서 이벤트가 발생했을 때 이벤트가 더 상위 요소들로 전달되어 가는 특성 자식에서 부모로 전파 👉 이벤트 캡쳐링 - Event Captureing 특정 요소에서 이벤트가 발생했을 때 이벤트가 하위 요소들로 전달되어 가는 특성 부모에서 자식으로 전파 이벤트 버블링과 이벤트 캡쳐링은 반대의 개념이다. 👉 이벤트 위임 - Event Delegation 하위 요소에서 이벤트를 관리하지 않고, 상위 요소에서 하위 요소의 이벤트를 관리하는 방식

CS 2022.06.24

브라우저 저장소에 대해 설명해보세요.

👉 로컬 스토리지, 세션 스토리지, 쿠키 로컬 스토리지와 세션 스토리지는 HTML5에 추가된 저장소로 key - value 형태로 구성되어 있고, 차이점은 영구성에 있다. 로컬 스토리지는 사용자가 지우지 않는 한 데이터가 브라우저에 영구적으로 남아 있지만, 세션 스토리지는 세션을 종료하면 데이터가 삭제된다. 로컬 스토리지, 세션 스토리지 이전에 저장소 역할을 했던 것이 쿠키이다. 쿠키는 만료기한이 존재하는 key - value형태이다. 👉 로컬 스토리지 & 세션 스토리지 값으로는 문자열, 숫자, 불린 등을 저장할 수 있지만 모두 문자열로 저장된다. 사용법은 둘다 아래와 같다. localStorage를 sessionStorage로 변경하면 된다. localStorage.setItem(키, 값) // 저장 ..

CS 2022.06.24