일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |
- async/await
- app router
- React
- tailwind
- CORS
- CI/CD
- Jest
- Promise
- 인터섹션
- autosize
- ESlint
- 호이스팅
- dfs
- Cypress
- SSR
- 투포인터
- RTK Query
- 태그된 유니온
- map
- 이분 검색
- 무한 스크롤
- 타입 좁히기
- useAppDispatch
- 결정 알고리즘
- 반공변성
- TS
- 공변성
- webpack
- 리터럴 타입
- recoil
- Today
- Total
목록전체 글 (510)
짧은코딩
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/cdmTxu/btrKHdt7B4T/Z7xcr74covpOp8V0eLkvYk/img.jpg)
데이터베이스의 종류 관계형 데이터베이스(RDBMS) 관계형 DB는 행과 열을 가지는 표 형식 데이터를 저장하는 형태의 DB를 말하고 SQL로 조작한다. 관계형 DB는 표준 SQL은 지키지만 각 제품을 특화시킨 SQL을 사용한다. 종류: MySQL, PostgreSQL, 오라클, Server, MSSQL 등이 있다. -MySQL MySQL은 대부분의 OS와 호환되고 현재 가장 많이 사용되는 DB이다. 메타, 트위터 등이 MySQL을 사용하고 있다. C, C++로 만들어졌고 MyISAM 인덱스 압축 기술, B-트리 기반의 인덱스, 스레드 기반의 메로리 할당 시스템, 빠른 조인, 최대 64개의 인덱스를 제공한다. 그리고 대용량 DB를 위해 설계되었고 롤백, 커밋, 이중 암호 지원 보안 등의 기능을 제공한다. ..
addEventListener const windowResize = () => { if (window.innerWidth > 769) { setMenu(false); } }; window.addEventListener(`resize`, windowResize); addEventListener는 첫번째 인자로 어떤 이벤트를 감지할 것인지 적어준다. 두번째 인자로는 첫번째 인자가 발생했을 때 일어날 이벤트를 적어준다. removeEventListener window.removeEventListener(`resize`, windowResize); 이벤트 대상에 등록한 수신기를 제거한다. 어느 수신기 중 하나가 이벤트를 처리하는 중에 다른 수신기를 제거하면 제거된 이벤트 수신기는 현재 이벤트에 대해 발동하지 않..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/okoxr/btrKGxzquAQ/vB0AAghKAccAMDmAijbU1K/img.png)
해결법 처음에 나는 이 문제를 객체를 이용해서 풀었다. 하지만 이 문제는 Map이란 자료구조를 사용하면 쉽게 풀 수 있다. let hash = new Map(); 이렇게 생성할 수 있다. hash.has(x): x가 포함되어 있는지 알 수 있다. hash.set(x, 1): x라는 문자를 1로 초기화해준다. hash.get(x): x의 key 값을 가져와 준다. 코드
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/GS0Lh/btrKwU2uTPJ/b60I1NRnHlKgEkWJziZqeK/img.png)
npm이 TS인 경우 reduce https://www.npmjs.com/package/redux redux Predictable state container for JavaScript apps. Latest version: 4.2.0, last published: 4 months ago. Start using redux in your project by running `npm i redux`. There are 16342 other projects in the npm registry using redux. www.npmjs.com redux의 공식 사이트이다. 사이트에 들어가서 보면 redux 옆에 ts가 있는데 이는 "typing을 기본적으로 제공하는 라이브러리"라는 의미이다. axios axios도..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/egEyG2/btrKwiO1Mug/DNdI05Uuxo7yL5UQh3FU81/img.png)
해결법 이 문제도 투포인터를 사용하면 쉽게 해결된다. lt을 왼쪽, rt를 오른쪽으로 두고 rt를 하나씩 증가 시켜보면서 sum과 같으면 answer을 증가시키면 된다. 만약 rt를 더하다가 m보다 더 커지면 lt에 있는 값을 빼고 lt 인덱스를 1 증가 시킨다. 이때 sum이 m과 같은지 확인하면 된다. 코드
shift, unshift .shift(): 배열의 맨 앞을 제거 .unshift(): 배열의 맨 앞에 추가 Object.entries Object.entries(chatSections) 이렇게 작성하면 객체를 배열로 바꿀 수 있다. useSWRInfinite useSWRInfinite를 사용하면 이중 배열을 사용한다. flat flat는 배열의 차원을 하나씩 낮춰준다. const a = [1, 2, 3, [1, 2], [[1], [2]]] // [1, 2, 3, 1, 2, [1], [2]] 이런식으로 배열의 차원이 1개씩 낮아진다.
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/Jlgw8/btrKrKduWg4/im2cII3MOvUsVovNQfPIaK/img.png)
MentionsInput -npm 공식 사이트 https://www.npmjs.com/package/react-mentions react-mentions React mentions input. Latest version: 4.4.7, last published: a month ago. Start using react-mentions in your project by running `npm i react-mentions`. There are 101 other projects in the npm registry using react-mentions. www.npmjs.com 이 사이트를 보면 많이 도움이 된다. -공식 사이트 예시 MentionsInput은 Mention이 있어야 에러가 발생하지 않는다. 슬..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/4Uu1j/btrKloBM8lP/wc8UhkkoxxiQC8avuUFpmK/img.jpg)
프로세스의 메모리 구조 스택, 힙, 데이터 영역(BSS segment, Data segment), 코드 영역(code segment)로 나눠진다. 그리고 스택은 위에서 부터 할당되고 힙은 아래 주소부터 할당된다. 스택(stack) 스택은 지역변수, 매개변수, 함수가 저장되고 컴파일시에 크기가 결정되는 동적인 특징을 갖는다. 스택은 함수가 함수를 재귀적으로 호출하기 때문에 동적으로 크기가 늘어난다. 이렇기에 힙과 겹치면 안돼서 스택과 힙을 반대부터 할당한다. 힙(heap) 힙도 동적으로 할당되며 런타임 시 크기가 결정된다. ex) 백터 같은 동적 배열은 힙에 할당된다. 데이터 영역 데이터 영역은 전역변수, 정적변수가 저장되고 정적인 프로그램을 종료하면 사라지는 변수가 들어 있는 영역이다. -BSS 영역 초..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bPjhEr/btrKl10Bz1k/1gqhKAvAFfkMvWLuiwkbEK/img.png)
투 포인터 이런 a와 b 배열이 있으면 pa = pb = 0으로 먼저 초기값을 둔다. while문을 두 배열 중 하나라도 끝에 도달하면 끝낸다. 이때 a[pa]와 b[pb]가 같으면 answer 배열에 추가 해주면된다. 하지만 다르면 두 값 중에 작은 값을 가진 pa/pb를 1 증가시킨다. 코드
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bxycd6/btrJ9uJ36cT/vjgNNHHIOgiCkMaxXaTw6k/img.png)
Utility Types https://www.typescriptlang.org/docs/handbook/utility-types.html Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org utility types는 ts가 미리 만들어 놓고 가져다 쓰면 되는 타입들이다. 객체를 조작할 때 도움이 많이 된다. 직접 만들 수도 있어야 한다. 예시 Partial interface Profile { name: string; age: number; married: boolean; } const ori: Profile = { name: "ori", age: 20, married: fal..