dding_yull.log https://velog.io/ ɪ ʜᴏᴘᴇ ᴛᴏ sᴏʟᴠᴇ ʀᴇᴀʟ ᴘʀᴏʙʟᴇᴍs👩🏻‍💻❤️ Thu, 06 Mar 2025 15:06:55 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed dding_yull.log https://velog.velcdn.com/images/dding_yull/profile/54f46122-e646-4036-8603-afd2c2f3ef15/image.png https://velog.io/ Copyright (C) 2019. dding_yull.log. All rights reserved. <![CDATA[크롬 브라우저에서 Share API 무한 로딩 문제 해결]]> https://velog.io/@dding_yull/%ED%81%AC%EB%A1%AC-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C-Share-API-%EB%AC%B4%ED%95%9C-%EB%A1%9C%EB%94%A9-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0 https://velog.io/@dding_yull/%ED%81%AC%EB%A1%AC-%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80%EC%97%90%EC%84%9C-Share-API-%EB%AC%B4%ED%95%9C-%EB%A1%9C%EB%94%A9-%EB%AC%B8%EC%A0%9C-%ED%95%B4%EA%B2%B0 Thu, 06 Mar 2025 15:06:55 GMT 🔁 최근 특정 크롬 브라우저에서 navigator.share를 호출할 때, 공유 창이 열리지만 무한 로딩 상태에 빠지는 현상이 있었다.

아래 콘솔로 확인해보면 navigator.share는 true로 나오니 API는 존재하는데 Object.keys(navigator.share)를 봤을 땐 메서드가 비어있었다... 처음에 해당 문제를 찾을 때 대부분 API 존재여부를 확인하라는 내용이 많다보니 메서드가 없을 것이라고는 생각도 못했었다 브라우저가 Share API를 캐시된 상태에서 업데이트되면서 API의 활성화 여부와 실제 구현 상태가 일치하지 않았던 것 같다.

console.log('navigator.share 지원 여부:', !!navigator.share);  // true
console.log('Share API 메서드:', Object.keys(navigator.share));  // []

내가 생각한 문제 원인

  • 크롬 플래그 설정이 비활성화 상태이거나 최신 업데이트 반영이 되지 않음
  • 브라우저 캐시로 인해 이전 상태가 유지되면서 API는 있는데 메서드가 없었고
  • 그로 인해 share창이 열리면서 API가 호출되지만 안에 메서드가 없어서 내용이 안보이고 무한로딩 현상이 지속되었다. 때문에 시크릿 모드에서도 문제 발생 (시크릿 모드에서도 특정 브라우저 설정이 유지됨)
  • 시크릿 모드에서도 같은 현상이 발생하니 당연히 캐시는 아닐것이라 생각했었는데 시크릿 모드라도 유지되는 상태들이 있다는 것을 배우게 됐다.

💡 [시크릿 모드에서도 동일한 문제가 발생하는 이유] 시크릿 모드는 브라우징 기록, 쿠키, 사이트 데이터를 삭제하지만, 브라우저 설정과 API 상태는 유지되기 때문에 같은 문제가 발생할 수 있었다.

✅ 시크릿 모드에서 지워지는 항목 ❌ 시크릿 모드에서도 유지되는 항목
브라우징 기록 브라우저 설정 (chrome://flags 포함)
쿠키 및 사이트 데이터 하드웨어 가속 설정
양식 입력 데이터 확장 프로그램 설정
API 구현 상태

해결 방법

1단계. 크롬 플래그 설정 확인

  1. 크롬 주소창에 chrome://flags 입력

  2. 해당 페이지의 검색창에 "Web Share" 검색

  3. 해당 옵션이 Enabled(활성화) 상태인지 확인 후 필요하면 변경

2단계. 브라우저 캐시 삭제 및 업데이트

  1. 캐시 삭제

  2. 크롬 설정 → 설정 > 개인정보 및 보안 > 인터넷 사용 기록 삭제

  3. 캐시된 이미지 및 파일 삭제 (쿠키도 함께 삭제하는 것이 권장됨)

  4. 크롬 업데이트 확인

  5. 설정 > Chrome 정보에서 최신 버전인지 확인

  6. 최신 버전이 아니라면 업데이트 후 브라우저 재시작

]]> <![CDATA[컴파일과 번들링]]> https://velog.io/@dding_yull/%EC%BB%B4%ED%8C%8C%EC%9D%BC%EA%B3%BC-%EB%B2%88%EB%93%A4%EB%A7%81 https://velog.io/@dding_yull/%EC%BB%B4%ED%8C%8C%EC%9D%BC%EA%B3%BC-%EB%B2%88%EB%93%A4%EB%A7%81 Wed, 25 Dec 2024 23:29:03 GMT 지금 내 프로젝트가 어떻게 빌드되고 있는지에 대해 알아보다가 자주 듣던 컴파일, 번들링에 대해 좀 더 베이직한 의미에 대해 한번 찾아봤다. 대략적으로 이해했는데 실제로 직접 해보며 이해도를 높여가고 싶군..!

