40일차 배운 것 정리

목차

1. 모의면접 - 정렬 준비

1. 기존 자료 검토

2. git 질문 리스트 작성

3. 단일화

(정렬)정렬 알고리즘

1. 선택정렬(selection sort)

💡

매번 가장 작은 것을 선택하는 정렬

동작원리

자리를 먼저 정한 후, 해당 자리에 가장 작은 데이터가 오도록, 나머지 데이터에서 가장 작은 데이터를 찾아 바꾸는 동작을 반복하는 알고리즘

시간복잡도

• 항상 O(N^2)

• 'N + (N-1) + (N-2) + ... + 2' 이므로 (N2+N)/2이 되어 빅오표기법으로는 O(N^2)이다.

• 데이터 1000개 일 때 +-0.3초, 데이터 10000개 일때 +-15초

 

구현코드

열기

let arr = [7, 5, 9, 0, 3, 1, 6, 2, 4, 8];

for (let i = 0; i < arr.length - 1; i++) {
  // 1. 가장 작은 요소 찾기
  let min_idx = i;
  for (let j = i + 1; j < arr.length; j++) {
    if (arr[j] < arr[min_idx]) {
      min_idx = j;
    }
  }
  // 2. 스왑
  let temp = arr[i];
  arr[i] = arr[min_idx];
  arr[min_idx] = temp;
}
console.log("완료");
console.log(arr);

2. 삽입정렬 (insertion sort)

💡

현재 데이터와 정렬된 리스트를 비교하여, 정렬된 리스트가 오름차순이 되는 자리를 찾아 삽입하는 알고리즘

동작원리

• 첫 번째 원소는 정렬이 되어있다고하고, 두번째 요소부터 선택하여 정렬시작

• 정렬된 리스트와 현재 선택된 요소를 비교하여, 현재 요소의 위치를 정한다.
• 정렬 리스트 중 가장 뒷 원소부터 비교한다.
• 현재 선택된 원소 보다 작은 데이터를 만나면 그 다음 자리에 위치하게 된다.
• 따라서 이미 정렬되어 있는 데이터라면, 내부 반복문을 거치지 않게 된다.(O(N))

특징

• 작은 수에서 효과적 (30개 이하)

• 정렬이 필요할 때만 위치를 바꾼다.

• 항상 오름차순을 유지

• 이미 정렬되어 있는 배열에서 효과적
• 하나의 요소만 추가하고 다시 정렬할 때 (O(n))

• 선택정렬과 비교
• 삽입정렬은 필요할 때만 위치를 바꾸므로 데이터가 거의 정렬되어있을 때 효율적 반면 선택정렬은 데이터 상태와 상관없이 모든 원소를 비교하고 위치를 바꿈

시간복잡도

• 최적 O(N) - 이미 정렬되어 있는 경우

• 일반 O(N^2) - 랜덤 및 역순 배치

구현코드

열기

let arr = [7, 5, 9, 0, 3, 1, 6, 2, 4, 8];

for (let i = 1; i < arr.length; i++) {
  let curVal = arr[i];
  let addIdx = i - 1;
  for (let j = i - 1; j >= 0 && curVal < arr[j]; j--) {
    // 현재값이 이전값보다 작다면 한칸씩 밀어내야한다.
    arr[j + 1] = arr[j];
    addIdx = j;
  }
  arr[addIdx] = curVal;
}

console.log(arr);

3. 버블정렬 (bubble sort)

💡

인접한 두 원소를 비교하여, 작은요소는 앞으로 큰 요소는 뒤로 가도록 반복하여 정렬하는 것

동작원리

• 1회 정렬 사이클을 마치면 n번째 요소가 제일 큰 값을 가지도록 정렬됨
• 2,3,4 ... 회 사이클에 n-1, n-2, n-3 이 정렬됨

• 1번 정렬의 n번의 연산, n-1번 반복하므로 O(N^2)의 시간복잡도 가짐

시간복잡도

• 항상 O(N^2)

특징

• 가장 간단한 코드 구현 가능

• 성능이 가장 안좋아 거의 사용되지 않는다.

4. 퀵정렬 (quick sort)

💡

기준값(pivot)을 중심으로 작으면 왼쪽, 크다면 오른쪽으로 분할하여 정렬하는 알고리즘

동작원리

1.한 사이클

