login2 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 나만의 컴퍼넌트 만들기 feat.Common Popup(공용 팝업) My-Component 활용 방법 우리는 앱에서 특정한 규격의 버튼, 팝업 등 UI를 공용으로 사용하는 것을 알고 있습니다. 이는 개발 효율성을 증가시킬 뿐만 아니라 유저에게도 통일성의 측면에서 편안함을 느끼게 해주기 때문이죠. 물론 똑같은 로직을 복사하여 여러 곳에 붙여 넣기도 하지만, 계속해서 사용하게 되는 UI는 컴퍼넌트로 직접 만들어 두면 추후 유지 보수 측면에서도 매우 유리합니다(여러 곳에 복붙해둔 버튼을 하나 하나 찾아서 수정해야 된다면?). 저희는 팝업을 하나 만들어보겠지만 같은 방식으로 인풋 박스나 버튼 등도 하나씩 직접 만들어 보시면 좋을 것 같습니다. Login 페이지 만들기 본격적으로 컴퍼넌트 만들기에 들어가기 앞서 이전에 배웠던 내용을 복습하는 느낌으로 가볍게 하나의 새로운 페이지를.. 2022. 9. 20. 이전 1 다음
