네발로 코딩하는 포메라니안

1. v-for와 v-bind v-bind:는 : 약식으로 사용함 좋아하는 색상을 선택하세요. {{value.value}} 선택한 색상 : {{checkedList}} 결과 화면

외부 파일에 선언한 변수를 import해서 사용할 수 있다. 먼저, html 문서에서 곱셈을 계산하는 모듈을 가져와 사용하려고 한다. 다른 곳에서 사용하도록 설정하는 방법에는 2가지 방법이 있다. 1. 외부에서 사용하도록 허가할 변수마다 export 키워드 붙이기 export const title = "계산기 모듈"; export function mul(i, j) { return i * j; } function off() { //외부에서 사용 불가 console.log("종료"); } 2. 마지막에 외부에서 사용하도록 허가할 변수들을 모아서 한 번에 export 키워드 붙이기 //cal.js const title = "계산기 모듈"; function mul(i, j) { return i * j; } fu..

1. Promise란? 자바스크립트에서 비동기를 처리할 때, 동기처럼 처리하기 위해 사용하는 객체를 말한다. 비동기 처리가 끝난 후, 실행되어야 하는 것을 정의해놓고 비동기 처리가 끝나면 불려질 수 있도록 한다. 말 그대로, "넌 비동기 처리 끝나고 실행해줄게"하는 약속을 맺는다고 보면 된다. 비동기 처리 시 아래의 코드처럼 특정 로직이 끝나는 걸 기다리지 않고, 뒤의 로직을 바로 실행시키기 때문에 원하는 결과를 얻을 수 없다. let data; setTimeout(() => { data = 20; console.log('비동기 코드 실행 완료'); }, 3000); console.log(data); //undefined //비동기 코드 실행 완료 이를 해결하는 방법은 대표적으로 콜백함수가 있고, 지금 ..

Destructing이란, 구조(자료 구조)를 할당하면 좌항에 맞게 알아서 분해해서 할당해주는 것을 말합니다. let arr = [1, 2, 3]; let [n1, n2, n3] = arr; console.log(n1, n2, n3); 활용 1. 객체 프로퍼티 값 참조 let person = { name: "홍길동", age : 25, introduce(){ console.log(`이름은 ${this.name}이고, 나이는 ${this.age}입니다.`); } } //var은 window에 선언하는 변수 //let(지역변수)으로 쓰면 this가 window라서 introduce의 이름, 나이값 출력X var {name, age, introduce} = person; console.log(name, age..

1. Vue.js란? 쉽게 생각하면 Frontend의 프레임워크라고 할 수 있으며, 가볍다는 것이 장점이다. 2. MVVM Pattern (Model + View + ViewModel) Model : 순수 JS 객체, Logic처리 View : 웹페이지 DOM (= html) ViewModel : Vue Vue가 view와 model을 자동으로 바인딩해서, 양방향 통신을 가능하게 한다. 풀어서 설명하자면, Vue가 DOMListener를 통해 DOM을 보고 있다가 변경사항이 생기면 JS에 반영한다. 반대로 DataBinding을 통해 JS에서 Data가 변경되면 DOM에 반영한다. 3. Vue 시작하기 1. Chrome 웹스토어에서 개발자 도구 추가 웹스토어에서 vue검색(아래 사이트) > Vue.js ..

1. Window 객체란? - 웹브라우저에서 작동하는 JS의 최상위 전역 객체 - 여러 객체와 속성, 함수들이 있음 : Frame, Location, History, Document - BOM(Browser Object Model)으로 불리기도 함 [Window 객체 속성] 속성 설명 self 현재 창 자신으로, 자신의 window객체와 같은 의미 document document 객체, 가장 많이 사용 history history 객체, 페이지 이력과 관련됨 location location 객체, 현재 페이지와 관련됨 opener 자신을 연 창을 의미하는 객체 screen 화면의 가로, 세로 크기 정보 pageXOffset 현재 나타나는 페이지의 X위치(IE 지원 X) pageYOffset 현재 나타나는..

1. JS의 함수란? - 일급(first-class) 객체 - 변수, 객체, 배열 등에 저장 가능 - 함수의 인자 혹은 반환값으로 사용 가능 - 프로그램 실행 중, 동적으로 생성 가능 2. 함수 정의 방법 방법1) 함수 선언문 function 함수이름(매개변수1, ... ){ //실행 코드 } 방법2) 함수 표현식 let 함수이름 = function(매개변수1, ... ){ //실행 코드 } 방법3) Function 생성자 함수(잘 안씀) let 함수이름 = new Function("매개변수1", "매개변수2", ..., "함수내용"); let sum = new Function("n1", "n2", "console.log(n1+n2);"); sum(1, 2);//3 [함수 호출] 함수이름(매개변수1, ...

1. 객체란? - 키(Key)와 값(Value)로 구성된 프로퍼티(Property)들의 집합 - 프로퍼티를 동적으로 추가하거나 삭제 가능 - JS의 함수는 일급객체로, 프로퍼티 값으로 함수 사용 가능 2. 객체 생성 방법 1. 객체 리터럴 - { }내에 프로퍼티를 넣어 객체 생성 let person = { name: "홍길동", age : 25, introduce : function(){ console.log(`이름은 ${this.name}이고, 나이는 ${this.age}입니다.`); } } console.log(person.name);//홍길동 console.log(person["name"]);//홍길동 person.introduce();//이름은 홍길동이고, 나이는 25입니다. 2. Object 생..

1. 주석 1. 한 줄 주석 = // code 2. 블록 주석 = /* code */ 2. 변수 동적 타입 언어로, 실행하면서 값이 할당되는 시점에 타입이 결정된다. 변수 = 형용사, 명사 사용 권장 함수 = 동사 사용 권장 낙타 표기법 ex) userName 키워드, 공백 포함X 숫자로 시작X 특수 문자는 _와 $만 허용 3. 자료형 1. 원시 타입 자료형 typeof 값 설명 숫자 number 정수 or 실수 (구분X) 문자열 string 문자, ' ' or " "로 표기 boolean boolean 참(true, 1, "-" 등) or 거짓(false, 0, null, "" 등) undefined undefined 변수가 선언되었지만, 초기화 되지 않을 경우 (개발자가 직접 할당X) null obj..

*본 블로그에서는 웹 용 JS를 말함. 일반 JS는 바닐라 JS라고 부르기도 하며, 웹에서와 다른 부분이 존재 1. JS란? - 객체 지향 - 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어 - 명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어 2. HTML에 적용 1. 외부 스크립트 적용 - html 문서 내에 //js파일 document.querySelector(".b1").textContent = "바뀜"; 2. 내부 스크립트 적용 - html내에 사이에 js 작성