[TDL] 07/11 Today's-Done-List

- 제로베이스 알고리즘 정렬

정렬 : 배열 내 원소들을 번호순이나 사전 순서와 같이 일정한 순서대로 열거하는 알고리즘

대표 정렬 알고리즘 :
거품 정렬, 선택 정렬, 삽입 정렬 : O(n²)
병합 정렬, 퀵 정렬 : O(ｎlogｎ)

---

거품 정렬(Bubble Sort)  : 서로 인접한 두 원소를 비교하면서 정렬하는 알고리즘

1. 인접한 두 값을 비교해서 => 더 큰 값으로 교환한다.
2. 1번을 index N 만큼 반복한다.
3. N차례 반복한다.

let swap = function (arr, idx_1, idx_2) {
    let tmp = arr[idx_1];
    arr[idx_1] = arr[idx_2];
    arr[idx_2] = tmp;
}

let bubbleSort = function (arr) {
    for (let i = 0; i < arr.length -1; i++){
        for(let j = 0; j < arr.length -i -1; j++){
            if(arr[j] > arr[j + 1]){
                swap(arr, j, j+1);
            }
        }
    }
}

let init_array = [9, 1, 5, 4, 3, 7];
let array = [...init_array];

bubbleSort(array);    // [1, 3, 4, 5, 7, 9]

• 인덱스의 위치를 조정해주는 swap 함수를 따로 생성.
• 2중 for loop를 돌면서 인접한 두 값을 비교해서
  만약 인덱스 0의 수가 인덱스 1의 수보다 크다면 swap 함수를 이용해서 서로의 위치를 바꿔준다

---

선택 정렬 (Selection Sort) : 최솟값을 찾아 데이터 영역의 가장 앞으로 이동하는 방식을 반복하여 전체 데이터 영역을 정렬하는 알고리즘

let swap = function (arr, idx_1, idx_2) {
    let tmp = arr[idx_1];
    arr[idx_1] = arr[idx_2];
    arr[idx_2] = tmp;
}

let selectionSort = function (arr) {
    for (let i = 0; i < arr.length; i++){
        let k = i;
        for(let j = i + 1; j < arr.length; j++){
            if(arr[k] > arr[j]){
                swap(arr, i, j);
            }
        }
    }
}

let init_array = [9, 1, 5, 4, 3, 7];
let array = [...init_array];

selectionSort(array);    // [1, 3, 4, 5, 7, 9]

---

버블 정렬은 매번 for Loop를 돌며 수를 비교해서 계속 교환하는 반면에
선택 정렬은 한차례를 쭉 탐색하여 비교하고, 해당하는 수를 하나 선택하여 그 하나의 수와 교환을 한다.

버블 정렬은 뒤에서부터 정렬하고, 선택 정렬은 앞에서부터 주로 정렬을 한다.

---

오전 회고 (만족도: 5)

늦잠 자서 오전에 알고리즘만 학습하였음.

---

- js문법 스터디 과제

이번 browser rendering 관련 유튜브와 블로그의 정리 글을 참고하여 노션에 정리하였는데,
이제까지 어떻게 브라우저가 그려지는 줄도 모르고 웹 개발자를 공부했다는 것에 대해서 창피했지만, 이제라도 공부하는 것에 대해 아직 늦지 않았다고 애써 위안 중...
"오~ 이게 그래서 이렇게 되는구나!"라는 생각으로 흥미롭게 학습했던 것 같다.

HTML안에 있는 어떤 태그 하나가 -> Parsing 돼서 Javascript Object로 바뀌고 ->
이것이 Dom Tree의 Node로 들어가고 -> attatchment함수가 호출돼서 Render Object로 바뀌고 ->
이것이 Render Tree의 Node로 들어간다.

내일 한번 더 영상을 보며, 오늘 정리한 글들을 수정하고 이해 안 되는 부분들은 더 검색하고 찾아보면서 렌더링 되는 흐름을 완벽히 습득한다면, 다음에 프로젝트를 구현할 때나 렌더링을 최적화하는 부분에 있어서 많은 도움이 될 거라 생각한다.

https://www.youtube.com/watch?v=ZTnIxIA5KGw

---

- 제로베이스 JS 강의

계산기 구현 강의

