본문 바로가기

분류 전체보기66

Hydration Next가 궁금해서 기존에 작업했던 everydaaay_shop 쇼핑몰 프로젝트를 관리하는 대시보드를 제작중입니다 Next관련 자료를 찾아볼때마다 Hydration이라는 용어가 나오는데 간단하게 제가 이해한 바는 아래와 같습니다 Hydration이란 서버사이드 랜더링, 클라이언트사이드 랜더링을 혼합해서 사용하는 방식입니다 왜? : - SEO, 이미지 최적화 등 많은 요소 때문에 Next.js 와 같은 서버사이드 랜더링기능을 수행할수있는 프레임워크를 많이 사용하게 됨 - 서버사이드 랜더링으로 페이지를 제작하면 정적인 페이지라 초기 랜더링을 빨라도 사용자 상호작용이 많을때 좋지않음 - 그럼 서버사이드 랜더링해서 빠르게 ui를 보여주고 동작은 클라이언트 사이드 랜더링에서 수행된걸 사용하자 - 서버사이드 랜더링.. 2024. 4. 1.
Module Federation 개인적으로 생각했을때 강력한 micro frontend Architecture 를 구성할 수 있는 방식인 것 같습니다. webpack에서 지원하는 해당 모듈이며 외부 프로젝트의 모듈을 공유하여 사용 할 수 있습니다 모듈들을 독립적으로 관리가 가능하고 코드 전체를 빌드할 필요가 없어져 빌드 시간이 줄어들것으로 기대됩니다. 구성하는 방식은 간단합니다. webpack설정 파일에서 구성을 합니다. 모듈을 내보내는 프로젝트에서는 아래와 같이 exposes에 내보낼 모듈을 지정해서 내보낼수있습니다. new ModuleFederationPlugin({ name: "app2", // 전체 모듈의 이름 filename: "moduleEntry.js", //빌드시 생성되는 파일의 이름을 지정 exposes: { // 공유.. 2024. 2. 1.
마이크로 프론트엔드 아키텍쳐 간단하게 생각하면 하나의 프로젝트를 서비스단위로 구분해서 나누고 이를 구성한 후 합쳐서 하나의 프로젝트를 제공하는 것입니다. 각각의 서비스를 독립적으로 관리하기 때문에 이슈의 범위가 줄어들고 새로운 서비스를 추가하기 편해진다는 장점이 있습니다 하지만 구성이 복잡하고 서비스 단위로 구분하는 것이 어려울 수 있습니다. 마이크로 프론트엔드 아키텍쳐를 검색하면 같이 검색되는 것들이 모노레포와 멀티레포가 있습니다 하나의 레포지토리에서 프로젝트를 진행하다가 프로젝트 범위가 넓어져 분리해서 관리하고싶은 소요가 생겼고 멀티레포로 나누어서 관리하게 되었는데 나누어서 관리하다보니 공통 컴포넌트를 쓰기 어렵고, 각 레포지토리마다 컨벤션 및 종속성이 달라 문제가 발생하는등의 이슈가 있었습니다 이후 등장한 것이 모노레포로 하나.. 2024. 1. 31.
bundler에 대하여 Create react app으로도 프로젝트를 생성할 수 있는데 왜 별도로 번들러를 설정해서 사용할까? 이게 궁금해져서 번들러에 대해 찾아봤습니다 시간의 흐름대로 적어보겠습니다. 1. 브라우저는 원래 ECMAScript 5 이전의 자바스크립트에서는 모듈시스템을 지원하지않았음 -> 여러 파일로 나뉘어진 모듈화된 자바스크립트 코드를 인식하지못했다 -> 하나의 파일로 제작해야한다 -> 번들러를 통해 묶어줘야한다 -> 묶어주는김에 조금 최적화할 수 없을까? (성능 향상 : 코드 최적화 , 번들크기 최소화, 파일크기 줄임 등 아래에서 설명하겠습니다) 이렇듯 번들러로 묶어주는것이 필수였고 -> 번들크기를 최소화하고 코드를 최적화 함으로써 cicd가 동작할때의 속도나 브라우저가 파일을 파싱할때 더욱 빠르게 만들었습니.. 2024. 1. 28.

티스토리툴바