이번 면접에서 useMemo, useCallback, React.memo에 대한 질문이 들어왔습니다. useMemo와 useCallback은 예전에 스터디에서 발표를 한 적이 있어 대답할 수 있었지만, React.memo에 대해서는 제대로 대답하지 못했습니다.대충 컴포넌트 메모이제이션 아닌가요그래서 이번 기회에 리액트의 세 훅에 대해 다시 정리해보고, 간단한 예제를 통해 적용 방법을 익히는 시간을 가져 보겠습니다. useMemo와 useCallback, React.memo 모두 React에서 성능 최적화를 위해 자주 사용되는 hook입니다. 즉 컴포넌트의 불필요한 렌더링을 방지하고 성능을 개선하기 위해 사용됩니다. 이 hook들은 기능은 비슷하지만, 어떤 것을 메모이제이션하는지에 따라 다릅니다.🛠 메..

이번 장에서 공부할 내용1. 일급 객체가 무엇인지에 대해 배웁니다.2. 일급 객체에 해당하는 함수 객체의 프로퍼티에 대해 배웁니다.3. 해당 챕터에서 나온 코드를 실습합니다. 1. 일급 객체프로그래밍 언어에서의 일급 객체는 변수에 담을 수 있고, 함수에 넘기거나 반환할 수도 있는 값을 말합니다. 자바스크립트에서 함수는 아래 조건을 모두 만족하여 일급 객체에 해당합니다.런타임에 생성할 수 있습니다. (식별자가 없는 리터럴로 생성할 수 있습니다.)변수나 자료구조에 저장할 수 있습니다.함수의 매개변수에 전달할 수 있고, 반환값으로 사용할 수 있습니다.// 1번 조건 만족const increase = function (num) { return ++num;};// 2번 조건 만족const predicate..

Push API / Notifications API푸시알림 기능에 대해 자세히 알아보기 전에, 알림 기능에서 자주 쓰이는 두 API에 대해 살펴보겠습니다. Push APIPush API는 server에서 service worker로 알림을 보내기 위해 사용하는 API입니다.브라우저가 서버로부터 푸시 메시지를 수신할 수 있는 기능을 제공합니다.브라우저(웹앱)의 활성 여부와 관계 없이 푸시 메시지를 받을 수 있다는 장점이 있습니다.서비스 워커가 활성화되면, Push API의 PushManager.subscribe() 메서드를 사용하여 푸시 알림을 구독할 수 있습니다. Notification APINotification API는 브라우저가 사용자에게 알림배너(UI)를 띄우기 위해 사용하는 API입니다.serv..

서비스워커란?정의특정 출처(사이트)의 하나 혹은 그 이상의 페이지를 제어하는 스크립트이벤트 기반 워커로서 JavaScript로 작성된 파일기능서비스 워커는 자신이 제어하는 페이지에서 발생하는 이벤트를 수신할 수 있다.웹에서 네트워크 요청과 같은 이벤트를 가로채어 수정할 수 있고, 이를 다시 페이지로 돌려보낼 수 있다.또한, 서비스에서 사용하는 리소스를 캐싱할 수 있다. 서비스워커 사용법1. 서비스워커 만들기// app.jsif ("serviceWorker" in navigator) { navigator.serviceWorker .register("/sw.js") .then(function (registration) { console.log("Service Worker registe..

글 작성 목적이번 프로젝트에서 PWA를 사용했는데, 완성까지의 시간이 촉박하여 제대로 알아보지 못하고 적용하게 되었습니다. 이로 인해 PWA가 동작하는 서비스워커 환경에서 추가적인 이슈들이 발생했습니다.그래서 이번 일을 기회로 삼아 PWA란 무엇인지, 서비스워커란 무엇인지에 대해 정리하고 넘어가고자 합니다. 그래서, PWA가 뭔데?PWA는 Progressive Web App의 약자로, 웹과 네이티브 앱 기능의 장점을 뽑아 만든 웹 앱입니다. 그럼 기존 웹 앱과 네이티브 앱의 기능은 어떤게 있는지 먼저 알아야겠죠. 1. 웹 앱 (Web App)구동 방식이 앱처럼 보이는, 웹 브라우저를 통해 실행 가능한 애플리케이션입니다.장점 ✅ 링크(URL)을 통해 간단하게 접근할 수 있고, 별도의 설치 과정이 필요없습..

컴포넌트가 화면에 표시되는 과정은 다음의 3단계로 이루어집니다.  1. 렌더링 트리거렌더링은 React에서 컴포넌트를 호출하는 것입니다. 이러한 렌더링은 다음 두 경우에서 트리거됩니다. (1) 컴포넌트의 초기 렌더링인 경우createRoot()에 화면에 보일 DOM 노드(루트 노드)를 인수로 넣어 호출 -> 객체에 할당할당된 객체로 render() 메서드를 호출 -> 렌더링 트리거import { createRoot } from 'react-dom/client';const root = createRoot(document.getElementById('root'))root.render(); (2) 컴포넌트의 state가 업데이트된 경우set 함수를 통해 state를 업데이트하여 추가적인 렌더링을 트리거합니다...

컴포넌트가 상호 작용의 결과로 화면의 내용을 변경해야 할 때(렌더링해야 할 때)가 있습니다. 이때 필요한 데이터를 저장하는 컴포넌트별 메모리를 State라고 합니다. 왜 이 데이터를 일반 변수에 저장하지 않을까요? 일반 변수(지역 변수)는 렌더링 간에 유지되지 않고, 변수를 변경해도 렌더링이 일어나지 않기 때문입니다. 때문에 저희는 컴포넌트를 새로운 데이터로 업데이트하기 위해 useState 훅을 사용합니다. useState처럼 "use"로 시작하는 모든 함수는 훅(hook)이라고 부릅니다. 훅의 특징은 다음과 같습니다.React가 렌더링 중일 때만 사용할 수 있는 함수입니다.  컴포넌트의 최상위 또는 커스텀 훅에서만 호출할 수 있습니다. useState 훅은 우리가 필요한 두 가지 기능을 제공합니다. ..

이벤트 핸들러란 무엇일까요? 사용자 상호작용에 따라 실행되는 사용자 정의 함수 입니다. 이를 사용하기 위해서 다음 단계를 거칩니다. 1. 사용할 함수를 컴포넌트 내에 선언한다.2. 함수 내부 로직을 구현한다.3. JSX의 onClick 속성에 함수를 추가한다.  이러한 이벤트 핸들러에는 중요한 특징이 몇가지 있습니다. 1. 컴포넌트 내부에서 선언합니다.따라서 이벤트 핸들러는 해당 컴포넌트의 prop에 접근할 수 있습니다.이벤트 핸들러를 선언할 때 JSX와 구분하거나, JSX 내에서 인라인으로 사용하거나, 화살표 함수를 사용할 수 있습니다. 2. "handle" 로 시작한 명명법이 일반적입니다.  3. 이벤트 핸들러로 전달한 함수들은 호출이 아닌 "전달"입니다.만약 과 같이 괄호를 붙인다면, 렌더링 과정..