분류 전체보기

D3.js 데이터 시각화를 구현하기 위한 자바스크립트 라이브러리

D3.js D3.js는 "Data-Driven Documents"의 약어로, 데이터 시각화를 위한 무료 오픈 소스 JavaScript 라이브러리입니다. D3.js는 데이터를 가져와 이를 시각화 시켜주는 도구로써 그래프, 차트, 지도 대시보드 등 다양한 형태의 데이터 시각화를 구현하는데 도움이 됩니다. D3.js는 HTML 문서의 DOM 요소를 선택하고 조작하여 데이터를 시각화합니다. 또한 SVG를 사용하여 그래프, 차트 등의 요소를 그립니다. SVG란? SVG(Scalable Vector Graphics)란 XML 기반의 벡터 그래픽 형식으로, 웹 페이지와 어플리케이션에서 벡터 기반의 그래픽을 표현하기 위해 사용됩니다. HTML이 헤더, 표와 같은 요소를 제공하는 거처럼 SVG는 원, 사각형, 곡선 등을..

JS 자바스크립트: `프로토타입` 기반 객체 지향 프로그래밍 언어

프로토타입(Prototype) 프로토타입 기반 언어는 객체 지향 프로그래밍의 한 형태로, 클래스 기반 언어와는 다른 객체 지향 모델을 따릅니다. JS(JavaScript)는 대표적인 프로토타입 기반 언어입니다. 프로토타입 상속: 클래스 기반 언어에서는 객체를 클래스의 인스턴스로 생성하는 반면, 프로토타입 기반 언어에서 객체는 다른 객체로부터 직접 상속됩니다. 즉, 객체는 다른 객체의 프로퍼티와 메서드를 상속받아 사용할 수 있습니다. 이때, 새로운 객체는 원본 객체의 프로토타입을 상속받습니다. 이를 통해 코드 재사용과 확장이 간단하게 이루어집니다. 프로토타입 객체: 프로토타입 기반 언어에서는 객체가 자체 속성과 메서드를 가짐과 동시에 prototype이라는 특수한 속성을 가집니다. 이 prototype 속..

Spring Boot Validation @NotNull, @NotEmpty, @NotBlank 차이점

유효성 검증을 위해 Java Bean Validation을 사용합니다. 그 중 성격이 비슷한 @NotNull과 @NotEmpty, @NotBlank에 간략히 정리하겠습니다. 객체의 유효성 검증, Hibernate Validator에 대한 개념과 사용 예시를 자세히 알고 싶으면 다음 링크를 따라가주시면 됩니다. :) https://yeo-computerclass.tistory.com/284 Spring Hibernate Validator와 Data Binding: 데이터 유효성 검사와 데이터 연결 Validation이란? 유효성 검증으로 전달 받은 데이터 객체의 내용에서 잘못된 내용이 있는지 유효성을 확인합니다. Spring은 주로 다음 두 가지 방식으로 유효성 검증을 합니다. Java Bean Valid..

Vue.js vue-infinite-loading을 사용한 무한 스크롤 구현하기

무한 스크롤 웹 어플리케이션에서 페이지 스크롤이 아래로 내려가면서 자동으로 추가 콘텐츠를 로드하는 무한 스크롤은 사용자 경험을 향상시킵니다. 바닐라 JS로 구현도 가능하지만 간단하게 구현하기 위해 Vue.js에서 제공하는 플러그인을 사용하여 구현해보겠습니다. vue-infinite-scroll과 vue-infinite-loading이 있지만 vue-infinite-loading vue 컴포넌트 라이브러리를 사용한 예시를 보여드리겠습니다. vue-infinite-loading Vue.js 애플리케이션에 무한 스크롤 기능을 추가하는데 도움을주는 Vue 컴포넌트 라이브러리입니다. 이 라이브러리를 통해 무한 스크롤을 간단하게 구현할 수 있습니다. 다음 링크에 나와있는 예제 코드를 참고하여 작성했습니다. http..

Vue.js mixin 사용 방법: 코드 재사용 및 컴포넌트 공유

