ETC

익스텐션을 개발하면서 새롭게 빌드하고 다시 로드하는 작업을 반복적으로 하다보니 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을 직접 조작할..

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

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환경 프로젝트로 생성 아래의 명령어 입력시 프로젝트 이름을 설정 하라고 나오는데 필자는 해당 폴더내에 파일들을..

Font Awesome 사이트(https://fontawesome.com/search) -아이콘(svc)파일 가져오기 -구글 창에서 color picker검색하기 -svc파일을 열어 fill의 parameter로 Hex값을 넣어 색깔을 변경 -svc to png 사이트로 접속 후 png파일 다운로드 -아이콘 완성 Canva 사이트(https://www.canva.com/icons/) -Logo창 접속 후 템플릿을 이용하지 않고 Blank 접속 -다양한 아이콘들을 이용해 나만의 아이콘 제작 -다운로드 후 흰색배경 removebg로 접속 해 삭제 -재 다운로드한 이미지 크로핑 Color.adobe(https://color.adobe.com/ko/create/color-wheel) -컬러 조합 추천사이트