Frontend/Javascript

React-query 🌱

react-query는 서버의 상태를 다루기에 정말 좋은 라이브러리라고 생각합니다. react-query의 공식 홈페이지에서도 서버의 상태를 위한 라이브러리로 설명되어있습니다. * React Query는 서버 상태 라이브러리입니다. 서버와 클라이언트의 비동기적인 동작을 관리하기에 적합합니다. * Redux, MobX, Zustand, etc 는 클라이언트 상태 라이브러리 입니다. 비동기 데이터를 저장할수는 있지만 React Query에 비해서는 비효율적입니다. 이러한 점을 염두에 두고 React Query는 클라이언트 상태에 위치한 캐시데이터를 관리하기 위한 boiler plate코드와 관련 로직들을 코드 몇 줄 만으로 대체한다는 것입니다! Redux에서 서버의 api요청 응답을 저장해두고 있을때는 아..

Javascript 실행 컨텍스트(Execution Context)

실행 컨텍스트(Execution Context)는 실행 가능한 코드가 실행되기 위해 필요한 환경을 뜻합니다 (실행할 코드에 제공할 환경정보를 모아놓은 객체) 실행 가능한 코드는 크게 3개의 종류가 있습니다. 전역 코드 함수 코드 eval 코드(eval은 사용하지 않아야 합니다.) 일반적으로 실행이 가능한 코드는 전역코드와 함수코드 입니다. 자바스크립트 엔진은 코드를 실행하기 위하여 여러가지 정보를 알고 있어야 합니다. 변수: 전역변수, 지역변수, 매개변수, 객체의 프로퍼티 함수 선언 변수의 유효범위(scope) this 위의 정보들을 물리적 객체의 형태로서 자바스크립트 엔진에서 관리합니다. 이벤트 루프를 언급할때 javascript engine에는 heap과 call stack이 존재한다고 하였습니다. ..

npm, yarn

npm, yarn 둘다 node 환경에서 패키지를 관리해주는 도구 입니다. 주로 yarn을 사용했었는데 어떤 차이점이 있는지 알아보려 합니다. 속도 npm은 의존성 파일을 순차적으로 설치합니다. 이전파일이 설치되고 다음파일을 설치합니다. a를 설치하고 b를 설치하고 c를 설치하는 형식입니다. yarn은 의존성 파일들을 병렬적으로 설치합니다. a, b, c를 병렬로 설치합니다. yarn은 다운받은 패키지들을 캐시에 저장합니다. 중복된 패키지를 설치해야 할 경우 캐시에 저장되어 있다면 캐시를 활용합니다. 캐시를 사용하기 때문에 npm에 비해 디스크의 사용이 더 큽니다 보안성 npm은 의존 관계를 가지는 다른 패키지를 즉시 포함합니다. 편하다는 장점이 있습니다. 하지만 보안문제에서 취약점을 불러올 수 있습니다..

Javascript custom array 🌹

javascript에서 빈 배열을 만드는 것을 계속 까먹어서 아래와 같이 정리합니다. 빈 배열 만들기 const arr = new Array(10) // [empty x 10] arr[5] = 1 arr // [empty x 5, 1, empty x 4] const brr = Array.from(5) // [] brr[5] = 1 brr // [empty x 5, 1] 빈 배열 채우기 const arr = new Array(10) arr.fill(4) arr // [4, 4, 4, 4, 4, 4, 4, 4, 4, 4] String에서 배열 만들기 Array.from('arr') // ['a', 'r', 'r'] Array.from('x'.repeat(5)) // ['x', 'x', 'x', 'x', 'x..

Javascript createObjectURL, revokeObjectURL 🤥

javascript에서는 createObjectURL을 통해 Blob 객체를 나타낼 수 있습니다. URL.createObjectURL 메소드를 사용하면 생성된 window의 document에서만 접근 가능한 url이 생성됩니다. 이를 통해 image를 입력받았을때 화면에 보여줄 수 있는 임시 url을 생성할 수 있습니다. Blob(Binary large Object) 객체는 javascript에서 이미지, 영상, 멀티미디어 데이터를 다룰때 사용합니다. createObjectUrl에 입력 가능한 (File, Blob, MediaSource)중 File은 Blob에 기반한 인터페이스 입니다. input에 type을 file로 주면 입력받은 파일에 input.files 메소드를 통해 접근할 수 있습니다. 아래..

