Vue11 Vue v-model 익숙해지기 (Login UI) Vue를 사용하면서 가장 사용하게 될 directive(디렉티브) : v-model vue 공식 사이트에서는 v-model에 대해서 다음과 같이 설명하고 있습니다. "2.x에서 컴포넌트에 v-model을 사용하는 것은 value prop를 전달하고 input 이벤트를 emit 하는 것과 같습니다." 즉 value를 전달하고, input 이벤트를 발생시킨다는 것인데, 다른 말로는 양방향 데이터 바인딩이라고 표현하기도 합니다. 저는 이를 조금 더 쉽게 컴퍼넌트에 value(값)을 연동시킨다고 표현하고 싶습니다. 예를 들어 로그인 페이지에서 아이디 입력칸과 비밀번호 입력칸에 각각 아이디와 비밀번호를 적은 후 로그인 버튼을 눌러 로그인하려고 합니다. 이 때 v-model을 통해 아이디 입력칸과 비밀번호 입력칸을.. 2022. 9. 22. Vue New Window Popup 새 창 팝업 띄우기 및 CSS 적용 팝업의 종류: 다이알로그(모달) vs 팝업 우리는 흔히 팝업이 나타난다. 팝업창이 열린다. 등의 표현을 씁니다만 한국에서 일반 유저에게 다이알로그 혹은 모달이란 말을 익숙치 않습니다. 지난 시간에는 공용 팝업을 만들어보았는데 여기서 저희가 사용한 것은 태그였으며, 이 태그는 명칭 그대로 다이알로그를 생성하는 태그입니다. 다시 한번 앱에서 로그인 버튼을 눌러 나타나는 것을 확인해십시오. https://aid-your-life.tistory.com/entry/Vue-%EB%82%98%EB%A7%8C%EC%9D%98-%EC%BB%B4%ED%8D%BC%EB%84%8C%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-featCommon-Popup%EA%B3%B5%EC%9A%A9-%ED%8C%9D.. 2022. 9. 22. Vue 나만의 컴퍼넌트 만들기 feat.Common Popup(공용 팝업) My-Component 활용 방법 우리는 앱에서 특정한 규격의 버튼, 팝업 등 UI를 공용으로 사용하는 것을 알고 있습니다. 이는 개발 효율성을 증가시킬 뿐만 아니라 유저에게도 통일성의 측면에서 편안함을 느끼게 해주기 때문이죠. 물론 똑같은 로직을 복사하여 여러 곳에 붙여 넣기도 하지만, 계속해서 사용하게 되는 UI는 컴퍼넌트로 직접 만들어 두면 추후 유지 보수 측면에서도 매우 유리합니다(여러 곳에 복붙해둔 버튼을 하나 하나 찾아서 수정해야 된다면?). 저희는 팝업을 하나 만들어보겠지만 같은 방식으로 인풋 박스나 버튼 등도 하나씩 직접 만들어 보시면 좋을 것 같습니다. Login 페이지 만들기 본격적으로 컴퍼넌트 만들기에 들어가기 앞서 이전에 배웠던 내용을 복습하는 느낌으로 가볍게 하나의 새로운 페이지를.. 2022. 9. 20. Vuetify (Vue UI Library) 세팅하기 Vuetify란 무엇인가 뷰티파이는 vue 프레임워크를 사용해서 개발할 때 UI를 손쉽게 구성할 수 있도록 도와주는 라이브러리입니다. 개발에서 자주 사용되는 버튼이나 기능들을 손쉽게 찾아 쓸 수 있기 때문에 아직 미숙한 개발자들에게 개발 소요시간을 대폭 단축시킬 수 있다는 장점이 있습니다. 다만 이미 구조화된 UI를 가져다 쓰는 것이기 때문에 디테일한 CSS를 적용하기는 어려울 수 있습니다. 저희는 일단 개발에 익숙해지는 단계이기 때문에 Vuetify를 설치하고 템플릿을 가져다 쓰는 방식으로 개발을 진행해보겠습니다. 먼저 이전 글에서 설명한 것처럼 vuetify를 설치한 후 다음 내용을 진행하시기 바랍니다. https://simsimcoding.com/entry/Vue-%ED%94%84%EB%A1%9C%.. 2022. 9. 20. 이전 1 2 3 다음
