[220729] Daily Study Note

 

 

  Today's Plan  

Coding JavaScript   

1) to do list

Studying JavaScript knowledge 

 

 

Training Coding Test with Python  

1) 정렬 1

2) 정렬 2

3) 백준 정렬 3문제

---

CodingJavaScript   < To do list >

 

0. To do list 를 복습 겸 빠르게 만들어보려고 합니다.

0-1. UI는 인터넷 검색을 통해서 마음에 드는 디자인을 골랐습니다.

해당 디자인을 기준으로 만드려고 합니다.

0-2. 아이콘 등은 font-awesome 사이트에서 가져오려 합니다.

 

    troubleshooting

 

    : 처음 HTML을 구성하며 아이콘을 들여왔는데 이미지가 제대로 업로드되지 않는 문제가 발생했습니다.

    : 해당 웹사이트와의 연동은 사이트에서 웹 키트를 받아서 scirpt태그를 HEAD태그 안에 넣는 식으로 안내받았습니다.

    : 안내에 따라서 수행했으나 정상 동작하지 않아 웹키트 정보를 찾아봤고, 검색을 해봤습니다.

        : 오류 가능성 1. script태그를 잘못 들여온 경우? : 확인 결과 정상적인 것 같았습니다.

        : 오류 가능성 2. 버전 충돌? : 웹사이트에 들어가 확인하니 해당 웹키트는 version5로 최신 상태였습니다.

         이상 없다고 생각했지만 더 검색한 결과, ver5부터는 해당 <i>태그 사용 시 이름이 변경된다는 사실을 검색을 통해

         확인했습니다. 예를 들어, 아래와 같이 변경해서 사용해야 했습니다.

 

<!---- before version 5 --->
<i class="fa solid fa-wifi"></i>

<!---- after version 5 --->
<i class="fas fa-wifi"></li>

 

위와 같이 타입별로 문구를 다르게 해줘야했습니다.

Solid	fas	<i class="fas fa-user"></i>
Regular	far	<i class="far fa-user"></i>
Light	fal	<i class="fal fa-user"></i>
Duotone	fad	<i class="fad fa-user"></i>
Brands	fab	<i class="fab fa-facebook"></i>

 

1. HTML 틀 잡고,  디자인에 근거해 CSS 적용

- 자잘한 실수

: justify-content에서 space-between 을 속성값으로 준다는 걸 flex-between이라고 작성했다가 수정했다.

 

 

[b0f5f98] | Init: todoList App: set content structure with html and style it with css

 

 

: 기본적인 구조와 css디자인을 완성했습니다.

 

- 아쉬운 점

: 화면 사이즈에 맞춰 너비와 길이가 동적으로 움직이게 하는 것을 구현하기는 했는데, 아무래도 어거지로 해낸 느낌입니다. 예를 들어 컨테이너 내의 리스트 길이 같은 경우는 부모 요소인 컨테이너의 크기 정보를 이용해 하는 것이 더 적절한데, 전체 뷰포트의 높이와 너비를 기준으로 적용한 점들이 마음에 들지 않습니다.

 

: 비슷한 맥락으로 rem, em, % 등의 개념 인식이 정확하지 않은 것 같습니다. 어떤 요소는 픽셀 단위로 사이즈를 주고 어떤 요소는 rem, em 어떤 건 %로 비율을 주는데 그 때 그 때 편한 것을 기준으로 잡으니 전체 코드가 깨끗하지 않은 느낌입니다.

 

: flex 관련해서 다시 정리해야 할 것 같습니다. 내부 요소들에 비율 지정해주는 것을 정확히 이해하지 못 했다고 스스로 판단됩니다.

 

 

2. 리스트 추가 버튼 활성화

[a96c9a5] | Feat: todoList App: add click Event(make a new list) to addButton

 

 

: input 태그를 활용해서 리스트를 구성하고 ul 컨테이너에 자식요소로써 새로 들어가게 했습니다.

 

 

