개발/트러블슈팅

문제 상황 위의 사진에 적힌 타이틀을 컴포넌트로 사용해서 여러 페이지에 쓰려고 한다.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 태그에서 엔터를 입력하면 form이 제출되는 문제가 있음제출은 버튼을 눌러야 가능하도록 하고 엔터 입력시에는 제출이 안되도록 방지하고 싶음!/**엔터시 폼제출 방지 */export const enterKeyDown = (event) => { if (event.key === "Enter") { event.preventDefault(); // Enter 키의 기본 동작을 막음 }};그때는 이렇게  event.preventDefault() 를 추가해주면 된다. 여기서 발생한 추가적인 문제form 태그 안에 있는 textarea에도 onkeyDown이 적용되어 textarea에서 줄바꿈(enter)가 먹히지 않는 오류가 생겼다..//폼태그에 keydown이벤트에 걸었더니 //폼 안에있는..

문제상황1. 폼 데이터 전체를 작성한 후 마지막에 리캡챠 검사 => 리캡챠 토큰을 폼 데이터에 같이 실어 서버 보낸다.2. 이때 서버에서 모종의 이유로 오류가 나면, 리캡챠가 체크된 채로 남아있어 재시도를 진행할 수 없다.- 리캡챠 유효시간 만료, 로봇으로 판단 등 리캡챠 자체에서 만료시킨 경우는 재시도가 가능하다.3. 이미 검증된 토큰은 재사용할 수 없어, 서버에서 리캡챠 오류가 발생한다.위와 같은 특정 상황에서 리캡챠 토큰이 유효하지 않다고 판단되었을때 재시도 할 수 있게 만들어야 한다. 해결방법*react-google-recaptcha, formik(form 라이브러리) 사용중 우선 useRef를 사용해 리캡챠 선택한다. /**리캡챠 설정 */const recaptchaRef = useRef(); ..

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해결은 간단하다. 커밋을 생성하면 된다.

구현 목표1. 계정 설정 페이지에서 연동하기 버튼 클릭시 새창을 열어 소셜 로그인을 진행2. 외부 사이트가 열리고 소셜 로그인에 성공하면 열린 새창에서 기존 도메인 주소로 리다이렉트3. window.close()를 이용하여 창 닫음4. 창이 닫히면서 기존에 '연동하기' 버튼이 '연동해제' 버튼으로 바뀌어야함 문제 상황연동하기 버튼은 계정 연동이 완료된 후에 연동해제 버튼으로 값이 바뀌어야함. 이 바뀐다는 기준은 state값으로 관리함. 그래서 리다이렉트된 주소에서 리코일을 이용해 state 값을 바꿔줌 (둘은 부모 자식 관계가 아니기에 props로 해결할 수 없음)연동해제일 경우에는, 기존 창에서 해제만 하기 때문에 상태값이 잘 바꿔짐. 하지만 연동하기 버튼은 새창을 열어서 상태값을 바꾸기 때문에 새창에..