📖 일단 따라서 만들어보자!
프로젝트를 시작하기 위해선 Cytoscape.js를 활용해야 한다. 그런데 초보 입장에서 영어+개념 조합은 어디서부터 시작해야 할 지 막막한 끝판왕 보스같은 존재다.
그래서
velog takeknowledge님 Cytoscape 정리자료
여기서부터 시작하기로 했다.
따라서 만들 수 있도록 정리가 잘 되어있어서 차근차근 만들어 똑같은 결과물을 띄우는데 성공했다.
🤔 삽질의 시작
결과물을 따라서 만드는 데에는 성공했지만 내가 원하는 기능을 만들기 위해선 프로그램이 작동하는 구조?를 파악할 필요가 있었다. 이해하기 위해서 코드를 계속해서 살펴봤는데 내가 모르는 개념들이 꼬리를 물고 등장해서 이해가 어려웠다... (Node.js, npm, webpack, plugin, loader, babel...?)
이해를 위해선 사용된 개념들의 공부가 우선적이라는 생각에 생활코딩에서 관련된 강의들을 무작정 듣기 시작했다.
생활코딩 Node.js
생활코딩 npm
생활코딩 webpack
강의 영상 길이를 보고선 금방 끝낼 수 있겠지 싶었지만... 쉽게 이해가 안가서 2주 정도는 계속 강의만 들었다. 문제는 강의를 듣고도 만들어 놓은 예제 파일을 응용해서 내가 원하는 기능을 만들기란 쉽지 않았다.
내가 어렴풋이 구상하고 있던 파일의 구조는 스파르타 코딩클럽 수업을 통해 배운 html파일에서 input값을 뽑아서 ajax 방식으로 데이터를 넘기고 app파일을 통해 db와 연결하는 방식이었는데... app파일을 python으로 구현했었고 베이스가 되는 파일이 html이어서 Cytoscape예제와 비교했을 때 어떻게 적용해야 되는지 감이 안잡혔다.
배운 내용과 대충 이해한 예제의 구조를 나란히 써놓고 머리를 싸매다 python으로 구현했던 app파일을 js으로 구현하려면 python에서 사용했던 flask나 pymongo의 기능을 하는 녀석들을 공부해야겠다 싶어서 튜터님께 질문드리니 express와 mongoose라는 녀석을 알게 되었다.
다시 공부...
mongoose는 따로 강의가 없어서 필요한 부분만 검색해서 활용했다.
그렇게 나름대로 공부해서 node.js를 이용해 app파일을 구현하고 로컬서버, mongoDB 연결 등을 했지만 예제 안에서 저렇게 만들어도 무수한 빨간 글씨들만이 나를 반겼다 하하;;; 이것 저것 해본답시고 프로젝트 폴더 전체 삭제만 몇 번짼지...
멘붕이 와서 다른 프로젝트를 시작해야 되나 반쯤 포기상태다.
