이뇽의 최신 글
-
당신의 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. 아래 라인..
-
Preact로 번들 사이즈 대폭 줄이기Improving Performance 2023.10.15 18:37
아마 React를 많이 다루어본 사람들이라면 Preact를 한번씩 들어보았을 것이다. React와 굉장히 유사하지만 엄연히 다른 라이브러리로 존재하는 PReact. 이미 React가 강력하게 점유하고 있기 때문에, PReact를 가볍게 들여다보기만 하거나 크게 관심을 가질 정도의 라이브러리가 아니였을 수도 있을 것이다. (우선 나는 그랬다..) 그러나 Preact를 가지고 React 프로젝트를 굉장히 가볍게 만들 수 있다는 것을 알게 되고 나서, 다시금 굉장히 관심을 가지게 되면서 Preact에 대해 어느정도 리서치를 해보게 되었다. 이번 글에서는 Preact가 React와 어떤 점이 다른지, 어떤 원리로 React 코드의 번들 사이즈를 줄일 수 있는지, 추가로 Preact에서는 Server Side 환..
-
Bun 1.0 릴리즈 후, 서비스 개발에 문제 없을지 리서치 해본 결과Web EcoSystem 2023.10.04 11:43
최근에 1.0 Release가 되었다는 소식에 다시 한번 리서치를 해보았다. 작년쯤에도 한번 리서치를 해보면서 그땐 pacakge Manager, RunTime까지만 제공하는 걸로 알고 있었는데, 그 당시에는 발견할 수 없었던 Test Runner, Builder 등 웹 개발에 필요한 여러 툴도 Bun에서 직접 제공하는 것을 알게 되었다. Bun이 자체적으로 Yarn, pnpm보다 몇십배 빠르다고 주장하니, 만약 요게 맞다면 우리는 CI/CD 환경에서 돌아가는 Install, build 시간을 굉장히 크게 단축 시키고 빠른 배포가 가능하게 될 것이다. 그래서 이번에 Bun이 현재 Production 서비스 개발에 이용함에 문제가 없을지 중점으로 한번 리서치해본 내용을 정리해 보려고 한다. 해당 글에서는 ..
-
Node.js가 왜 싱글 스레드로 불리는지 "정확한 이유"를 알고 계신가요?Web EcoSystem 2023.09.28 02:11
Node.js가 왜 싱글스레드 환경으로 불리는 것일까? Javascript 언어가 싱글 스레드 기반 언어라서? 사실 이에 대해서는 단순 허무하면서도 마냥 재미있는 이유가 숨겨져 있다. 우선 내가 Node.js가 싱글스레드라는 것을 인정하기까지 꽤나 혼란과 고생이 있었고, 결과를 알고 난 뒤에도 인정하기 어려운 결론이라 찝찝하긴 하다. 그래서 그 과정을 이렇게 블로그로 한번 남겨보려고 한다. 나는 지금까지 Node.js가 멀티 스레드인 줄 알았다. 아마 모두 위 소제목을 보자마자 "풉!" 하고 웃었을 수도 있겠다는 생각이 든다. 왜냐하면 너무나도 기초적이고 면접 준비를 조금이라도 해봤을 것이라면 무조건 알 수밖에 없을 내용이고, 그만큼 굉장히 핵심적인 내용이기 때문에. 그런데 나도 처음부터 잘못 알고 있었..
-
웹 생태계의 변화를 가져다 줄 Edge ComputingWeb EcoSystem 2023.09.26 17:09
최근 웹 서비스 운영 생태계의 변화를 가져다 줄 운영 매커니즘으로 Edge Computing이 많이 거론되고 있다. 아직은 일반적인 웹 서버의 운영이, 동적인 데이터 변경과 Dynamic한 Server Side Rendering 처리로 인해 기존의 Origin Server가 위치한 곳까지 네트워크 요청을 하며 느린 응답을 받는 형식을 띄고 있다. 그나마 퍼포먼스 향상을 위해 정적인 컨텐츠 파일들은 CDN 서버와 캐싱 처리를 통해서 빠르게 전송을 할 수 있다. 특히나 이미지 또는 영상 같은 컨텐츠는 용량 사이즈가 매우 커서, 이러한 문제를 해결해주는 CDN이 가져다주는 퍼포먼스 효과는 굉장하다. 그러나 동적인 컨텐츠 영역을 위해 Original Server까지 요청이 다다라야 하는 문제는 여전히 해결되지 ..
-
최근 4개월 간의 긴 여정의 프로젝트를 마치며Life Log 2023.08.15 17:09
정말 오랜만에 블로그 글을 쓰는 것 같다. 이렇게 블로그 공백을 가진 적이 없었는데, 그 사이에 블로그를 들여다 볼 마음 여건도 없었을 뿐더러, 지금까지 한 것중 가장 무거운 정도의 프로젝트를 미친듯이 해왔으니, 몸과 마음이 여유가 없어 기술 블로그를 쓰는 여건은 물론, 이런 회고 글도 쓰기 어려웠던 것 같다. 그럼에도 4개월이라는 콴다 Q&A라는 장기간 프로젝트를 마무리 단계에 들어서면서, 이런 경험을 그냥 흘러 내보내기는 아쉬워서 한번 회고를 써보려고 한다. 진행하면서 정말 아쉬웠던 것들이 참 많았으니, 앞으로 내가 어떻게 하면 더 잘할 수 있을지 여기에 정리해본다. 예측 했던 것 보다 매우 컸던 프로젝트 사이즈 제일 처음 시작하기 전에는 이 프로젝트를 사이드 프로젝트 형식으로 진행해보려고 했었다. ..
-
GCP CloudBuild에서 Test CI 시간 단축시킨 과정 정리Improving Performance 2023.02.02 17:27
GCP 프로젝트에서 Test CI 마다 항상 새롭게 디펜던시를 설치하고 빌드함으로써 많은 시간을 소요하는 것이 마음에 들지 않았다. 시간이 오래 걸리면 개발 생산성에도 영향을 미치지만, 무엇보다 CI로 소요된 시간만큼 비용 산정이 되므로 시간이 길어질수록 인프라 비용이 늘어나는 문제가 발생한다. 문제점 CI Test의 가장 큰 문제점은, CI가 돌 때마다 항상 아무것도 없는 상태에서 새롭게 시작한다는 것이다. 그런데 생각해 보면, 대부분 변경되는 사항은 비즈니스적 로직과 코드 단이지, 디펜던시 모듈이 자주 변경되지 않는다. 대부분 큰 차이가 없을 node_modules를 항상 새롭게 설치할 필요가 있을까?라는 생각이 들었다. 이미 이전에 생성했든 node_modules를 그대로 보유한 채 계속해서 다음 ..
-
SWC 이용해서 React + Webpack 세팅해보기React 개념 2023.01.25 21:30
한창 블로그 초창기에 CRA(create-react-app)를 쓰지 않고 직접 package.json init부터 React + Webpack + Babel 세팅 블로그를 올린 적이 있었는데, 이미 3,4년 정도 지나고 많은 것들이 변하면서 레거시 글이 되어버렸다. 그래서 이번에 사이드 프로젝트로 인해 새로운 Single Page Application 환경이 필요하게 되면서 오랜만에 다시 세팅을 해보았는데, 요즘 컴파일러로 굉장히 핫한 SWC를 Babel 대신해서 트랜스파일러로 Webpack과 세팅을 해보았다. 그래서 이번에 SWC + Webpack을 이용해서 React 환경을 직접 구성하는 방법으로 다시 정리해보려고 한다. 우선 처음으로 package.json을 세팅한다. $ yarn init -y 다..
-
[Yarn berry] Yarn Berry Install 과정 파헤쳐보기기타 개념 2023.01.23 21:47
CI 환경에서 Yarn Berry Install 시간을 줄이기 위해 이것저것 실험을 해보다 보니, install 시에 진행되는 과정에 대해 깊게 알아볼 수 있게 되었다. 사실 pnp를 이용해버리면 install 과정 자체를 줄일 수 있을 것이란 희망이 컸었으나, 실질적으로 우리 모노레포 환경과, 특히나 Cypress와 같이 현 로컬 환경의 바이너리 정보들이 필요로 한 환경에서는 pnp가 큰 의미가 없다는 것을 알게 되면서... 좌절..(관련 링크) 그럼에도 불구하고, 우리 환경에서 pnp가 아니더라도 CI 시간을 단축시키기 위한 여러 가지 테스트를 해보는 중이다. CI 단에서 돌아가는 큰 스텝은 아래와 같다. - yarn install - yarn build - run Test Code 그 중, 우선은 ..
이뇽의 인기 글
-
GCP CloudBuild에서 Test CI 시간 단축시킨 과정 정리
GCP 프로젝트에서 Test CI 마다 항상 새롭게 디펜던시를 설치하고 빌드함으로써 많은 시간을 소요하는 것이 마음에 들지 않았다. 시간이 오래 걸리면 개발 생산성에도 영향을 미치지만, 무엇보다 CI로 소요된 시간만큼 비용 산정이 되므로 시간이 길어질수록 인프라 비용이 늘어나는 문제가 발생한다. 문제점 CI Test의 가장 큰 문제점은, CI가 돌 때마다 항상 아무것도 없는 상태에서 새롭게 시작한다는 것이다. 그런데 생각해 보면, 대부분 변경되는 사항은 비즈니스적 로직과 코드 단이지, 디펜던시 모듈이 자주 변경되지 않는다. 대부분 큰 차이가 없을 node_modules를 항상 새롭게 설치할 필요가 있을까?라는 생각이 들었다. 이미 이전에 생성했든 node_modules를 그대로 보유한 채 계속해서 다음 ..
-
Node.js가 왜 싱글 스레드로 불리는지 "정확한 이유"를 알고 계신가요?
Node.js가 왜 싱글스레드 환경으로 불리는 것일까? Javascript 언어가 싱글 스레드 기반 언어라서? 사실 이에 대해서는 단순 허무하면서도 마냥 재미있는 이유가 숨겨져 있다. 우선 내가 Node.js가 싱글스레드라는 것을 인정하기까지 꽤나 혼란과 고생이 있었고, 결과를 알고 난 뒤에도 인정하기 어려운 결론이라 찝찝하긴 하다. 그래서 그 과정을 이렇게 블로그로 한번 남겨보려고 한다. 나는 지금까지 Node.js가 멀티 스레드인 줄 알았다. 아마 모두 위 소제목을 보자마자 "풉!" 하고 웃었을 수도 있겠다는 생각이 든다. 왜냐하면 너무나도 기초적이고 면접 준비를 조금이라도 해봤을 것이라면 무조건 알 수밖에 없을 내용이고, 그만큼 굉장히 핵심적인 내용이기 때문에. 그런데 나도 처음부터 잘못 알고 있었..
-
팀워크를 위한 모노레포(Monorepo) 시스템 구축, 그리고 회고
꽤 오랜 시간 동안 모노레포 이전 및 안정화 작업을 계속 진행해왔다. 그래도 이제는 상대적 주요 프로젝트들은 모두 모노레포로 이전이 완료되었고, 팀원들이 이제 모두 모노레포 내에서 작업이 가능한 수준으로 안정화를 시키게 된 것 같다. 콴다 팀 블로그에도 해당 블로그 글을 쓰긴 했지만, 내 스스로도 좋은 경험 및 큰 성장 과정이 되었던 것 같아서 내 블로그에도 기록을 남겨보고 싶어 이렇게 한번 더 작성을 해본다. (비록 내용이 거의 중복이 되겠지만..) 우리 팀은 이번 모노레포를 통해 새로운 팀워크 방향성이 생기면서, 이를 통해 향상된 팀 협업 요소들을 정리해 보려고 한다. 우선 그전에, 우리가 어떤 계기로 인해 팀 전체가 모노레포 시스템을 이용하기로 결정하게 되었는지 배경을 먼저 소개하고 싶다. 모노레포..
-
브라우저 동작원리를 알아야 하는 이유가 무엇인가요?
💡 해당 글은 React의 SSR인 Next.js 프레임워크에 의존하여 작성된 글입니다. 그러나 전체적인 맥락과 핵심 내용을 이해하시는 데는 큰 문제는 없습니다. 프론트엔드 주니어 개발자가 꼭 알아야 하는 기본지식 중 하나로 많이 소개되고 있는 '브라우저 동작 원리' 취업이나, 이직 준비를 해봤다면 무조건 들여다봤을 내용인 만큼, 브라우저가 어떻게 동작하는지에 대해서는 프론트엔드 개발자라면 이미 어느 정도는 알고 있을 것이라 생각한다. 그러나 개발자에게 필요한 기본 지식이라고 해서 어찌어찌 들여다보고 이해는 했는데... 도대체 이게 왜 필요한 걸까? 지금까지 이런 지식 없이도 개발은 잘만 해왔고, 왠지 앞으로도 굳이 필요 없을 것 같긴 한데.. 브라우저 동작원리에 대해 상세하게 다루는 블로그 글과 영상은..
-
ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자.
ESLint, Prettier 관련해서 환경 세팅을 하면 항상 어쩔 땐 잘되고, 어쩔 땐 안되고... 구글링하면 그렇게 많이 나오는 방식들을 전부 해봐도 계속 안돼서 시간을 그렇게 버릴 때가 많았던 것 같다. 그냥 생각없이 Prettier extension 설치해라, eslintrc 이렇게 세팅해라, 등등.. 따라 하니까 꼬이기도 하고, 저장을 시도하면 자동 수정은 안되고.. 그럴 때마다 속이 터졌는데, 이참에 아예 작정하고 시간 내서 제대로 파악 좀 해봤다. 아마 나처럼 하라는 대로 했는데도 왜 안되는지 궁금할 개발자들이 있지 않을까 싶다.(나만 그런걸까...) 직접 그 원인을 상세히 파악하고 알아보도록 하자. VSCode가 코드의 Lint Error를 잡는 것부터, 저장 시 자동 수정하는 설정까지....