코드 지갑..

로그인을 한 유저가 국가를 선택하면 DB로 해당 국가의 id값이 들어가고, 다음에 다시 들어 왔을 땐, 로그인 여부와 로그인 한 유저의 unid와 userid값으로 찾아서, 다시 프론트에 선택했던 국가 id값을 주게 된다.국가 id만을 알고있는 상태에서 Vue 인스턴스

styled-component를 사용해 react-slick의 스타일을 수정하려면, styled()에 import로 불러온 Slider를 넣어주면 된다.

useRef를 사용하여 드롭다운 창을 열고 그 외의 영역을 클릭 했을 때, 드롭다운 창이 닫히게 해보자..

offset.top - 172 : 위의 네비게이션바의 크기(172px) 만큼 위치를 조정하였음..navEl_01 : 클릭 할 버튼의 className.section03_02 이동할 div의 classNameanimate : 애니메이션offset : 위치scrollTop

v-for 요소 hover 시, 각각의 요소 오버레이 띄우기

i18next를 사용해서 다국어를 지원해 보자..

페이징 처리를 할 때, 일반적으로 백엔드에서 다음과 같은 정보를 제공한다..

현 페이지 기준 좌우 2개 페이지 버튼 보이기..

우선 스크롤로 바닥을 찍었을 때를 알기 위해 라이브러리를 설치해서 import했다.import후 다음과 같이 callback을 전달해주면 된다.callback의 내용으로는, 최초의 불러온 데이터 이후의 데이터를 불러오는 로직을 짜주었다..

useEffect가 동작할 때, 첫 렌더링에서는 동작하지 않게 만들어보자..

실제 라이브러리 처럼 스크롤 섹션 요소만 넣어주면 개수의 상관없이 스크롤이 가능하게 만들어보고 싶은 욕심이 생겨서 위의 코드를 개선해봤다.

useEffect를 사용하여 스크롤 시, 함수가 실행되게 이벤트를 추가해주었다.그 후 스크롤 시, handleScroll이라는 함수가 동작 할 것이고, scrollY의 값을 useState를 선언하여 담아주었다.

조건부 랜더링을 활용하여 페이지 최초 진입 시, 뜨는 스플래시 화면을 제어 했다.하지만 화면이 열릴 때와 다르게 닫히는 경우에는 transition 으로 간단하게 페이드 효과를 주고 싶었지만, 적용이 되지 않았다.내 생각에는 상태값이 false가 됨과 동시에 컴포넌트는

스크롤의 방향에 따라서 어떠한 함수가 실행되는 커스텀 훅을 만들어 둔다면,헤더를 숨기거나 보여주는 용도 외에도 많이 사용될 것 같다는 느낌이 들었다..

Vue2 기준의 vue-router 세팅과 사용법

Routes/index.js CodeUserView.Vue Code

import { onMounted, onUnmounted, ref, type Ref } from 'vue'const useBottomScroll = (nodeId: string): Ref => { const isBottom = ref(false) let observ