전체 글

익스텐션을 개발하면서 새롭게 빌드하고 다시 로드하는 작업을 반복적으로 하다보니 HMR 도입이 필요하다는 생각을 하게 되었습니다. 하지만 콘텐츠 스크립트에서 HMR을 적용하는 과정에서 많은 문제들이 있었고 그 경험들을 공유하려고 합니다. 우선 익스텐션에서 HMR의 과정을 알아보기 전에 HMR의 등장 배경과 일반적인 HMR이 어떻게 동작을 하는 지 에 대해서 알아보려고 합니다. 1. HMR 등장 배경HMR은 맨 처음부터 있던 기술은 아니였습니다. HMR이전에 Live Reload라는 초기 기술이 있었습니다. 발전 과정을 보면서 간단하게 이전 개발자들이 어떤 불편함이 있었고 어떻게 해결을 했는 지 알아보도록 하죠!1.1. Live Reload란?Live Reload는 개발 중 코드 변경 사항을 빠르게 반영하기..

크롬 익스텐션을 개발하게 된 계기는 Nteracy 서비스의 핵심 기능을 유튜브에서 바로 사용할 수 있도록 하여 외부 사이트로 이동해야 하는 불편함을 없애고 사용자 경험을 개선시키기 위함이였습니다. 이를 위해 content_script를 활용했으며 개발과정에서 겪었던 경험을 공유을 공유하고자 합니다. content_script는 크롬 익스텐션이 웹 페이지의 DOM에 접근하여 콘텐츠를 수정하거나 추가적인 기능을 제공할 수 있도록 하는 스크립트입니다. 이를 통해 특정 사이트에서만 실행되도록 설정할 수도 있으며, 페이지의 컨텍스트에서 코드가 동작하도록 만들 수 있습니다.공식 문서에 따르면, content_script는 웹 페이지의 JavaScript 환경과 별도의 실행 환경에서 동작하지만, DOM을 직접 조작할..

1. 초기 우리의 서비스해커톤 동안 MVP가 가장 우선순위에 있었기 때문에 서버분들이 API 명세서를 주는대로 바로 개발을 진행해야 했습니다.useEffect(() => { const getUserWatchDataApi = async () => { ... }; getUserWatchDataApi();}, []);그래서 처음엔 익숙했던 useEffect를 사용해서 비동기 통신을 처리하는 로직들을 작성하였습니다.하지만 추후 리팩토링을 진행하면서 TanstackQuery와 Suspense를 도입하고 리액트의 주요 개념인 선언형 프로그래밍을 통하여 비동기 작업의 복잡성을 크게 줄여주고 코드의 가독성을 높이기 위해 노력하였습니다. 2. useSuspenseQuery와 Suspense 도입하면서처음엔 하..

뷰 프레임워크를 사용하면서 shallowRef에 대해서 궁금한 적이 많았던 것 같다. 그래서 shallowRef의 경험과 개념에 대해서 애기하고 ref와 어떤 차이점이 있는 알아보려고 합니다. 1. Vue의 핵심인 ref ref는 뷰 프레임워크의 반응성에서 중요한 역할을 하는 함수이다. reactive의 경우 object의 변화만을 감지할 수 있었지만, ref의 등장으로 number, string, boolean타입과 같이 원시타입의 경우에도 변화를 감지 할 수 있게 만들었다. 기본적으로 ref를 사용하게 된다면, ref는 Proxy를 활용하여 내부 깊숙히 변화를 관찰할 수 있기 때문에 refValue.value.val로 접근해서 값을 변경하여도 뷰에서는 데이터가 변경되었다는 것을 감지할 수 있다. 이런..

slice메소드나 Spread Operator를 활용해서 새로운 배열을 생성한 경우 그냥 복사가 되었다고 넘어가면 절대 안된다. "새로운 배열이 생성이 되었기 때문에 원본엔 영향을 주지 않겠지?" 라고 생각한다면 다음과 같은 문제를 겪을 수 있다. 동일한 배열을 생성하기 위해서 다음과 같이 spread 연산자를 사용하였다. 이제 복사를 했으니 한번 복사본을 변경해볼려고 하는데 원본도 변경이 되는 현상이 발생했다. 우리는 원본이 변경되는 것을 막기 위해서 spread 연산을 하였지만 우리가 원하는 결과를 얻을 수 없었다. 근데 왜 이런 현상이 발생하게 된 걸까? const array = [1, [2, 3]]; const shallowCopy = [...array]; shallowCopy[1][0] = 9;..

