웹 프론트엔드 개발자의 기본 소양중 하나는 '게시판 구현'이다. 그 중에서 게시글이 여러개일 경우에는 여러 페이지에 걸쳐서 게시글을 보여줘야 하기 때문에 '페이지네이션' 기법이 필요하다. 1페이지에는 게시글 1번~N번, 2페이지에는 (N+1)번~2N번... 이런 식으로 일정한 기준에 맞춰서 게시글을 보여주는 방법을 말한다. 이를 구현하려면 웹페이지의 특성을 고려하여 몇 가지 파라미터를 미리 정해놓아야 한다. 하나는 한 페이지당 보여줄 게시글의 수(ITEM_PER_PAGE)와 다른 하나는 한 섹션당 보여줄 페이지의 수(PAGE_PER_SECTION)이다. 이 글에서 소개할 때는 두 파라미터는 각각 10개와, 5개로 설정하도록 하겠다. 다음으로 고려해야 할 점은 섹션간 이동할 때이다. 총 게시글 수가 100..
react에서는 페이지 이동 시 데이터를 전달하기 위해서는 react-router-dom에서 컴포넌트 또는 useNaviate() 훅을 통해 전달이 가능하다. 반면에 vue에서는 직접적인 전달 방법이 존재하지 않아 개발자 자체적으로 방법을 찾아야 했다. 생각해볼 수 있는 방법으로는 vuex와 같은 전역상태 저장소에 넣어두고 꺼내쓰기 -> 일회용 데이터를 위해서 전역상태에 임시 데이터를 넣고 싶지는 않았다. router.push()를 하는 코드 직후에 window.pushState(state)를 추가해서 페이지가 이동되면 꺼내쓴다 -> 그나마 현실적인 방법이다. history가 꼬이지 않도록 구현을 어떻게 할 지는 좀 고민해봐야 할 것 같다. 이동하려는 URL에 쿼리스트링으로 데이터 값을 담아서 전달 하기..
vue로 프론트엔드 개발을 하던 도중, 글로벌 범위로 사용되는 Footer 에서 router안에 들어있는 특정 DOM에 접근해야 할 일이 생겼다(정확히 말하자면 DOM안에 특정 class가 존재하는지 유뮤를 확인해야 했다). 이런 상황에서는 늘 그랬듯이 Footer 스크립트 내에서 document.querySelector('.특정클래스')함수를 호출하여 해당 DOM에 접근하려고 시도했는데, 결과값을 null로 반환되었다. 파일 구조는 아래와 같이 구성되어있다. //App.vue // NavBar.vue Main // Home.vue This is home // Footer.vue this is footer 뭔가 이상하다고 생각이 들었다. router내부에 있는 DOM요소(위 코드상에서는 'home'이라는..
모바일 환경에서 모달창이 떠 있는 상태에서 모달을 닫는 방법은 여러가지가 있을 수 있는데, 그 중 첫 번째 방법은 모달 창 내부에 별도의 'X'버튼을 표시해서 이 영역을 터치하면 닫히게 하는 방법이 있다. 가장 직관적인 방법이지만 버튼을 위한 별도의 공간을 확보해야 하기 때문에 디자인상 의도치 않은 공간을 차지한다는 단점이 있다. 이런 단점을 해결하기 위한 두 번째 방법은 모달 바깥의 영역을 터치를 감지했을 때 모달을 닫는 방법이 있다. 다만 이 방법 역시 명시적인 '닫기'버튼이 보이지 않기 때문에 이러한 UI/UX가 낯선 사용자에게는 모달을 어떻게 닫아야 하는지 헤맬 수도 있다는 단점이 있다. 세 번째 방법은 (안드로이드 환경에서) 뒤로가기 버튼을 눌렀을 때 모달이 닫히게 하는 방법이다. 이 방법의 경..
지난 글에서는 페이지 이동할 때 transition을 적용했다면 이번 글에서는 모달창이 나올 때의 transition을 적용해보겠다. 모달창의 경우에는 태그를 활용하여 DOM상에서 등록되는 위치를 분리해준다. // index.html // TeleportModal.vue - template This is Modal Close 모달창이 등장하는 transition은 아래에서 위로 올라오는 slide-up을 사용할 것이다. 여기서 버그인지는 모르겠으나 slide-up-leave는 작동하지 않는 문제가 발생했다. 추정하기로는 처럼 v-if로 조건부 렌더링을 걸어버리면 isModalShow가 false가 되어버리자마자 DOM에서 사라지게 되어 transition-time을 무시해버리는 것 같다. 이 문제를 해결..
요즘 출시되는 웹 애플리케이션에서는 페이지 전환시 애니메이션 동작이 거의 필수로 들어가있다. 이러한 애니메이션은 꼭 네이티브가 아니라 vue로 만든 SPA에서 지정할 수 있다. vue에서는 내장 애니메이션 컴포넌트인 을 활용하면 된다. transition을 사용하는 방법은 공식문서나 다른 분들이 올려놓은 블로그에 이미 잘 정리되어 있으므로 이번 글에서는 실질적으로 페이지 이동할 때마다 transition이 일어나게 하는 방법을 소개하겠다. 기존의 공식문서에서는 URL을 split('/')하여 몇 개의 부분으로 나뉘는 지를 기준으로 삼아서 toDepth와 fromDepth값을 비교하여 애니메이션 방식을 정하고 있다. 이 방식도 좋은 방법이기는 하지만, 라우팅 정책을 엄격하게 세워야하기 때문에 내가 하기에는..
vue3 환경에서 차트를 그리려고 한다. 기본적으로 chart.js를 사용하면서, vue3 기반으로 래핑해놓은 vue-chart-3를 활용하려고 한다. 그래서 공식문서 데모 페이지에 나와있는 대로 따라하려고 하니 문제가 하나 생겼다. 내가 화면에 보여줄 데이터는 백엔드와 비동기 통신을 통해서 받아야 한다. 그런데 데모 소스코드 상에서는 데이터가 아래와 같이 그냥 하드코딩 되어 있었다. // template // script const dataValues = ref([30, 40, 60, 70, 5]); const dataLabels = ref(["Paris", "Nîmes", "Toulon", "Perpignan", "Autre"]); const testData = { labels: dataLabels...