And Brain said,

오늘은 Quasar 식 페이지네이션에 대해 알아보자 기본적으로 구조는 이렇다. v-model과 ref를 통해 동적 바인딩을 한다. 사용한 코드는 이렇다. @click 함수를 넣어 저 숫자버튼들을 클릭 시 함수를 호출하며 :max에 렌더링 시에 pageCnt로 최대 페이지 수를 정해주었다. selectReply 함수는 백엔드 API와 axios로 통신한다. 이제 프론트에서 0과 20 , 20과 40 , 40과 60 ... 이렇게 백으로 넘겨주니 백쪽에서 이걸 가지고 로우넘으로 쿼리를 자르든 뭘하든 원하는 방법으로 통신하면 된다. 페이지네이션 참 쉽지 않은가? Thanks for watching, Have a nice day.

DB 데이터를 받아 q-pagination을 사용해 Quasar식 페이징처리하는 법과 Quasar Dark mode를 좀 다뤄보려했으나 여러분들이 공식문서 예제를 보고도 충분히 할 수 있을 것 같아서 스킵하려한다. 공식문서를 보고도 모르겠다면 댓글을 달아달라. Quasar 시리즈 마지막 장을 시작하자. 마우스 클릭 위치 반경의 데이터만 지도 화면에 나오게하였다. 구현은 열흘전에 해놓고 왜 이제서야 올리냐면 사실 프론트 Vue 백 Oracle SQL로 한거라 굳이 Quasar 시리즈일 필요가 있나 생각이 들어서. 일단 Oracle DB에 도를 라디안으로 바꿔주는 SQL 함수를 만든다. MySQL에는 RADIANS 함수가 존재하지만 오라클엔 존재하지 않기 때문에 직접 만들어줘야 한다. 하버사인 공식을 적용해..

컴포넌트간 데이터를 넘기기 위해 등장한 것이 props props는 컴포넌트에 등록할 수 있는 커스텀 속성이다. v-bind를 이용해 동적으로 props를 전달할 수 있다. 이는 미리 렌더링될 녀석들이 뭔지 모를때 특히 유용하다. 이게 props의 핵심 개념이다. 단방향 데이터 흐름 모든 props는 자식 부모간에 아래로 단방향 바인딩을 형성한다. 부모 속성이 업데이트되면 자식으로 흐르지만 그 역은 안된다. 부모 컴포넌트가 업데이트될 때마다 자식 컴포넌트의 모든 prop들이 최신 값으로 새로고침된다. 즉, 하위 컴포넌트에서 prop을 변경하려고 시도해서는 안된다. Quasar 시리즈 마지막 장을 올리려했는데 너무 길어져서 주말에 정리한 뒤에 2개의 포스팅으로 나누어 올릴 예정입니다. Thanks for ..

Vue 3에는 Composition API라는 것이 존재한다. 이것이 왜 유용하고 왜 써야하는지 간략하게 얘기하자면 코드의 재사용성과 가독성 때문이다. 나는 이미 컴포넌트마다 코드가 길어질대로 길어져서 전체 코드를 개발 포스팅에 올리질 않을 예정이다. 여러분들은 Composition API를 사용하여 나처럼 긴 코드를 작성하지 않길 바란다. setup Composition API의 시발점이 되어준다. 변수와 함수가 그대로 선언되어 사용되며 주의할 점은 setup 내에는 악명높은 자바스크립트의 this가 사라진다는 점이다. 쓰면 오류난다. 주로 ref가 사용되는데 setup 내에 ref를 사용하여 변수를 return 시켜주면 이런식으로 사용자가 input에 적은 content가 그대로 스크립트와 템플릿 모..

코드에 대한 이해를 원하신다면 Vue3 Composition API와 Quasar 공식문서를 읽어보시면 도움이 되실 것 같습니다. 이게 자동문 방지 코드다. required 없어도 안 넘어간다 form에 자동문 방지 코드 줘서. required는 빼주시길. 정규식 좀 더 간결해질 수도 있었겠지만 귀찮아서 비밀번호 확인은 저렇게 하면 된다. 사실 마지막 테스트 중에 알아낸건데 이름에 숫자가 허용이 되더라. 알아서 고쳐쓰시길. 코드가 굉장히 길다. 더 간결해질 수 있을 것 같지만 여기까지 마지막 테스트. 다음시간엔 Vue3 Composition API에 대해 알아보자. Thanks for watching, Have a nice day.