본문 바로가기

Language/JavaScript20

[함수] async, await을 통한 비동기처리 async, await함수 단위에서 비동기로직을 처리하는 문법에 대해 알아본다. 함수와 async await비동기로직을 동기프로그래밍처럼 작성할 수 있게 한다프로미스(Promise)를 기반으로 확장된 문법이다.>> 프로미스는 객체로 존재하지만 async await는 함수에 적용되는 개념>> then 체이닝보다 가독성이 좋다  async 키워드함수 선언 앞에 붙여서 사용한다기능- 함수 내부에서 await를 사용할 수 있게 한다- 항상 Promise 객체를 반환시키도록 한다  >> 비동기 이후 작업을 핸들러로 처리할 수 있다Promise 반환값- 명시적인 return 값에 이행됨 상태의 프로미스가 감싸진다  >> return 하지 않으면 undefined가 담긴다- 함수 내부에서 예외가 발생하면 거부됨 상태.. 2023. 6. 9.
[내장객체] Promise를 사용한 비동기 작업 처리 비동기 처리, Promise 포스팅 순서비동기 처리의 필요성Promise의 세가지 상태 - Pending(대기중) - Fulfilled(이행됨) - Rejected(거부됨)Promise 객체 생성 - 생성자 사용 - 메소드 사용핸들러메소드 - then - catch - finallyPromise.all : 병렬로 처리하기Promise.race : 가장 먼저 처리된 프로미스 가져오기 비동기 처리의 필요성자바스크립트의 동기/비동기 특성- 자바스크립트는 기본적으로 단일스레드에서 동기적으로 작동한다- 단, 일부 시간이 소요되는 API들은 비동기로 작동한다(setTimeout, $.get (jQuery), fetch 등)  >> 이때 동기적으로 코드를 짜면 원하지 않는 결과가 나온다  >> 콜백함수 등으로 이 비.. 2023. 6. 8.
[문법] 유용한 ES6 : 모듈시스템, 템플릿 리터럴 유용한 문법들ES6에서 추가된 기타 문법들을 알아본다포스팅순서모듈시스템템플릿 리터럴모듈시스템ESM(ES Modules) 문법으로 불린다모듈 내보내기- export 키워드를 객체(변수, 함수, 클래스) 선언 앞에 붙여서 내보낸다// 변수 내보내기export const myVariable = 10;// 함수 내보내기export function myFunction() { return "Hello, world!";}// 클래스 내보내기export class MyClass { constructor(name) { this.name = name; } greet() { console.log(`Hello, ${this.name}!`); }}모듈 가져오기- import .. 2023. 5. 30.
[문법] this 키워드 사용법 this 키워드 this 란?현재 실행 중인 코드의 실행 문맥(execution context)에 따라 다른 객체를 참조하는 키워드this는 호출시점에서 사용된 객체로 바인딩된다.반적인 전역 컨텍스트에서 this는 전역객체를 참조한다* 전역객체 : 브라우저 환경에서는 window 객체, Node.js에서는 global 객체** 단, 엄격 모드('strict mode')에서는 this가 undefined로 설정console.log(this); // window(브라우저) 또는 global(Node.js)  함수에서의 this 바인딩함수 컨텍스트1. 일반 함수   >> 호출시점에서 사용된 객체를 전역객체로 본다       (this == 전역 객체)2. 생성자 함수      >> 새로 생성되는 객체를 참조/.. 2023. 5. 22.
[연산자] ||, &&, ?, ??, !, !!, ==, === 연산자비교연산자와 논리 연산자에 대해 알아본다. 비교연산자값을 비교하는 연산자 2종류 ==  : 동등 연산자값이 동일한지 반환자바스크립트의 자동 타입 변환으로 인해 데이터 유형이 달라도 동등하다고 판단할 수 있다.타입변환 규칙1. 동등한 타입인 경우 : 값 자체를 비교2. undefined와 null: 동등하다고 간주3. 문자열과 숫자 비교: 문자열이 숫자로 변환될 수 있는 경우, 변환된 숫자를 사용하여 비교를 수행4. 불린과 다른 타입 비교: 불린 값이 1 또는 0으로 변환되어 비교5. 객체와 비교: 객체와 비교할 때는 참조 값을 비교(동일한 메모리 주소를 참조하고 있을 경우에만 동등하다고 판단)5 == 5 // true5 == '5' // truetrue == 1 // t.. 2023. 5. 22.
[함수] ES6 : 매개변수 강화, 화살표 함수 ES6 함수의 기능ES6에서 추가된 문법 중 함수와 관련된 것들을 톺아본다.함수 기본 특성을 확인하고자 하면 42번 포스팅을 확인한다포스팅순서매개변수 활용- 기본값 지정- 나머지 매개변수- 명명된 매개변수화살표함수정적 this 바인딩 활용 예 매개변수 활용기본값 지정- 매개변수에 기본값을 줄 수 있게 되었다.- 기본값에 함수를 넣을 수 있다.  >> 해당 함수는 기본값이 사용될때에만 발동된다function required() { throw new Error('no parameter')}function printLog(a=required()){ console.log({a}); // 단축 속성명을 이용한 출력}print(10)} // { a: 10 }printLog(); // 에러발생 : no paramet.. 2023. 5. 17.
[문법] ES6 사용성 개선 : 객체, 배열, 함수 등 데이터 구조 사용성 개선ES6에서 추가된 문법을 통해 객체와 배열의 사용성이 많이 개선되었다관련된 문법들을 알아본다 포스팅순서손쉽게 선언하기- 단축 속성명- 단축 메소드명- 계산된 속성명- 트레일링 콤마속성값 손쉽게 다루기- 전개 연산자- 비구조화 할당- 나머지 연산자손쉽게 선언하기객체 리터럴 {} 로 객체(Object)를 선언할 때, 또는 클래스 정의할 때사용할 수 있는 문법들에 대해 알아본다단축 속성명shorthand property name새로 만드려는 객체의 속성값 일부가 이미 변수로 존재하면,변수를 명시하는것만으로도 속성(키-값 쌍)을 추가할 수 있다>> 이때 속성명(키)은 변수명이 된다이를 변수 콘솔 출력에 활용하면 코드가 단축된다const name = "nana"conat age = 17//.. 2023. 5. 16.
[정규표현식] 문자열 패턴화 / Regular Expression 정규표현식 Regular Expression정규식은 특정한 규칙을 가진 문자열의 집합을 표현하는데 사용하는 형식언어이다.많은 프로그래밍 언어, 텍스트 처리 프로그램 등에서 정규표현식 기능을 제공한다.자바스크립트는 문법에 내장되어 있는 형태로 정규식을 지원한다.정규표현식Regular Expression(REGEX / REGEXP)특정 패턴을 가진 문자열을 찾거나 / 찾아서 변경(치환) 할때 사용하는 형식언어정규표현식을 이용하면 문자열에 대한 특정패턴 조건검사시 복잡한 조건을 제시할 필요없이 간단해진다.객체생성 방법 ↓ //방법1) 자바스크립트에서 제공하는 RegExp 객체로 정규식 객체 만들기 const regExp = new RegExp(" 패턴입력 "); //방법2) 정규표현식 리터럴 / /를 이용해서.. 2022. 12. 25.
[브라우저API] Event 객체 기본 이벤트 Event자바스크립트에서의 이벤트의 특성과 활용법을 알아보자.이벤트 모델 종류고전 이벤트 모델 (기본)- 요소객체를 가져와 해당요소의 이벤트 속성(on키워드)에 접근 한 후 이벤트 핸들러를 연결- 이벤트 속성에 null을 대입함으로써 이벤트 속성을 없앨 수 있다.- 요소 내부에 직접적을 기술하지 않는다.고전방법1고전방법2 인라인 이벤트 모델- 요소 내부에 직접적으로 이벤트 속성을 제시하고 실행내용을 정의- 내용이 길어지면 함수호출의 방식을 사용한다.인라인방법1인라인방법2 표준 이벤트 모델- W3C에서 공식적으로 지정한 방식- [표현법] 요소객체.addEventListener("이벤트명", 이벤트핸들러);- 이벤트 속성에서 on을 빼면 이벤트명이 된다.- 요소 내부에 직접적으로 기술하지 않는다.- .. 2022. 12. 22.
[브라우저API] Window 객체 / DOM, BOM Window 객체자바스크립트에서의 최상위 객체이며, 크게 BOM과 DOM으로 나뉜다. Window 객체란?1) 브라우저 안의 모든 요소들이 소속된 객체로, 최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 '전역객체'라고도 부른다.- 작성하는 코드 대부분은 window 객체의 프로퍼티가 된다.- let과 const 키워드는 블록스코프로 window 객체 내부의 블록에서 선언된 것으로 간주되어 전역객체의 프로퍼티로 활용되기 어렵다.2) JSC(JavaScript core), BOM(Browser Object Model), DOM(Document Object Model)가 소속되어있는 객체이다.   DOM 객체DOM(Document Object Model)텍스트 파일로 만들어져 있는 웹 문서를 브라우저에.. 2022. 12. 21.
[내장객체] Date 객체 내장 객체 Date날짜를 저장할 수 있고, 날짜와 관련된 메서드를 제공해주는 JavaScript의 내장객체 Date에 대해 알아보자.객체 생성하기new Date()  : - 현재 날짜와 시간이 저장된 Date 객체 반환- 출력 형태 : Sun Dec 25 2022 08:44:05 GMT+0900 (Korean Standard Time)new Date(연, 월-1, 일)  : - 월은 인덱스 개념이기 때문에 원하는 월에서 -1 해야 원하는 월이 나온다.- 시 분 초 는 모두 00 으로 출력된다.new Date(연, 월-1, 일, 시, 분, 초)  :- 시, 분, 초 까지 지정한다.new Date(연, 월-1, 일, 시, 분, 초, ms)  :- 밀리세컨즈 단위를 추가하여 생성한다.(1s = 1000ms)-.. 2022. 12. 21.
[내장객체] Object를 사용하여 키-값 자료형 구현 객체자바스크립트에서의 객체의 개념을 정리하고,자료형으로써의 객체(Object)를 톺아본다 중의적 의미의 객체(object 또는 Object)보편적 의미의 객체, object- 데이터와 해당 데이터를 조작하는 동작을 함께 포함하는 데이터 구조- JS는 객체기반의 언어로 원시값을 제외한 거의 모든것은 객체이다.   ex) Array, 함수, Object, Date, Math, 정규표현식, new키워드로 정의된 String, Number, Boolean  cf. 원시값 : 어떤 특성 또는 메소드가 없는 값.       (string, number, boolean, null, undefined 등)키-값 자료형의 내장객체, Object- Key / Value Pair를 저장할 수 있는 구조- 자바의 HashMa.. 2022. 12. 21.
[함수] 기본 사용법 : 선언법, 매개변수 함수자바스크립트에서의 함수의 특성과 활용법을 알아보자포스팅 순서선언 방식에 따른 분류- 함수선언- 함수 표현식- 화살표 함수- 즉시실행 함수명명에 따른 차이- 기명함수- 익명함수매개변수 사용법사용예 : 랜던값 함수사용예 : 함수를 리턴하는 경우 선언 방식에 따른 분류함수 선언 (Function Declaration)- function 키워드를 사용하여 정의한 경우- 명명에 따라 기명함수와 익명함수로 나뉜다(특성 후술)function greet(name) { return `Hello, ${name}!`;}  함수 표현식 (Fuction Expression)- 함수가 변수에 할당되는 경우- 익명함수와 기명함수 모두 할당 가능const greet = function(name) { return `He.. 2022. 12. 20.
[내장객체] Array를 사용하여 배열 자료형 구현 배열자바스크립트에서의 배열의 특성과 활용법을 알아보자 자바스크립트의 배열, Array내장객체 Array를 사용하여 순서가 있는 요소들의 집합, 배열을 표현할 수 있다특징1. 다양한 데이터 유형을 포함할 수 있다2. 크기를 지정하여 생성할 수 있으나 언제든지 동적으로 조정할 수 있다3. 객체(Object)의 일종으로 점 접근법으로 유용한 속성들(메소드 포함)에 접근할 수 있다  생성하기배열리터럴 사용- 대괄호 [ ] 를 이용하여 생성하고, 쉼표(,)로 구분하여 요소들을 지정한다let arr1 = [];let arr2 = ['java', 'oracle'];생성자함수 사용- new 키워드를 사용해서 Array의 생성자 함수를 호출한다- 매개변수로 숫자를 보내면 해당 크기의 배열이 생성되고, 요소들을 보내면 해.. 2022. 12. 20.
[자료형] string 문자열 활용하기 / 문자 숫자 형변환 문자열 관련 메소드문자열 처리 메소드문자열 . toUpperCase()  :  - 영문자를 대문자로 전환문자열 . toLowerCase()  :  - 영문자를 소문자로 전환문자열 . charAt( i )  : - 문자열의 i번째 글자 반환문자열 . indexOf("A", i )  :  -  i번째 인덱스에서부터 첫 A의 위치 인덱스 반환- 두번째 매개변수 생략가능- A가 존재하지 않을 경우 -1을 반환한다.문자열 . lastIndexOf("A")  :  - 뒤에서부터 첫 A의 위치 인덱스 반환문자열 . substring( i , j )  : - i번째 인덱스에서부터 j번째 인덱스 전까지의 문자열 반환- 두번째 매개변수 생략 가능 문자열 . split( " 기호 " )  :  - 기호를 기준으로 문자열을 .. 2022. 12. 18.
[브라우저API] HTML 요소를 JavaScript 객체화하기 HTML 요소를 JavaScript 객체로 전환하기요소를 객체로 전환한 후 ' . 속성명 ' 의 방식으로 접근해서 값을 얻거나 대입할 수 있다.속성명은 자바스크립트에서 사용하는 명칭을 써야 한다(console.dir () 메소드로 알아낼 수 있음.).   document . getElementById("아이디값");아이디로 요소를 가져오는 방법 (Element 단수형 메소드명)단 1개만을 가져온다. document . getElementsByTagName("태그값");해당 HTML 태그를 갖고있는 요소들을 반환한다. (Element's' 복수형 메소드명)다수가 반환 될 수 있어 배열로 리턴한다. document . getElementsByName("name값");HTML의 name 속성값을 갖고있는 요소.. 2022. 12. 18.
[데이터 입출력] window 객체 / document 객체 데이터 입출력을 위한 객체자바스크립트 내장객체window- 브라우저 그 자체를 의미하며, 브라우저 안의 모든 요소들이 소속된다.- 브라우저 창이 열릴 때 마다 하나씩 만들어진다.- 브라우저 창을 제어하는 다양한 메서드를 제공하며,  window.  으로 접근한다(생략가능).- 최상위에 있기 때문에 어디서든 접근이 가능하다고 해서 전역객체라고도 부른다.- Window객체 더 알아보기document- 웹페이지 그 자체를 의미- 웹페이지에 존재하는 HTML요소에 접근하고자 할때는 .document로 시작해야한다. - HTML요소와 관련된 작업을 도와주는 다양한 메소드를 제공- document(DOM) 객체 더 알아보기 데이터 출력 방법화면에 데이터를 보여주고자 할 때 alert ( ... );풀명칭 windo.. 2022. 12. 17.
[문법] 제어문 / 자주 쓰이는 함수 문법 특성의도한 대로 적용되지 않을 때는 브라우저의 콘솔창에서 오류를 확인해 볼 수 있다.복합연산자 +=, ++, -- 등 사용 가능하다동등비교연산자 == 는 자료형과 무관하게 실제 값만 일치해도 true를 반환한다.실제 값과 자료형까지 일치한지 비교하려면 일치연산자 === 를 사용한다.문자열도 ASCII 값을 이용하여 대소비교가 가능하다.0번인덱스 부터 비교를 시작해서 1번, 2번으로 넘어가며, 길이가 짧아서 같은 인덱스에 문자가 없다면 더 작은 문자열로 계산된다.요소를 콘솔 혹은 화면에 출력할때 변수명만 입력해도 자동으로 .toString() 가 붙는다.해당 요소에 toString() 메소드가 정의되지 않았을 경우 자료형에 관한 내용이 출력된다.  자주쓰이는 함수console.log( 매개변수 )lo.. 2022. 12. 17.
[변수] 스코프와 호이스팅 / var, let, const 변수JavaScript에서 변수가 갖는 특성에 대해 톺아본다 변수 특징변수에 대입되는 값(리터럴)에 따라서 자동으로 자료형이 결정되며, 재할당 시 다른 타입의 자료형을 담을 수 있다.자료형 종류* typeof 키워드를 사용했을 때 출력되는 값을 기준으로 알아본다1. 원시타입   - string : " " 또는 ' '로 입력한다   - number : 따옴표로 감싸지 않고 바로 입력한다    - boolean : true/ false로 입력한다   - undefined : 선언만 하고 초기화를 하지 않은 상태이다   - symbol : 내장함수 Symbol('값')을 사용해서 만든다(ES6) 2. 객체타입   - object : 객체, 배열, HTML 객체등이 해당된다          배열은 [ 값, .... 2022. 12. 16.
[개요] 스크립트 언어이자 인터프리터 Java Script 개요웹은 크게 3가지 요소로 이루어진다. 1. HTML : 웹 문서의 큰 틀 (뼈대) 2. CSS : 스타일 부여 (색상, 디자인, 간격, 배치 등등) 3. JavaScript : 마우스, 키보드를 통한 이벤트가 발생했을 때 실행해야되는 동적인 효과  JavaScript탄생넷스케이프사가 정적인 HTML을 동적으로 표현하기 위해 만든 경량의 프로그래밍 언어. 단기간에 개발되었으며, 자유도는 높으나 완성도는 낮다자바와는 연관성이 없으며 자바스크립트라는 명칭은 대세에 편승하려는 마케팅적 전략 스크립트 언어로써의 JavaScript스크립트 언어 : 연극용어에서 따온 말로, script는 배우의 대사를 중점으로 배우의 표정, 등장과 퇴장, 무대장치를 중심으로 지시해놓은 내용을 말한다. 프로그.. 2022. 12. 15.

티스토리툴바