킹바구니

[env][vite] env파일 로컬과 운영서버용 구분하기기

원래는 하나의 env파일에 다 때려넣고 빌드할때 로컬 주석처리하고 했는데 번거로워서 손 좀 봤다.  1. 파일 나누기.env.env.development.env.production공통, 로컬, 운영용으로 파일을 나누고공통에는 공통으로 쓸 변수, 로컬과 운영은 각자 쓸 것을 정리하면 된다.  2. 테스트나는 저렇게만 하고 npm run dev, npm run build 하니까 알아서 나눠서 되더라.vite에서 자동으로 구분해서 해준다고 함. 사랑해요 비트

XHR finished loading: GETFetch failed loading: GET왜뜨는거임??  1. f12-console에서 옵션 체크이녀석을 체크하면 로그가 사라진다. 근데 개발자 아닌 사람 컴퓨터 보니까 해제되어있더라. 흠... 그러면 저렇게 보인다는건데...일단 나중에 찾아봐야되겠음

1. 설치npm i vite-plugin-remove-console  2. vite.config.ts에 추가export default defineConfig({ plugins: [{ ...react(), ...removeConsole({ includes: ["log", "warn", "error", "info", "debug"] }), apply: 'build' }],})빌드할때만 안나오게 처리하고싶어서 vite를 찾아보니 플러그인에 저렇게 쓰면 된다고 함.

열받게 갑자기 자꾸 콘솔창에 나옴. 프로젝트 2개가 있는데 하나는 그래도 안뜨는데 다른(최신) 하나가 자꾸 뜨더라. future옵션에 뭘 막 추가해줘도 안됐는데 드디어 되서 기록함.   1. RouterProvide에 future 추가  2. createBrowserRouter에 future 옵션 추가const options = { future: { v7_relativeSplatPath: true, v7_fetcherPersist: true, v7_normalizeFormMethod: true, v7_partialHydration: true, v7_skipActionErrorRevalidation: true, },}export const router = createBrows..

원래 예시에는 my-app같은 폴더명을 쓰게 되어있는데 그거 말고 그냥 현재 폴더에 생성하고 싶다면 이렇게 쓰면 된다. 1. 뒤에 경로 추가npm create vite@latest ./이렇게 하고 실행하면 된다.

갑자기 한영키가 안되고 윈도우창만 엄청 뜨더라;;; 그럼 윈도우키 눌렀을 때 한영키라도 되나 싶었지만 그냥 윈도우창만 떴음. 하 이걸 어쩐다 껐다 켜도 안되는거 같은데 하다가 발견한거 하나!! 1. 모드 변경키보드 윗쪽에 운영체제 모드 변경 스위치가 ios나 맥으로 되어있는지 확인하고, 윈도우로 바꿔주면 된다.아니 이게 언제 바뀌어있었지;;

inspect.dev라는 프로그램을 깔면 좀 더 편한거 같은데 무료버전은 15분 제한이 걸려있음. 그래서 이것저것 찾다가 성공한 것 기록해둠. 참고한 글 https://sujakjil.tistory.com/145 1. node.js 깔기이 글을 들어왔다면 이정도는 깔려 있을듯. 2. cmd 관리자모드 실행윈도우+x또는시작메뉴-오른쪽 마우스-실행-cmd 3. 한줄씩 입력Set-ExecutionPolicy RemoteSigned -Scope CurrentUseriex (new-object net.webclient).downloadstring('https://get.scoop.sh')하지만 2번째 줄인 scoop이라는걸 설치하는 과정에서 에러가 났음. 안났다면 4번으로 이동하면 됨.나같은 경우 시뻘건 글자로 ..

모바일에서는 터치 관련 이벤트가 click, mouseup 등이 아닌 touchstart, touchend 류로 들어옴. 그래서 이에 맞게 타입 처리를 해줬는데 instanceof로 타입 체크를 하는 도중에 TouchEvent가 아니라고 뱉어버리는 경우가 있음. 원인은- 브라우저 문제- touchstart이벤트인데 이벤트핸들러를 click으로 해버림- 타입 추론을 명시적으로 안해줌 라고 하는데 아니 나 다 제대로 했다고~~~~~~ 아무튼 타입이 뭐든 값은 제대로 나와줬으면 해서 type값을 직접 비교해서 clientX와 같은 좌표를 뽑아내고 있음.const getClientX = (event: MouseEvent | TouchEvent) => { if (event.type == 'touchend') {..

꾹 누르든 어쩌든 그 부분이 퍼렇게 잡히는게 있는데 아래 css를 써주면 된다. 1. css 설정* { -webkit-tap-highlight-color: rgba(0,0,0,0);}

실제로 폰에서 테스트하면서 실시간으로 로그를 보고싶을때가 있음. 이때 쓰는 조흔 방법을 써봄. 1. 해당 사이트 들어감chrome://inspect/#devices저걸 그대로 주소창에 치면 된다. 그리고 usb 케이블과 핸드폰을 연결하면 좀 기다리면 아래와 같이 뭔가가 뜬다.  2. inspect 누름그러면 새로운 창이 뜨는데 아래와 창이 화면과 로그를 볼 수 있음. 이제 핸드폰으로 이것저것 해보면 로그가 찍힘. 단점은 뭔가... 좀 느림. 한창 이거 볼때는 괜찮은데 탭 껐다가 다시 켰다가 하면 뭔가 인식하는데 한참 걸려서 개빡침. 번외) 핸드폰으로 localhost:3000, 8080들어가니까 안뜨는데 어캄?ㅜcmd창 - ipconfig 입력 - IPv4 주소랑 포트를 조합해서 폰으로 접속하면 된다.만..