D3

회사에서 개발하고 있는 토폴로지에 대해 탐구하던 도중, D3를 알게 되었습니다.매우 흥미로운 라이브러리이기에 이에 대해 알아보려고 합니다. 1. D3D3란 무엇일까요? (D3 공식 홈페이지 바로가기)D3.js는 데이터를 시각적으로 표현하기 위한 JavaScript 라이브러리입니다.D3는 Data-Driven Documents의 약자입니다. 이는 웹 브라우저에서 데이터를 기반으로 동적이고 인터랙티브한 시각화 및 애니메이션을 생성하는 데 사용됩니다.HTML, SVG, CSS와 같은 웹 표준 기술을 사용하여 데이터 시각화를 구축해요. 2. 특징D3의 특징은 다음과 같습니다.1) 데이터 바인딩D3는 데이터를 DOM(Document Object Model) 요소에 바인딩할 수 있어요.이로 인해 데이터에 기반한 그..

• format_list_bulleted JavaScript
• · 2024. 8. 14.
• textsms

AG Grid의 Grid Option

AG Grid의 Grid Option은 AG Grid를 설정하고 동작을 제어하는 데, 사용됩니다.저는 ag-gird-vue라는 태그 안에 Grid Option을 사용했어요.Grid Option에는 무엇이 있고 어떤 역할을 하는지 알아봅시다! 1. Grid OptionGrid Option은 다음과 같습니다. (Grid Options 공식 홈페이지 바로가기)옵션설명groupRemoveSingleChildren그룹화된 데이터에서 자식이 하나만 있는 경우, 그룹을 축소화할 지 결정합니다.localeText 텍스트의 언어를 설정합니다. style 그리드의 스타일을 설정합니다. class 그리드의 클래스를 설정합니다. rowData 배열 형태의 데이터를 그리드에 로드합니다. getRowNodeId 주어진 ID를 가..

• format_list_bulleted Vue.js
• · 2024. 8. 7.
• textsms

try-with-resources

java로 작업이 되어 있는 오픈소스를 분석하던 도중 신기한 코드를 보았습니다.바로 try문 안에 소괄호가 있는 것인데요!제가 알고 있는 try문은 바로 실행문으로 넘어가는 것인데, 이것이 바로 try-with-resources라고 하네요.이는 무엇인지 궁금하여, 알아보게 되었습니다. 1. try-with-resourcestry-with-resource 구문은 Java 7에서 도입된 기능으로, 리소스를 명시적으로 닫아주는 것이 아니라, 자동으로 닫아주는 구조를 제공한다고 합니다.이를 통해 코드가 더 간결하고 안전해지며, 리소스를 제대로 해제하지 않아 발생할 수 있는 메모리 누수 or 다른 문제를 방지할 수 있습니다. 2. 기본 문법그러면 직접 사용해 보기 전에, 문법이 어떻게 이루어져 있는지 확인해 봅시..

• format_list_bulleted Java
• · 2024. 8. 2.
• textsms

오류가 발생한 엑셀 csv 파일의 열 찾기