저번 글에서는 익스텐션에서 필수적인 manifest에 대해서 설명을 하였는데 이제 익스텐션 개발을 위해서 웹팩을 설정해보고 팝업을 만드는 작업을 진행했던 과정에 대해서 설명하려고 합니다. 1. package.json 다운로드 필요한 모듈을 설치하기 위해서 package.json파일 생성을 해야됩니다. npm init -y 2. 초기 설정에 필요한 모듈 다운로드 일단 웹팩을 사용하기 위해서 핵심적인 역할을 하는 webpack와 webpack을 더 쉽게 사용할 수 있도록 다양한 명령을 제공 받기 위해서 webpack-cli까지 설치를 진행하였습니다. 이외에도 html-webpack-plugin, copy-webpack-plugin이 필요하긴 한데 아래부분에서 설명하구 넘어가도록하겠습니다. npm i --sa..

자바스크립트라는 언어를 배우면서 다른 언어와는 어떤점이 다른가에 대해서 고민을 한적이 있었고, 그 중 하나가 바로 오늘 이야기할 주제이다. 1. Call by reference와 Call by value란? 함수 호출의 대표적인 방법는 call by reference와 call by value가 있다. call by value의 경우 값을 복사해서 호출하는 방법이고, call by reference의 경우 값을 참조해서 호출하는 방법이다. 사실 처음 배우는 입장이라면 참조가 어떤 개념인지 전혀 모를 수 있다고 생각한다. 참조라는 개념은 C의 주소값 개념을 이해하게 된다면 쉽게 이해할 수 있다. 2. 어? 자바스크립트 Call by reference처럼 동작하던데 자바스크립트 또한 c, c++ 처럼 cal..

1. 크롬 익스텐션으로 개발을 진행한 이유는? 기획단계에서 어떻게 하면 사용자들이 서비스를 편리하게 사용할 수 있을 지 팀원들과 고민하다가 일반적인 SPA를 활용한 웹 어플리케이션 방식보단, 익스텐션이 더 적합하다고 생각하였기 때문에 선택하게 되었다. 또한 높은 접근성을 위해서 크롬 익스텐션 중에서 일반적으로 팝업창을 띄워서 하는 방식이 아닌 익스텐션 다운로드 후 ContentScript에서 유튜브의 실제 DOM에 리액트 컴포넌트를 삽입하여 사용자들이 익스텐션을 사용하고 있다는 것을 느끼지 못하도록 구현하기로 결정하였다. 2. 리액트는 버릴 수 없어 우리가 SPA 웹 어플리케이션 만들려고 할 땐 리액트 개발 환경을 편리하게 세팅하기 위해서 두개의 명령어를 입력하는편이다. npx create-react-a..

Refresh 토큰을 이용해 Access 토큰 재발급을 하는 과정에서 한 페이지에서 여러번의 API가 호출 된 경우 토큰들이 동기화가 제대로 이뤄지지 않는 문제가 발생할 때 가 있다. 1. 문제 발생 이 문제점에 대해서 일단 자세히 설명해보려고 한다. 만약 클라이언트 쪽에서 만료가 된 access토큰을 보내는 경우 refresh토큰을 사용해서 access토큰을 재발급하는 과정이 이루어 지는데, 다수의 요청을 동시에 서버로 보내게 된다면 맨 처음 서버로 요청한 API가 토큰을 재발급하구 그 다음 서버로 요청한 API가 토큰을 재발급하게 된다. 필요없는 토큰 발급로직을 여러번 하게 되는 문제점이 발생하게 된다. 하지만 더 심각한 문제점은 무엇이냐면, 이것은 사실 로그인 로직 구현에서 다를 수 있겠지만 만약 ..

프로젝트를 진행하면서 Vue-CLI로 프로젝트를 생성하였기 때문에 빌드속도가 느려도 너무 느리다..프로젝트의 규모가 작진 않기 때문에 서버 실행의 속도가 진짜 느려도 너무 느리다.. 이게 다 Babel 때문이다.느리다는 단점도 있고 Vue-CLI 공식 홈페이지에서도 Vite를 사용하길 권장하고 있기 때문에 마이그레이션을 꼭 하고 넘어가야 된다고 생각한다.그래서 이번에는 ESM 기반의 빌드 Tool을 사용하는 Vite로 마이그레이션을 진행했던 과정에 대해서 설명하려구 한다. 처음 해보는 마이그레이션이기도 하였고, 어떤 에러가 발생할 지 모르기 때문에 새롭게 브랜치를 생성 후 진행하였다.1. Vite환경 프로젝트로 생성 아래의 명령어 입력시 프로젝트 이름을 설정 하라고 나오는데 필자는 해당 폴더내에 파일들을..