짧은코딩

안 읽은 메시지 수 구하기 안 읽은 메시지 수를 구하는 것은 생각보다 어렵다. 내가 어디까지 읽었는지와 그 이후로 몇 개가 쌓였는지도 알아야 한다. 얼마나 쌓였는지는 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 그..

grid 문제 사이트 https://cssgridgarden.com/#ko Grid Garden A game for learning CSS grid layout cssgridgarden.com 이 사이트에서 게임을 풀면서 grid 공부를 할 수 있다. 못 푼 문제들 -24단계 grid-template-columns: 50px repeat(3, 1fr) 50px; -26단계 grid-template-rows: repeat(4, 12.5px); 물이 아래 있으니까 상단을 4칸으로 만들면 아래 당근들이 채워진다. -28단계 grid-template: auto 50px / 1fr 4fr; auto 50px는 생각했지만 1fr 4fr은 생각하지 못했다.

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

GRID의 기본 사용법 .father { display: grid; } flex처럼 display에 설정하면 된다. .father { display: grid; grid-template-columns: 20px 55px 89px 100px; } 이렇게 자식들이 순서대로 px의 크기 만큼 변했다. .father { display: grid; grid-template-columns: 250px 250px 250px; gap: 10px; /*column-gap: 10px;*/ /*row-gap: 10px;*/ } gap를 활용해서 간격을 줄 수 있다. 주석문 처럼 따로따로 줄 수도 있다. .father { display: grid; grid-template-columns: 250px 250px 250px; g..

가상 메모리(virtual memory) 가상 메모리는 컴퓨터가 실제로 사용 가능한 메모리 자원을 추상화해서 사용자들에게 매우 큰 메모리로 보이게 하는 메모리 관리 기법이다. -가상 주소(logical address) 가상적으로 주어진 주소이며 가상 주소는 메모리 관리 장치(MMU)에 의해 실제 주소로 변환된다. 따라서 실제 주소를 의식하지 않고 프로그램 구축이 가능하다. 가상 메모리에는 가상 주소와 실제 주소가 매핑되어 있어 프로세스 주소 정보가 들어있는 페이지 테이블로 관리된다. 속도 향상을 위해 TLB를 사용한다. TLB: 메모리와 CPU 사이에 있는 주소 변환을 위한 캐시이다. 페이지 테이블에 있는 리스트를 보관해서 CPU가 페이지 테이블까지 가지 않고 TLB에서 찾아 속도가 향상된다. -실제 주..

align-self align-self는 align-items와 비슷한 일을 한다. .child:nth-child(2) { align-self: center; } align-self는 하나의 자식에만 속성을 줄 수 있다. 따라서 이렇게 하기 위해서는 width나 height의 크기가 충분히 커야 각 자식별로 다른 속성을 줄 수 있다. Order order는 자식의 순서를 바꿔줄 수 있다. 만약 1 2 3이렇게 있고 .child:nth-child(2) { order: 1, } 이런 속성을 주면 1 3 2가 된다. 그 이유는 order의 기본값은 0이다. 근데 2인 요소의 order을 1로 바꾸니까 2가 돼서 가장 뒤로 밀린다. flex-wrap flex-wrap는 자식들의 간격을 줄 수 있다. -rever..

개발을 하다가 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를 안써줬을 때 에러는 아니지만 노란..