짧은코딩

배포 -webpack-bundle-analyzer npm i webpack-bundle-analyzer npm i -D @types/webpack-bundle-analyzer 이걸 깔아서 사용한다. 프론트엔드 개발자라면 webpack에 bundle-analyzer을 까는게 좋다. 왜냐하면 용량을 확인할 수 있기 때문이다. 그래서 배포 전 압축했을 때 용량을 확인할 수 있다. 이것은 개발 모드와 배포 모드로 나눠서 사용해야 한다. if (isDevelopment && config.plugins) { config.plugins.push(new webpack.HotModuleReplacementPlugin()); config.plugins.push(new ReactRefreshWebpackPlugin()); ..

SWR Devtools SWR은 디버깅이 쉽지 않다. 따라서 유용한 페키지를 설치해야한다. npm i @jjordy/swr-devtools 이렇게 설치할 수 있다. -공식 문서 https://www.npmjs.com/package/@jjordy/swr-devtools @jjordy/swr-devtools Devtools for SWR. Latest version: 2.2.0, last published: 9 months ago. Start using @jjordy/swr-devtools in your project by running `npm i @jjordy/swr-devtools`. There are no other projects in the npm registry using @jjordy/swr-..

안 읽은 메시지 수 구하기 안 읽은 메시지 수를 구하는 것은 생각보다 어렵다. 내가 어디까지 읽었는지와 그 이후로 몇 개가 쌓였는지도 알아야 한다. 얼마나 쌓였는지는 API로 알 수 있다. 어디까지 읽었는지는 어떤 채널이나 디엠에 들어갔을 때, 어디까지 읽었는지 저장을 해야한다. 또 어디에 저장할지도 생각해야한다. 크게 DB에 저장할 수 있고 아니면 로컬 스토리지에 저장할 수 있다. 이걸 DB에 저장하면 서버가 부담스러울 수도 있다. 따라서 로컬 스토리지에 저장하는 방식을 사용하겠다. 따라서 EachChannel, EachDM을 만들어서 하나하나 컴포넌트로 만들었다. 채널이나 DM 클릭했을 때를 기록해주면 된다. -ChannelList {!channelCollapse && channelData?.map(..

이미지 업로드 onDragOver 하는 동안 사진을 끌고 다닌다. onDrop는 사진을 놓는다. 따라서 onDragOver는 계속 호출이된다. {dragOver && 업로드!} -onDragOver const onDragOver = useCallback((e: any) => { e.preventDefault(); console.log(e); setDragOver(true); }, []); 이렇게 해서 '업로드!'를 화면에 띄워준다. -OnDrop const onDrop = useCallback( (e: any) => { e.preventDefault(); console.log(e); const formData = new FormData(); //dataTransfer 안에 이미지의 정보가 있다. 브라우저..

가상 스크롤 바 npm install react-custom-scrollbars --save npm i --save-dev @types/react-custom-scrollbars 이렇게 설치가 된다. {/*autoHide는 가만히 있으면 스크롤이 사라진다.*/} {chatData?.map((chat) => ( ))} 이렇게 사용이 가능하다. Scrollbars는 div 역할도 해준다. 날짜 라이브러리(DAY.JS) npm i dayjs 이렇게 설치하면된다. {dayjs(data.createdAt).format('h:mm A')} 그리고 이렇게 사용하면 시간만 나온다. 해시 태그 라이브러리 npm i -D @types/react-mentions 이렇게 설치한다. {highlightedDisplay} ); ..

webSocket 웹소켓은 실시간으로 서버와 데이터를 주고 받을 때 사용한다. 이전까지는 프로트에서 요청을 보내고 서버에서 답을 주는 형식인 단방향 통신이었다. 하지만 웹소켓은 양방향 통신이다. npm i socket.io-client@2 이렇게 설치하면 된다. 소켓을 컴포넌트와 서버와 연결하면 연결이 끊기지 않고 사용할 수 있다. 하지만 반대로 생각하면 연결된 컴포넌트가 사라지면 소켓 연결도 끊긴다. 따라서 공통된 컴포넌트에 연결해야 한다. 화면이 없고 로직만 있는 경우에는 hooks 파일에다가 만들면된다. 하지만 화면이 들어가도 hooks에 사용할 수 있다. -hooks/useSocket.ts hook폴더에 새 파일을 만든다. npm i -D @types/socket.io-client@1.4.35 그..

강의는 "섹션3. DM 보내기"까지 들었다. 어느 순간부터 그냥 코드를 따라치는 것 처럼 느껴졌다. 그래서 페이지 별로 혹은 코드별로 분석하면서 정리해보려고 한다. 정리를 할 때 이미 위 페이지에서 다룬 내용은 굳이 중복해서 다루지 않으려고 한다. 그리고 주로 이해가 되지 않는 부분을 정리했다. APP/index.tsx -코드 스플리팅 먼역 10개의 파일을 import하는데 막상 그 중에서 2개의 파일만 사용하면 나머지 8개는 사용하지도 않는데 불러온다. 따라서 8개는 import하지 않기 위해서 코드 스플리팅을 한다. const Workspace = loadable(() => import('@layouts/Workspace')); const LogIn = loadable(() => import('@pa..

개발을 하다가 dependency가 빠지면 알려주는 기능이 있으면 좋을 것이다. 그것을 위한 설치 방법을 기록하려고 한다. 참고로 dependency는 외부에서 쓰이면 무조건 넣어주는 것이 좋다. npm i -D eslint-config-react-app eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react 이렇게 5개를 깔아줘야 한다. -.eslintrc { "extends": ["plugin:prettier/recommended", "react-app"] } 그리고 .eslintrc 파일에다가 "react-app"을 추가해야 한다. 이렇게 만들면 dependency를 안써줬을 때 에러는 아니지만 노란..

input 리액트에서 input이 들어가면 웬만하면 컴포넌트로 빼는 것이 좋다. 안그러면 리렌더링이 너무 빈번하게 일어난다. toast 만약 어떤 것을 하다가 에러가 발생하면 사용자들에게 알려주기 위해서 toast를 사용한다. toast.error(error.response?.data, { position: 'bottom-center' }); 이 코드를 axios의 catch에 넣으면 된다. Route 첫번째 코드는 파라미터가 있는 주소이고 두번째는 아니다. 이렇게 하면 무조건 slack가 된다. 따라서 파라미터가 있는 주소를 밑에 적어줘야 한다. NavLink 그냥 Link와 비슷하다. 다른 점은 activeClassName을 줄 수 있다. 그래서 만약에 지금 주소와 링크의 주소가 같으면 activeC..

공통된 레이아웃을 사용할 때 공통된 레이아웃을 사용하기 위해서는 2가지 방법이 있다. 방법 1 -workspace test Sleact MenuScroll Chats {children} 이렇게 {children}을 레이아웃 부분에 넣는다. -컴포넌트 const Channel = () => { return ( {/* div 태그가 Workspace의 children이 된다. 즉 다른 컴포넌트 안에 넣은 jsx는 childre이 된다. */} 로그인하신 것을 축하드려요! ); }; 이렇게 각 컴포넌트에 가서 Workspace를 감싸면 div가 children 역할을 하게 된다. 방법2 공통 레이아웃인 Workspace 파일에 하면된다. const Channel = loadable(() => import('@..