Javascript
[vite] ⚡️ html에 env환경 변수 사용하기 : vite-plugin-html-env
- vite에서 html에 env환경 변수 사용하기 - 빌드환경에 따라 env 환경변수 적용하기 - vite-plugin-html-env 사용법 ⛳️ 하고자 하는 것 vite환경에서 html에 빌드환경에 따라 env환경변수가 다르게 나왔으면 좋겠다. 🃏 선택지 1. vite 4.2 업데이트 🔗 4.2 이상부터는 vite에서 html출력을 지원해준다고 한다. 마이그레이션이 가능한 상황이라면 이것도 좋은 것 같다. v3로 부터의 마이그레이션 가이드 2. 모듈 / vite-plugin-html 🔗 가장 많은 사람들이 받아서 사용하는 모듈이다. 검색해보았을 때 가장 참고할 레퍼런스가 많다. 가장 최근 업데이트는 1년전 but, 설치과정에서 막히는 부분이 있어서 나는 사용하지 않았다. 3. 모듈 / vite-pl..
[GSI] The given origin is not allowed for the given client ID 에러
포트 있는 거 없는거 두개 모두 해줘야 합니다! When you perform local tests or development, you must add both http://localhost and http://localhost: to the Authorized JavaScript origins box. The Referrer-Policy header must also be set to no-referrer-when-downgrade when using http and localhost. 공식문서 https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid#get_your_google_api_client_id 참고 https:..
[GSI] gsi_logger:failed to render button because there is no parent or options set. 에러 해결
구글 로그인 버튼 render에서 오류가 나는 것이다. 버튼이 render되어야 하는 타겟이 있는 곳에서만 실행되도록 if문을 걸어주던가 하자. if (pathname === PATH.SIGN_IN) { //해당 경로에서만 document.getElementById('google-login-button')가 가능하다. window.google?.accounts.id.renderButton( document.getElementById('google-login-button') as HTMLElement, { type: 'standard', theme: 'outline', text: 'signin_with', width: '416px', shape: 'square', }, ); }
[React/TypeScript] Property 'data' does not exist on type : REST API 로 받아온 Response Data 타입 오류
문제 상황 useEffect(() => { GetReportList().then(({ data }) => { console.log(data); setReportList(data.data.reports); }); }, []); 해결방법 Response 로 받아온 Data의 타입을 몰라서 발생하는 이슈. useEffect(() => { GetReportList().then(({ data }: AxiosResponse) => { console.log(data); setReportList(data.data.reports); }); }, []); 이렇게 해주면 오류가 사라진다.
[Javascript] 전화번호 가운데 마스킹
Bad way👎 // 전화번호 가운데 마스킹 처리 const maskingPhone = (phone: string) => { return phone .replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2-$3') .split('-') .reduce((pre, cur, idx) => (idx === 1 ? pre + '****' : pre + cur), ''); }; 간단하고 아주~ 쉽게 만들었는데, 정규식을 이용해 아주 맛깔나게 줄이는 법을 동료분이 제안해주셨다. Better way👍 // 전화번호 가운데 마스킹 처리 const maskingPhone = (phone: string) => { return phone .replace(/(\d{3})(\d{4})(\d{4})/, '$1-$2..
[yarn berry] Cannot find module 'react/jsx-runtime' or its corresponding type declarations. 오류 yarn berry 해결
Cannot find module 'react/jsx-runtime' or its corresponding type declarations. 지긋지긋한 놈 터미널에서 오류도 안잡혀서 삽질을 참 많이 했다. 잘 깔린 module을 인식 못하는 것이기에 .yarn > cache 폴더를 지우고 다시 yarn install 해주자 에디터를 껏다 키면 indexing되면서 잘 된다. 만약 이게 안 된다면.. 함께 고민해보자 화이팅. 참고 블로그 더보기 https://kimtaekju-study.tistory.com/374 [React] Can't not find module 에러 발생시 대처 방법 ./node_modules/react-sortablejs/dist/index.es.jsCannot find modul..
자바스크립트 3e3의미
과학적 표기법이며, "의 거듭 제곱"을 의미 3e+3 3 * Math.pow(10, 3); // 3000 3e+2 3 * Math.pow(10, 2); // 300 3e3 3 * Math.pow(10, 3); // 3000 3e2 3 * Math.pow(10, 2); // 300 3e4 3 * Math.pow(10, 4); // 30000 3e-2 0.03 3e-4 0.0003
[Javascript] 함수앞에 느낌표(특수기호)가 있는 경우 : 자기호출 익명함수
!(function () { //.. }) 위와 같이 함수 앞에 느낌표가 있는 건 어떤 의미인지 알아보자. 간단히 말하자면, 반대되는 값을 리턴해주고 동시에 함수를 즉시 실행한다. 더 자세히 이해하기 위해선 익명 함수, 자기 호출 함수에 대해 이해해야 한다. 본문과는 관련 없지만, 기본 상식으로 모든 함수는 일단 호출이 되면 어떤 것이든 반환한다. 그게 undefined라도 말이다. 익명 함수 이름이 없는 함수. 아래와 같은 형식으로 사용될 수는 없지만, 다른 함수의 매개변수로 쓰일 경우에는 정상 작동한다. 사용할 수 없는 이유는 함수 선언문의 경우 함수 이름을 생략할 수 없기 때문에 에러가 발생한다. function () { //... } 자기 호출 익명 함수 (IIFE) 스스로 실행하는 이름 없는 함..
[프로그래머스 Level1] 완주하지 못한 선수 - 나의 코드, 우수코드(Javascript)
🚨문제 https://programmers.co.kr/learn/courses/30/lessons/42576# 코딩테스트 연습 - 완주하지 못한 선수 수많은 마라톤 선수들이 마라톤에 참여하였습니다. 단 한 명의 선수를 제외하고는 모든 선수가 마라톤을 완주하였습니다. 마라톤에 참여한 선수들의 이름이 담긴 배열 participant와 완주한 선수 programmers.co.kr 🔅예제 이해 출발한 사람 배열과 도착한 사람 배열을 비교하여 결승전에 도착하지 못한 한명이 누구인지 찾아내자 ☺️나의 코드 map(), Object.values(), Object.keys() function solution(participant, completion) { //1,2 const ob = {} participant.map..