Javascript custom event 🐕

javascript에서는 미리 정의되어 있는 이벤트 종류외에 추가로 custom event를 추가할 수 있습니다. 반복되는 동작을 customEvent로 정의후에 eventHandler를 등록한 dom 요소에서 dispatchEvent 메소드를 통해 customEvent를 동작하게 할 수 있습니다. customEvent에는 type과 옵션이 들어갑니다. 옵션 객체를 통해 원하는 데이터를 전달할 수도 있습니다. CustomEvent(type, [options]?) options => { detail: {객체 정의}} 아래는 간단한 사용 예시 입니다. const cat = new CustomEvent('animal', { detail: {name: 'cat' }}) const dog = new CustomE..

컴파일러, 인터프리터

컴파일러는 뭐고 인터프리터는 뭔가요? 컴파일러와 인터프리터는 고급언어로 작성된 소스코드를 기계어로 번역한 후에 프로그램을 실행하는 것입니다. 이 둘은 아래와 같은 차이점을 가지고 있습니다. 컴파일러 파일을 한 번에 번역합니다. 번역후에는 실행파일이 생성됩니다. 이후의 실행에는 생성된 실행파일을 가지고 실행하게 됩니다. 모든 파일을 한 번에 번역하여야 하므로 번역 과정은 인터프리터에 비해 상대적으로 느리지만 이미 번역된 실행파일을 가지게 되므로 이후의 실행에는 빠릅니다. 인터프리터 파일을 한 줄씩 번역을 합니다. 번역하는 시간은 한 줄만 번역을 하므로 짧지만 실행 할때마다 번역을 하여야 하므로 실행 시간이 컴파일러에 비해 느립니다. 실행파일이 생성되지 않으므로 같은 파일을 실행하게 되면 매번 같은 번역 과..

Javascript 함수 => 1급 객체 ❓

javascript 강의나 책을 보면 1급 객체라는 단어가 종종 나오곤 합니다. 1급 객체가 무엇인지에 대하여 궁금중이 생겨 포스팅 합니다. 1급 객체란 컴퓨터 프로그래밍 언어 디자인에서 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킵니다.(wiki) 아래의 조건들을 만족하면 1급 객체라 할 수 있습니다 값으로서 반환될 수 있어야 합니다 함수의 인자로 전달될 수 있어야 합니다 배열이나 변수에 담길 수 있어야 합니다 javascript에서 원시 타입은 1급 객체에 성립합니다. var a = 'a' function sum(a, b) { return a + b} sum(1,2) // 3 var array = [a, 1, 2, 3] 함수 또한 1급 객체에 성립됩니다. // 값으로서 반..

Javascript event loop

이벤트 루프는 브라우저에 정의되어 있습니다. 이는 whatwg의 명세를 보면 확인할 수 있습니다. html은 이전에는 단순 마크업 언어에 불과하였지만 현재는 마크업 언어 + web api 들을 지칭합니다. 이전 까지의 단순 마크업 언어에 불과했던 위상에서 벗어나야 한다 생각합니다. html 5로 들어서면서 그래픽 표현, 양방향 통신 등등 많은것들이 가능해졌습니다.(html5을 애플에서 사용하면서 플래시를 배제하였고 이로인해 어도비에서 많은 언론 플레이를 했던걸로 기억합니다.) html 에 관련한 글은 나중에 포스팅 할 수 있도록 하고 다시 본론으로 돌아오겠습니다. 이 글은 Event loop의 모든 것을 다루진 않습니다. 몇가지 주요한 관점만 살펴보고자 합니다. 위는 브라우저에서의 런타임을 나타낸 것입니..

Javascript 얕은 복사, 깊은 복사

HTML 삽입 미리보기할 수 없는 소스 얕은 복사(shallow copy) 변수가 가리키는 주소값이 같은 주소 값을 가리킬때 얕은 복사가 이루어진다고 한다. reference type을 복사할때 얕은 복사가 이루어진다. const a = { c: 'c' } const b = a b.c = 'd' console.log(a) // { c: 'd' } console.log(b) // { c: 'd' } console.log(Object.is(a,b)) // true spread를 통한 복사는 1 depth 까지만 깊은복사가 이루어진다. const a = { b: { c: 'c' }, e: 'e' } const b = {...a} console.log(a) // { b: { c: 'c' }, e: 'e' } c..