웹 프론트엔드 개발자의 기본 소양중 하나는 '게시판 구현'이다. 그 중에서 게시글이 여러개일 경우에는 여러 페이지에 걸쳐서 게시글을 보여줘야 하기 때문에 '페이지네이션' 기법이 필요하다. 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값을 비교하여 애니메이션 방식을 정하고 있다. 이 방식도 좋은 방법이기는 하지만, 라우팅 정책을 엄격하게 세워야하기 때문에 내가 하기에는..