짧은코딩

Redux 서버에서 데이터 수정을 하면 프론트에서 값이 바뀌고, 프론트에서 데이터 수정을 하면 서버에서 값이 바뀌는 양방향 코딩을 하게되면 문제가 발생할 수 있다. 코드가 좀 복잡해지면 값이 이상하게 꼬일 수 있다. 따라서 Redux를 활용해서 데이터 관리를 쉽게 해줄 수 있다. Redux는 꼭 리액트에서만 사용하는 것은 아니다. 그치만 리액트에서 Redux를 많이 사용한다. -예시 리액트에서 A, B, C 컴포넌트가 있고 A가 제일 위 부모 태그, C가 제일 아래 자식 태그라 하면 state값을 다 따로 관리 해주게된다. 이 state를 다 같이 관리하기 위해서 Redux에 state를 저장하고 쉽게 관리 할 수 있다. 즉 컴포넌트 간의 state를 관리 할 때 사용하면 된다. 만약 컴포넌트 B에서만 ..

기본 설정 강좌에서 Next는 9버전을 사용했다. Next는 import React from 'react'가 있어도 없어도 상관없다. 넥스트는 pages 안에 있는 파일들을 인식해서 코드 스플리팅 된 개별적인 페이지로 만들어준다. 따라서 pages의 이름은 무조건 pages이어야 한다. -package.json "scripts": { "dev": "next" }, dev에 next를 넣어주면 npm run dev를 했을 때 next가 실행된다. 페이지 추가하기 -회원가입 페이지 const Signup = () => { return 회원가입 페이지 }; export default Signup; 만약 회원가입 페이지를 만들고 싶으면 그냥 이렇게 만들면된다. 그리고 url에 /singup을 붙이면 회원가입 페..

Next.js Next.js는 리액트를 기반으로 만들어진 프레임워크이다. 기능이 더 추가 되었지만 프레임워크다 보니까 자유도는 떨어졌다. 그리고 서버 사이드 렌더링(SSR)을 사용한다. 전통적인 SSR 이런식으로 요청을 한다. 이런 방법도 비교적 간단한 방법이다. -단점 사용자는 방문 할 페이지가 1개인데 다른 페이지도 주면 낭비가 될 수 있다. => 코드 스플리팅을 하면 모든 페이지를 불러오지 않아도 되기 때문에 위에서 말한 단점을 해결할 수 있다. Pre-Rendering 프리 랜더링은 검색 엔진이라는 것을 알아차리고 검색 엔진일때만 백엔드 서버에서 데이터를 받아서 html을 완성해서 준다. 일반 유저에서는 리액트 방식처럼 준다. Sever Side Rendering 첫 방문만 전통적인 방식으로 불러..

배포 -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..