https://developer.android.com/tools/releases/platform-tools?hl=ko 에서설치파일을 다운받는다. 다운받고, 압축을 푼다. adb.exe파일의 위치가 중요하다.오른쪽 버튼을 클릭해 '경로로 복사' 를 해준다. 시스템 환경 변수 편집 > 환경 변수 > Path > 편집 을 눌러준다. 새로 만들기 > 아까 복사한 adb.exe 경로를 넣어준다. 다시 npm start, a 버튼을 눌러 에뮬레이터를 실행한다.
리액트 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;..
내가 만든 회사 홈페이지에서 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..
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 : ^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) =..
왜인지 아래 속성이 두개 다 되지 않았다. 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"); };
MUI tooltip을 커스텀하여 사용해보자. 보통 에 를 감싸 사용하는데, 나는 Routes에 감쌌다. MUI Tooltip에 arrow 부분이 default값으로 설정되어 있어서 동떨어져 있었다. styleOverrides부분에 arrow &::before를 추가했다. 전체 코드 Routers.tsx import { createTheme, ThemeProvider } from '@mui/material'; const Routers = () => { const theme = createTheme({ components: { MuiTooltip: { styleOverrides: { arrow: { '&::before': { color: 'rgba(0, 0, 0, 0.6)', }, }, tooltip: {..
Nextjs에서 [slug].tsx페이지에서 href 경로가 잘못 나오는 문제가 있었다. 이 경로를 통해서 들어와지는 newsview라는 페이지가 있다. 파일 구조는 이러하다. 근데 [slug]페이지 (newsview페이지)에서 href 경로가 이상하다. 나는 /newsview/페이지를 넣지 않았는데 왠...???? 결론적으로는 `/${ 내용 }` 으로 넣어야 경로가 바르게 나온다. `/${item.link}`
