Frontend/Javascript

Javascript Polyfill

Polyfill(폴리필)은 웹 개발에서 기능을 지원하지 않는 웹 브라우저 상의 기능을 구현하는 코드를 뜻합니다. 예를들면 자바스크립트의 최신 스펙에 나온 함수를 사용하여도 웹 브라우저에서는 돌아가지 않을 수 있습니다. 여러 자바스크립트 엔진에서는 자바스크립트의 최신 스펙중 우선순위에 따라 구현할 것이므로 아직 자바스크립트 엔진에 구현이 되어 있지 않을수도 있는 것이죠. 폴리필은 다시 정의하면 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트라 할수 있습니다. 현재는 바벨과 같은 트랜스 파일러를 이용합니다. 최신 스펙으로 작성된 스크립트 코드를 명시한 버전에 따라 재작성 해줍니다. 낮은 버전의 자바스크립트 엔진에서도 프로그램이 돌아갈 수 있게 해주어 서비스가 문제없이 제공될 수 있게 해줍..

Javascript strict mode

javascript에는 strict mode가 있습니다. strict mode를 활성화 시키면 평소에는 무시되던 에러들을 발생시키기 시작합니다. 런타임에서 혹시 발생할 수 있는 에러들을 잡아내는데 도움을 줄 수 있습니다. 전체 스크립트에 strict mode를 활성화 시키기 위해서는 코드의 최상단에 "use strict"를 추가해주면 됩니다. "use strict" console.log('hihi'); 아래와 같이 사용하면 부분 함수에 적용할 수 있습니다. function test() { "use strict" console.log('hihi') } es6의 모듈은 default가 strict mode 입니다. script type="module"을 사용하면 strict mode가 default로 사용됩..

Javascript 화살표 함수

