Frontend/Javascript

비동기 에러처리 🤔

문득 setTimeout에 전달된 함수는 어떻게 에러처리를 해야하난 궁금해져서 이 문서를 작성합니다. 살펴볼 예시는 4가지 입니다. try/catch setTimeout with try/catch Promise의 catch async/await with try/catch try/catch try/catch는 예외상황을 다뤄야 할때 주로 사용합니다. javascript가 런타임에서 에러가 나면 이후의 코드는 실행되지 않고 멈추어 버리기 때문에 예외처리는 중요합니다. 예외가 발생할 수 있는 곳에 보험을 들어서 이후의 동작을 수행할 수 있도록 하는 것이 중요하다고 생각합니다. 아래의 코드가 있습니다. 하나는 try/catch로 감싼것, 감싸지 않은 것입니다. 감싸지 않은 것에서는 에러가 발생하여 이후의 동작을..

Javascript 프론트엔드 MV* 아키텍처 (원글 + 생각)😉

아래 출처의 글을 정리하고 약간의 생각을 가미하려 합니다. 허락해주신 테오님께 갑사합니다 ㅎㅎ MVC패턴 MVVM패턴 등등이 많이 언급되고 사용된다 하지만 저는 MVC 패턴만 간략하게 이해가 되고 다른 것들은 쉽게 이해가 되지 않았습니다. 그러던 와중 좋은 글을 읽게 되었고 저자의 허락을 얻어 저의 언어로 정리하고 인사이트를 작성해 보고자 합니다. 1. 아키텍쳐란 무엇일까요? 2. 웹 프론트엔드 아키텍쳐 이야기 3. 현대 웹 프론트엔드의 아키텍쳐 방향성 1. 아키텍쳐란 무엇일까요? 아키텍처란 영어로는 '건축학'이라는 뜻입니다. 이 단어가 개발분야로 유입되면 조금 다른 뜻을 가지게 됩니다. 아래 사진들은 옷장에 대한 사진들 입니다. 두개의 옷장은 전부 같은 양의 옷을 보관하고 있다고 가정하겠습니다. 그리고..

Javascript Colocation (번역글) 🤔

이 포스트는 아래 출처의 글을 번역한 글입니다. 의역과 오역을 자주 사용합니다. 우리 모두는 유지보수가 쉬운 코드를 원합니다. 그래서 우리는 코드를 유지보수가 쉽고 이해하기 쉽게 만들기 위한 최선의 의도와 함께 시작을 합니다. 시간이 지나고 코드가 커질수록 의존성을 관리하기는 어려워 집니다. 프로젝트가 커질 수록 코드가 '사소한 지식'이 되고 '기술 부채'에 기여하는 코드의 양은 증가해져 갑니다. 저는 제 코드를 저 뿐만 아니라 동류, 미래의 코드 관리자, 6개월 뒤에 저를 위해 관리가 수월하게 하고 싶었습니다. 모두가 동의할 수 있다고 생각합니다. 이것은 좋은 생각이고 우리가 우리의 코드에서 갈구해야 하는 것이라는 것을. 이것을 성취하기 위한 기술과 다양한 도구 들이 많이 존재합니다. Let's tal..

Javascript Don't Use Javascript Variables Without knowing Temporal Dead zone (번역글 + 생각) 💀

아래 출처의 글 중 일부를 번역하고 제 생각을 넣은 글입니다. 의역과 오역을 자주 사용합니다. 아래의 코드중 어떤 코드가 에러를 발생시킬 것 같나요??? 아래의 코드는 인스턴스를 생성합니다. 그리고 사용된 클래스를 정의합니다. new Car('red'); // 동작할까요?? class Car { constructor(color) { this.color = color; } } 두번째는 호출을 한후에 함수의 정의를 합니다. greet('World'); // 동작할까요? function greet(who) { return `Hello, ${who}!`; } 첫번째 코드는 ReferenceError를 발생시킵니다. 두번째는 정상적으로 동작하구요 만약 답변하지 못했거나 틀렸다면 Temporarl Dead Zone..

Javascript undefined/undeclared/null and NaN 🧟

