본문 바로가기

Front-End64

[vue] 컴포넌트의 필요성과 특성 해당 포스팅은 인프런 웹 게임을 만들며 배우는 Vue 강의를 참고하여 작성하였습니다. https://www.inflearn.com/course/web-game-vue [무료] 웹 게임을 만들며 배우는 Vue - 인프런 | 강의 간단한 8가지 웹 게임을 만들며 Vue.js와 Vue와 함께 사용되는 Vuex, Vue Router를 배워봅니다., - 강의 소개 | 인프런... www.inflearn.com 🔎 왜 컴포넌트를 사용하나요? 만약 반복되는 div를 사용하고 싶을때 가장 먼저 떠올리는 방식은 복붙 이런식으로 전부 복붙하고 하나하나 변수를 달리 설정해줘야 할 것이다.. 하지만..너무 불편해! 귀찮아! 심지어 지저분해보여... 그래서 도입된 것이 컴포넌트! Vue 컴포넌트는 아래와 같이 작성한다. Vue.. 2022. 12. 12.
[vue] v-model, v-on:submit, ref 해당 포스팅은 인프런 웹 게임을 만들며 배우는 Vue 강의를 참고하여 작성하였습니다. https://www.inflearn.com/course/web-game-vue [무료] 웹 게임을 만들며 배우는 Vue - 인프런 | 강의 간단한 8가지 웹 게임을 만들며 Vue.js와 Vue와 함께 사용되는 Vuex, Vue Router를 배워봅니다., - 강의 소개 | 인프런... www.inflearn.com 바로 태그 설명으로 가기 📑 todo 랜덤으로 숫자 2개를 불러와서 사용자에게 구구단을 시키고, 맞으면 '딩동댕' 틀리면 '땡'을 외치는 게임, 단, 맞으면 새로운 문제를 출제하고 틀리면 맞출때까지 문제 출제 X {{ first }}곱하기 {{ second }}는? 입력 {{ result }} 📌 v-mod.. 2022. 12. 12.
[vue] data와 v-if, v-else 해당 포스팅은 인프런 웹 게임을 만들며 배우는 Vue 강의를 참고하여 작성하였습니다. https://www.inflearn.com/course/web-game-vue [무료] 웹 게임을 만들며 배우는 Vue - 인프런 | 강의 간단한 8가지 웹 게임을 만들며 Vue.js와 Vue와 함께 사용되는 Vuex, Vue Router를 배워봅니다., - 강의 소개 | 인프런... www.inflearn.com 간단한 예제이므로 cdn을 사용하여 작성한 코드입니다. 좋아요 눌렀음 Like 📌 el 속성 위 코드에서 첫번째 div의 id를 root로 정해주었고, el 속성에 #root를 넣어줌 이를 통해 해당 div 안에서는 생성된 Vue 인스턴스를 사용할 수 있지만, 해당 div 밖에서는 사용할 수 없음 📌 dat.. 2022. 12. 11.
[vue] vue는 무엇인가? / mvvm 패턴 / vue 3.0 설치부터 서버 띄우기까지!(+포트 변경) 먼저 vue를 설치하기 전에, 왜 vue를 쓰는지? vue가 왜 편한지 살펴봅시당🫠 vue.js는 무엇인가? 💚 Vue.js의 장점 쉬운 학습 곡선 Vue.js는 간단한 문법과 직관적인 디자인으로, 새로운 개발자가 빠르게 배우고 사용할 수 있습니다. React나 Angular보다 학습 곡선이 낮은 편입니다. 유연성과 경량성 Vue.js는 작고 가벼운 라이브러리로서, 다른 프로젝트에도 쉽게 통합할 수 있고 필요한 부분만 사용할 수 있습니다. 단일 파일 컴포넌트 Vue.js는 .vue 확장자를 사용하는 단일 파일 컴포넌트를 지원합니다. 이는 HTML, CSS, JavaScript를 하나의 파일로 구성하여 관리할 수 있게 해주며, 모듈화와 재사용성을 높여줍니다. 반응성 Vue.js는 데이터 바인딩과 가상 DO.. 2022. 12. 9.
[React] babel은 어떻게 내 코드를 이해하고 수행하는걸까? https://bravenamme.github.io/2020/02/12/what-is-babel/ babel 이란 무엇인가? 들어가며 최근에 react 프로젝트와 typescript 프로젝트를 거치면서 webpack 을 자주 써보고 세팅해보게 되었습니다. 처음에는 동작의 원리보다 요즘 잘나가는 프론트엔드 개발 환경 만들기라는 목표 bravenamme.github.io 해당 내용은 인프런 진유림님의 만들면서 배우는 리액트 : 기초를 참고하여 작성하였습니다! 바벨(Babel)이란? 입력과 출력이 모두 자바스크립트(JavaScript) 코드인 컴파일러로, 최신 버전의 자바스크립트(ECMAScript)를 구 버전의 자바스크립트로 변환시켜주는 역할을 합니다. 이렇게 구 버전의 자바스크립트로 변환해주는 이유는, 구.. 2022. 7. 11.
[dart] 다트 언어 아이콘 리스트 https://api.flutter.dev/flutter/material/Icons-class.html Icons class - material library - Dart API Identifiers for the supported material design icons. Use with the Icon class to show specific icons. Icons are identified by their name as listed below, e.g. Icons.airplanemode_on. To use this class, make sure you set uses-material-design: true in your pro api.flutter.dev 아이콘 뭐뭐 있는지 하나하나 찾기 불편했는데 .. 2022. 5. 19.