시작 기준값을 가장 뒤로 이동

• 왼쪽
• 기준보다 작으면 pass
• 기준보다 크면 비교진행

• 오른쪽
• 기준보다 크면 pass
• 기준보다 작으면 비교진행

• 비교
• 왼쪽은 기준보다 크고, 오른쪽은 기준보다 작으면 스왑

마무리: 비교값 중 큰값과 기준값을 교환

2.반복실행

• 분할된 좌우 리스트에서 반복실행

 

시간복잡도

• 최악 O(N^2) - pivot이 최소/최대인 경우

• 평균 O(NlogN)
• 기준값으로 좌우를 나누기 때문에 log2N (트리높이), 각 단계에서 N번의 비교 시행

특징

• O(nlogN)으로 속도가 빠른 장점 (병합정렬 보다 2배정도 빠름)

• 대부분 프로그래밍 언어의 sort.()에서 사용

• 주의
• 같은 값의 데이터가 있을 때 경우에 따라 해당 데이터들의 순서가 바뀔 수 있다.

• 투 point 사용
• 왼쪽에서는 기준값보다 큰 값을 찾고, 오른쪽에서는 기준값보다 작은 값을 찾는다.
• 둘다 찾았을 때, swap 진행
• 반복하여 point가 만났을 때, 종료

zeroCho 예시

합병 정렬처럼 분할 정복 기법을 사용합니다. 그 상태로 문제를 해결하지 못할 때 작게 쪼개어 해결하는 거죠.

[4,1,7,6,5,8,2,3] 어떠한 한 숫자를 고릅니다. 기준으로 5를 골랐습니다. 5를 가장 오른쪽으로 보냅니다.[4,1,7,6,3,8,2,5] 이제 왼쪽에는 기준보다 작은 수가, 오른쪽에는 기준보다 큰 수가 나오도록 조정하여 보겠습니다.[4,1,7,6,3,8,25] 5를 제외한 가장 왼쪽과 오른쪽 수를 조작합니다. 이제부터 규칙은 다음과 같습니다. 집중해서 읽어주세요. 왼쪽 수는 기준보다 작으면 다음으로 넘어가고, 크면 가만히 있습니다. 오른쪽 수는 기준보다 크면 다음으로 넘어가고, 작으면 가만히 있습니다. 이렇게 넘어가다가 왼쪽은 기준보다 크고, 오른쪽은 기준보다 작으면 서로 바꿔줍니다.[4,1,7,6,3,8,25] 왼쪽 4는 기준보다 작기 때문에 다음 수로 넘어가고, 오른쪽 2은 기준보다 작기 때문에 가만히 있습니다.[4,1,7,6,3,8,25] 왼쪽 1도 다음 수로 넘어가고, 오른쪽 2는 계속 가만히 있습니다.[4,1,7,6,3,8,25] 왼쪽 7는 기준보다 크고, 오른쪽 2은 기준보다 작기 때문에 서로 바꿔줍니다.[4,1,2,6,3,8,7,5] 왼쪽 6은 기준보다 크기 때문에 가만히 있고, 오른쪽 8은 기준보다 크기 때문에 다음 수로 넘어갑니다.[4,1,2,6,3,8,7,5] 왼쪽 6은 기준보다 크고, 오른쪽 3은 기준보다 작기 때문에 서로 바꿔줍니다.[4,1,2,3,6,8,7,5] 이제 더 이상 비교할 수가 없네요. 왼쪽과 오른쪽 수가 만났습니다.[4,1,2,3,6,8,7,5] 그러면 만난 수인 6과 기준인 5를 바꿔줍니다.[4,1,2,3,5,8,7,6] 이제 5를 기준으로 왼쪽에는 5보다 작은 수가, 오른쪽에는 5보다 큰 수들만 남았습니다. 신기하죠?아직 정렬이 완료되지 않았기 때문에 끝이 아닙니다. 이제 5를 기준으로 왼쪽([4,1,2,3]), 오른쪽 배열([8,7,6])로 나누어 재귀적으로 퀵 정렬을 해줍니다. 이렇게 계속 하면 정렬이 완료됩니다.

5. 병합정렬 (merge sort)

💡

s

동작원리

• 재귀와 분할정복을 통해 정렬을 진행

• 재귀를 통해 배열을 최소단위로 쪼개고, 쪼개진 배열의 맨앞의 수만을 비교하며 결과배열에 담는 과정을 반복하는 방식

