천천히 차근차근

datepicker html 샘플 코드 datepicker 샘플 코드 설명 datepicker 사용에 필요한 라이브러리 datepicker 는 jquery 라이브러리를 활용한다. datepicker는 jquery를 활용해서 이용할 수 있다. datepicker 는 jquery-ui와 jquery-ui 의 css 라이브러리를 활용한다. Help. jquery-ui.min.js는 datepicker 기능을 활용하기 위한 script이다. jquery-ui.css는 datepicker에 css 요소를 입혀주기 위해 사용하는 라이브러리이다. datepicker 기본 설정한 이미지 datepicker의 속성과 css를 수정해서 다양하게 활용할 수 있지만, 나는 간단히 테스트해 보기 위한 용도로 기본적으로 날짜 형..

#testModal 안에 #smallModal이 있다. #testModal이 큰 모달이고 그 안에 #smallModal이 있다. #testModal 을 닫았을 때 check 값을 true로 주고 조건을 걸어서 작업을 하려고 하는데 modal 안에 있는 작은 modal을 닫았더니 check 값이 true로 설정되어 내가 원하는 작업을 수행할 수 없었다. 방법을 찾아본 결과, 아래와 같이 해결할 수 있었다. var check = false; $('#testModal').on('hidden.bs.modal', function (event) { var target = event.target; var relatedTarget = event.relatedTarget; // 이벤트가 발생한 요소와 그의 자식 요소인지..

