DDOstory

📟 객체자료를 저장하고 처리하는 기본 단위자바스크립트 프로그램에서 인식할 수 있는 모든 대상복합 자료형 (객체 안에 숫자, 문자열 등 여러 가지 자료형이 포함됨)이름과 값이 들어있는 하나를 프로퍼티라고 함var book = { titile: "자바스크립트", // 제목 author: "홍길동", // 저자 pages: 500, // 쪽수 price: 15000 // 가격}📟 내장 객체브라우저 안에 미리 정의되어 있는 객체웹 브라우저를 컨트롤하기 위해서 웹브라우징 요소들을 모두 하나의 객체로 만들어 놓은 것   문서 객체 모델 (DOM) : 문서 뿐만 아니라 웹 문서 안에 포함된 이미지, 링크, 택스트 필드 등을 모두 별도의 객체로 관리브라우저 객체 모델 : 웹 브라우저 정보를 객체로 ..

🎵 함수 표현식 - 익명 함수이름이 없는 함수함수 자체가 ;식 (Expression)'이기 때문에 함수를 변수에 할당하거나 다른 함수의 매개변수로 사용할 수 있음var add = function(a, b){ // 함수 선언 후 변수 add에 할당 return a + b;}////////////////////////////////////////////var sum = add(10, 20); // 익명 함수 실행 후 결과값을 변수 sum에 저장sum // 변수 sum값 확인30중간에 필요한 함수가 있을 경우에 작성하고 변수를 할당하여 사용할 수 있음🎵 함수 표현식 - 즉시 실행 함수여러 번 실행한 함수는 아닌데 어느 순간에 바로 그 자리에서 실행이 될 필요성이 있을 때 선언과 동시에 실행이 되도록 ..

🎥  함수하나의 기능을 실행하기 위해서 여러 개의 명령이 사용되었을 때 하나의 덩어리로 묶은 다음에 이름을 부여한 것여러 개의 동작을 묶어놓은 명령들 🎥  함수를 사용하면 좋은 점각 명령의 시작과 끝을 명확하게 구별할 수 있음함수에 별도의 이름을 붙이면 같은 기능이 필요할 때마다 해당 함수를 실행할 수 있음 🎥  함수 선언 (함수 정의)함수가 어떤 명령을 처리해야 할지 미리 알려주는 것function 예약어를 처리하고, { } 안에 실행할 명령 작성function addNumber( ){ var sum = 10 + 20; console.log(sum);} 🎥  함수 호출함수 이름을 사용해 함수 실행addNumber()30 🎥  함수 위치함수를 선언해 놓기만 하면, 선언한 위치와 상관없이 함..

🎞️  제어문소스가 입력될 순서가 작성된 순서에 따라서 하나씩 처리소스 실행 순서를 결정하는 명령문조건에 따라 순서 조절 => if문, if.....else문, switch문, 조건 연산자반복 횟수 조절 => for문, while문, do....while문소스 흐름에 영향을 주는 문 => continue문, break문🎞️  조건이 많을 때 switch문으로 흐름 조절switch 예약어 오른쪽에 괄호와 함께 값을 확인할 변수 지정여러 가지 조건 값은 case문 다음에 콜론을 붙여 지정하고, 해당 값일 때 실행할 명령도 콜론 다음에 나열, 둘 이상의 명령을 실행한다면 명령을 중괄호 {}로 묶음break문을 사용해서 명령을 실행한 다음에는 완전히 switch문을 빠져나오도록 소스를 작성사용자가 입력한 값..

🔌 산술 연산자사칙 연산자+ (더하기) => 두 값을 더함- (뺴기) => 앞의 값에서 뒤의 값을 뺌* (곱하기) => 두 값을 곱함/ (나누기) => 앞의 값을 뒤의 값으로 나눔나머지 연산자% (나머지) => 앞의 값을 뒤의 값으로 나눈 나머지의 값을 구함증감 연산자++ (증가) => 변수값을 1만큼 증가-- (감소) => 변수값을 1만큼 감소🔌 할당 연산자변수에 값을 할당하는 연산자사칙 연산자와 조합해서 사용할 수 있음+= : y += x / y = y + x-= : y -= x / y = y - x*= : y *= x / y = y * x/= ; y /= x / y =  y / x%= : y %= x / y = y %= x🔌 연결 연산자문자열과 문자열을 연결+ 기호 사용🔌 형변환숫자형과 문자..

💾  자료형컴퓨터가 처리하는 자료의 형 처리하려는 하는 자료가 어떤 종류인지를 이해하는 방법컴퓨터에서 어떤 자료를 입력할 때 숫자인지 문자인지 구별이 가능하지만 컴퓨팅은 그 자체를 인식할 수는 없음JavaScript의 자료형은 크게 2가지💾  기본 자료형primitive type : 값이 하나인 유형, 값을 한가지만 가질 수 있는 유형 number(숫자) => 따옴표 없이 표기한 숫자를 나타냄string(문자열) => 작은 따옴표나 큰 따옴표로 묶어 나타냄boolean(논리형) => 참과 거짓이란 두 가지 값만 가지고 있는 유형undefined => 자료형을 지정하지 않았을 때의 유형, 변수를 선언만 하고 값을 정의하지 않으면 undefined가 됨null => 값이 유효하지 않을 때의 유형💾  복..

📓React A JavaScript Library for Building User Interfaces사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리복잡한 사이트를 쉽고 빠르게 만들며 관리하기 위해 만들어진 것SPASingle Page Application하나의 페이지만 존재하는 웹사이트 또는 웹 애플리케이션을 의미하나의 HTML 틀을 만들어 놓고 사용자가 특정 페이지를 요청할 때 그 안에 해당하는 페이지의 내용을 채워서 보내주는 것React는 SPA를 쉽고 빠르게 만들 수 있도록 해주는 도구📓React 장점빠른 업데이트 & 렌더링 속도우리가 웹사이트를 탐색할 때 화면에 나타나는 내용이 바뀌는 것빠른 업데이트는 웹사이트에서 굉장히 중요한 부분 중 하나Virtual DOM 사용가상의 DOMDOM ..

🧸  속성과 값이 같으면 1개만 기입객체를 정의할 때 속성과 값이 일치하면 축약 가능const language = 'JavaScript';const josh = { language};console.log(josh);🧸  컴포넌트 등록 방식에서의 축약 방법const doComponent = { template: 'Do Component'};new Vue({ components: { doComponent }});🧸  뷰 라우터 등록 방식에서의 축약 방법const router = new VueRouter({ //...});new Vue({ router});🧸  속성에 함수를 정의할 때 function 예약어 생략객체를 정의할 때 객체의 속성에 함수를 연결하여 사용하는 경우 많음const j..

🖼️  @import 규칙CSS 파일에서 다른 CSS 파일을 추가하는 방법CSS파일의 규모가 커지면 코드를 쉽게 알아보기 위해 파일 분리link 태그의 숫자를 줄일 수 있는 방법 @import url(StyleSheetA.css);@import url(StyleSheetB.css);🖼️  @font-face 규칙웹 폰트를 생성할 때 사용하는 규칙 font-family폰트 이름을 지정src폰트 파일 지정 font-weight폰트 두께 지정font-style폰트 스타일 지정🖼️  @media규칙다양한 장치에서 HTML 문서가 적절한 형태를 갖추게 만들어주는 규칙HTML 페이지가 다양한 장치에서 실행되면서 중요하게 부각된 규칙   🖼️  반응형 웹 징치를 구분하고 장치의 크기나 비율 구분 가능width..

📲  모듈코드를 모아놓은 하나의 파일을 의미재사용성이나 유지보수성 등을 위해서 사용큰 목적 하나를 달성하기 위해서 관련된 조각 코드들이나 관련된 함수들을 모아서 하나의 모듈로 작성하나의 자바스크립트 파일모듈을 사용하기 위해 imfort 명령어를 사용하여 외부에 있는 모듈을 가지고 올 수 있음export 명령어를 사용하여 현재 모듈을 내보낼 수도 있음📲  모듈 생성 및 내보내기작성한 함수를 밖으로 내보내기 위헤서는 가장 앞에 export라는 키워드를 붙이면 가능내보낼 변수나 함수 키워드 앞에 export만 붙이면 모듈로서 내 보낼 수 있음export function greeting(){ console.log('Hello');}📲  type = "module"내보낸 greeting 함수를 자바스크..