[Vue3] Flux 패턴을 기반한 상태관리 패턴 Vuex와 헬퍼함수
디자인 패턴, MVC패턴과 FLUX패턴 🐀 디자인패턴이란 소프트웨어 개발에서 자주 발생하는 문제를 해결하기 위한 설계상의 검증된 솔루션을 말한다. 📜 MVC 패턴 사용자가 어떤 이벤트를 발생시키면 Controller는 Model을 통해서 데이터를 가져오고, 가져온 데이터를 바탕으로 View가 시각적인 표현을 담당하는 세가지 역할...
개발 주머니쥐🐁
[Vue3] Vue 프로젝트의 기본 구조 및 핵심 컨셉(Reactivity)과 이를 위한 컴포넌트 설계
Reactivity 🐀 Reactivity, 데이터의 변화에 따라 화면의 UI가 바뀌는 것 객체의 내용이 변화함에 따라 화면의 내용도 바껴져 나가는 시스템을 Reactivity 시스템이라 한다. Vue3는 Proxy라는 API를 통해 화면을 변경하고 있다. 🍍 Proxy 객체를 모방(Mocking)한 다음, 동작을 추가할 수 있...
[Issue__mapstruct] Mapstruct 빌드 시, 구현체가 생성되지 않는 현상 해결
Issue: Mapstruct 빌드 시, 발생하는 문제 🐂 Issue: Mapstruct 빌드 시, 발생하는 문제 No implementation was created for ~ due to having a problem in the erroneous element java.util.ArrayList. 해당 오류는 보통 mapstruc...
[HTML/CSS] @keyframes룰을 정의해서 타이핑(typing)하는 듯한 효과 구현
타이핑 효과 🪱 @keyframes: 애니메이션 효과를 만들기 위해, 특정 시점에 대한 스타일 정의 from속성 or 0%속성에서 설정한 스타일로 시작해 to속성 or 100%속성까지 설정한 스타일로 바껴가며 애니메이션이 재생 📑 타이핑텍스트.html <div class="fit-wrapper"> <div cla...
[Spring] 객체 지향 프로그래밍의 핵심인 다형성과 이를 위한 프레임워크, 스프링
객체 지향 프로그래밍이란 🧠Abstraction 💊Encapsulation 🪆Inheritance 🦠Polymorphism 🐀 객체 지향의 핵심(core)은 다형성(Polymorphism)이다 애플리케이션을 객체들의 모임으로 파악하자 각각의 객체는 메세지를 주고 받고 데이터를 처리할 수 있다. 각각의 객체를 부품으로 보고, 🎯 부품을 ...
[Dev-core-backend] 동일 출처 정책으로부터 예외를 허용하기 위한 CORS
SOP, 동일 출처 정책 🐀 Same-Origin Policy 동일한 출처(Same-Origin)에서만 리소스를 공유할 수 있는 것을 말한다. 즉, 다른 출처(Cross-Origin) 서버에 있는 리소스와는 상호작용이 불가능하다. ⚠️ 브라우저에 구현된 스펙으로, 출처 비교와 차단은 브라우저에서 한다. ⚠️ 클라이언트단에 API요청...