본문 바로가기

Frontend/Javascript38

npm, yarn npm, yarn 둘다 node 환경에서 패키지를 관리해주는 도구 입니다. 주로 yarn을 사용했었는데 어떤 차이점이 있는지 알아보려 합니다. 속도 npm은 의존성 파일을 순차적으로 설치합니다. 이전파일이 설치되고 다음파일을 설치합니다. a를 설치하고 b를 설치하고 c를 설치하는 형식입니다. yarn은 의존성 파일들을 병렬적으로 설치합니다. a, b, c를 병렬로 설치합니다. yarn은 다운받은 패키지들을 캐시에 저장합니다. 중복된 패키지를 설치해야 할 경우 캐시에 저장되어 있다면 캐시를 활용합니다. 캐시를 사용하기 때문에 npm에 비해 디스크의 사용이 더 큽니다 보안성 npm은 의존 관계를 가지는 다른 패키지를 즉시 포함합니다. 편하다는 장점이 있습니다. 하지만 보안문제에서 취약점을 불러올 수 있습니다.. 2022. 4. 3.
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.. 2022. 4. 2.
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 메소드를 통해 접근할 수 있습니다. 아래.. 2022. 4. 1.
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.. 2022. 4. 1.
컴파일러, 인터프리터 컴파일러는 뭐고 인터프리터는 뭔가요? 컴파일러와 인터프리터는 고급언어로 작성된 소스코드를 기계어로 번역한 후에 프로그램을 실행하는 것입니다. 이 둘은 아래와 같은 차이점을 가지고 있습니다. 컴파일러 파일을 한 번에 번역합니다. 번역후에는 실행파일이 생성됩니다. 이후의 실행에는 생성된 실행파일을 가지고 실행하게 됩니다. 모든 파일을 한 번에 번역하여야 하므로 번역 과정은 인터프리터에 비해 상대적으로 느리지만 이미 번역된 실행파일을 가지게 되므로 이후의 실행에는 빠릅니다. 인터프리터 파일을 한 줄씩 번역을 합니다. 번역하는 시간은 한 줄만 번역을 하므로 짧지만 실행 할때마다 번역을 하여야 하므로 실행 시간이 컴파일러에 비해 느립니다. 실행파일이 생성되지 않으므로 같은 파일을 실행하게 되면 매번 같은 번역 과.. 2022. 4. 1.
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급 객체에 성립됩니다. // 값으로서 반.. 2022. 4. 1.

티스토리툴바