📖오늘 배운 것 제어 컴포넌트 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. 문제에 대한 구체적인 예시에 대해 고민해보자 입력값과 출력..
📖오늘 배운 것 빅오 표기법 : 입력된 내용이 늘어날수록 알고리즘의 실행 시간이 어떻게 변하는지 설명하는 방식 -> 정확한 수치라기 보다 전반적인 추세애 대한 개념 -> 실행시간이 갖는 최대치를 의미한다. O(2n) → O(n) O(500) → O(1) O(13n^2) → O(n^2) 앞에 붙는 상수, 혹은 뒤에 붙는 상수는 없애서 단순화하여 표현한다. 수치가 커졌을 때 그래프 모양에서 차이가 크지 않기 때문이다. 1. 산수(나눗셈, 곱셈, 뺄셈, 덧셈...)은 상수시간이 거린다. 2. 변수 처리도 상수시간이 걸린다. 3. 배열에서 인덱스로 값을 찾는 것도 상수시간이 걸린다. 4. 루프가 있으면 루프의 길이x 루프 안에 있는 연산들 만큼의 시간이 걸리고 중첩루프가 있으면 n 제곱이 될 수 있다. 빅오를 ..
타입스크립트 함수 오버로드 함수의 매개변수가 여러 타입을 가져서 리턴 값의 타입이 하나로 정해져있지 않을 때 사용할 수 있다. interface User { name: string, age: number; } function join(name: string, age: string): string; function join(name: string, age: number): User; function join(name: string, age: number | string): User | string { if(typeof age === 'number') { return { name, age }; } else { return "나이는 숫자로 입력해주세요."; } } const sam: User = join("S..