헷갈릴수 있는 undefined/undeclared/null 과 NaN에 대하여 정리하려고 합니다. undefined (아무런 값도 할당되지 않았다) 변수가 선언이 된 이후에 undefined로 초기화된 상황입니다. 스코프에 변수가 선언이 되었으나 아직 아무런 값도 할당되지 않았다는 것을 의미합니다. 변수는 선언 -> 초기화 -> 할당의 순서를 가지게 됩니다. var의 경우 호이스팅이 일어나게 될때 선언이 끌어올려지고 undefined로 초기화가 이루어 집니다. var test; console.log(test) // undefined console.log(typeof test) // undefined undeclared (선언조차 되지 않았다) console.log(name) // Uncaught Ref..

Javascript intersection observer api 👀

1번 상황 서비스하고 있는 사이트에 이미지가 2200개가 있다고 가정하겠습니다. 웹의 로드와 동시에 2200개의 이미지를 전부다 받아와야 한다면 사용자는 기다리는 동안 커피를 사올수 있고 세차도 가능할 지도 모릅니다. 2번 상황 3500개의 DOM 객체가 있고 이들이 화면에 나타나면 색깔이 변해야 한다는 기획이 있다고 가정해 보겠습니다. css의 animation 속성을 이용해 색깔을 계속 바꿔지도록 할 수도 있어서 화면에 나타나고 딱 한번만 색깔이 바뀌어야 한다고 조건을 추가하겠습니다. scroll 이벤트를 걸고 모든 DOM 객체들의 getBoundingClientRect를 이용하여 뷰포트 내의 위치를 가져오고 이를 이용하여 클래스를 변경해주는 방식도 있을 수 있을것 같습니다. getBoundingCl..

Javascript async/await, Promise 실수 포인트 🗝

async/await에서 에러 처리 new Promise((resolve, reject) => { throw new Error('this is error') }).catch(e => console.log(e)) // 에러내용 출력 new Promise(async (resolve, reject) => { throw new Error('this is error') }).catch(e => console.log(e)) // pending Promise 안에서 async를 사용하여 Error를 반환한 두번째의 경우에는 에러가 정상적으로 반환되지 않습니다. 이 상태면 Promise는 계속 pending 상태가 되고, 메모리를 차지하고 있게 됩니다. 왜 그럴까요? promise 내부에서는 resolve, rejec..

Javascript 콜백 📞

콜백함수, 콜백함수 지옥, Promise의 등장, generator를 이용한 promise.then 지옥의 탈출, es8에서의 async/await 등장 이와 같은 흐름을 들어보셨고 콜백에 대한 이야기 또한 많이 접했었습니다. 위의 흐름이 등장하게 된 원인인 콜백 함수에 대해서 알아보려고 합니다. 콜백 함수란 다른 함수에 매개변수로 넘겨준 함수를 말합니다. 아래와 같은 두개의 예시가 있을것 같아요 // 1번 // button.addEventListener('click', function() { console.log(this) // button element }) // 2번 // function sayHi(name) { console.log(`hi ${name}`) } function wrongInput(..

Javascript Promise, async/await MicroTask queue 동작차이 🖇

Javascript 내에서 callback를 더 효율적으로 사용하기 위해 promise가 등장하였고 promise를 더 효율적으로 사용하기 위해 es8에서 async/await 이 등장하였습니다. promise와 async/await이 브라우저에서 어떻게 구현되는지 동작의 차이를 알게되었고 이를 글로 적어보려 합니다. promise, async/await은 둘다 promise를 return하거나 throw하므로 micro task queue에서 다루어집니다. callback queue에는 3종류가 있습니다. macro task queue, micro task queue, animationFrame 우선순위는 micro task queue > animationFrame > macro task queue 순..

Javascript Prototype 🤢

프로토타입(prototype)이란 한글로 원래의 형태 또는 전형적인 예라는 뜻을 가지고 있습니다. javascript는 프로토타입 기반의 언어입니다. 그래서 javascript에서 프로토타입 개념을 이해하는 것은 매우 중요합니다. 클래스 기반언어 에서는 클래스를 먼저 선언하고 새로운 객체(인스턴스)를 생성합니다. 하지만 javascript에서는 프로토타입(prototpe)을 원형으로 삼고 이를 이용하여 객체를 생성합니다. var jade = { name: 'jade' } jade.toString() // '[object Object]' function Person(name) { this.name = name } var wade = new Person('wade') wade.name // 'wade' wa..