분류 전체보기
[CSS] flex자식 요소인 경우, sticky가 안먹힐때
tailwind가 적용된 게시글입니다. 하지만 tailwind 모르셔도 쉽게 유추 가능합니다. ❌ 문제 코드 위 코드에서 aside태그의 sticky가 정상적으로 먹히지 않았다. 🔍 원인 flex는 기본적으로 `align-items: stretch`이 적용된다. align-items: stretch란? flex내부의 아이템들을 수직으로 쭉~ 늘어지게 하는 것이다. sticky는 부모영역 내에서 본인의 위치가 고정되는 것인데, flex 의 align-items: stretch로 본인 영역 과 부모영역의 높이가 같아진 것이다. 그래서 정상적으로 작동하지 않는 것. 🍀 해결 이를 해결하기 위해서는 해당 자식요소는 부모 flex 의 `align-items: stretch`가 적용되지 않도록 해야한다. 이때 필요..
[React/antd] react-hook-form의 reset() 함수 작동하지 않을때
혹시 antd form을 사용 중이라면 이 글에서 답을 찾을 수 있다. 아니라면 다른 글로.. bye ❌ 문제 상황 게시글이 작성완료되었을때, 게시글 작성 textarea의 값이 초기화되도록 한다. 하지만, react-hook-form에서 제공하는 reset() 함수가 작동하지 않음 😅 문제 코드 import { InboxOutlined, UploadOutlined } from '@ant-design/icons'; import { Button, Form, Input, Space, Upload } from 'antd'; import { useDispatch, useSelector } from 'react-redux'; import { addPostRequest } from '../reducers/post'..
[VSC] 💅 Prettier 확장프로그램으로 저장할때마다 코드 정리하기 / vscode prettier auto save 작동하지 않을 때
해당 글은 퍼블리셔, 디자이너들을 위해 package와 별다른 설정 없이 확장프로그램으로만 작동합니다. 개발자분은 기존에 사용하시던 eslint규칙과 prettier을 하셔도 무관합니다. 뭐든 이쁜게 최고다. 코드도 이쁘게 정리되어 있어야지 눈에 확 들어오고, 유지보수에도 큰 영향을 차지한다. 오늘은 코드를 '저장할때마다 보기 좋게 정리되도록' 할 것이다. 1. 확장프로그램 Prettier 설치 좌측 메뉴들 중 블록 아이콘을 클릭해 Prettier을 설치해 준다. 2. Setting변경 좌측 하단 톱니바퀴 아이콘을 눌러 Setting을 켜준다. 2-1. Default Formatter 설정 검색창에 Default Formatter을 쳐서 기존 Default Formatter > none을 Pretti..
[카페24] Cafe24에디터에서 탈출하기 :: vscode로 cafe코드 원격 수정하기
카페 24에서 제공하는 Cafe24 editor는 정말 화난다. 아주 화가 많이. 잔뜩. 🤦♂️ 전체 파일 검색이 믿음이 안감, css하나 찾으려면 모든 파일 열어서 찾아야 함 파일 내 검색이 정상적으로 작동 안 함 (find in file not working) 파일 형식 제대로 검사 안해줌 (not eslint) 코드 재정렬 그런거 없다. (beautify not working) 위에 있는게 모두 가능한, 개발툴로 cafe원격 수정하는 방법을 공유한다. 사람은 도구(IDE)를 써야 한다. ⚠️ 주의할 점 카페24 에디터와 달리 코드 변경에 대한 history를 따로 저장하지 않는다. 형상관리를 원한다면 git을 공부하자. 아니면 신중하게 수정하자. 오타 하나로 고장날수도 있으니까.. (사실 이건 카..
[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