우아한 테크러닝 4일차 간단한 예제 만들기 컴포넌트 아키텍쳐 언제 쪼갤지에 대한 고민 -> 고민하다가 점점 비대해져서 버그생길까봐 못 쪼갬 언제 또갤지 고민될 때 쪼개라 class component function class ClassApp extends React.Component { constructor(props) { super(props); // 만들어지는 인스턴스 객체를 this로 참조하게 됨 this.state = { displayOrder: 'ASC' } // 그래서 바인딩을 해 줬다 this.onToggleDisplayOrder = this.onToggleDisplayOrder.bind(this); } onToggleDisplayOrder() { // 불릴 때의 this는 인스턴스가 아닌 ..

우아한 테크러닝 3일차 리액트를 직접 만들어보았다. React React Concept const list = [ { title: '안녕하세여' }, { title: '안녕히가세여' }, { title: '안녕히주무세요' }, ]; const rootElement = document.getElementById('root'); function app(items) { rootElement.innerHTML = ` ${items.map((item) => `${item.title}`).join('')} `; } app(list); 위의 코드와 같이 real dom으로 직접 조작하는건 안정성이 떨어짐 -> API가 low level -> 추상도가 높지 않음 그래서 작성하다보면 복잡도가 올라간다 two-way bi..

Merge Sort 배열을 두 부분으로 쪼갠 뒤, 각 배열의 첫번째 요소를 비교해 작은 원소부터 새로운 배열에 넣으며 정렬한다. 배열의 길이가 길 경우, 한번에 정렬하기 어렵기 때문에 재귀적으로 배열을 잘게 자르고 정렬하는 것을 반복한다. 문제를 작은 2개의 문제로 분리한 후, 해결하고 다시 합치는 분할 정복 방법을 사용한다. 시간복잡도는 O(nlog(n)) 구현한 코드 function mergeSort (array) { // array에 원소 1개만 들어있을때 if (array.length < 2) { return array; } let mid = Math.floor(array.length / 2); // 쪼개질 기준점 let front = array.slice(0, mid); // 쪼개진 앞부분 le..

Quick Sort pivot이라는 기준점을 잡은 뒤, 요소가 이 pivot보다 작다면 왼쪽, 크다면 오른쪽으로 자리를 이동시킨다. 문제를 작은 2개의 문제로 분리한 후, 해결하고 다시 합치는 분할 정복 방법을 사용한다. 시간복잡도는 O(nlog(n)) 구현한 코드 function quick(array) { // 임의로 배열의 맨 끝 요소를 pivot으로 설정하고 // pivot을 기준으로 왼쪽 / 오른쪽으로 나누기 // pivot보다 작다면 왼쪽 배열에 / 크다면 오른쪽 배열에 넣기 // 정렬된 배열을 왼쪽, pivot, 오른쪽 순서대로 합쳐서 리턴 if(array.length < 2) { return array; } const pivot = array[array.length-1]; let left =..

Selection Sort 배열에서 최소값을 찾아 가장 앞쪽 인덱스로 보내며 정렬한다. 최소값과 맨 앞쪽 요소의 위치를 교환한다, 시간복잡도는 O(n^2) 구현한 코드 function selection(array) { // array를 돌며 i ~ array.length-1 까지의 요소 중 최소값을 찾기 // 찾았다면 현재 순회중인 array의 가장 앞(i) 에 넣기 // 이미 가장 앞에 있다면 다음 반복으로 넘어간다 // 모두 정렬될 때까지 쭉 반복 for(let i = 0; i < array.length; i++) { let min = Math.min(...array.slice(i)); if(min === array[i]) { continue; } else { let index = array.inde..

Bubble Sort 서로 인접한 요소들의 크기를 비교해서 순서대로 되어 있지 않으면 서로 자리를 바꾼다. 더 큰 쪽의 요소를 계속해서 뒤로 밀어내는 모양이 된다. 시간복잡도는 O(n^2) 가 된다. 구현한 코드 function bubbleSort(array) { // 맨 앞에 있는 요소부터 시작 // 한칸씩 증가해가면서 바로 오른쪽에 있는 요소와 자신을 비교 // 자신이 크다면 자리를 바꾸고 아니라면 그대로 for(let i = 0; i array[j+1]) { let temp = array[j+1]; array[j+1] = array[j]; array[j] ..