화살표 함수는 es6에서 등장하였습니다. 화살표 함수의 기본문법은 아래와 같습니다. () => {} const test = () => { console.log('hihi') } 화살표 함수는 함수 표현식으로 사용하여야 합니다. 익명함수로서만 사용할 수 있기 때문입니다. fuction test() { console.log('hihi') } const test = () => { console.log('hihi') } 화살표 함수는 this를 가지지 않습니다. 따라서 화살표 함수 내부에서의 this는 항상 상위 스코프의 this를 가리킵니다. bind, call, apply를 통하여 화살표 함수의 this를 변경할수가 없습니다. const people = { age: 0, older() { setTimeout..

Javascript event capturing, bubbling

DOM 이벤트는 3개의 단계로 나뉘어집니다. 1. 이벤트 캡쳐링 - 이벤트가 하위 요소로 전파되는 단계 2. 타깃 - 이벤트가 실제 타깃 요소에 전달되는 단계 3. 이벤트 버블링 - 이벤트가 상위 요소로 전파되는 단계 위의 그림처럼 나타낼 수 있습니다. 이제 실제로 어떻게 출력되는지 보겠습니다. const divs = document.querySelectorAll('div'); divs.forEach(div => { div.addEventListener( "click", function () { console.log(this.classList); }, { capture: true } ); }) 위와 같은 코드로 클릭시에 자신의 classList를 출력하게 하였습니다. capture: true를 통해 캡처..

Javascript Callback, Promise, async, await

자바스크립트 에서는 함수의 비동기 처리를 지원합니다. 비동기 처리란 함수를 실행후에 함수의 결과를 기다리지 않고 다음 코드의 실행을 할수 있게 해주는 것을 말합니다. 하지만 구현을 하다보면 새로운 함수에서 이전에 실행된 함수의 실행을 필요로 할때가 있습니다. let test = () => { setTimeout(() => { console.log('a'); setTimeout(() => { console.log('b'); setTimeout(() => { console.log('c'); setTimeout(() => { console.log('d'); setTimeout(() => { console.log('e') }, 1000) }, 1000) }, 1000) }, 1000) }, 1000) } tes..

Javascript mixins

자바스크립트에서는 다중상속이 되지 않습니다. 단일 상속만을 허용하는 언어입니다. 아래의 예시처럼 상속을 이용할 수 있습니다. class People { constructor(age, name) { this.age = age; this.name = name; } } class Programmer extends People { constructor(age, name, job) { super(age, name); this.job = job; } } const test = new Programmer(10, 'test', 'programmer') console.log(test); python 처럼 다중상속을 할 수는 없습니다. 아래와 같은 에러가 발생하게 됩니다. 다중상속의 대안으로 믹스인을 사용할 수 있습니다...

Javascript mouseup, mousedown, mousemove, touchstart, touchend, touchmove

web의 event에는 mouse동작과 touch 동작에 따른 이벤트를 제어할 수 있습니다. 매번 click, submit만 다루었었어서 swiper의 동작은 어떻게 구현하나 싶었는데 이번기회에 힌트를 찾은것 같습니다. 이미 제공하는 수많은 event들이 있고 이것들을 이용하면 더 나은 서비스를 구현할 수 있을것 같네요. 요번에 알아볼 이벤트는 6개의 이벤트 입니다. 이 6개의 이벤트를 구현해서 간단한 예제 한번 구현하였습니다. 스파이더맨을 드래그 할 수 있고 이 드래그가 종료되면 거미줄을 쏩니다. 나중에는 좀 더 디벨롭 시켜서 삼스파가 나오게 해야겠네요 const dragBox = document.querySelector(".drag-box") dragBox.addEventListener("moused..

Javascript keydown, keyup, keypress

키보드가 눌렸을때 현재 값을 가져오고 싶다면 keyup을 사용해야 합니다. keyup은 키보드에서 손이 떼졌을때 발동되기 때문입니다. 키보드가 눌렸을때 계속 함수를 실행시키고 싶다면 keydown을 사용해야 합니다. keydown은 키보드가 눌렀을때 발동되기 때문입니다. keydown은 keyboard가 눌렀을때 실행됩니다. keyboard를 눌렀을때 실행되기 때문에 현재 input에 입력되어 있는 값을 가져올 수 없습니다. keydown은 키보드를 누르고 있으면 계속 함수가 실행됩니다. keyup은 keyboard에서 손을 땠을때 실행됩니다. keyboard에서 손을 땠을때 실행되기 때문에 현재 input에 입력되어 있는 값을 가져올 수 있습니다. keyup은 키보드를 계속 누르고 있어도 함수는 실행되..

SPA(Single Page Application)

SPA란 페이지가 하나인 앱입니다. 기존의 웹 사이트들에서는 사이트를 이동시마다 서버에서 html 파일을 컴파일 해서 보내주었고 브라우저에서는 새로고침과 함께 변경된 html을 렌더링 해주었습니다. 비교적 간단하게 구성된 옛날의 페이지들은 이러한 과정에 크게 문제가 없었습니다. 그러나 점점 웹 페이지의 용량은 커졌고 이를 서버에서 매번 감당하기에는 어려움이 생겼습니다. 그래서 spa가 등장하게 됩니다.(두둥) spa에서는 최초 요청시 서버로부터 html을 전달받습니다. 이후의 요청은 ajax를 통해 사용자에게 보여주기 위한 데이터들을 json 형식으로 받아오고 이를 동적으로 사용자에게 보여줍니다. 필요한 부분만 요청 & 응답을 받게되고 이를 사용자에게 보여줍니다. 이제 서버는 수고를 덜었습니다. spa에..

CSR vs SSR

CSR(Client Side Rendering) vs SSR(Server Side Rendering) CSR은 클라이언트 측에서 렌더링을 하는 것이고 아래 이미지들은 csr의 단계를 그림으로 나타낸것입니다. 1. 사용자는 웹사이트를 요청합니다. 2. CDN(Cloud Development Network)에서 html과 js의 링크를 같이 전달해줍니다. 3. 브라우저에서는 html을 다운받고 js를 다운로드 받습니다. 다운로드 받는 와중에는 사이트가 나타나지 않습니다. 4. 브라우저에서 javascript를 다운로드 완료합니다. 5. js가 브라우저에서 실행되고 api를 통해 필요한 자원들을 불러옵니다. 이때 사용자에게 placeholder를 보여줄수 있습니다. 6. 서버는 api 요청의 응답을 보내줍니다..