Frontend/Javascript38 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.. 2022. 3. 22. 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 처럼 다중상속을 할 수는 없습니다. 아래와 같은 에러가 발생하게 됩니다. 다중상속의 대안으로 믹스인을 사용할 수 있습니다... 2022. 3. 21. 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.. 2022. 3. 20. Javascript keydown, keyup, keypress 키보드가 눌렸을때 현재 값을 가져오고 싶다면 keyup을 사용해야 합니다. keyup은 키보드에서 손이 떼졌을때 발동되기 때문입니다. 키보드가 눌렸을때 계속 함수를 실행시키고 싶다면 keydown을 사용해야 합니다. keydown은 키보드가 눌렀을때 발동되기 때문입니다. keydown은 keyboard가 눌렀을때 실행됩니다. keyboard를 눌렀을때 실행되기 때문에 현재 input에 입력되어 있는 값을 가져올 수 없습니다. keydown은 키보드를 누르고 있으면 계속 함수가 실행됩니다. keyup은 keyboard에서 손을 땠을때 실행됩니다. keyboard에서 손을 땠을때 실행되기 때문에 현재 input에 입력되어 있는 값을 가져올 수 있습니다. keyup은 키보드를 계속 누르고 있어도 함수는 실행되.. 2022. 3. 19. SPA(Single Page Application) SPA란 페이지가 하나인 앱입니다. 기존의 웹 사이트들에서는 사이트를 이동시마다 서버에서 html 파일을 컴파일 해서 보내주었고 브라우저에서는 새로고침과 함께 변경된 html을 렌더링 해주었습니다. 비교적 간단하게 구성된 옛날의 페이지들은 이러한 과정에 크게 문제가 없었습니다. 그러나 점점 웹 페이지의 용량은 커졌고 이를 서버에서 매번 감당하기에는 어려움이 생겼습니다. 그래서 spa가 등장하게 됩니다.(두둥) spa에서는 최초 요청시 서버로부터 html을 전달받습니다. 이후의 요청은 ajax를 통해 사용자에게 보여주기 위한 데이터들을 json 형식으로 받아오고 이를 동적으로 사용자에게 보여줍니다. 필요한 부분만 요청 & 응답을 받게되고 이를 사용자에게 보여줍니다. 이제 서버는 수고를 덜었습니다. spa에.. 2022. 3. 19. 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 요청의 응답을 보내줍니다.. 2022. 3. 19. 이전 1 2 3 4 5 6 7 다음
