자주 쓰이는 컴포넌트들을 직접 구현하고, 그 원리를 분석하는 시간을 가지려고 한다.그 첫번째로 모달창을 구현해보았다.전체 코드는 글의 맨 아래부분에 작성해두었다. - 기본적인 모달 구현- 화면 외곽을 누르면 닫히도록 처리 type ModalProps = { isOpen: boolean; onClose: () => void; children: ReactNode;} 모달에 전달될 프롭스들의 타입을 선언해준다. export const Modal = ({ isOpen, onClose, children}: ModalProps) => { // 코드 내용 작성} 메인 함수에 프롭스를 타입과 함께 전달한다. useEffect(() => { const handleEsc = (e: KeyboardEvent..
TypeScript
25년도 버전으로 프로젝트 기본 세팅법을 기록해두려고 한다.vite, react, typescript 를 기본으로 해서 공통적으로 쓰이는 라이브러리에 대해서 추가했다. 1. 웹스톰으로 vite, react, typeScript 로 프로젝트 생성 2. Yarn berry 사용하기rm -rf node_modulesrm -rf package.lock.jsonyarn set version berryyarn install 3. zero-install 설정 (.gitignore 맨 아래에 코드 복붙).yarn/*!.yarn/cache!.yarn/patches!.yarn/plugins!.yarn/releases!.yarn/sdks!.yarn/versions 4. 웹스톰 설정 들어가서 package manger..