Mixin Vue.js의 mixin은 컴포넌트 간에 코드 및 로직을 공유하고 재사용하기 위한 도구입니다. mixin을 통해 컴포넌트에 추가적인 데이터 속성, 메서드, 라이프사이클 훅 등을 주입하여 코드 재사용을 쉽게 할 수 있도록 해줍니다. 쉽게 말해서 정의한 mixin인 코드를 다른 컴포넌트에서 사용할 수 있도록 하는 방법입니다. Vue.js 2와 Vue.js 3에서의 mixin 사용법은 다릅니다. Vue.js 2에서는 `mixins` 속성을 사용하여 mixin을 추가하고, Vue.js 3에서는 Composition API의 `provide` 및 `inject` 함수를 사용하여 비슷한 동작을 구현합니다. Vue.js 3의 Composition API를 사용하여 mixin보다 더 강력하고 유연한 컴포넌트..

네트워크 TCP/IP 모델 이해하기

네트워크 아키텍처 네트워크에서 컴퓨터와 네트워크 장비들이 데이터를 주고받기 위한 규칙이 필요합니다. 이런 규칙은 `프로토콜(Protocol)`이라 불리며, 데이터 전송 상대방, 형식, 전송 순서와 절차, 방법 등을 규정합니다. 즉 네트워크를 구성하는 컴퓨터와 다양한 네트워크 장비들은, 프로토콜에 따라 데이터를 주고 받습니다. 네트워크는 복잡한 시스템이기 때문에 이를 단순화하고 이해하기 쉽게 만들기 위해 네트워크 아키텍처(Network Architecture)를 사용합니다. 이 아키텍처는 모듈화(Modularity) 와 계층화(Layering) 를 통해 네트워크를 추상화(Abstraction) 시키는 방법입니다. 추상화: 복잡한 것을 간단하게 만드는 원리로, 네트워크를 논리적인 단계로 분할하여 각 단계마다..

네트워크 컴퓨터 네트워크의 구성 요소와 네트워크의 종류

컴퓨터 네트워크 컴퓨터 네트워크는 컴퓨터와 다른 기기들이 서로 연결되어 데이터를 주고 받을 수 있도록 만들어진 시스템입니다. 이를 통해 우리는 웹 서칭, 이메일, 파일 공유, 온라인 게임, 소셜 미디어 등 다양한 온라인 활동을 할 수 있습니다. 네트워크 구성 요소 컴퓨터 네트워크에서는 중요한 세 가지 구성요소가 있는데, 하나는 `컴퓨터`이고, 다른 하나는 `전송(연결) 매체`, 마지막으로 `네트워크 장비`입니다. 1. 컴퓨터: 컴퓨터는 데이터를 생성하여 보내거나, 받는 도구입니다. 정확히 말하면 컴퓨터의 설치된 애플리케이션(Application)이 데이터를 생성하고 받는 역할을 합니다. 2. 전송 매체: 데이터를 한 컴퓨터에서 다른 컴퓨터, 컴퓨터와 네트워크 장비로 이동시키는데 사용되는 물리적인 통로입니..

SpringBoot에서 JUnit5로 효율적인 단위 테스트 작성하기, Assertions로 값 검증하기

JUnit5 소개 JUnit은 자바 개발에서 단위 테스트를 작성하기 위한 표준 프레임워크입니다. JUnit을 사용하여 각각의 코드 조각을 테스트(단위 테스트)하고 그 결과를 검증할 수 있습니다. JUnit은 테스트 메서드를 정의하고 테스트 실행을 관리하는 데 도움을 줍니다. JUnit5는 다음 세 가지 구성 요소로 구성된 자바 단위 테스트 프레임워크입니다. JUnit Platform: JUnit 5의 기반을 형성하는 모듈입니다. 테스트 실행 엔진(Test Execution Engine)을 포함하며, 다양한 테스트 프레임워크를 지원하고 확장성을 제공합니다. 다양한 환경에서 테스트 실행을 지원하며, 새로운 테스트 엔진을 개발할 수 있습니다. JUnit Jupiter: JUnit 5의 새로운 테스트 API입니..