진스

nuxt3 사용시 nuxt.config.ts 작성했던 내용

입방정 — Mon, 9 Dec 2024 00:38:47 +0900

카카오맵, 파이어베이스,scss 사용

// https://nuxt.com/docs/api/configuration/nuxt-config

export default defineNuxtConfig({

compatibilityDate: '2024-04-03',

devtools: { enabled: true },

ssr: true, // SSR 비활성화

nitro: {

preset: 'static' // 정적 사이트 빌드 ssr로할때는 사실 불필요한듯

plugins: [

'~/plugins/firebase.js' // Firebase 초기화 플러그인 추가

runtimeConfig: {

public: {

KAKAO_API_KEY: process.env.KAKAO_API_KEY,

KAKAO_REST_KEY: process.env.KAKAO_REST_KEY,

firebaseApiKey: "AIzaSyDvVM-mwJr_oc0NkLudgF...",

firebaseAuthDomain: "runcrew-6a407.firebaseapp.com",

firebaseProjectId: "r...",

firebaseStorageBucket: "runcrew-6a407.firebasestorage.app",

firebaseMessagingSenderId: "7755806...",

firebaseAppId: "1:775580694548:web:20f78ee641af...",

firebaseMeasurementId: "G-2E9BFM...",

NODE_ENV: process.env.NODE_ENV || 'development',

css: ["@/assets/styles/main.scss"],

vite: {

css: {

preprocessorOptions: {

scss: {

api: 'modern-compiler', //Deprecation Warning: The legacy JS API is deprecated and will be removed in Dart Sass 2.0.0. 경고문구사라짐

}

modules: ['@samk-dev/nuxt-vcalendar','@pinia/nuxt'],

})

휠 이벤트,터치 이벤트,스크롤을 원하는 속도로 부드럽게 이동하기

입방정 — Fri, 14 Jun 2024 13:45:07 +0900

메인 상단에 영상 + 이미지 스와이프 배너가 있음
pc와 모바일에서 휠을 내리거나 , 밑으로 스와이프를 하면 자연스럽게 메인배너 밑으로 스크롤 이동되길 원함

기본적으로 모바일에서 touch이벤트시에
  window.scrollTo({
            top: targetScrollY,
            behavior: 'smooth'
        }); 이부분만으로는 좀더 빠른 스크롤이동이 안됨

그래서 작성한 코드:

///////////////////////////메인슬라이드 휠 동작
let isScrolling = false;
let isWheeling = false;
const mainVisualElement = document.querySelector('.mainVisual');
const mainVisualHeight = mainVisualElement.clientHeight;

document.addEventListener('wheel', function(event) {
    const scrollTop = window.scrollY;
    const SCROLL_THRESHOLD = 0;

    if (!isWheeling && event.deltaY > SCROLL_THRESHOLD && scrollTop < mainVisualHeight) {
        event.preventDefault();
        isWheeling = true;
        isScrolling = true;

        const targetScrollY = mainVisualHeight;
        const duration = 500; // 애니메이션 지속 시간 (ms)
        const startTime = performance.now();
        const startScrollY = window.scrollY;

        function scroll() {
            const elapsed = performance.now() - startTime;
            const progress = Math.min(elapsed / duration, 1); // 진행률 계산 (0~1 사이 값)
            const easeInOutQuad = t => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; // 이징 함수 정의 (선택 사항)
            const easedProgress = easeInOutQuad(progress); // 선택적으로 이징 함수를 적용할 수 있습니다.
            const newScrollY = startScrollY + (targetScrollY - startScrollY) * easedProgress;
            window.scrollTo(0, newScrollY);

            if (progress < 1) {
                requestAnimationFrame(scroll);
            } else {
                isScrolling = false;
            }
        }

        requestAnimationFrame(scroll);

        setTimeout(() => {
            isWheeling = false;
        }, 500); // 휠 애니메이션이 끝날 때까지 대기
    }
}, { passive: false });

window.addEventListener('scroll', function() {
    const scrollTop = window.scrollY;

    // 메인 비주얼을 벗어나면 isScrolling 상태를 해제
    if (scrollTop >= mainVisualHeight) {
        isScrolling = false;
    }
});

///////////////////////////메인슬라이드 모바일 스와이프 동작
let touchStartY = 0;
let touchEndY = 0;
const swipeThreshold = 50;
const duration = 500; // 애니메이션 지속 시간 (ms)

mainVisualElement.addEventListener('touchstart', function(event) {
    touchStartY = event.touches[0].clientY;
});

mainVisualElement.addEventListener('touchmove', function(event) {
    touchEndY = event.touches[0].clientY;
    // 위로 스와이프할 때 preventDefault 활성화
    if (touchStartY > touchEndY && window.pageYOffset < mainVisualHeight) {
        event.preventDefault();
    }
});

mainVisualElement.addEventListener('touchend', function(event) {
    touchEndY = event.changedTouches[0].clientY;

    if (Math.abs(touchStartY - touchEndY) > swipeThreshold) {
        if (touchStartY > touchEndY && window.pageYOffset < mainVisualHeight) {
            moveMainVisual(mainVisualHeight); // 위로 스와이프할 때
        } else if (touchStartY < touchEndY && window.pageYOffset >= mainVisualHeight) {
            moveMainVisual(0); // 아래로 스와이프할 때
        }
    }
});

function moveMainVisual(targetScrollY) {
    const startScrollY = window.scrollY;
    const startTime = performance.now();

    function scroll() {
        const elapsed = performance.now() - startTime;
        const progress = Math.min(elapsed / duration, 1);
        const easeInOutQuad = t => t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t;
        const easedProgress = easeInOutQuad(progress);
        const newScrollY = startScrollY + (targetScrollY - startScrollY) * easedProgress;
        window.scrollTo(0, newScrollY);

        if (progress < 1) {
            requestAnimationFrame(scroll);
        }
    }
    scroll();
}

css 폰트 두께 정의

입방정 — Thu, 9 May 2024 11:35:26 +0900

font-weight

두께별 이름 및 상대 두께

두께	이름	bolder	lighter
100	Thin	400	100
200	Extra Light(Ultra Light)	400	100
300	Light	400	100
400	Normal	700	100
500	Medium	700	100
600	Semi Bold(Demi Bold)	900	400
700	Bold	900	400
800	Extra Bold(Ultra Bold)	900	700
900	Black(Heavy)	900	700

속성(Property)

속성값	값(예)	설명
normal	font-weight : normal;	폰트 두께를 기본(400)으로 설정합니다.
bold	font-weight : bold;	폰트 두께를 볼드(700)으로 설정합니다.
lighter	font-weight : lighter;	폰트 두께를 기본 두께보다 얇게 설정합니다.
bolder	font-weight : bolder;	폰트 두께를 기본 두께보다 두껍게 설정합니다.
number	font-weight : 400;	폰트 두께를 숫자로 설정합니다.

숫자 키패드 입력시 다음 input으로 이동

입방정 — Wed, 17 Jan 2024 17:18:10 +0900

</div>

</div>

<script>
$(function() {
    $(".inputs").on('keyup', function () {
        var charLimit = $(this).prop("maxlength");
        if ($(this).val().length >= charLimit) {
            $(this).next('.inputs').focus();
            return false;
        }
    });
});
</script>

3줄이상 말줄임

입방정 — Wed, 25 Oct 2023 14:45:01 +0900

다른곳에서본 것들은 잘안된다..

이건 됐음/

white-space: normal;

display: -webkit-box;

word-wrap: break-word;

-webkit-line-clamp: 2;

-webkit-box-orient: vertical;

text-overflow: ellipsis;

overflow: hidden;

안드로이드 웹뷰 스크롤바 안보일 때 (Android Webview scrollbar)

입방정 — Fri, 15 Sep 2023 14:01:51 +0900

웹뷰 방식으로 작업하고 app에서 확인, 카톡브라우저에서도 동일하게 스크롤은 되지만 스크롤바가 나타나지 않음

::-webkit-scrollbar {
    width: 5px;
}     
::-webkit-scrollbar-track {
   // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
  //  -webkit-border-radius: 10px;
  //  border-radius: 10px;
}     
::-webkit-scrollbar-thumb {
  //  -webkit-border-radius: 10px;
 //   border-radius: 10px;
    background: #ccc; 
   // -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
::-webkit-scrollbar-thumb:window-inactive {
    background: #ccc; 
}

swiper.js 가운데 정렬 및 기타 옵션

입방정 — Thu, 10 Aug 2023 17:49:43 +0900

모바일로 작업중이라 breakpoints 640만 보면 되는데. 이런식으로 슬라이드의 양옆으로 노출하고 싶다면.

const swiper2 = new Swiper('.swiper-container2', {
        //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
        direction : 'horizontal',
        //한번에 보여지는 페이지 숫자
        slidesPerView : 3.5, 
        //페이지와 페이지 사이의 간격
        spaceBetween : 30,
        //해상도에 따른 조절
        breakpoints: {
            640: {
                slidesPerView: 1.4,
                spaceBetween:20,
                slidesOffsetBefore: 0, // 왼쪽 여백
                centeredSlides:true, // 슬라이드 가운데 정렬
                scrollbar : {
                    el : '.swiper-scrollbar',
                    draggable: true,
                    dragSize: 150,
                },
            },
            960: {
                slidesPerView: 3,
                spaceBetween: 40,
            },
            1024: {
                slidesPerView: 3.5,
                spaceBetween: 30,
            },
        },
        //가운데 배치
        centeredSlides:false,
        //컨테이너 시작 부분(픽셀단위)
        slidesOffsetBefore: 0,
        //드레그 기능 true 사용가능 false 사용불가
        debugger : true,
        //마우스 휠기능 true 사용가능 false 사용불가
        mousewheel : false,
        //반복 기능 true 사용가능 false 사용불가
        loop : false,
        //선택된 슬라이드를 중심으로 true 사용가능 false 사용불가 djqt
        centeredSlides : false,
        // 페이지 전환효과 slidesPerView효과와 같이 사용 불가
        // effect: 'fade',
        //탭안에 두개의 스와이프사용시 아래 추가
        observer: true, 
        observeParents: true,
        //자동 스크롤링
        autoplay : false,
        //페이징
        pagination : {
            //페이지 기능
            el : '.swiper-pagination2',
            //클릭 가능여부
            clickable : true,
        },
        // 스크롤바 설정하기
        scrollbar : {
            el : '.swiper-scrollbar',
            draggable: true,
            dragSize: 300,
        },
        //방향표
        navigation : {
            //다음페이지 설정
            nextEl : '.swiper-button-next2',
            //이전페이지 설정
            prevEl : '.swiper-button-prev2',
        },
    });

이중에서 이 두 옵션을 이용하자.

slidesOffsetBefore: 0, // 왼쪽 여백
centeredSlides:true, // 슬라이드 가운데 정렬

vue에서 pinia등의 패키지 설치시 오류가 나왔다.

입방정 — Mon, 7 Aug 2023 15:08:29 +0900

npm i pinia로 설치후에 main.js에서

import { createPinia } from "pinia";

app.use(createPinia());

이렇게 설치 작성후에 실행하니

X [ERROR] No matching export in "node_modules/vue-demi/lib/index.mjs" for import "hasInjectionContext"

    node_modules/pinia/dist/pinia.mjs:6:9:
      6 │ import { hasInjectionContext, inject, toRaw, watch, unref, ...
        ╵          ~~~~~~~~~~~~~~~~~~~

14:50:46 [vite] error while updating dependencies:
Error: Build failed with 1 error:
node_modules/pinia/dist/pinia.mjs:6:9: ERROR: No matching export in "node_modules/vue-demi/lib/index.mjs" for import "hasInjectionContext"
    at failureErrorWithLog (D:\study\vue3연습\vue3-posts\node_modules\esbuild\lib\main.js:1603:15)
    at D:\study\vue3연습\vue3-posts\node_modules\esbuild\lib\main.js:1249:28
    at runOnEndCallbacks (D:\study\vue3연습\vue3-posts\node_modules\esbuild\lib\main.js:1034:63)

이런식의 오류가 나옴

npm list vue로 vue의 버젼을 확인해보니

vue3-posts@0.0.0 D:\study\vue3연습\vue3-posts `-- UNMET PEER DEPENDENCY vue@3.2.33 npm ERR! peer dep missing: vue@^2.6.14 || ^3.3.0, required by pinia@2.1.6

이렇게 나온다.
pinia 패키지를 사용하려면 오류 메시지에 나와 있는 Vue 버전 요구 사항을 충족시켜야 하는데. 현재 Vue 버전은 3.2.33이 설치되어 있고, pinia는 Vue 버전 2.6.14 이상 또는 3.3.0 이상을 요구한다는 내용이다.

1.현재 설치된 Vue 버전을 3.3.0 이상으로 업그레이드 하던가

2.pinia 패키지 버전 다운그레이드하여 2.0.0으로 하던가..

그래서 내가 하려던 pinia 2.0.14대신 2.0.0으로 설치하여 정상 동작 확인

모바일 input 박스 포커스 + 가상 키보드 이슈

입방정 — Wed, 22 Mar 2023 16:12:33 +0900

datepicker 사용중에 가상키보드와 겹쳐서 picker사용이 힘들고 스크립트 실행에 방해될때

1. onfocus="this.blur()"

2. html5에서 도입

find 함수에서 Arrow Function(화살표 함수)에서 undefined 일때 확인해볼 내용

입방정 — Sun, 19 Feb 2023 20:17:10 +0900

posts.js

const posts = [
  { id: 1, title: '제목1', content: '내용1', cratedAt: '2023-01-01' },
  { id: 2, title: '제목2', content: '내용2', cratedAt: '2023-02-02' },
  { id: 3, title: '제목3', content: '내용3', cratedAt: '2023-03-03' },
  { id: 4, title: '제목4', content: '내용4', cratedAt: '2023-04-04' },
  { id: 5, title: '제목5', content: '내용5', cratedAt: '2023-05-05' },
];

export function getPosts() {
  return posts;
}

export function getPostById(id) {
  const numberId = parseInt(id);
  
  // .1방법=> id값 정상 출력
  // return posts.find(item => item.id === numberId); 
  
  // .2방법=> undefined
  posts.find(item => {
    return item.id === numberId;
  });
 }

1,2 의 결과가 나오는 이유가 뭘까..