분류 전체보기
[React/Tailwind] 🌲 tailwind 변수 className로 css적용 안될 때 / 다이나믹 값 (tailwind 트리쉐이킹)
🤦♂️ 문제상황 tailwind 사용중, class를 변수로 넣었는데 class는 정상적으로 render되었지만, css가 적용되지 않았다. isUser 에 따라 top값이 다르게 계산되어 출력되길 원함 ✅ 해결 기본적으로 Tailwind는 화면에서 사용한다고 인식되는 class의 css를 랜더한다. 이것이 tailwind의 tree-shaking기능이다. (관련링크) 즉, Tailwind는 top-[117px]을 인식하지 못했다는 의미 다이나믹 class를 Tailwind가 올바르게 인식하게 하기 위해선 몇가지 규칙을 지켜야 한다. (관련 링크) 1. class명을 온전히 리턴값으로 가져야 한다. ❌ 문자열 연결을 통해 클래스를 만들지 않는다. ✅ 완전한 클래스 이름을 동적으로 만든다. 2. 임의 값..
[Javascript] 🍪 Remove Cookie not working : 쿠키가 삭제되지 않을 때
🚨 문제 상황 react url을 작성해서 접속한 페이지에서 Vanilla Javascript로 작상한 remove cookie가 작동되지 않음 그런데 또 다른데서는 문제없이 됨..🤦♂️ //useCookieStorage.ts export const useCookieStorage = { setCookie: (name: string, value: string, exp: number) => { let date = new Date(); date.setTime(date.getTime() + exp * 24 * 60 * 60 * 1000); document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/'; }, getCooki..
[React] 🧭 Router useMatch 사용법 - component에서 router path형식 비교하기
react-router-dom 버전 6에서는 matchPath 함수가 제거되었다. 대신, 매치 정보를 얻기 위해 useMatch 훅을 사용할 수 있다. useMatch 훅은 현재 경로와 지정된 경로 패턴을 비교하여 매치 여부를 확인하고, 매치된 정보를 반환한다. 사용법 import { useLocation, useMatch } from 'react-router-dom'; function MyComponent() { const location = useLocation(); const match = useMatch('/myroute'); useEffect(() => { const routePath = match ? match.path : ''; console.log(routePath); // path pro..
[React/Recoil] ⚓️ useResetRecoilState 사용시, hook 에러
발생오류 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the 문제 : useResetRecoilState를 함수에서 바로 실행시켰더니 "Invalid hook call" 문제 발생 원인 : useResetRecoilState는 hook이다. hook은 function component 내부에서만 선언 가능하다. 하지만, clearLogin이라는 함수에서 hook을 실행시켰기에 오류 발생. 해결 : function component 내부에서 useResetRecoilState를 실행시키고, 이를 다른 변수에 할당한다..
[React/TypeScript] 구글 소셜 로그인 버튼 커스텀 (solve to custom google login button using idea)
해당 글은 구글 소셜 로그인 설정 방법은 포함하고 있지 않습니다. 설정 후 버튼을 커스텀하는 방법에 대해 작성했습니다. 하지만 코드를 자세히 읽어 보시면 설정 방법도 힌트를 얻어가실 수 있어요. 문제상황 구글 로그인 버튼을 위 이미지처럼 이쁘장~하게 커스텀하고 싶은데 잘 안된다. gsi 개발문서에서 제공하는 'renderButton'메서드로 버튼을 만들면 이렇게 나온다. renderButton으로 특정위치에 iframe이 추가된다. 내가 시도한 방법들 맨 마지막이 성공한건데, 실패한 것들도 읽어보시면 도움이 될 거예요! 1. css로 iframe 내 스타일 수정하기 불가능. 외부 css로 iframe 내 스타일을 적용할 수 없다. 2. gsi 개발문서 다시 읽어보기 불가능. 자유로운 디자인 커스텀이 없다..
[vite-plugin-html-env] AWS빌드 오류 : Cannot be closed: body
html에서 env환경 변수를 사용하기 위해 사용중인 모듈 vite-plugin-html-env gtm을 brower방식으로 추가한다고 head태그에 설치 태그를 넣었는데 aws빌드 오류가 발생했다. Cannot be closed: body gtm 에서 제공하는 설치태그의 위 아래 주석을 지워주면 문제없이 빌드 된다. [error ❌ 주석 제거] [error ❌ 주석 제거] 참고 https://github.com/lxs24sxl/vite-plugin-html-env/issues/26
[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:..