본문 바로가기

HYU/졸업 프로젝트10

9. 데이터 추가 및 연동 이번 활동 요약 지난 번에 구축해둔 서버에 데이터를 추가하고, 프론트와 연동하는 작업을 진행했다 이전까지 백엔드 서버를 구축하고 기본적인 CRUD를 구현했었다 이번에는 DB에 더미 데이터를 추가하고, 프론트엔드에서 API로 데이터를 불러오는 것까지 진행을 했다 데이터 추가 기존에 프론트에서 직접 저장하여 쓰고있던 데이터를 DB에 추가하는 작업을 했다 초기 데이터 저장을 위해 프론트에서 String 형태로 가지고있던 데이터를 파싱해서 서버에 저장했다 이때, 클러스터링을 해서 미리 클러스터별로 색상을 지정해서 색상값도 함께 저장했다 원래는 이 로직을 프론트에서 직접 한 다음, 데이터를 그려내고 있었는데 DB에서 받아오게 된다 이미 모든 준비가 된 데이터를 받아와서 출력하기 때문에, 초기 화면 구성이 빨라졌을.. 2024. 4. 14.

8. 데이터베이스 구축 이번 활동 요약 이번주에는 백엔드 서버 구축을 위해서 데이터베이스를 생성하였다 서버 컴퓨터에 서버를 구축하기 전에, 먼저 로컬에서 개발 작업을 하려고 했다. 그럼에도 현재 둘이서 작업을 하는 상황이기 때문에 데이터베이스는 공유를 하면 좋겠다고 생각하여, 서버 컴퓨터에 데이터베이스만 먼저 설치를 하기로 했다. 그리고 각자 로컬에서 데이터베이스만 연결을 해서 백엔드 작업을 진행하고자 했다 데이터베이스 서버 컴퓨터에 새로 데이터베이스를 설치했다 먼저 어떤 DB를 쓸 것인지를 고민했다. 크게 봤을 때, SQL과 NoSQL로 나눌 수 있다. SQL의 경우에는 주로 관계형 데이터베이스로 생각할 수 있고, NoSQL은 그와 반대되는 비관계형 데이터베이스라고 생각할 수 있다. NoSQL의 장점은 조회가 빠르고, 대용량.. 2024. 3. 31.

7. 웹 서버 구상 이번 활동 요약 이번주에는 백엔드 서버를 어떤 식으로 구성할지에 대해서 구상을 해보았다 프론트엔드 개발은 일단 잠시 미뤄두고, 이번주에는 백엔드 서버 개발을 진행했다 일반적인 상황이었다면 로컬에서 개발을 하고, AWS에 배포하는 식으로 진행을 했을 것이다. 그런데 연구실에 상시 가동할 수 있는 서버 컴퓨터가 있다고 하셔서, 이것을 활용하는 방향으로 진행을 결정했었다. 백엔드 개발 경험도 별로 없지만, 서버 컴퓨터로 서버를 운영하는 것은 처음이라 이것저것 알아보아야 했다. 원격 접속 계속 연구실에 방문해서 작업을 할 수는 없어서, 원격으로 서버 컴퓨터에 접속할 수 있도록 세팅을 했다 기본적인 세팅은 조교님이 해주시고, 나는 연구실에 방문해서 내 계정을 등록하기만 했다. 크롬에서 제공하는 원격 데스크톱을 사.. 2024. 3. 20.

