🤔 어떤 에러가 발생하였을까? SignUpPC라는 부모 컴포넌트 안에 SignUpButton라는 자식 컴포넌트가 있다. 회원가입 버튼 클릭 시, SignUpButton 컴포넌트 안에서 Naver maps Geocoding을 통한 경도, 위도 정보 가져오는 기능을 구현하던 도중, 다음과 같은 에러가 발생하였다. 에러 메시지 Uncaught Error: A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition. at thro..

서론 회원가입 시 약관 동의, 사용자 유저 정보 등에 관한 state 값을 관리해야 하는 상황이 있다. [ 관리해야 할 상태 값들 ] 더보기 약관 동의 전체 동의 여부 이용 약관 동의 여부 개인정보 수집 및 이용 동의 여부 마케팅 수신 정보 동의 여부 사용자 유저 정보 휴대폰 본인인증 여부 사용자 정보 값 사용자 이름 값 사용자 생년 값 사용자 생월 값 사용자 생일 값 사용자 휴대폰 번호 값 사용자 아이디 값 사용자 닉네임 값 사용자 비밀번호 값 사용자 비밀번호 확인 값 사용자 사업자 여부 값 사용자 휴대폰 번호(거래용) 값 사용자 전화번호 값 사용자 이메일 값 사용자 도·시 값 사용자 시·군·구 값 사용자 상세주소 값 사용자 회사명 값 사용자 직급/직책 값 사용자 주요 사업 분야 값 사용자 정보 값 유..

마이그레이션 하는 방법 dependencies 설치 아래의 라이브러리를 설치하자. Vite @vitejs/plugin-react vite-tsconfig-paths vite-plugin-svgr npm install --save-dev vite @vitejs/plugin-react vite-tsconfig-paths vite-plugin-svgr vite-tsconfig-paths 설치하는 이유 Vite에 tsconfig 파일에서 절대 경로를 해결하는 방법을 알려주기 위해 vite-tsconfig-paths가 필요하다. 이렇게 하면 다음과 같이 모듈을 가져올 수 있다. // before import MyButton from '../../../components' // after import MyButto..

오늘은 React Vite TypeScript 환경에서 SPA 프로젝트 세팅하는 방법에 대한 이야기를 해보려고 한다. (feat. chatGBT) 내가 하고 싶은 것 현재 레거시 프로젝트는 Creat-React-App 으로 SPA 프로젝트가 만들어져 있다. CRA는 번들러로 Webpack 을 사용하기 때문에 빌드 시 속도가 상대적으로 esbuild 보다 느리다. 그렇기 때문에 React Vite 환경에서 SPA 프로젝트로 마이그레이션을 시도하였다. (이참에 JavaScript 도 TypeScript로 마이그레이션!) 방법 React Vite로 SPA를 만드는 경우가 많지 않나 보다... 구글링을 해도 내가 원하는 코드를 찾기가 어려웠다 ^_ㅜ chatGBT에게 물어봤더니 아주 친절하게 답변을 해주었다. ..

useMemo와 useCallback React에서 제공하는 Hook API 중 하나이다. 컴포넌트의 렌더링 성능을 최적화하는 역할을 한다. 컴포넌트는 언제 렌더링 될까요? 자신의 state가 변경되거나, 부모에게서 받은 props가 변경 되었을 때마다 다시 렌더링 된다. 심지어 자식 컴포넌트에서 렌더링 최적화를 위한 별도의 코드를 추가하지 않으면, 부모에게서 받는 props가 변경되지 않았더라도 다시 리렌더링 된다. 예시 코드 https://codesandbox.io/s/angry-bash-ovd8pk?file=/src/App.js angry-bash-ovd8pk - CodeSandbox angry-bash-ovd8pk by leehwarang using react, react-dom, react-sc..

🎨 구현하고 싶은 것 텍스트가 2줄이 넘어가면 말줄임표를 붙이고, 마우스 호버 시 Tool Tip으로 전체 텍스트가 보여지길 원한다. ✨ 구현 방법 두 줄 이상일 때 말 줄임표 구현하기 https://devjhs.tistory.com/602 [css3] text-overflow - 넘치는 텍스트 표기 1. 개념 text-overflow - 넘치는 텍스트 표기 text-overflow는 white-space를 이용해 줄 바꿈을 하지 않을 때 넘치는 텍스트 처리를 어떻게 할 것인지를 처리하는 속성 속성 설명 clip 넘치는 텍스트를 자름 ell devjhs.tistory.com 위의 글을 살펴보면 white-space: no-wrap 일 때만 말줄임표가 가능하다고 명시되어 있다. 하지만 우리는 개발을 하다보..

react-daum-postcode 사용 방법 설치 npm install react-daum-postcode import import DaumPostcode from "react-daum-postcode"; 주소 검색 완료 함수 생성 onComplete 함수에 주소 검색 완료 시 실행시킬 로직을 바인딩한다. Address 타입의 주소(data)를 인자로 받을 수 있다. (Address 타입은 react-daum-postcode에서 import 한다.) 완료 함수 실행 시 주소창은 자동으로 사라진다. data 예시 사용 예시 (with Antd 모달) import DaumPostcode from "react-daum-postcode"; import { Modal, Button } from "antd"; /..

HTML과 HTML5의 차이점 HTML(Hyper Text Markup Language) HTML5는 HTML 표준의 다섯번째 업그레이드 버전 HTML5 멀티미디어 기능 (3D, 오디오, 영상 등) Active X 설치 없이도 사용 가능 웹 저장 기능 웹 사이트 사용자의 정보를 PC에 저장할 수 있는 매커니즘 제공 (기존 쿠키 및 세션의 한계 해소) 웹 소켓 기능 위치(Geolocation) 기능 CSS3 GET과 POST의 차이점 GET 서버에 정볼르 조회하기 위해 사용되는 메소드 ex) 게시판 글 조회 서버에 정보를 요청할 때, 쿼리스트링을 통해 데이터 전송 URL 주소에 ?로 주소로 데이터를 전송 길이 제한이 있음. 보안에 중요한 데이터를 담아서 보내면 안 됨. POST 서버에 데이터를 생성 또는 ..