1. 문제 해석csv 파일을 불러와 vue에 모달창으로 사용해야 하는 업무가 있었습니다.회사 관련 코드이기에 자세하게 알려줄 수 없으나, 코드는 다음과 같습니다. upload.javapublic class Controller { @PostMapping("/test") public SingleResponse upload(MultipartFile file) { try { csvService.saveCsv(file); return responseService.createResponse(true); } catch (Exception e) { return responseService.createResponse(e.toS..

• format_list_bulleted Java
• · 2024. 7. 30.
• textsms

BuffredReader - 엑셀 불러오기

데이터허브 관련 업무 도중 엑셀을 불러와서 테이블에 대입하는 기능이 필요했습니다.이 때 사용하는 기능이 BuffredReader인데, 이 것이 무엇인지 모르기에 이번 기회에 알아봅시다! 1. BuffredReaderBuffredReader란? Java에서 텍스트 파일 or 다른 입력 스트림에서 데이터를 효율적으로 읽기 위해 사용되는 클래스입니다. java.io 패키지에 포함되어 있으며, 주로 파일 읽기, 네트워크 통신, 콘솔 입력 등에서 유용하게 사용됩니다. 2. 특징BufferedReader의 특징에 대해 알아봅시다. 먼저 BufferedReader는 내부 버퍼를 사용하여 데이터를 한 번에 읽어들입니다. 이로 인해 I/O 작업의 빈도를 줄이고 성능을 향상시킬 수 있어요.※ I/O : 입력(Input)과..

• format_list_bulleted Java
• · 2024. 7. 23.
• textsms

AG Grid

데이터 허브 관련 UI를 작업하던 도중, 처음 접해보는 라이브러리를 발견했습니다.그것은 바로 AG Grid인데요. 이것이 무엇인지 알아봅시다! 1. AG GridAG Grid란?(AG Grid 공식 홈페이지 바로가기) 고성능의 JavaScript 데이터 그리드 라이브러리로, 다양한 기능과 유연성을 제공하여 웹 애플리케이션에서 복잡한 테이블과 데이터를 효과적으로 관리하고 표시할 수 있게 지원합니다. 2. AG Grid 설치그럼 바로 AG Grid를 설치해 봅시다!(저는 Vue를 사용했어요,) 설치 공식 문서 1) NPM 설치다음과 같이 입력하여, 라이브러리를 설치해 줍니다.npm install ag-grid-vue3 2) Vue 데이터 그리드 가져오기그럼 이제 데이터 그리드를 가져와야겠죠?AG Grid를 ..

• format_list_bulleted Vue.js
• · 2024. 7. 22.
• textsms

NMS(Network Management System)

통합 NMS를 개발할 예정인 저는 개발을 시작하기 전에, NMS가 무엇인지 알아보고자 하였습니다! 1. NMS(Network Management System)NMS란? 네트워크 관리 시스템으로 컴퓨터 네트워크의 구성, 모니터링, 유지보수, 성능 최적화 및 문제 해결을 담당하는 시스템입니다.NMS는 대규모 네트워크 환경에서 특히 중요하며, 효율적인 네트워크 운영을 보장하는 데 필수적인 도구에요.보통 NMS는 기업 단위 네트워크 상의 전 장비로 중앙 감시 및 성능 관리용으로 사용합니다.  2. NMS의 5대 기능(FCAPS)NMS는 5가지의 중요 기능을 존재합니다. 이를 FCAPS라고 해요.이 기능들이 무엇인지 알아봅시다! 1) 장애 관리(Fault Management)NMS는 네트워크 장비와 링크의 장애를..

• format_list_bulleted Computer Science
• · 2024. 7. 14.
• textsms

Helper 함수

Vuex의 주요 속성들을 더욱 쉽게 사용할 수 있는 API가 있다고 해서 그것이 무엇이고, 어떻게 사용하는 지 알아봅시다! 1. HelperHelper란? 코드의 중복을 줄이고 가독성을 높이기 위해 자주 사용되는 유틸리티 함수 or 메소드를 제공하는 API입니다. 2. 사용방법helper를 사용하고자 하는 vue 파일에서 다음과 같이 해당 헬퍼를 로딩해 줍니다.App.vueimport { mapState } from "vuex";import { mapGetters } from "vuex";import { mapMutations } from "vuex";import { mapActions } from "vuex";export default { computed() { ...mapState(["num"]),..

• format_list_bulleted Vue.js
• · 2024. 7. 9.
• textsms

Vuex

React에서는 Flux 패턴과 같은 상태 관리 아키텍처가 존재합니다.Vue또한 상태 관리를 하기 위해 무엇인가 존재할 것 같은데요.그렇게 찾아보다가 Vuex를 찾게 되었습니다!Vuex가 무엇이고 어떤 특징을 가지는 지 알아봅시다. 1. VuexVuex는 Vue.js 애플리케이션을 위한 상태 관리 라이브러리로, 중앙 집중식 저장소를 제공하여 컴포넌트 간의 상태 관리를 용이하게 합니다!이는 애플리케이션의 상태를 예측 가능한 방식으로 관리하고, 상태 변경을 추적하고, 디버깅을 쉽게 할 수 있게 해줘요.이는 React의 Flux 패턴에서 기인했다고 합니다. ※ Flux 패턴Flux 패턴이 뭘까요?Flux 패턴이란, Facebook에서 제안한 애플리케이션 아키텍처로 MVC 패턴의 복잡한 데이터 흐름 문제를 해결..

• format_list_bulleted Vue.js
• · 2024. 7. 9.
• textsms

Vue.js에서의 ES6

Vue.js에서 ES6를 사용하여 개발하면, 더욱 편하게 개발할 수 있을 거에요.여기서 ES6는 무엇이고 이를 활용한 문법이 무엇이 있는지 알아봅시다! 1. ES6ES6(ECMAScript 2015 or ES2015)란? JavaScript 언어의 주요 버전 업데이트로, JavaScript 언어의 기능을 크게 확장하고 향상시킵니다.※ 여기서 2015년은 ES5(2009년)이래로 진행한 첫 메이더 업데이트가 승인된 해입니다. 또한, 최신 Front-End Framework인 React, Angular, Vue에서 권고하는 언어 형식입니다.ES5에 비해 문법이 간결해져서 익숙해지면, 코딩을 훨씬 편하게 할 수 있을 거에요. 2. Babelbabel 공식 홈페이지 바로가기 ES6를 공부하면, Babel을 빼먹..

• format_list_bulleted Vue.js
• · 2024. 7. 8.
• textsms