개발 (48) 썸네일형 리스트형 [Vite] webpack에서 vite로 전환하기 Webpack에서 더 빠르고 간편한 Vite로 전환한 기록 Vite로 전환하는 방법 두가지1. 기존 프로젝트를 수정하여 Vite로 전환하기2. 신규 프로젝트를 Vite로 생성하고 기존 소스를 이동하기 1. 기존 프로젝트를 수정하여 Vite로 전환하기vite 라이브러리 설치$ npm install vite @vitejs/plugin-vue --save-dev vite.config.js 파일 생성// vite.config.jsimport { fileURLToPath, URL } from 'node:url';import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';// https://vitejs.dev/config/export defau.. [CSS] 모바일 영역을 고려한 CSS 단위 (아이폰 사파리 100vh) 반응형 웹사이트를 만들 때, 아이폰 사파리에서 주소창의 높이로 인해 이상한 스크롤이 생기는 문제가 있어 이를 해결하기 위해 다양한 접근 방법을 고려해 보았다. 해결 방법 3가지1. -webkit-fill-availableApple 기기에서만 작동하는 방법이다.단순히 높이를 구하는게 아니라 위아래 값을 계산해야 했는데, 이 방법은 효과적이지 않았다. @supports (-webkit-touch-callout: none) { height: -webkit-fill-available; } 2. JS & CSSJavaScript로 뷰포트 높이를 계산하고 CSS 변수로 설정하여 사용하는 방법이다.// jsconst appHeight = () => { const doc = document.documentEl.. PING TIMEOUT . 개발 테스트 URL로 로컬 주소를 넘겼다. 로컬과 테스트환경 모두 같은 와이파이에 연결되어있었지만 테스트 URL에 연결하면 브라우저에서 TIMEOUT이 발생했다. 정확한 확인을 위해 테스트환경에서 ping [192.168.xx.xx]를 보냈다. 여기서도 타임아웃이나네? DNS FLUSH를 시도했다 -> 실패 호오옥시나해서 네트워크를 확인하니 랜선이 쎄하다. 랜선에 연결된 IP주소로 로컬주소를 전달하고 있었다. 와이파이 설정에 있는 IP주소로 다시 전달드렸다. 성공...! [JS+VUE] 자바스크립트로 툴팁 위치 제어하기 ( 스크롤 영역 툴팁 ) 스크롤이 가능한 화면에서 툴팁이 잘리는 문제를 자바스크립트로 툴팁 위치를 잡아서 해결했다. 1. 문제 부모 요소 overflow scroll 2. 시도 z-index 처리 부모 overflow x와 y의 속성을 다르게 주기 3. 해결 문제 상황 재연을 위해 W3Schools을 참고하여 간단한 화면을 만들었다. Hover over me Tooltip {{ i }} html에 툴팁으로 사용할 div id="tooltip"을 추가하고 기존 툴팁 영역에는 @mouseover, @mouseout 이벤트를 추가했다. Hover over me 스타일 파일에는 기존 hover 관련 css코드를 제거하고 새로 생긴 #tooltip css를 추가했다. 툴팁 position은 absolute로 넣었다. .tooltip-te.. [VUE3] 새로운 데이터 바인딩 패턴: defineModel 활용하기 지금까지는 주로 props와 emit을 사용하여 데이터 흐름을 관리해왔다. 하지만 최근에 더 편리하게 데이터를 교환할 수 있는 defineModel이 나와 사용해봤다. 1. Props와 Emit 부모 컴포넌트는 자식 컴포넌트에게 데이터를 props로 전달하고, 자식 컴포넌트는 이벤트를 emit하여 부모 컴포넌트에게 데이터를 전달한다. 이 방식은 간단하고 직관적이지만, 깊은 컴포넌트 트리에서 데이터 전달이 번거롭다. 2. V-model 양방향 바인딩을 사용할 수 있는 디렉티브다. 3. defineModal vuv3.3에서 새롭게 추가된 기능이다. 커스텀 컴포넌트에 직접 v-model을 적용할 수 있다. 3-1. 활용하기 vite.config.js 수정 webpack을 사용하는 경우 vue-loader@^1.. [Angular] 페이지 로드 anchor scroll 처리 url#scrollPoint 로 이동했을때 페이지 로드 시 scrollPoint영역으로 스크롤되도록 만들고 싶었다 *ngIf가 많은 페이지라 페이지 로드 후 스크롤을 이동시켜야 하는데 시점을 잡기가 어려웠다. // test.component.html angular lifecycle hook 중 ngAfterViewInit를 사용했다. 그럼에도 dom에 그려지는 시간이 좀 걸리는 지 스크롤이 제대로 이동하지않아 setTimeout을 걸었다. 돌아가긴하지만 아쉬운 코드. // test.component.ts // ngAfterViewInit 사용 ngAfterViewInit() { this.route.fragment.subscribe((fragment: string) => { if (fragment) { s.. [Angular] 같은 컴포넌트를 사용하는 페이지 이동 시 화면 리로드 처리 ( 슬릭 데이터 리로드) 동일 컴포넌트로 이동하며 데이터만 바뀌는 케이스에서 슬릭 데이터가 빈 값으로 변해버리는 문제가 발생했다. 최악의 경우 refreshComponent를 만들고 변수를 받아 다시 페이지를 이동시키는 방법을 사용하고자 했는데 다행히 간단하게 해결됐다. 1. 라이프사이클로 init 처리 (실패) change에서 data 변화를 감지하여 init 시키려 했지만 같은 오류가 발생함. 2. 라우터 처리 (성공) 동일한 페이지로 이동시킬 때 라우팅 처리를 다르게 함 this.router.navigateByUrl('/').then(() => { this.router.navigate([url]); }); 경로를 '/'로 이동시킨 후 url로 이동시킨다. 화면에서 실행했을 때는 한번의 이동처럼 자연스럽게 이동된다. [VUE3] file upload , input 태그는 숨기고 버튼으로 파일 등록 처리 File Upload Custom 버튼 클릭 이벤트로 파일 선택 창 열기 {{data.fileName}} 파일 업로드 이전 1 2 3 4 5 6 다음