시간복잡도

특징

• 정렬하는데 추가적인 메모리 사용 (result배열)

2. Vue 3화

1. 조건부 렌더링

1-1. v-if , v-else, v-else-if

• 주의 : v-if와 v-else 를 사용할 때, 두 요소 사이의 다른 요소가 들어가면, 디렉티브가 동작하지 않아, 모든 v-if 및 v-else 요소가 모두 렌더링 되어 버린다!
• v-else가 렌더링 되지 않는 것이 아니라 무조건 렌더링 됨을 유의!

• 특정 조건에 여러 요소를 렌더링 하고 싶다면, wrapper Element를 만들어서 디렉티브를 적용한다.
• <div v-else-if=”true”> <h1> inner-title </h1><p>inner-content</p></div>
• Tip div로 wrapping 하기를 원하지 않는다면, <template> 태그로 감싸준다.
• 실제 DOM에는 내부 Element만이 렌더링 된다.

1-2. v-if와 v-show 의차이

1-3 v-if와 v-for 동시에 사용하기

• 같이 사용해야하는 주요 케이스
• 필터링된 항목만을 렌더링 할 때 (active한 user만 출력)
• 특정 상태에서만 목록 렌더링 할 때 (숨긴 상태가 활성화 된 경우만 출력)

• case
bad-Case
<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>
 
good-Case

• computed로 미리 필터링 된 user를 정의하고 렌더링

<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

• v-for를 template 태그로 상위로 올려주기

<ul>
  <template v-for="user in users" :key="user.id">
    <li v-if="user.isActive">
      {{ user.name }}
    </li>
  </template>
</ul>

2. 리스트 렌더링

2-1. v-for

• index를 인자로 사용할 수 있다
• 소괄호의 2번째 인자로 index를 받음
• <li v-for="(item, index) in items”>

• in 대신에 of 구문자도 사용가능
• <li v-for="item of items” />

• 배열 타입 뿐만 아니라 객체를 순회 반복하는 것도 가능
• 첫번째 default 인자로 value가 출력
• 두번째 인자로 key 값을 받아 출력한다.
• <li v-for="(value, key) in itemObj”>{{key}} : {{value}}</li>
• 세번째 인자는 index를 가리킴 v-for=”(value, key, index)”

2-2 상태유지

2-3 배열 변경 감지

• 배열변경 메소드
• push(), pop()shift(), unshift(), splice(), sort(), reverse()
• 감시 중인 배열 데이터에서 변경 메소드 발생 시 자동으로 뷰를 갱신한다.

• 비변이 메소드
• filter(), concat(), map(), slice()
• 새로운 배열로 다시 렌더링 하는 것이 아니라 smart 휴리스틱을 통해 변경이 발생한 부분만을 렌더링 해준다.

• computed, methods 사용 시
• 추가/변경 시 항상 새로 렌더링 하는 것이 아니라, 변경이 없는 기존 값은 유지하고, 변경된 값들만을 리렌더링 한다

2-4 기타 v-for 활용

• 범위가 있는 v-for
• 단순 정수 출력 시 v-for = “n in 10 “ 과 같이 사용 가능
• 주의 이 때 n은 ‘0’ 이 아닌 ‘1’ 부터 출력됨

• template에서의 v-for
• 여러 요소를 block 단위로 렌더링 할 때 사용
• v-if와 함께 조건부 렌더링에 사용
예제

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

2-5 컴포넌트에서의 v-for

• input요소의 경우 단방향 데이터 바인딩
• data의 값이 input 값에만 영향을 미친다
• input값이 변경되어도 data의 값에 영향을 미치지 않는다.
• v-bind의 경우 단방향 데이터 바인딩을 위한 디렉티브

• v-model for 양방향 데이터 바인딩
• input 값에 v-model디렉티브로 data를 연결하면, input값의 변화에 따라 data도 변경된다.
• <input v-model="newTodoText" />
 

• 컴포넌트 만들기
• templae에 html 마크업을 작성하고, 실제 html에서는 컴포넌트 이름을 snake-case로 가지는 tag를 사용한다.
• v-for, :key, props로 넘겨줄 data들을 지정해준다
• template 내에서 이벤트바인딩을 할 수 없기 때문에, emit 함수를 통해 외부 함수의 신호를 전달한다.
• emit(’key’, 전달인자) , 디렉티브 (@key = “eventHandler함수명”)
• 인자는 따로 적어주지 않아도, 이벤트핸들러 함수에 전달된다.

