Tailwind CSS 에서 동적으로 스타일 할당하기
·
개발/트러블슈팅
문제 상황 위의 사진에 적힌 타이틀을 컴포넌트로 사용해서 여러 페이지에 쓰려고 한다.interface ITitle { title: string; color: string;}const Title = ({ title, color }: ITitle) => { return {title};};export default Title; 이렇게 동적으로 props 내려서 color 설정해야지 ~ 했는데 웬걸 적용이 안된다. props가 안들어오나? 그건 또 아니다. 개발자 도구로 확인해보면 스타일이 들어온걸 확인할 수 있다. 흠.......뭘까알아보기tailwind dynamic classname 라는 키워드로 구글에 검색알고보니 테일윈드 공식문서에도 나와있는 내용이였다. https://tailwindcss.com..
form 태그에서 enter 제출 방지 (keydown 예외처리)
·
개발/트러블슈팅
문제상황form 태그에서 엔터를 입력하면 form이 제출되는 문제가 있음제출은 버튼을 눌러야 가능하도록 하고 엔터 입력시에는 제출이 안되도록 방지하고 싶음!/**엔터시 폼제출 방지 */export const enterKeyDown = (event) => { if (event.key === "Enter") { event.preventDefault(); // Enter 키의 기본 동작을 막음 }};그때는 이렇게  event.preventDefault() 를 추가해주면 된다. 여기서 발생한 추가적인 문제form 태그 안에 있는 textarea에도 onkeyDown이 적용되어 textarea에서 줄바꿈(enter)가 먹히지 않는 오류가 생겼다..//폼태그에 keydown이벤트에 걸었더니 //폼 안에있는..
react 리캡챠 오류시 초기화 하기 (react-google-recaptcha 사용)
·
개발/트러블슈팅
문제상황1. 폼 데이터 전체를 작성한 후 마지막에 리캡챠 검사 => 리캡챠 토큰을 폼 데이터에 같이 실어 서버 보낸다.2. 이때 서버에서 모종의 이유로 오류가 나면, 리캡챠가 체크된 채로 남아있어 재시도를 진행할 수 없다.- 리캡챠 유효시간 만료, 로봇으로 판단 등 리캡챠 자체에서 만료시킨 경우는 재시도가 가능하다.3. 이미 검증된 토큰은 재사용할 수 없어, 서버에서 리캡챠 오류가 발생한다.위와 같은 특정 상황에서 리캡챠 토큰이 유효하지 않다고 판단되었을때 재시도 할 수 있게 만들어야 한다. 해결방법*react-google-recaptcha, formik(form 라이브러리) 사용중 우선 useRef를 사용해 리캡챠 선택한다. /**리캡챠 설정 */const recaptchaRef = useRef(); ..
git 오류, src refspec main does not match any 에러
·
개발/트러블슈팅
src refspec main does not match any저장소를 새로 만든 후 Git push -u origin main을 하니 터미널에 다음과 같은 오류가 발생했다.src refspec main does not match any"src refspec main does not match any" 오류는 일반적으로 Git 저장소에서 아무런 커밋이나 브랜치가 없을 때 발생합니다.주로 초기 커밋 전이거나 아직 아무런 작업을 하지 않은 상태에서 발생한다.해결법git commit -m "커밋 텍스트"git push -u origin main해결은 간단하다. 커밋을 생성하면 된다.
새창에서 부모창 상태 변경 (window.opener로 함수 실행하기)
·
개발/트러블슈팅
구현 목표1. 계정 설정 페이지에서 연동하기 버튼 클릭시 새창을 열어 소셜 로그인을 진행2. 외부 사이트가 열리고 소셜 로그인에 성공하면 열린 새창에서 기존 도메인 주소로 리다이렉트3. window.close()를 이용하여 창 닫음4. 창이 닫히면서 기존에 '연동하기' 버튼이 '연동해제' 버튼으로 바뀌어야함 문제 상황연동하기 버튼은 계정 연동이 완료된 후에 연동해제 버튼으로 값이 바뀌어야함. 이 바뀐다는 기준은 state값으로 관리함. 그래서 리다이렉트된 주소에서 리코일을 이용해 state 값을 바꿔줌 (둘은 부모 자식 관계가 아니기에 props로 해결할 수 없음)연동해제일 경우에는, 기존 창에서 해제만 하기 때문에 상태값이 잘 바꿔짐. 하지만 연동하기 버튼은 새창을 열어서 상태값을 바꾸기 때문에 새창에..