JavaScript
-
웹 성능 최적화를 위한 Tree Shaking 소개개발 블로깅/Improving Performance 2021. 3. 27. 16:36
최근 웹 성능 최적화 관련해서 계속해서 공부 중인데, Tree Shaking이라는 새로운 개념에 대해 알게 되어서 블로그로 정리해 보려고 한다. 한 줄 소개 나무를 흔들어서 죽은 나뭇잎들을 떨어뜨리듯, 코드를 빌드할 때도 실제로 쓰지 않는 코드들을 제외한다는 뜻으로 Tree Shaking이란 이름이 붙여졌다고 한다. 개념 소개 자바스크립트에서 주로 작업할 때, 여러 코드를 모듈 형식으로 파일 별로 관리하며 ES6 문법을 통해 export, import 해서 사용하게 된다. import * as util from '../utilFile'; 위 코드를 보면, utilFile이라는 파일에 있는 모듈을 import 해서 가져오게 된다. 여기서 궁금한건, 저 utilFile 내에 얼마나 많은 모듈 코드가 있을 것..
-
[2021.03.23] 라이브러리 모듈 단에서 ES5 에러 발생시 확인할 요소개발 블로깅/Modern script 2021. 3. 23. 07:28
프로젝트 내에서 로그 수집을 위해 fireBase 라이브러리를 이용 중이다. 그런데 해당 라이브러리를 거쳐서 요청된 API 쪽에서 아래와 같은 에러가 발생하는 것이었다. Object.values is not a function Object.values는 자바스크립트 공식 함수이며 ES6부터 사용할 수 있는 명령어임으로 ES5환경에서는 지원이 되지 않는다. 그런데 이게 라이브러리 단에서 이러한 에러가 발생하니 어떻게 조치를 해야할지 몰랐었다. 그러나 알고보니 방법은 굉장히 간단했다. 해결 방법 해당 fireBase를 이용하기 위해서 코드 내에 Account Set을 하는 부분이 있다. import * as firebase from 'firebase'; let database; let config = { a..
-
[2021.02.04] 브라우저 스크롤 기능 유지하면서 스크롤 바 없애기개발 블로깅/오늘의 TIL 2021. 2. 4. 23:06
, 태그를 작업하다가 내 맥북 환경 설정으로 인해 로컬에서 보이지 않던 UI적인 에러를 마주치게 되었다... 맥북 환경설정의 '일반'에서 스크롤 막대 보기에서 내 로컬 환경에서 View가 길면 스크롤 막대를 어떻게 보여줄지 선택할 수 있는 설정 기능이 있다. '마우스 또는 트랙패드에 따라 자동으로' 혹은 '스크롤 할 때'를 선택하면 위 이미지처럼 기존의 페이지 상태를 유지한 채, 플로팅 방식으로 스크롤 막대가 살짝 비춰지는 방식으로 보여진다. 그러나 여기서 스크롤 막대보기 설정을 '항상'으로 하면 아래 처럼 된다... 스크롤을 보여지도록 설정을 해버리니, 아예 브라우저 화면 크기에서 스크롤 막대 영역에 대한 공간을 만들어 버린다.. 이로 인해서 페이지 전체가 차지하는 공간이 맥북 환경설정으로 인해 차이가..
-
[2020.10.16] Google Chrome V8 엔진을 파헤쳐보자개발 블로깅/기타 개념 2020. 10. 17. 00:56
Google V8 엔진 V8은 Google Chrome과 Node.js에서 사용되고 있는 구글에서 제작한 자바스크립트 엔진이다. C++로 작성되었고 고성능의 자바스크립트 전용의 웹 어셈블리 엔진이라 할 수 있다. 일반적으로 자바스크립트 엔진은 코드 한 줄을 해석하고 바로 실행하는 인터프리터 형식이지만, V8 엔진은 자바스크립트 코드를 바이트코드(ByteCode)로 컴파일하고 실행하는 방식을 사용한다. 또한 V8엔진은 독립형으로 개발되었기 때문에 웹 브라우저 뿐 아니라 C++ 프로그램에 별도로 내장하여 실행시킬 수도 있다. 이러한 점은 엄청나게 강력한 기능이다. C++자체가 하드웨어 레벨에 훨씬 더 가까운 언어인 만큼 자바스크립트보다 더 많은 특성을 가지고 있다. 그렇기에 C++로 작성한 언어를 V8엔진을..
-
[2020.07.11] 자바스크립트 - Element.style 속성과 getComputedStyle() 메소드의 차이에 대해 알아보자개발 블로깅/Javascript 개념 2020. 7. 12. 15:20
브라우저에 그려진 엘리먼트의 스타일을 가져오는 방법에는 두 가지가 있다. Element.style 속성 참조 getComputedStyle() 메소드 나는 이 두 가지의 차이에 대해 정확하게 알지 못한 채, 엘리먼트의 스타일에 접근하는 작업을 하다가 내가 예상하던 대로 동작하지 않아 엄청 헤맨 경험을 맛 보았다. 그래서 이번에 닥쳤던 문제를 해결하면서 정확하게 알게 된 엘리먼트의 스타일에 대해 아래 예시를 통해서 정리해보려고 한다. # 각기 다른 방식으로 적용된 엘리먼트 두 개 우선 위와 같이 그려진 브라우저 화면이 있다. 해당 코드는 다음과 같다. 첫 번째 엘리먼트 두 번째 엘리먼트 첫 번째 엘리먼트는 인-라인 방식으로 해당 엘리먼트에 글자색 스타일을 직접 선언하고, 두 번째 엘리먼트는 body태그 바..
-
[2020.04.26] Javascript 깊은 복사의 함정... 모르고 사용하다 뒤통수 맞았다...개발 블로깅/오늘의 TIL 2020. 4. 26. 22:32
사이드 프로젝트 진행 중, 내게 엄청나게 스트레스를 안겨준 요소가 있었다. Javascript의 깊은 복사의 함정.. 우선 이 깊은 복사의 함정을 설명하기 위해서, Object 복사의 개념에 대해 간단히 설명을 해보려고 한다. Javascript의 복사 개념 얕은 복사(Shallow copy) 우리가 흔히 알고 있듯이, 객체가 담겨있는 변수를 다른 변수에 할당하면 call by reference (데이터 복사가 아닌 참조)가 일어나게 되어, 한 변수의 데이터를 변경하면 다른 변수의 데이터도 함께 변경이 된다. const person1 = {name:'inyong'}; const person2 = person1; person1.name = 'jung'; // result person2.name // 'ju..
-
[2020.01.05] Next.js에서 document가 undefined으로 나타나는 이유개발 블로깅/Next.js 2020. 1. 5. 15:39
이번에 트레바리에서 각종 이벤트와 마케팅, 모임 안내 등 여러 수신 알림 채널을 계획 중이다. 기존에는 이러한 정보를 수신받기 위한 채널이 문자전송 밖에 없었는데, 앞으로는 문자뿐 아니라 이메일과 다른 요소 등 전송 채널을 더 넓혀서 유저들이 누릴 수 있는 유용한 정보를 놓치지 않고 더 최대한 많은 혜택을 누릴 수 있도록 하기 위함이다. 그래서 이러한 마케팅 정보 수신 안내를 기존 멤버들에게 알리고 동의를 받고자, '트레바리 마케팅 정보 통합 수신 동의' 기능을 구현하기로 했는데, 해당 기능을 구현 중 맞닥뜨린 이슈사항이 하나 있었었으니...바로 document가 undefined로 나타나는 것이었다.. 처음이 이러한 현상이 어떻게 일어날 수 있는지 몰랐으나, 알고보니 내가 CSR과 SSR의 동작원리에 ..
-
[2019.11.02] base64 Image Data를 File 객체로 변환하는 법개발 블로깅/오늘의 TIL 2019. 11. 2. 12:45
프로필 이미지를 적용하는 기능을 구현 중, 엄청나게 유용한 라이브러리를 찾아냈다. https://github.com/mosch/react-avatar-editor mosch/react-avatar-editor Small avatar & profile picture component. Resize and crop uploaded images using a intuitive user interface. - mosch/react-avatar-editor github.com 이 라이브러리를 쓰면, Input File 객체로 받은 이미지 데이터를, 유저가 지정한 부분만 Base64인코딩을 통해 잘라내어 반환하게 된다. 그러나 AWS S3 버킷에 저장하기 위해서는 File객체가 필요로 한데, 반환받은 Base64 ..