짧은코딩

가상 스크롤 바 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를 안써줬을 때 에러는 아니지만 노란..

해결법 1. 이 문제에서 값을 일차 배열로 준다. 그렇기에 우린 이것을 이차 배열로 바꿔야 한다. 2. 오른쪽과 오른쪽 위, 아래로 이동할 수 있다는 것은 반대로 생각하면 왼쪽과 왼쪽 위, 아래에서 온다는 의미이다. 3. 쭉 더하고 마지막 열 중에서 가장 큰 값을 찾는다. 코드 answer = [] for t in range(int(input())): n, m = map(int, input().split()) ary = list(map(int, input().split())) dp = [] index = 0 for i in range(n): dp.append(ary[index:index + m]) index += m for j in range(1, m): for i in range(n): # 왼쪽 위면 ..

계층 간 데이터 송수신 과정 HTTP를 통해 웹 서버에 요청을 하면 일어나는 과정을 그림으로 표현한 것이다. -과정 1. 애플리케이션 계층에서 전송 계층으로 요청(request) 값들이 캡슐화 과정을 거쳐 전달 2. 링크 계층을 통해 서버와 통신 3. 해당 서버의 링크 계층으로부터 애플리케이션까지 비캡슐화 과정을 거쳐서 데이터 전달 -캡슐화 과정 캡슐화 과정은 상위 계층의 헤더와 데이터를 하위 계층 데이터 부분에 포함하고 해당 계층의 헤더를 삽입하는 과정이다. 애플리케이션 계층 -> 전송 계층: 데이터가 전달되면서 세그먼트 혹은 데이터그램화 되어 TCP(L4) 헤더가 붙는다. 전송 계층 -> 인터넷 계층: IP(L3) 헤더가 붙여져 패킷화된다. 인터넷 계층 -> 링크 계층: 프레임 헤더, 프레임 트레일러..