개발 블로깅/오늘의 TIL
-
당신의 TreeShaking은 정말로 안녕하신가요?개발 블로깅/오늘의 TIL 2023. 10. 24. 15:48
프로젝트를 진행하면서 어느 순간 번들 사이즈가 대폭 커지면서 의아함을 감출 수가 없었다. 지금까지 진행한 프로젝트에 비해 약 2배 가까이 되는 번들 사이즈를 보고 내가 어딘가를 놓쳤다는 의구심이 들 수 밖에 없었다. 번들 사이즈의 원인으로 의심되는 부분은 아래 4개였다. Dynamic Import를 놓쳤다. 사이즈 큰 모듈을 Lazy하게 가져오도록 하지 않았다. TreeShaking이 제대로 되지 않았다. Dynamic Import 문제였는지 체크 가장 상단의 컴포넌트를 주석 처리를 하고 빌드를 해보니 First Load Bundle Size가 약 10kb 정도 줄어들긴 했지만, 여전히 300kb나 되는 굉장히 큰 것을 보고 이것이 큰 원인은 아니라는 것을 깨달았다. 사이즈 큰 모듈 Lazy하게 가져오도..
-
[VSCode] zsh: command not found: node 해결방법개발 블로깅/오늘의 TIL 2023. 10. 20. 17:27
잘 쓰던 Vscode 터미널에서 어느순간 갑자기 Node와 nvm 등 관련된 모든 요소들을 못 찾기 시작했다. 특이한 점 1. 일반 터미널에서는 잘되고, VSCode의 터미널에서만 찾지 못한다는 것. 2. nvm으로 node 버전을 v14로 내리면 잘 되는데, v18로 올리는 순간 안되는 현상을 발견하고 nvm에 문제가 있다는 것을 확인. 원인 HomeBrew의 nvm을 통해 특정 버전의 node를 새로 설치하면 "~/.zshrc"의 nvm path가 엉망이 되는 문제가 있다. 그래서 ./zshrc의 nvm path를 제대로 수정해주면 된다. 1. ~/.zshrc 파일을 열어준다. 2. 아래와 같은 라인이 제대로 명시되어 있는지 확인한다. export NVM_DIR="$HOME/.nvm" 3. 아래 라인..
-
Yarn Workspace에서 package.json 틸드(~), 캐럿(^) 버전 명시 주의할 점개발 블로깅/오늘의 TIL 2022. 1. 26. 01:15
yarn workspace를 이용해서 모노레포를 구축하던 중, 'package.json 버전 명시'로 인해 발생한 문제가 있었다. 지금까지는 크게 신경쓰지 않던 요소였는데, 평소 간과하게 생각하던 녀석으로 인해 이번에 처음으로 크게 데여본 경험으로.. 모노레포 작업을 하며 좋은 인사이트를 얻은 것 같아 블로그로 정리해 보려고 한다. 이슈 배경 현재 yarn workspace에서는 yar berry(2.0)를 쓰고 있다. yarn berry를 이용하게 되면 Zero install을 통해 의존성 패키지들을 더 가볍고 빠르게 설치 및 이용할 수 있다. (여기서는 zero install이 무엇인지 다루지 않는다.) 그러나 지금 작업 중인 모노레포에서는 yarn workspace 환경 세팅에 zero instal..
-
[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을 생성하지..
-
[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; 한방에 된다..ㅎㅎ..
-
[2021.02.18] (TIL)DOM 요소를 가로, 세로 반대로 배치하는 법개발 블로깅/오늘의 TIL 2021. 2. 18. 23:15
가볍게 CSS 관련 TIL 하나 작성해보려고 한다. 일반적으로 DOM 요소를 그리는 순서는 위에서 아래로, 좌에서 우로 되어있다. 그러나 특정 상황으로 인해 DOM 요소를 아래에서 위로, 혹은 오른쪽에서 왼쪽으로 그려야 할 때가 있다. 아래 코드를 통해 가볍게 DOM을 그렸다. const ARRAY = ["하나", "둘", "셋"]; const App = () => { return ( {ARRAY.map(str => ( {str} ))} ); }; export default App; CSS에서 display와 flex-direction 속성을 이용해서 해당 요소의 내부 요소들을 반대로 배치할 수 있다. 아래에서 위로 배치 .wrapper { display: flex; flex-direction: colu..
-
[2021.02.04] 브라우저 스크롤 기능 유지하면서 스크롤 바 없애기개발 블로깅/오늘의 TIL 2021. 2. 4. 23:06
, 태그를 작업하다가 내 맥북 환경 설정으로 인해 로컬에서 보이지 않던 UI적인 에러를 마주치게 되었다... 맥북 환경설정의 '일반'에서 스크롤 막대 보기에서 내 로컬 환경에서 View가 길면 스크롤 막대를 어떻게 보여줄지 선택할 수 있는 설정 기능이 있다. '마우스 또는 트랙패드에 따라 자동으로' 혹은 '스크롤 할 때'를 선택하면 위 이미지처럼 기존의 페이지 상태를 유지한 채, 플로팅 방식으로 스크롤 막대가 살짝 비춰지는 방식으로 보여진다. 그러나 여기서 스크롤 막대보기 설정을 '항상'으로 하면 아래 처럼 된다... 스크롤을 보여지도록 설정을 해버리니, 아예 브라우저 화면 크기에서 스크롤 막대 영역에 대한 공간을 만들어 버린다.. 이로 인해서 페이지 전체가 차지하는 공간이 맥북 환경설정으로 인해 차이가..
-
[2021.01.24] Next.js에서 페이지 뒤로가기 시 이전 페이지 스크롤 위치로 돌아가기개발 블로깅/오늘의 TIL 2021. 1. 24. 14:00
이번에 새로 입사하게 된 기업에서 프로젝트 코드 파악 겸 작은 기능 하나를 구현하는 첫 업무를 맡게 되었는데, 페이지에서 '뒤로 가기' 시 이전 페이지의 스크롤 위치 그대로 유지하도록 하는 기능이었다. 이전에는 무조건 페이지 이동이 생기면 스크롤 최상단으로 이동하도록 되어있었는데, 그러다 보니 상품 리스트가 나열된 페이지에서 어느 정도 하위에 배치된 상품을 클릭한 뒤 '뒤로 가기'를 하면, 스크롤 최상단부터 다시 서치를 해야 되는 문제가 발생하던 것이다. 이를 방지하고자, 이전 페이지로 되돌아가도 최근에 탐색했던 위치부터 이어서 탐색할 수 있도록 하기 위해 이 기능을 구현하게 되었다. 처음 이 기능에 대한 내가 들었던 생각은 이러했다. 1. 이전 페이지를 캐싱 시켜서, 뒤로 가기 시에 캐싱된 페이지와 스..