띵동

삽입 정렬은 처음 요소가 정렬되어 있다고 가정하고, 그다음 요소와 비교하여 알맞은 자리에 삽입한다. 삽입 정렬에서 중요한 것은 첫 번째 값이 정렬되어 있다고 가정하여 두 번째 요소에서 시작하는 것이다. 두 번째 요소를 앞에 있는 값과 비교하여 교환이 필요하다면 swap 한다. function insertionSort(arr) { for (let i=1; i= 0 && arr[j] > currVal) { arr[j+1] = arr[j]; j--; } arr[j+1] = currVal; } return arr; } // while문 -> for문 function insertionSort(arr) { for (let i=1; i= 0 && arr[j] > currVal; j--) { arr[j+1] = arr..

선택 정렬은 가장 작은 값을 찾아 맨 앞에 위치하는 인덱스와 교환한다. 가장 작은 값을 찾는 게 루프 하나를 돈 것이고, 정렬된 데이터는 누적된다. 선택 정렬에서 중요한 점으로 3가지가 있다. - 최솟값 저장할 변수 생성 (처음에는 시작값에 대입) - 다음 항목과 비교해 가며 더 작은 값이 있다면 최솟값 변수에 저장 (실제값이 아닌 인덱스 값) - 루프 하나 돌면 시작 인덱스와 최솟값 인덱스 교환 선택 정렬과 버블 정렬의 차이점으로는 버블 정렬은 다음 원소와 비교하여 swap을 하며 진행하면서 가장 큰 값을 마지막으로 밀어내지만, 선택 정렬은 최솟값을 찾아 마지막에 교환한다는 것이다. function selectionSort(arr) { const swap = (arr, idx1, idx2) => { [..

버블 정렬은 오름차순 기준으로 정렬한다면 더 큰 숫자가 한 번에 하나씩 뒤로 가는 것이다. 루프를 돌면서 자신의 오른쪽 항목과 비교하고, 자신이 오른쪽 항목보다 크면 swap 하여 정렬한다. 그래서 루프 하나를 다 돌면 가장 큰 수가 오른쪽으로 정렬되어 반복할 때마다 정렬할 항목 줄어든다. 따라서 데이터가 거의 다 정렬된 상태에서 버블 정렬을 사용하면 좋다. 아래는 버블 정렬에서 가장 중요한 swap 코드이다. function swap (arr, idx1, idx2) { let tmp = arr[idx1]; arr[idx1] = arr[idx2]; arr[idx2] = tmp; } // ES6 문법 구조 분해 할당을 사용해 교환 const swap = (arr, idx1, idx2) => { [arr[i..

sort 메서드는 기본 내장 자바스크립트 정렬로, 선택적 비교 함수를 인자로 전달받는다. 이 함수를 사용해 자바스크립트에 우리가 원하는 정렬 방식을 알릴 수 있다. sort((a, b) => a-b); 형식으로 정렬하는데, 반환 값(a-b)이 양수이면 a가 더 큰 것이므로 a가 b뒤로 정렬된다. 이와 같은 방식으로 반환 값이 음수이면 a가 더 작은 것이므로 a가 b앞에 가고, 반환 값이 0이면 동일하게 취급된다. 주로 오름차순 정렬을 하고싶을 때는 sort((a, b) => a-b)를, 내림차순 정렬을 하고싶을 때는 sort((a, b) => b-a)를 사용한다.

선형 검색 (linear search) - 세트 간격으로 이동하면서 한 번에 하나의 항목을 확인하는 식으로 모든 항목 확인 - 자바스크립트에서 선형 검색 기능을 하는 메서드 => indexOf, includes, find, findIndex function linearSearch(arr, val) { for (let i=0; i left idx = 0, right idx = arr.length-1 (left < right 일 때만 실행) - 구하려는 수와 주어진 배열의 중간 인덱스 값을 비교하여 탐색 항목을 절반씩 줄여감 function binarySearch(arr, val) { let left = 0; let right = arr.length - 1; let mid = Math.floor((left+..

리액트로 서비스를 개발한 후 npm run build를 통해 발행하면 하나의 큰 html, js, css 파일이 만들어지는데, 이때 하나의 js 파일에 지금까지 개발한 컴포넌트들이 다 들어가게 된다. 그러다 보니 이 js 파일은 사이즈가 매우 커서 메인 페이지에 접속하게 되면 로딩 속도가 느려진다. 이때 lazy를 사용해 js 파일을 나눌 수 있다. 메인 페이지에서 보이지 않는 컴포넌트를 import 할 때 lazy를 사용한 방식으로 import 하면 된다. // (App.js) import Detail from './routes/Detail.js' import Cart from './routes/Cart.js' // (App.js) import {lazy, Suspense} from 'react' co..

const obj = [{ {id: 3, name: '하하하'}, {id: 1, name: '밍밍밍'}, {id: 6, name: '동동동'}, {id: 3, name: '딩딩딩'} }]; filter 메서드 사용 obj.filter((item, i) => { return ( obj.findIndex((item2, j) => { return item.id === item2.id; }) === i ); }); obj.filter((item, idx, callback) => idx === callback.findIndex(e => e.id === item.id)) 결과를 확인해보면 {id: 3, name: '딩딩딩'} 객체가 제거된다.

리액트 네이티브에서 input 태그로는 TextInput이 있다. 이 태그는 키보드를 이용해 텍스트를 입력할 때 사용한다. TextInput 태그는 다양한 속성을 갖고 있는데, 대표적인 몇 가지를 정리할 것이다. style : borderWidth와 borderRadius 등 스타일을 지정할 수 있다. - text value : 텍스트 input에 표시할 값이다. (React의 input 태그에서 value와 동일하다.) - string defaultValue : 사용자가 입력을 시작할 때 변경되는 초기값을 제공한다. - string editable : text 편집 가능 유무로, 기본 값은 true이다. - boolean maxLength : 입력할 수 있는 최대 문자 수를 제한한다. - number ..

서버랑 통신하는 기능들을 ajax로 구현하다 보면 응용 기능들이 필요할 때가 있다. - ajax 성공/실패 시 다른 UI 보여주기 - 몇 초마다 자동으로 ajax 요청 - 실패 시 몇 초 후 요청 재시도 - prefetch (다음 페이지 내용 미리 가져오기) react-query 라이브러리를 사용하면 위 기능들을 쉽게 구현할 수 있다. react-query는 실시간 데이터를 계속 가져와야 하는 사이트에서 잘 사용된다. 아래는 npm i react-query 후 초기 세팅 화면이다. (index.js) react-query를 사용해 ajax 요청을 하기 위해서는 useQuery 함수를 사용하면 된다. useQuery를 사용하면 ajax 현재 상태를 쉽게 파악할 수 있다. let result = useQue..

localStorage: 브라우저에서 나가도 (재접속해도) 데이터가 남아있음 sessionStorage: 브라우저 끄면 데이터 사라짐 ​ localStorage setItem('key', 'value') value는 항상 문자열이어야 됨 (객체나 배열 저장하고 싶으면 JSON.stringy 사용하여 자체를 문자열로 만들어 주어 저장) getItem('key') value 값을 가져오는 함수 (문자열 된 객체나 배열을 원래 데이터 타입으로 바꾸려면 JSON.parse 사용) removeItem('key') 해당 데이터 삭제