See the Pen Untitled by hyeryeonkim (@khr777) on CodePen. var 변수 선언은 전역 변수 또는 함수 내에서 사용하기 위해 선언하죠. let과 const 변수가 나오기 전에는 모두 var 변수를 사용했는데 var 변수가 갖는 문제가 많다보니 let과 const를 접한 이후로는 자연스럽게 let과 const를 사용하게 되더라구요. var변수는 재선언이 가능하며 값도 다시 설정할 수 있습니다. 물론 여기에서 발생하는 문제가 흔히 알고 있는 var의 문제점이죠. var mung = 3; mung = 4; console.log(mung); function method_1() { mung = '사람'; console.log(mung); //사람 var mung = '강아..

function renderFood(dish) { return ( ) }const renderFood = dish => ; 첫번째 function 정의 방법과 두번째 arrow function의 결과는 같다. 함수를 정의하는 방법은 위와 같이 두가지 방법이 있다.

// Q1. make a string out of an array { const fruits = ["apple", "banana", "orange"]; const result = fruits.join(', '); console.log(result); } // Q2. make an array out of a string { const fruits = "🍎, 🥝, 🍌, 🍒"; const result = fruits.split(','); //const result = fruits.split(',', 2); split의 개수를 정할 수도 있다. console.log(result); } // Q3. make this array look like this: [5, 4, 3..

'use strict'; // Array // 1. Declaration const arr1 = new Array(); const arr2 = [1, 2]; // 2. Index position const fruits = ['🍎', '🍌']; console.log(fruits); console.log(fruits.length); console.log(fruits[0]); console.log(fruits[1]); console.log(fruits[2]); // 출력 : undefined // 배열의 제일 마지막 index를 출력할 때는 // 아래와 같이 출력하기도 한다. console.log(fruits[fruits.length - 1]); // 3. Loopi..

'use strict'; // 객체 지향 프로그래밍 // class : template // object : instance of a class class Person { constructor(name, age) { this.name = name; this.age = age; } speak() { console.log(`${this.name} : hello !`); } } const ellie = new Person('ellie', 30); console.log(ellie.name); console.log(ellie.age); ellie.speak(); // 두번째 class User { constructor(firstName, lastName, age){ this.first..

for ( let i = 0; i

let i = 3; while ( i > 0 ) { console.log(`while: ${i}`); i--; } do { console.log(`do while : ${i}`); --i; } while ( i > 0 ); do ~while은 먼저 do 블럭 안에서 실행을 하고, 마지막에 조건을 확인한 다음에 조건에 맞다면 멈춘다. 실행을 먼저할지, 나중에 할지를 판단해서 사용하도록 한다.

let nameValue = 'success'; switch ( nameValue ) { case 'test': case 'success': console.log('Bingo'); break; case 'fail': console.log('Fail'); break; } 결과가 같은 조건이라면 case를 겹쳐서 사용할 수 있다.

interface User { age: number; name: string; } // seho라는 변수는 User interface라는 타입으로 정의가 된다. let seho: User = { age: 30, name: '세호' } console.log(seho);객체를 생성할 때, 매번 타입으로 age, name을 명시해줄 필요없이 정의해둔 interface를 타입으로 활용하여 중복을 줄일 수 있다. // 인터페이스 : 상호간의 약속 interface User { age: number; name: string; } // seho라는 변수는 User interface라는 타입으로 정의가 된다. // 변수에 인터페이스 활용 let seho: User = { age: 30, name: &#3..

function fetchTodoItems(): { id: number; title: string; done: boolean }[] { const todos = [ { id: 1, title: '안녕', done: false }, { id: 2, title: '타입', done: false }, { id: 3, title: '스크립트', done: false }, ]; return todos; } 자바스크립트 코드를 타입스크립트로 변환하면서 위의 객체 배열 타입을 의미하는 객체의 속성을 모두 명시해주는 중복 코드가 발생하게 된다. 해결 방법 2가지 Type 별칭 부여 interface 사용 Type 별칭 부여 type Todo = { id: number; tit..

1번 function showCompleted(): object[] { return todoItems.filter(function (item) { if (item.done) { return item; } }); }2번 function showCompleted(): object[] { return todoItems.filter(item => item.done); } 같은 결과값을 return한다.

State Component에서 rendering되는 데이터를 담고 유지, 관리하는 자바스크립트 객체이다. component의 rendering되는 데이터를 다루기 때문에 매우 중요하다. state 값에 따라 화면에 보여지는 output이 달라질 것이다. class component안에서 사용이 가능하고, 함수 컴포넌트를 정의했다면 state의 활용은 불가하다. state 활용 불가 예시 const App = () => { return ( ) } state 시작 우리는 App이라는 클래스를 사용할 것이기 때문에 state를 사용할 수 있다. state는 render함수 밖에서 정의가 된다. Hello World라는 문자를 직접 입력하는 것과 변수에 값을 할당해서 출력하는 것은 굉장한 차이가 있다. 결과는..

Class 자바스크립트에서는 함수처럼 활용된다. constructor 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화하는 역할을 한다. 클래스를 구성하기 위한 껍데기 // Class class Person { constructor(region_, gender_) { this.region = region_; this.gender = gender_; } greetings(val = 'an-nyeong') { console.log(val); } } let person = new Person('Korea', 'male'); console.log(person); person.greetings(); // extends 상속 class American extends Pe..

Arrow Function 표현식의 결과값을 반환하는 표현식 본문에 쓰인다. 상태 블럭 본문에 쓰인다. map의 두번째 인자로는 index를 파라미터로 받는다. //arrow function let arr = [1, 2, 3, 4, 5]; // map : for문 같은 loop, 자바스크립트에서 지원하는 배열 객체 내장 함수. // input이 파라미터로 전달되는 함수이고, outPut이 새로운 배열이다. let twice = arr.map(v=>v*2); /* 위와 같은 표현식 let twice = arr.map(function(val) { return val * 2; }); */ console.log(twice); // 상태블록 본문에 쓰인 예제 let arr2 = [1, 2, 3, 4, 5, 6];..

//방법1 let drink = { caffe: 'latte', coca: 'cola' } let newDrink = { lemon: 'tea', orange: 'juice', drink } console.log(newDrink); //방법2 let drink2 = { caffe: 'latte', coca: 'cola' } console.log('-------------------------') let newDrink2 = { lemon: 'tea', orange: 'juice', ...drink2 } console.log(newDrink2);

Spread Operator 함수를 호출할때 인수로 사용할 수도 있고 배열 안에 들어갈 수도 있고, 객체 안에 들어갈 수도 있다. spread-operator는 rest-operator와는 다르게 함수를 호출해서 사용하기 때문에 중간에 낑겨 있어도 된다. 함수 호출에서 사용하는 방법 function sum(a, b, c ) { return a + b + c; } console.log(sum(10, 10, 10)); // 배열의 합을 계산해주는 함수 활용법 let arr = [10, 20, 30]; console.log(sum.apply(null, arr)); // 배열의 합을 계산하는 spread-operator 사용법 let arr2 = [100, 200, 300]; console.log(sum(.....

Rest Operator 모든 나머지 인자를 표준 자바스크립트 배열로 대체하기 위한 문법 arguments 함수로 전달된 모든 인수를 포함하는 객체 arguments 객체가 가지고 있는다. // 방법1 function printNum(num1, num2 ) { console.log(num1, num2); } printNum(1, 2, 3, 4, 5); // 방법2 function printNum2(num1, num2 ) { console.log(arguments); } printNum2(1, 2, 3, 4, 5); // 방법3 function printNum3(num1, ...num2) { console.log(num1, num2); } // num1의 1을 제외하고 나머지 인자를 배열로 담아서 보여준다..

const val01 = 'Hello'; const val02 = 'World'; const val03 = val01 + ' ' + val02 + '!!!'; console.log(val03); // String Literal 사용법 const litVal = `${val01} ${val02}!!!!!!!`; console.log(litVal); 문자 또는 정수를 문자열로 사용하기 편리한 호호