본문 바로가기

분류 전체보기

 (170)
React memoization 1. React.memo() component를 메모 자체적으로 props값을 비교해서 변경이 없다면 DOM비교작업을 하지 않는다. 대신 변경되는 props를 받는다면 memo소용이 없다. // 방법 1 const solution = React.memo(() => { return () }) // 방법 2 export default React.memo(solution) 2. useCallback() 함수를 메모 React는 얕은 비교를 해서 원시타입은 판단 가능하지만, 참조 타입은 렌더가 될때마다 참조 메모리 주소가 달라진다. => 다른 값으로 인지하고 렌더가 일어난다. => JS에선 함수가 객체로 취급(참조형)되므로 렌더링이 될때마다 새로운 함수 생성. deps에 들어있는 값이 변경되지 않는다면 이전의 ..
해쉬 알고리즘 Q. 후보 A,B,C,D,E 가 있다. 투표 용지에 쓰여있던 기호를 순서대로 나열했을때 선출된 기호 출력 A. function solution(s) { let answer; let sH = new Map(); for (let x of s) { if (sH.has(x)) sH.set(x, sH.get(x) + 1); else sH.set(x, 1); } let max = Number.MIN_SAFE_INTEGER; for (let [key, val] of sH) { if (val > max) { max = val; answer = key; } } return answer; } let str = 'BACBACCACCBDEDE'; console.log(solution(str)); [코드 순서] new Map(..
[typescript] cannot find module 타입스크립트를 계속해서 공부 중인데 TodoList를 만들면서 해봐야겠다라는 생각에 간단한 틀을 구성하고 있었다. 1.문제 npm i sass를 설치하고 styles폴더안에 header.modules.scss 파일을 만들었다. 그 안에 Header component 를 감쌀 container역할의 css를 만들고 에서 import를 했다. 그런데 오류가 났다. 오류는 2307이라고 떴으며, 찾아보니 모듈을 찾지 못해서 일어난다고 했다. 2.시도 간만에 이런 에러를 만나니 캡쳐해놓는걸 또 깜빡해서 기억나는 것들로 정리. - 1) npm i --save-dev @types/내파일.js 을 설치 => 해결되지 않음 -2) declare module "*.module.css" { const classes: { ..
슬라이딩 윈도우 Q. arr=[12, 15, 11, 20, 25, 10, 20, 19, 13, 15]이 있다. 연속된 숫자 3개씩 묶어서 더 했을 때 가장 큰 수는? function solution(k, arr) { let answer, sum = 0; for (let i = 0; i < k; i++) sum += arr[i]; //12+15+11; answer = sum; for (let i = k; i < arr.length; i++) { sum += arr[i] - arr[i - k]; //밑의 사진 참고! answer = Math.max(answer, sum); } return answer; } let a = [12, 15, 11, 20, 25, 10, 20, 19, 13, 15]; console.log(solu..
TCP / UDP TCP : 인터넷상에서 데이터를 메세지 형태로 보내기 위해 IP와 함께 사용하는 프로토콜, 연결 지향 방식이다. ** 연결지향방식- 패킷을 전송하기 위한 논리적 경로를 배정한다는 것 더보기 TCP는 패킷을 어떻게 추적하고 관리하나? A,B,C라는 패킷에 1,2,3이라는 번호를 부여하여 패킷의 분실확인 처리를 하여 목적지에서 재조립한다. 이런 방식으로 패킷을 추적하여, 나누어보내고 데이터를 조립할 수 있다. TCP는 연결형 서비스로 신뢰성을 보장하기 때문에 3-way handshaking의 과정을 사용하며 목적지와 수신지를 확실히 한다. 이러한 기능들 때문에 UDP보다 속도가 느리다. => TCP는 연속성보다 신뢰성있는 전송이 중요할때에 사용하는 프로토콜 UDP: 데이터를 데이터그램 단위로 처리하는 프로토..
TCP 3way handshake TCP(전송 제어 프로토콜) : 두 개의 호스트를 연결하고 데이터 스트림을 교환하게 해주는 중요한 네트워크 프로토콜 **TCP/IP 프로토콜을 이용해서 통신을 하는 응용프로그램이 데이터를 전송하기 전에 먼저 정확한 전송을 보장하기 위해 사전에 수립하는 과정을 의미한다. 즉, 연결하고자하는 두 장치 간의 논리적 접속을 성립하기 위해 사용하는 연결 확인 방식, 3번의 확인 과정을 거친다고 해서 3 way handshake라고 부른다. // 절차 과정 Client > Server : TCP SYN Server > Client : TCP SYN ACK Client > Server : TCP ACK 위와 같은 과정이 일어난다.(port헷갈리지 말 것) 그림을 간단히 해석하자면, #1. client가 SYN(난수)..
typescript interface 내가 공부하기 위해 기록. interface 만들 때 대문자로 보통 시작. type Square = {color:string, width:number} //1.이것도 가능하다. //2. object 타입 지정 시 interface 사용가능 interface Square {color:string, width:number} let 네모 = { color: 'red', width:100 } typeAlias와 쓰는 법은 비슷하다. 다른 점? 중복 선언 가능/불가능 //interface 는 중복 선언 가능 interface Student {name: string} interface Student {score: number} //type은 중복 선언 불가능 즉, 동일한 이름으로 중복선언이 가능하고 Student ..
[next.js] getStaticPaths 지금까지 상황) 지도 api를 가지고와서 매장의 위치가 핀에 꽂혀있을 수 있도록 만들고 해당 핀을 누르면 그 매장의 상세정보를 보려고 한다. 그럼 그 핀에 알맞는 상세page가 필요하게 되었다. 과정) [name].tsx 파일을 pages 하위 파일로 만들어 준다. 여기서 []안에 들어가는 params를 지정해주면 페이지가 생성된다. 유동적으로 페이지를 만들 수 있다는 것. 예시 코드) //[name].tsx const StoreDetail : NextPage = ({store:Store})=>{ return detail; } export default StoreDetail export const getStaticPaths: GetStaticPaths = async()=>{ const paths = [{..

티스토리툴바