분류 전체보기

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입니..

SpringBoot에서 MockMvc을 활용한 컨트롤러, HTTP 요청 테스트 방법

MockMvc 소개 MockMvc: MockMvc는 Spring Framework의 일부로, 웹 어플리케이션의 컨트롤러를 테스트하는 데 사용됩니다. 이를 통해 HTTP 요청을 시뮬레이션하고 컨트롤러의 동작을 테스트할 수 있습니다. Spring 환경을 통합한 테스트 Spring 컨텍스트와 통합한 테스트 (Spring Bean을 주입하여 테스트 가능) HTTP 요청 및 응답 시뮬레이션 Spring Boot 프로젝트 설정 MockMvc와 JUnit을 사용하기 위해선 아래와 같은 의존성을 추가해야 합니다. testImplementation 'org.springframework.boot:spring-boot-starter-test' MockMvc를 사용한 컨트롤러 테스트 MockMvc를 구성하여 API 엔드포인트..

MyBatis ON DUPLICATE KEY UPDATE: insert Key 중복 시 update 처리

ON DUPLICATE KEY UPDATE: upsert 구현 `ON DUPLICATE KEY UPDATE`는 `MySQL` 및 `MariaDB`에서 사용되는 SQL 문장 중 하나로, 주로 데이터를 삽입하려고 할 때 기존 레코드와 중복된 경우(중복 레코드) 기존 레코드를 업데이트하거나 무시하는데 사용됩니다. 중복 레코드: 데이터베이스에 이미 동일한 고유 키(primary key 또는 unique key)가 존재하는 경우, `ON DUPLICATE KEY UPDATE`를 사용하여 중복 레코드를 업데이트하거나 새로운 값을 가질 수 있습니다. 구문: INSERT INTO table_name (column1, column2, ...) VALUES (value1, value2, ...) ON DUPLICATE K..

CORS(Cross-Origin Resource Sharing) 이해와 해결 방법

CORS CORS (Cross-Origin Resource Sharing)는 'Cross-Origin Resource Sharing'의 약어로, 웹 보안 메커니즘 중 하나입니다. 이 메커니즘은 웹 브라우저에서 실행되는 웹 페이지가 다른 웹사이트(출처)에서 데이터를 요청할 때 발생할 수 있는 보안 정책 중 하나입니다. 서로 다른 출처(origin) 간에 데이터 공유하려하면 이를 제한하는 보안 메커니즘(SOP, Same-Origin Policy)에 의해 CORS 오류가 발생하게 됩니다. 이러한 CORS 에러를 해결하기 위해선 CORS를 설정하여, 출처가 다른 서버 간의 리소스 공유를 허용해주어야합니다. 출처(Origin): Protocol + Hostname(Domain) + Port · 도메인(Hostna..

웹 데이터 저장: 로컬 스토리지, 세션 스토리지, 쿠키

웹 어플리케이션은 사용자 데이터를 저장하고 관리하는데 다양한 방법을 제공합니다. 그중 클라이언트 측에서 데이터를 저장하고 관리하기 위한 방법으로 `로컬 스토리지(Local Storage)`, `세션 스토리지(Session Storage)` 그리고 `쿠키(Cookies)`가 있습니다. 로컬 스토리지 (Local Storage) 로컬 스토리지는 브라우저에서 데이터를 영구적으로 저장하는데 사용됩니다. 이 데이터는 브라우저를 종료해도 유지되며, 사용자의 로컬 환경에서 접근이 가능합니다. 주로 사용자 설정과 같은 데이터를 저장하는데 유용합니다. 데이터는 문자열로 저장됩니다. 브라우저마다 별도로 유지되며, 도메인간에 공유되지 않습니다. 저장 용량은 일반적으로 5~10MB이고, 브라우저마다 다를 수 있습니다. 세션 ..