3. 수행한 Task 수 / 전체 Task 리스트 수 정보 표기

[ee4bf87] | Feat: todoList App: add function to count total tasks and completed task

 

- 동작 

 

1. 리스트를 추가할 때 전체 Task수가 올라갑니다.

2. 완료된 작업이 생기면 수행한 task수가 업데이트됩니다. 수행 완료 여부가 취소되면 다시 내려갑니다.

 

 

- 관련 코드

//...
let taskCounter = document.querySelector('.taskCounter');
let taskTotalNum = document.querySelector('.taskTotalNum');
let successNum = 0;

taskTotalUpdate('0');

function taskTotalUpdate(finishedTaskNum){
    taskCounter.textContent = '✅ '+ finishedTaskNum + '/';
    taskTotalNum.textContent = taskList.children.length;
    taskCounter.append(taskTotalNum);
}

addBtn.addEventListener('click', ()=>{

	// ...

    taskList.append(li);
    taskTotalUpdate(successNum);
});

taskList.addEventListener('click', event => {
    if (event.target.type == 'checkbox'){
        if(event.target.checked == true){
            successNum += 1;
        }
        else{
            successNum -= 1
        }
        taskTotalUpdate(successNum.toString());
    }
});

 

: html 요소를 수정한 뒤 해당 내용을 넣어주었습니다.

 

 

4. 리스트 삭제 기능 추가

 

 [6e669b8] | Feat: todoList App: add function to delete the list

 

 

 

추가된 기능 설명

: 각 리스트에 삭제 버튼을 추가했습니다.

: 각 삭제 버튼을 누르면 해당 리스트가 사라지고. 전체 Tasks 갯수도 줄어듭니다.

 

 

프로퍼티 살펴보던 중 든 궁금증 : parentElement 와 parentNode의 차이

 

두 프로퍼티가 동일한 객체를 뜻하고 있는 듯 했다. 이에 대한 정의를 다시 살펴봐서 차이점을 분명히 해야겠다 싶었다.

 

 

 

TroubleShooting

 

문제 정의:

체크된 리스트를 삭제했을 때, 이미 완료된 목록은 업데이트되고 있지 않다는 것을 뒤늦게 확인했습니다.

따라서 해당 부문을 변경해주기로 했습니다.

 

수정 코드 : 

taskList.addEventListener('click', event => {
    // ...
    
    if (event.target.tagName == 'BUTTON'){
        if (event.target.parentElement.children[1].checked == true){
            completeNum -= 1;
        }
        taskList.removeChild(event.target.parentElement);
        taskTotalUpdate(completeNum);
    }
})

작업 완료된 리스트 2개를 지웠을 때,

전체 작업 수와 완료된 작업 수 모두 업데이트됩니다.

 

 

---

Training python Problem solving for Coding test

 

오늘은 정렬 문제

 

개념 복습을 다시 했다. 다 아는 내용이지만 모든 게 1초만에 구현되는 수준은 아직 아니기에 하나도 모르는 느낌이다.

 

1. 순차 정렬

 

2중 For문을 돌며현재 가장 큰 값을 맨 뒤로 보내는 과정을 n번 반복

 

 

2. 버블 정렬(Bubble Sort)

 

현재 값 기준 뒤의 요소랑 비교하며 진행해 자신보다 큰 값이 있을 때까지 뒤로 보내기

 

 

3. 병합 정렬 (Merge Sort)

 

최선의 경우 nLogn의 결과를 얻을 수 있다. 배열 전체를 비교하는게 아니라당장 주어지는 값 두 개씩만 비교하는 방식.

 

재귀적으로 값이 하나나올 때까지 반씩 쪼개며 내려가고, 올라오며 서로의 값을 비교해서 작은 순서대로 새 배열에 넣어주고 정렬이 완료된 배열끼리는 합친다.

 

 

4. 퀵 정렬 (Quick Sort)

 

