📖오늘 배운 것 단일 연결 리스트 구현 class Node{ constructor(val){ this.val = val; this.next = null; } } class SinglyLinkedList{ constructor(){ this.head = null; this.tail = null; this.length = 0; } push(val){ const newNode = new Node(val); if(!this.head){ this.head = newNode; this.tail = this.head; } else { this.tail.next = newNode; this.tail = newNode; } this.length++; return this; } pop(){ if(!this.head) re..
📖오늘 배운 것 단일 연결 리스트 연결 리스트는 다음 데이터 엘리먼트를 가리키는 인덱스 없이 다수의 데이터 엘리먼트들로 구성되어있다. 따라서 연결 리스트들은 다수의 노드들로 구성되고, 각각의 노드는 문자열 혹은 숫자와 같은 하나의 데이터 엘리먼트를 저장한다. 각 노드들은 다음 노드를 가리키는 정보를 저장하고 있고, 더 이상 다음 노드가 없는 경우 null을 저장하게 된다. 단방향 연결 리스트는 이러한 노드가 다음 노드로 오직 단일 방향으로만 연결되어 있는 것 노드: 각각의 엘리먼트 head: 연결 리스트의 시작 노드 tail: 연결 리스트의 마지막 노드 연결리스트는 엘리베이터가 없는 고층 건물 계단, 배열은 엘리베이터로 비유할 수 있다! 배열의 경우 5층로 엘리베이터를 타고 바로 이동할 수 있지만 연결리..
📖오늘 배운 것 제어 컴포넌트 vs 비제어 컴포넌트 제어컴포넌트란? react에 의해서 값이 제어되는 컴포넌트를 말한다. 주로 state로 값을 관리하면서 입력값을 setState로 업데이트할 때 제어 컴포넌트라고 한다. 이러한 방식은 실시간으로 사용자의 입력 값을 추적하며 유효성 검사 등을 할 때 유용하나 계속 렌더링 되기 때문에 불필요한 렌더링이 일어나게 된다. 비제어 컴포넌트란? react에 의해 값이 제어되지 않는 컴포넌트를 의미한다. 이 방식은 주로 ref 로 값을 관리하며 필요한 경우 onSumbit 등의 이벤트 핸들러를 통해 저장된 요소의 값을 가져와 활용하게 된다. 값을 입력할 때마다 불필요한 렌더링이 일어나지 않아 렌더링을 줄일 수 있으나 실시간으로 입력 값을 검색해야하는 경우 적합하지 ..
📖오늘 배운 것 유클리드 호제법 유클리드 호제법은 2개의 자연수 사이의 최대공약수를 구하는 알고리즘의 하나이다. 원리 1. 큰 수를 작은 수로 나눈다. 2. 나머지가 0이면 작은 수가 최대 공약수 3. 나머지가 0이 아니라면 작은 수를 나머지로 나눈다. 4. 나머지가 0이 될 때까지 반복. 자바스크립트로 구현 function gcd(a, b) { const rest = a % b; if (remainder === 0) return b; return gcd(b, rest); } 퀵 정렬 : 배열의 요소가 0개 또는 1개의 항목이 남을 때까지 분할하여 개별적으로 정렬되는 방식 : 하나의 요소를 선택해서(pivot) 그 숫자를 기준으로 작은 수는 왼쪽으로, 큰 수는 오른쪽으로 옮긴다. 옮기는 숫자는 정렬하는 ..
📖오늘 배운 것 검색 알고리즘 선형 검색 데이터를 담은 배열이 있고 사용자가 해당 배열에 해당하는 값을 입력했는지 확인할 때 맨 앞부터 순서대로 맞는 데이터인지 확인하는 것이 선형검색이다. ⇒첫 부분에서 시작해서 끝부분으로 이동하면서 한 번에 하나씩 항목을 확인하는 것(혹은 역순으로) 선형 검색을 사용하는 자바스크립트 내장함수 indexOf includes find findIndex 선형검색은 배열의 길이가 길어질 수록 더 많은 검색을 실시해야되기 때문에 최악의 경우 O(n) 의 시간복잡도를 가지게 된다. ⇒ best는 O(1), 평균은 O(n), 최악은 O(n)이다. ❗선형 검색은 데이터가 정렬되어 있지 않을 때 적절한 방법이다. 이진검색 데이터가 정렬되어 있는 상태에서 절반씩 버리면서 확인하는 방법 ..
📖오늘 배운 것 recoil - 여러 를 사용하는 경우 는 여러 개가 같이 존재할 수 있으며 각각 독립적인 atom 상태가 providers/store된다. -> override를 false로 지정하지 않는 한 중첩 될 때 동일하게 발생 * override란? :기본 값 true 가 다른 와 중첩된 경우에 true라면 해당 루트는 각각 새로운 reocil 범위를 생성한다. 만약 false라면 루트의 자식들은 가장 가까운 조상 의 recoil 값에 액세스한다. atom :recoil의 상태를 표현. 쓰기 가능한 RecoilState 객체를 반환한다. key: 내부적으로 atom을 식별하는데 사용되는 고유한 문자열 default: atom의 초기 값 effects_UNSTABLE: atom을 위한 선택적인 ..
📖오늘 배운 것 recoil Atom: 데이터 상태의 단위, atom은 어떤 컴포넌트에서나 읽고 쓸 수 있으며 atom 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. 따라서 atom에 변화가 있으면 구독하고 있는 모든 컴포넌트가 재 렌더링된다. Selector: atom에서 state를 가져온 후 새로운 state를 만들어서 반환 -> 현재 state를 가지고 데이터를 가공하는 데 주로 사용하는 것 같다. ex) todo 리스트 필터링, todo 리스트 통계 ... const fontSizeLabelState = selector({ key: 'fontSizeLabelState', get: ({get}) => { const fontSize = get(fontSizeState); const unit..
📖오늘 배운 것 리액트 - jsx XSS 공격 방지 const title = response.potentiallyMaliciousInput; const element = {title}; React DOM에서는 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프하기 때문에 명시적으로 작성되지 않은 내용은 주입되지 않는다. 모든 항목은 렌더링 되기 전에 문자열로 반환하기 때문에 XSS 공격을 방지할 수 있다. * 이스케이프란? THML 엔터티와 같은 특정 문자를 HTML로 변환하는 행위 React.js와 Next.js의 차이 - React.js는 라이브러리, Next.js는 프레임워크이다. -React.js는 CSR(Client Side Rendering)을 하고, Next.js는 SSR(Server Si..
📖오늘 배운 것 문제 해결 패턴 빈도수 세기 패턴(FREQUENCY COUNTERS) : 자바스크립트의 객체를 사용해서 다양한 값과 빈도를 수집 예시) same 함수에게 2개의 배열을 전달하고, 두번째 배열의 값들이 첫 번재 배열의 제곱에 해당하는 값을 가지면 true를 반환. same([1, 2, 3], [4, 1, 9]) //true same([1, 2, 3], [1, 9])//false same([1, 2, 1], [4, 4, 1]) //false 중첩루프를 사용하는 경우 function same(arr1, arr2) { if(arr1.length !== arr2.length) return false; for(let i = 0; i < arr1.length; i++) { let correctInde..
📖오늘 배운 것 알고리즘이란? :특정 작업을 달성하기 위한 과정이나 일련의 단계 1. 문제를 이해하자 문제를 어떻게 접근해야할 지 모르겠는 경우, 스스로 질문을 던져보자. 문제를 나만의 방식대로 다시 생각할 수 있나? 질문을 그대로 받아들이는 것이 아니라 나만의 방식으로 바꿔서 질문의 무엇인지 실제로 이해해야 한다. 문제가 어떤 입력값을 담고 있는지 이해하자 입력값은 무엇인지, 어떤 형태인지 문제에 대한 해결책으로 나와야 할 결과는 무엇인지 이해하자. 출력값은 무엇인지, 어떤 형태인지 입력값만으로 출력값을 결정할 수 있는가? 문제를 해결할만한 충분한 정보가 주어졌는가? 문제의 일부분인 데이터의 중요한 부분에 어떻게 라벨을 지정할 수 있을까? 2. 문제에 대한 구체적인 예시에 대해 고민해보자 입력값과 출력..
