개발 노트

templete templete를 통해 html 코드를 작성할 수 있다. How Vue Works Set Text const app2 = Vue.createApp({ template:` {{ message }}`, //html코드를 사용 data() { return { }; }, methods: { }, }); $refs,ref ref를 통해서 태그에 직접 접근 할 수 있으며 html 키값이 중복으로 있으면 안된다 const app = Vue.createApp({ data() { return { currentUserInput: '', message: 'Vue is great!', }; }, methods: { setText() { //$refs를 통해 태그에 직접 접근하여 처리 this.message =..

1) v-if, v-else No goals have been added yet - please start adding some! Goal 자바스크립 형식을 쓸 수 있고 데이터나 메서드등을 참조 할 수 있음 v-else는 v-if 다음에 바로 써야함 v-else-if는 else if같은거 2) v-show No goals have been added yet - please start adding some! Goal v-show는 v-if의 대안 v-show는 css를 통해 항목을 숨김 v-if는 dom에서 직접 제거 3) v-for 반복문 {{goal}} 인덱스와 키도 출력할 수 있음 {{goal}} - {{index}} {{value}} - {{key}} {{num}} @click의 메소드에 index..

1) v-model v-model은 v-bind:value v-on:input의 축약형 2) computed : 함수가 아니라 변수처럼 사용 계산 할때만 메서드 사용 의존성이 있을때는 computed사용 Your Name: {{ fullname }} const app = Vue.createApp({ data() { return { name: '' }; }, computed : { fullname() { console.log('Running again...'); if (this.name === '') { return ''; } return this.name + ' '+ 'AA'; } }, } }); app.mount('#events'); 3) watch const app = Vue.createApp({ d..

Add 10 1) html에 js를 연결하는 법 const app = Vue.createApp({ }); app.mount('#user-goal'); // 해당 아이디에 뷰를 연결​ 2) 데이터와 메소드 선언 const app = Vue.createApp({ data() { return { }; }, methods : { } }); app.mount('#user-goal'); // 해당 아이디에 뷰를 연결 3) js에서 선언한 변수와 메소드 사용 {{ courseGoal }} {{calculateAge()}} {{ }} 를 사용 4) v-bind Learn more about Vue {{ }} 대신 v-bind 사용 5) data내의 객체를 참조하는 this const app = Vue.createApp..

❓문제 This is related to npm not being able to find a file. 리액트 이제막 시작할려고하는데 에러뜬다. 시작하자마자 하기 싫게.. 💡해결 file 실행 위치가 문제 cd를 이용해서 그 실행 할려는 폴더 안으로 들어간다. cd 원하는 폴더 명

자바스크립트를 이루고 있는 거의 "모든 것"이 객체다 객체지향 프로그래밍 속성을 통해 여러 개의 값을 하나의 단위로 구성한 복합적인 자료구조를 객체라고 한다 상태 데이터와 동작을 하나의 논리적인 단위로 묶은 복합적인 자료구조이다 상속과 프로토타입 어떤 객체의 프로퍼티 또는 메서드를 다른 객체가 상속받아 그대로 사용할 수 있는 것 중복 제거 가능 //생성자 함수 function Circle(r) { this.radius = radius; } //프로토타입은 Circle 생성자 함수의 prototype 프로퍼티에 바인딩되어 있다. Circle.prototype.getArea = function() { return Math.PI * this.radius **2; } const circle1 = new Circ..

일급객체 무명의 리터럴로 생성할 수 있다. 즉 런타임에 생성이 가능하다 변수난 자료구조(객체,배열 등)에 저장할 수 있다 함수의 매개변수에 전달할 수 있다 함수의 반환값으로 사용할 수 있다 //1.함수는 무명의 리터럴로 생성할 수 있다. //2.함수는 변수에 저장할 수 있다. const increase = function (num) { return ++num; }; const decrease = function (num) { return --num; } //2.함수는 객ㅊ체에 저장할 수 있다. const auxs = {increase, decrease}; //3.함수는 매개변수에 전달할 수 있다. function makeCounter(aux) { let num = 0; return function () ..

16장 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 프로퍼티 상태란 프로퍼티의 값, 값의 갱신 가능 여부, 열거 기능 여부, 재정의 가능 여부를 말한다. object.getOwnPropertyDescriptor 메서드를 사용하면 간접적으로 확인할 수 있다. const person = { name : 'ah' }; //첫번째 매개변수는 객체를 두번째는 프로퍼티 키를 console.log(Object.getOwnPropertyDescriptor(person,'name')); 데이터 프로퍼티와 접근자 프로퍼티 데이터 프로퍼티 : 키와 값으로 구성된 일반적인 프로퍼티 접근자 프로퍼티 : 자체적으..

스코프란? 모든 식별자는 자신이 선언한 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다.이를 스코프라 한다. 즉, 스코프는 식별자가 유효한 범위를 말한다. 스코프 체인 스코프가 계층적으로 연결된 것을 의미 변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다. 함수 레벨 스코프 지역 스코프가 생성됨 var 키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정 렉시컬 스코프 함수를 어디서 호출했는지가 아니라 함수를 어디서 정의했는지에 따라 상위 스코프를 결정한다. 함수가 호출된 위치는 상위 스코프 결정에 어떠한 영향도 주지 않는다. 즉, 함수의 상위..

//each()/$.each() 메서드 $("요소 선택").each(function(매개번수1, 매개변수2) {}) $.each($("요소 선택").function(매개번수1, 매개변수2) {}) $("요소 선택").each(function() {$(this)}) $.each($("요소 선택").function() {$(this)}) //예시 $(function(){ var obj = [ {"area":"서울"}, {"area":"부산"}, {"area":"전주"} ]; $(obj).each(function(i, o){ //obj라는 배열을 받아서 i는 인덱스를 의미 0는 배열안에 있는 객체 console.log(i + ":", o); }); console.log("==== The End 1 ====")..