티스토리

이뇽의세상

검색하기

블로그 홈

이뇽의세상

helloinyong.tistory.com/m

자기개발이 취미인 개발자 블로그

구독자: 42

방명록 방문하기

주요 글 목록

당신의 TreeShaking은 정말로 안녕하신가요? 프로젝트를 진행하면서 어느 순간 번들 사이즈가 대폭 커지면서 의아함을 감출 수가 없었다. 지금까지 진행한 프로젝트에 비해 약 2배 가까이 되는 번들 사이즈를 보고 내가 어딘가를 놓쳤다는 의구심이 들 수 밖에 없었다. 번들 사이즈의 원인으로 의심되는 부분은 아래 4개였다. Dynamic Import를 놓쳤다. 사이즈 큰 모듈을 Lazy하게 가져오도록 하지 않았다. TreeShaking이 제대로 되지 않았다. Dynamic Import 문제였는지 체크 가장 상단의 컴포넌트를 주석 처리를 하고 빌드를 해보니 First Load Bundle Size가 약 10kb 정도 줄어들긴 했지만, 여전히 300kb나 되는 굉장히 큰 것을 보고 이것이 큰 원인은 아니라는 것을 깨달았다. 사이즈 큰 모듈 Lazy하게 가져오도.. 공감수 3 댓글수 1 2023. 10. 24.
[VSCode] zsh: command not found: node 해결방법 잘 쓰던 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. 아래 라인.. 공감수 1 댓글수 1 2023. 10. 20.
Preact로 번들 사이즈 대폭 줄이기 아마 React를 많이 다루어본 사람들이라면 Preact를 한번씩 들어보았을 것이다. React와 굉장히 유사하지만 엄연히 다른 라이브러리로 존재하는 PReact. 이미 React가 강력하게 점유하고 있기 때문에, PReact를 가볍게 들여다보기만 하거나 크게 관심을 가질 정도의 라이브러리가 아니였을 수도 있을 것이다. (우선 나는 그랬다..) 그러나 Preact를 가지고 React 프로젝트를 굉장히 가볍게 만들 수 있다는 것을 알게 되고 나서, 다시금 굉장히 관심을 가지게 되면서 Preact에 대해 어느정도 리서치를 해보게 되었다. 이번 글에서는 Preact가 React와 어떤 점이 다른지, 어떤 원리로 React 코드의 번들 사이즈를 줄일 수 있는지, 추가로 Preact에서는 Server Side 환.. 공감수 1 댓글수 2 2023. 10. 15.
Bun 1.0 릴리즈 후, 서비스 개발에 문제 없을지 리서치 해본 결과 최근에 1.0 Release가 되었다는 소식에 다시 한번 리서치를 해보았다. 작년쯤에도 한번 리서치를 해보면서 그땐 pacakge Manager, RunTime까지만 제공하는 걸로 알고 있었는데, 그 당시에는 발견할 수 없었던 Test Runner, Builder 등 웹 개발에 필요한 여러 툴도 Bun에서 직접 제공하는 것을 알게 되었다. Bun이 자체적으로 Yarn, pnpm보다 몇십배 빠르다고 주장하니, 만약 요게 맞다면 우리는 CI/CD 환경에서 돌아가는 Install, build 시간을 굉장히 크게 단축 시키고 빠른 배포가 가능하게 될 것이다. 그래서 이번에 Bun이 현재 Production 서비스 개발에 이용함에 문제가 없을지 중점으로 한번 리서치해본 내용을 정리해 보려고 한다. 해당 글에서는 .. 공감수 2 댓글수 1 2023. 10. 4.
Node.js가 왜 싱글 스레드로 불리는지 "정확한 이유"를 알고 계신가요? Node.js가 왜 싱글스레드 환경으로 불리는 것일까? Javascript 언어가 싱글 스레드 기반 언어라서? 사실 이에 대해서는 단순 허무하면서도 마냥 재미있는 이유가 숨겨져 있다. 우선 내가 Node.js가 싱글스레드라는 것을 인정하기까지 꽤나 혼란과 고생이 있었고, 결과를 알고 난 뒤에도 인정하기 어려운 결론이라 찝찝하긴 하다. 그래서 그 과정을 이렇게 블로그로 한번 남겨보려고 한다. 나는 지금까지 Node.js가 멀티 스레드인 줄 알았다. 아마 모두 위 소제목을 보자마자 "풉!" 하고 웃었을 수도 있겠다는 생각이 든다. 왜냐하면 너무나도 기초적이고 면접 준비를 조금이라도 해봤을 것이라면 무조건 알 수밖에 없을 내용이고, 그만큼 굉장히 핵심적인 내용이기 때문에. 그런데 나도 처음부터 잘못 알고 있었.. 공감수 56 댓글수 43 2023. 9. 28.
웹 생태계의 변화를 가져다 줄 Edge Computing 최근 웹 서비스 운영 생태계의 변화를 가져다 줄 운영 매커니즘으로 Edge Computing이 많이 거론되고 있다. 아직은 일반적인 웹 서버의 운영이, 동적인 데이터 변경과 Dynamic한 Server Side Rendering 처리로 인해 기존의 Origin Server가 위치한 곳까지 네트워크 요청을 하며 느린 응답을 받는 형식을 띄고 있다. 그나마 퍼포먼스 향상을 위해 정적인 컨텐츠 파일들은 CDN 서버와 캐싱 처리를 통해서 빠르게 전송을 할 수 있다. 특히나 이미지 또는 영상 같은 컨텐츠는 용량 사이즈가 매우 커서, 이러한 문제를 해결해주는 CDN이 가져다주는 퍼포먼스 효과는 굉장하다. 그러나 동적인 컨텐츠 영역을 위해 Original Server까지 요청이 다다라야 하는 문제는 여전히 해결되지 .. 공감수 1 댓글수 0 2023. 9. 26.
최근 4개월 간의 긴 여정의 프로젝트를 마치며 정말 오랜만에 블로그 글을 쓰는 것 같다. 이렇게 블로그 공백을 가진 적이 없었는데, 그 사이에 블로그를 들여다 볼 마음 여건도 없었을 뿐더러, 지금까지 한 것중 가장 무거운 정도의 프로젝트를 미친듯이 해왔으니, 몸과 마음이 여유가 없어 기술 블로그를 쓰는 여건은 물론, 이런 회고 글도 쓰기 어려웠던 것 같다. 그럼에도 4개월이라는 콴다 Q&A라는 장기간 프로젝트를 마무리 단계에 들어서면서, 이런 경험을 그냥 흘러 내보내기는 아쉬워서 한번 회고를 써보려고 한다. 진행하면서 정말 아쉬웠던 것들이 참 많았으니, 앞으로 내가 어떻게 하면 더 잘할 수 있을지 여기에 정리해본다. 예측 했던 것 보다 매우 컸던 프로젝트 사이즈 제일 처음 시작하기 전에는 이 프로젝트를 사이드 프로젝트 형식으로 진행해보려고 했었다. .. 공감수 2 댓글수 0 2023. 8. 15.
GCP CloudBuild에서 Test CI 시간 단축시킨 과정 정리 GCP 프로젝트에서 Test CI 마다 항상 새롭게 디펜던시를 설치하고 빌드함으로써 많은 시간을 소요하는 것이 마음에 들지 않았다. 시간이 오래 걸리면 개발 생산성에도 영향을 미치지만, 무엇보다 CI로 소요된 시간만큼 비용 산정이 되므로 시간이 길어질수록 인프라 비용이 늘어나는 문제가 발생한다. 문제점 CI Test의 가장 큰 문제점은, CI가 돌 때마다 항상 아무것도 없는 상태에서 새롭게 시작한다는 것이다. 그런데 생각해 보면, 대부분 변경되는 사항은 비즈니스적 로직과 코드 단이지, 디펜던시 모듈이 자주 변경되지 않는다. 대부분 큰 차이가 없을 node_modules를 항상 새롭게 설치할 필요가 있을까?라는 생각이 들었다. 이미 이전에 생성했든 node_modules를 그대로 보유한 채 계속해서 다음 .. 공감수 3 댓글수 0 2023. 2. 2.
SWC 이용해서 React + Webpack 세팅해보기 한창 블로그 초창기에 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 다.. 공감수 3 댓글수 0 2023. 1. 25.
[Yarn berry] Yarn Berry Install 과정 파헤쳐보기 CI 환경에서 Yarn Berry Install 시간을 줄이기 위해 이것저것 실험을 해보다 보니, install 시에 진행되는 과정에 대해 깊게 알아볼 수 있게 되었다. 사실 pnp를 이용해버리면 install 과정 자체를 줄일 수 있을 것이란 희망이 컸었으나, 실질적으로 우리 모노레포 환경과, 특히나 Cypress와 같이 현 로컬 환경의 바이너리 정보들이 필요로 한 환경에서는 pnp가 큰 의미가 없다는 것을 알게 되면서... 좌절..(관련 링크) 그럼에도 불구하고, 우리 환경에서 pnp가 아니더라도 CI 시간을 단축시키기 위한 여러 가지 테스트를 해보는 중이다. CI 단에서 돌아가는 큰 스텝은 아래와 같다. - yarn install - yarn build - run Test Code 그 중, 우선은 .. 공감수 3 댓글수 0 2023. 1. 23.
Next.js 13 업데이트 내용 정리 얼추 1년 만에 또 Next.js의 Major 버전이 업데이트 되었다. 🙌 거두절미하고 바로 어떤 내용이 추가되었는지 확인해보자. 주요 내용 목차 app/ Directory (beta): Easier, faster, less client JS. Layouts React Server Components Streaming Turbopack (alpha): Up to 700x faster Rust-based Webpack replacement. New next/image (stable): Faster with native browser lazy loading. New @next/font (beta): Automatic self-hosted fonts with zero layout shift. Improved .. 공감수 10 댓글수 1 2022. 10. 28.
[Yarn berry] Yarn Berry의 문제점 모노레포로 사용 중인 Yarn berry 환경에서의 성능 개선을 위해 정말 이것저것 많은 노가다와 테스트를 삽질했다. 특히 pnp를 통한 zero install에 굉장히 많은 기대를 하며 기적 같은 속도 개선이 이루어지기를 바랬었다. 그러나 결론은 아래와 같다. Yarn Berry 환경 자체가 매우 느려서 성능을 개선할 수가 없다. 이전 블로그 포스팅에서도 작성했듯이, Yarn Berry 환경 자체는 단순히 자바스크립트 파일로만 동작하는 환경이다 보니, Yanr Classic 환경 위에서 또 하나의 작은 환경으로 Javascript 코드로 동작하게 된다. 실제 shell과 다이렉트로 동작하는 게 아니다 보니 우선 느린 요소가 생길 수밖에 없을 것 같긴 하다. Yarn install yarn Classic.. 공감수 5 댓글수 1 2022. 10. 19.
[Yarn berry] Yarn Berry 환경에 대한 이해도 높이기 이번에 Yarn berry에서 이것저것 작업하게 되면서 Yarn Berry라는 환경에 대해 알게 된 내용들을 한번 정리해 보려고 한다. Yarn Berry 환경은 단순 자바스크립트 파일일 뿐이다. 이것을 설명하기 위해 우선 Yarn Classic 환경에 대해 먼저 다루어볼 필요가 있다. Yarn Classic을 먼저 알아보자. Yarn Classic 우리가 일반적으로 Yarn을 설치할 때는 Homebrew를 통해서 설치한다. Homebrew를 통해 설치하게되면, Yarn 패키지 자체는 우리 로컬 PC 내에서 Global Package 공간 어딘가에 저장이 되고 이후에 커맨드를 통해 실행시킬 수 있다. $ yarn add ... $ yarn remove ... 터미널에서 yarn으로 시작하는 명령어를 수행.. 공감수 3 댓글수 0 2022. 10. 9.
[Yarn berry] pnp가 Cypress환경에서 제대로 동작하지 않던 이슈 해결 디펜던시 문제를 잘 해결하고 build와 run까지 문제없이 잘 돼서 이제 끝났나 싶었더니, 테스트 CI에서 뻥뻥 터지는 것을 발견했다. Cypress 환경에서 pnp를 사용하는 것에 대해 겪은 두가지 문제가 있었는데, 이에 대한 원인과 해결한 내용을 정리해 보려고 한다. cypress.config.ts 파일을 읽는데 .ts 확장자를 읽지 못하는 문제. 우선 pnp는 CommonJS를 Base로 동작하도록 되어 있고, 추가로 ESM 모듈 지원이 필요하다고 판단되면 추가 세팅이 되는 방식이다. 그래서 pnp install을 하면 루트 경로에 pnp.cjs(commonJS) 파일을 생기는데, 프로젝트 자체가 ESM 모듈 지원이 필요하다고 판단되면 pnp.loader.mjs 파일을 추가로 생성하도록 되어있다... 공감수 2 댓글수 0 2022. 9. 25.
[Yarn berry] pnp(Plug And Play), Zero Install을 위한 Dependency 문제 해결하기 이번에 프로젝트 빌드 환경을 개선시키기 위해 Zero install을 적용시키려고 한다. yarn berry 환경 세팅까지는 수월했으나, PnP(Plug In Play)을 통해 Zero install을 하려고 하니 Yarn에 대한 개념이 꽤나 필요했다. 그래서 이번에 Yarn Berry의 핵심 기능인 Plug In Play가 무엇인지 간단히 설명해보고, PnP를 통해 Zero Install을 하기 위해 우리가 해결해야 할 문제가 무엇인지 설명해 보려고 한다. Zero Install Zero Install은 말 그대로 설치를 하지 않고 이용하는 방식을 말한다. 기존에 node_modules에서 모든 디펜던시를 새로 인스톨하려고 하면, 모든 디펜던시 모듈이 인스톨에만 굉장히 많은 시간이 소모하게 된다. 그러.. 공감수 13 댓글수 3 2022. 9. 11.
'Component' cannot be used as a JSX component 원인과 해결방법 아래와 같은 문제가 발생하였다. 'Component' cannot be used as a JSX component. 우선 근본적인 원인은, react가 18 버전대부터 많은 변화가 발생하며, @type/react 역시 18버전대부터 타입 정의에 대한 방식이 많이 변경되었다. 그래서 그런지, Next.js 환경에서 Dynamic Import 같은 컴포넌트도 이와 같은 에러가 발생하였다. 따라서 @type/react 버전을 17 버전대로 변경해주면 해결할 수 있다. { "name": "create-react-app", "scripts": { ... }, "dependencies": { "react-dom": "17.0.2", }, "devDependencies": { "@types/react": "17.0... 공감수 1 댓글수 0 2022. 9. 5.
2022년 상반기 회고 벌써 8월이 가까워지고 있다. 원래 6월 말쯤에 상반기에 대한 회고를 작성해 보려고 했는데, 리프레시 겸 제주도 여행도 다녀오고 이것저것 밀린 일들을 하느라 벌써 상빈기 회고를 작성하기가 애매한 시기가 되었다. 그래도 6개월이란 시간 동안 정말 많은 일을 했고 내 스스로 많은 성장 과정을 한번 더 겪을 수 있었던 기간이었던 만큼, 늦게나마 회고는 작성해야겠다는 생각이 들었다. 작년 하반기에 이어 상반기까지 쭉 기술적인 부분들도 계속 성장할 수 있었지만, 무엇보다 소프트 스킬과 팀워크, 그리고 팀 문화에 대해 많은 것은 배우고 깨달을 수 있었던 기간이었던 것 같다. 나와 우리팀이 상반기 동안 지속적인 성장을 위해 활동했던 내용들을 아래에 큰 단위로 한번 정리해 보려고 한다. 모노레포 시스템 구축 작년 하반.. 공감수 4 댓글수 0 2022. 7. 30.
Brotli 압축방식(Compression)을 통한 웹 성능 최적화 이번에 web.dev 공부를 하면서 gzip보다 뛰어난 압축방식인 Brotli를 새롭게 알게 되어서 한번 소개를 해보려고 한다. HTTP Compression 우선 HTTP 압축에 대해 다시 한번 알아보자. HTTP 압축은 웹 서버에서 리소스들을 압축 알고리즘을 통해 사이즈를 줄임으로써, 브라우저로 전달할 때 더 작은 사이즈로 전달하기 위한 방식이다. 웹 서버로 리소스를 요청할 때 Request Header의 accept-encoding에 현재 브라우저에서 호환되는 압축 정보를 실어서 함께 요청하면, 웹서버에서 해당 압축 방식을 지원하는지 확인 후 지원이 되면 리소스를 압축하거나 미리 압축되어있던 리소스를 전달하게 된다. 💡 대부분 웹서버에서 이러한 압축 방식을 직접 구현할 수도 있지만, 이미 대부분의.. 공감수 5 댓글수 0 2022. 6. 30.
TBD(Trunk Based Development) 전략이란? 이번에 팀에서 모노레포로 프로젝트를 관리하게 되면서 팀 내 워크플로우 방식을 Trunk Based Development 방식으로 변경하게 되었다. 이전에는 Git Flow, Github Flow 정도밖에 몰랐는데, 이번에 새롭게 알게 된 TBD(Trunk Based Development) 방식에 대해 정리해보려고 한다. TBD의 목적 평소 소규모 팀에서는 코드가 많지 않고 인원이 적은 만큼 서로 각자 작업하고 반영하는 사항에 대해서 충돌이나 컨텍스트가 꼬이는 상황이 매우 적다. 그러나 어느 정도 규모가 커질수록 많은 개발자가 같은 코드를 유지하는 것이 어려워지며 이러한 문제는 내가 작업한 사항을 Trunk 브랜치에 반영하려고 할 때 충돌로 이어질 수 있다. 이러한 충돌을 줄이기 위해 팀 내에서 최대한 동.. 공감수 4 댓글수 0 2022. 6. 17.
팀워크를 위한 모노레포(Monorepo) 시스템 구축, 그리고 회고 꽤 오랜 시간 동안 모노레포 이전 및 안정화 작업을 계속 진행해왔다. 그래도 이제는 상대적 주요 프로젝트들은 모두 모노레포로 이전이 완료되었고, 팀원들이 이제 모두 모노레포 내에서 작업이 가능한 수준으로 안정화를 시키게 된 것 같다. 콴다 팀 블로그에도 해당 블로그 글을 쓰긴 했지만, 내 스스로도 좋은 경험 및 큰 성장 과정이 되었던 것 같아서 내 블로그에도 기록을 남겨보고 싶어 이렇게 한번 더 작성을 해본다. (비록 내용이 거의 중복이 되겠지만..) 우리 팀은 이번 모노레포를 통해 새로운 팀워크 방향성이 생기면서, 이를 통해 향상된 팀 협업 요소들을 정리해 보려고 한다. 우선 그전에, 우리가 어떤 계기로 인해 팀 전체가 모노레포 시스템을 이용하기로 결정하게 되었는지 배경을 먼저 소개하고 싶다. 모노레포.. 공감수 6 댓글수 0 2022. 5. 30.
[애자일] 함께 자라기-자기계발은 복리로 돌아온다 우리는 학교에서 받은 수업 방식인 교육학습이 아닌, 현재와, 사회에서 정답이 정해져 있지 않고 무분별한 요소들과 명확하지 않는 야생 학습이 되어야 한다. 당신은 몇 년 차? 강한 놈이 오래 가는 게 아니라, 오래 가는 놈이 강한 거더라. 자기계발은 복리로 돌아온다 애자일은 피드백을 짧은 주기로 받고, 다음 사이클에서 동일한 활동을 하게될 때 더 나은 방식으로 진행할 수 있도록 하는 것이다. 이는 소프트웨어 뿐 아니라, 모든 활동에서 그렇다. 예시) 골프 골프 연습 후 빠른 피드백을 받으라. 골프를 치고 1년뒤에 받는 피드백은 의미가 없다. 자신을 곱하라. 더하기 사고. - 쓸데없이 낭비되는 시간을 줄이고 잠자는 시간을 줄여서 일하는 시간을 늘리는 것. 곱하기 사고. - 집단의 지능을 높이는 것. 어떻게 .. 공감수 3 댓글수 0 2022. 5. 29.
모노레포 환경을 더욱 가볍게 - git sparse checkout 현재 모노레포를 사용하면서 어떻게 하면 우리 팀원 모두가 모노레포를 더욱 안정적으로 사용할 수 있을지 많은 고민과 실험 중에 있다. 여러 개선할 점 중 하나가, 모노레포를 내 로컬에서 이용할 때 너무 무거운 느낌, 그리고 여러 프로젝트가 함께 섞여 있다 보니 파일 찾는 점에 어려움이 있다는 단점이 많은 팀원들의 의견이다. 그래서 어떻게 하면 많은 파일들을 가지고 있는 모노레포를 조금이라도 안정적으로 가볍게 사용해볼 수 있을까 리서치를 하다가 팀원 중 능력자 @yeoul을 통해 git sparse checkout라는 멋진 git 커맨드를 알게 되어서 이를 한번 정리해 보려고 한다. 그전에 우리가 평소 사용하던 git checkout이란 기능에 대해 더 자세히 알 필요가 있다. 우리가 흔히 새로운 브랜치를 .. 공감수 3 댓글수 0 2022. 5. 28.
[Github] Code Owner로 Auto Assign 하기 Code Owner란 Github에는 Code Owner라는 기능이 있는데, Repository 내에 특정 파일이나 특정 디렉토리, 원하면 특정 확장자 별로도 Owner를 지정하여 파일 및 코드를 관리할 수 있는 방식이다. 이를 활용하면 코드리뷰를 위해 PR 생성 시, 작업한 파일에 관련된 Owner들을 자동으로 PR(Pull Request) Reviewer로 지정할 수 있다. Code Owner 사용법 사용법은 아주 간단하다. 프로젝트의 Root 경로에 '.github/CODEOWNERS' 파일을 생성 후, 패턴에 맞게 오너를 설정해주면 된다. # .github/CODEOWNERS 아래 패턴을 참고하여 작성하면 된다. # 이것은 주석입니다. # 담당자를 지정할 때는 github ID 혹은 github .. 공감수 2 댓글수 2 2022. 3. 29.
Yarn Workspace에서 package.json 틸드(~), 캐럿(^) 버전 명시 주의할 점 yarn workspace를 이용해서 모노레포를 구축하던 중, 'package.json 버전 명시'로 인해 발생한 문제가 있었다. 지금까지는 크게 신경쓰지 않던 요소였는데, 평소 간과하게 생각하던 녀석으로 인해 이번에 처음으로 크게 데여본 경험으로.. 모노레포 작업을 하며 좋은 인사이트를 얻은 것 같아 블로그로 정리해 보려고 한다. 이슈 배경 현재 yarn workspace에서는 yar berry(2.0)를 쓰고 있다. yarn berry를 이용하게 되면 Zero install을 통해 의존성 패키지들을 더 가볍고 빠르게 설치 및 이용할 수 있다. (여기서는 zero install이 무엇인지 다루지 않는다.) 그러나 지금 작업 중인 모노레포에서는 yarn workspace 환경 세팅에 zero instal.. 공감수 4 댓글수 0 2022. 1. 26.
ESLint, Prettier Setting, 헤매지 말고 정확히 알고 설정하자. ESLint, Prettier 관련해서 환경 세팅을 하면 항상 어쩔 땐 잘되고, 어쩔 땐 안되고... 구글링하면 그렇게 많이 나오는 방식들을 전부 해봐도 계속 안돼서 시간을 그렇게 버릴 때가 많았던 것 같다. 그냥 생각없이 Prettier extension 설치해라, eslintrc 이렇게 세팅해라, 등등.. 따라 하니까 꼬이기도 하고, 저장을 시도하면 자동 수정은 안되고.. 그럴 때마다 속이 터졌는데, 이참에 아예 작정하고 시간 내서 제대로 파악 좀 해봤다. 아마 나처럼 하라는 대로 했는데도 왜 안되는지 궁금할 개발자들이 있지 않을까 싶다.(나만 그런걸까...) 직접 그 원인을 상세히 파악하고 알아보도록 하자. VSCode가 코드의 Lint Error를 잡는 것부터, 저장 시 자동 수정하는 설정까지.... 공감수 84 댓글수 12 2021. 12. 18.
Next.js Lazy Hydration으로 웹 성능 향상시키기(HTML은 유지하고 Script는 걸러내자) Next.js의 Hydrate개념을 아직 모르신다면,이전에 작성했던 Next.js의 Hydrate 글을 먼저 참고하시는 것을 추천드립니다. Next.js에서는 첫 페이지를 로드하면 Hydrate과정을 거치게 된다. 💡 Hydrate란? 화면에 보여줄 document 페이지를 서버 단에서 먼저 렌더링 후 브라우저로 전송한 뒤, 이후에 해당 DOM 요소에 필요로 한 Script 코드들을 바로 브라우저로 전송한다. 그리고 각 DOM 요소와 Script 코드가 매칭이 되면서 정상적으로 웹 페이지가 동작하게 된다. 그러나 이러한 Hydrate 방식은 아직 약간의 아쉬운 점이 존재하는데, 그것은 'PreRendering 된 DOM 요소의 모든 Script는 무조건 모두 가져온다는 것'이다. 이 말이 무슨 뜻인지 아.. 공감수 19 댓글수 2 2021. 12. 2.
브라우저 동작원리를 알아야 하는 이유가 무엇인가요? 💡 해당 글은 React의 SSR인 Next.js 프레임워크에 의존하여 작성된 글입니다. 그러나 전체적인 맥락과 핵심 내용을 이해하시는 데는 큰 문제는 없습니다. 프론트엔드 주니어 개발자가 꼭 알아야 하는 기본지식 중 하나로 많이 소개되고 있는 '브라우저 동작 원리' 취업이나, 이직 준비를 해봤다면 무조건 들여다봤을 내용인 만큼, 브라우저가 어떻게 동작하는지에 대해서는 프론트엔드 개발자라면 이미 어느 정도는 알고 있을 것이라 생각한다. 그러나 개발자에게 필요한 기본 지식이라고 해서 어찌어찌 들여다보고 이해는 했는데... 도대체 이게 왜 필요한 걸까? 지금까지 이런 지식 없이도 개발은 잘만 해왔고, 왠지 앞으로도 굳이 필요 없을 것 같긴 한데.. 브라우저 동작원리에 대해 상세하게 다루는 블로그 글과 영상은.. 공감수 29 댓글수 9 2021. 10. 30.
Next.js 12 업데이트 사항 정리 너무나 빠른 Next.js의 업데이트.. 저번에 Next.11이 발표된 지 2,3달 정도밖에 안 된 것 같은데, 벌써 12가 발표라니.. 거두절미하고 새롭게 업데이트된 사항에 대해 빠르게 알아가 보도록 하자. 목차 프레임워크에서 사용하던 컴파일러를 Rust 컴파일러로 대체함 : 프로젝트 빌드 속도 증가, 새로고침 속도 증가. 미들웨어 : 서버 단에서 미들웨어 처리가 가능한 기능 추가. React 18 지원 : React 18 버전을 지원. AVIF 지원 : webP보다 20% 압출률이 더 좋은 AVIF 포맷 지원. 봇 인식 ISR 폴백 : Google Bot 등의 웹 크롤러에 최적화된 SEO 동작 관련 내용. 네이티브 ES 모듈 지원 : 표준화된 모듈 시스템과의 연계. URL 가져오기 : 모든 URL에서.. 공감수 11 댓글수 2 2021. 10. 28.
Preload의 개념, 그리고 올바른 사용법 웹 사이트를 방문하면, 필요한 리소스 자원을 서버에 요청할 때 여러 자원을 동시에 요청하게 되고 서버에서는 요청 순서에 상관없이 준비가 되는대로 응답을 하게 된다. 이때, 특정 리소스를 빠르게 로딩하도록 우선순위를 부여하는 방법이 바로 Pre Load를 지정하는 방식이다. Head 태그에 빠르게 로딩시킬 파일을 Pre Load로 지정하게 되면, 페이지 요청 시 해당 소스 자원을 우선적으로 로드를 수행하게 된다. 한번 해당 기능이 어떻게 동작하는지 확인해보자. const JenkinsLogo= () => { return ( ); }; export default JenkinsLogo; 간단하게 Next.js 환경에서 jenkins.png 파일을 img 태그를 통해 화면에 띄우는 코드를 돌려보았다. 적용 전 .. 공감수 7 댓글수 1 2021. 9. 5.
Next.js Hydrate를 최적화 시킬 수 있을까 (Partial Hydration) 요즘 SEO 향상을 위해서 웹 성능 개선을 계속해서 연구 중이다. (흔히 웹 성능 최적화시킬 수 있는 요소들은 거의 다 진행한 것 같으면서도, 신기하게도 할 것이 계속 나온다...) 요즘에는 프론트엔드 단에서 LCP(Largest Contentful Paint)와 TBT(Total Blocking Time)를 어떻게 더 개선시킬 수 있을지 연구 중인데, 며칠 전 Performance 탭에서 흥미로운 요소를 발견했다. 위 이미지의 하단 쪽을 보면, FP(First Paint)가 일어나기 전까지 Next.js Hytration 작업이 Long Task로 보여지는 것이다. (정확히는 Next.js-before-Hydration이니까, 실제 Hydration 하기 전의 특정 작업으로 볼 수 있다.) 우선 Hyd.. 공감수 14 댓글수 1 2021. 8. 12.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.