본문 바로가기

Frame-Work14

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.
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.
2. Vue js - HTML 태그 안에 데이터 바인딩 ㅁApp.vue 프로젝트 생성시 기본구 ㅁ 데이터 바인딩 1. 기본구 export default { name: 'App', components: { HelloWorld } } 2. 데이터 저장소 만들기 name: 'App', data() { // 데이터 저장소 추가 return { // 리터 안에 숫자 : 1, // 오브젝트 형식 { key : value } 데이터 만듬 한글 : '가나다라마바사', // 문자열 ' ' 따옴표 안에 문자열 컬러 : 'color : blue', // HTML 태그 안에 데이터 바인딩 배열 : ['배열1번은0번', '배열2번은1번', '배열3번은2번'], // 배열 데이터 바인딩 } }, components: { HelloWorld } } 3. 데이터 저장소에 저장한 데이터 .. 2021. 4. 23.

티스토리툴바