분류 전체보기
cornerstone 관련오류 SharedArrayBuffer is NOT supported in your browser 해결
코너스톤이 로컬에서는 잘 되는데 AWS cloudfront + s3 으로 배포하니까 아래처럼 뜬다. SharedArrayBuffer is NOT supported in your browser see https://developer.chrome.com/blog/enabling-shared-array-buffer/ 알고 보니 AWS 클라우드프론트 설정을 해줘야 하는거였다. 이 오류는 AWS CloudFront와 S3로 배포한 후 브라우저에서 SharedArrayBuffer가 지원되지 않아 발생하는 문제입니다. 이는 CloudFront와 같은 콘텐츠 전송 네트워크(CDN)를 통해 콘텐츠를 제공할 때 적용되는 보안 제한 때문입니다.SharedArrayBuffer는 보안상의 이유로 현대 브라우저에서 안전한..
[React Native] 'adb'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.
https://developer.android.com/tools/releases/platform-tools?hl=ko 에서설치파일을 다운받는다. 다운받고, 압축을 푼다. adb.exe파일의 위치가 중요하다.오른쪽 버튼을 클릭해 '경로로 복사' 를 해준다. 시스템 환경 변수 편집 > 환경 변수 > Path > 편집 을 눌러준다. 새로 만들기 > 아까 복사한 adb.exe 경로를 넣어준다. 다시 npm start, a 버튼을 눌러 에뮬레이터를 실행한다.
localhost에 https 인증서 설치하기 - 리액트 mkcert chocolatey 설치
리액트 PWA를 실행하려면 mkcert 를 설치하라고 하는데.. mkcer를 설치하려면 그전에 먼저 chocolatey 를 설치하라고 한다.. 1. Window Powershell 을 관리자 권한으로 실행한다.2. 아래를 입력한다.$ Get-ExecutionPolicy 결과 화면이 Restricted가 아닐 경우 Set-ExecutionPolicy AllSigned 실행 후 Y 입력 3. 다음 코드를 입력한다.Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072;..
Lighthouse로 성능을 측정하여 좋은 유저 경험 만들기
내가 만든 회사 홈페이지에서 F12를 눌러 데스크탑에서의 성능을 측정해보았다. 성능과 접근성 점수가 낮아서 보완해보고자 했다. Largest contentful Paint가 7.1초나 걸렸다. LCP(Contentful Paint)란? Lighthouse 보고서의 성능 섹션 에서 추적되는 지표 중 하나이다. 각 지표는 페이지 로드 속도의 일부 측면을 포착한다. Tree Map 개선방법 일단은 Footer쪽에 모달들이 그냥 import로 되어 있길래, 변경했다. 변경전 import ContactUsModalKR from '~/components/UI/modals/ContactUsModalKR'; import ContactUsModalEN from '~/components/UI/modals/en/Contac..
useInfiniteQuery 사용하기
import React, { useContext, useEffect, useRef, useState } from 'react'; import { LocalStateContext } from '../../api/LocalStateContext'; import { DownChevronSvg } from '../svgs/ButtonSvg'; import { useInfiniteQuery } from '@tanstack/react-query'; import { useAxiosAuth } from '../../api'; import { Tooltip as ReactTooltip } from 'react-tooltip'; const ImgSlide = ({ openState, setOpenState }: any) ..
next-auth CredentialsProvider refreshToken rotation axios interceptor로 리프레시토큰 다시 받기
한 일주일을 헤매고 드디어 해낸 기록. 환경 : next-auth : ^4.10.3 사용 next-auth의 CredentialsProvider로 로그인 시도. /* eslint-disable */ import axios from 'axios'; import NextAuth from 'next-auth'; import CredentialsProvider from 'next-auth/providers/credentials'; const createOptions = (req) => ({ providers: [ CredentialsProvider({ name: 'Credentials', credentials: { userEmail: {label: 'Email', type: 'text', placeholder:..
리액트 스크롤 비디오 자동재생
리액트에서 스크롤 여부에 따라서 video가 자동재생 되도록 해야 했다. 나는 scrollevent를 사용해 autoplay속성을 setAttruibute로 적용해봤으나, 코드에는 autoplay속성이 들어갔는데 정작 재생이 안됬다. 스택오버플로와 코드박스를 참고하여 해결했다. import React, { useEffect, useRef } from "react"; import "./styles.css"; const App = () => { const videoRef = useRef(null); useEffect(() => { let options = { rootMargin: "0px", threshold: [0.25, 0.75] }; let handlePlay = (entries, observer) =..
카페24 document.querySelector 안될때
왜인지 아래 속성이 두개 다 되지 않았다. function close(){ document.querySelector(".modal").classList.add("hidden"); document.querySelector(".modal").style.display("none"); }; 해결한 방법은 이렇다. 먼저 변수로 선언을 해주고, 속성을 더하는 식으로 했다. function ex() { let elem = document.querySelector('.modal'); elem.classList.add("hidden"); };
