React (3) 썸네일형 리스트형 Slack 클론 코딩 03 [React, Typescript] stopPropagation const Menu: FC = ({ closeButton, style, show, children, onCloseModal }) => { const stopPropagation = useCallback((e) => { e.stopPropagation(); }, []); return ( {closeButton && ×} {children} ); }; HTML에서는 이벤트 버블링으로 인해 자식을 클릭하면 부모까지 click event가 전달됩니다. stopPropagation을 사용해서 자식태그의 이벤트가 부모까지 전달되는 것을 막아줍니다. 부모 태그를 클릭했을 때는 모달창이 닫히게, 하지만 자식 태그를 클릭했을 때는 모달창이 닫히지 않는 방법입니다 Code-Splitting 코.. Slack 클론 코딩 02 [React, Typescript] For Hot Reloading React나 Vue를 사용해서 개발할 때, 새로고침 필요없이 코드를 수정하면 알아서 reload 되게 하는 것을 hot reloading 이라고 합니다. Hot Reloading을 위해서 Webpack 데브서버를 설치해줍니다. npm i webpack-dev-server -D npm i webpack-cli npm i -D @types/webpack-dev-server npm i @pmmmwh/react-refresh-webpack-plugin npm i react-refresh npm i fork-ts-checker-webpack-plugin -D // 버전 에러나서 버전 수정 npm i @types/webpack-dev-server@3.11.1 -D 스위치 안에있는 여.. Slack 클론 코딩 01 [React, Typescript] React와 Typescript를 이용하여 슬랙 클론 코딩을 할 예정입니다. 아래와 같은 목표가 있습니다. - React(+typescript) 웹 개발 - CRA 없이 초기 세팅 - SWR 사용 - Emotion(스타일드 컴포넌트) - Socket.io 실시간 채팅 (+GraphQL) 오늘은 프로젝트 초기 설정을 하였습니다. // 프로젝트 시작 npm init // react install npm i react react-dom // typescript install npm i typescript // typescript와 react 연동 npm i @types/react @types/react-dom // 편한 코딩을 위해 eslint, prettier 설치 및 연동 npm i -D eslint np.. 이전 1 다음
