[Wecode 47~48일차] 자료구조, chart.js 심화

1. 자료구조

프로그램을 만드는데 있어서 자료구조와 알고리즘은 필수인 만큼, 중요하다. 특히 백엔드 엔지니어들의 기본소양이라고 할 수 있다.

 

1) array(리스트)

파이썬 list와 array는  엄격히 다르다. 

자료구조 설명을 위해서 리스트라고 설명하겠다.

리스트는 내부적으로 순서대로 저장을 한다. 그리고 순서가 있으니 당연히 인덱싱이 존재한다.

단점은 검색과 맨앞이나, 중간에서 추가, 삭제시 느리다. 원하는 값을 찾으려면 순서대로 검색해야하고, 중간에서 값을 삭제하면 순번을 맞춰야하니 삭제된 만큼 메모리주소값을 이동시켜야한다.

맨뒤에 넣는 것만 빠르다.

그래서 리스트를 선언시 디폴트로 메모리를 일부 미리확보해 주며, 기존 메모리 바로 뒤에 다른 주소값이 있는 경우,  그다음 데이터가 올 경우 바로뒤에 주소값을  줄수 없으므로, 다른 곳에 다시 메모리를 잡고 이동한다. 

만약에 메모리 뒤에 다른 주소값이 있는 경우 linked list 를 사용하던가, 애초에 메모리를 더 크게 확보한다.

가장 효율적인 구조는 array이며, 다른 자료구조의 베이스가 된다.

 

2) Linked List

리스트는 연결된 주소값을 가지고 있는데, 그런 방식을 극복하기 위한 자료구조이다. 주소값이 이어져있지 않고 떨어져있는 걸 포인터로 연결해주는 방식이다.

단점은 클래스로 저장을 해버리기 때문에 리스트(array)에 비해 메모리를 더 크게 먹는다. 

Linked List는 리사이징을 해야할 확률이 높거나, 수정이나 삭제가 많을 때 사용한다.

 

3) Tuple

튜플은 소수의 자료를 저장할 때 사용한다. 통상 2~5개정도이며, 좌표 등을 예를 들 수 있다. (x,y)

리스트의 메모리 > 튜플 메모리 이며, 튜플은 효율성 때문에 주로 사용하고, 클래스로도 구현이 가능하다.

5개 이상 잘 안쓰는 이유는 요소가 많아지면, 내부값이 뭐인지 찾기 힘들다. 

이런 단점을 보완하기 위해서 named tuple이 있다.(각각의 튜플에 이름을 줘서 관리)

 

4) Set

Array와 비슷하지만 다른 자료구조이며, 중요한 자료구조이다.

중복값을 허용하지 않으며, 순서가 없다. 밑단은 array로 구성되어있다.

Set의 동작원리를 보면 신박하다.

Set은 순서가 없는데, 기본 베이스는 array로 되어있다.  array는 순서가 있고, 인덱싱을 할 수 있다. 그러면 Set은 어떻게 저장을 하는가? 저장을 하려면 array의 용량 범위 내에 있어야한다.

Set에 값을 넣으면 넣은 값은 해싱처리가 되고, 그 해싱값 숫자로 변환하여 array의 용량만큼 나눠서 나머지를 가지고 인덱싱을 한다.

예를 들면 array의 용량이 30이라 치자, Set에  A라는 값을 넣었는데, 이것의 해싱값이 숫자로 변환한 값이 63이라고 한다면, 

63%30은 3이 된다. 인덱스 3번 째에 저장이 된다. 같은 값을 넣으면 해싱값이 같기때문에 결국 나머지 값도 같아서 같은 인덱스에 저장(덮어쓰기)하게되서 중복값이 제거 되는 방식이다.

Set의 장점은 Look up이 빠르다.

키값으로 찾는 방식은 Look up 속도가 빠르다.  그이유는 해싱으로 처리하기 때문임. 

 

추가로 설명하면, DOG라는 단어를 set에 넣었고, 그것의 해싱값을 숫자로 변환한 게 93이라고하면,  기본 array의 용량 30으로 나눈 나머지도 똑같이 3이다. 이렇게 되는경우 해시충돌이 발생하는데,  이럴 경우 보편적으로 같은 주소안에 Linked list를 설치해서 값을 저장한다. 또는 최대한 해시가 충돌되지 않도록 짜야한다. => 자료구조, 해시테이블 참고

 

주로 저장하는 값들은 고유값인 주민번호, 전화번호 등이 있다.

 

5) eqaulity의 어려움.

같은 클래스 Coord(x,y) == Coord(x,y) , Coord() == Coord() 이면 같을까?? 

답은 false이다.  문맥적으로 보면  같은데, 애매하다.

속성값이 무엇인지도 모른다. 이렇게 애매한 경우 사람이 지정을 해주어야한다. 파이썬은 스스로 결정을 못내린다.

def __eq__:  

이런 함수를 구현해 주어야한다. 이녀석은 해시로된 메모리 주소값을 가르킨다.

 

2. chart.js

하나의 차트를 두개의 컴포넌트에 넣었더니, 일어난 일.

첫번째 컴포넌트에서 차트는 나오는데, 두번째 컴포넌트에서 차트는 나오지 않았다.

개발자 도구를 확인한 결과, canvas-render-moniter가 하나만 호출된다.

그래서, 캔버스의 className 값을 props로 넘겨서 중첩되지만 않게 하면 하나의 컴포넌트로 여러개의 차트작성이 가능하다.

 

속성값주는법과 그라데이션까지 입히는 법까지 익혔다. 생각보다 만지기 쉬운 라이브러리 인듯 싶다.