├── .babelrc
├── README.md
├── model
└── data.json
├── package-lock.json
├── package.json
├── public
└── index.html
├── src
├── favicon.ico
├── index.js
└── style.css
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | // .babelrc
2 | {
3 | "presets": [
4 | "@babel/preset-env"
5 | ]
6 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # project-skill-map
2 |
3 | ## 🚀소개
4 | ---
5 |
6 | [생활코딩](https://opentutorials.org/course/1)에 접속해서 `수업 소개` 섹션으로 가면 수업간의 관계를 확인할 수 있는 [마인드 맵](https://seomal.org/)이 있습니다.
7 |
8 | 개인적으로 공부한 것들을 위와 같이 정리하면 좋을 것 같았습니다.
9 | 그래서 해당 라이브러리가 [cytoscape](https://js.cytoscape.org/#getting-started)라는 것을 확인 후 이를 활용해 비슷한 사이트를 개발을 해봤습니다.
10 |
11 | ### 접속 URI : https://nomelancholy.github.io/project-skill-map/
12 |
13 | ## 🍱 개발환경
14 | ---
15 |
16 | - OS
17 | - windows10
18 | - Tool
19 | - visual studio code
20 | - git
21 | - skill
22 | - html
23 | - css
24 | - javascript
25 | - library
26 | - cytoscape
27 | - webpack
28 |
29 | ## 🚲 제작 과정
30 | ---
31 |
32 | [포스팅](https://velog.io/@takeknowledge/%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9-%EB%A7%88%EC%9D%B8%EB%93%9C%EB%A7%B5-cytoscape-%ED%99%9C%EC%9A%A9-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-56k4in7315)
--------------------------------------------------------------------------------
/model/data.json:
--------------------------------------------------------------------------------
1 | [
2 | {
3 | "data": {
4 | "id": "PJ-mindMap",
5 | "url": "https://github.com/nomelancholy/pj-project-skill-map",
6 | "label": "Project-Skill-Map\n(19.12. ~ 19.12)"
7 | }
8 | },
9 | {
10 | "data": {
11 | "id": "ETC-mindMap",
12 | "label": "ETC"
13 | }
14 | },
15 | {
16 | "data": {
17 | "id": "PJ-mindMap->ETC-mindMap",
18 | "source": "ETC-mindMap",
19 | "target": "PJ-mindMap"
20 | }
21 | },
22 | {
23 | "data": {
24 | "id": "ETC-mindMap-vsc",
25 | "url": "https://code.visualstudio.com/",
26 | "label": "VSC"
27 | }
28 | },
29 | {
30 | "data": {
31 | "id": "ETC-mindMap->ETC-mindMap-vsc",
32 | "source": "ETC-mindMap-vsc",
33 | "target": "ETC-mindMap"
34 | }
35 | },
36 | {
37 | "data": {
38 | "id": "FE-mindMap",
39 | "label": "Front-End"
40 | }
41 | },
42 | {
43 | "data": {
44 | "id": "PJ-mindMap->FE-mindMap",
45 | "source": "FE-mindMap",
46 | "target": "PJ-mindMap"
47 | }
48 | },
49 | {
50 | "data": {
51 | "id": "SKILL-mindMap-cytoscape",
52 | "url": "https://cytoscape.org/",
53 | "label": "cytoscape"
54 | }
55 | },
56 | {
57 | "data": {
58 | "id": "FE-mindMap->SKILL-mindMap-cytoscape",
59 | "source": "SKILL-mindMap-cytoscape",
60 | "target": "FE-mindMap"
61 | }
62 | },
63 | {
64 | "data": {
65 | "id": "SKILL-mindMap-javascript",
66 | "url": "https://developer.mozilla.org/ko/docs/Web/JavaScript",
67 | "label": "Javascript"
68 | }
69 | },
70 | {
71 | "data": {
72 | "id": "FE-mindMap->SKILL-javascript",
73 | "source": "SKILL-mindMap-javascript",
74 | "target": "FE-mindMap"
75 | }
76 | },
77 | {
78 | "data": {
79 | "id": "ETC-mindMap",
80 | "label": "ETC"
81 | }
82 | },
83 | {
84 | "data": {
85 | "id": "PJ-mindMap->ETC-mindMap",
86 | "source": "ETC-mindMap",
87 | "target": "PJ-mindMap"
88 | }
89 | },
90 | {
91 | "data": {
92 | "id": "SKILL-mindMap-webpack",
93 | "url": "https://webpack.js.org/",
94 | "label": "webpack"
95 | }
96 | },
97 | {
98 | "data": {
99 | "id": "ETC-mindMap->SKILL-mindMap-webpack",
100 | "source": "SKILL-mindMap-webpack",
101 | "target": "ETC-mindMap"
102 | }
103 | },
104 | {
105 | "data": {
106 | "id": "PJ-sasGems",
107 | "url": "https://docs.google.com/presentation/d/13Uv-GDmkdGpw2LWPZBMo1XxPuitafX5DZrMSPOByvn4/edit#slide=id.p",
108 | "label": "Samsung SAS G-EMS project\n(18.07 ~ 19.02)"
109 | }
110 | },
111 | {
112 | "data": {
113 | "id": "ETC-sasGems",
114 | "label": "ETC"
115 | }
116 | },
117 | {
118 | "data": {
119 | "id": "PJ-sasGems->ETC-sasGems",
120 | "source": "ETC-sasGems",
121 | "target": "PJ-sasGems"
122 | }
123 | },
124 | {
125 | "data": {
126 | "id": "ETC-sasGems-eclipse",
127 | "url": "https://www.eclipse.org/downloads/",
128 | "label": "Eclipse"
129 | }
130 | },
131 | {
132 | "data": {
133 | "id": "ETC-sasGems->ETC-sasGems-eclipse",
134 | "source": "ETC-sasGems-eclipse",
135 | "target": "ETC-sasGems"
136 | }
137 | },
138 | {
139 | "data": {
140 | "id": "ETC-sasGems-toad",
141 | "url": "https://www.toadworld.com/",
142 | "label": "Toad"
143 | }
144 | },
145 | {
146 | "data": {
147 | "id": "ETC-sasGems->ETC-sasGems-toad",
148 | "source": "ETC-sasGems-toad",
149 | "target": "ETC-sasGems"
150 | }
151 | },
152 | {
153 | "data": {
154 | "id": "ETC-sasGems-svn",
155 | "url": "https://www.eclipse.org/subversive/",
156 | "label": "SVN"
157 | }
158 | },
159 | {
160 | "data": {
161 | "id": "ETC-sasGems->ETC-sasGems-svn",
162 | "source": "ETC-sasGems-svn",
163 | "target": "ETC-sasGems"
164 | }
165 | },
166 | {
167 | "data": {
168 | "id": "BE-sasGems",
169 | "label": "Back-End"
170 | }
171 | },
172 | {
173 | "data": {
174 | "id": "PJ-sasGems->BE-sasGems",
175 | "source": "BE-sasGems",
176 | "target": "PJ-sasGems"
177 | }
178 | },
179 | {
180 | "data": {
181 | "id": "SKILL-sasGems-spring",
182 | "url": "https://spring.io/",
183 | "label": "Spring"
184 | }
185 | },
186 | {
187 | "data": {
188 | "id": "BE-sasGems->SKILL-sasGems-spring",
189 | "source": "SKILL-sasGems-spring",
190 | "target": "BE-sasGems"
191 | }
192 | },
193 | {
194 | "data": {
195 | "id": "SKILL-sasGems-java",
196 | "url": "https://www.oracle.com/kr/java/",
197 | "label": "Java"
198 | }
199 | },
200 | {
201 | "data": {
202 | "id": "SKILL-sasGems-spring->SKILL-sasGems-java",
203 | "source": "SKILL-sasGems-java",
204 | "target": "SKILL-sasGems-spring"
205 | }
206 | },
207 | {
208 | "data": {
209 | "id": "SKILL-sasGems-maven",
210 | "url": "https://www.oracle.com/kr/java/",
211 | "label": "Maven"
212 | }
213 | },
214 | {
215 | "data": {
216 | "id": "SKILL-sasGems-spring->SKILL-sasGems-maven",
217 | "source": "SKILL-sasGems-maven",
218 | "target": "SKILL-sasGems-spring"
219 | }
220 | },
221 | {
222 | "data": {
223 | "id": "SKILL-i18n",
224 | "url": "https://mvnrepository.com/tags/i18n",
225 | "label": "i18n"
226 | }
227 | },
228 | {
229 | "data": {
230 | "id": "SKILL-sasGems-maven->SKILL-i18n",
231 | "source": "SKILL-i18n",
232 | "target": "SKILL-sasGems-maven"
233 | }
234 | },
235 | {
236 | "data": {
237 | "id": "SKILL-sasGems-weblogic",
238 | "url": "https://www.oracle.com/kr/middleware/weblogic/",
239 | "label": "Weblogic"
240 | }
241 | },
242 | {
243 | "data": {
244 | "id": "SKILL-sasGems-spring->SKILL-sasGems-weblogic",
245 | "source": "SKILL-sasGems-weblogic",
246 | "target": "SKILL-sasGems-spring"
247 | }
248 | },
249 | {
250 | "data": {
251 | "id": "SKILL-sasGems-myBatis",
252 | "url": "https://mybatis.org/mybatis-3/ko/index.html",
253 | "label": "myBatis"
254 | }
255 | },
256 | {
257 | "data": {
258 | "id": "SKILL-sasGems-spring->SKILL-sasGems-myBatis",
259 | "source": "SKILL-sasGems-myBatis",
260 | "target": "SKILL-sasGems-spring"
261 | }
262 | },
263 | {
264 | "data": {
265 | "id": "SKILL-sasGems-oracle",
266 | "url": "https://www.oracle.com/kr/database/technologies/",
267 | "label": "Oracle"
268 | }
269 | },
270 | {
271 | "data": {
272 | "id": "SKILL-sasGems-myBatis->SKILL-sasGems-oracle",
273 | "source": "SKILL-sasGems-oracle",
274 | "target": "SKILL-sasGems-myBatis"
275 | }
276 | },
277 | {
278 | "data": {
279 | "id": "SKILL-sasGems-plSql",
280 | "url": "https://www.oracle.com/kr/database/technologies/appdev/plsql.html",
281 | "label": "PL/SQL"
282 | }
283 | },
284 | {
285 | "data": {
286 | "id": "SKILL-sasGems-oracle->SKILL-sasGems-plSql",
287 | "source": "SKILL-sasGems-plSql",
288 | "target": "SKILL-sasGems-oracle"
289 | }
290 | },
291 | {
292 | "data": {
293 | "id": "FE-sasGems",
294 | "label": "Front-End"
295 | }
296 | },
297 | {
298 | "data": {
299 | "id": "PJ-sasGems->FE-sasGems",
300 | "source": "FE-sasGems",
301 | "target": "PJ-sasGems"
302 | }
303 | },
304 | {
305 | "data": {
306 | "id": "SKILL-sasGems-html",
307 | "url": "https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started",
308 | "label": "HTML"
309 | }
310 | },
311 | {
312 | "data": {
313 | "id": "FE-sasGems->SKILL-sasGems-html",
314 | "source": "SKILL-sasGems-html",
315 | "target": "FE-sasGems"
316 | }
317 | },
318 | {
319 | "data": {
320 | "id": "SKILL-sasGems-css",
321 | "url": "https://developer.mozilla.org/ko/docs/Web/CSS",
322 | "label": "CSS"
323 | }
324 | },
325 | {
326 | "data": {
327 | "id": "FE-sasGems->SKILL-sasGems-css",
328 | "source": "SKILL-sasGems-css",
329 | "target": "FE-sasGems"
330 | }
331 | },
332 | {
333 | "data": {
334 | "id": "SKILL-sasGems-jQuery",
335 | "url": "https://jquery.com/",
336 | "label": "jQuery"
337 | }
338 | },
339 | {
340 | "data": {
341 | "id": "FE-sasGems->SKILL-sasGems-jQuery",
342 | "source": "SKILL-sasGems-jQuery",
343 | "target": "FE-sasGems"
344 | }
345 | },
346 | {
347 | "data": {
348 | "id": "SKILL-sasGems-jQWidgets",
349 | "url": "https://www.jqwidgets.com/",
350 | "label": "jQWidgets"
351 | }
352 | },
353 | {
354 | "data": {
355 | "id": "SKILL-sasGems-jQuery->SKILL-sasGems-jQWidgets",
356 | "source": "SKILL-sasGems-jQWidgets",
357 | "target": "SKILL-sasGems-jQuery"
358 | }
359 | },
360 | {
361 | "data": {
362 | "id": "SKILL-sasGems-ajax",
363 | "url": "https://api.jquery.com/category/ajax/",
364 | "label": "Ajax"
365 | }
366 | },
367 | {
368 | "data": {
369 | "id": "SKILL-sasGems-jQuery->SKILL-sasGems-ajax",
370 | "source": "SKILL-sasGems-ajax",
371 | "target": "SKILL-sasGems-jQuery"
372 | }
373 | },
374 | {
375 | "data": {
376 | "id": "SKILL-sasGems-jsp",
377 | "url": "https://www.oracle.com/java/technologies/jspt.html",
378 | "label": "JSP"
379 | }
380 | },
381 | {
382 | "data": {
383 | "id": "FE-sasGems->SKILL-sasGems-jsp",
384 | "source": "SKILL-sasGems-jsp",
385 | "target": "FE-sasGems"
386 | }
387 | },
388 | {
389 | "data": {
390 | "id": "SKILL-sasGems-jstl",
391 | "url": "https://www.oracle.com/technetwork/java/index-141251.html",
392 | "label": "JSTL"
393 | }
394 | },
395 | {
396 | "data": {
397 | "id": "SKILL-sasGems-jsp->SKILL-sasGems-jstl",
398 | "source": "SKILL-sasGems-jstl",
399 | "target": "SKILL-sasGems-jsp"
400 | }
401 | },
402 | {
403 | "data": {
404 | "id": "SKILL-sasGems-el",
405 | "url": "https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/expressions.html",
406 | "label": "EL"
407 | }
408 | },
409 | {
410 | "data": {
411 | "id": "SKILL-sasGems-jsp->SKILL-sasGems-el",
412 | "source": "SKILL-sasGems-el",
413 | "target": "SKILL-sasGems-jsp"
414 | }
415 | },
416 | {
417 | "data": {
418 | "id": "PJ-cop",
419 | "url": "https://docs.google.com/presentation/d/1nRzRt5gqEXm6q8xMqY2TkdYT8eHHtyBxG3db8-xqKCU/edit?usp=sharing",
420 | "label": "Hyndai CoP project\n(19.02 ~ 19.04)"
421 | }
422 | },
423 | {
424 | "data": {
425 | "id": "ETC-cop",
426 | "label": "ETC"
427 | }
428 | },
429 | {
430 | "data": {
431 | "id": "PJ-cop->ETC-cop",
432 | "source": "ETC-cop",
433 | "target": "PJ-cop"
434 | }
435 | },
436 | {
437 | "data": {
438 | "id": "ETC-cop-egov",
439 | "url": "https://www.egovframe.go.kr/",
440 | "label": "eGovFramework"
441 | }
442 | },
443 | {
444 | "data": {
445 | "id": "ETC-cop->ETC-cop-egov",
446 | "source": "ETC-cop-egov",
447 | "target": "ETC-cop"
448 | }
449 | },
450 | {
451 | "data": {
452 | "id": "ETC-cop-dbeaver",
453 | "url": "https://dbeaver.io/",
454 | "label": "Dbeaver"
455 | }
456 | },
457 | {
458 | "data": {
459 | "id": "ETC-cop->ETC-cop-dbeaver",
460 | "source": "ETC-cop-dbeaver",
461 | "target": "ETC-cop"
462 | }
463 | },
464 | {
465 | "data": {
466 | "id": "ETC-cop-svn",
467 | "url": "https://www.eclipse.org/subversive/",
468 | "label": "SVN"
469 | }
470 | },
471 | {
472 | "data": {
473 | "id": "ETC-cop->ETC-cop-svn",
474 | "source": "ETC-cop-svn",
475 | "target": "ETC-cop"
476 | }
477 | },
478 | {
479 | "data": {
480 | "id": "BE-cop",
481 | "label": "Back-End"
482 | }
483 | },
484 | {
485 | "data": {
486 | "id": "PJ-cop->BE-cop",
487 | "source": "BE-cop",
488 | "target": "PJ-cop"
489 | }
490 | },
491 | {
492 | "data": {
493 | "id": "SKILL-cop-spring",
494 | "url": "https://spring.io/",
495 | "label": "Spring"
496 | }
497 | },
498 | {
499 | "data": {
500 | "id": "BE-cop->SKILL-cop-spring",
501 | "source": "SKILL-cop-spring",
502 | "target": "BE-cop"
503 | }
504 | },
505 | {
506 | "data": {
507 | "id": "SKILL-cop-java",
508 | "url": "https://www.oracle.com/kr/java/",
509 | "label": "Java"
510 | }
511 | },
512 | {
513 | "data": {
514 | "id": "SKILL-cop-spring->SKILL-cop-java",
515 | "source": "SKILL-cop-java",
516 | "target": "SKILL-cop-spring"
517 | }
518 | },
519 | {
520 | "data": {
521 | "id": "SKILL-cop-maven",
522 | "url": "https://www.oracle.com/kr/java/",
523 | "label": "Maven"
524 | }
525 | },
526 | {
527 | "data": {
528 | "id": "SKILL-cop-spring->SKILL-cop-maven",
529 | "source": "SKILL-cop-maven",
530 | "target": "SKILL-cop-spring"
531 | }
532 | },
533 | {
534 | "data": {
535 | "id": "SKILL-cop-Jackson",
536 | "url": "https://mvnrepository.com/search?q=Jackson",
537 | "label": "Jackson"
538 | }
539 | },
540 | {
541 | "data": {
542 | "id": "SKILL-cop-maven->SKILL-cop-Jackson",
543 | "source": "SKILL-cop-Jackson",
544 | "target": "SKILL-cop-maven"
545 | }
546 | },
547 | {
548 | "data": {
549 | "id": "SKILL-cop-tomcat",
550 | "url": "http://tomcat.apache.org/",
551 | "label": "tomcat"
552 | }
553 | },
554 | {
555 | "data": {
556 | "id": "SKILL-cop-spring->SKILL-cop-tomcat",
557 | "source": "SKILL-cop-tomcat",
558 | "target": "SKILL-cop-spring"
559 | }
560 | },
561 | {
562 | "data": {
563 | "id": "SKILL-cop-myBatis",
564 | "url": "https://mybatis.org/mybatis-3/ko/index.html",
565 | "label": "myBatis"
566 | }
567 | },
568 | {
569 | "data": {
570 | "id": "SKILL-cop-spring->SKILL-cop-myBatis",
571 | "source": "SKILL-cop-myBatis",
572 | "target": "SKILL-cop-spring"
573 | }
574 | },
575 | {
576 | "data": {
577 | "id": "SKILL-cop-oracle",
578 | "url": "https://www.oracle.com/kr/database/technologies/",
579 | "label": "Oracle"
580 | }
581 | },
582 | {
583 | "data": {
584 | "id": "SKILL-cop-myBatis->SKILL-cop-oracle",
585 | "source": "SKILL-cop-oracle",
586 | "target": "SKILL-cop-myBatis"
587 | }
588 | },
589 | {
590 | "data": {
591 | "id": "FE-cop",
592 | "label": "Front-End"
593 | }
594 | },
595 | {
596 | "data": {
597 | "id": "PJ-cop->FE-cop",
598 | "source": "FE-cop",
599 | "target": "PJ-cop"
600 | }
601 | },
602 | {
603 | "data": {
604 | "id": "SKILL-cop-html",
605 | "url": "https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started",
606 | "label": "HTML"
607 | }
608 | },
609 | {
610 | "data": {
611 | "id": "FE-cop->SKILL-cop-html",
612 | "source": "SKILL-cop-html",
613 | "target": "FE-cop"
614 | }
615 | },
616 | {
617 | "data": {
618 | "id": "SKILL-cop-css",
619 | "url": "https://developer.mozilla.org/ko/docs/Web/CSS",
620 | "label": "CSS"
621 | }
622 | },
623 | {
624 | "data": {
625 | "id": "FE-cop->SKILL-cop-css",
626 | "source": "SKILL-cop-css",
627 | "target": "FE-cop"
628 | }
629 | },
630 | {
631 | "data": {
632 | "id": "SKILL-cop-jQuery",
633 | "url": "https://jquery.com/",
634 | "label": "jQuery"
635 | }
636 | },
637 | {
638 | "data": {
639 | "id": "FE-cop->SKILL-cop-jQuery",
640 | "source": "SKILL-cop-jQuery",
641 | "target": "FE-cop"
642 | }
643 | },
644 | {
645 | "data": {
646 | "id": "SKILL-cop-jQWidgets",
647 | "url": "https://www.jqwidgets.com/",
648 | "label": "jQWidgets"
649 | }
650 | },
651 | {
652 | "data": {
653 | "id": "SKILL-cop-jQuery->SKILL-cop-jQWidgets",
654 | "source": "SKILL-cop-jQWidgets",
655 | "target": "SKILL-cop-jQuery"
656 | }
657 | },
658 | {
659 | "data": {
660 | "id": "SKILL-cop-datepicker",
661 | "url": "https://jqueryui.com/datepicker/",
662 | "label": "datepicker"
663 | }
664 | },
665 | {
666 | "data": {
667 | "id": "SKILL-cop-jQuery->SKILL-cop-datepicker",
668 | "source": "SKILL-cop-datepicker",
669 | "target": "SKILL-cop-jQuery"
670 | }
671 | },
672 | {
673 | "data": {
674 | "id": "SKILL-cop-ajax",
675 | "url": "https://api.jquery.com/category/ajax/",
676 | "label": "Ajax"
677 | }
678 | },
679 | {
680 | "data": {
681 | "id": "SKILL-cop-jQuery->SKILL-cop-ajax",
682 | "source": "SKILL-cop-ajax",
683 | "target": "SKILL-cop-jQuery"
684 | }
685 | },
686 | {
687 | "data": {
688 | "id": "SKILL-cop-jsp",
689 | "url": "https://www.oracle.com/java/technologies/jspt.html",
690 | "label": "JSP"
691 | }
692 | },
693 | {
694 | "data": {
695 | "id": "FE-cop->SKILL-cop-jsp",
696 | "source": "SKILL-cop-jsp",
697 | "target": "FE-cop"
698 | }
699 | },
700 | {
701 | "data": {
702 | "id": "SKILL-cop-jstl",
703 | "url": "https://www.oracle.com/technetwork/java/index-141251.html",
704 | "label": "JSTL"
705 | }
706 | },
707 | {
708 | "data": {
709 | "id": "SKILL-cop-jsp->SKILL-cop-jstl",
710 | "source": "SKILL-cop-jstl",
711 | "target": "SKILL-cop-jsp"
712 | }
713 | },
714 | {
715 | "data": {
716 | "id": "SKILL-cop-el",
717 | "url": "https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/expressions.html",
718 | "label": "EL"
719 | }
720 | },
721 | {
722 | "data": {
723 | "id": "SKILL-cop-jsp->SKILL-cop-el",
724 | "source": "SKILL-cop-el",
725 | "target": "SKILL-cop-jsp"
726 | }
727 | },
728 | {
729 | "data": {
730 | "id": "ETC-cop",
731 | "label": "ETC"
732 | }
733 | },
734 | {
735 | "data": {
736 | "id": "PJ-cop->ETC-cop",
737 | "source": "ETC-cop",
738 | "target": "PJ-cop"
739 | }
740 | },
741 | {
742 | "data": {
743 | "id": "PJ-kbncMro",
744 | "url": "https://docs.google.com/presentation/d/1T_2V86CmNqGJkzwMqvLlr4uUWLjxfzIZqTfbbfBd0PI/edit#slide=id.g7c0959267c_0_1",
745 | "label": "kbnc MRO project\n(19.04 ~ 19.08)"
746 | }
747 | },
748 | {
749 | "data": {
750 | "id": "ETC-kbncMro",
751 | "label": "ETC"
752 | }
753 | },
754 | {
755 | "data": {
756 | "id": "PJ-kbncMro->ETC-kbncMro",
757 | "source": "ETC-kbncMro",
758 | "target": "PJ-kbncMro"
759 | }
760 | },
761 | {
762 | "data": {
763 | "id": "ETC-kbncMro-egov",
764 | "url": "https://www.egovframe.go.kr/",
765 | "label": "eGovFramework"
766 | }
767 | },
768 | {
769 | "data": {
770 | "id": "ETC-kbncMro->ETC-kbncMro-egov",
771 | "source": "ETC-kbncMro-egov",
772 | "target": "ETC-kbncMro"
773 | }
774 | },
775 | {
776 | "data": {
777 | "id": "ETC-kbncMro-sqlGate",
778 | "url": "https://www.sqlgate.com/?language=ko",
779 | "label": "SQLGate"
780 | }
781 | },
782 | {
783 | "data": {
784 | "id": "ETC-kbncMro->ETC-kbncMro-sqlGate",
785 | "source": "ETC-kbncMro-sqlGate",
786 | "target": "ETC-kbncMro"
787 | }
788 | },
789 | {
790 | "data": {
791 | "id": "ETC-kbncMro-svn",
792 | "url": "https://www.eclipse.org/subversive/",
793 | "label": "SVN"
794 | }
795 | },
796 | {
797 | "data": {
798 | "id": "ETC-kbncMro->ETC-kbncMro-svn",
799 | "source": "ETC-kbncMro-svn",
800 | "target": "ETC-kbncMro"
801 | }
802 | },
803 | {
804 | "data": {
805 | "id": "BE-kbncMro",
806 | "label": "Back-End"
807 | }
808 | },
809 | {
810 | "data": {
811 | "id": "PJ-kbncMro->BE-kbncMro",
812 | "source": "BE-kbncMro",
813 | "target": "PJ-kbncMro"
814 | }
815 | },
816 | {
817 | "data": {
818 | "id": "SKILL-kbncMro-spring",
819 | "url": "https://spring.io/",
820 | "label": "Spring"
821 | }
822 | },
823 | {
824 | "data": {
825 | "id": "BE-kbncMro->SKILL-kbncMro-spring",
826 | "source": "SKILL-kbncMro-spring",
827 | "target": "BE-kbncMro"
828 | }
829 | },
830 | {
831 | "data": {
832 | "id": "SKILL-kbncMro-jsp",
833 | "url": "https://www.oracle.com/java/technologies/jspt.html",
834 | "label": "JSP"
835 | }
836 | },
837 | {
838 | "data": {
839 | "id": "SKILL-kbncMro-spring->SKILL-kbncMro-jsp",
840 | "source": "SKILL-kbncMro-jsp",
841 | "target": "SKILL-kbncMro-spring"
842 | }
843 | },
844 | {
845 | "data": {
846 | "id": "SKILL-kbncMro-jstl",
847 | "url": "https://www.oracle.com/technetwork/java/index-141251.html",
848 | "label": "JSTL"
849 | }
850 | },
851 | {
852 | "data": {
853 | "id": "SKILL-kbncMro-jsp->SKILL-kbncMro-jstl",
854 | "source": "SKILL-kbncMro-jstl",
855 | "target": "SKILL-kbncMro-jsp"
856 | }
857 | },
858 | {
859 | "data": {
860 | "id": "SKILL-kbncMro-el",
861 | "url": "https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/expressions.html",
862 | "label": "EL"
863 | }
864 | },
865 | {
866 | "data": {
867 | "id": "SKILL-kbncMro-jsp->SKILL-kbncMro-el",
868 | "source": "SKILL-kbncMro-el",
869 | "target": "SKILL-kbncMro-jsp"
870 | }
871 | },
872 | {
873 | "data": {
874 | "id": "SKILL-kbncMro-java",
875 | "url": "https://www.oracle.com/kr/java/",
876 | "label": "Java"
877 | }
878 | },
879 | {
880 | "data": {
881 | "id": "SKILL-kbncMro-spring->SKILL-kbncMro-java",
882 | "source": "SKILL-kbncMro-java",
883 | "target": "SKILL-kbncMro-spring"
884 | }
885 | },
886 | {
887 | "data": {
888 | "id": "SKILL-kbncMro-sha256",
889 | "url": "https://www.baeldung.com/sha-256-hashing-java",
890 | "label": "SHA256"
891 | }
892 | },
893 | {
894 | "data": {
895 | "id": "SKILL-kbncMro-java->SKILL-kbncMro-sha256",
896 | "source": "SKILL-kbncMro-sha256",
897 | "target": "SKILL-kbncMro-java"
898 | }
899 | },
900 | {
901 | "data": {
902 | "id": "SKILL-kbncMro-tomcat",
903 | "url": "http://tomcat.apache.org/",
904 | "label": "tomcat"
905 | }
906 | },
907 | {
908 | "data": {
909 | "id": "SKILL-kbncMro-spring->SKILL-kbncMro-tomcat",
910 | "source": "SKILL-kbncMro-tomcat",
911 | "target": "SKILL-kbncMro-spring"
912 | }
913 | },
914 | {
915 | "data": {
916 | "id": "SKILL-kbncMro-maven",
917 | "url": "https://www.oracle.com/kr/java/",
918 | "label": "Maven"
919 | }
920 | },
921 | {
922 | "data": {
923 | "id": "SKILL-kbncMro-spring->SKILL-kbncMro-maven",
924 | "source": "SKILL-kbncMro-maven",
925 | "target": "SKILL-kbncMro-spring"
926 | }
927 | },
928 | {
929 | "data": {
930 | "id": "SKILL-kbncMro-Jackson",
931 | "url": "https://mvnrepository.com/search?q=Jackson",
932 | "label": "Jackson"
933 | }
934 | },
935 | {
936 | "data": {
937 | "id": "SKILL-kbncMro-maven->SKILL-kbncMro-Jackson",
938 | "source": "SKILL-kbncMro-Jackson",
939 | "target": "SKILL-kbncMro-maven"
940 | }
941 | },
942 | {
943 | "data": {
944 | "id": "SKILL-kbncMro-myBatis",
945 | "url": "https://mybatis.org/mybatis-3/ko/index.html",
946 | "label": "myBatis"
947 | }
948 | },
949 | {
950 | "data": {
951 | "id": "SKILL-kbncMro-spring->SKILL-kbncMro-myBatis",
952 | "source": "SKILL-kbncMro-myBatis",
953 | "target": "SKILL-kbncMro-spring"
954 | }
955 | },
956 | {
957 | "data": {
958 | "id": "SKILL-kbncMro-oracle",
959 | "url": "https://www.oracle.com/kr/database/technologies/",
960 | "label": "Oracle"
961 | }
962 | },
963 | {
964 | "data": {
965 | "id": "SKILL-kbncMro-myBatis->SKILL-kbncMro-oracle",
966 | "source": "SKILL-kbncMro-oracle",
967 | "target": "SKILL-kbncMro-myBatis"
968 | }
969 | },
970 | {
971 | "data": {
972 | "id": "FE-kbncMro",
973 | "label": "Front-End"
974 | }
975 | },
976 | {
977 | "data": {
978 | "id": "PJ-kbncMro->FE-kbncMro",
979 | "source": "FE-kbncMro",
980 | "target": "PJ-kbncMro"
981 | }
982 | },
983 | {
984 | "data": {
985 | "id": "SKILL-kbncMro-html",
986 | "url": "https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started",
987 | "label": "HTML"
988 | }
989 | },
990 | {
991 | "data": {
992 | "id": "FE-kbncMro->SKILL-kbncMro-html",
993 | "source": "SKILL-kbncMro-html",
994 | "target": "FE-kbncMro"
995 | }
996 | },
997 | {
998 | "data": {
999 | "id": "SKILL-kbncMro-css",
1000 | "url": "https://developer.mozilla.org/ko/docs/Web/CSS",
1001 | "label": "CSS"
1002 | }
1003 | },
1004 | {
1005 | "data": {
1006 | "id": "FE-kbncMro->SKILL-kbncMro-css",
1007 | "source": "SKILL-kbncMro-css",
1008 | "target": "FE-kbncMro"
1009 | }
1010 | },
1011 | {
1012 | "data": {
1013 | "id": "SKILL-kbncMro-javascript",
1014 | "url": "https://developer.mozilla.org/ko/docs/Web/JavaScript",
1015 | "label": "JavaScript"
1016 | }
1017 | },
1018 | {
1019 | "data": {
1020 | "id": "FE-kbncMro->SKILL-kbncMro-javascript",
1021 | "source": "SKILL-kbncMro-javascript",
1022 | "target": "FE-kbncMro"
1023 | }
1024 | },
1025 | {
1026 | "data": {
1027 | "id": "SKILL-kbncMro-regexp",
1028 | "url": "https://regexr.com/",
1029 | "label": "Regular Expression"
1030 | }
1031 | },
1032 | {
1033 | "data": {
1034 | "id": "SKILL-kbncMro-javascript->SKILL-kbncMro-regexp",
1035 | "source": "SKILL-kbncMro-regexp",
1036 | "target": "SKILL-kbncMro-javascript"
1037 | }
1038 | },
1039 | {
1040 | "data": {
1041 | "id": "SKILL-kbncMro-jQuery",
1042 | "url": "https://jquery.com/",
1043 | "label": "jQuery"
1044 | }
1045 | },
1046 | {
1047 | "data": {
1048 | "id": "FE-kbncMro->SKILL-kbncMro-jQuery",
1049 | "source": "SKILL-kbncMro-jQuery",
1050 | "target": "FE-kbncMro"
1051 | }
1052 | },
1053 | {
1054 | "data": {
1055 | "id": "SKILL-kbncMro-jQWidgets",
1056 | "url": "https://www.jqwidgets.com/",
1057 | "label": "jQWidgets"
1058 | }
1059 | },
1060 | {
1061 | "data": {
1062 | "id": "SKILL-kbncMro-jQuery->SKILL-kbncMro-jQWidgets",
1063 | "source": "SKILL-kbncMro-jQWidgets",
1064 | "target": "SKILL-kbncMro-jQuery"
1065 | }
1066 | },
1067 | {
1068 | "data": {
1069 | "id": "SKILL-kbncMro-datepicker",
1070 | "url": "https://jqueryui.com/datepicker/",
1071 | "label": "datepicker"
1072 | }
1073 | },
1074 | {
1075 | "data": {
1076 | "id": "SKILL-kbncMro-jQuery->SKILL-kbncMro-datepicker",
1077 | "source": "SKILL-kbncMro-datepicker",
1078 | "target": "SKILL-kbncMro-jQuery"
1079 | }
1080 | },
1081 | {
1082 | "data": {
1083 | "id": "SKILL-kbncMro-ajax",
1084 | "url": "https://api.jquery.com/category/ajax/",
1085 | "label": "Ajax"
1086 | }
1087 | },
1088 | {
1089 | "data": {
1090 | "id": "SKILL-kbncMro-jQuery->SKILL-kbncMro-ajax",
1091 | "source": "SKILL-kbncMro-ajax",
1092 | "target": "SKILL-kbncMro-jQuery"
1093 | }
1094 | },
1095 | {
1096 | "data": {
1097 | "id": "SKILL-kbncMro-miplatform",
1098 | "url": "",
1099 | "label": "miplatform"
1100 | }
1101 | },
1102 | {
1103 | "data": {
1104 | "id": "FE-kbncMro->SKILL-kbncMro-miplatform",
1105 | "source": "SKILL-kbncMro-miplatform",
1106 | "target": "FE-kbncMro"
1107 | }
1108 | },
1109 | {
1110 | "data": {
1111 | "id": "PJ-boostCourse",
1112 | "url": "https://docs.google.com/presentation/d/18OUaH0O0xltEhQheRo9ROkCCxMLbCBjr3WJOzqrRW2o/edit#slide=id.p",
1113 | "label": "naver reservation site clone\n(19.08 ~ 19.09)"
1114 | }
1115 | },
1116 | {
1117 | "data": {
1118 | "id": "ETC-boostCourse",
1119 | "label": "ETC"
1120 | }
1121 | },
1122 | {
1123 | "data": {
1124 | "id": "PJ-boostCourse->ETC-boostCourse",
1125 | "source": "ETC-boostCourse",
1126 | "target": "PJ-boostCourse"
1127 | }
1128 | },
1129 | {
1130 | "data": {
1131 | "id": "ETC-boostCourse-eclipse",
1132 | "url": "https://www.eclipse.org/downloads/",
1133 | "label": "Eclipse"
1134 | }
1135 | },
1136 | {
1137 | "data": {
1138 | "id": "ETC-boostCourse->ETC-boostCourse-eclipse",
1139 | "source": "ETC-boostCourse-eclipse",
1140 | "target": "ETC-boostCourse"
1141 | }
1142 | },
1143 | {
1144 | "data": {
1145 | "id": "ETC-boostCourse-workbench",
1146 | "url": "https://www.mysql.com/products/workbench/",
1147 | "label": "Workbench"
1148 | }
1149 | },
1150 | {
1151 | "data": {
1152 | "id": "ETC-boostCourse->ETC-boostCourse-workbench",
1153 | "source": "ETC-boostCourse-workbench",
1154 | "target": "ETC-boostCourse"
1155 | }
1156 | },
1157 | {
1158 | "data": {
1159 | "id": "ETC-boostCourse-vsc",
1160 | "url": "https://code.visualstudio.com/",
1161 | "label": "VSC"
1162 | }
1163 | },
1164 | {
1165 | "data": {
1166 | "id": "ETC-boostCourse->ETC-boostCourse-vsc",
1167 | "source": "ETC-boostCourse-vsc",
1168 | "target": "ETC-boostCourse"
1169 | }
1170 | },
1171 | {
1172 | "data": {
1173 | "id": "BE-boostCourse",
1174 | "label": "Back-End"
1175 | }
1176 | },
1177 | {
1178 | "data": {
1179 | "id": "PJ-boostCourse->BE-boostCourse",
1180 | "source": "BE-boostCourse",
1181 | "target": "PJ-boostCourse"
1182 | }
1183 | },
1184 | {
1185 | "data": {
1186 | "id": "SKILL-boostCourse-spring",
1187 | "url": "https://spring.io/",
1188 | "label": "Spring"
1189 | }
1190 | },
1191 | {
1192 | "data": {
1193 | "id": "BE-boostCourse->SKILL-boostCourse-spring",
1194 | "source": "SKILL-boostCourse-spring",
1195 | "target": "BE-boostCourse"
1196 | }
1197 | },
1198 | {
1199 | "data": {
1200 | "id": "SKILL-boostCourse-java",
1201 | "url": "https://www.oracle.com/kr/java/",
1202 | "label": "Java"
1203 | }
1204 | },
1205 | {
1206 | "data": {
1207 | "id": "SKILL-boostCourse-spring->SKILL-boostCourse-java",
1208 | "source": "SKILL-boostCourse-java",
1209 | "target": "SKILL-boostCourse-spring"
1210 | }
1211 | },
1212 | {
1213 | "data": {
1214 | "id": "SKILL-boostCourse-javaTime",
1215 | "url": "https://docs.oracle.com/javase/8/docs/api/java/time/package-summary.html",
1216 | "label": "java.time"
1217 | }
1218 | },
1219 | {
1220 | "data": {
1221 | "id": "SKILL-boostCourse-java->SKILL-boostCourse-javaTime",
1222 | "source": "SKILL-boostCourse-javaTime",
1223 | "target": "SKILL-boostCourse-java"
1224 | }
1225 | },
1226 | {
1227 | "data": {
1228 | "id": "SKILL-boostCourse-maven",
1229 | "url": "https://www.oracle.com/kr/java/",
1230 | "label": "Maven"
1231 | }
1232 | },
1233 | {
1234 | "data": {
1235 | "id": "SKILL-boostCourse-spring->SKILL-boostCourse-maven",
1236 | "source": "SKILL-boostCourse-maven",
1237 | "target": "SKILL-boostCourse-spring"
1238 | }
1239 | },
1240 | {
1241 | "data": {
1242 | "id": "SKILL-boostCourse-Jackson",
1243 | "url": "https://mvnrepository.com/search?q=Jackson",
1244 | "label": "Jackson"
1245 | }
1246 | },
1247 | {
1248 | "data": {
1249 | "id": "SKILL-boostCourse-maven->SKILL-boostCourse-Jackson",
1250 | "source": "SKILL-boostCourse-Jackson",
1251 | "target": "SKILL-boostCourse-maven"
1252 | }
1253 | },
1254 | {
1255 | "data": {
1256 | "id": "SKILL-boostCourse-commonsio",
1257 | "url": "https://mvnrepository.com/artifact/commons-io/commons-io",
1258 | "label": "Commons IO"
1259 | }
1260 | },
1261 | {
1262 | "data": {
1263 | "id": "SKILL-boostCourse-maven->SKILL-boostCourse-commonsio",
1264 | "source": "SKILL-boostCourse-commonsio",
1265 | "target": "SKILL-boostCourse-maven"
1266 | }
1267 | },
1268 | {
1269 | "data": {
1270 | "id": "SKILL-boostCourse-slf4j",
1271 | "url": "https://mvnrepository.com/artifact/org.slf4j",
1272 | "label": "slf4j"
1273 | }
1274 | },
1275 | {
1276 | "data": {
1277 | "id": "SKILL-boostCourse-maven->SKILL-boostCourse-slf4j",
1278 | "source": "SKILL-boostCourse-slf4j",
1279 | "target": "SKILL-boostCourse-maven"
1280 | }
1281 | },
1282 | {
1283 | "data": {
1284 | "id": "SKILL-boostCourse-logback",
1285 | "url": "http://logback.qos.ch/index.html",
1286 | "label": "logback"
1287 | }
1288 | },
1289 | {
1290 | "data": {
1291 | "id": "SKILL-boostCourse-slf4j->SKILL-boostCourse-logback",
1292 | "source": "SKILL-boostCourse-logback",
1293 | "target": "SKILL-boostCourse-slf4j"
1294 | }
1295 | },
1296 | {
1297 | "data": {
1298 | "id": "SKILL-boostCourse-jdbc",
1299 | "url": "https://mybatis.org/mybatis-3/ko/index.html",
1300 | "label": "JDBC"
1301 | }
1302 | },
1303 | {
1304 | "data": {
1305 | "id": "SKILL-boostCourse-spring->SKILL-boostCourse-jdbc",
1306 | "source": "SKILL-boostCourse-jdbc",
1307 | "target": "SKILL-boostCourse-spring"
1308 | }
1309 | },
1310 | {
1311 | "data": {
1312 | "id": "SKILL-boostCourse-session",
1313 | "url": "https://spring.io/projects/spring-session",
1314 | "label": "Session"
1315 | }
1316 | },
1317 | {
1318 | "data": {
1319 | "id": "SKILL-boostCourse-spring->SKILL-boostCourse-session",
1320 | "source": "SKILL-boostCourse-session",
1321 | "target": "SKILL-boostCourse-spring"
1322 | }
1323 | },
1324 | {
1325 | "data": {
1326 | "id": "SKILL-boostCourse-mySQL",
1327 | "url": "https://www.oracle.com/kr/database/technologies/",
1328 | "label": "MySQL"
1329 | }
1330 | },
1331 | {
1332 | "data": {
1333 | "id": "SKILL-boostCourse-jdbc->SKILL-boostCourse-mySQL",
1334 | "source": "SKILL-boostCourse-mySQL",
1335 | "target": "SKILL-boostCourse-jdbc"
1336 | }
1337 | },
1338 | {
1339 | "data": {
1340 | "id": "FE-boostCourse",
1341 | "label": "Front-End"
1342 | }
1343 | },
1344 | {
1345 | "data": {
1346 | "id": "PJ-boostCourse->FE-boostCourse",
1347 | "source": "FE-boostCourse",
1348 | "target": "PJ-boostCourse"
1349 | }
1350 | },
1351 | {
1352 | "data": {
1353 | "id": "SKILL-boostCourse-html",
1354 | "url": "https://developer.mozilla.org/ko/docs/Learn/HTML/Introduction_to_HTML/Getting_started",
1355 | "label": "HTML"
1356 | }
1357 | },
1358 | {
1359 | "data": {
1360 | "id": "FE-boostCourse->SKILL-boostCourse-html",
1361 | "source": "SKILL-boostCourse-html",
1362 | "target": "FE-boostCourse"
1363 | }
1364 | },
1365 | {
1366 | "data": {
1367 | "id": "SKILL-boostCourse-css",
1368 | "url": "https://developer.mozilla.org/ko/docs/Web/CSS",
1369 | "label": "CSS"
1370 | }
1371 | },
1372 | {
1373 | "data": {
1374 | "id": "FE-boostCourse->SKILL-boostCourse-css",
1375 | "source": "SKILL-boostCourse-css",
1376 | "target": "FE-boostCourse"
1377 | }
1378 | },
1379 | {
1380 | "data": {
1381 | "id": "SKILL-boostCourse-javascript",
1382 | "url": "https://developer.mozilla.org/ko/docs/Web/JavaScript",
1383 | "label": "JavaScript"
1384 | }
1385 | },
1386 | {
1387 | "data": {
1388 | "id": "FE-boostCourse->SKILL-boostCourse-javascript",
1389 | "source": "SKILL-boostCourse-javascript",
1390 | "target": "FE-boostCourse"
1391 | }
1392 | },
1393 | {
1394 | "data": {
1395 | "id": "SKILL-boostCourse-regexp",
1396 | "url": "https://regexr.com/",
1397 | "label": "Regular Expression"
1398 | }
1399 | },
1400 | {
1401 | "data": {
1402 | "id": "SKILL-boostCourse-javascript->SKILL-boostCourse-regexp",
1403 | "source": "SKILL-boostCourse-regexp",
1404 | "target": "SKILL-boostCourse-javascript"
1405 | }
1406 | },
1407 | {
1408 | "data": {
1409 | "id": "SKILL-boostCourse-handlebars",
1410 | "url": "https://handlebarsjs.com/",
1411 | "label": "handlebars"
1412 | }
1413 | },
1414 | {
1415 | "data": {
1416 | "id": "SKILL-boostCourse-javascript->SKILL-boostCourse-handlebars",
1417 | "source": "SKILL-boostCourse-handlebars",
1418 | "target": "SKILL-boostCourse-javascript"
1419 | }
1420 | },
1421 | {
1422 | "data": {
1423 | "id": "SKILL-boostCourse-objectLiteral",
1424 | "url": "https://softwareengineering.stackexchange.com/questions/99240/best-javascript-coding-structure-using-object-literal",
1425 | "label": "Object Literal Pattern"
1426 | }
1427 | },
1428 | {
1429 | "data": {
1430 | "id": "SKILL-boostCourse-javascript->SKILL-boostCourse-objectLiteral",
1431 | "source": "SKILL-boostCourse-objectLiteral",
1432 | "target": "SKILL-boostCourse-javascript"
1433 | }
1434 | },
1435 | {
1436 | "data": {
1437 | "id": "SKILL-boostCourse-constructor",
1438 | "url": "https://gomakethings.com/an-introduction-to-the-javascript-constructor-pattern/",
1439 | "label": "Constructor Pattern"
1440 | }
1441 | },
1442 | {
1443 | "data": {
1444 | "id": "SKILL-boostCourse-javascript->SKILL-boostCourse-constructor",
1445 | "source": "SKILL-boostCourse-constructor",
1446 | "target": "SKILL-boostCourse-javascript"
1447 | }
1448 | },
1449 | {
1450 | "data": {
1451 | "id": "SKILL-boostCourse-jQuery",
1452 | "url": "https://jquery.com/",
1453 | "label": "jQuery"
1454 | }
1455 | },
1456 | {
1457 | "data": {
1458 | "id": "FE-boostCourse->SKILL-boostCourse-jQuery",
1459 | "source": "SKILL-boostCourse-jQuery",
1460 | "target": "FE-boostCourse"
1461 | }
1462 | },
1463 | {
1464 | "data": {
1465 | "id": "SKILL-boostCourse-jsp",
1466 | "url": "https://www.oracle.com/java/technologies/jspt.html",
1467 | "label": "JSP"
1468 | }
1469 | },
1470 | {
1471 | "data": {
1472 | "id": "FE-boostCourse->SKILL-boostCourse-jsp",
1473 | "source": "SKILL-boostCourse-jsp",
1474 | "target": "FE-boostCourse"
1475 | }
1476 | },
1477 | {
1478 | "data": {
1479 | "id": "SKILL-boostCourse-jstl",
1480 | "url": "https://www.oracle.com/technetwork/java/index-141251.html",
1481 | "label": "JSTL"
1482 | }
1483 | },
1484 | {
1485 | "data": {
1486 | "id": "SKILL-boostCourse-jsp->SKILL-boostCourse-jstl",
1487 | "source": "SKILL-boostCourse-jstl",
1488 | "target": "SKILL-boostCourse-jsp"
1489 | }
1490 | },
1491 | {
1492 | "data": {
1493 | "id": "SKILL-boostCourse-el",
1494 | "url": "https://docs.spring.io/spring-framework/docs/3.2.x/spring-framework-reference/html/expressions.html",
1495 | "label": "EL"
1496 | }
1497 | },
1498 | {
1499 | "data": {
1500 | "id": "SKILL-boostCourse-jsp->SKILL-boostCourse-el",
1501 | "source": "SKILL-boostCourse-el",
1502 | "target": "SKILL-boostCourse-jsp"
1503 | }
1504 | },
1505 | {
1506 | "data": {
1507 | "id": "PJ-ibkHr",
1508 | "label": "IBK HRSystem Renewal Project\n(20.01 ~ 20.04)"
1509 | }
1510 | },
1511 | {
1512 | "data": {
1513 | "id": "ETC-ibkHr",
1514 | "label": "ETC"
1515 | }
1516 | },
1517 | {
1518 | "data": {
1519 | "id": "PJ-ibkHr->ETC-ibkHr",
1520 | "source": "ETC-ibkHr",
1521 | "target": "PJ-ibkHr"
1522 | }
1523 | },
1524 | {
1525 | "data": {
1526 | "id": "ETC-ibkHr-vsc",
1527 | "url": "https://code.visualstudio.com/",
1528 | "label": "VSC"
1529 | }
1530 | },
1531 | {
1532 | "data": {
1533 | "id": "ETC-ibkHr->ETC-ibkHr-vsc",
1534 | "source": "ETC-ibkHr-vsc",
1535 | "target": "ETC-ibkHr"
1536 | }
1537 | },
1538 | {
1539 | "data": {
1540 | "id": "ETC-ibkHr-intellij",
1541 | "url": "https://www.jetbrains.com/ko-kr/idea/",
1542 | "label": "IntelliJ"
1543 | }
1544 | },
1545 | {
1546 | "data": {
1547 | "id": "ETC-ibkHr->ETC-ibkHr-intellij",
1548 | "source": "ETC-ibkHr-intellij",
1549 | "target": "ETC-ibkHr"
1550 | }
1551 | },
1552 | {
1553 | "data": {
1554 | "id": "ETC-ibkHr-toad",
1555 | "url": "https://www.toadworld.com/",
1556 | "label": "Toad"
1557 | }
1558 | },
1559 | {
1560 | "data": {
1561 | "id": "ETC-ibkHr->ETC-ibkHr-toad",
1562 | "source": "ETC-ibkHr-toad",
1563 | "target": "ETC-ibkHr"
1564 | }
1565 | },
1566 | {
1567 | "data": {
1568 | "id": "ETC-ibkHr-git",
1569 | "url": "https://git-scm.com/",
1570 | "label": "git"
1571 | }
1572 | },
1573 | {
1574 | "data": {
1575 | "id": "ETC-ibkHr->ETC-ibkHr-git",
1576 | "source": "ETC-ibkHr-git",
1577 | "target": "ETC-ibkHr"
1578 | }
1579 | },
1580 | {
1581 | "data": {
1582 | "id": "ETC-ibkHr-gitlab",
1583 | "url": "https://about.gitlab.com/",
1584 | "label": "gitlab"
1585 | }
1586 | },
1587 | {
1588 | "data": {
1589 | "id": "ETC-ibkHr-git->ETC-ibkHr-gitlab",
1590 | "source": "ETC-ibkHr-gitlab",
1591 | "target": "ETC-ibkHr-git"
1592 | }
1593 | },
1594 | {
1595 | "data": {
1596 | "id": "BE-ibkHr",
1597 | "label": "Back-End"
1598 | }
1599 | },
1600 | {
1601 | "data": {
1602 | "id": "PJ-ibkHr->BE-ibkHr",
1603 | "source": "BE-ibkHr",
1604 | "target": "PJ-ibkHr"
1605 | }
1606 | },
1607 | {
1608 | "data": {
1609 | "id": "SKILL-ibkHr-spring",
1610 | "url": "https://spring.io/",
1611 | "label": "Spring"
1612 | }
1613 | },
1614 | {
1615 | "data": {
1616 | "id": "BE-ibkHr->SKILL-ibkHr-spring",
1617 | "source": "SKILL-ibkHr-spring",
1618 | "target": "BE-ibkHr"
1619 | }
1620 | },
1621 | {
1622 | "data": {
1623 | "id": "SKILL-ibkHr-swagger",
1624 | "url": "https://swagger.io/",
1625 | "label": "Swagger"
1626 | }
1627 | },
1628 | {
1629 | "data": {
1630 | "id": "SKILL-ibkHr-spring->SKILL-ibkHr-swagger",
1631 | "source": "SKILL-ibkHr-swagger",
1632 | "target": "SKILL-ibkHr-spring"
1633 | }
1634 | },
1635 | {
1636 | "data": {
1637 | "id": "SKILL-ibkHr-java",
1638 | "url": "https://www.oracle.com/kr/java/",
1639 | "label": "Java"
1640 | }
1641 | },
1642 | {
1643 | "data": {
1644 | "id": "SKILL-ibkHr-spring->SKILL-ibkHr-java",
1645 | "source": "SKILL-ibkHr-java",
1646 | "target": "SKILL-ibkHr-spring"
1647 | }
1648 | },
1649 | {
1650 | "data": {
1651 | "id": "SKILL-ibkHr-javaStream",
1652 | "url": "https://docs.oracle.com/javase/8/docs/api/java/util/stream/Stream.html",
1653 | "label": "Java Stream"
1654 | }
1655 | },
1656 | {
1657 | "data": {
1658 | "id": "SKILL-ibkHr-java->SKILL-ibkHr-javaStream",
1659 | "source": "SKILL-ibkHr-javaStream",
1660 | "target": "SKILL-ibkHr-java"
1661 | }
1662 | },
1663 | {
1664 | "data": {
1665 | "id": "SKILL-ibkHr-myBatis",
1666 | "url": "https://mybatis.org/mybatis-3/ko/index.html",
1667 | "label": "myBatis"
1668 | }
1669 | },
1670 | {
1671 | "data": {
1672 | "id": "SKILL-ibkHr-spring->SKILL-ibkHr-myBatis",
1673 | "source": "SKILL-ibkHr-myBatis",
1674 | "target": "SKILL-ibkHr-spring"
1675 | }
1676 | },
1677 | {
1678 | "data": {
1679 | "id": "SKILL-ibkHr-oracle",
1680 | "url": "https://www.oracle.com/kr/database/technologies/",
1681 | "label": "Oracle"
1682 | }
1683 | },
1684 | {
1685 | "data": {
1686 | "id": "SKILL-ibkHr-myBatis->SKILL-ibkHr-oracle",
1687 | "source": "SKILL-ibkHr-oracle",
1688 | "target": "SKILL-ibkHr-myBatis"
1689 | }
1690 | },
1691 | {
1692 | "data": {
1693 | "id": "SKILL-ibkHr-lombok",
1694 | "url": "https://projectlombok.org/",
1695 | "label": "lombok"
1696 | }
1697 | },
1698 | {
1699 | "data": {
1700 | "id": "SKILL-ibkHr-spring->SKILL-ibkHr-lombok",
1701 | "source": "SKILL-ibkHr-lombok",
1702 | "target": "SKILL-ibkHr-spring"
1703 | }
1704 | },
1705 | {
1706 | "data": {
1707 | "id": "SKILL-ibkHr-JPA",
1708 | "url": "https://spring.io/projects/spring-data-jpa",
1709 | "label": "JPA"
1710 | }
1711 | },
1712 | {
1713 | "data": {
1714 | "id": "SKILL-ibkHr-spring->SKILL-ibkHr-JPA",
1715 | "source": "SKILL-ibkHr-JPA",
1716 | "target": "SKILL-ibkHr-spring"
1717 | }
1718 | },
1719 | {
1720 | "data": {
1721 | "id": "SKILL-ibkHr-gradle",
1722 | "url": "https://gradle.org/",
1723 | "label": "gradle"
1724 | }
1725 | },
1726 | {
1727 | "data": {
1728 | "id": "SKILL-ibkHr-spring->SKILL-ibkHr-gradle",
1729 | "source": "SKILL-ibkHr-gradle",
1730 | "target": "SKILL-ibkHr-spring"
1731 | }
1732 | },
1733 | {
1734 | "data": {
1735 | "id": "FE-ibkHr",
1736 | "label": "Front-End"
1737 | }
1738 | },
1739 | {
1740 | "data": {
1741 | "id": "PJ-ibkHr->FE-ibkHr",
1742 | "source": "FE-ibkHr",
1743 | "target": "PJ-ibkHr"
1744 | }
1745 | },
1746 | {
1747 | "data": {
1748 | "id": "SKILL-ibkHr-react",
1749 | "url": "https://ko.reactjs.org/",
1750 | "label": "React"
1751 | }
1752 | },
1753 | {
1754 | "data": {
1755 | "id": "FE-ibkHr->SKILL-ibkHr-react",
1756 | "source": "SKILL-ibkHr-react",
1757 | "target": "FE-ibkHr"
1758 | }
1759 | },
1760 | {
1761 | "data": {
1762 | "id": "SKILL-ibkHr-mobx",
1763 | "url": "https://mobx.js.org/README.html",
1764 | "label": "mobx"
1765 | }
1766 | },
1767 | {
1768 | "data": {
1769 | "id": "SKILL-ibkHr-react->SKILL-ibkHr-mobx",
1770 | "source": "SKILL-ibkHr-mobx",
1771 | "target": "SKILL-ibkHr-react"
1772 | }
1773 | },
1774 | {
1775 | "data": {
1776 | "id": "SKILL-ibkHr-axios",
1777 | "url": "https://github.com/axios/axios",
1778 | "label": "axios"
1779 | }
1780 | },
1781 | {
1782 | "data": {
1783 | "id": "SKILL-ibkHr-react->SKILL-ibkHr-axios",
1784 | "source": "SKILL-ibkHr-axios",
1785 | "target": "SKILL-ibkHr-react"
1786 | }
1787 | },
1788 | {
1789 | "data": {
1790 | "id": "SKILL-ibkHr-typescript",
1791 | "url": "https://www.typescriptlang.org/",
1792 | "label": "typescript"
1793 | }
1794 | },
1795 | {
1796 | "data": {
1797 | "id": "FE-ibkHr->SKILL-ibkHr-typescript",
1798 | "source": "SKILL-ibkHr-typescript",
1799 | "target": "FE-ibkHr"
1800 | }
1801 | },
1802 | {
1803 | "data": {
1804 | "id": "SKILL-ibkHr-npm",
1805 | "url": "https://www.npmjs.com/",
1806 | "label": "npm"
1807 | }
1808 | },
1809 | {
1810 | "data": {
1811 | "id": "FE-ibkHr->SKILL-ibkHr-npm",
1812 | "source": "SKILL-ibkHr-npm",
1813 | "target": "FE-ibkHr"
1814 | }
1815 | },
1816 | {
1817 | "data": {
1818 | "id": "SKILL-ibkHr-tailwind",
1819 | "url": "https://tailwindcss.com/",
1820 | "label": "Tailwind CSS"
1821 | }
1822 | },
1823 | {
1824 | "data": {
1825 | "id": "FE-ibkHr->SKILL-ibkHr-tailwind",
1826 | "source": "SKILL-ibkHr-tailwind",
1827 | "target": "FE-ibkHr"
1828 | }
1829 | },
1830 | {
1831 | "data": {
1832 | "id": "PJ-ch",
1833 | "url": "https://icloudhospital.com/",
1834 | "label": "Cloud Hospital\n(20.04 ~ 20.07)"
1835 | }
1836 | },
1837 | {
1838 | "data": {
1839 | "id": "ETC-ch",
1840 | "label": "ETC"
1841 | }
1842 | },
1843 | {
1844 | "data": {
1845 | "id": "PJ-ch->ETC-ch",
1846 | "source": "ETC-ch",
1847 | "target": "PJ-ch"
1848 | }
1849 | },
1850 | {
1851 | "data": {
1852 | "id": "ETC-ch-vsc",
1853 | "url": "https://code.visualstudio.com/",
1854 | "label": "VSC"
1855 | }
1856 | },
1857 | {
1858 | "data": {
1859 | "id": "ETC-ch->ETC-ch-vsc",
1860 | "source": "ETC-ch-vsc",
1861 | "target": "ETC-ch"
1862 | }
1863 | },
1864 | {
1865 | "data": {
1866 | "id": "ETC-ch-azureDevops",
1867 | "url": "https://azure.microsoft.com/ko-kr/services/devops/?nav=min",
1868 | "label": "Azure DevOps"
1869 | }
1870 | },
1871 | {
1872 | "data": {
1873 | "id": "ETC-ch->ETC-ch-azureDevops",
1874 | "source": "ETC-ch-azureDevops",
1875 | "target": "ETC-ch"
1876 | }
1877 | },
1878 | {
1879 | "data": {
1880 | "id": "ETC-ch-git",
1881 | "url": "https://git-scm.com/",
1882 | "label": "git"
1883 | }
1884 | },
1885 | {
1886 | "data": {
1887 | "id": "ETC-ch->ETC-ch-git",
1888 | "source": "ETC-ch-git",
1889 | "target": "ETC-ch"
1890 | }
1891 | },
1892 | {
1893 | "data": {
1894 | "id": "ETC-ch-github",
1895 | "url": "https://github.com/",
1896 | "label": "Github"
1897 | }
1898 | },
1899 | {
1900 | "data": {
1901 | "id": "ETC-ch-git->ETC-ch-github",
1902 | "source": "ETC-ch-github",
1903 | "target": "ETC-ch-git"
1904 | }
1905 | },
1906 | {
1907 | "data": {
1908 | "id": "ETC-ch-githubDesktop",
1909 | "url": "https://desktop.github.com/",
1910 | "label": "Github Desktop"
1911 | }
1912 | },
1913 | {
1914 | "data": {
1915 | "id": "ETC-ch-git->ETC-ch-githubDesktop",
1916 | "source": "ETC-ch-githubDesktop",
1917 | "target": "ETC-ch-git"
1918 | }
1919 | },
1920 | {
1921 | "data": {
1922 | "id": "BE-ch",
1923 | "label": "Back-End"
1924 | }
1925 | },
1926 | {
1927 | "data": {
1928 | "id": "PJ-ch->BE-ch",
1929 | "source": "BE-ch",
1930 | "target": "PJ-ch"
1931 | }
1932 | },
1933 | {
1934 | "data": {
1935 | "id": "SKILL-ch-swagger",
1936 | "url": "https://swagger.io/",
1937 | "label": "Swagger"
1938 | }
1939 | },
1940 | {
1941 | "data": {
1942 | "id": "BE-ch->SKILL-ch-swagger",
1943 | "source": "SKILL-ch-swagger",
1944 | "target": "BE-ch"
1945 | }
1946 | },
1947 | {
1948 | "data": {
1949 | "id": "FE-ch",
1950 | "label": "Front-End"
1951 | }
1952 | },
1953 | {
1954 | "data": {
1955 | "id": "PJ-ch->FE-ch",
1956 | "source": "FE-ch",
1957 | "target": "PJ-ch"
1958 | }
1959 | },
1960 | {
1961 | "data": {
1962 | "id": "SKILL-ch-razzle",
1963 | "url": "https://github.com/jaredpalmer/razzle",
1964 | "label": "Razzle"
1965 | }
1966 | },
1967 | {
1968 | "data": {
1969 | "id": "FE-ch->SKILL-ch-razzle",
1970 | "source": "SKILL-ch-razzle",
1971 | "target": "FE-ch"
1972 | }
1973 | },
1974 | {
1975 | "data": {
1976 | "id": "SKILL-ch-cypress",
1977 | "url": "https://www.cypress.io/",
1978 | "label": "Cypress"
1979 | }
1980 | },
1981 | {
1982 | "data": {
1983 | "id": "FE-ch->SKILL-ch-cypress",
1984 | "source": "SKILL-ch-cypress",
1985 | "target": "FE-ch"
1986 | }
1987 | },
1988 | {
1989 | "data": {
1990 | "id": "SKILL-ch-react",
1991 | "url": "https://ko.reactjs.org/",
1992 | "label": "React"
1993 | }
1994 | },
1995 | {
1996 | "data": {
1997 | "id": "FE-ch->SKILL-ch-react",
1998 | "source": "SKILL-ch-react",
1999 | "target": "FE-ch"
2000 | }
2001 | },
2002 | {
2003 | "data": {
2004 | "id": "SKILL-ch-sendbird",
2005 | "url": "https://sendbird.com/",
2006 | "label": "Sendbird Chat"
2007 | }
2008 | },
2009 | {
2010 | "data": {
2011 | "id": "SKILL-ch-react->SKILL-ch-sendbird",
2012 | "source": "SKILL-ch-sendbird",
2013 | "target": "SKILL-ch-react"
2014 | }
2015 | },
2016 | {
2017 | "data": {
2018 | "id": "SKILL-ch-formik",
2019 | "url": "https://github.com/formium/formik",
2020 | "label": "Formik"
2021 | }
2022 | },
2023 | {
2024 | "data": {
2025 | "id": "SKILL-ch-react->SKILL-ch-formik",
2026 | "source": "SKILL-ch-formik",
2027 | "target": "SKILL-ch-react"
2028 | }
2029 | },
2030 | {
2031 | "data": {
2032 | "id": "SKILL-ch-yup",
2033 | "url": "https://github.com/jquense/yup",
2034 | "label": "Yup"
2035 | }
2036 | },
2037 | {
2038 | "data": {
2039 | "id": "SKILL-ch-formik->SKILL-ch-formik",
2040 | "source": "SKILL-ch-yup",
2041 | "target": "SKILL-ch-formik"
2042 | }
2043 | },
2044 | {
2045 | "data": {
2046 | "id": "SKILL-ch-oauth",
2047 | "url": "https://oauth.net/",
2048 | "label": "OAuth"
2049 | }
2050 | },
2051 | {
2052 | "data": {
2053 | "id": "SKILL-ch-react->SKILL-ch-oauth",
2054 | "source": "SKILL-ch-oauth",
2055 | "target": "SKILL-ch-react"
2056 | }
2057 | },
2058 | {
2059 | "data": {
2060 | "id": "SKILL-ch-facebookLogin",
2061 | "url": "https://www.npmjs.com/package/react-facebook-login",
2062 | "label": "react-facebook-login"
2063 | }
2064 | },
2065 | {
2066 | "data": {
2067 | "id": "SKILL-ch-oauth->SKILL-ch-facebookLogin",
2068 | "source": "SKILL-ch-facebookLogin",
2069 | "target": "SKILL-ch-oauth"
2070 | }
2071 | },
2072 | {
2073 | "data": {
2074 | "id": "SKILL-ch-googleLogin",
2075 | "url": "https://www.npmjs.com/package/react-google-login",
2076 | "label": "react-google-login"
2077 | }
2078 | },
2079 | {
2080 | "data": {
2081 | "id": "SKILL-ch-oauth->SKILL-ch-googleLogin",
2082 | "source": "SKILL-ch-googleLogin",
2083 | "target": "SKILL-ch-oauth"
2084 | }
2085 | },
2086 | {
2087 | "data": {
2088 | "id": "SKILL-ch-rtl",
2089 | "url": "https://testing-library.com/docs/react-testing-library/intro",
2090 | "label": "React Testing Library"
2091 | }
2092 | },
2093 | {
2094 | "data": {
2095 | "id": "SKILL-ch-react->SKILL-ch-rtl",
2096 | "source": "SKILL-ch-rtl",
2097 | "target": "SKILL-ch-react"
2098 | }
2099 | },
2100 | {
2101 | "data": {
2102 | "id": "SKILL-ch-redux",
2103 | "url": "https://redux.js.org/",
2104 | "label": "Redux"
2105 | }
2106 | },
2107 | {
2108 | "data": {
2109 | "id": "SKILL-ch-react->SKILL-ch-redux",
2110 | "source": "SKILL-ch-redux",
2111 | "target": "SKILL-ch-react"
2112 | }
2113 | },
2114 | {
2115 | "data": {
2116 | "id": "SKILL-ch-rxjs",
2117 | "url": "https://rxjs-dev.firebaseapp.com/",
2118 | "label": "RxJS"
2119 | }
2120 | },
2121 | {
2122 | "data": {
2123 | "id": "SKILL-ch-redux->SKILL-ch-rxjs",
2124 | "source": "SKILL-ch-rxjs",
2125 | "target": "SKILL-ch-redux"
2126 | }
2127 | },
2128 | {
2129 | "data": {
2130 | "id": "SKILL-ch-axios",
2131 | "url": "https://github.com/axios/axios",
2132 | "label": "axios"
2133 | }
2134 | },
2135 | {
2136 | "data": {
2137 | "id": "SKILL-ch-react->SKILL-ch-axios",
2138 | "source": "SKILL-ch-axios",
2139 | "target": "SKILL-ch-react"
2140 | }
2141 | },
2142 | {
2143 | "data": {
2144 | "id": "SKILL-ch-typescript",
2145 | "url": "https://www.typescriptlang.org/",
2146 | "label": "typescript"
2147 | }
2148 | },
2149 | {
2150 | "data": {
2151 | "id": "FE-ch->SKILL-ch-typescript",
2152 | "source": "SKILL-ch-typescript",
2153 | "target": "FE-ch"
2154 | }
2155 | },
2156 | {
2157 | "data": {
2158 | "id": "SKILL-ch-eslint",
2159 | "url": "https://eslint.org/",
2160 | "label": "ESLint"
2161 | }
2162 | },
2163 | {
2164 | "data": {
2165 | "id": "SKILL-ch-typescript->SKILL-ch-eslint",
2166 | "source": "SKILL-ch-eslint",
2167 | "target": "SKILL-ch-typescript"
2168 | }
2169 | },
2170 | {
2171 | "data": {
2172 | "id": "SKILL-ch-npm",
2173 | "url": "https://www.npmjs.com/",
2174 | "label": "npm"
2175 | }
2176 | },
2177 | {
2178 | "data": {
2179 | "id": "FE-ch->SKILL-ch-npm",
2180 | "source": "SKILL-ch-npm",
2181 | "target": "FE-ch"
2182 | }
2183 | },
2184 | {
2185 | "data": {
2186 | "id": "PJ-fsfs",
2187 | "label": "Fast Five - Five Spot Project (21.06 ~ 21.11)"
2188 | }
2189 | },
2190 | {
2191 | "data": {
2192 | "id": "REACT-fsfs",
2193 | "label": "REACT"
2194 | }
2195 | },
2196 | {
2197 | "data": {
2198 | "id": "PJ-fsfs->ETC-fsfs",
2199 | "source": "REACT-fsfs",
2200 | "target": "PJ-fsfs"
2201 | }
2202 | }
2203 | ]
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "js-cytoscape-mindmap",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "homepage": "https://nomelancholy.github.io/pj-project-driven-study-mind-map",
7 | "scripts": {
8 | "build": "webpack",
9 | "start": "webpack-dev-server --hot",
10 | "predeploy":"npm run build",
11 | "deploy":"gh-pages -d build"
12 | },
13 | "keywords": [],
14 | "author": "",
15 | "license": "ISC",
16 | "dependencies": {
17 | "@babel/core": "^7.7.7",
18 | "@babel/preset-env": "^7.7.7",
19 | "@babel/preset-react": "^7.7.4",
20 | "babel-loader": "^8.0.6",
21 | "clean-webpack-plugin": "^3.0.0",
22 | "css-loader": "^3.4.0",
23 | "cytoscape": "^3.12.1",
24 | "cytoscape-cose-bilkent": "^4.1.0",
25 | "html-loader": "^0.5.5",
26 | "html-webpack-plugin": "^3.2.0",
27 | "mini-css-extract-plugin": "^0.9.0",
28 | "style-loader": "^1.1.1",
29 | "webpack": "^4.41.4",
30 | "webpack-cli": "^3.3.10",
31 | "webpack-dev-server": "^3.10.1"
32 | },
33 | "devDependencies": {
34 | "file-loader": "^5.0.2",
35 | "gh-pages": "^2.1.1"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
14 |
15 |
16 |
17 |
18 | Take Knowledge's Project Skill Map
19 |
20 |
21 |
22 |
23 |
24 |
25 |
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomelancholy/project-skill-map/56803a289a8b8b45667f12a93f311a118389166c/src/favicon.ico
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import cytoscape from 'cytoscape';
2 | import coseBilkent from 'cytoscape-cose-bilkent';
3 | cytoscape.use(coseBilkent);
4 |
5 | import './style.css';
6 | // webpack으로 묶어줘야 하니 css파일을 진입점인 index.js 에 import 합니다
7 | import './favicon.ico';
8 | // favicon build
9 | import '../model/data.json';
10 | // data build
11 |
12 | fetch('./model/data.json', { mode: 'no-cors' })
13 | .then(function (res) {
14 | return res.json();
15 | })
16 | .then(function (data) {
17 |
18 | const cy_for_rank = cytoscape({
19 | elements: data
20 | });
21 | // rank를 활용하기 위해 data만 입력한 cytoscape 객체입니다
22 |
23 | const pageRank = cy_for_rank.elements().pageRank();
24 | // elements들의 rank들입니다.
25 |
26 | const nodeMaxSize = 50;
27 | const nodeMinSize = 5;
28 | const nodeActiveSize = 20;
29 | const fontMaxSize = 10;
30 | const fontMinSize =8;
31 | const fontActiveSize = 10;
32 | // node & font 크기 값
33 |
34 | const edgeWidth = '2px';
35 | var edgeActiveWidth = '4px';
36 | const arrowScale = 0.8;
37 | const arrowActiveScale = 1.2;
38 | // edge & arrow 크기값
39 |
40 | const dimColor = '#dfe4ea';
41 | const edgeColor = '#ced6e0';
42 | const nodeColor = '#57606f';
43 | const nodeActiveColor = '#0367A6';
44 |
45 | const successorColor = '#023859';
46 | // 상위 node & edge color
47 | const predecessorsColor = '#66A8D1';
48 | // 하위 node & edge color
49 |
50 | const cy = cytoscape({
51 |
52 | container: document.getElementById('cy'), // container to render in
53 |
54 | elements: data,
55 |
56 | style: [ // the stylesheet for the graph
57 | {
58 | selector: 'node',
59 | style: {
60 | 'background-color': nodeColor,
61 | 'label': 'data(label)',
62 | 'width': function (ele) {
63 | return nodeMaxSize * (pageRank.rank('#' + ele.id()) * 8) + nodeMinSize;
64 | },
65 | 'height': function (ele) {
66 | return nodeMaxSize * (pageRank.rank('#' + ele.id()) * 8 ) + nodeMinSize;
67 | },
68 | 'font-size': function (ele) {
69 | return fontMaxSize * pageRank.rank('#' + ele.id()) + fontMinSize;
70 | },
71 | 'color': nodeColor,
72 | 'text-wrap': 'wrap'
73 | }
74 | },
75 |
76 | {
77 | selector: 'edge',
78 | style: {
79 | 'width': edgeWidth,
80 | 'curve-style': 'bezier',
81 | 'line-color': edgeColor,
82 | 'source-arrow-color': edgeColor,
83 | 'source-arrow-shape': 'vee',
84 | 'arrow-scale': arrowScale
85 | }
86 | }
87 | ],
88 |
89 | layout: {
90 | name: 'cose-bilkent',
91 | animate: false,
92 | gravityRangeCompound: 1.5,
93 | fit: true,
94 | tile: true
95 | }
96 | });
97 |
98 | function setDimStyle(target_cy, style) {
99 | target_cy.nodes().forEach(function (target) {
100 | target.style(style);
101 | });
102 | target_cy.edges().forEach(function (target) {
103 | target.style(style);
104 | });
105 | }
106 |
107 | function setFocus(target_element, successorColor, predecessorsColor, edgeWidth, arrowScale) {
108 | target_element.style('background-color', nodeActiveColor);
109 | target_element.style('color', nodeColor);
110 | target_element.successors().each(function (e) {
111 | // 상위 엣지와 노드
112 | if (e.isEdge()) {
113 | e.style('width', edgeWidth);
114 | e.style('arrow-scale', arrowScale);
115 | }
116 | e.style('color', nodeColor);
117 | e.style('background-color', successorColor);
118 | e.style('line-color', successorColor);
119 | e.style('source-arrow-color', successorColor);
120 | setOpacityElement(e, 0.8);
121 | }
122 | );
123 | target_element.predecessors().each(function (e) {
124 | // 하위 엣지와 노드
125 | if (e.isEdge()) {
126 | e.style('width', edgeWidth);
127 | e.style('arrow-scale', arrowScale);
128 | }
129 | e.style('color', nodeColor);
130 | e.style('background-color', predecessorsColor);
131 | e.style('line-color', predecessorsColor);
132 | e.style('source-arrow-color', predecessorsColor);
133 | setOpacityElement(e, 0.6);
134 | });
135 | target_element.neighborhood().each(function (e) {
136 | // 이웃한 엣지와 노드
137 | setOpacityElement(e, 1);
138 | }
139 | );
140 | target_element.style('width', Math.max(parseFloat(target_element.style('width')), nodeActiveSize));
141 | target_element.style('height', Math.max(parseFloat(target_element.style('height')), nodeActiveSize));
142 | target_element.style('font-size', Math.max(parseFloat(target_element.style('font-size')), fontActiveSize));
143 | }
144 |
145 | function setOpacityElement(target_element, degree) {
146 | target_element.style('opacity', degree);
147 | }
148 |
149 | function setResetFocus(target_cy) {
150 | target_cy.nodes().forEach(function (target) {
151 | target.style('background-color', nodeColor);
152 | var rank = pageRank.rank(target);
153 | target.style('width', nodeMaxSize * ( rank * 8 )+ nodeMinSize);
154 | target.style('height', nodeMaxSize * ( rank * 8 ) + nodeMinSize);
155 | target.style('font-size', fontMaxSize * rank + fontMinSize);
156 | target.style('color', nodeColor);
157 | target.style('opacity', 1);
158 | });
159 | target_cy.edges().forEach(function (target) {
160 | target.style('line-color', edgeColor);
161 | target.style('source-arrow-color', edgeColor);
162 | target.style('width', edgeWidth);
163 | target.style('arrow-scale', arrowScale);
164 | target.style('opacity', 1);
165 | });
166 | }
167 |
168 | cy.on('tap', function (e) {
169 | const url = e.target.data('url')
170 | if (url && url !== '') {
171 | window.open(url);
172 | }
173 | });
174 |
175 | cy.on('tapstart mouseover', 'node', function (e) {
176 | setDimStyle(cy, {
177 | 'background-color': dimColor,
178 | 'line-color': dimColor,
179 | 'source-arrow-color': dimColor,
180 | 'color': dimColor
181 | });
182 |
183 | setFocus(e.target, successorColor, predecessorsColor, edgeActiveWidth, arrowActiveScale);
184 | });
185 |
186 | cy.on('tapend mouseout', 'node', function (e) {
187 | setResetFocus(e.cy);
188 | });
189 |
190 | let resizeTimer;
191 |
192 | window.addEventListener('resize', function () {
193 | this.clearTimeout(resizeTimer);
194 | resizeTimer = this.setTimeout(function () {
195 | cy.fit();
196 | }, 200);
197 | });
198 | });
199 |
200 |
201 |
--------------------------------------------------------------------------------
/src/style.css:
--------------------------------------------------------------------------------
1 | html,body,#cy {
2 | width: 100%;
3 | height: 100%;
4 | }
5 | body {
6 | margin: 0;
7 | }
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | const path = require("path");
2 | const HtmlWebPackPlugin = require("html-webpack-plugin");
3 | // html 파일 추출 플러그인입니다
4 | const MiniCssExtractPlugin = require("mini-css-extract-plugin");
5 | // css 파일 추출 플러그인입니다
6 | const { CleanWebpackPlugin } = require("clean-webpack-plugin");
7 | // build 폴더 자동 정리를 위한 플러그인 입니다
8 |
9 | module.exports = {
10 | entry: "./src/index.js",
11 | output: {
12 | filename: "bundle.js",
13 | path: path.resolve(__dirname + "/build")
14 | },
15 | devServer: {
16 | contentBase: path.resolve("./build"),
17 | index: "index.html",
18 | port: 9000
19 | // 변경 사항 자동 적용을 위한 설정입니다
20 | },
21 | mode: "none",
22 | module: {
23 | rules: [
24 | {
25 | test: /\.(js|jsx)$/,
26 | exclude: "/node_modules",
27 | use: ['babel-loader'],
28 | },
29 | {
30 | test: /\.html$/,
31 | use: [
32 | {
33 | loader: "html-loader",
34 | options: { minimize: true }
35 | }
36 | ]
37 | },
38 | {
39 | test: /\.css$/,
40 | use: [MiniCssExtractPlugin.loader,'css-loader']
41 | },
42 | {
43 | test: /\.json$/,
44 | type: "javascript/auto",
45 | loader: "file-loader",
46 | options: {
47 | name: "model/[name].[ext]"
48 | },
49 | include: [
50 | path.resolve(__dirname, "./model")
51 | ]
52 | },
53 | {
54 | test:/\.ico$/,
55 | loader:"file-loader?name=[name].[ext]",
56 | }
57 | ]
58 | },
59 | plugins: [
60 | new HtmlWebPackPlugin({
61 | template: './public/index.html',
62 | filename: 'index.html'
63 | }),
64 | new MiniCssExtractPlugin({
65 | filename: 'style.css'
66 | }),
67 | new CleanWebpackPlugin()
68 | ]
69 | };
--------------------------------------------------------------------------------