Javascript
-
Linked List는 배열과 유사한 선형 데이터 구조입니다. 그러나 배열과 달리 요소는 특정 메모리 위치나 인덱스에 저장되지 않습니다. 오히려 각 요소는 해당 목록의 다음 개체에 대한 포인터 또는 링크를 포함하는 별도의 개체입니다. 노드 그룹으로 구성되며 각 노드에는 다음 노드에 대한 고유한 데이터와 주소가 있습니다. 배열에서 요소는 인덱싱되며 즉시 요소에 도달할 수 있지만 Linked List에서는 머리부터 시작하여 원하는 요소에 도달할 때까지 계속 작업해야 합니다. Linked List의 장점은 Linked List에서 삽입 및 삭제가 배열보다 쉽다는 것입니다. 배열은 단 한개의 원소 추가할 때도 뒷쪽에 있는 원소들이 모두 변경되어야 되며 10만개 이상의 배열이면 시간이 많이 소모됩니다. 왜나하면 ..
Javascript 자료구조 시리즈(4) Linked ListLinked List는 배열과 유사한 선형 데이터 구조입니다. 그러나 배열과 달리 요소는 특정 메모리 위치나 인덱스에 저장되지 않습니다. 오히려 각 요소는 해당 목록의 다음 개체에 대한 포인터 또는 링크를 포함하는 별도의 개체입니다. 노드 그룹으로 구성되며 각 노드에는 다음 노드에 대한 고유한 데이터와 주소가 있습니다. 배열에서 요소는 인덱싱되며 즉시 요소에 도달할 수 있지만 Linked List에서는 머리부터 시작하여 원하는 요소에 도달할 때까지 계속 작업해야 합니다. Linked List의 장점은 Linked List에서 삽입 및 삭제가 배열보다 쉽다는 것입니다. 배열은 단 한개의 원소 추가할 때도 뒷쪽에 있는 원소들이 모두 변경되어야 되며 10만개 이상의 배열이면 시간이 많이 소모됩니다. 왜나하면 ..
2021.10.17 -
Queue 큐는 FIFO(선입 선출) 원칙을 따르는 선형 데이터 구조입니다. 여기에는 1) 전면 포인터, 2) 후면 포인터, 두 개의 포인터가 포함됩니다. 앞쪽 포인터는 시작 요소의 주소를 포함하고 뒤쪽 포인터는 큐의 마지막 요소 주소를 포함합니다. 큐 구현에 사용되는 두 가지 주요 방법은 enqueue 및 dequeue 방법입니다. Enqueuing은 큐에서 요소를 추가하는 프로세스이고 Dequeuing은 큐에서 요소를 제거하는 프로세스입니다. 전형적인 실생활의 Queue로 은행을 예를들 수 있습니다. 은행 업무를 보기위해 맨 처음 온 사람이 먼저 업무를 보고 그뒤에 순차적으로 업무를 보기 위해서 창구를 기다립니다. 또한 새로운 고객이 들어오면 가장 맨뒤에 서게 됩니다. 그리고 가장 맨 마지막에 업무를..
Javascript 자료구조 시리즈(3) Queue 대기열Queue 큐는 FIFO(선입 선출) 원칙을 따르는 선형 데이터 구조입니다. 여기에는 1) 전면 포인터, 2) 후면 포인터, 두 개의 포인터가 포함됩니다. 앞쪽 포인터는 시작 요소의 주소를 포함하고 뒤쪽 포인터는 큐의 마지막 요소 주소를 포함합니다. 큐 구현에 사용되는 두 가지 주요 방법은 enqueue 및 dequeue 방법입니다. Enqueuing은 큐에서 요소를 추가하는 프로세스이고 Dequeuing은 큐에서 요소를 제거하는 프로세스입니다. 전형적인 실생활의 Queue로 은행을 예를들 수 있습니다. 은행 업무를 보기위해 맨 처음 온 사람이 먼저 업무를 보고 그뒤에 순차적으로 업무를 보기 위해서 창구를 기다립니다. 또한 새로운 고객이 들어오면 가장 맨뒤에 서게 됩니다. 그리고 가장 맨 마지막에 업무를..
2021.10.07 -
Stack 스택은 LIFO(Last In First Out) 또는 FILO(First In Last Out) 원칙을 따르는 데이터 구조입니다. 👉🏻 스택에 요소를 추가할 때마다 스택 맨 위에 추가됩니다. 👉🏻 스택에 마지막으로 삽입된 항목이 가장 먼저 삭제됩니다. 👉🏻 스택은 ToS(Top of Stack)라고 하는 목록의 한쪽 끝에서만 액세스할 수 있는 요소 목록입니다. 쉽게 말해 멘토스 구조라고 생각하시면 됩니다. 멘토스를 깠을때 가장 처음 먹는부분이 마지막으로 쌓인 멘토스라고 생각하시면 됩니다. 기존에 9~11번 멘토스를 먹었고 11번 pop(), 10번 pop(), 9번 pop() 짝지랑 멘토스 맛을 교환하기로 하였습니다. 그리하여 8번 pop(), 7번 pop(), 6번 pop() 다른 멘토스맛..
Javascript 자료구조 시리즈(2) Stack 스택Stack 스택은 LIFO(Last In First Out) 또는 FILO(First In Last Out) 원칙을 따르는 데이터 구조입니다. 👉🏻 스택에 요소를 추가할 때마다 스택 맨 위에 추가됩니다. 👉🏻 스택에 마지막으로 삽입된 항목이 가장 먼저 삭제됩니다. 👉🏻 스택은 ToS(Top of Stack)라고 하는 목록의 한쪽 끝에서만 액세스할 수 있는 요소 목록입니다. 쉽게 말해 멘토스 구조라고 생각하시면 됩니다. 멘토스를 깠을때 가장 처음 먹는부분이 마지막으로 쌓인 멘토스라고 생각하시면 됩니다. 기존에 9~11번 멘토스를 먹었고 11번 pop(), 10번 pop(), 9번 pop() 짝지랑 멘토스 맛을 교환하기로 하였습니다. 그리하여 8번 pop(), 7번 pop(), 6번 pop() 다른 멘토스맛..
2021.10.04 -
Javascript 자료구조 - Array 배열 자료 구조는 많은 회사에서 가장 자주 테스트하는 주제 중 하나입니다. 서비스를 운영 하다보면 데이터를 어떻게하면 더 효율적으로 저장하고 사용할 수 있는지에 대해 고민을 할 수 밖에 없습니다.어떻게 코드를 짜느냐에 따라 사용자가 원하는 정보를 빠르게 보여줄 수 있는지 서비스의 품질 문제가 달려있기 때문입니다.그러므로 이번 포스트에서는 자바스크립트 데이터 구조를 다뤄보겠습니다.총 아래 7가지 구조를 다뤄볼 예정입니다.- Arrays- Stack- Queues- Linked List- Trees- Graphs- Hashtable자료구조란?자료구조는 데이터를 효율적으로 사용할 수 있도록 저장하고 구성하는 방법입니다. 보다 정확하게는 자료구조는 데이터 값의 그룹, ..
Javascript 자료구조 시리즈(1) Array 배열Javascript 자료구조 - Array 배열 자료 구조는 많은 회사에서 가장 자주 테스트하는 주제 중 하나입니다. 서비스를 운영 하다보면 데이터를 어떻게하면 더 효율적으로 저장하고 사용할 수 있는지에 대해 고민을 할 수 밖에 없습니다.어떻게 코드를 짜느냐에 따라 사용자가 원하는 정보를 빠르게 보여줄 수 있는지 서비스의 품질 문제가 달려있기 때문입니다.그러므로 이번 포스트에서는 자바스크립트 데이터 구조를 다뤄보겠습니다.총 아래 7가지 구조를 다뤄볼 예정입니다.- Arrays- Stack- Queues- Linked List- Trees- Graphs- Hashtable자료구조란?자료구조는 데이터를 효율적으로 사용할 수 있도록 저장하고 구성하는 방법입니다. 보다 정확하게는 자료구조는 데이터 값의 그룹, ..
2021.10.04 -
Enums vs Dictionaries#열거형과 사전 enum은 상수 값으로 이루어져 있는 집합이라고 볼 수 있습니다. Typescript에서는 enum을 지원하지만 javascript에서는지원하지 않습니다. enum MagicianSkills { fireball = '불로 이뤄진 구체를 날림', iceball = '얼음으로 이뤄진 구체를 날림', thunderball = '번개로 이뤄진 구체를 날림', } const useSkill: MagicianSkills = MagicianSkills.fireball console.log('useSkill : ', useSkill); // 결과 useSkill : 불로 이뤄진 구체를 날림 위의 코드를 자바스..
(JS)Clean Code Series4 - Enums vs Dictionaries #열거형과 사전Enums vs Dictionaries#열거형과 사전 enum은 상수 값으로 이루어져 있는 집합이라고 볼 수 있습니다. Typescript에서는 enum을 지원하지만 javascript에서는지원하지 않습니다. enum MagicianSkills { fireball = '불로 이뤄진 구체를 날림', iceball = '얼음으로 이뤄진 구체를 날림', thunderball = '번개로 이뤄진 구체를 날림', } const useSkill: MagicianSkills = MagicianSkills.fireball console.log('useSkill : ', useSkill); // 결과 useSkill : 불로 이뤄진 구체를 날림 위의 코드를 자바스..
2021.08.29 -
Named Callback Function #명명된 콜백 함수 보통 콜백 함수로 익명함수를 자주 많이 씁니다. .reduce(), .map(), .foreach()... 등 안에 () => {} 익명의 함수를콜백 함수로 넣습니다.편하고 필요할때 적시 적소에 쓰이기 때문에 매우 유용합니다. 예를들어 객체 배열 안에 든 값을 map으로아래처럼 가공하여 보여줄 수 있습니다. interface IGoblin { name: string hp: number attack: number } const goblins: Array = [ { name: 'goblin warrior', hp: 200, attack: 30 }, { name: 'gob..
(JS)클린 코드 시리즈3 - Named Callback Function #명명된 콜백 함수Named Callback Function #명명된 콜백 함수 보통 콜백 함수로 익명함수를 자주 많이 씁니다. .reduce(), .map(), .foreach()... 등 안에 () => {} 익명의 함수를콜백 함수로 넣습니다.편하고 필요할때 적시 적소에 쓰이기 때문에 매우 유용합니다. 예를들어 객체 배열 안에 든 값을 map으로아래처럼 가공하여 보여줄 수 있습니다. interface IGoblin { name: string hp: number attack: number } const goblins: Array = [ { name: 'goblin warrior', hp: 200, attack: 30 }, { name: 'gob..
2021.08.22 -
Nullish coalescing operator #?? #널 병합 연산자 실제로 코딩하다보면 null 혹은 undefind를 참조하여 에러가 뜨는 경우가 많습니다.초보인 분들은 에러 메세지를 검색해서 해결할 수도 있고 어느정도 경험이 있으신분들은 아 null 방지를 안해줬구나하고바로 AND(&&)문 아니면 옵셔널 체이닝으로 해결할 수도 있습니다.하지만 &&(AND)문이나 ?.(Optional Chaining)은 참조할 값이 null이면 그냥 아무것도 안들어오게 됩니다.만약 참조할 값이 null인지 체크하고 참조할값이 있다면 참조값을 쓰고 아니라면 다른 default값을 넣어주고 싶을때보통 삼항 연산자를 많이 쓰지요. potion ? 'drink' : 'do nothing' 하지만 널 병합 연산자로 더 ..
(JS)클린 코드 시리즈2 - Nullish coalescing operator #?? #널 병합 연산자Nullish coalescing operator #?? #널 병합 연산자 실제로 코딩하다보면 null 혹은 undefind를 참조하여 에러가 뜨는 경우가 많습니다.초보인 분들은 에러 메세지를 검색해서 해결할 수도 있고 어느정도 경험이 있으신분들은 아 null 방지를 안해줬구나하고바로 AND(&&)문 아니면 옵셔널 체이닝으로 해결할 수도 있습니다.하지만 &&(AND)문이나 ?.(Optional Chaining)은 참조할 값이 null이면 그냥 아무것도 안들어오게 됩니다.만약 참조할 값이 null인지 체크하고 참조할값이 있다면 참조값을 쓰고 아니라면 다른 default값을 넣어주고 싶을때보통 삼항 연산자를 많이 쓰지요. potion ? 'drink' : 'do nothing' 하지만 널 병합 연산자로 더 ..
2021.08.13 -
Optional Chaining #?. #옵셔널 체이닝 개발할때 보통 api에서 데이터를 가져온 후 Object 형식의 useState에서 setState로 데이터를 넣어준 후 보통 아래처럼 데이터를 사용합니다. let fireball = user.skill.fireball; or ({user.skill.fireball})근데 만약 여기서 user.skill이 null이라면 "Uncaught TypeError: Cannot read property 'fireball' of null"이런 문구의 에러가 발생합니다. 여기서 만약 optional chaining을 모른다면let fireball = user.skill && user.skill.fireball;or({user.skill && ..
(JS)클린 코드 시리즈1 - Optional Chaining #?. #옵셔널 체이닝Optional Chaining #?. #옵셔널 체이닝 개발할때 보통 api에서 데이터를 가져온 후 Object 형식의 useState에서 setState로 데이터를 넣어준 후 보통 아래처럼 데이터를 사용합니다. let fireball = user.skill.fireball; or ({user.skill.fireball})근데 만약 여기서 user.skill이 null이라면 "Uncaught TypeError: Cannot read property 'fireball' of null"이런 문구의 에러가 발생합니다. 여기서 만약 optional chaining을 모른다면let fireball = user.skill && user.skill.fireball;or({user.skill && ..
2021.08.08