콘요맘떼 개발일지

자바스크립트의 배열 (Array of Javascript) 자바스크립트의 배열은 사실 우리가 아는 일반적인 배열이 아니다. 자바스크립트의 배열은 해시 테이블로 구현된 객체이며 요소들끼리 메모리상으로 나란히 위치하지도 않는다. 배열을 생성한 후 typeof를 통해 그 타입을 출력하면 'object'가 반환됨을 확인할 수 있다. 또한 객체의 모든 프로퍼티들에 대한 정보를 보여주는 Object.getOwnPropertyDescriptor( ) 메소드를 활용하면 자바스크립트의 Array는 인덱스와 length를 프로퍼티 키로 가지는 Object임을 확인할 수 있다. 그렇기 때문에 자바스크립트 객체에 들어가는 요소들은 서로 연속되어 위치하지도 않으며 서로 동일한 타입이 들어가지 않아도 된다. (파이썬의 list와..

스레드 안전 (Thread-safe) 함수, 변수, 객체 등이 여러 스레드로부터 동시에 접근이 이루어져도 프로그램이 정상적으로 실행됨을 의미한다. 스레드 안전은 한 프로세스 내에서 두 개 이상의 스레드가 동시에 작동하는 멀티 스레드 프로그래밍의 조건이다. 그 대표적인 예시로 최근 몇 년동안 핫한 프로그래밍 패러다임인 함수형 프로그래밍은 side effect를 유발하지 않고 thread safe한 순수 함수를 조합하여 멀티 스레드의 동시성 프로그래밍에서 강점을 보인다. 스레드 안전 보장하기 (1) 전역 변수, 힙, 파일 등 여러 스레드가 동시 접근 가능한 공유 자원을 최대한 사용해서는 안 된다. (공유 자원에 접근할 경우 리소스에 lock을 건다.) (2) 핸들, 포인터 등을 활용해 데이터를 간접 접근해서..

집합 (Set) 집합은 중복 없이 값들을 저장하기 위해 사용된다. (중복이 존재하지 않는다는 것이 집합의 가장 큰 특징이다.) 순서가 존재하지 않는 Non-Linear 자료구조이며 중복을 허용하지 않기 때문에 똑같은 값을 삽입하면 그 중 하나만이 저장된다. 집합은 빠른 탐색에 뛰어난 성능을 보이기 때문에 특정 값이 집합 내에 존재하는지 곧바로 확인할 수 있다. 집합은 삽입할 데이터의 해시값을 구한 후 그에 해당하는 버킷에 데이터를 저장한다. 그를 통해 동일한 값에 대한 중복을 제거할 수 있으며 특정 값의 보유 여부를 빠르게 탐색할 수 있다. ※ Javascript에서의 집합 자바스크립트에서는 집합이 기본적으로 구현되어 있다. 자바스크립트의 집합인 Set 객체는 원시 값과 객체 참조를 모두 저장할 수 있으..

리스트 (List) 리스트는 가장 대표적인 자료구조 중 하나로 Array, List, Stack, Queue 등과 함께 데이터에 순서가 존재하는 선형 자료구조(Linear Data Structure)에 속한다. (참고로 비선형 자료구조에는 Tree, Graph, Set 등이 존재한다.) 리스트의 구현 방법 리스트를 구현하는 방법에는 크게 두 가지 방법이 존재한다. 논리적으로만 데이터를 연속하게 저장하는 방법이 있고 두 번째는 물리적으로도 데이터를 연속하게 저장하는 방법이다. 1. ArrayList ArrayList는 데이터를 논리적 순서에 따라 물리적 메모리에 연속해서 저장한다. 메모리 중간에 빈 공간이 존재하면 안되기 때문에 데이터를 중간에 삽입하거나 삭제할 경우 데이터 위치를 재조정하는 작업이 필요하..

맵 (Map) 맵은 데이터가 Key와 Value의 쌍으로 이루어진 자료구조를 의미한다. key를 통해 value에 접근할 수 있으며 key와 value를 연결하는 행위를 맵핑(mapping)이라고 표현한다. 맵의 특징 (1) (일반적으로) key는 중복되어서는 안 된다. (대신 value는 중복되어도 무관한다.) (2) 데이터의 순서는 보장되지 않으며 인덱스도 존재하지 않는다. (애초에 Map에서 순서는 전혀 중요한 개념이 아니다.) (3) 맵은 검색 연산에서 뛰어난 성능을 보인다. 맵의 종류와 특징 1. HashMap 해싱을 통해서 key와 value를 저장한다. 데이터의 위치는 해싱 결과에 의해 결정되기 때문에 순서는 보장되지 않는다. 하나의 key에 대해 하나의 value만 존재할 수 있다. 만약 ..

덱은 스택과 큐에 대한 기본적인 이해가 있는 것이 좋다. 혹시 스택과 큐의 개념을 잘 모른다면 관련 내용을 먼저 확인하고 오길 바란다. (스택, 큐) 덱 (Dequeue, Double-ended Queue) 덱은 스택과 큐를 합친 것이라고 보면 된다. 덱은 양쪽 끝에서 데이터를 넣고 뺄 수 있다. (큐에서 가장 앞에 위치한 데이터를 뽑아내는 연산과 표현이 같지만 동일한 개념이 아니므로 주의해야 한다.) 실제로 입출력 모두 양쪽에서 가능하도록 설정하는 덱은 별로 존재하지 않으며 기존 스택 혹은 큐에서 입력 혹은 출력 중 하나만 양쪽에서 이루어질 수 있도록 확장한 개념으로 많이 사용한다. (1) 스크롤 (scroll) : 출력은 양방향이 가능하지만 입력은 한쪽 끝만 가능한 덱 (2) 쉘프 (shelf) : ..

큐 (Queue) 큐는 FIFO(First-In First-Out)를 따르는 자료구조이다. 즉, 가장 먼저 넣은 아이템이 가장 먼저 제거되며 입구와 출구가 다른 자료구조이다. 일상적인 개념에서 '줄서기'에 빗대어 많이 표현된다. 큐의 연산 (1) enqueue( ) : 큐의 마지막에 새로운 아이템을 추가한다. (2) dequeue( ) : 큐의 첫 번째 항목을 제거한다. (3) front( ) : 큐의 첫 번째 항목을 알려준다. (가장 먼저 출력될 아이템) (4) rear( ) : 큐의 마지막 항목을 알려준다. (가장 최근에 추가된 아이템) 큐의 성능 - 탐색 : 큐에서 탐색은 모든 아이템을 하나하나 훑어봐야 되기 때문에 O(n)시간이 필요하다. - 삽입 : 상수 시간에 가능하다. - 제거 : 상수 시간..

스택 (Stack) 스택은 LIFO(Last-In First-Out)를 따르는 자료구조이다. 즉, 가장 최근에 넣은 아이템이 가장 먼저 제거되며 입구와 출구가 한 쪽만 열려있다고 생각하면 된다. 스택의 연산 (1) push( ) : 스택에 새로운 아이템을 추가한다. (가장 윗부분) (2) pop( ) : 스택의 가장 위에 있는 항목을 제거하고 반환한다. (3) isEmpty( ) : 스택이 텅 비어있는지 여부를 알려준다. (4) peek( ) 혹은 top( ) : 스택의 가장 위에 있는 항목을 보여준다. 스택의 성능 - 탐색 : 스택에서 탐색은 모든 아이템을 하나하나 훑어봐야 되기 때문에 O(n)시간이 필요하다. - 삽입 : 마지막에 데이터를 하나 추가해주면 되기 때문에 상수 시간에 가능하다. - 제거 ..

CSS Grid Grid는 현 시점에서 가장 궁극적인 형태의 레이아웃을 제공해준다. 이미 Flex만으로도 레이아웃을 잘 짤 수 있는데 Grid를 공부해야 하는 이유는 무엇일까? Flex는 1차원의 개념에서 그치지만 Grid는 2차원의 레이아웃을 표현할 수 있다. Grid를 활용하게 되면 여러 라인의 아이템을 표현할 때 불필요한 row 혹은 column 컨테이너를 만들어주지 않아도 된다. 물론 Grid가 Flex보다 무조건 좋은 것이라고 볼 수는 없다. Grid는 전체적인 레이아웃을 잡아주거나 2차원의 레이아웃을 표현할 때 강점을 지닌다. 하지만 1차원의 레이아웃을 표현할 때는 단순한 Flex를 활용하는 것이 훨씬 효과적이다. 따라서 상황에 따라 Flex와 Grid 중 필요한 것을 적절히 활용할 수 있는 ..

TIL (Today I Learned) 2022.02.25 오늘 읽은 범위 4장. 주석 책에서 기억하고 싶은 내용을 써보세요. 나쁜 코드에 주석을 달지 마라. 새로 짜라. (p.68) 저작권 정보와 소유권 정보와 같은 법적인 이유로 회사가 정립한 표준에 맞춰서 주석을 작성하는 것은 타당하다. (p.70) 경우에 다라 해당 방식으로 구현하게 된 의도를 주석으로 작성해주면 코드에 대한 이해도를 향상시킬 수 있다. (p.71) 인수나 반환값이 표준 라이브러리나 변경 불가능한 코드에 속하는데 그 의미가 한 눈에 드러나지 않는다면 주석을 사용하는 것도 좋다. ex) JAVA - a.compareTo(b) == 0 // a == b (p.72) 주석을 프로그램의 결과에 대한 경고로 활용할 수도 있다. 그를 통해 다..