분류 전체보기 (50) 썸네일형 리스트형 [responsively] 반응형 웹 개발 테스트 도구 responsively다양한 기기에서 웹-앱 화면을 한번에 볼 수 있게 해주는 도구.다운로드 링크 Responsively App - A Web Developer's BrowserA dev-tool that aids faster and precise responsive web development.responsively.app 이미 설정되어있는 기기를 추가하거나 커스텀으로 사이즈를 넣어볼 수도 있다. 한번에 여러 디바이스를 체크하며 개발 할 수 있다.개발자 도구도 사용할 수 있고 그 외 여러 기능들이 있는 것 같다. [VUE3] swiper 부드럽게 흐르는 슬라이드, 일시정지 기능 추가 Swiper 카드 슬라이드가 천천히 흐르며, 일시정지/재생 버튼과 마우스를 올리면 슬라이드가 자동으로 일시정지되는 기능을 만들었다. 스와이퍼의 기본 멈춤 기능을 사용하면 슬라이드가 멈추긴 하지만, 이동이 완료된 후에야 멈추기 때문에 완전히 정지하는 데 시간이 걸린다. 이를 해결하기 위해 마우스를 올리거나 일시정지 버튼을 누르는 즉시 슬라이드가 멈추도록 controlSwiper 함수를 활용해 autoplay 멈춤 기능을 구현했다.스와이퍼가 부드럽게 흐르도록 하기 위해 swiper-wrapper 클래스에 transition-timing-function: linear !important;를 추가했다.또한, 스와이퍼 안의.. 프로젝트에 유용했던 레퍼런스 모음 계속 추가할 예정. 1. 토스https://toss.im/ 토스금융의 모든 것, 토스에서 쉽고 간편하게toss.im 2. 토스 채용https://toss.im/career 토스 채용지금 바로, 토스커뮤니티에 합류하세요.toss.im 3. 그리팅https://www.greetinghr.com/ 그리팅 | 채용에 경쟁력을 더하다6000+ 기업이 선택한 채용관리(ATS) 및 인재풀관리(TRM) 솔루션 그리팅. 탁월한 지원자 경험으로 채용 프로세스를 혁신합니다. 그리팅은 당신의 채용경쟁력입니다.www.greetinghr.com 4. 바이브https://vibe.naver.com/about/ VIBENAVER VIBEvibe.naver.com 5. 네이버 웨일https://whale.naver.com/ko/ 네.. [VUE3] v-bind로 동적 css 처리 v-bind()를 사용하여 동적 스타일 제어 스크롤 이벤트에 따라 스타일이 동적으로 변하는 코드를 작성해야 할 일이 생겼다.스크립트에서 스타일을 강제로 적용할 수도 있었지만, 이번에는 v-bind를 활용해보기로 했다. 예제 v-bind-in-cssvue 공식 사이트에 정리된 예제다.한눈에 다 알아 볼수 있다. 저렇게 간단하다니. hello 활용스타일에 들어갈 변수를 선언하고 스크롤 이벤트를 받아 특정 케이스에서 변수의 값을 변경시켰다.강제로 element에 style을 변경시키는 것보다 깔끔하게 코드를 작성할 수 있다/ 안녕 [VUE3 router] Navigation Guards로 로그인 페이지 이동 처리 라우터 네비게이션 가드를 활용하여 로그인 여부 체크 및 페이지 이동 프로젝트마다 라우터 네비게이션 가드를 사용해 로그인 상태를 확인했다.버전이 업데이트될 때마다 약간씩 수정해보았지만, 전체적인 구조는 비슷한 것 같다. routes meta 필드 추가라우터의 meta 필드에 requiresAuth를 추가했다.requiresAuth가 true인 경우: 로그인이 필요한 페이지 - 마이페이지requiresAuth가 없거나 false인 경우: 로그인 체크가 필요 없는 페이지 - 로그인, 회원가입// routerconst routes = [ // 마이페이지 { path: '/my-page', name: 'myPage', meta: { title: '마이페이지', requiresAuth: true, }.. [Pinia] Setup Stores 방식에 pinia-plugin-persistedstate 사용하기 기본적인 persist 적용 방법을 기록한다.설치$ npm i pinia-plugin-persistedstate 설정// main.jsimport { createPinia } from 'pinia'import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'const pinia = createPinia()pinia.use(piniaPluginPersistedstate) 사용setup 방식에서 저장할 값은 return 처리를 해야한다.// authStore.jsimport { defineStore } from 'pinia';import { ref } from 'vue';export const useAuthStore = defineStore( 'au.. [메일폼] mobile mail form font size 탐구 PC에서 메일을 확인할 때는 글씨가 적당한 크기로 잘 보이지만, 같은 메일을 모바일에서 확인할 때 글씨가 깨알만하게 작아져서 잘 보이지 않는 경우가 있다. 이 문제는 특히 네이버 메일 앱에서 발생하는데, 동일한 메일을 구글 메일 앱에서 확인할 때는 폰트 크기가 잘 보인다.(좌 네이버, 우 지메일, 케세이퍼시픽 메일)네이버와 구글 메일의 차이점네이버와 구글 메일 앱에서의 폰트 크기 차이는 scale 처리 방식에서 비롯된 것으로 보인다.네이버 메일네이버 메일에서는 모바일 메일로 전환 시 transform scale을 사용하여 비율에 맞춰 줄이면서 글자 크기도 함께 줄어든다. ... 이때, 메일 상단의 "글자가 더 잘 보이도록 해드려요." 버튼을 누르거나 가+ 로 폰트 크기를 키우면, 폰트가 있는 태그마다 .. [JS] FileReader를 사용하여 file을 Base64 문자열로 변환하기 보통 파일 업로드를 할 때 폼데이터(FormData)를 사용하여 파일을 전송하지만, 이번에는 서버 측에서 Base64 문자열로 파일을 전송해 달라는 요청을 받았다. FileReader를 사용하여 파일 읽기readAsDataURL 매서드를 사용하여 base64 문자열로 변환했다. // 파일 -> base64 로 변환하는 함수 async getFileBase64(file) { return new Promise((resolve, reject) => { const reader = new FileReader(); // 파일을 Base64 데이터 URL로 읽음 reader.readAsDataURL(file); // 파일을 읽는데 성공했을 때 호출.. 이전 1 2 3 4 5 6 7 다음
