반응형 분류 전체보기227 [개발환경] micro-frontend 아키텍처 구성해보기 ✍️ 이전 블로그에서 옮겨온 게시글입니다 마이크로 프론트엔드 마이크로 프론트엔드는 하나의 웹앱을 여러개의 작은 웹앱으로 나누어서 개발하는 방법론 입니다. 이렇게 나누어진 작은 웹앱들은 각각의 독립적인 웹앱으로 개발되고, 배포되지만 사용자 입장에서는 하나의 웹앱으로 보여집니다. 이 것은 방법론 이기 때문에, 명확히 어떻게 해야한다 라는게 없습니다. 하지만 번들러를 사용하는 웹개발 환경에서는 Module Federation 이라는 방법을 사용해서 구현할 수 있습니다. 💡 Module Federation 은 webpack, vite, rollup 등 각 번들러마다 플러그인을 지원하고 있습니다. 1. 모노레포 구성 개발편의상 모노레포로 구성을 합니다. yarn init -y // package.json { "n.. 2023. 9. 21. [개발환경] yarn workspace 모노레포 구성 ✍️ 이전 블로그에서 옮겨온 게시글입니다 yarn workspace yarn workspace 는 yarn 의 monorepo 기능입니다. monorepo 는 여러개의 패키지를 하나의 저장소에서 관리하는 것을 말하는데, 이를 사용하면, 여러개의 패키지를 한번에 관리할 수 있는 장점이 있습니다. 저같은 경우에는 node 서버와, react 프론트를 함께 개발해야 할때, type 정의는 같이 사용하고 싶은 경우에 유용하게 사용해 보았습니다. ❗ yarn1 기준으로 합니다. 프로젝트 init yarn init package.json 수정 { "name": "monorepo", "private": true, // yarn1 에서는 private: true 를 해주어야합니다. "workspaces": [ "pac.. 2023. 9. 21. [개발환경] yarn vs yarn2 ✍️ 이전 블로그에서 옮겨온 게시글입니다 Yarn 이란? yarn 은 npm 과 같은 javascript 패키지 매니저입니다. yarn 이 처음 출시되던 시점에는 npm 과 몇몇 차이점이 있었습니다. yarn.lock 파일을 통해 의존성 패키지의 버전을 고정할 수 있다는 점 npm 보다 빠른 설치 속도(병렬 설치, 캐싱) 위와 같은 장점이 있었지만, npm 은 node.js 와 함께 제공되면서 생태계 사이즈에서의 차이가 났었습니다. 하지만 npm, yarn 두가지 모두 새로운 버전을 거듭하면서 서로의 장점을 흡수하여 이제 그 차이는 거의 없다고 해도 무방할 정도입니다. 두 패키지 관리자의 문제점 npm, yarn 은 패키지를 설치할때, node_modules 라는 디렉토리에 패키지를 설치합니다. 그런데 .. 2023. 9. 21. 1달간의 canvas 오프라인 스터디 ✍️ 이전 블로그에서 옮겨온 게시글입니다 4주간의 오프라인 스터디 끝! 1달전 다니던 회사를 퇴직하게 되면서, 또 열심히 공부하는 시간을 가졌습니다. 그러면서 처음으로 오프라인 스터디를 주최해보았습니다. 주제는 html canvas 였구요 ㅎㅎ. 픽셀단위로 조작할 수 있는 자유로움과 그 자유에서 오는 무궁무진함이 너무 매력적이더라구요. 홍대 룸 스더티 카페에서 진행한 강의형 스터디였는데, 준비하는 과정에서 더 많이 배웠고, 여러 사람에게 지식을 공유하는 것이 떨리기도하면서 재밌는 경험이었습니다. 또 머릿속에 있는 것을 잘 표현할 수 있는 연습의 기회가 되기도 했구요. 커리큘럼 canvas 기초 여러가지 canvas 예제 다루기 react 에서 canvas 다루기 three.js 맛보기 실전 canvas .. 2023. 9. 21. [Browser] Service Worker 로 push notification 구현하기 서론 서비스 워커는 웹 어플리케이션,브라우저 와 네트워크 사이에 위치한 프록시 서버처럼 동작합니다. 만약 네트워크가 불가능한 상황이라면 캐시 데이터를 사용하거나, 프로세스가 열려있지 않을 때 백그라운드 작업을 하는 등 훌륭한 오프라인 경험을 만들어 냅니다. 서비스 워커를 활용한 대표적인 기술은 MSW 나 PWA 가 있습니다. 백그라운드에서 동작한다는 점에서 앱의 전유물이던 푸시알림도, 브라우저에서 구현할 수 있는데, 간단한 예시로 한번 정리해보려합니다. 아키텍처 큰 틀은 아래 그림과 같습니다. 클라이언트는 service worker 를 등록과 동시에 메인 스레드에서 push 이벤트를 구독하고, 그 구독정보를 서버로 전달합니다. 서버는 구독자 정보를 저장하고, 원할때 원하는 클라이언트에게 메세지를 전송할 .. 2023. 9. 21. [Browser] Web Worker 와 Service Worker 서론 Worker 는 웹사이트의 성능을 향상시키기 위해 등장했습니다. 안드로이드나 IOS 의 경우 일반적으로 앱의 메인 스레드는 유저 이벤트를 언제든지 반응할 수 있도록 놔두고, 다른 쓰레드로 복잡한 작업을 수행합니다. 링크 를 참조하시면 실제로 안드로이드의 경우 메인 스레드를 오랫동안 blocking 하면 앱이 출돌하는 이슈가 있던 것을 확인할 수 있습니다. 이런 이유로 모바일 기기에서는 멀티쓰레딩이 아주 일반적인 패턴으로 자리 잡았죠. 하지만 javascript 의 경우 싱글 스레드로 동작하고, 위와 같은 멀티쓰레딩을 구현하기엔 부족함이 많았습니다. 하지만 worker 의 등장으로 백그라운드의 다른 스레드에서 script 를 실행할 수 있게 되었어요. 워커는 메인스레드를 간섭하지 않고 어떤 메모리도 .. 2023. 9. 20. 이전 1 2 3 4 5 6 ··· 38 다음 반응형
