SPA(Single Page Application)에서 이전 페이지의 스크롤 위치를 기억해두었다가 재방문 했을 때 그 자리에 위치해야 하는 경우가 있다. 이를 구현하기 위한 방법을 알아보자. 1. vue-router의 savedPosition 활용 vue-router의 createRouter()함수의 인자로 scrollBehavior함수를 넣을 수 있다. const router = createRouter({ history: createWebHistory(), routes, scrollBehavior(to, from, savedPosition) { // 기존 위치 존재하면 그 위치 반환 if (savedPosition) { return savedPosition; } }, });scrollBehavior 함..
1. 프론트는 항상 맨 먼저 쳐맞는다. '어 이거 안되는데요? 프론트에서 확인 좀 해주세요' 이런 말을 프로젝트하면서 일주일에 10번도 넘게 듣는다. 에러의 원인이 차라리 내(프론트) 문제라면 오히려 낫다. 하지만 백엔드 문제, 혹은 네이티브문제인 경우도 있다. 문제는 사용자에게 가장 앞단에 보이는 부분은 결국 프론트이다. 일단 누구의 문제이든간에, 내가 먼저 버그 alert를 받아들이고나서, 어느 파트의 문제인지 파악한 다음, 다시 그 파트의 개발자에게 해당 이슈를 토스해야 하는 입장이다. 프론트 개발자 입장에서는 좀 억울하지만 어쩔 수 없는 숙명이다. 사용자는 백엔드가 어떻건, 네이티브가 어떻건은 신경쓰지 않는다. 지금 당장 자신에게 보이는 화면이 에러로 나온다면, 일단 프론트 문제처럼..
최근에 개발중인 프로젝트들은 모두 Vue3의 composition api를 기반으로 하고있다. 다만 아직 typescript가 아닌 javascript를 사용하고, 상태관리는 pinia가 아닌 vuex를 사용 하고 있다. composition api를 사용하면 typescript와 pinia를 사용하는데 있어서 큰 이점을 얻을 수 있다보니 조만간 도입을 시도하려고 한다. 하지만 아직은 아쉽게도 한국어로 된 자료가 많지는 않은 실정이다. 아무래도 한국은 Vue보다는 React의 점유율이 더 높은데다가, 그나마 있는 Vue 자료도 option api로 되어있는 경우가 많다. 어쩔 수 없이 내가 스스로 공부해나가면서 길을 만들어가는 중이다. src/views/TodoList.vue 템플릿 Todo List u..
Vue3 composition api로 타이머를 구현해보자. 기능은 크게 시작, 정지, 재시작 총 3가지가 있다. useTimer()hook 의 형태로 정의하려고 한다. 템플릿 {{ minutesLeft }}:{{ secondLeft }} start end restart 남은 시간을 표현하는 minutesLeft, secondLeft가 있으며 스크립트의 computed속성으로 정의되어있다., 버튼 3개가 있다. 스크립트 - setup 함수 setInterval()함수에서 1초 간격으로 timeLeft 시간을 깎고, 값이 0이 되면 endTimer함수를 실행한 뒤에alert가 뜬다. 이때 주의해야할 점은 setInterval함수를 사용하므로 intervalId값을 신경써주어야 한다. 만약 id값을 제때 클..
룰렛 이벤트를 개발해야 했는데, 구글링이나 npm에는 내가 찾는 기능이 없어서 직접 구현하였다. css의 animation에서 rotate를 활용하면 되는데 구현해야 할 요구조건은 아래와 같다. 선택되는 영역이 랜덤이어야 한다. 즉 rotate() 안에 인자로 들어가는 각도 값이 동적으로 변한다. 대개 룰렛이 돌아갈 때 처음에는 천천히 돌다가 나중에는 가속도가 붙어서 빨라지고 마지막에는 느려지다 멈춘다. 당첨된 룰렛의 영역이 어떤 값인지 스크립트단에 전달되어야 한다. 우선 템플릿(html)코드를 보자. ▼ Start 템플릿은 간단하게 3개밖에 없다. 룰렛 화살표는 필수는 아니고 당첨된 영역을 확인하기 용이하도록 만들었다. 다음은 스크립트(Vue3 Composition api)이다. setup()함수에서는..