주의할 점 때문에 먼저 정리하자면 병합정렬과 동일하게 nLogn의 시간복잡도를 갖는데, 최악 시간복잡도는 O(n^2)이다.왜냐하면 배열이 이미 거의 정렬된 상황에서는 피봇의 쓰임에 상관 없이 항상 맨 왼쪽부터 전부 검사하게 되기 때문이다.

 

따라서 라이브러리 없이 정렬해야하는 상황에서 일단 퀵정렬은 사용 않는게 좋다고 한다. 일반 코딩테스트에서 사용하려면 병합정렬을 사용하는 것이 낫다고 한다.

 

대부분의 라이브러리는 퀵 정렬을 사용하고 있기는 하지만, 그들은 피봇을 정할 때 로직을 최적화했기에 효율적으로 작동하는 것이다.

 

다시 로직 얘기를 해보자면, 피봇을 정한 뒤 그 피봇을 기준으로 피봇보다 큰 값을 왼쪽부터 찾고, 피봇보다 작은 값을 오른쪽부터 찾는다. 만약 둘 다 찾아지면 두 수의 위치를 바꾼다. 이 과정을 왼쪽부터 늘려온 인덱스가 오른쪽부터 줄여온 인덱스보다 작을 때까지 반복해 진행한다.  만약 늘려온 인덱스가 줄여온 인덱스보다 커지면, 피봇의 값과 줄여온 인덱스의 값의 위치를 바꿔준다.그리고 피봇값의 인덱스를 하나 늘려 그 인덱스 미포함 범위에서 위와 동일한 과정을 진행한다. 최악시간복잡도 때문에 코딩테스트환경에서 직접 구현은 어려워도 많은 라이브러리에서 사용되니 까먹지 말것.

 

 

5. 계수 정렬(Counting Sort)

 

이건 로직 자체는 쉬운데, 이름이 '계''수'정렬이라는 이유로 내게 잘 안 떠올려졌다. Counting sort라는 이름을 쓰니 아~이거! 하고 잘 떠올랐다.범위가 작은 수의 배열에서 사용할 수 있는 방법이다. 수가 1000만 이하정도면 코딩테스트에서 평균적으로 주어지는 용량 내에서 커버 가능하다고 한다. 

 

각 수가 나오는만큼 그 값의 개수를 세어주고, 값 기준으로 정렬해서 그 값 개수만큼 찍어내주면 되는 간단한 방식이다.

 

다만, 직접 구현해보니 라이브러리 사용이나, sorting key 기준 잡기 등 잘 다독여 사용해야할 지점들이 꽤 있었다. 

 

 

6. 라딕스 정렬(Radix Sort)

 

처음 보는 정렬 방법인데 꽤나 와닿았다.인간이 수를 비교하는 방식에서 따온 방법이다. 1의 자리, 10의 자리, 100의 자리 순으로 늘려가며 비교해 정렬하는 방식이다.

 

시작 시에 자릿값을 맞춰주면 조금 편하다. 자릿수가 부족한 애들은 0 패딩을 해주는 식으로.

 

처음 들어보는 이유는 잘 사용되지 않기 때문일텐데 왜? 각 자리수를 늘려가며 정렬해 값을 저장하려면 그에 맞게 배열 공간이 계속 필요하다. 동적 배열이나 연결 리스트를 사용하면 낫기는 하지만 그걸 위해 또 라이브러리를 사용하고 구현하느니 배열 라이브러리를 사용하는 것이 간단하기 때문이라고 합니다.

 

 

상위 내용 출처: https://blog.encrypted.gg/966?category=773649

 

 

7. Sort 내장 라이브러리

 

그리고 실질적으로 더 자주 사용하는 python의 정렬 라이브러리 sort(), sorted()

 

list.sort()

 

sorted(list)

 

https://docs.python.org/ko/3/howto/sorting.html

정렬 HOW TO — Python 3.10.5 문서