개발 블로깅
-
[2021.06.13] Javascript ECMA 2021 소개개발 블로깅/Javascript 개념 2021. 6. 13. 17:19
replaceAll 기존에는 문자열 내에 특정 문자를 변경하기 위해, String.replace를 이용했었는데, 이것은 문자열 중 가장 앞에 있는 한 자리만 변경해주므로, 모든 문자열을 대상으로 하려면, 'RegExp' 정규식을 통해 처리를 해주었어야 했다. 그러나 이번에 replaceAll() 함수가 추가되면서, 따로 정규식을 통해 처리하지 않아도 되게 되었다. 🙌 'FooBarFoo'.replaceAll('F', 'C'); // 'CooBarCoo' assignment operators 1. ??= 기존에는, 해당 변수가 null 혹은 undefined일 시, 특정 값으로 세팅을 해주기 위해서는 아래와 같이 if문으로 세팅을 해주었었다. if(sense === null || sense === unde..
-
[2021.06.11] Production Environment에서 SourceMap 보안 이슈 해결개발 블로깅/오늘의 TIL 2021. 6. 11. 19:07
내가 직접 작업하는 프로젝트에 Build 후 Production 환경에 업로드 시 Source map File이 함께 올라가는 이슈가 있었다. 원래 Production 환경에 소스코드를 배포할 때, Webpack Build를 통해 기존 코드를 Uglify하게 만들어 업로드를 한다. 그러나 Source Map 파일이 Production 환경에 같이 올라가면, Source Map 파일을 통해 Uglify JS 파일들이 기존에 어떻게 작성되어있는지 트래킹이 가능하게 되어버리는 보안 이슈가 발생한다. 이러한 기존 코드를 파악하지 못하도록 일반적으로는 Source Map을 따로 업로드를 하지 않는 것이 권장된다. Next.js 환경에서는 Production Build 시에는 Source Map File을 생성하지..
-
[21.06.05] 비동기 처리? 그래도 싱글 스레드인 것이 함정인 자바스크립트개발 블로깅/Javascript 개념 2021. 6. 5. 14:44
자바스크립트를 다루는 개발자라면 웹 서비스에서 필수로 쓰이고 있는 Javascript가 싱글 스레드(Single Thread) 기반으로 동작한다는 것을 알고 있을 것이다. 그리고 이러한 싱글 스레드의 한계를 넘고자, 비동기(asynchronous) 동작을 제어할 수 있는 Event Loop라는 개념이 등장하면서 AJax, 그 뒤로 Promise, async/await 등 비동기 동작에 대한 제어를 쉽게 할 수 있는 키워드가 속속히 등장하기 시작했다. 그만큼 싱글 스레드 기반임에도, 멀티 스레드 못지않은 Task 동작을 시키고 이를 더 쉽게 제어하기 위해 계속해서 발전되어 왔다. 하지만, 자바스크립트는 여전히 싱글 스레드이다. 더 Row Level 단으로 따지고 보면, 비동기적으로 동작하는 Task들도, ..
-
[2021.05.02] 웹 성능 최적화를 위한 Webpack Bundle Size 줄이기개발 블로깅/Improving Performance 2021. 5. 2. 13:14
요즘 웹 페이지의 Build 최적화를 위해서 Bundle 사이즈를 줄이는 작업을 하는 중인데, 새롭게 알게 된 내용에 대해 정리해 보려고 한다. # Webpack Bundle Analizer Webpack Bundle Analizer를 이용하면 Build된 Bundle 파일의 상태를 아래처럼 시각화 하여 볼 수 있다. 우선 Chunk 파일을 어떻게 분리할지 Webpack에서 설정을 해주지 않으면, 기본 설정인 페이지 별로 Chunk 파일이 분리 되도록 되어있다. 하지만 이러한 방식은, 각 페이지에서 동일하게 사용되는 코드가 중복으로 들어가게 된다. 현재 내가 작업 중인 프로젝트의 Chunk를 확인해보면, 각 페이지 별로 Sentry 라이브러리를 사용하는데, 각 페이지의 Chunk 파일마다 Sentry 관..
-
Next.js Pre-Rendering(Server-Side-Rendering) 함수 정리개발 블로깅/Next.js 2021. 4. 2. 15:05
업무 시간에 시간이 붕 떠서,... Next.js Document를 정독했다.. 그래서 Doc 보면서 공부한 내용들을 블로그에 정리해보려고 한다. Hydration Next.js에서는 기본적으로 Page 별로 라우팅 처리가 되어 있다보니, 페이지 별로 데이터를 주고받는 등에 대한 association하기가 힘들수도 있으나, 이러한 점을 최소한의 자바스크립트 코드로 서로 연결을 해서 association이 가능하도록 한다. 그리고 브라우저에 의해 해당 페이지가 로드되면 이 연결되어있는 코드가 동작하면서 인터랙션이 가능하다. SPA에서 상태관리 라이브러리를 설정하는 것은 쉬우나, Next.js와 같은 환경에서는 추가 설정이 필요로 한데 이게 Hydration이 가능하도록 하기 위한 작업인 듯 하다. Pre-..
-
웹 성능 최적화를 위한 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.03.12] (TIL)Iphone 6이하 WebView 환경에서 스크롤 기능 막는 법개발 블로깅/오늘의 TIL 2021. 3. 12. 15:01
웹뷰 작업 중에, 영역 밖으로 튀어나와 스크롤이 생겨서 이 스크롤이 안되도록 막아야 하는 일이 있었다. 주로 스크롤이 안되고 화면이 고정되도록 하는 방식은 아래와 같다. // css file overflow: hidden; touchAction : none; // 웹뷰 환경 그런데 이 방식이 아이폰 옛날 버전에서는 먹히지 않는 것이다. 확인해보니 웹, 안드로이드, 아이폰 7 이상부터는 모두 괜찮은데, 아이폰 6 이하부터는 이게 먹히질 않는다. 시뮬레이션으로 확인해보니 touchAction: none 이란 속성이 옛날 IOS에서는 invalid 된다. 그래서 아래처럼 해결할 수 있었다. position: 'fixed'; top: 0; bottom: 0; left: 0; right: 0; 한방에 된다..ㅎㅎ..