월드스토리의 코딩 나라

Node.js구글 크롬의 자바스크립트 엔진( V8 Engine ) 에 기반해 만들어진 JavaScript 런타임이벤트 기반, 비동기 I/O 모델을 사용해 가볍고 효율적가장 기본적으로 사용하는 npm 패키지는 세계에서 가장 큰 오픈 소스 라이브러리  런타임이란?프로그래밍 언어가 동작하는 환경을 통칭하는 단어웹 브라우저에서가 아니라 서버단에서 javascript를 사용하기 위하여 개발된 언어가 node js  Node js를 다운로드 하는 방법 Node.js — Node.js® 다운로드 Node.js — Node.js® 다운로드Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org Node.js 설치 - 버전확인  ..

setTimeOut(함수, 지연시간) 설정한 delay 시간이 지난 뒤, 함수를 실행함 비동기 처리란?☆특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성☆서버로 데이터를 요청 시 서버가 언제 응답을 줄 지 모르는데 마냥 다른 코드를 실행 안하고 기다릴 수는 없음☆ 비동기 처리가 아니고 동기처리라면 코드 실행하고 기다리고, 실행하고 기다리고하면 수십분이 소요될 수 있음  비동기로만 처리 시 나타날 수 있는 문제점function goMart() { console.log("마트에 가서 어떤 음료를 살지 고민한다."); } function pickDrink() { setTimeout(function () { console.log("고민 끝"); ..

클래스란?• ES6 부터 등장한 오브젝트(객체)를 만드는 방법• 오브젝트(객체)를 만들 수 있는 ‘틀’(template)• 정해진 틀로 같은 규격의 오브젝트를 여러 개 만들 수 있으며, 재사용에 유리•  new 키워드를 이용해서 미리 만들어둔 클래스 형태의 오브젝트를 만들 수 있음 (instance 화)•  Date, Math 객체도 동일한 의미의 클래스   클래스의 사용 방법class Cat { constructor(name, age) { this.name = name; this.age = age; } mew() { console.log("야옹"); } eat() { console.log("먹이를 먹습니다."); } } let cat1 = new cat("나비", 1..

spread 연산자(.. : 전개 구문)• 반복 가능한객체에 사용하는 문법→배열, 유사 배열, 문자열 등에 사용 가능• 객체의 요소에 접근해서 요소들을 하나씩 분리해서 전개요소에 접근해서 반환• 연산자 ... 사용• 사용법 : [...arr, newarr] rest 파라미터const values = [10,20,30];function get(a, ...rest) { console.log(rest);}get(...values); 들어온 배열 값 중 하나를 제외한 나머지를 rest라는 배열로 설정함  spread vs rest• spread 파라미터는 호출시 함수의 파라미터에 사용• rest 파라미터는 호출 받는 함수의 파라미터에 사용 (선언 부분). 호출하는 함수의 파라미터 순서에 맞춰 값 설정 후 남은 ..

구조분해 할당 ( Destructuring assignment )배열이나 객체의 속성을 해체해 그 값을 개별변수에 담는 것 JavaScript에서 많이 쓰이는 자료구조인 배열과 객체를 편하게 사용하기 위함 즉, 객체나 배열에 저장된 데이터의 일부를 가져오고 싶을 때 주로 사용  배열의 구조 분해 할당const arr5 = ['tomato', 'kiwi', 'banana']; const [tomato, kiwi, banana, orange = "orange"] = arr5; console.log(tomato); let x=1, y=3; [x, y] = [y, x] console.log(x,y); // x = 3, y = 1 arr[0], arr[1] 처럼 접근하는 것이 아닌 각각의 배열 요소를 변수의..

요소의 탐색jQuery 쓰는 법의미예시• $( 선택자 ).parent().함수()• 바로 위에 존재하는 하나의 부모 요소 선택 • $( 선택자 ).parents().함수()• 바로 위 부모뿐만 아니라 부모의 부모, 모든 조상을 선택 • $( 선택자 ).next().함수()• 선택된 요소 바로 다음에 위치한 형제 요소 선택 • $( 선택자 ).prev().함수()• 선택된 요소 바로 이전에 위치한 형제 요소 선택 • $( 선택자 ).children().함수()• 선택된 요소의 자식 요소 모두 선택  클래스 조작하기jQuery 쓰는 법의미예시• $( 선택자 ).addClass(“클래스명”)• 선택된 요소에 클래스 추가• $("h1").addClass(“.c1”)• $( 선택자 ).removeClass(“클래..

jQuery자바스크립트 언어를 간편하게 사용할 수 있도록 단순화시킨 오픈 소스 기반의 라이브러리 jQuery의 장점• 주요 웹 브라우저의 구버전을 포함한 대부분의 브라우저에서 지원 가능 • HTML DOM을 손쉽게 조작 가능하며, CSS 스타일도 간단히 적용 가능 • 애니메이션 효과나 대화형 처리를 간단하게 적용 • 같은 동작을 하더라도 더욱 짧게 구현 가능 • 오픈 라이선스를 적용해 누구나 자유롭게 이용 가능 jQuery의 기초 표현$(선택자).동작함수(); $ 는 jQuery() 함수의 축약 형태로, 식별자 역할 jQuery의 메소드  - 기본jQuery 쓰는 법의미예시$( 선택자 ).val();value 값을 가져올 수 있다.var value = $("input").val();$(선택자).val(“..

DOM(Document Object Model) • HTML 문서 요소의 집합!• HTML 문서는 각각의 node 와 object 의 집합으로 문서를 표현• 따라서 각각 node 또는 object 에 접근하여 문서 구조 / 스타일 / 내용 등을 변경 할 수 있도록 하는 것 Document웹 페이지에 존재하는 HTML 요소에 접근하여 행동을 하고자 할 때 사용하는 객체 Document 요소 선택하는 법 태그 용어의미• document.getElementById(아이디 속성값)태그의 Id 속성값이 특정값인 녀석을 가져온다.• document.getElementsByClassName(클래스 속성값)태그의 클래스 속성값이 특정값인 태그를 선택한다.• document.getElementsByTagName(태그 이..

Javascript 표준 객체자바스크립트가 기본적으로 가지고 있는 도구라고 보면 된다.Date 객체매 순간 바꾸는 시간과 날짜에 관한 정보를 얻기 위해 사용하는 객체초기화 방법new Date(); //1970년1월1일을 default로 가지는 객체 반환new Date(밀리초); //1970년1월1일부터 특정 시간만큼 지난 날짜 반환new Date(년, 월, 일, 시, 분, 초); //특정 시간으로 초기화하여 반환 Date 객체를 변수로 사용 가능한 함수 함수의 표현함수의 의미 Date.now()현재 년도, 월, 일, 시간까지 반환 date.getFullYear() date  값이 가지는 년도 반환date.getMonth()0~11사이의 숫자로 월을 표시(0 = 1월)date.getDate()1~31사이의..

기본 for문 let numbers= [1, 2, 3, 4, 5, 6]; let fruits= ["사과", "바나나", "수박", "포도", "파인애플"]; for(let i= 0; i for of 반복문 let numbers= [1, 2, 3, 4, 5, 6]; let fruits= ["사과", "바나나", "수박", "포도", "파인애플"]; let numbersLength= numbers.length; let fruitsLength= fruits.length; for(let number of numbers) { console.log(number); } for(letfruitoffruits) { console.log(fruit); } forEachlet numbers = [1, 2, 3, 4, 5, ..