6. 노드 삭제 및 간선 추가 기능 개선 이전 미팅 피드백 이전 미팅에서 받은 피드백을 바탕으로 기능 개선 노드 삭제시 이웃 노드도 함께 삭제할 것인지 여부 선택 가능 서로 다른 클러스터간 간선 추가시 색상 변경 Union-Find 알고리즘 성능 개선 피드백 반영 1. 이웃 노드 삭제 여부 결정 특정 노드 삭제시 해당 노드와 이웃한 노드를 함께 삭제할지 선택 가능하도록 개선 const handleSubmit = useCallback(() => { if (filter === "") { return; } setRerender(false); setGraphData((prev) => { let filteredNodes = prev.nodes; let filteredEdges = prev.edges; if (deleteNeighbor) { filtere.. 2024. 3. 17.

5. 정점, 간선 추가 및 삭제 이번 활동 요약 이번주에는 Cytoscape.js에서 Measure에 대한 기능을 제공하는지 알아보고, 정점과 간선을 추가하고 삭제할 수 있는 기능을 일부 구현했다. Community Detection은 어느정도 되었으니, 이제 노드의 Degree, Path의 길이 등 Network에 대한 정보를 사용자에게 제공하기 위해서 Network를 측정할 수 있는 기능들을 제공하는지 찾아보았다. 기존에는 파이썬에서 해당 기능들을 제공하기 때문에 파이썬에 이미 구현이 되어 있지만, 프론트단에서 계산을 해서 바로 보여주게 되면 아무래도 더 빠르게 전달할 수 있기 때문에 Cytoscape.js에서 그런 기능들을 제공하는지 찾아보았다. Network Analyzer Cytoscape에서는 Network에 대한 통계 정보.. 2024. 3. 4.

4. 페이지 레이아웃 디자인 및 변경 이번 활동 요약 이번주에는 페이지를 어떤 식으로 구성할 것인지 레이아웃 을 정하고, 디자인을 고민했다. 지난번에는 Union-Find를 통해서 Community를 Detection하고 각 커뮤니티마다 다른 색상을 칠하는 게 가능한 것까지 확인했다. 이번에는 기존에 있던 페이지를 Migration할 때 기존 기능을 어떻게 구현하고, 디자인할지를 고민했다. 기존에 있었던 페이지의 문제점은, 사용자와의 상호작용이 불가능하다는 것이다. 옵션을 선택한 후 그래프를 요청하면 서버에서 그래프를 그린 다음 pdf 형태로 내려주는 방식이었다. 우리는 리액트를 사용해서 사용자와 실시간으로 상호작용을 하며, 옵션을 적용할 수 있는 형태로 바꾸고자 현재 프로젝트를 진행 중이다. 레퍼런스 옵션을 적용하면서 실시간으로 시각화를 .. 2024. 2. 26.

3. Community Detection 지난 활동 요약 지난 활동을 바탕으로 이번에는 어떤 작업을 할지 정해보았다 지난 번에 Cytoscape에는 어떤 레이아웃들이 존재하는지 파악하고, 각 레이아웃들의 성능을 가볍게 측정해보았다. 그 결과 fcose 레이아웃이 우리의 주제와 가장 적합하다고 생각했고, 성능도 나쁘지 않았다. => fcose 레이아웃을 기본으로 사용하고, 다른 레이아웃들은 유저가 선택시 보여줄 수 있도록 하는 방향으로 결정을 내렸다. 이번 활동 요약 이번에 해야 할 작업을 크게 2가지로 정했다 1. 각 커뮤니티 별로 다른 색 으로 나타내고, 2. Degree가 큰 노드일수록 노드의 크기를 크게 표현하는 것이다. Degree에 따라 크기 조절하기 Degree가 큰 노드는 크기를 크게 표현해서 인식하기 쉽게 하기 위함 비교적 쉬워보.. 2024. 2. 9.

2. Layout 탐색 및 성능 측정 지난 논의에서 우리는 일단은 Cytoscape를 사용하는 것으로 확정지었고, 그러기 위해서는 데이터가 많아졌을 때 느려지는 현상에 대한 방안을 떠올려야 했다. 간단하게 2가지의 선택지를 생각할 수 있다. 1. 서버에서 그림을 그려서, 이미지 파일만 클라이언트측으로 전송한다. 2. 클라이언트측에서 그림을 그리되, 최적화해서 그리는 방법을 모색한다. 1번의 경우 클라이언트측에 부담을 덜어줄 수 있다는 장점이 있지만, 대신 사용자가 노드를 끌어다가 움직인다던가의 상호작용은 불가능할 것이다. 2번의 경우 클라이언트의 브라우저에 부담이 가지만, 상호작용이 가능하다는 것이 장점이다. 그런데 조교님의 요구사항으로는 상호작용이 가능해야 했기 때문에 2번 으로 방향성을 잡았다. Layout 지난 번 시연에서는 Cytos.. 2024. 1. 31.

1. 네트워크 시각화 툴 탐색 이번주 활동 요약 이번주에 어떤 것들을 해야할지 정리 먼저 해야 할 것은, 어떤 툴을 사용해서 데이터를 시각화할 것인지를 선정하는 것이다. 최우선으로 고려해야 할 점은 웹 페이지에 나타낼 수 있는지이다. 웹 서비스를 구축하는 것이 최종 목표이기 때문에 웹 페이지에 그래프를 나타낼 수 있는지 여부가 툴을 선정하는 데 있어 가장 중요했다. 우리는 총 3가지의 툴을 살펴보았다. 1. GraphViz (Graph Visualizer) 2. SocNetV (Social Network Visualizer) 3. Cytograph 각 프로그램마다 기능 비교 공식 문서를 찾아보면서 기능들을 간략히 정리해 보았다. SocNetV (Social Network Visualizer) SocNetV는 기본적으로는 소셜 네트워크.. 2024. 1. 25.

이전 1 2 다음

티스토리툴바