[프리온보딩코스 세션 회고 #8] 프론트엔드에서의 자료구조와 알고리즘

8/19 (목) [자료구조와 알고리즘]

세션 내용

• Big-O 표기법
• new Date()
• 자료 구조
• this
• 클로저

---

0. 과제 리뷰

- Sorting Machine 과제 관련 피드백 정리

💡 컴포넌트 설계

1. components 폴더 관련

- components 폴더에는 주로 재사용할 컴포넌트만 모아놓는다.
- routes.js에서 import하는 컴포넌트는 웬만해서 components에 있으면 안 된다! (라우터는 한번 사용할 껍데기와 같기 때문에 재사용 컴포넌트가 있는 components 폴더에서 불러오는 것은 nope! 🙅‍♀️)
- 아래 사진과 같이 레이아웃 기반으로 폴더를 나누어서는 안 된다!

2. 컴포넌트 재활용의 기준

- 오름차순, 내림차순 결과를 출력해주는 컴포넌트를 각각 따로 만들었다면? 👎
- 한국, 미국 표준시를 출력해주는 컴포넌트 또한 각각 따로 만들었다면? 👎

➡ 출력하는 data(콘텐츠)가 다르더라도, UI가 같다면 항상 재활용할 생각을 해야 함!

💡 입력 validation(유효성) 실수

- 유효성 검사의 기준을 완벽하게 설정하지 못한 팀들이 꽤 있었다.

➡ UI를 고려하는 개발자라면, 입력이 잘못된 경우 잘못된 값이 입력된 순간에 알려주는 것이 가장 베스트이다!(alert나 modal보다!)

💡 Sorting Algorithm

좋은 코드의 기준은 readable(읽기 좋은) & scalable(확장 가능한)!

 

✅ Scalable

- Time Complexity(시간 복잡도): how long it take by algorithm
- Space Complexity(공간 복잡도): memory required by algorithm

✅ 알고리즘 중 많이 선택한 순서

1. Quick Sort
2. Selection Sort
3. Bubble Sort
4. Merge Sort
5. Heap Sort

1. Big-O 표기법

Big-O 표기법이란, 최악의 경우를 고려하여 시간 복잡도를 수치화하여 나타낼 때 사용하는 표기법으로, 여기서 말하는 시간 복잡도란 프로그램의 실행 시간으로부터 알고리즘의 효율성을 수치화한 것을 말한다.

예제)

1. O(1) : 입력과 관계없는 복잡도. 문제를 해결하는데 오직 한 단계만을 처리한다.

const foo = (a) => {
	console.log("hi"); // O(1)
}

2. O(n) : 입력과 linear(1차식) 관계에 있는 복잡도. 보통 하나의 루프로 순회할 때 나타나는 경우

const foo = (arr) => {
	for (let i = 0; i < arr.length; i++) { 
    console.log(arr[i]); // O(n)
  }
}

3. O(n^2) : 입력과 quadratic(2차식) 관계에 있는 복잡도. 보통 두 개의 중첩 루프를 사용할 경우

const foo = (arr) => {
	for (let i = 0; i < arr.length; i++) {
		for (let j = 0; j < arr.length; j++) {
			console.log(`${i}*${j}=${i*j}`)  // O(n^2)
		}
	}
}

➡ 3번은 간단한 코드면 괜찮지만, 이 중첩 루프 로직은 기피해야 하는 방식이다! 좀 더 나은 방식이 없을지 항상 고민해야 함!

2. new Date() 날짜 관련 몇 가지 상식

- UTC (Coordinated Universal Time) : 국제 표준시

- KST (Korea Standard Time) : UTC에 9시간을 더한 시간(우리나라가 9시간 빠름)

- 현재 날짜와 시간, 포맷 → 자바스크립트 코드가 실행된 시스템에 의해 결정된다.

- ISO 8601 : 날짜와 시간과 관련된 데이터 교환을 다루는 국제 표준
  → 2021-08-01T09:54:33.894Z
  → 특정 의미를 제공하는 ("-", ":", "T", 그리고 "Z"와 같은) 어떤 문자들로 작성되어야 한다.
  → 시간이 UTC인 경우, 시간 뒤에 빈칸 없이 Z를 직접 추가해야 한다. 즉! Z가 붙어있다면 UTC라는 것!

💡 결론 : 백엔드와 ISO 형식의 UTC로 주고받고, 한국 시간으로 바꿔서 사용해야 함!

3. 자료 구조

3.1 Stack & Queue

3.1.1 스택

스택(stack)은 한쪽 끝에서만 자료를 넣거나 뺄 수 있는 선형 구조로, 후입선출(Last In First Out)의 방식을 따른다.

스택에 대해서 생각해볼 수 있는 대표적인 예로는 브라우저의 History,  터미널의 cd(디렉토리 변경), pwd(현재 경로 찾기) 명령어 등이 있다.

3.1.2 큐

큐(queue)는 먼저 집어넣은 데이터가 먼저 나오는 선입선출(First In First Out) 구조로 저장하는 형식을 말한다.

큐에 대해서 생각해볼 수 있는 대표적인 예로는 자바스크립트의 비동기 처리, 프린터의 작업 스케줄러 등이 있다. 

3.2 Linked List

Linked List는 프론트에서 자주 쓰이는 자료 구조 중 하나인데, 각 노드가 데이터와 포인터를 가지고 한 줄로 연결되어 있는 방식으로 데이터를 저장하는 자료 구조이다.

노드에 입력하고 삭제되는 것이 많을 때, 예를 들어 주식 현재 가격 등을 표현할 때 이 자료 구조가 쓰인다.

💡 Tips

1. Linked List 직접 구현할 줄 알아야 함
: 코딩 과제로 Linked List를 내는 기업들이 꽤 있기 때문에 알아야 한다! (유튜브 참고!)

2. Single Linked List & Double Linked List
: 둘의 개념을 알고 있어야 하는데, 보통 Single Linked List를 많이 사용하니, 이 개념은 꼭 알아두자.

3. 일반 배열의 문제점 / Array vs Linked List
: 일반 배열과 Linked List의 차이점이 무엇인지, 또 일반 배열의 어떠한 경우에 Linked List를 사용하는지에 대해 알아두자.

4. Linked가 무엇인지 말로 설명하기 #node #head #tail #pointer
: 네 가지 키워드를 활용해서 설명할 수 있어야 한다.

---