계정 등록 페이지에서 폼 필드에 값을 입력하고 '저장'버튼을 눌렀더니 'RangeError : Maxmum call stack size exceeded' 라는 에러가 떴다. 보통 재귀함수를 호출할때 발생하는 에러다. 해당 view 코드를 확인해보니 저장버튼을 눌렀을때 모달을 띄워 확인과 취소를 실행하게 하는데, 이때 취소버튼을 눌렀을때 모달이 닫히면서 현재 페이지의 상태를 유지해야한다. const handleRegister = handleSubmit(()=>{ showModal({ type: "default", dimmedColor: "transparent", title: "저장 성공", ..

className을 지정한다음 css를 설정하려고 할때import styles from "./TodoItem.style.scss";import cn from "classnames/bind";이 부분에서 "Cannot find module './TodoItem.style.scss'" 에러가 난 적이 있다. 분명 맞는 경로, 파일명도 잘 맞췄다. 근데 모듈을 찾을 수가 없다? 알고보니 타입스크립트는 .scss 같은 CSS 파일을 JavaScript 모듈로 처리하지 않기 때문에 정의 파일 (.d.ts)을 만들어줘야 한다는 것이다. 그래야 타입스크립트가 .scss 파일을 객체 형태의 모듈로 인식한다. // src/types/style.d.tsdeclare module "*.scss" { const conten..

이벤트가 발생한 요소를 알 수 있는 event.target, event.currentTarget에 대해 알아보자!  e.target.id를 가리켰을때 마케팅 수신 동의 (선택) } id={"marketing"} name={field.name} value={field.value} //선택된 값들의 배열 onClick={(e) => { const isInclude = field.value.includes(e.target.id); // inCludes:배열에 특정 값(e.target.id)이 포함되어 있는지를 확인 field.onChange( isInclud..

포탈..?  포탈하면 메이플 포탈만 생각나는데.. 저번 수업에서 페이지 url에 변화가 없는데 새로운 페이지가 나오는 경우 이럴때 보통 포탈을 사용한다고 배웠었다.그래서 포탈이 대체 무엇일까!하고 알아보게 되었다. 1. React Portal 개념react 공식문서에 따르면 React Portal이란, 부모 컴포넌트의 Dom 계층 구조 바깥에 있는 Dom 노드로 자식을 렌더링하는 최고의 방법을 제공한다고 한다. 리액트의 데이터 흐름은 단방향(부모->자식)인데, portal을 사용하면 상태를 공유받되 자식 요소에서 상위로 UI를 렌더할 수 있다. 일반적으로 생각해보면 어떻게 자식요소에서 부모요소에 UI를 나오게 할 수 있을까..?라는 의문이 드는데,이를 portal이 해결해준다! 즉, 자식 컴포넌트를 부모..