본문 바로가기

전체 글26

1. React 프로젝트 기본구조 ㅁ 리액트 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 14.17.0 LTS 설치 CMD > npx create-react-app [프로젝트 이름 작명] App.css .App { text-align: center; } .App-logo { height: 40vmin; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .App-logo { animation: App-logo-spin infinite 20s linear; } } .App-header { backg.. 2021. 5. 18.
1. Vuetify Grid system ㅁ Vue t ify vuetifyjs.com/en/components/grids/ Grid system Vuetify supports the 12 point Material Design grid for laying out and controlling breakpoints for your application. vuetifyjs.com ㅁ Vue t ify - Grid system - FlexBox를 기반 developer.mozilla.org/ko/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN 일명 flexbox라 불리는 Flexible Box m.. 2021. 5. 10.
4. Vue js - 이벤트 핸들러 ㅁ 버튼 이벤트 핸들러 수박 1만원 과일구매 구매개수 : 0 ㅁ 버튼 이벤트 생성 과일 구매 or 과일 구매 ㅁ 버튼 클릭에 따라서 버튼수 저장 변수 export default { name: 'App', data() { return { 과일개수 : 0, } }, components: { } } ㅁ 버튼 이벤트 클릭 했을때 버튼 수량 증가++ 과일구매 과일구매수량 : {{과일개수}} or 과일구매 과일구매수량 : {{과일개수}} ㅁ 함수 만들어서 버튼 이벤트 사용가능(응용) ㅇ 함수 : 긴코드를 짧은 단어로 축약 할수 있다. 과일구매 과일구매수량 : {{과일개수}} ㅁ 함수등록 export default { name: 'App', data() { return { 과일개수 : 0, } }, methods: .. 2021. 4. 28.
3. Vue js - v-for 반복문 - 리스트 렌더링 ㅁ v-for는 반복적인 HTML 요소에 사용함 ㅇ 기존 HTML 태그 - 하드코딩 적용 짜장면 짬뽕 우동 울면 기스면 ㅇ 현재 HTML 태그 - v-for 반복문 적용 {{반복문이름}} export default { name: 'App', data() { return { 메뉴들 : ['짜장면', '짱뽕', '우동', '울면', '기스면'], // v-for(반복문) 배열 데이터 저장 } }, components: { } } ㅁ 반복문 이름 2개 사용 {{반복문이름}} 현재 이 반복문 이름을의 고유키를 붙여서 사용함 *중요 : 반복문고유key는 숫자만큼 반복함 0,1,2,3,4,5,6,7,8 ++ ㅁ v-for 적용 메뉴 예시 ㅇ 기존 HTML 하드코딩 메뉴 기존 HTML 하드코딩 수박 1만원 딸기 2만.. 2021. 4. 27.