오늘은 뷰 프론트엔드 개발에서 꼭 알아야 할 생명주기 훅에 대해 알아보겠다. 오늘도 마찬가지로 공식문서와 여러 블로그들을 참고했고 최대한 뷰3 기준으로 작성하겠다. (항상 하는 얘기지만 혹시나 잘못된 정보가 있다면 댓글에 남겨주시길ㅠㅠ) 음... 공식문서에 일단 이렇게 나와있는데 내가 지금 아는 부분과 중요하다고 생각하는 부분을 중점으로 봐보자 일단 기본적으로 vue3 (컴포지션api) 에서 라이프사이클 훅을 사용하려면 라이프사이클 명칭 앞에 on을 붙이면 된다 ex) onMounted(), onUpdated() 등등 created 먼저 이 부분 내가 뷰2로 프로젝트했을 때 가장 많이 사용했던 라이프사이클 훅이 created였던 거 같다 근데 자세히 보면 옵션 api 에만 beforeCreate, cre..

1편에 이어 오늘은 컴포지션 api를 어떻게 사용하는지 알아보겠다 부디 1편에서 vue2와 vue3의 차이를 잘 이해했기를 바란다 (이번편도 마찬가지로 공식 문서와 여러 블로그를 참고했다) setup 전편에서 설명했듯 뷰3에서는 데이터와 메서드 등을 setup훅 안에 작성한다 그래서 나는 뷰3 프로젝트를 할 때도 스크립트 안에 setup 안에 변수, 함수등을 작성했다. 뭐 대충 이런식으로??? 근데 이 글을 쓰려고 공식문서를 살피다가 숫자 세기: {{ count }} 이런 식으로 작성이 돼있는 거다 차이를 알겠나???? 따로 setup(){} 여기 안에 코드를 작성하는 게 아니라 " {{ count }} 변수의 값을 변경할 때 변수.value를 사용하여 변경해야 하며 template 부분에서 사용할때는 ..

오늘은 뷰를 쓰면서 무조건 써야하는 뷰 라우터에 대해 알아보겠다! 아 참고로 뷰3 기준으로 최대한 작성 할거다 Routing 네트워크에서 경로를 선택하는 프로세스 웹 서비스에서의 라우팅 유저가 방문한 URL에 대해 적절한 결과를 응답하는 것 Server가 모든 라우팅을 통제 URL로 요청이 들어오면 응답으로 완성된 HTML 제공 결론적으로, Routing(URL)에 대한 결정권을 서버가 가짐 Why routing? 그럼 동작에 따라 URL이 반드시 바뀌어야 하나? => 그렇지는 않다! 단 유저의 사용성 관점에서는 필 Routing이 없다면 유저가 URL을 통한 페이지의 변화를 감지할 수 없음 페이지가 무엇을 렌더링 중인지에 대한 상태를 알 수 없음 새로고침 시 처음 페이지로 돌아감 링크를 공유할 시 처음..

보통 이제 프론트엔드 공부를 하다보면 초반에 emit props등을 통해서 컴포넌트간에 데이터 전달을 배운다 뭐 자식컴포넌트에서 부모컴포넌트로는 어떻게 보내고 반대로는 어떻게 보내고 어쩌고~~ 근데 컴포넌트 중첩이 너무 깊어지면 데이터 전달도 쉽지않고 유지보수에도 어려움이 생길 수 있다. 그래서 오늘은 뷰에서 가장 많이 사용하는?(사실 나는 뷰엑스밖에 안써봄 ㅋㅋㅋ) 상태관리 라이브러리인 vuex에 대해 알아보자 vue2 문법으로 작성하려 했으나 요즘은 vue3많이 쓰니까 vue3 기준으로 작성해 보겠따 그리고 나는 vue3에서 vuex 사용법, vue, computed, reactive, ref, watch, watchEffect, props, vuex, composable, module, compos..

자주 쓰이는 디렉티브를 정리해보겠다! 자세한거는 https://v3-docs.vuejs-korea.org/api/built-in-directives.html 👈 요기를 참고하길 바란다. 아 그리고 예제가 뷰2 문법으로 작성되있는데 data나 method부분을 setup()으로만 옮기면 뷰3 문법이니까 디렉티브 사용하는거는 똑같다고 보면 될 것 같다 Directive 기본 구성 v-접두사가 있는 특수 속성에는 값을 할당 할 수 있음 값에는 JS 표현식을 작성 할 수 있음 directive의 역할은 표현식의 값이 변경될 때 반응적으로 DOM에 적용하는 것 v-text Template Interpolation과 함께 가장 기본적인 바인딩 방법 {{}} 와 동일한 역할 (정확히 동일한 역할인 것은 아님) {{ ..