• v-for Todos 예제 코드
• tip e.preventDefault()을 @submit.prevent 로도 설정가능
컴포넌트 만들기 이전 코드 보기

	<div id="app">
      <form @submit.prevent="addNewTodo">
        <label for="new-todo">Add a todo</label>
        <input v-model="newTodoText" id="new-todo" type="text" placeholder="Feed the cat" />
        <button>추가</button>
      </form>
      <ul>
        <li v-for="todo in todos" :key="todo.id">
          {{todo.title}}
          <button @click="removeTodo(todo.id)">Remove</button>
        </li>
      </ul>
    </div>
    <script>
      function generateId() {
        return `${Date.now()}${Math.random()}`;
      }
      const App = {
        data() {
          return {
            todos: [],
            newTodoText: "",
          };
        },
        methods: {
          addNewTodo(e) {
            this.todos.push({ id: generateId(), title: this.newTodoText });
            this.newTodoText = "";
          },
          removeTodo(todoId) {
            this.todos = this.todos.filter((todo) => todo.id !== todoId);
          },
        },
        computed: {},
        watch: {},
      };

      const app = Vue.createApp(App).mount("#app");
    </script>

emit을 통한 컴포넌트로 작성한 Todos 예제

	<div id="app">
      <form @submit.prevent="addNewTodo">
        <label for="new-todo">Add a todo</label>
        <input v-model="newTodoText" id="new-todo" type="text" placeholder="Feed the cat" />
        <button>추가</button>
      </form>
      <ul>
        <todo-item
          v-for="todo in todos"
          :key="todo.id"
          :todo="todo"
          @remove="removeTodo"
        ></todo-item>
      </ul>
    </div>
    <script>
      function generateId() {
        return `${Date.now()}${Math.random()}`;
      }
      const TodoItem = {
        template: `
        <li>
          {{todo.title}}
          <button @click="$emit('remove', todo.id)">Remove</button>
        </li>`,
        props: ["todo"],
      };
      const App = {
        components: {
          TodoItem,
        },
        data() {
          return {
            todos: [],
            newTodoText: "",
          };
        },
        methods: {
          addNewTodo(e) {
            this.todos.push({ id: generateId(), title: this.newTodoText });
            this.newTodoText = "";
          },
          removeTodo(todoId) {
            this.todos = this.todos.filter((todo) => todo.id !== todoId);
          },
        },
        computed: {},
        watch: {},
      };

3. 이벤트 핸들링 (28m, 21m)

3.1 이벤트 청취

• @event="함수" 는 addEventListener(”event”, 함수)와 같다.

3.2 메소드 이벤트 핸들러

v-on 에 직접 이벤트 핸들러를 작성하는 것이 아니라, methods에 이벤트핸들러 함수를 정의하고, 함수명만 등록하여 이벤트를 등록한다

3.3 인라인 메소드 핸들러

이벤트 이름만 바인딩하는 것외에도, 함수를 사용하는 것 처럼 인자를 넘겨 실행할 수도 있다.

• 인자를 넣지 않으면, event 객체가 첫번째 인자로 전달 된다.

