├── .gitignore ├── Data_structure └── README.md ├── ECMA_Script └── README.md ├── FetchData └── README.md ├── Introduction └── README.md ├── JS_Data_scructure ├── Answer.js └── README.md ├── JS_Objects ├── Answer.js └── README.md ├── LICENSE └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | 9 | # Diagnostic reports (https://nodejs.org/api/report.html) 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 11 | 12 | # Runtime data 13 | pids 14 | *.pid 15 | *.seed 16 | *.pid.lock 17 | 18 | # Directory for instrumented libs generated by jscoverage/JSCover 19 | lib-cov 20 | 21 | # Coverage directory used by tools like istanbul 22 | coverage 23 | *.lcov 24 | 25 | # nyc test coverage 26 | .nyc_output 27 | 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 29 | .grunt 30 | 31 | # Bower dependency directory (https://bower.io/) 32 | bower_components 33 | 34 | # node-waf configuration 35 | .lock-wscript 36 | 37 | # Compiled binary addons (https://nodejs.org/api/addons.html) 38 | build/Release 39 | 40 | # Dependency directories 41 | node_modules/ 42 | jspm_packages/ 43 | 44 | # TypeScript v1 declaration files 45 | typings/ 46 | 47 | # TypeScript cache 48 | *.tsbuildinfo 49 | 50 | # Optional npm cache directory 51 | .npm 52 | 53 | # Optional eslint cache 54 | .eslintcache 55 | 56 | # Microbundle cache 57 | .rpt2_cache/ 58 | .rts2_cache_cjs/ 59 | .rts2_cache_es/ 60 | .rts2_cache_umd/ 61 | 62 | # Optional REPL history 63 | .node_repl_history 64 | 65 | # Output of 'npm pack' 66 | *.tgz 67 | 68 | # Yarn Integrity file 69 | .yarn-integrity 70 | 71 | # dotenv environment variables file 72 | .env 73 | .env.test 74 | 75 | # parcel-bundler cache (https://parceljs.org/) 76 | .cache 77 | 78 | # Next.js build output 79 | .next 80 | 81 | # Nuxt.js build / generate output 82 | .nuxt 83 | dist 84 | 85 | # Gatsby files 86 | .cache/ 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 88 | # https://nextjs.org/blog/next-9-1#public-directory-support 89 | # public 90 | 91 | # vuepress build output 92 | .vuepress/dist 93 | 94 | # Serverless directories 95 | .serverless/ 96 | 97 | # FuseBox cache 98 | .fusebox/ 99 | 100 | # DynamoDB Local files 101 | .dynamodb/ 102 | 103 | # TernJS port file 104 | .tern-port 105 | -------------------------------------------------------------------------------- /Data_structure/README.md: -------------------------------------------------------------------------------- 1 | # 자료구조 기초 2 | 3 | ## 들어가기 전에 4 | 5 | 우리는 과거와 현재를 포함해 미래에도 Computer Science(이하 CS)를 공부하면서 필연적으로 만나게 되는 영역이 있습니다. 그것들은 'CS 기초'라고 불리며, 컴퓨터 공학 분야에서 일하는 엔지니어들에게 가장 중요한 영역으로 생각되고 있습니다. 6 | 7 | > 기초라고 해서 쉽다는 것이 아닙니다. 기초는 말 그대로 학문의 뼈대를 이루고, 심화적인 내용이나 현대의 트랜드를 이해하기 위해 필수적으로 알고 있어야 하는 내용을 말합니다. 더불어 기초가 부족하다는 것은 하나의 '부채' 혹은 '빚'으로 작용해 미래에 좋지 않은 영향을 끼치게 됩니다. 8 | > 이를 극복하기 위해 여기서 언급하는 모든 기초를 학습할 필요가 있습니다. 물론 당장의 업무를 처리하기 위해 기초를 후순위로 미루는 것을 이해할 수는 있지만, 결코 바랍직하지 않은 방법입니다. 9 | 10 | CS 기초는 대표적으로 다음의 내용을 포함하고 있습니다. 11 | 12 | * Data structure, 자료구조 13 | * Algorithm, 알고리즘 14 | * Computer network, 컴퓨터 네트워크 15 | * Computer architecture , 컴퓨터 구조 16 | * Operating system, 운영체제 17 | * Database, 데이터베이스 18 | * ... 19 | 20 | 위에서 언급한 기초들은 Web, Game, Graphics 등 다양한 분야에서 공통적으로 통용되는 영역입니다. 각 영역의 중요도는 업무의 형태에 따라 다르겠지만, 보편적으로 모든 내용을 학습해야 합니다. 21 | 22 | > 위의 내용을 커리큘럼으로 배운 전공자가 아닌 컴퓨터를 처음 접하는 사람이 모든 영역을 학습하고 실무에 진입하는 것은 불가능에 가깝습니다. 대부분의 회사에서도 위의 내용을 검증하려 노력하지만, 절대적인 평가보다는 상대적인 평가를 위주로 인재를 판단합니다. 따라서 당장 모든 내용을 학습할 필요는 없지만, 필연적으로 학습해야 함에는 틀림이 없기 때문에 각 영역에 대한 지속적인 학습이 권장됩니다. 23 | 24 | ## 자료구조란 25 | 26 | 여기서 우리는 기초 중에서 자료구조를 학습하게 됩니다. 자료구조는 하나 이상의 데이터를 구성하기 위한 구조를 나타내며, 그 종류는 다양하지만 대표적으로 다음의 6가지가 존재합니다. 27 | 28 | * Array, 배열 29 | * List, 리스트 30 | * Queue, 큐 31 | * Stack, 스택 32 | * Graph, 그래프 33 | * Tree, 트리 34 | 35 | 보편적으로 이 6가지만 이해하면 자료구조의 기초를 학습했다고 할 수 있습니다. 우리는 이 자료를 통해 6가지의 자료 구조를 학습해보고 어떤 순간에 사용되는지 살펴보도록 하겠습니다. 36 | 37 | > 보편적으로 6가지로 대표되지만, 본질적으로 따지고 보면 배열과 리스트를 이용해 구현하는 자료 구조의 집합이라고 이해할 수도 있습니다. 그 이유는 큐와 스택, 그래프, 트리는 배열을 통해 구현될 수도, 리스트를 통해 구현될 수도 있기 때문입니다. 38 | > 39 | > 경우에 따라 Set, Hash, HashMap, HasjTable 등을 포함시킬 수도 있지만, 보편적인 관점에서의 기초를 학습할 예정이기 때문에 이 자료에서는 키워드만 언급하고 넘어가도록 하겠습니다. 40 | 41 | 추가적으로 이 글에서는 자료구조의 기초를 포함하고 있지만, 자료구조의 모든 내용을 포함하고 있지 않습니다. 따라서 이 글을 시작으로 자료구조를 깊게 공부하시길 바라겠습니다. 42 | 43 | ### 선형 구조와 비선형 구조 44 | 45 | 일반적으로 자료구조를 구분할 때 선형과 비선형 구조로 구분하기도 합니다. 각각 선의 형태를 띄는 것과 그렇지 않은 것으로 풀어 말할 수 있으며, 선형 구조는 배열, 리스트, 큐, 스택을 말하고 비선형 구조는 그래프와 트리를 말합니다. 46 | 47 | > 그 이유는 글이 진행되면서 서서히 해결되기 때문에 당장은 각각을 구분하는 기준이 존재한다는 것을 이해하고 넘어가도록 합시다. 48 | 49 | ### 자료구조가 중요한 이유 50 | 51 | 자료구조는 적은 수의 데이터를 관리하기 위해 고안된 것이 아닙니다. 가령 1개의 데이터를 처리하는데 1초가 걸리는 크기 1의 구조가 있다고 하면, 이 구조를 이용해 1000개의 데이터를 처리하려면 1000의 크기와 1000초가 필요하게 됩니다. 52 | 이때 자료구조는 1개의 데이터를 처리하는 시간과 크기를 줄여 데이터를 처리하는데 더 적은 크기와 더 적은 시간이 필요하게끔 하는 역할을 합니다. 53 | 54 | 따라서 자료구조가 중요한 이유는 프로그램 내에서 자료를 가장 효율적으로 처리하기 위함이고, 그것을 통해 보다 성능 좋은 프로그램을 만들기 위함입니다. 55 | 56 | ### 논리적으로 생각하기 57 | 58 | 자료구조는 논리적인 형태를 말합니다. 그 의미는 구현자의 의도에 따라 그 형태가 변한다는 것입니다. 모든 데이터의 형태는 논리적인 구조이며, 구현자가 직접 구현하고 해당 자료구조의 형태로 동작하게 만들어야 합니다. 가령 javascript를 이용해 Queue의 동작을 따라하는 Array를 구현했다면 이는 Queue라고 할 수 있습니다. 59 | 60 | 이는 자율적인 동시에 위헙하기도 합니다. 구현자의 의도와 명확하게 부합하는 자료구조를 만들어야 하기 때문입니다. 61 | 62 | ## Array, 배열 63 | 64 | 개발을 하다보면 가장 쉽게 만날 수 있는 배열입니다. 대부분의 언어에서 그 형태를 제공하기 때문에 다음과 같은 선언만으로 구현할 수 있습니다. 65 | 66 | ```text 67 | // code-1 68 | 69 | ['사과', '바나나']; 70 | 71 | ``` 72 | 73 | 위의 내용은 '사과'라는 문자와 '바나나'라는 문자를 저장하고 있는 크기 2의 fruits이라는 문자열 배열을 말합니다. 이처럼 하나의 배열은 특정한 데이터의 집합을 의미합니다. 여기서 문자열 배열이라고 말한 이유는 문자열을 저장하고 있는 배열이기 때문입니다. 74 | 75 | 더불어 각각의 문자열에는 '인덱스(index)'라는 개념이 존재합니다. 이때의 인덱스는 0부터 시작해 각 데이터의 위치를 나타내며, 다음과 같이 사용됩니다. 76 | 77 | ```text 78 | 79 | fruits = ['사과', '바나나', '멜론', '파인애플', '포도']; 80 | 81 | fruits[0]; 82 | // '사과' 83 | ``` 84 | 85 | > index가 0부터 시작하는 이유는 중요합니다. 결론적으로 보면 모든 데이터가 0부터 시작하기 때문인데, 자료구조가 중요한 이유처럼 데이터를 최대한 효율적으로 사용하기 위해 고안된 구조입니다. 현대에 이르러서는 이정도 차이는 크게 중요하지 않기 때문에 0이 아닌 1부터 시작하는 구조가 등장하기도 하지만, 과거부터 전해져오는 하나의 관례로 통용되게 되었습니다. 86 | > Javascript의 배열은 리스트 형태로 제공됩니다. 따라서 Javascript의 배열을 사용할 때는 배열이 아닌 List의 특징을 아는 것이 중요합니다. 또한, Javascript와 같이 Array 형태의 List를 Array라고 이야기하며, 배열과의 차이는 '데이터에 대한 인덱스 종속 여부'라는 것을 기억하세요. 87 | 88 | 배열은 보편적으로 동일한 형태의 여러 데이터를 저장하기 위해 사용합니다. 가령 code-2의 코드 대신 code-3의 코드를 사용합니다. 89 | 90 | ```text 91 | // code-2 92 | 93 | apple = '사과'; 94 | banana = '바나나'; 95 | melon = '멜론'; 96 | pineapple = '파인애플'; 97 | grape = '포도'; 98 | 99 | ``` 100 | 101 | 대신 102 | 103 | ```text 104 | // code-3 105 | 106 | fruits = ['사과', '바나나', '멜론', '파인애플', '포도']; 107 | 108 | ``` 109 | 110 | 을 사용합니다. 111 | 112 | ### 배열의 한계 113 | 114 | 배열은 분명한 한계가 존재합니다. 한 번 고정적으로 선언된 배열은 한 번 선언되면 그 크기를 변경하기 어렵습니다. 따라서 배열은 정해진 크기의 데이터를 저장할 때 사용하면 좋습니다. 115 | 116 | > 물론 Javascript 등의 언어에서는 배열의 크기를 변경하는 것은 어렵지 않을 수 있습니다. 다만, 일반적인 관점에서 배열을 관리할 때는 크기를 변경하는 것은 까다롭기 때문에 배열은 크기가 정해진 구조에서 사용할 것을 권장합니다. 117 | 118 | 더불어 배열은 다수의 데이터를 그룹핑해서 효율적으로 관리하고, 각각을 인덱스로 구분합니다. 따라서 인덱스를 알고 있다고면, 해당 자료를 찾기 쉽다는 장점이 있습니다. 다만, 인덱스를 이용해 데이터를 가져오기 위해서는 인덱스가 데이터에 종속적으로 연결되어 있어야 하는데, 이는 한 데이터가 삭제되면 해당 인덱스를 비워둬야 한다는 단점을 갖기도 합니다. 119 | 120 | ![array-io](https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/module/1335/2879.png) 121 | 122 | 위의 형태는 3번째 인덱스에 존재했던 40이라는 데이터를 삭제한 형태입니다. 배열의 경우는 위와 같이 40이라는 데이터를 삭제하면 해당 자리를 비워두게 됩니다. 123 | 124 | ## List, 리스트 125 | 126 | 리스트는 배열과 달리 인덱스가 데이터에 종속적이지 않습니다. 리스트는 배열이 갖는 인덱스 구조의 장점을 버린 대신 각 데이터의 빈틈을 없애는 방법을 선택했습니다. 따라서 리스트는 데이터의 삽입과 삭제에 대한 데이터 낭비가 줄고 검색 시간이 길어졌다는 특징을 가지고 있습니다. 가령 배열의 한계에서 언급한 것처럼 '40'이라는 데이터의 삭제가 일어나면 다음과 같이 40의 자리를 50이 채우게 됩니다. 127 | 128 | ![list-io1](https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/module/1335/2880.png) 129 | 130 | 이처럼 리스트는 Array와 유사하지만, 인덱스가 데이터에 종속적이지 않습니다. 데이터를 추가하는 것도 마찬가지입니다. 리스트에서는 다음과 같은 데이터가 있다고 할 때, 131 | 132 | ![list-io2](https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/module/1335/2881.png) 133 | 134 | 50이라는 데이터를 추가하면 다음과 같은 형태가 됩니다. 135 | 136 | ![list-io3](https://s3.ap-northeast-2.amazonaws.com/opentutorials-user-file/module/1335/2883.png) 137 | 138 | 따라서 일반적으로 리스트를 부를 때 순서가 있는 데이터의 모임이라고 이야기합니다. 이때 빈 데이터 껍데기는 허용하지 않기 때문에 리스트를 사용할 때 유의해야 합니다. 139 | 140 | > 추가적으로 Set이라는 데이터와 비교할 때 배열과 리스트는 중복을 허용하지만 Set은 중복을 허용하지 않는다는 특징이 있습니다. 141 | 142 | 리스트에는 Array List와 Linked List가 존재합니다. 둘의 가장 큰 차이는 '데이터의 연결 구조'입니다. Array List는 배열을 이용해 Javascript의 배열 구조처럼 리스트를 구현한 것을 말합니다. 143 | 144 | ```javascript 145 | const fruits = ['사과', '바나나'] 146 | ``` 147 | 148 | Array List는 내부적으로 배열을 사용하기 때문에 인덱스를 이용해 데이터에 접근하는 것이 가능합니다. 따라서 데이터를 조회하는 속도가 빠릅니다. 하지만, 데이터를 추가하거나 삭제하게 되면 각 순서가 일정하게 변경되어야 하기 때문에(중간의 데이터가 한 칸 이동하면 다른 데이터들도 이동이 필요하기 때문) 데이터의 삽입과 삭제에 상대적으로 오랜 시간이 소요됩니다. 149 | 150 | 반면 Linked List는 배열을 사용하지 않고, 하나의 데이터에 다음 엘리먼트의 위치 정보를 포함하게 됩니다. 이런 구조는 특정 데이터를 조회하는 인덱스가 존재하지 않기 때문에 조회하는 속도가 느립니다. 하지만, 데이터를 추가하거나 삭제할 때 다른 데이터에 영향을 주지 않기 때문에 상대적으로 빠른 시간 내에 데이터의 삽입/삭제를 진행합니다. 151 | 152 | 두 List 구조는 각각 장단점을 가지고 있습니다. 따라서 구현자에 의해 적재적소에 사용하는 것이 바람직합니다. 일반적으로 고정된 데이터의 검색이 필요한 경우에는 Array List가, 검색이 필요없는 가변적인 데이터가 필요한 경우에는 Linked List를 사용합니다. 153 | 154 | ## Queue, 큐 155 | 156 | 큐는 선입선출(FIFO, First In First Out)으로 데이터가 쌓이며, 데이터를 삽입하는 enqueue과 데이터를 추출하는 dequeue라는 키워드로 데이터를 관리합니다. 157 | 158 | 일반적인 큐는 선형이지만, 크기가 제한되어 있고 빈 공간을 사용하려면 모든 자료를 꺼내거나 자료를 한 칸씩 옮겨야 한다는 단점이 있기 때문에 환(동근 고리)형 큐를 구현해 선형 큐의 문제점(배열로 큐를 선언할시 큐의 삭제와 생성이 계속 일어났을때, 마지막 배열에 도달후 실제로는 데이터공간이 남아있지만 오버플로우가 발생)을 보완할 수도 있습니다. 159 | 160 | 여기서는 기본적인 선형 큐만 살펴보도록 하겠습니다. 선형 큐는 다음과 같은 모양을 가집니다. 161 | 162 | ![queue-io](https://cdn.programiz.com/sites/tutorial2program/files/queue.jpg) 163 | 164 | 앞서 말한 것처럼 선입선출의 구조로, 먼저 들어온 데이터가 먼저 빠져나가는 것을 볼 수 있습니다. 165 | 166 | ### 큐는 일상에서 167 | 168 | 일상에서는 '줄 서기', '편의점의 음료수 배치' 등을 떠올릴 수 있습니다. 169 | 170 | 큐는 보편적으로 순서대로 처리해야 하는 작업을 임시로 저장해두는 버퍼(Buffer)로서 사용됩니다. 그래서 대부분의 Buffer 타입이 큐의 형태를 가지고 있습니다. 171 | 172 | ## Stack, 스택 173 | 174 | 스택은 다음과 같은 이미지를 상상하시면 됩니다. 175 | 176 | ![stack-intro](https://cdn.programiz.com/sites/tutorial2program/files/stack-of-plates_0.jpg) 177 | 178 | 흔히 스택을 쌓는다고 이야기하는 것처럼 스택은 하나의 바구니에 데이터들이 순차적으로 담겨져있는 형태를 가집니다. 큐와는 다르게 선입후출(FILO, First In Last Out) 혹은 후입선출(LIFO, Last In First Out)으로 데이터가 쌓이게 됩니다(일반적으로 후입선출이라고 부릅니다). 179 | 180 | 데이터의 삽입에는 push, 삭제에는 pop이라는 용어가 사용되며 다음과 같은 형태로 데이터를 관리하게 됩니다. 181 | 182 | ![stack-io](https://cdn.programiz.com/sites/tutorial2program/files/stack.jpg) 183 | 184 | ### 스택은 일상에서 185 | 186 | 일상에서는 물건을 쌓아 올리는 상황이나 질서있게 스쿨버스를 탄 상황(먼저 탄 순서대로 내리는 경우)을 생각하시면 됩니다. 또한, 웹 브라우저의 '앞으로 가기'와 '뒤로 가기'의 동작이 스택에 해당합니다. 187 | 188 | > 실 사례로는 트리 구조의 탐색에서 깊이 우선 탐색(Depth First Search: 한 노드의 끝까지 탐색한 후 옆으로 이동하는 방식)알고리즘에서 사용됩니다. 189 | 190 | ## Graph, 그래프 191 | 192 | 상하위 개념이 없는 Node(노드 혹은 버텍스(vertax))와 각 노드 사이의 Edge(엣지 혹은 아크(Arc))의 집합으로 데이터를 이루는 형태를 말합니다. 다음과 같은 모양을 가집니다. 193 | 194 | ![graph-intro](https://cdn.programiz.com/sites/tutorial2program/files/graph-vertices-edges.jpg) 195 | 196 | 코드에서는 2차원 개념으로 표현되며, code-4과 같은 형태를 가집니다. 197 | 198 | ```text 199 | // code-4 200 | 201 | Node = {0, 1, 2, 3} 202 | Edge = {(0,1), (0,2), (0,3), (1,2)} 203 | Graph = {Node, Edge} 204 | 205 | ``` 206 | 207 | 더불어 그래프는 배열과 리스트로 구현될 수 있으며 일반적으로 다음의 형태로 제공됩니다. 208 | 209 | ### 인접 행렬(Adjacency Matrix) 210 | 211 | ![graph-matrix](https://cdn.programiz.com/sites/tutorial2program/files/graph-adjacency-matrix.jpg) 212 | 213 | ### 인접 리스트(Adjacency List) 214 | 215 | ![graph-list](https://cdn.programiz.com/sites/tutorial2program/files/graph-adjacency-list.jpg) 216 | 217 | 각 엣지는 벡터와 스칼라로 재현되며, 방향성의 여부에 따라 그래프의 형태가 달라지게 됩니다. 스칼라 엣지로 구현된 그래프는 무방향성(Undirected) 그래프, 벡터 엣지로 구현된 그래프는 방향성(Directed) 그래프라고 이야기하며 각각 다음과 같은 형태를 가집니다. 218 | 219 | ### 방향성(Directed) 그래프 220 | 221 | ![directed-graph](https://kr.mathworks.com/help/matlab/math/simpledirectedgraph_ko_KR.png) 222 | 223 | ### 무방향성(Undirected) 그래프 224 | 225 | ![undirected-graph](https://kr.mathworks.com/help/matlab/math/simpleundirectedgraph_ko_KR.png) 226 | 227 | 앞서 잠깐 이야기한 것처럼 그래프틑 비선형적 구조를 가지며, 관계를 표현하는 데이터에서 주로 사용됩니다. 228 | 229 | ### 그래프는 일상에서 230 | 231 | 일상에서는 지하철의 노선도에서 사용됩니다. 일반적으로 매칭 알고리즘이나 추천 알고리즘에서 사용되기도 합니다. 232 | 233 | ## Tree, 트리 234 | 235 | 트리는 여러 데이터가 계층 구조로 연결된 형태를 표현할 때 사용됩니다. 트리라는 이름 그대로 뿌리(root)를 기준으로 잎사귀들(Leafs)이 아래로 자라는 나무를 생각하시면 됩니다. 트리는 다음의 용어로 표현됩니다. 236 | 237 | * node, 노드 - 트리의 데이터를 저장하는 각 항목을 이야기합니다. 238 | * child node, 자식 노드 - 노드 A의 하층에 노드 B가 있다면, 노드 B를 노드 A의 '자식 노드'라고 부릅니다. 239 | * parent node, 부모 노드 - 노드 B의 상층에 노드 A가 있다면, 노드 A를 노드 B의 '부모 노드'라고 부릅니다. 240 | * root node, 뿌리 노드 - 트리의 가장 상층에 있는 노드를 말합니다. 241 | * leaf node, 잎 노드 - 자식 노드가 없는 모든 노드를 말합니다. 242 | * ancestor node, 조상 노드 - 노드 A의 자식을 따라 내려갔을 때 노드 B에 도달할 수 있다면, 노드 A를 노드 B의 조상 노드라고 부릅니다. 243 | * descendant node, 자손 노드 - 노드 A가 노드 B의 조상 노드일 때, 노드 B를 노드 A의 자손 노드라고 부릅니다. 244 | * sibling node, 형제 노드 - 같은 부모 노드를 갖는 다른 노드를 보고 형제 노드라고 부릅니다. 245 | 246 | 트리는 여러 형태를 가지지만, 우리는 오늘 그 중 가장 기초라고 할 수 있는 2진(Binary) 트리만을 살펴보도록 하겠습니다. 2진 트리는 다음과 같은 구조로 되어있습니다. 247 | 248 | ![binary-tree](https://cdn.programiz.com/sites/tutorial2program/files/tree-concept.jpg) 249 | 250 | ### 트리는 일상에서 251 | 252 | 뒤집어진 나무의 형태를 띄며, 계층 구조를 나타내거나 계층 구조를 통해 알고리즘의 효율을 높이고자 할 때 주로 사용합니다. 일반적으로 댓글이나 카테고리 구분 등에서 사용합니다. 253 | 254 | ### 참고자료 255 | 256 | [opentutorials 자료 구조](https://opentutorials.org/module/1335/8636) 257 | [programiz의 stack](https://www.programiz.com/dsa/stack) 258 | [programiz의 queue](https://www.programiz.com/dsa/queue) 259 | [programiz의 graph](https://www.programiz.com/dsa/graph) 260 | [programiz의 tree](https://www.programiz.com/dsa/trees) 261 | -------------------------------------------------------------------------------- /ECMA_Script/README.md: -------------------------------------------------------------------------------- 1 | # ECMA Script 2 | 3 | ## JavaScript VS ECMA Script 4 | 5 | 일반적으로 혼용되는 개념인 JavaScript와 ECMA Script의 차이를 알아봅니다. 우리는 일반적으로 JS의 버전을 이야기할 때 ES5, ES6 등의 용어를 사용합니다. 하지만 불운하게도 이 용어의 표기법을 이해하기 위해선 ECMA Script가 무엇인지를 알아야 합니다. 6 | 7 | ### ECMA Script란 8 | 9 | ECMA Script는 ECMA International이라는 표준 제정 비영리 표준화 기구에서 발표한 ECMA-262라고 부르는 기술 규격을 다르게 표기한 용어입니다. 이는 범용적인 목적으로 작성되는 스크립트 언어에 대한 명세를 담고 있으며, 흔히 EC6라고 부르는 명세는 ECMA-262 표준의 제 6판이라고 생각하면 됩니다. 자바스크립트는 ECMA Script를 토대로 작성됩니다(다만, 모든 스크립트 언어가 ECMA Script를 따르는 것은 아닙니다). 10 | 11 | ### JavaScript란 12 | 13 | 그렇다면 자바스크립트 혹은 JS라고 부르는 이 용어는 무엇일까요? JavaScript는 웹에서 사용하는 하나의 스크립트 언어이며, 보편적으로 ECMA Script와 구분없이 JavaScript라고 부릅니다. 더불어 현대의 웹 브라우저를 구성하는 핵심이 되는 언어입니다. 그 이유는 현대의 모든 웹 브라우저는 JavaScript 엔진을 바탕으로 구성되어 있기 때문입니다. 14 | 15 | > 대표적으로 Google Chromium의 V8, Mozilla Firefox의 SpiderMonkey, Microsoft Edge의 Chakra가 자바스크립트 엔진이라고 이야기할 수 있습니다. 16 | > 17 | > 또한, 웹 브라우저는 JavaScript 뿐만 아니라 웹 렌더링 엔진이 함께 존재하고(가령 Chromium은 웹 렌더링을 위해 Blink라는 엔진을 사용하고, Firefox는 Gecko라는 엔진을 사용합니다), 다양한 마이크로프로세서(IA-32, x64, ARM 등의 하드웨어 명령 집합 아키텍처)를 지원하도록 설계되었습니다. 18 | 19 | 근 10년 사이에 JavaScript를 포함한 스크립트 언어(Python, C# 등)가 Machine Leaning, Data Science, Cross Platform Developments 등 다양한 곳에 활용하고 있습니다. 그 중에서도 JavaScript는 Node.js라고 부르는 JavaScript 런타임을 통한 Server side에서의 활용이 활발하게 발전하고 있습니다. 20 | 21 | ### 결론 22 | 23 | ECMA Script는 ECMA-262라고 부르는 하나의 표준이며, 모든 웹 브라우저에서 JavaScript를 사용할 때 ECMA-262를 따를 것을 권장하고 있습니다. 여기서 '권장'은 '필수'가 아니기 때문에 웹 브라우저마다 지원하는 ECMA-262의 버전(ES6, ES7 등)이 다를 수 있습니다. 24 | 25 | > ES3는 모든 브라우저가 지원하고 있습니다. 따라서 ES3로 개발하게 되면 모든 웹 브라우저에서 정상적으로 동작하는 웹 서비스를 개발할 수 있습니다. 하지만 ES3만으로는 빠르게 변화하는 현대의 웹 개발 속도를 따라가기에 한계가 있기 때문에 webpack, babel, polyfill 등의 도구와 기법을 통해 요구사항에 맞는 웹 서비스를 적절하게 구현해야 합니다. 26 | 27 | 마지막으로 ECMA Script는 거대한 변곡점이 있을 때를 제외하곤 이전의 버전을 폐기하고 있습니다. 이는 '역사판'이라고도 불리며 [MDN 자바스크립트 언어 자료](https://developer.mozilla.org/ko/docs/Web/JavaScript/%EC%96%B8%EC%96%B4_%EB%A6%AC%EC%86%8C%EC%8A%A4)를 통해 현황을 살펴볼 수 있습니다. 28 | 29 | > 폐기한다는 건 이전의 내용을 삭제하는 것이 아닌 이전의 내용 중 개선점을 반영한 새로운 결과물을 표준 명세에 포함시킨다는 의미입니다. 따라서 ES3(ECMA Script 3rd Edition)를 폐기하고 ES4를 작성한다고 해서 ES3의 내용을 삭제하겠다는 의미가 아닌 ES3의 내용 중 ES4에 반영할 내용을 포함해 새로운 명세를 작성한다는 의미입니다. 30 | 31 | ## 현재의 ECMA Script 32 | 33 | 앞서 언급한 [MDN 자바스크립트 언어 자료](https://developer.mozilla.org/ko/docs/Web/JavaScript/%EC%96%B8%EC%96%B4_%EB%A6%AC%EC%86%8C%EC%8A%A4)를 참고하면, 현재 표준으로 사용되는 ECMA Script 버전은 다음과 같이 3개입니다. 34 | 35 | - ECMA-402 5th Edition, ECMAScript 2018 국제화 API 표준 36 | - ECMA-262 9th Edition, ECMAScript 2018 37 | - ECMA-262 10th Edition, ECMAScript 2020(작성중, 2019년을 넘길 예정이라 버전이 변경됨) 38 | 39 | 모든 ECMA Script의 명세를 살펴보는 일은 이곳에서 진행하지 않습니다. 다만, 이 자료에서는 그 흐름을 알아보고 필요할 때 찾을 수 있도록 다음과 같은 기본적인 키워드 가이드를 제공하고 있습니다. 40 | 41 | > [ES3](http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf)를 제외한 이유는 [ES3](http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262,%203rd%20edition,%20December%201999.pdf)는 가장 기본이자 뼈대를 이루는 부분이기 때문입니다. 흔히 자바스크립트의 기초를 이야기할 때 거론되는 부분이고, 현대의 웹 개발에서는 특별한 경우를 제외하고는 각 스크립트의 버전을 구분해 사용하지 않기 때문에 별도로 언급하지 않고 넘어가도록 하겠습니다. 42 | 43 | ### [ES5](http://www.ecma-international.org/publications/files/ECMA-ST-ARCH/ECMA-262%205th%20edition%20December%202009.pdf) 44 | 45 | - Array에 forEach, map, filter, reduce, some, every와 같은 내장 함수(Method)를 지원하기 시작함. Method Chaining 가능 46 | - Object에 대한 getter / setter를 지원하기 시작함 47 | - 자바스크립트 strict 모드를 지원하기 시작함 48 | - XML 대신 JSON을 지원하기 시작함 49 | - Bind Method를 지원하기 시작함 50 | 51 | ### [ES6, ECMAScript 2015](http://www.ecma-international.org/ecma-262/6.0/) 52 | 53 | 가장 큰 변곡점이라고 할 수 있음 54 | 55 | - let, const 키워드를 추가해 블록 단위 스코프 개념을 지원하기 시작함 56 | - Arrow Function 문법을 추가해 Lexical this를 지원하기 시작함 57 | - Class를 지원하기 시작함 58 | - Template Literals를 지원하기 시작함 59 | - module import / export를 이용한 모듈화를 지원하기 시작함 60 | - 원시 타입(primitive type)에 Symbol Type이 추가됨 61 | - 더나은 비동기 처리를 위해 Promise를 지원하기 시작함 62 | - 더나은 비동기 처리를 위해 iterator / generator를 지원하기 시작함 63 | - 더나은 동작 처리를 위해 새로운 형태의 정의 방법인 Proxy Object를 지원하기 시작함 64 | - Destructuring Assignment(구조 분해 할당)을 지원하기 시작함 65 | - 디폴트 파라미터 값을 지원하기 시작함 66 | - Tagged Template Literal을 지원하기 시작함 67 | 68 | ### [ES7, ECMAScript 2016](http://www.ecma-international.org/ecma-262/7.0/) 69 | 70 | 특별한 변경 사항이 없음, 일부 동작의 구조 개선 및 변경 71 | 72 | ### [ES8, ECMAScript 2017](http://www.ecma-international.org/ecma-262/8.0/) 73 | 74 | - async / await을 추가함 75 | - Object에 values, entries 등을 지원하기 시작함 76 | - Trailing commas in function 77 | 78 | ### [ES9, ECMAScript 2018](http://ecma-international.org/ecma-262/9.0/) 79 | 80 | - Object에 rest, spread 등을 지원하기 시작함 81 | - Promise에 finally를 지원하기 시작함 82 | - Async iteration일 지원하기 시작함 83 | - 정규표현식이 강화됨 84 | 85 | ### [ES10, ECMAScript 2020](https://tc39.es/ecma262/) 86 | 87 | (ECMA Script는 2년 주기로 큰 변화를 가져다준다는 인식이 있던) 많은 이들의 예상과 다르게 큰 변화보다는 기존의 데이터 관리 방법 및 내장 함수가 추가됨 88 | 89 | ## 마지막으로 90 | 91 | JavaScript를 이용해 개발한다면 JavaScript와 관련된 모든 내용을 숙지하고 있는 것이 권장되지만, 그렇지 않아도 당장 개발하는데는 지장이 없습니다. 물론 기술 면접이나 브리핑 등을 해야 한다면, 상황에 따른 요구사항이 존재하겠지만 그렇지 않은 경우라면 각 키워드를 숙지해놓고 추후에 필요할 때마다 찾아보는 것도 방법입니다. 92 | 93 | > 앞서 언급한 것처럼 모든 내용을 숙지하는 것이 권장됩니다. 94 | 95 | [참고 자료 - ECMA Script, Ecma-262](https://www.ecma-international.org/publications/files/ECMA-ST/Ecma-262.pdf) 96 | -------------------------------------------------------------------------------- /FetchData/README.md: -------------------------------------------------------------------------------- 1 | # Fetch Data 2 | 3 | JS에서 데이터를 받아오는(fetch) 방법은 크게 axios와 fetch API를 사용하는 방법이 있습니다. 둘의 차이는 다음과 같습니다. 4 | 5 | ## Axios 6 | 7 | ## Fetch API 8 | 9 | 10 | -------------------------------------------------------------------------------- /Introduction/README.md: -------------------------------------------------------------------------------- 1 | # 개발자가 되기 위한 첫 걸음 2 | 3 | 많은 분들이 IT 직군으로 진로를 생각할 때 대부분 막연하게 '개발자'가 되고 싶다는 생각으로 준비없이 진입함. 하지만 실무에서 원하는 인재에 대한 정보 부족, 직업적 의식이 부족하기 때문에 학습과 성장에 어려움을 겪게됩니다. 이를 해결하기 위해 실무에서 원하는 인재에 대한 단편적인 정보와 직업적 의식을 제공하려 합니다. 4 | 여기서 말하는 실무에서 원하는 인재는 크게 회사의 특성 및 수행할 업무의 형태에 따라 다를 수 있다. 물론 모든 것을 아우르면 좋겠지만, 주니어가 현실적으로 모든 영역에 부합하는 인재가 되는 것은 어불성설이기 때문에 우선적으로 이 글을 읽는 독자에 한해서 한 카테고리에 대한 관심과 전문 지식을 보유하고 있다는 전제 하에 전체적인 숲을 볼 수 있도록 각 카테고리를 설명하려 합니다. 5 | 2019년의 공학적인(Engineering) 직무는 아래처럼 크게 3가지로 나눌 수 있으며, 각각의 직무는 또다시 회사의 규모 및 수행할 프로젝트의 형태에 따라 형태가 달라지게 됩니다. 6 | 7 | * Front-end engineering 8 | * Back-end engineering 9 | * DevOps engineering 10 | 11 | 일반적으로 하나의 제품(Production)은 다음과 같은 직무들이 함께 완성해 나갑니다. 저는 이것들을 개발(Developments) 및 구현이라고 이야기하도록 하겠습니다. 12 | 13 | * Engineering 14 | * Design 15 | * Data science 16 | * QA(Quality assurance) 17 | * ... 18 | 19 | 결과적으로 이렇게 만들어진 제품들이 모여 하나의 사업(business)을 이루게 되는데, 하나의 사업은 위의 여러 직무들과 함께 다음과 같은 직무들과 함께 완성됩니다. 20 | 21 | * Developments 22 | * Sales 23 | * Marketing 24 | * HR(Human Resources) 25 | * Accounting 26 | * Law 27 | * CS(Customer Service) 28 | * Specific Domain knowledges 29 | * ... 30 | 31 | 따라서 제품만 존재한다고 사업이 완성되는 것도 아니고, 기술적인 내용만 충족한다고 제품이 완성되는 것이 아닙니다. 따라서 우리는 사업을 구성하는 모든 분야가 중요하다는 것을 명심해야 하고, 공학(Engineering)만으로는 사업을 지탱할 수 없다는 것을 알고 있어야 합니다. 32 | 그렇다면 공학자(Engineer)는 공학만을 알아야 할까요? 이 질문에 대한 답은 조직의 특성마다 다릅니다. 어떤 조직에서는 한 명의 구성원은 스스로의 직무에 해당하는 내용만 알면 되고, 또다른 조직에서는 그 직무를 충족할 인재가 없어 한 명의 구성원이 여러 직무를 수행하기도 합니다. 그렇기 때문에 제품을 만드는 모든 구성원은 '디자이너'나 '공학자'가 아닌 '개발자(Developer)'를 지향해야 합니다. 33 | 34 | > 다만, 사업을 하는 모든 구성원은 '사업가'를 지향할 필요는 없습니다. 한 사업의 방향은 경영을 바탕으로 한 경영 조직에 의해 결정되지만, 한 제품의 방향은 제품을 구성하는 모든 구성원의 합치에 의해 결정되기 때문입니다. 35 | 36 | 이 자료는 앞서 언급한 '개발자'를 지향하는 '공학자'에 의해 작성되었으며, 실제로 '개발'보다는 '공학'에 대해 다루게 됩니다. 더불어 모든 공학을 아우르기 위해 노력하겠지만, 근본적으로 Javascript를 다루고 있기 때문에 초점이 Javascript에 맞춰져 있습니다. 37 | 이 점을 참고하시어 길다면 길고, 짧다면 짧다고 할 수 있는 자료겠지만 이 자료를 통해 스스로가 생각하는 커리어의 지향점에 가까워질 수 있었으면 좋겠습니다. 이 글의 내용에 공감을 하실 수도, 아닐 수도 있지만 결과적으로 우리는 모두 각자의 지향점을 가지고 이 자료를 읽고 있기 때문입니다. 38 | 39 | > 글을 쓰던 중 [Software Engineering at Google](http://shop.oreilly.com/product/0636920296423.do)을 발견했는데, 여기서는 software developer과 software engineer의 차이를 업무를 중심으로 설명하고 있었습니다. 40 | > 결과적으로 책에서 software developer를 좁은 범위로, software engineer를 더 큰 범위로 구분하는 것에 동의했고, 이 글에서 이야기하는 개발자(developer)의 개념을 product developer라고 정의하고 싶어졌습니다. 41 | 42 | 감사합니다. 43 | 2019.12.16 고명진(Ray) 씀 44 | -------------------------------------------------------------------------------- /JS_Data_scructure/Answer.js: -------------------------------------------------------------------------------- 1 | /** Array 2 | * ### 요구사항 3 | * JS의 Array를 이용해 길이 5 이상의 string 배열 만들기 4 | * JS의 Array를 이용해 기본적인 내장 함수(push, pop, shift, unshift, indexOf, splice, slice) 사용해보기 5 | * JS의 Array를 이용해 심화적인 내장 함수(map, filter, find, keys, concat, flat, entries, includes) 사용해보기 6 | */ 7 | 8 | var fruits = ["사과", "바나나", "파인애플", "멜론", "수박"]; 9 | 10 | fruits.push("망고"); 11 | console.log(fruits.pop()); 12 | console.log(fruits); 13 | console.log(fruits.shift()); 14 | console.log(fruits); 15 | console.log(fruits.unshift("딸기")); 16 | console.log(fruits); 17 | console.log(fruits.indexOf("바나나")); 18 | console.log(fruits.shift()); 19 | console.log(fruits.splice(0, 1)); 20 | console.log(fruits); 21 | var FruitsCopy = fruits.slice(); 22 | console.log(fruits); 23 | console.log(FruitsCopy); 24 | 25 | // ** map ** 26 | var array1 = [1, 4, 9, 16]; 27 | 28 | // pass a function to map 29 | var map1 = array1.map(x => x * 2); 30 | 31 | console.log(map1); 32 | // expected output: Array [2, 8, 18, 32] 33 | 34 | // ** filter ** 35 | var words = ["spray", "limit", "elite", "exuberant", "destruction", "present"]; 36 | 37 | var result = words.filter(word => word.length > 6); 38 | 39 | console.log(result); 40 | // expected output: Array ["exuberant", "destruction", "present"] 41 | 42 | // ** find ** 43 | var array1 = [5, 12, 8, 130, 44]; 44 | 45 | var found = array1.find(element => element > 10); 46 | 47 | console.log(found); 48 | // expected output: 12 49 | 50 | // ** keys ** 51 | var array1 = ["a", "b", "c"]; 52 | var iterator = array1.keys(); 53 | 54 | for (var key of iterator) { 55 | console.log(key); 56 | } 57 | 58 | // ** concat ** 59 | var array1 = ["a", "b", "c"]; 60 | var array2 = ["d", "e", "f"]; 61 | 62 | console.log(array1.concat(array2)); 63 | // expected output: Array ["a", "b", "c", "d", "e", "f"] 64 | 65 | // ** flat ** 66 | var arr1 = [1, 2, [3, 4]]; 67 | arr1.flat(); 68 | // [1, 2, 3, 4] 69 | 70 | var arr2 = [1, 2, [3, 4, [5, 6]]]; 71 | arr2.flat(); 72 | // [1, 2, 3, 4, [5, 6]] 73 | 74 | var arr3 = [1, 2, [3, 4, [5, 6]]]; 75 | arr3.flat(2); 76 | // [1, 2, 3, 4, 5, 6] 77 | 78 | // ** entries ** 79 | var array1 = ["a", "b", "c"]; 80 | 81 | var iterator1 = array1.entries(); 82 | 83 | console.log(iterator1.next().value); 84 | // expected output: Array [0, "a"] 85 | 86 | console.log(iterator1.next().value); 87 | // expected output: Array [1, "b"] 88 | 89 | // ** includes ** 90 | var array1 = [1, 2, 3]; 91 | 92 | console.log(array1.includes(2)); 93 | // expected output: true 94 | 95 | var pets = ["cat", "dog", "bat"]; 96 | 97 | console.log(pets.includes("cat")); 98 | // expected output: true 99 | 100 | console.log(pets.includes("at")); 101 | // expected output: false 102 | 103 | /** Linked List 104 | * ### 요구사항 105 | * 하나의 연속되는 항목들이 포인터로 연결된다. 106 | * 마지막 항목은 Null을 가리킨다. 107 | * 프로그램이 수행되는 동안 크기가 커지거나 작아질 수 있다. 108 | * (시스템 메모리가 허용하는 한) 필요한 만큼 길어질 수 있다. 109 | * 메모리 공안을 낭비하지 않는다(하지만 포인터를 위한 추가의 메모리를 필요로 한다). 110 | * 데이터의 삽입과 삭제가 가능해야 함. 111 | */ 112 | 113 | class Node { 114 | constructor(data) { 115 | this.data = data; 116 | this.next = null; 117 | } 118 | } 119 | 120 | class LinkedList { 121 | constructor() { 122 | this.length = 0; 123 | this.head = null; 124 | } 125 | 126 | append(data) { 127 | var node = new Node(data); 128 | var curr; 129 | if (this.head == null) { 130 | this.head = node; 131 | } else { 132 | curr = this.head; 133 | while (curr.next) { 134 | curr = curr.next; 135 | } 136 | curr.next = node; 137 | } 138 | this.length++; 139 | } 140 | 141 | removeAt(pos) { 142 | if (pos > -1 && pos < this.length) { 143 | var curr = this.head; 144 | var prev, 145 | index = 0; 146 | if (pos === 0) { 147 | this.head = curr.next; 148 | } else { 149 | while (index++ < pos) { 150 | prev = curr; 151 | curr = prev.next; 152 | } 153 | prev.next = curr.next; 154 | } 155 | this.length--; 156 | curr.next = null; 157 | return curr.data; 158 | } 159 | return null; 160 | } 161 | } 162 | 163 | var list = new LinkedList(); 164 | list.append("s"); 165 | list.removeAt(0); 166 | 167 | /** Queue 168 | * FIFO(First In First Out) 형태로 데이터의 삽입과 삭제가 일어남 169 | * 데이터를 삽입하는 enqueue와 삭제하는 dequeue 170 | */ 171 | class Queue { 172 | constructor() { 173 | this._arr = []; 174 | } 175 | enqueue(item) { 176 | this._arr.push(item); 177 | } 178 | dequeue() { 179 | return this._arr.shift(); 180 | } 181 | } 182 | 183 | var queue = new Queue(); 184 | queue.enqueue(1); 185 | queue.enqueue(2); 186 | queue.enqueue(3); 187 | queue.dequeue(); // 1 188 | 189 | /** Stack 190 | * LIFO(Last In First Out) 형태로 데이터의 삽입과 삭제가 일어남 191 | * 데이터를 삽입하는 push와 삭제하는 pop 192 | */ 193 | class Stack { 194 | constructor() { 195 | this._arr = []; 196 | } 197 | push(item) { 198 | this._arr.push(item); 199 | } 200 | pop() { 201 | return this._arr.pop(); 202 | } 203 | peek() { 204 | return this._arr[this._arr.length - 1]; 205 | } 206 | } 207 | 208 | var stack = new Stack(); 209 | stack.push(1); 210 | stack.push(2); 211 | stack.push(3); 212 | stack.pop(); // 3 213 | 214 | /** Graph 215 | * 하나의 노드는 특정한 값을 가지고 있다. 216 | * 하나의 노드는 하나 이상의 엣지를 가질 수 있다. 단, null도 허용한다. 217 | * 그래프의 데이터는 선언 시 결정된다. 단, 추가 혹은 삭제 기능을 포함해 구현하면 좋다. 218 | */ 219 | 220 | class Node { 221 | constructor(content, next = []) { 222 | this.content = content; 223 | this.next = next; // this is for edge 224 | } 225 | } 226 | 227 | var tomato = new Node("토마토"); 228 | var garlic = new Node("마늘", [new Node("양파"), tomato]); 229 | 230 | var graph = new Node("대파", [ 231 | garlic, 232 | tomato, 233 | new Node("고구마", [new Node("호박"), garlic]) 234 | ]); 235 | 236 | function traverse(node) { 237 | console.log(node.content); 238 | for (let next of node.next) { 239 | traverse(next); 240 | } 241 | } 242 | 243 | traverse(graph); 244 | 245 | /** Tree 246 | * 하나의 노드는 특정한 값을 가지고 있다. 247 | * 하나의 노드는 하나 이상의 자식을 가질 수 있다. 단, null도 허용한다. 248 | * 트리의 데이터는 선언 시 결정된다. 단, 추가 혹은 삭제 기능을 포함해 구현하면 좋다. 249 | */ 250 | 251 | class Node { 252 | constructor(content, children = []) { 253 | this.content = content; 254 | this.children = children; 255 | } 256 | } 257 | 258 | var tree = new Node("채소", [ 259 | new Node("양파"), 260 | new Node("토마토"), 261 | new Node("고구마", [new Node("줄기")]) 262 | ]); 263 | 264 | function traverse(node) { 265 | console.log(node.content); 266 | for (let child of node.children) { 267 | traverse(child); 268 | } 269 | } 270 | 271 | traverse(tree); 272 | -------------------------------------------------------------------------------- /JS_Data_scructure/README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Data Structure 2 | 3 | 자바스크립트를 학습하기 위한 훌륭한 방법은 수없이 많습니다. 따라서 이 자료에서는 자바스크립트를 사용하기 위한 기초적인 내용(문법, 특징 등)을 다루지 않고, 그것을 기반으로 해 실무에서 중요하다고 생각하는 데이터를 다루는 방법에 집중하려 합니다. 4 | 5 | 이를 위해 가장 기본적으로 JavaScript를 활용해 흔히 '자료구조'라고 부르는 데이터의 형태를 구현해보도록 하겠습니다. 만약 자료구조에 대한 기본 지식이 없다면, 본 자료의 '[자료구조](/Data_structure/README.md)' 부분을 참고하시길 바랍니다. 6 | 7 | 이 장에서는 실습을 진행합니다. 각 내용에 대해 먼저 직접 구현해보고, '답안'을 확인해보도록 합시다. 8 | 9 | > 모든 예제는 원활한 실습을 위해 크롬 개발자 도구를 활용합니다. 10 | > MDN 참고 금지! console.log를 이용해 값을 확인하고, 각 항목의 요구사항을 충족시켜봅시다. 11 | 12 | ## Array, 배열 13 | 14 | 자바스크립트의 Array는 순수한 '배열'이 아닌 링크드 리스트 기반 Hash Map입니다. 하지만 여기서는 Array를 하나의 배열로 생각하고 간단한 예제를 진행하도록 하겠습니다. 또한, Array를 관리하는 내장 함수를 학습하도록 합니다. 15 | 16 | ### 배열 요구사항 17 | 18 | - JS의 Array를 이용해 길이 5 이상의 string 배열 만들기 19 | - JS의 Array를 이용해 기본적인 내장 함수(push, pop, shift, unshift, indexOf, splice, slice) 사용해보기 20 | - JS의 Array를 이용해 심화적인 내장 함수(map, filter, find, keys, concat, flat, entries, includes) 사용해보기 21 | 22 | [답안](/JS_Data_scructure/Answer.js) 23 | 24 | ## List, 리스트 25 | 26 | 자바스크립트의 Array는 순수한 '배열'이 아닌 링크드 리스트 기반 Hash Map입니다. 하지만 여기서는 일부러 Linked List를 직접 구현해보도록 하겠습니다(Array List는 생략). 27 | 28 | ### 리스트 요구사항 29 | 30 | - 하나의 연속되는 항목들이 포인터로 연결된다. 31 | - 마지막 항목은 Null을 가리킨다. 32 | - 프로그램이 수행되는 동안 크기가 커지거나 작아질 수 있다. 33 | - (시스템 메모리가 허용하는 한) 필요한 만큼 길어질 수 있다. 34 | - 메모리 공안을 낭비하지 않는다(하지만 포인터를 위한 추가의 메모리를 필요로 한다). 35 | - 데이터의 삽입과 삭제가 가능해야 함. 36 | 37 | 하나의 노드는 다음과 같은 모양을 가진다. 38 | 39 | ![list-node](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=http%3A%2F%2Fcfile21.uf.tistory.com%2Fimage%2F2767B53B57E8D1460C1D10) 40 | 41 | 또한, 각 노드는 다음과 같은 모양으로 연결된다. 42 | 43 | ![list-nodes](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=http%3A%2F%2Fcfile29.uf.tistory.com%2Fimage%2F25354A3857E8D15C1CA6DF) 44 | 45 | [답안](/JS_Data_scructure/Answer.js) 46 | 47 | ## Queue, 큐 48 | 49 | ### 큐 요구사항 50 | 51 | - FIFO(First In First Out) 형태로 데이터의 삽입과 삭제가 일어난다. 52 | - 데이터를 삽입하는 enqueue와 삭제하는 dequeue을 구현한다. 53 | 54 | [답안](/JS_Data_scructure/Answer.js) 55 | 56 | ## Stack, 스택 57 | 58 | ### 스택 요구사항 59 | 60 | - LIFO(Last In First Out) 형태로 데이터의 삽입과 삭제가 일어난다. 61 | - 데이터를 삽입하는 push와 삭제하는 pop을 구현한다. 62 | 63 | [답안](/JS_Data_scructure/Answer.js) 64 | 65 | ## Graph, 그래프 66 | 67 | 여러 그래프 형태 중 무방향성 그래프이자 인접 리스트인 그래프를 구현하는 것을 목적으로 한다. 68 | 69 | ### 그래프 요구사항 70 | 71 | - 하나의 노드는 특정한 값을 가지고 있다. 72 | - 하나의 노드는 하나 이상의 엣지를 가질 수 있다. 단, null도 허용한다. 73 | - 그래프의 데이터는 선언 시 결정된다. 단, 추가 혹은 삭제 기능을 포함해 구현하면 좋다. 74 | 75 | [답안](/JS_Data_scructure/Answer.js) 76 | 77 | ## Tree, 트리 78 | 79 | 여러 트리 형태 중 가장 기본적인 트리의 형태를 구현하는 것을 목적으로 한다. 80 | 81 | ### 트리 요구사항 82 | 83 | - 하나의 노드는 특정한 값을 가지고 있다. 84 | - 하나의 노드는 하나 이상의 자식을 가질 수 있다. 단, null도 허용한다. 85 | - 트리의 데이터는 선언 시 결정된다. 단, 추가 혹은 삭제 기능을 포함해 구현하면 좋다. 86 | 87 | [답안](/JS_Data_scructure/Answer.js) 88 | -------------------------------------------------------------------------------- /JS_Objects/Answer.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Object.entries()를 사용해 Object의 key, value를 확인해보자. 3 | */ 4 | 5 | const object1 = { 6 | a: "somestring", 7 | b: 42 8 | }; 9 | 10 | for (let [key, value] of Object.entries(object1)) { 11 | console.log(`${key}: ${value}`); 12 | } 13 | 14 | // expected output: 15 | // "a: somestring" 16 | // "b: 42" 17 | // order is not guaranteed 18 | 19 | /** 20 | * Object.assign()을 사용해 두 개의 Object를 합쳐보자. 21 | */ 22 | 23 | const target = { a: 1, b: 2 }; 24 | const source = { b: 4, c: 5 }; 25 | 26 | const returnedTarget = Object.assign(target, source); 27 | 28 | console.log(target); 29 | // expected output: Object { a: 1, b: 4, c: 5 } 30 | 31 | console.log(returnedTarget); 32 | // expected output: Object { a: 1, b: 4, c: 5 } 33 | 34 | /** 35 | * Object.freeze()를 사용해 Object를 동결시켜보자. 36 | */ 37 | 38 | const obj = { 39 | prop: 42 40 | }; 41 | 42 | Object.freeze(obj); 43 | 44 | obj.prop = 33; 45 | // Throws an error in strict mode 46 | 47 | console.log(obj.prop); 48 | // expected output: 42 49 | 50 | /** 51 | * Object.seal()을 사용해 Object를 밀봉해보고 freeze와의 차이를 생각해보자. 52 | */ 53 | 54 | const object1 = { 55 | property1: 42 56 | }; 57 | 58 | Object.seal(object1); 59 | object1.property1 = 33; 60 | console.log(object1.property1); 61 | // expected output: 33 62 | 63 | delete object1.property1; // cannot delete when sealed 64 | console.log(object1.property1); 65 | // expected output: 33 66 | // seal과 freeze, 둘의 차이는 seal은 쓰기 가능한 속성의 값은 밀봉 후에도 변경할 수 있고, freeze는 그렇지 않다는 것입니다. 67 | 68 | /** 69 | * Object.values()를 사용해 Object의 값 리스트를 확인해보자. 70 | */ 71 | 72 | const object1 = { 73 | a: "somestring", 74 | b: 42, 75 | c: false 76 | }; 77 | 78 | console.log(Object.values(object1)); 79 | // expected output: Array ["somestring", 42, false] 80 | 81 | /** 82 | * Object.keys()를 사용해 Object의 키 리스트를 확인해보자. 83 | */ 84 | 85 | const object1 = { 86 | a: "somestring", 87 | b: 42, 88 | c: false 89 | }; 90 | 91 | console.log(Object.keys(object1)); 92 | // expected output: Array ["a", "b", "c"] 93 | 94 | /** 95 | * 다음의 Object를 기반으로 Javascript의 Object 내장 함수를 바탕으로 데이터를 관리해보자. 96 | * 튜브의 모든 정보를 구하시오 97 | * 라이언과 콘의 모든 정보를 구하시오 98 | * 라이언의 나이를 구하시오 99 | * 프로도와 무지의 나이 합을 구하시오 100 | * 펭수와 라이언의 나이 합을 갖는 캐릭터의 description을 구하시오 101 | * 모든 캐릭터를 나이 순으로 정렬하시오 102 | * 튜브의 description에서 '말괄량이'를 '개구쟁이'로 바꾸시오 103 | * 모든 캐릭터에게 string 형태의 성별(gender) 정보를 입력하시오 104 | */ 105 | 106 | // 이 부분은 답안을제공 하지 않습니다. 각자가 생각하는 데이터를 창의적으로 작성하고 토론형으로 어떻게 구현했는지 이야기합니다. 107 | -------------------------------------------------------------------------------- /JS_Objects/README.md: -------------------------------------------------------------------------------- 1 | # JavaScript Objects 2 | 3 | JavaScript에서는 모든 데이터가 객체로 취급됩니다. 객체 지향 개발 방법론에서 이야기하는 객체와 같은 의미를 갖지만, 현실의 사물을 객체화해 데이터로 표현하는 것과는 다른 맥락의 의미를 갖고 있습니다. 표준 내장 객체는 다음과 같습니다. 4 | 5 | - Array 6 | - Boolean 7 | - Date 8 | - Error 9 | - Function 10 | - JSON 11 | - Math 12 | - Number 13 | - Object 14 | - RegExp 15 | - String 16 | - Map 17 | - Set 18 | - WeakMap 19 | - WeakSet 20 | 21 | 여기서는 대표적으로 사용되는 Object 객체와 JSON 객체를 살펴보도록 하겠습니다. 그 이유는 JavaScript를 사용해 객체를 관리할 때 주로 사용하는 형태가 Object와 JSON(JavaScript Object Notation)이기 때문입니다. Object와 JSON은 속성-값 또는 키-값 쌍으로 이루어진 데이터의 형태이며 다음과 같이 표현할 수 있습니다. 22 | 23 | ## Object 24 | 25 | Object는 JavaScript 내부에서 키-값으로 데이터를 관리할 수 있는 가장 기본적인 형태로 제공됩니다. 콜론으로 나뉘어져 있는 키(문자열)와 값(어떤 값이나 가능)의 쌍을 갖는 데이터의 집합으로 이루어집니다. 다음과 같이 표현할 수 있습니다. 26 | 27 | ```js 28 | // object 29 | { 30 | name: "Moon", 31 | age: 0, 32 | isStudent: true 33 | } 34 | ``` 35 | 36 | ## Json 37 | 38 | JSON은 JavaScript의 Object와 큰 차이는 없지만, 일반적으로 키에 쌍따옴표를 붙인다거나 마지막 데이터에 콤마를 허용하지 않는 등의 미세한 차이점을 가지고 있습니다. 39 | 40 | ```json 41 | // json 42 | { 43 | "name": "Moon", 44 | "age": 0, 45 | "isStudent": true 46 | } 47 | ``` 48 | 49 | ## 둘의 용도 차이 50 | 51 | 둘의 형태는 유사하며, 일반적으로 JavaScript 문서 내부에서 키-값으로 데이터를 관리할 때는 Object의 형태를 사용하고 JavaScript 문서 외부에서 키-값으로 데이터를 관리할 때는 JSON의 형태를 사용합니다. 52 | 53 | > 특별한 차이는 없지만, 둘은 분명히 다르기 때문에 이 점에 유의하고 다음으로 넘어갑시다. 54 | 55 | ## 실습 56 | 57 | 둘의 차이는 명백하지만, 우리는 당장 JavaScript 내부에서 키-값의 형태를 갖는 기본적인 데이터를 다뤄볼 것입니다. 따라서 실습은 JavaScript의 Object를 사용해 진행됩니다. 요구사항에 맞춰 Object를 사용해보고 '답안'을 확인합시다. 58 | 59 | ### 요구사항 60 | 61 | - Object.entries()를 사용해 Object의 key, value를 확인해보자. 62 | - Object.assign()을 사용해 두 개의 Object를 합쳐보자. 63 | - Object.freeze()를 사용해 Object를 동결시켜보자. 64 | - Object.seal()을 사용해 Object를 밀봉해보고 freeze와의 차이를 생각해보자. 65 | - Object.values()를 사용해 Object의 값 리스트를 확인해보자. 66 | - Object.keys()를 사용해 Object의 키 리스트를 확인해보자. 67 | - 다음의 Object를 기반으로 JavaScript의 Object 내장 함수를 바탕으로 데이터를 관리해보자(MDN 활용 가능). 68 | - 튜브의 모든 정보를 구하시오 69 | - 라이언과 콘의 모든 정보를 구하시오 70 | - 라이언의 나이를 구하시오 71 | - 프로도와 무지의 나이 합을 구하시오 72 | - 펭수와 라이언의 나이 합을 갖는 캐릭터의 description을 구하시오 73 | - 모든 캐릭터를 나이 순으로 정렬하시오 74 | - 튜브의 description에서 '말괄량이'를 '개구쟁이'로 바꾸시오 75 | - 모든 캐릭터에게 string 형태의 성별(gender) 정보를 입력하시오 76 | 77 | ```javaScript 78 | [ 79 | { 80 | id: "1", 81 | name: "라이언", 82 | age: 2, 83 | description: "한국에서 태어난 멋쟁이 사자" 84 | }, 85 | { 86 | id: "2", 87 | name: "프로도", 88 | age: 4, 89 | description: "한국에서 태어난 귀여운 강아지" 90 | }, 91 | { 92 | id: "3", 93 | name: "튜브", 94 | age: 5, 95 | description: "한국에서 태어난 말괄량이 오리" 96 | }, 97 | { 98 | id: "4", 99 | name: "무지", 100 | age: 1, 101 | description: "한국에서 태어난 사랑스러운 단무지" 102 | }, 103 | { 104 | id: "5", 105 | name: "콘", 106 | age: 2, 107 | description: "한국에서 태어난 근엄한 악어" 108 | }, 109 | { 110 | id: "6", 111 | name: "펭수", 112 | age: 3, 113 | description: "한국에서 태어난 매력쟁이 펭귄" 114 | } 115 | ]; 116 | ``` 117 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 고명진, Ray 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # js4newbie 2 | 3 | 신입 엔지니어를 위한 js 가이드 4 | 5 | ## Curriculum 6 | 7 | - [Introduction](/Introduction/README.md) 8 | - [ECMA_Script(버전 별 키워드 정리)](/ECMA_Script/README.md) 9 | - [Data_structure(자료구조)](/Data_structure/README.md) 10 | - [JS_data_structure, JS를 사용한 자료구조(실습 위주)](/JS_Data_scructure/README.md) 11 | - 실습: JS를 사용해 배열 활용, 리스트, 큐, 스택, 그래프, 트리 구현하기 12 | - [JS_Objects, JS를 사용한 JS의 Object형 관리(실습 위주)](/JS_Objects/README.md) 13 | - 실습: 내장 메서드를 이용해 JS의 Object형 다루기 14 | - [FetchData, JS를 사용한 data fetching(실습 위주)](/FetchData/README.md) 15 | - 실습: Fetch API와 Axios를 활용한 data fetching with Poke API 16 | --------------------------------------------------------------------------------