1. 이중 연결 리스트(Doubly Linked List) 단일 연결 리스트에서 이전 노드로 갈 수 있는 포인터가 하나 더해진 리스트. 시간 복잡도 삽입 O(1) 제거 O(1) 탐색 O(n) // 노드 Class 설정 class Node { constructor (value) { this.value = value; this.next = null; this.prev = null; } } // 이중 연결 리스트 Class 초기 설정 class DoublyLinkedList { constructor() { this.head = null; this.tail = null; this.length = 0; } } 2. push 메서드 리스트의 길이가 1 이상일 때는 tail.next를 새로 추가할 노드로 설정해주고,..
React에서 Side Effect는 보통 useEffect() 내부에 넣어 처리하는데 useEffect()는 dependency로 지정한 State가 변경되고 렝더링까지 완료된 이후에 실행됨. 이러한 특성을 이용하면 어떠한 상호작용을 했을 때 알림으로 나타나는 Toast 알림을 쉽게 구현할 수 있음. 일정 시간 후에 토스트를 제거해야 하므로 setTimeout() 타이머를 사용해야 하는데, 타이머 API는 Side Effect이므로 useEffect()에서 처리해줘야 함. 1. Toast 생성 이벤트 핸들러 만들기 토스트는 상위, 하위 컴포넌트에서 상호작용이 발생했을 때 나타나야 하므로 최상위 컴포넌트 App에 두는 편이 좋음. App 컴포넌트에서 토스트를 담을 State를 만들고 토스트를 추가해주는 ..
arr.reduce((accu, next, i) => { if (i accu.includes(taskId)); }, []); 배열 arr에 대해 reduce() 메서드를 적용했을 때 'string' 형식의 인수는 'never' 형식의 매개변수에 할당될 수 없습니다.라는 오류가 뜸. 빈 배열은 기본적으로 never[] 타입으로 선언되기 때문에 이런 오류가 뜨는 것. 보통 strictNullChecks 옵션은 noImplicitAny 옵션과 함께 쓰이는데 빈 배열의 기본 타입을 any[]로 정의하면 noImplicitAny 옵션과 충..
Javascript에 존재하는 기본 타입들은 타입을 정의하는 게 기반이 되지만 모든 복잡한 상황에 대해서는 제대로 대응하지 못함. Typescript는 그러한 상황에 맞는 다양한 타입들을 추가적으로 제공하고 있음. 1. 유니언 타입(Union Type) 둘 이상의 타입에 대해 그 중 하나를 타입으로 가질 수 있는 새로운 타입을 정의하는 방법으로, OR 기호 "|"를 이용해 타입을 조합해줄 수 있음. 조합에 사용된 각각의 타입을 유니언 타입의 멤버라고 부름. 예를 들어, 문자열 또는 숫자를 argument로 받을 수 있는 함수는 다음과 같이 타입을 정의해줄 수 있음. function printId(id: number | string) { console.log("Your ID is: " + id); } 한편..
1. 제네릭 인터페이스 어떠한 객체의 속성으로 어떠한 것이든 가능할 때, 그렇다고 해서 any 타입을 쓰는 것은 바람직하지 않음. interface Box { contents: any; } 해당 속성으로 들어온 타입을 기록하는 unknown 타입을 쓴다고 해도 각각의 타입마다 타입 체크를 해줘야 하기 때문에 문제는 달라지지 않음. 이때, 제네릭 인터페이스를 쓰면 다양한 타입의 인터페이스를 하나로 표현해줄 수 있음.(타입 템플릿의 역할) // 제네릭 인터페이스를 쓰지 않았을 경우 interface NumberBox { contents: number; } interface StringBox { contents: string; } interface BooleanBox { contents: boolean; } ..
1. Nullish 병합 연산자 a ?? b a가 null 또는 undefined이면 b를 반환, 아니라면 a를 그대로 반환 어떠한 값이 null, 문자열 중에 하나일 때, 빈 문자열도 falsy값이므로 아래 코드처럼 if 문을 단순하게 작성해주면 안 됨. if (checkAll) { // checkAll이 문자열일 때 실행...? } typeof 연산자를 이용해 해당 변수가 문자열인지 확인하는 방법도 가능하지만 if (typeof checkAll === 'string') { // checkAll이 문자열일 때 실행 } ES6에서 도입된 Nullish 병합 연산자를 이용하면 조금 더 간단하게 작성해줄 수가 있음. if (checkAll ?? false) { // checkAll이 문자열일 때 실행 } [..
1. 컴포넌트에서 Redux Store에 접근하는 방법 import store from './app/store'; import { Provider } from 'react-redux'; ReactDOM.render( , document.getElementById('root') ); 특정 컴포넌트에서 Redux Store에 접근하고자 할 경우 해당 컴포넌트를 Provider 컴포넌트로 감싸야 함. Provider 컴포넌트는 Redux Store를 store 속성으로 가지므로 우리가 구성해준 Store를 전달해주면 됨. 위 코드에서 App 컴포넌트와 그 하위 컴포넌트들은 useSelector(), useDispatch() hook을 통해 우리가 정의한 Redux Store(./app/store.js 파일)에..
1. 깊이 우선 탐색(Depth First Search) 트리 또는 그래프에서 깊은 부분을 우선적으로 탐색하는 알고리즘. 루트(그래프에서는 임의의 노드)에서 시작해 각 분기를 따라 가능한 한 멀리 탐색하는 방법. A. 트리에서의 깊이 우선 탐색 1. 루트 노드의 가장 왼쪽 자식 노드 먼저 방문 2. 각 노드의 자식 노드가 존재하지 않을 때까지 해당 노드를 파고들면서 탐색 3. 더이상 자식 노드가 없다면 같은 깊이 또는 그보다 얕은 깊이의 자식 노드를 역순으로 탐색 루트 노드 1의 자식 노드가 존재하므로 가장 왼쪽의 노드 2를 우선적으로 탐색 → 노드 2의 자식 노드 3이 존재하므로 노드 3의 자식 노드를 탐색 → 노드 3의 자식 노드 4이 존재하므로 노드 4의 자식 노드를 탐색. 하지만, 노드 4의 자식..
1. Rotated Array 부분적으로 정렬된 배열로, 배열을 왼쪽 또는 오른쪽으로 0칸 이상 순환 이동했을 때 완전히 정렬되는 배열을 말함. [4, 5, 1, 2, 3] 위 배열을 왼쪽으로 2칸을 이동하면 완전히 정렬된 배열이 얻어지므로 Rotated Array라고 할 수 있음. 2. 이진 탐색(Binary Search) 정렬된 리스트에서 필요한 부분만 탐색하도록 제한하여 원하는 원소를 찾는 탐색 방법. 리스트의 중간에 찾는 원소가 있는지 확인을 하고, 없으면 해당 원소와 리스트의 값을 비교해 위쪽으로 탐색할지, 아래쪽으로 탐색할지 결정함. 3. 문제 부분적으로 오름차순으로 정렬된 배열(rotated)에서 정수(target)를 입력받아 해당 정수의 인덱스를 반환합니다. (배열에 중복된 요소는 없고, ..
알고리즘 2022. 7. 13. 15:09
1. 이중 연결 리스트(Doubly Linked List) 단일 연결 리스트에서 이전 노드로 갈 수 있는 포인터가 하나 더해진 리스트. 시간 복잡도 삽입 O(1) 제거 O(1) 탐색 O(n) // 노드 Class 설정 class Node { constructor (value) { this.value = value; this.next = null; this.prev = null; } } // 이중 연결 리스트 Class 초기 설정 class DoublyLinkedList { constructor() { this.head = null; this.tail = null; this.length = 0; } } 2. push 메서드 리스트의 길이가 1 이상일 때는 tail.next를 새로 추가할 노드로 설정해주고,..
JavaScript/React 2022. 7. 9. 20:40
1. Props를 State에 바로 할당할 때는 주의해야 함 # A. 예시1 function Task(props) { const [dueDate, setDueDate] = useState(props.dueDate); // Props를 State의 초기값으로 할당하고 있음 const [title, setTitle] = useState(props.title); // Props를 State의 초기값으로 할당하고 있음 const onChange = (e) => { /* ... */ }; return ( /* ... */ ); } 컴포넌트가 TaskList > TaskListSection > Task 구조로 되어있을 때, Task에서 할일 만료일 dueDate를 변경하면 onChange 이벤트 핸들러에 의해 St..
JavaScript/React 2022. 7. 9. 16:24
React에서 Side Effect는 보통 useEffect() 내부에 넣어 처리하는데 useEffect()는 dependency로 지정한 State가 변경되고 렝더링까지 완료된 이후에 실행됨. 이러한 특성을 이용하면 어떠한 상호작용을 했을 때 알림으로 나타나는 Toast 알림을 쉽게 구현할 수 있음. 일정 시간 후에 토스트를 제거해야 하므로 setTimeout() 타이머를 사용해야 하는데, 타이머 API는 Side Effect이므로 useEffect()에서 처리해줘야 함. 1. Toast 생성 이벤트 핸들러 만들기 토스트는 상위, 하위 컴포넌트에서 상호작용이 발생했을 때 나타나야 하므로 최상위 컴포넌트 App에 두는 편이 좋음. App 컴포넌트에서 토스트를 담을 State를 만들고 토스트를 추가해주는 ..
TypeScript 2022. 7. 8. 19:52
arr.reduce((accu, next, i) => { if (i accu.includes(taskId)); }, []); 배열 arr에 대해 reduce() 메서드를 적용했을 때 'string' 형식의 인수는 'never' 형식의 매개변수에 할당될 수 없습니다.라는 오류가 뜸. 빈 배열은 기본적으로 never[] 타입으로 선언되기 때문에 이런 오류가 뜨는 것. 보통 strictNullChecks 옵션은 noImplicitAny 옵션과 함께 쓰이는데 빈 배열의 기본 타입을 any[]로 정의하면 noImplicitAny 옵션과 충..
TypeScript 2022. 7. 8. 17:34
Javascript에 존재하는 기본 타입들은 타입을 정의하는 게 기반이 되지만 모든 복잡한 상황에 대해서는 제대로 대응하지 못함. Typescript는 그러한 상황에 맞는 다양한 타입들을 추가적으로 제공하고 있음. 1. 유니언 타입(Union Type) 둘 이상의 타입에 대해 그 중 하나를 타입으로 가질 수 있는 새로운 타입을 정의하는 방법으로, OR 기호 "|"를 이용해 타입을 조합해줄 수 있음. 조합에 사용된 각각의 타입을 유니언 타입의 멤버라고 부름. 예를 들어, 문자열 또는 숫자를 argument로 받을 수 있는 함수는 다음과 같이 타입을 정의해줄 수 있음. function printId(id: number | string) { console.log("Your ID is: " + id); } 한편..
TypeScript 2022. 7. 6. 21:52
1. 제네릭 인터페이스 어떠한 객체의 속성으로 어떠한 것이든 가능할 때, 그렇다고 해서 any 타입을 쓰는 것은 바람직하지 않음. interface Box { contents: any; } 해당 속성으로 들어온 타입을 기록하는 unknown 타입을 쓴다고 해도 각각의 타입마다 타입 체크를 해줘야 하기 때문에 문제는 달라지지 않음. 이때, 제네릭 인터페이스를 쓰면 다양한 타입의 인터페이스를 하나로 표현해줄 수 있음.(타입 템플릿의 역할) // 제네릭 인터페이스를 쓰지 않았을 경우 interface NumberBox { contents: number; } interface StringBox { contents: string; } interface BooleanBox { contents: boolean; } ..
JavaScript 2022. 7. 6. 21:45
1. Nullish 병합 연산자 a ?? b a가 null 또는 undefined이면 b를 반환, 아니라면 a를 그대로 반환 어떠한 값이 null, 문자열 중에 하나일 때, 빈 문자열도 falsy값이므로 아래 코드처럼 if 문을 단순하게 작성해주면 안 됨. if (checkAll) { // checkAll이 문자열일 때 실행...? } typeof 연산자를 이용해 해당 변수가 문자열인지 확인하는 방법도 가능하지만 if (typeof checkAll === 'string') { // checkAll이 문자열일 때 실행 } ES6에서 도입된 Nullish 병합 연산자를 이용하면 조금 더 간단하게 작성해줄 수가 있음. if (checkAll ?? false) { // checkAll이 문자열일 때 실행 } [..
JavaScript/Redux 2022. 7. 6. 11:04
1. 컴포넌트에서 Redux Store에 접근하는 방법 import store from './app/store'; import { Provider } from 'react-redux'; ReactDOM.render( , document.getElementById('root') ); 특정 컴포넌트에서 Redux Store에 접근하고자 할 경우 해당 컴포넌트를 Provider 컴포넌트로 감싸야 함. Provider 컴포넌트는 Redux Store를 store 속성으로 가지므로 우리가 구성해준 Store를 전달해주면 됨. 위 코드에서 App 컴포넌트와 그 하위 컴포넌트들은 useSelector(), useDispatch() hook을 통해 우리가 정의한 Redux Store(./app/store.js 파일)에..
알고리즘 2022. 7. 6. 10:30
1. 깊이 우선 탐색(Depth First Search) 트리 또는 그래프에서 깊은 부분을 우선적으로 탐색하는 알고리즘. 루트(그래프에서는 임의의 노드)에서 시작해 각 분기를 따라 가능한 한 멀리 탐색하는 방법. A. 트리에서의 깊이 우선 탐색 1. 루트 노드의 가장 왼쪽 자식 노드 먼저 방문 2. 각 노드의 자식 노드가 존재하지 않을 때까지 해당 노드를 파고들면서 탐색 3. 더이상 자식 노드가 없다면 같은 깊이 또는 그보다 얕은 깊이의 자식 노드를 역순으로 탐색 루트 노드 1의 자식 노드가 존재하므로 가장 왼쪽의 노드 2를 우선적으로 탐색 → 노드 2의 자식 노드 3이 존재하므로 노드 3의 자식 노드를 탐색 → 노드 3의 자식 노드 4이 존재하므로 노드 4의 자식 노드를 탐색. 하지만, 노드 4의 자식..
알고리즘 2022. 7. 5. 09:53
1. Rotated Array 부분적으로 정렬된 배열로, 배열을 왼쪽 또는 오른쪽으로 0칸 이상 순환 이동했을 때 완전히 정렬되는 배열을 말함. [4, 5, 1, 2, 3] 위 배열을 왼쪽으로 2칸을 이동하면 완전히 정렬된 배열이 얻어지므로 Rotated Array라고 할 수 있음. 2. 이진 탐색(Binary Search) 정렬된 리스트에서 필요한 부분만 탐색하도록 제한하여 원하는 원소를 찾는 탐색 방법. 리스트의 중간에 찾는 원소가 있는지 확인을 하고, 없으면 해당 원소와 리스트의 값을 비교해 위쪽으로 탐색할지, 아래쪽으로 탐색할지 결정함. 3. 문제 부분적으로 오름차순으로 정렬된 배열(rotated)에서 정수(target)를 입력받아 해당 정수의 인덱스를 반환합니다. (배열에 중복된 요소는 없고, ..