DDOstory

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

🧸  속성과 값이 같으면 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..

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

🪁  이벤트어떤 동작이나 상태 등의 사건을 발생하는 것을 의미html dom 요소들은 이벤트가 발생했을 때 웹 브라우저에서 이벤트가 발생한 걸 알아챌 수 있도록 이벤트 신호를 발생자바스크립트는 발생한 이벤트의 반응을 해서 어떤 동작을 수행할 수 있음해당 이벤트를 감지할 수 있는 EventListener를 EventHandler를 지정 = 이벤트 리스너를 등록한다🪁  addEventListener()이벤트 리스너를 등록하기 위해 메소드 사용메소드의 첫 번째 인자에는 이벤트의 종류를 문자열로 지정두 번째 인자에는 이벤트가 발생했을 때 실행시킬 EventHandler 함수를 전달 해주어야 함내부에 직접 작성하여도 됨함수를 작성하여 함수를 인자로 전달하는 방식으로 작성EventHandler함수는 이벤트가 발..

📱  DOM (Document Object Model)html이나 xml 같은 문서에 요소들을 계층적으로 표현해서 생성하고 수정하고 삭제하는 등어떤 조작이 가능하게끔 해주는 하나의 인터페이스를 의미모든 html의 요소들은 html 도움을 통해 우리가 접근할 수가 있고 조작할 수 있게 됨DOM을 배우는 이유는 html 문서에 있는 어떤 요소를 조작하거나 새로운 요소를 만들어서 html 문서에 추가하거나 기존의 요소를 삭제하는 것을 하기 위함요소 선택과 변경, 생성이라는 크게 3가지 분류로 나눠서 이야기요소를 조작하려면 우선 어떤 요소를 조작할 지 요소를 선택하는 과정 필요html 문서에 있는 요소들 중에 내가 원하는 특정 요소를 선택하기 위해서는 html 문서 객체인 Document 객체에서 제공하는 메..

🛎️  구조분해할당배열 또는객체의 구조를 분해해서 분해된 값을 개별적인 변수에 담는 표현식을 의미각각의 요소를 서로 다른 변수의 값으로 저장을 하려면 각각의 인덱스로 요소에 접근을 해서 변수의 값으로 지정배열 내부의 값을 새로운 변수에 각각 할당하고자 한다면 하나씩 변수를 선언하고  값을 할당하는 과정을 거침const arr = [1, 2, 3, 4, 5];const one = arr[0];const two = arr[1];const three = arr[2];🛎️  배열의 구조분해할당변수를 선언하고 할당하는 과정을 한 번에 해결할 수 있음대열을 옆에다가 우측에다가 작성을 해주면 오른쪽에 주어진 배열을 구조 분해해서 좌변에 위치하고 있는  변수들에 각각 할당하게 됨const arr = [1, 2, 3..

🧱  for in객체에 사용할 수 있는 반복문배열에서 사용하는 for of라는 반복문에 객체 버전객체를 순환객체에 포함되어 있는 모든 키 값을 순화하면서 출🧱  객체 축약 방법 키와 값이 똑갗은 이름을 사용할 때 뒷부분을 지우고 중복되는 이름을 한 번만 명시해서 프로퍼티를 약해서 표현const name = '겨울';const country = 'KR';const user = { name: name, country: country,};console.log(user);🧱  메소드 축약 표현객체의 프로퍼티로 선언이 된 함수를 메소드라고 함함수를 호출할 때는 객체의 프로퍼티로 접근객체 내부의 메소드를 작성을 할 때 평선이라는 키워드를 생략하고 메소드를 축약해서 표현할 수 있음const obj =..

메소드를 외우는게 아니라 이런 것들이 존재한다는 것 정도만 알아두면 됨 💣 toUpperCase(), toLowerCase()대소문자 변환하는 메소드toUpperCase()는 모든 문자를 대문자로 변경toLowerCase()는 모든 문자를 소문자로 변경const str = 'Hello World!';console.log(str.toUpperCase());console.log(str.toLocaleLowerCase());💣 trim(), trimStart(), trimEnd()문자열의 공백을 제거하는 메소드trim()은 문자열의 앞쪽과 뒤쪽에 있는 공백을 제거trimStart()는 문자열의 앞부분의 공백만 제거trimEnd()는 문자열의 뒤부분의 공백만 제거const str = ' hello ..

✏️  함수하나의 동작으로 어떤 목적을 달성하거나 원하는 결과를 도출하기 위한 코드 집합 의미한 번만 사용하고 마는 것이 아닌 반복적인 동작을 처리하기 위해 작성되고 같은 이름으로 계속하여 재사용할 수 있음✏️  함수 작성함수를 작성할 때는 펑션이라는 키워드 사용뒤에 함수의 사용할 이름을 작성을 함뒤에 괄호를 넣는데, 괄호는 함수에서 사용하려는 인자를 담는 공간을 의미인자들을 반드시 정의해야 하는 것은 아님인자가 필요하지 않은 함수라면 그냥 없이 사용해도 됨중괄호 부분에는 어떤 처리를 할지를 작성하면 됨함수를 정의할 때 작성했던 함수 이름을 작성하고 뒤에 괄호를 열어서 필요한 인자를 넣어주면됨한 번 만든 함수는 언제든지 재사용할 수 있고 어느 위치든 내가 필요한 위치에서 부를 수 있다는 장점이 있음fun..

🔍  반복문반복적으로 수행해야 하는 동작을 처리하기 위해서 사용되는 제어문자바스크립트에서 제공하는 반복문의 종류는 for문과 while문으로 나눌 수 있음🔍  forfor 키워드 사용괄호 안에 반복을 위한 어떤 조건들이 명세가 됨시작 값을 정의하고 각각을 세미콜론(;)으로 정의반복의 조건증감 값을 작성for(let i = 1; i 참이라면 반복문을 실행하고 거짓이라면 반복문을 빠져나옴🔍  시작 값을 생략하는 방법 / 증감 식을 생략하는 방법for문을 사용할 때 시작값, 조건식, 증감식 인자를 사용하는데 작성하지 않고도 생략할 수 있는 방법이 있음let i = 0;for(; i let i = 0;for(; i 🔍  break 반복문은 기본적으로 주어진 조건에 의해서 결과값이 거짓이 될 때 반복문을 ..