v-bind와 v-model의 간단 차이점

v-bind와 v-model의 차이점 v-bind는 단방향, v-model은 양방향 바인딩. 양방향이면 그저 좋을 거라 무식한 생각을 했지만, 당연하게도 역할에 맞게 써야 한다. 각각의 기능과 역할을 알아보고 쓰임새에 맞게 쓰도록 하자... v-bind v-bind는 데이터를 DOM 요소의 속성에 동적으로 바인딩하는 데 사용된다. export default { data() { return { myData: 'initial value' }; } }; :value는 v-bind:value의 단축 표현이다. :value는 input 요소의 value 속성을 myData에 동적으로 바인딩한다. 그러나 이것은 양방향 바인딩이 아니기 때문에 사용자의 입력은 myData에 반영되지 않는다. 주로 form 요소에 초기..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 1. 27.
• textsms

vue2 watch와 computed의 차이점

vue를 배우기 시작했을 무렵 watch와 computed의 역할에 대해서 감이 잡히지 않았다. watch.. 단어 그대로 감시하고 있다는 점이 더 직관적이라 computed 더 쉽게 사용할 수 있는 걸 watch로만 개발하기도 했다. (졸라 혼남) 아무튼 지금은 어느정도 감이 잡혔지만 명확하게 설명할 수 있지는 않았기에 watch 와 computed의 차이점에 대해 정리할 필요가 있었다. watch와 computed의 차이점 watch와 computed는 둘 다 상태 변화를 감지하고 그에 따른 행동을 수행하는 데 사용되는 옵션이다. 그러나 각각의 목적과 동작 방식에는 몇 가지 차이가 있다. watch watch 옵션은 데이터의 변화를 감지하고, 특정 데이터가 변경될 때 특정 동작을 수행할 수 있게 한다..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 1. 24.
• textsms

vue2 네비게이션 가드 간단 정리

네비게이션 가드 네비게이션 가드는 주로 탐색을 리디렉션하거나 취소하여 탐색을 막는데 사용된다. 주로 사용자의 권한과 인증 정보를 확인하여 특정 페이지에 접근하지 못하게 할 때 사용한다. 가드 연결 방법은 전역, 경로별, 컴포넌트 내부가 있다. 1. 전역으로 연결하기 비포 가드 beforeEach() : 라우터 인스턴스의 beforeEach() 메서드에 콜백함수를 전달하여, 비포 가드를 전역으로 등록할 수 있다. 탐색이 트리거 될 때마다 등록 순서대로 비포 가드가 호출된다. 가드는 비동기식으로 해결될 수 있고 탐색은 모든 훅이 해결되기 전까지 대기중으로 간주한다. const router = createRouter({ ... }) router.beforeEach((to, from, next) => { // ..

• format_list_bulleted 🧠 저장/Vue
• · 2024. 1. 21.
• textsms

디바운스(debounce)와 쓰로틀링(throttle)

스크롤을 맨 위로 이동하게 하는 버튼을 만드는 중에 알게 된 내용이다. 어느정도 화면을 내리면 버튼이 생겨야했기 때문에 스크롤 값을 저장해야했다. 로그를 찍어보니 스크롤 할때마다 과하게; 함수를 호출해서 사용하게 됐다. 디바운스(debounce)과 쓰로틀링(throttle) 둘 다 DOM 이벤트에 함수를 첨부 할 때 특히 유용하다. 그 이유는 이벤트와 함수 실행 사이에 제어 계층을 제공하기 때문이다. 둘 다 시간에 따라 함수를 얼마나 실행 할지를 제어하지만 서로 다르다. DOM 이벤트를 제어하지는 않는다고한다. Debounce Debounce는 이벤트를 그룹화하여 특정시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술입니다. 즉, 순차적 호출을 하나의 그룹으로 그룹화할 수 있다. Throttle Thr..

• format_list_bulleted 🧠 저장/Javascript
• · 2024. 1. 18.
• textsms

[2023 회고] 주니어 프론트엔드 개발자의 2023년 회고 😉 사실은 반성문

welcome 2024한 해가 순식간에 지나갔습니다! 마치⚡️사실 2023년은 .. 회고라기엔 반성문에 가깝습니다..  1. 개망한 개인 공부커밋이 전부는 아니겠지만, 제 상태를 보여주기에는 제일 적당한 것 같아요. 보시다시피 7월까지는 그냥 놀았어요 🤭 공부고 뭐고 양심 찔릴 때만 조금씩 하다가 결국 4월부터 완전히 놓아버린 나ㅜ 지금 생각해보면 제 정신 아니었던 것 같아요ㅠ 아무튼 시간과 돈을 흥청망청 쓰다 보니 심각성을 깨닫고 지금은 정신을 차렸답니다 😌  정보처리기사 실기 광탈7월부터는 정보처리기사 실기를 준비했습니다. 자격증이 필요해서는 아니고, CS 기초 좀 할 겸 뭔가 환기?가 필요했어서 가볍게 공부 시작! 결과는 물론 광탈 🤣 하하하하 다시는 정처기를 만만하게 보지 않겠습니다. 솔직히..

• format_list_bulleted 📃 기록/개발자 일지
• · 2024. 1. 15.
• textsms