Front-end/Vue.js11 [Vue] options api로 웹사이트 만들기 - 9. 게시글 상세보기(2) ( + 파라미터 넘겨서 동적 라우팅) 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 저번글에서 라우터를 연결해봤는데요! 이번글에서는 게시물 .. 2022. 3. 3. [Vue] options api로 웹사이트 만들기 - 8. 게시글 상세보기(1) (+ router 연결) Router를 이용해서 게시글을 눌렀을 때 상세보기 창으로 라우팅해보겠습니다. 라우팅은 URL에 따라 보여줄 컴포넌트를 연결해놓고 , 해당 URL로 이동했을 때 연결된 컴포넌트를 보여주는 방법입니다. Vue Router의 기본적인 태그는 다음과 같습니다 : : 이동할 URL 변경 태그 : URL에 따라 연결된 component를 보여주는 부분 그럼 이제부터 vue-router를 사용해서 게시글 상세보기 창으로 이동하는 부분을 만들어보겠습니다! 1. vue-router 설치하기 우선 vue-router를 설치해줘야 하는데요, 그냥 npm install vue-router를 해보니, 저는 이런 에러 로그가 뜹니다! ERESOLVE unable to resolve dependency tree ~ 어쩌구 ~ F.. 2022. 3. 3. [Vue] options api로 웹사이트 만들기 - 7. 사용자별/ 태그별 게시물 조회하기 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 저번 글에서 메인의 왼쪽 섹션에 유저리스트까지 axios.. 2022. 2. 24. [Vue] options api로 웹사이트 만들기 - 6. axios 다중요청해서 동시에 리스트 뿌려주기 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 저번 글에서는 v-if를 통해 조건부렌더링을 해봤는데요... 2022. 2. 24. [Vue] options api로 웹사이트 만들기 - 5. v-if로 조건부 렌더링 (v-show 와 v-if의 차이) 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 저번 글에서 글 하나하나를 컴포넌트화 시켜봤었는데요. 이.. 2022. 2. 24. [Vue] options api로 웹사이트 만들기 - 4. 컴포넌트화해서 props로 데이터보내기 ( + 가상DOM ) 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 이번 글에서는 반복되는 부분을 컴포넌트화 시키고, pro.. 2022. 2. 23. [Vue] options api로 웹사이트 만들기 - 3. v-for로 리스트 뿌려주기 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 저번시간에 데이터를 받아와 브라우저에 뿌려주는 것까지 봤.. 2022. 2. 23. [Vue] options api로 웹사이트 만들기 - 2. axios로 API 요청하기 ( + axios 전역사용) 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 1. axios 설치하기 axios는 간단하게, 서버와 .. 2022. 2. 20. [Vue] options api로 웹사이트 만들기 - 1. 초기세팅 ( + 환경변수 설정 ) 시작하기에 앞서, 우리가 만들고 있는 웹사이트의 완성본은 이렇게 생겼습니다! : https://youthful-heyrovsky-6bcc71.netlify.app/ vue2-options youthful-heyrovsky-6bcc71.netlify.app 코드 전체를 다 적기보다는 필요한 부분만 잘라서 설명하기때문에, 전체코드가 궁금하신 분은 : https://github.com/yoycode/vue2-options 를 참고해주세요! GitHub - yoycode/vue2-options Contribute to yoycode/vue2-options development by creating an account on GitHub. github.com 1. vue 프로젝트 생성하기 우선 초기세팅을 해줘야 합.. 2022. 2. 20. vue UI라이브러리 Vuetify vs. Quasar ( vs BootstrapVue) 사용해본 장단점 및 느낀점 비교 Vuetify 기반 개발 경험이 있어서 그런지 vuetify가 개인적으로 뭔가 더 익숙하지만 개인 프로젝트를 할 때에는 다른 UI프레임워크도 한번 써보고싶어서 ( + 그 당시에는 vuetify가 vue3을 지원을 안해서 ) 대체 라이브러리를 찾던 중에 Quasar를 사용해봤다. Vuetify보다는 좀 더 얕게 공부하고 사용한 느낌이지만 그래도 둘 다 사용해보면서 느낀점과 이와 관련해 좋은 글이 있어서 중요한부분만 참고해서 번역을 함께 공유:-) https://blog.bitsrc.io/quasar-vs-vutify-vs-bootstrap-vue-choosing-the-right-vuejs-ui-library-cf566f61bc4 Quasar vs. Vutify vs. Bootstrap Vue: Choos.. 2021. 10. 22. HTML API Drag and Drop (D&D) 활용 + Vue에 적용 해당 API는 HTML기반 API로 아래 링크에서 자세한 사항을 확인할 수 있다 https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API HTML 드래그 앤 드롭 API - Web API | MDN HTML 드래그 앤 드롭 인터페이스는 파이어폭스와 다른 브라우저에서 어플리케이션이 드래그 앤 드롭 기능을 사용하게 해줍니다. developer.mozilla.org 스케쥴 관리 사이트를 Vue로 구현하기 위해 Drag & Drop 기능이 필요했는데, 처음엔 좀 더 다양한 기능이 있는 Vue.Draggable을 시도했었다가 (https://github.com/SortableJS/Vue.Draggable) 내가 원하는 기능 (item 서로 바꾸기).. 2021. 9. 12. 이전 1 다음