• 인자가 있는 경우에는 $event를 통해 event객체를 넘겨줄 수 있다.
• <div @click=”say(’hello”, $event)”> {{data}} </div>
• methods: { say(msg, event) { console.log(msg, event} }
• 인자와 $event의 순서를 바꿀 수도 있다. say($event, ‘hello’)

3.4 복합 이벤트 핸들러

하나의 event에 여러개의 핸들러를 바인딩할 수 있다.

• html : <button @click="one($event), two($event)"> Submit </button>

3.5 이벤트 수식어

• prevent
• 해당 html태그의 기본 동작을 방지함
• e.preventDefault와 같은 역할
• <form @submit.prevent="onSubmit"></form>

• stop
• 이벤트 전파의 중단 역할
• e.stopPropagation 과 같은 역할
• <a @click.stop="doThis"></a>

• capture
• event의 캡쳐링 동작을 실행하도록 한다.
• 주의 버블링은 모든 요소에서 바인딩된 함수를 실행시키지만, 캡쳐링은 이벤트함수를 실행시키고 싶은 요소에 각각 capture처리를 해주어야함
• addEventListener의 3번째 인자인 option객체의 capture = true 와 같은 역할
• <div class="parent" @click.capture="doThis">...</div>

• self
• e.currentTarget === e.target 일 때에만 실행시키도록 함
• e.currentTarget: 이벤트를 실제 바인딩 한 요소
• e.target: 이벤트가 발생한 요소
• <div @click.self="doThat">...</div>

• once
• 단 한 번만 이벤트핸들러가 동작되도록 하는 역할
• <a @click.once="doThis"></a>

• passive
• 화면의 움직임과 동작의 처리를 구분하여 처리하도록 하는 것
• addEventListener의 3번째 인자인 option객체의 passive = true 와 같은 역할
• wheel event 발생 시 10000개의 log가 찍히도록 한다면, 해당 작업을 처리하기 위해서 화면의 렌더링이 느려지는 현상이 발생한다.
• passive = true 적용 시, 렌더링이 먼저 적용되고, 동작은 이후에 처리되어 버벅임 현상이 체감되지 않는다.
• 모바일 환경에서의 개선을 위해 주로 사용

3.6 키 수식어

• 키가 'Enter'일때만 `vm.submit()`을 호출할 수 있음 : <input @keyup.enter="submit" />

• camelCase를 가진 수식어는 snake-case로 변환되어 사용
• $event.key === PageDown일 때만 호출
: <input @keyup.page-down="onPageDown" />
 

• .ctrl .alt .shift .meta(윈도우키 || command키)
• <input @keyup.alt.enter="clear" /> → (알트 + 엔터) <div @click.ctrl="doSomething">Do something</div>→ (컨트롤 + 클릭)
• meta 키는 keydown을 통해서만 작동한다.

• exact
• 정확히 해당하는 key만 눌렀을 때에만 작동한다.
• Ctrl키만 눌려져 있을 때 실행 <button @click.ctrl.exact="onCtrlClick">A</button>

• 마우스 이벤트에만 작동하는 event
• .left, .right, .middle

3.7 왜 HTML로 된 리스너를 사용하는가?

• HTML 템플릿을 간단히 하여 JavaScript 코드 내에서 핸들러 함수 구현을 찾는 것이 더 쉽습니다.
• vue는 하나의 파일 안에서 html, js 관리

• JavaScript에서 이벤트 리스너를 수동으로 연결할 필요가 없으므로 ViewModel 코드는 순수 로직과 DOM이 필요하지 않습니다. 이렇게 하면 테스트가 쉬워집니다.
• addEventListener, document.querySelector 와 같은 함수 불필요

• ViewModel이 파기되면 모든 이벤트 리스너가 자동으로 제거 됩니다.
• 유지보수 및 성능최적화

4. 폼 입력 바인딩 (24m, 13m)

4.1 v-model 양방향 바인딩

v-model은 사용자의 입력 양식을 데이터에 반영하는 syntax sugar 이다. input-type에 따라 내부적으로는 다른 방식으로 data와 연결한다.

<input v-model="message" placeholder="여기를 수정해보세요" />
<p>메시지: {{ message }}</p>

<span>여러 줄을 가지는 메시지:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br />
<textarea v-model="message" placeholder="여러줄을 입력해보세요"></textarea>

체크박스

• 주의 초기값은 html에서 설정한 속성 기준이 아니라 v-model을 통해 연결된 data의 값을 우선시하여 사용한다.

• v-model로 연결한 값이 배열이라면, checked 된 input의 value가 해당 배열에 담겨지게 된다.

예시

// html
<div id="v-model-multiple-checkboxes">
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames" />
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
  <label for="mike">Mike</label>
  <br />
  <span>Checked names: {{ checkedNames }}</span>
</div>

//js
data() {
    return {
      checkedNames: []
    }
  }

라디오

• 단일 선택을 목표로 함

예시

// HTML 
<div id="v-model-radiobutton">
  <input type="radio" id="one" value="One" v-model="picked" />
  <label for="one">One</label>
  <br />
  <input type="radio" id="two" value="Two" v-model="picked" />
  <label for="two">Two</label>
  <br />
  <span>Picked: {{ picked }}</span>
</div>

//js
data() {
    return {
      picked: ''
    }
  }

4.2 수식어