[Vue.js] 컴포넌트(전역 컴포넌트, 지역 컴포넌트)
2021. 8. 20. 16:12
Vue.js
전에 만들었던 더하기 문제 맞추기 예시를 활용해 컴포넌트에 대해 정리 컴포넌트란? 화면의 영역을 분리하여 개발하는 것 컴포넌트를 사용함으로써 코드를 재사용하기 편해짐 예제 전에 만들었던 더하기 문제 맞추기 예제를 (서로다른)두 개 만든다고 생각해보자 이 때 생각할 수 있는 방법은 2가지 있는데, {{num1}} + {{num2}} = ? 입력 {{result}} {{num1}} + {{num2}} = ? 입력 {{result}} 첫번째 방법은 다음과 같이 2번 써주는 것 이 때의 결과는 아래와 같이 두개가 같은 data와 methods를 공유함 두번째 방법은 div를 하나 더 만들고 id를 test가 아닌 다른 id로 설정해 주는 것 이 방법은 제대로 동작은 하지만 코드를 2번씩 써줘야 되기 때문에 코드..
[Vue.js] v-model, v-on:submit, 랜덤숫자생성, event.preventDefault()
2021. 8. 20. 14:58
Vue.js
코드 더하기 문제 맞추기 예시를 통해 v-model, v-on:submit, 랜덤숫자생성, event.preventDefault()에 대해 정리 {{num1}} + {{num2}} = ? 입력 {{result}} 코드 설명 Math.ceil(Math.random()*10) 을 통해 1~10사이의 랜덤 숫자 생성 input 태그에서 v-model을 사용함으로써 input과 연결 button의 type을 submit으로 지정해줌으로써 이 버튼이 폼 데이터를 제출하는 버튼이라는 것을 지정 버튼이 클릭되면 v-on:submit이 실행되어서, SubmitForm 메소드 실행 입력값이 두 랜덤숫자들의 합과 같으면 result를 "정답"으로 설정하고 다음문제 출제 다르면 result를 "오답"으로 설정 이 때, ev..
[Vue.js] v-if, v-else, v-else-if, v-on:click
2021. 8. 19. 21:20
Vue.js
코드 v-if, v-else, v-on:click를 사용한 코드를 통해 개념 정리 버튼 버튼 눌림 코드 설명 push는 false로 초기화 되어있음 (인스턴스 생성시 false로 초기화) button을 생성하려는데 v-if가 있기때문에 조건을 만족해야 button을 생성함 조건 'push==false'에 만족하기 때문에 button이 생성됨 if문에 만족하면 else문은 만족하지 않으므로 div는 생성되지 않음 v-on:click은 객체가 클릭되었을 때 실행됨 (다른 객체들에도 사용 가능하지만 주로 버튼에 사용) 버튼이 클릭되면 'push=true'라는 스크립트 코드가 실행되서 push는 true로 바뀜 push가 true가 되면 v-if가 만족하지 않으므로 button 생성..
[Vue.js] 인스턴스, 속성(el, data, methods)
2021. 8. 19. 20:49
Vue.js
인스턴스란? Vue로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위 인스턴스 생성 를 써줌으로서 Vue를 사용할 수 있음 {{data01}} {{data02}} {{data03}} new Vue({ }); 를 통해 Vue 인스턴스 생성 인스턴스에는 el, data, methods 등의 속성들을 넣을 수 있음. el 속성 위 코드에서 첫번째 div의 id를 test로 정해주었고, el 속성에 #test를 넣어줌 이를 통해 첫번째 div 안에서는 생성된 Vue 인스턴스를 사용할 수 있지만, 첫번째 div 밖에서는 사용할 수 없음 따라서 {{data03}}은 첫번째 div 밖에 있으므로 data를 불러오지 못하고, 실행시키면 아래 그림과 같이 출력됨 data 속성 data 속성 안에 data01, d..
[JAVA] 상속(Inheritance), super
2021. 8. 17. 18:58
JAVA/기본 문법
상속(Inheritance) 이란? 객체지향 프로그램에서 부모클래스(상위클래스)의 변수(필드)나 메소드(함수)를 자식클래스(하위클래스)가 물려받아 자식클래스가 자신의 것처럼 사용할 수 있게하는 것 상속을 하면 코드의 중복을 감소할 수 있고, 유지보수 시간을 단축할 수 있다는 장점이 있음 super란? 클래스에서 this를 사용하면 자기 자신의 변수라는 것을 표현했었음 super은 부모를 가르킴 상속 예제 Car class 아래와 같이 Car class가 있고 모든 Car들이 기본적으로 가지고 있는 변수, 메소드라고 가정 class Car { int number; String brand; Car(int number, String brand) { this.number = number; this.brand =..
[JAVA] 재귀함수
2021. 8. 17. 16:30
JAVA/알고리즘 개념 정리
재귀함수 : 함수가 자기자신을 다시 호출하여 문제를 해결하는 함수 팩토리얼 문제를 통해 재귀함수 정리 팩토리얼이란? 팩토리얼 : 어떤 수 이하의 모든 양의 정수의 곱 기호는 !를 사용한다. ex) 5! = 5 * 4 * 3 * 2 * 1 = 120 재귀함수를 이용한 팩토리얼 (개념) fact라는 메서드에 파라미터 x를 넘겨줌 x값이 1이 될 때 까지 x * fact(x-1)을 return x값이 1이되면 1 return fact(5) = 5 * fact(4) return fact(4) = 4 * fact(3) return fact(3) = 3 * fact(2) return fact(2) = 2 * fact(1) return fact(1) = 1 return => fact(5) = 5 * fact(4) =..
[JAVA] 접근 제한자, 정보은닉, Static, psvm
2021. 8. 17. 16:18
JAVA/기본 문법
접근 제한자 접근 제한자 (Access Modifier)란? 클래스, 변수, 메소드를 선언할 때 사용하는 것으로 해당 클래스, 변수, 메소드의 접근을 제한할 때 사용 접근 제한자를 통해 해당 정보를 외부 접근으로부터 보호할 수 있음 접근 제한자의 종류 public : 어디에서나 접근가능 protected : 동일 클래스, 패키지에서 접근가능 + 해당 클래스를 상속받은 외부 패키지의 클래스에서 접근가능 default(안 써주는것) : 동일 클래스, 패키지에서만 접근가능 private : 동일 클래스에서만 접근가능 public > protected > default > private 순으로 접근 범위가 넓음 변수와 메소드는 모든 접근 제한자를 사용할 수 있지만, 클래스는 public과 default만 사용 ..