tonirr

Promise 란 Promise는 javascript안에 내장되어 있는 객체이며 비동기 적인 것을 수행할 때 콜백함수 대신 유용하게 사용할 수 있는 객체이다. Promise의 state Promise는 다음 중 하나의 상태를 가진다. 대기(pending): 연산을 수행중이거나 거부되지 않은 초기 상태 이행(fulfilled): 연산이 성공적으로 완료됨 거부(rejected): 연산이 실패함 Producer vs Consumer Promise는 원하는 기능을 수행해서 해당 데이터를 만들어내는 Producer와 데이터를 소비하는 Consumer로 나뉘어진다. Producer const promise = new Promise(() => { setTimeout(() => { // resolve('user id ..

Intersection Observer란? Intersection Observer란 브라우저 뷰포트(Viewport)와 선택된 요소(Element)의 교차점을 관찰하는 API이다. 쉽게 말하면 선택된 요소가 사용자 화면에 현재 보이는지 보이지 않는지를 구별하는 기능을 제공한다. Intersection Observer의 생성과 구조 new IntersectionObserver()를 통해 인스턴스(io)를 생성, 관찰자(Observer)를 초기화, 관찰할 대상(Element)을 지정하여 사용할 수 있다. 생성자는 2개의 인수(callback, options)를 가진다. const io = new IntersectionObserver(callback, options) // 관찰자 초기화 io.observe(e..

Vanilla JS로 컴포넌트 방식을 사용하여 웹페이지를 만들던 중 appendChild를 통해 부모 컴포넌트에 자식 컴포넌트를 append 하는 과정에서 아래와 같은 에러가 발생했다. 해당 글에서 칭하는 컴포넌트는 javascript class를 말한다. Uncaught TypeError: Cannot read properties of undefined (reading 'appendChild') 자식 컴포넌트 생성시에 인자를 넘겨주어야 하는 상황이었는데 해당 에러때문에 부모 컴포넌트에 자식 컴포넌트가 append 되지 않았다. 원인은 부모 컴포넌트에서 자식 컴포넌트를 생성시 인자를 넘겨줄 때 중괄호를 누락시켰기 때문에 발생했고 아래 코드에 적은 대로 $target이 아닌 ${target}으로 넘겨 주어..

setTimeout 동작이 한번 일어남 실행중 다른 setTimeout으로 인해 함수가 호출되어도 기존에 실행되는 함수에 영향을 주지 않음 let timer = setTimeout(function(){}, time); // 사용 clearTimeout(timer); // 종료 setInterval 기본 동작이 반복적으로 일어남 실행중 다른 setInterval으로 인해 함수가 호출되면 기존에 실행되는 함수는 종료됨 let timer = setInterval(function(){}, time); // 사용 clearTimeout(timer); // 종료

좋은 코드란? 성공, 실패의 경우를 분리해서 처리할 수 있음 비즈니스 로직을 한눈에 파악할 수 있음 어려운 코드란? 실패, 성공의 경우가 서로 섞여서 처리됨 비즈니스 로직을 파악하기 어려움 흐름파악이 어려움 도메인 맥락 표현이 안되어 있음 동료에게 물어봐야 알 수 있는 코드 원하는 로직을 빠르게 찾으려면? 하나의 목적을 가진 코드가 흩뿌려져 있지 않게 응집시켜야 함 응집시킬 것 당장 몰라도 되는 디테일 응집시키면 안되는 것 코드 파악에 필수적인 핵심 정보 함수가 여러가지 일을 하지 않도록 단일책임 형태로 만듦 단일책임을 가질 수 있도록하는 리팩토링 tip 한가지 일만 하는, 명확한 이름의 함수 한가지 일만 하는, 기능성 컴포넌트 조건이 많아지면 한글이름도 고려해 볼 것 함수의 세부구현 단계가 제각각이지 ..

자바스크립트로 파일내용을 Unit8Array 인코딩하고 인코딩한 내용을 다시 디코딩해서 가져올 수 있다. 1. input 파일과 encoding, decoding 내용을 가져올 textarea Uint8Array encoding Uint8Array decoding 2. 스크립트 코드 파일 내용만 읽어온다면 FileReader객체의 readAsText를 사용할 수 있지만 Unit8Array를 사용할 경우 readAsArrayBuffer를 사용해야 한다.

자바스크립트로 파일내용을 읽어 올 수 있다. 1. body에 input태그를 추가시킨다. 2. 스크립트 코드 파일을 선택하면 textarea에 파일의 내용이 들어간다.

자바스크립트에서 파일의 인코딩타입을 알아내는 방법을 알아보고자 한다. file마다 고유한 인코딩 타입을 가지고 있는데 type이 file인 input에서 파일을 선택했을 때 javascript로 파일의 정보를 읽어오고 해당 파일이 어떤 인코딩 방식으로 되어있는지 알아내고자 했다. javascript 라이브러리가 있어 이를 사용했다. 1. 스크립트에 encoding.js를 추가시킨다. 2. 타입이 file인 input을 만든다. 3. 스크립트에 파일이 선택되었을 때 호출되는 함수를 선언한다. 파일 인풋이 change되었을 때 작동하는 이벤트리스너를 통해 onFileSelect함수가 실행되도록 하면 이벤트를 통해 file의 정보를 가져오고 Encoding.detect를 통해 파일의 인코딩 방식을 가져올 수 ..