개발 블로깅
-
React Compiler 파헤치기개발 블로깅/React 개념 2024. 7. 24. 02:20
우리는 리액트에서 렌더링 최적화를 위해, 변화되지 않는 부분들을 리렌더링 되지 않도록 useMemo, React.memo, useCallback Hook을 사용한다. 그러나 이러한 함수들을 사용할 때, 정확하게 필요한 곳에 적용하여 완전히 렌더링 최적화를 시킬 수 있다면 아주 좋겠지만, 사실상 Deep하게 이러한 위치를 찾는 것과 리렌더링 최적화 분석을 하는 것이 굉장히 까다롭고 시간이 들어간다.적절한 곳에 사용하지 못하면 해당 Hook에 대해 큰 이점을 챙길 수 없을 뿐더러 그렇다고 모든 곳에 메모제이션 처리를 해버리면, 그만큼 메모리에 저장되는 메모제이션 상태가 많아지기 때문에 성능에 악영향을 끼칠 수 있게 된다.그만큼 React 내에서 메모제이션 기능을 통한 렌더링 최적화를 적용하는게 마냥 쉽지 않..
-
당신의 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. 4. 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. 9. 28. 02:11
Node.js가 왜 싱글스레드 환경으로 불리는 것일까? Javascript 언어가 싱글 스레드 기반 언어라서? 사실 이에 대해서는 단순 허무하면서도 마냥 재미있는 이유가 숨겨져 있다. 우선 내가 Node.js가 싱글스레드라는 것을 인정하기까지 꽤나 혼란과 고생이 있었고, 결과를 알고 난 뒤에도 인정하기 어려운 결론이라 찝찝하긴 하다. 그래서 그 과정을 이렇게 블로그로 한번 남겨보려고 한다. 나는 지금까지 Node.js가 멀티 스레드인 줄 알았다. 아마 모두 위 소제목을 보자마자 "풉!" 하고 웃었을 수도 있겠다는 생각이 든다. 왜냐하면 너무나도 기초적이고 면접 준비를 조금이라도 해봤을 것이라면 무조건 알 수밖에 없을 내용이고, 그만큼 굉장히 핵심적인 내용이기 때문에. 그런데 나도 처음부터 잘못 알고 있었..
-
웹 생태계의 변화를 가져다 줄 Edge Computing개발 블로깅/Web EcoSystem 2023. 9. 26. 17:09
최근 웹 서비스 운영 생태계의 변화를 가져다 줄 운영 매커니즘으로 Edge Computing이 많이 거론되고 있다. 아직은 일반적인 웹 서버의 운영이, 동적인 데이터 변경과 Dynamic한 Server Side Rendering 처리로 인해 기존의 Origin Server가 위치한 곳까지 네트워크 요청을 하며 느린 응답을 받는 형식을 띄고 있다. 그나마 퍼포먼스 향상을 위해 정적인 컨텐츠 파일들은 CDN 서버와 캐싱 처리를 통해서 빠르게 전송을 할 수 있다. 특히나 이미지 또는 영상 같은 컨텐츠는 용량 사이즈가 매우 커서, 이러한 문제를 해결해주는 CDN이 가져다주는 퍼포먼스 효과는 굉장하다. 그러나 동적인 컨텐츠 영역을 위해 Original Server까지 요청이 다다라야 하는 문제는 여전히 해결되지 ..
-
GCP CloudBuild에서 Test CI 시간 단축시킨 과정 정리개발 블로깅/Improving Performance 2023. 2. 2. 17:27
GCP 프로젝트에서 Test CI 마다 항상 새롭게 디펜던시를 설치하고 빌드함으로써 많은 시간을 소요하는 것이 마음에 들지 않았다. 시간이 오래 걸리면 개발 생산성에도 영향을 미치지만, 무엇보다 CI로 소요된 시간만큼 비용 산정이 되므로 시간이 길어질수록 인프라 비용이 늘어나는 문제가 발생한다. 문제점 CI Test의 가장 큰 문제점은, CI가 돌 때마다 항상 아무것도 없는 상태에서 새롭게 시작한다는 것이다. 그런데 생각해 보면, 대부분 변경되는 사항은 비즈니스적 로직과 코드 단이지, 디펜던시 모듈이 자주 변경되지 않는다. 대부분 큰 차이가 없을 node_modules를 항상 새롭게 설치할 필요가 있을까?라는 생각이 들었다. 이미 이전에 생성했든 node_modules를 그대로 보유한 채 계속해서 다음 ..