반응형 FE28 [개발환경] yarn vs yarn2 ✍️ 이전 블로그에서 옮겨온 게시글입니다 Yarn 이란? yarn 은 npm 과 같은 javascript 패키지 매니저입니다. yarn 이 처음 출시되던 시점에는 npm 과 몇몇 차이점이 있었습니다. yarn.lock 파일을 통해 의존성 패키지의 버전을 고정할 수 있다는 점 npm 보다 빠른 설치 속도(병렬 설치, 캐싱) 위와 같은 장점이 있었지만, npm 은 node.js 와 함께 제공되면서 생태계 사이즈에서의 차이가 났었습니다. 하지만 npm, yarn 두가지 모두 새로운 버전을 거듭하면서 서로의 장점을 흡수하여 이제 그 차이는 거의 없다고 해도 무방할 정도입니다. 두 패키지 관리자의 문제점 npm, yarn 은 패키지를 설치할때, node_modules 라는 디렉토리에 패키지를 설치합니다. 그런데 .. 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. [Broswer] EventTarget 과 Event, CustomEvent EventTarget 인터페이스는 이벤트를 수신할 수 있고, 수신한 이벤트에 대한 수신기(listener)를 가질 수 있는 객체가 구현하는 인터페이스입니다. 즉, 이벤트의 대상이 될 수 있는 객체는 EventTarget의 세 메서드를 구현합니다. DOM Element, document, window 등 은 EventTarget 을 상속받고 있기 때문에, addEventListener() 메서드를 사용하여 이벤트에 콜백을 등록해둘 수 있는 는 것입니다. EventTarget 을 상속하는 새로운 객체 만들기 class EventObj extends EventTarget { constructor() { super(); } } const eventObj = new EventObj(); eventObj.addEv.. 2023. 9. 20. [Browser] window.addEventListener 이벤트 리스너는 웹 개발을 할때 너무나 익숙한 메서드입니다. 하지만 3번째 인자는 많이 생소한데요. 가끔 의도적으로 사용할 때가 생기면서 한번 정리해보았습니다. 목차 1. addEventListener 2.this 3. 세번째 인자 3-1. capture 속성 3-2. once 속성 3-3. passive 속성 3-4. signal 속성과 abort 3-5. useCapture 속성 4. removeEventListener 와 메모리 문제 1.addEventListener EventTarget 인터페이스를 구현한 대상은 addEventListener() 메서드를 가지고, 대상이 이벤트를 수신할 때마다 호출할 콜백을 등록할 수 있습니다. 2.this addEventListener() 내부 콜백의 this .. 2023. 9. 20. Browser 에서 얻을 수 있는 모든 길이와 좌표 그리고 스크롤 Browser 에서 얻을 수 있는 모든 길이와 좌표 그리고 스크롤 브라우저는 아래와 같이 기준으로 삼는 것에 따라서 달라지는 상대적 좌표와 절대적 좌표를 API로 제공함으로써 개발자가 유연하게 사용할 수 있습니다. 사용할 만한 모든 API 목록을 가져왔으니 핸드북 처럼 볼 수 있는 글로 남겨놓을까 합니다. 외울 때는 width,height 키워드 앞에 붙는 수식어들의 의미를 파악하면 직관적으로 외울 수 있을 것 같네요. 구분선으로 분리되어있는 것의 윗 파트는 window 객체에서 제공하는 API 이고, 아랫 부분은 Element 객체에서 제공하는 API 입니다. Browser 에서 제공하는 길이 API outerWidth, outerHeight : 브라우저 전체 크기를 반환합니다. innerWidth, .. 2023. 5. 9. 이전 1 2 3 4 5 다음 반응형