컴파일

  • 예를들면 리액트에서 jsx, tsx로 작성한 코드 → javascript로 변환하는 과정
  • 나보다는 컴퓨터가 더 잘 이해하도록
  • 보통 Babel이 이 역할을 담당

번들링

  • 여러개의 다양한 리소스를 하나의 파일 (또는 몇개의 파일)로 묶는 과정
  • 보통 Webpack, Parcel, Vite가 번들러로 사용됨

[예시] src의 3개 javascript를 dist경로의 bundle.js에 묶음

src/
├── App.js
├── Header.js
├── Footer.js

⬇️

dist/
├── bundle.js
]]> <![CDATA[웹 어플리케이션 빌드 프로세스_지금 내 프로젝트는 어떻게 빌드되는 중이지?]]> https://velog.io/@dding_yull/%EC%A7%80%EA%B8%88-%EB%82%B4-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C-%EB%B9%8C%EB%93%9C%ED%95%A0%EB%95%8C-shell%ED%8C%8C%EC%9D%BC%EC%9D%80 https://velog.io/@dding_yull/%EC%A7%80%EA%B8%88-%EB%82%B4-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C-%EB%B9%8C%EB%93%9C%ED%95%A0%EB%95%8C-shell%ED%8C%8C%EC%9D%BC%EC%9D%80 Wed, 25 Dec 2024 23:22:44 GMT 오늘 귓동냥으로 좀 더 알아봐야겠다고 생각한 부분은 빌드할 때 shell파일에 대한 전반적인 내용이다. 일을 하다보면 이미 세팅되어있던 방식대로 빌드하고 그때그때 에러만 수정하면서 배포하는 경우가 많아서 오늘은 기본적인 부분들부터 찾아보고 정리해보았다. 보충해야할 내용은 있겠으나 일단 조금씩 더 알아보고 기록해보쟈! (잘못된 부분은 알려주세요!)

❓지금 내 프로젝트에서 빌드할때 shell파일은 어디에 어떻게?

  • root의 shell 파일에 실행시키기 위해 필요한 명령어를 적어두고 빌드 전에 쉘스크립트대로 실행시킨 후 빌드한다.

  • 그럼 내가 하는 프로젝트에는 shell파일이 어딨지?

  • 현재 나는 직접 프로젝트의 yarn 명령어로 진행!

  • yarn 명령어는 프로젝트 최상단의 package.json파일을 읽어서 실행되는데 알게된 김에 dev, stg, production에 따라 명령어 정리하고 dev 스크립트도 단순화해보았다.

"build:base": "react-scripts --max_old_space_size=4096 build",
"build-dev": "env-cmd -f .env.development npm run build:base",
  • env-cmd -f .env.development : .env.development파일의 환경 변수를 로드하라는 명령어
  • react-scripts build : react 프로젝트에서 기본 빌드 스크립트임, 정적 파일로 빌드함
  • --max_old_space_size=4096 : node.js의 메모리 제한을 4096MB로 늘린다는 명령어

❓위에서 “정적 파일로 빌드함”에 대해 조금 더 찾아보자면?

  • React는 기본적으로 SPA(single page application)로 html, css, javascript로 변환하여 빌드한다는 의미

❓변환하는 과정을 조금 더 자세히 찾아보자면?

1️⃣ 어플리케이션 번들링 & 최적화 진행

  • react 코드 (.jsx, .tsx) → javascript로 변환 (=컴파일 & 번들링)
  • webpack으로 의존성과 자바스크립트 모듈을 하나의 파일 또는 여러 파일로 병합
  • 필요하지 않은 코드 제거
  • webpack은 번들링하는 도구이며, react-script에 들어가 있어서 이것만 있으면 됨, 다만 의존하는 webpack 버전, 관련 패키지는 yarn.lock에서 확인 가능
  • 코드 압축 + 난독화 → 파일 크기 최소화

2️⃣ HTML 파일 생성

  • 최종적으로 SPA로 동작하기 위한 기본 HTML 파일(index.html) 생성
  • 이 html에 번들링된 javascript 파일