실무 활용도를 높이는 마이너 CSS 속성 및 스타일링 팁
배경 투명도 및 요소 변환
요소의 배경을 투명하게 설정하거나, 크기를 조정하고 회전시킬 때 사용하는 기본적이지만 필수적인 속성들입니다.
.card-wrapper {
/* 배경을 투명하게 설정 */
background-color: transparent;
}
.icon-shape {
/* 요소를 1.2배 확대하고 45도 회전 */
transform: scale(1.2) rotate(45deg);
}
입력 필드(Input) 세부 스타일링
사용 ...
6월 9일 22:40에 게시됨
Element UI Upload 컴포넌트 재업로드 문제 해결
Element UI의 el-upload 컴포넌트를 수동 업로드 모드로 사용할 때, 첫 번째 업로드 실패 이후 동일 파일을 다시 업로드할 수 없는 현상이 발생한다. 특히 전체 화면에 로딩 오버레이가 적용된 경우 사용자 경험 측면에서 치명적이다.
문제 원인 분석
업로드 컴포넌트는 내부적으로 파일마다 status 속성을 관리한다. 파일 선택 시 ready 상태로 시작하여 업로드 진행에 ...
6월 4일 19:38에 게시됨
Vue 3에서 사용하는 이미지 크롭 도구
Vue 3에서 사용하는 이미지 크롭 도구
Vue 3 프로젝트에서 이미지 크롭 기능을 구현하려면 vue-cropper 라이브러리가 매우 유용합니다. 이 라이브러리는 직관적인 인터페이스와 다양한 기능을 제공합니다.
설치 방법
npm install vue-cropper@next
기본 사용법
컴포넌트 임포트
import 'vue-cropper/dist/index.css'
import { VueCropper } from 'vue-cropper'
템플 ...
6월 3일 19:52에 게시됨
Sass 스타일시트 언어 가이드
Sass는 CSS를 더욱 효율적으로 작성하기 위한 전처리기(CSS Preprocessor)입니다. 두 가지 문법 형식을 지원하는데, 중괄호를 사용하는 .scss와 들여쓰기를 기반으로 하는 .sass가 있습니다. 이 가이드에서는 주로 널리 사용되는 SCSS 문법을 다룹니다.
기본 기능 및 활용
Sass를 사용하면 변수, 중첩, 모듈화 등 CSS에서 부족했던 기능들을 활용할 수 있습니다. ...
6월 2일 23:04에 게시됨
스프링 부트 분리형 아키텍처 개발을 위한 실용적인 팁
본 문서는 스프링 부트(Spring Boot) 기반의 백엔드와 프론트엔드가 분리된 시스템 개발 시 유용하게 활용될 수 있는 팁들을 다룹니다.
백엔드 개발 팁
서버 포트 변경
백엔드 애플리케이션의 포트는 주로 application.properties 또는 application.yml 파일 내에서 설정할 수 있습니다. 예를 들어, application.yml 파일에서는 다음과 같이 변경합니다.
...
6월 2일 18:19에 게시됨
다단계 빌드를 활용한 프론트엔드 애플리케이션의 효율적 도커 배포
도커는 환경 격리, 확장성 향상, 운영 관리의 간소화를 가능하게 하며, 개발자에게는 개발, 테스트, 배포 과정을 크게 단순화해줍니다. 특히 새로운 프로젝트에 접근할 때, 문서가 부족하거나 오래되었더라도 Dockerfile만으로도 애플리케이션을 빠르게 로컬에서 실행할 수 있습니다.
DevOps의 핵심은 단순히 자동화된 파이프라인을 구축하는 것이 아니라, 애플리케이션 ...
5월 24일 16:19에 게시됨
Vue 3에서 Axios 인터셉터 구현하기
Vue 3에서 Axios 사용하기
Vue.js 3 환경에서 Axios를 사용하는 방법은 Vue.js 2.x와 크게 다르지 않지만, 일부 수정과 업데이트가 필요하다. 아래에서는 Vue.js 3에서 Axios를 정의하고 사용하는 방법을 살펴보자.
먼저, Axios와 Vue.js 3.x를 설치해야 한다. npm이나 yarn 같은 패키지 관리자를 사용하여 설치할 수 있다:
npm install axios vue@next
이제 Vue.js 3 ...
5월 22일 07:24에 게시됨