Front-end25 [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. [React] class방식 vs. function 방식 컴포넌트 코드량 비교 클래스 컴포넌트와 함수형 컴포넌트의 코드를 비교해보면서 함수형 컴포넌트의 소중함(?)에 대해서 알아보도록 하자.. 위와 같이 + 버튼을 누르면 숫자가 1씩 증가하고, -버튼을 누르면 숫자가 1씩 감소되는 아주 간단한 기능을 만들어보면서 class형 컴포넌트와, 함수형 컴포넌트의 코드 양을 비교해보자. 클래스(class) export default class App extends React.Component { state = { num: 1 }; render() { const num = this.state; return ( {num} + - ); } incre = () => { this.setState((state) => { return { num: state.num + 1 }; }); }; decre =.. 2022. 1. 29. CSS sprite - 한번의 통신으로 여러개의 이미지를 한번에 불러와서 웹성능 개선하기 지금 바로 네이버 메인화면에서 F12를 눌러 개발자도구를 들어가봅니다. 개발자 도구에서 Network 탭을 들어가면, 네이버 메인화면을 띄우면서 이루어진 네트워크 전송들이 찍혀있는것을 볼 수 있는데요. 그 중 이미지 파일(.png) 하나를 눌러보면 다음과 같이 메인화면에서 사용된 이미지들을 하나의 png파일로 모아서 하나의 이미지로 만들어놓은 것을 볼 수 있습니다. 이런 방법을 CSS 스프라이트(sprite)라고 하는데, 여러개의 이미지를 하나의 이미지 파일로 결합해 필요한 이미지가 위치하는 픽셀 좌표 정보를 사용하는 방법입니다. 주로 위에서 처럼 아이콘이나 버튼 등 작은 이미지를 사용할 때 많이 사용합니다. 왜 이런 방법을 사용할까? 결론부터 말하자면 웹사이트 성능을 개선하기 위해 http 요청 수를 .. 2021. 12. 21. 크롬 Lighthouse로 내 웹사이트 성능을 측정해보자 Lighthouse를 통해서 웹 성능을 전반적으로 검사하고 성능을 향상하기 위한 가이드를 제공해줍니다 지금 F12를 눌러 [개발자도구]를 들어간 후 [Lighthouse] 탭 ( 크롬버전에 따라 이름이 [Audit] 일 수도 있습니다. ) Categories는 어떤 부분을 검사하고싶은지, Device는 어떤 기기환경에서의 성능을 검사하고 싶은지 선택해주시면 됩니다. 각각 선택해 준 후 [ Generate report ] 를 눌러 성능 검사를합니다. 그러면 웹 성능 최적화가 왜 중요한지에 대해서 열심히 설명을 해주다가 로딩이 끝나면! 검사를 한 웹 사이트는 제가 vue코드를 react코드로 바꾸면서 만들었던 사이트였는데요. 이런식으로 결과가 나왔습니다. 67점이라는 점수는 Metrics라는 기준에 의해 나.. 2021. 10. 28. 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 2 다음
