본문 바로가기

3

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.
Vue App 구조와 Router (뷰 라우터) 세팅 방법 라우터(라우팅)이란 무엇인가 서버 사이드에서 라우팅이란 웹 페이지 접속자(유저)의 url 경로에 따라 서버가 응답을 보내는 것을 의미합니다. 우리가 아는 인터넷 페이지를 생각해본다면 아주 간단합니다. 어떤 주소를 치고 들어갔을 때 HTML 응답을 받아 새로운 페이지를 불러오는 것처럼 말입니다. 하지만 싱글 페이지 어플리케이션(Single Page Application)에서는 클라이언트 사이드 자바스크립트가 경로를 알아내 전체 페이지를 새로 불러오는 것이 아닌 바뀌어야 할 데이터와 구성 요소만을 재구성합니다. 이는 당연히 상호 작용이 많이 일어나는 현대 사회의 웹 서비스에서는 훨씬 효과적입니다. 우리가 vue에서 사용하게 되는 라우터 또한 이처럼 클라이언트 사이드에서 작동하게 됩니다. 자 이렇게 이론적인 .. 2022. 9. 19.