Reload0213 devNote

⚡️ Node.js란? 노드 공식 사이트에는 노드를 다음과 같이 설명하고 있다. Node.js는 Chrome V8 JavaScript 엔진으로 빌드 된 JavaScript 런타임입니다. 즉, 노드를 통해 다양한 자바스크립트 애플리케이션을 실행할 수 있으며, 서버를 실행하는 데 제일 많이 사용된다. Node.js는 JavaScript를 서버에서도 사용할 수 있도록 만든 프로그램이다. Node.js는 V8이라는 JavaScript 엔진 위에서 동작하는 자바스크립트 런타임(환경)이다. Node.js는 서버사이트 스크립트 언어가 아니다. 프로그램(환경)이다. Node.js는 웹서버와 같이 확장성 있는 네트워크 프로그램을 제작하기 위해 만들어졌다. Node.js는 확장성이 있는 네트워크 어플리케이션 개발에 사용되..

작업을 하면서 가장 많이 구현하게 되는 기능 중 하나인 탭메뉴를 2가지 방법으로 구현해보자. 1. 탭 버튼과 탭 컨텐츠가 한 영역으로 묶여 있는 경우 전체 소스 Tab Button1 Tab Content1 Tab Button2 Tab Content2 Tab Button3 Tab Content3 위와 같이 버튼(.btn)과 창(.cont)이 인접해 있을때 하나의 li 태그로 묶여서 li태그를 제어하면 버튼과 컨텐츠 영역을 모두 제어할 수 있게 마크업을 하는 방법에선 더욱 간단하고 효율적으로 만들 수 있다. 구현 결과 및 소스 리뷰 1. .tab_menu .list의 li안에 있는 각 버튼에 addEventListener로 'click' 이벤트를 걸어준다. (for문을 통해) 2. 해당 이벤트에 preven..

animate 애니매이션을 적용시키고 싶을 때 사용 (선택객체).animate( {변경할 디자인} , 애니매이션 작동시간(ms) , 타이밍(진행 속도), 애니매이션이 완료 되었을때 동작하는 콜백 함수 ) queue - 특정 요소에서 애니매이션이 실행되는 순서로 저장되어 있는 공간 - queue에 저장된 목록에서 순번대로 애니매이션을 하니씩 꺼내어 실행하게되고, 실행된 애니매이션은 제거된다. queue() - 큐에 대기중인 함수를 반환하거나 새로운 함수를 추가한다. - 하지만 queue() 메서드를 animate() 중간에 추가하게되면 queue()메서드가 추가된 곳까지만 실행이되고 그 뒤에 대기중인 대기열은 자동 취소가 된다. - 위와 같은 상황을 방지하게 위해 dequeue() 메서드를 추가해 주면 애..

비슷비슷하지만 서로 다른 세 가지 속성 innerHTML, innerText, textContent 세가지의 차이점을 정리해보겠습니다. innerHTML vs innerText vs textContent 눈으로 쉽게 확인 할 수 있도록 예시로 만들어 보았습니다. 1. innerHTML innerHTML은 'Element'의 속성으로, 해당 Element의 HTML, XML을 읽어오거나, 설정할 수 있습니다. 위 예제에서 'innerHTML' 버튼을 클릭하면, div안에 있는 HTML 전체 내용을 가져오는 것을 확인 할 수 있습니다. 사용자가 브라우저에서 div의 내용을 Ctrl+C하여 클립보드에 복사한 내용을 가져온다고 생각하면 이해하기 쉽습니다. 2. innerText innerText는 'Elemen..

foreach foreach 반복문은 오직 " Array " 객체에서만 사용가능한 메서드입니다.(ES6부터는 Map, Set 등에서도 지원됩니다) 배열의 요소들을 반복하여 작업을 수행할 수 있습니다. foreach 구문의 인자로 callback 함수를 등록할 수 있고, 배열의 각 요소들이 반복될 때 이 callback 함수가 호출됩니다. callback 함수에서 배열 요소의 인덱스와 값에 접근할 수 있습니다. let arr1 = ['item1', 'item2', 'item3']; items.forEach(function(item) { console.log(item); }); //: item, item2, item3 for …in 반복문 for in 반복문은 객체의 속성들을 반복하여 작업을 수행할 수 있습..

Arrow 함수 - 화살표 함수는 기존에 있던 function의 익명 선언 방식을 축약한 것이다. - 화살표 함수는 익명 함수이며 사용할 경우는 두 가지 경우가 있는데 하나는 단 한번만 사용하는 콜백함수에서 사용되거나 변수에 할당하여 사용할 경우 두가지 케이스가 존재한다. - 화살표 함수를 축약하는 방식은 상황에 따라 여러가지 방법으로 축약이 가능하며 각 상황에 맞추어 축약하지 않을 경우 에러가 발생한다. 1) 화살표 함수(Arrow function)으로 변환방법 및 법칙 1-0. 기본형 const funcA = function(one, two){ return one + two; } console.log(funcA(2,3)); 1-1. " function " 을 생략하고 " => " 로 간단하게 대체가능..

This 태그 - this 키워드는 자기 자신을 가리키고자 할 때 쓰이는 키워드 - 자기 자신이라 함은 현재 위치에서 바인딩 즉 연결되는 바로 위 상위 객체를 의미한다. - 하지만 this의 위치가 어디냐에 따라 바인딩 되는 곳이 달라지므로 this의 원리를 이해하고 쓰기보단 그냥 어디에 this가 쓰였을 때 여기를 가리킨다 라는 공식처럼 외우는 것이 편하다. (고 하여 다른 게시글이나 자료를 통해 이해해보려고도 하였으나 역시 쉽지 않아 수학에서도 종종 이런 경우가 있었기 에 그 방법으로 한번 해보려합니다.) 대표적인 this 위치에 대한 바인딩되는 객체는 다음 아래와 같다. 1. 아무것도 없는 단순 로직 상에서의 this는 최상위 객체인 window를 가르킨다. 2. 함수(function) 2-1. 일..

1. 비교 연산자 " > ,

자료형(Data Type) 기본형(Primitive Type) 참조형 (Reference Type) Number String Boolean Null, Undifind Object 1. 기본형(Primitive Type) let x = 10; let y = x; console.log(x); // 10이 출력 console.log(y); // 10이 출력 y = 20; console.log(x); // 10이 출력 console.log(y); // 20이 출력 - JavaScript에서 어떤 값을 핸들링 할때 기본형 타입은 변수에 값을 할당해서 사용 한다. 즉 변수 이름을 가진 그릇에 그 값을 넣어준다고 할 수 있다. 위 코드의 첫 번째 줄에서 변수 x에 10이라는 값을 할당하였기 때문에, x라는 그릇에 숫..

1. 문자열에 사용 ​ 2. 문자열을 정렬할 때 비교할 문자열이 비교대상이 될 문자열의 앞에 오는지, 뒤에 오는지 혹은 같은 순서인지를알려주는 숫자를 return한다. ​ 사용 예시- F12 를 눌러 Console창에서 결과 값을 확인