화면 렌더 하는 함수 ->  숫자를 입력하는 함수  -> 사칙연산하는 함수 -> 계산하는 함수 -> clear버튼 함수 -> reset버튼 함수

---

오후 회고 스터디 (만족도 : 6)

집중도가 나쁘지 않았지만 js문법 스터디 과제를 정리하는데 생각보다 시간이 오래 걸렸다.
그래서 또 react 강의를 저녁 파트로 미루게 되었음...
이게 다 오늘 스터디 카페에 늦게 와서 생긴 일이다ㅠ
최소 11시 전에는 와야 미루지 않고 할 수 있을 것 같은데 말이지~~~

---

- 제로베이스 라이브 세션

배민 FE 송요창 개발자님께서 토이 프로젝트를 해보는 것이 좋다고 하셨다.

나도 이번 주 안으로 아이템을 하나 구상해서 시간 날 때마다 조금씩 구현해봐야겠다
확실히 무엇인가를 구현하면 기술적으로 생각할 수 있는 부분, 고민들도 늘어나고 이론만 공부하는 것보다 더욱 많이 배운다고 생각하는데, 막상 하려니까 계속 미루게 되더라ㅠ 그만 미루고 하루에 한 가지 기능이라도 구현해보는 게 좋을 것 같다.
최종적으로는 인프런 제로초 react-bird 강의에서 백엔드 쪽을 가볍게 다루는 것 같던데, 그 강의를 들으면서 프로젝트를 구현해보면 될 것 같다.
express.js + next.js + Ts의 기술을 사용하여 마무리된다면 가장 베스트가 아닐까?
next.js는 vercel로 배포를 하면 좋다고 한다. 그 이유는 나중에 알아보기 낄낄

api만 갖고 놀고 싶다면, slack bot을 만들어보자.

---

- 제로베이스 JS 강의

계산기 셀프 구현

숫자 버튼들, 사칙연산, 합계 버튼, Clear 버튼, AllClear버튼 모두 구현되고 계산도 잘 되는데 한 가지 아쉬운 점이 있음.

바로 숫자를 두 개 입력한 후 합계를 얻고 나서, 또 다른 숫자 버튼을 누르면 결과에 그 숫자가 합쳐진다는 것이다.
예를 들면 1 + 5를 하고 결괏값으로 6을 받고, 그 뒤에 또 다른 숫자 버튼 8을 누른다면 68로 적용된다는 것임.

내 랩탑 설치되어 있는 계산기 앱은 만약 결괏값으로 6을 받고, 그 뒤에 더하기 버튼 8을 누른다면 14로 또 다른 결괏값이 나오지만, 더하기 버튼 없이 숫자 버튼 8을 누른다면, 그 전의 결괏값이 리셋되고 계산을 새로 시작한다.

그리고 그게 맞다고 생각이 들어, 리팩터링을 해보겠다.

---

1. 맨 처음에 숫자를 누르면 currentValue에 할당이 된다.
2. 그다음 숫자를 누를 경우 currentValue에 있던 숫자가 prevValue로 이동하고, 새로운 숫자를 currentValue에 주입한다.
3. 계산 버튼을 누르게 되면 계산된 값을 화면에 띄워주기 위해 currentValue로 할당받고 prevValue는 공백으로 둔다.
4. 이 상태에서 새로운 숫자를 누르게 된다면 새로운 계산을 시작하는 것이므로 currentValue에 있는 값을 없애거나,
새로운 숫자인 number를 대입해야 한다.

5. 나는 이 경우에 숫자를 입력하는 함수 부분에 조건문을 추가로 넣어서 구현하였다.
만약, currentValue와 number가 모두 존재할 경우에는 currentValue를 공백으로 설정하고,
화면에 나타나는 element.value에 내가 지금 막 입력한 number만 받아와서 띄워주는 것으로!

계산기 완성!

---

저녁 회고 스터디 (만족도 : 6)

계산기를 구현해보았는데, 리팩터링 해야 되는 부분에서 막혀서 다른 목표들은 하지 못했다.
하지만, js 계산기를 구현해보면서 예전보다는 어떻게 코드를 짜야할지 조오금씩 감을 잡아가는 것 같아서 나름 재미있게 구현하였다.
다른 목표를 달성하진 못했지만, 그래도 계산기 구현은 마무리된 것 같아서 만족도는 6 점하겠음.

---