✨ Front-end/자바스크립트(JS)29 [JavaScript] - 동기(synchronous)와 비동기(Asynchronous) 동기(synchronous) 동기는 데이터 요청과 결과가 한자리에서동시에 일어나는 것이다. 사용자가 데이터를 서버에 요청한다면, 그 서버가 데이터 요청에 따른 응답을 다시 사용자에게 리턴해주기 전까지 사용자는 다른 활동을 할 수 없으며 기다려야한다. 즉, 한 개의 데이터 요청에 대한 서버의 응답이 이루어질 때까지 계속 대기해야만한다. 비동기(Asynchronous) 비동기는 동시에 일어나지 않는다. 서버에 데이터를 요청한 후 요청에 따른 응답을 계속 기다리지 않아도 되며 다른 외부 활동을 수행해도 되고, 서버에게 다른 요청사항을 보내도 상관없는 것이다. https://bright-landscape.tistory.com/414 [JavaScript] - 비동기(Asynchronous) async와 awai.. 2023. 12. 27. [JavaScript] 호이스팅이란? 호이스팅이란? 코드가 실행하기 전 변수선언 / 함수선언이 해당 스코프의 최상단으로 끌어 올려진 것 같은 현상이다. 자바스크립트 엔진은 코드를 실행하기 전 실행 컨텍스트를 위한 과정에서 모든 선언(var, const, let, function, class)을 스코프에 등록한다. 코드 실행 전 이미 변수선언 / 함수선언이 저장되어 있기 때문에 선언문보다 참조 / 호출이 먼저 나와도 오류 없이 동작함. 즉, 변수와 함수선언은 호이스팅의 대상이며, 변수는 선언과 동시에 'undefined'로 초기화된다. 함수는 함수 전체가 끌어올려진다.단, 함수 표현식은 변수에 할당되는 부분만 호이스팅되며, 함수 전체는 끌어 올려지지 않음. console.log(x); // undefined var x = 5; foo(); /.. 2023. 12. 26. [JavaScript] - 비동기(Asynchronous) async와 await HTML 삽입 미리보기할 수 없는 소스 주어진 코드는 JavaScript에서 Promise 객체를 사용하는 예시이다. 이 코드는 'Gird_1' 이라는 객체에 대해 read( ) 메서드를 호출하고, 해당 메서드가 완료된 후 enableButtons( )함수를 호출한다. 이러한 코드는 비동기 작업을 처리할 때 사용된다. 그렇다면 위 코드를 동기로 바꾸려면 어떻게 할까? HTML 삽입 미리보기할 수 없는 소스 주어진 코드를 await과 async을 사용해 리팩터링하려면 함수를 async 함수로 정의하고, await 키워드를 사용해 비동기 작업을 기다려야한다. 이렇게하면 코드가 더 명확하고 간결해질 수 있다. await 키워드는 read( ) 메서드가 완료될 때까지 기다린다. 그리고 read( ) 메서드가 완.. 2023. 12. 14. [JavaScript] Json으로 Operation(연산) 기본적으로 단순 문자열을 조합하여 키 값쌍으로 데이터를 뽑아낼 수 있다. ex) 변수에 문자열을 주고, 변수와 문자열을 더해서 키 값쌍을 구할수도 있다. {[one]: value} : 객체 비구조화 할당을 사용하여 one 변수의 값에 해당하는 속성을 추출하고 그 값을 value 변수에 할당한다. one 변수의 값은 "sports"이므로, 실제로는 {[sports]: value}가 되며, 객체의 속성명 "sports"에 해당하는 값을 value에 할당한다. default 매칭되는 데이터의 변수가 일치하지 않는데, 이때 default 값을 지정해줌으로써 console에서 찍을 수 있다. default 값은 연산을 넣어서 사용할 수도 있다. arrow 함수로도 나타낼 수 있다. for Object for..... 2023. 9. 22. [JavaScript] Distructuring의 개념과 사용 방법 Distructuring이란? ~의 구조를 파괴하다. 라는 의미이며, 기존 변수 할당 방식을 마치 배열처럼 선언해 분할할당하도록 하는 기능이다. Array 분할 할당 ex1) ex2) Object 분할할당 2023. 9. 21. [JavaScript] Spread 연산자의 개념과 사용방법 Spread 연산자 스프레드 연산자는 이터러블 오브젝트와 엘리먼트를 하나씩 분리하여 전개할 때 쓰이는 연산자이다. 전개한 결과를 변수에 할당하거나 호출하는 함수의 파라미터 값으로 사용할 수 있다. 함수 파라미터 매개변수로 값을 받을 때마다 각각 하나씩 출력되며, 보다 많은 매개변수를 넣으면 아래와 같이 undefined가 뜬다. Rest파라미터 호출받는 함수 파라미터에 function(...rest)와 같이 spread 연산자로 파라미터를 작성한 형태를 rest 파라미터라고 한다. ex1) ex2) ex3) ex4) Array-Like Array는 아니지만, Array처럼 사용할 수 있는 Object를 Array-Like라고 한다. 순차적으로 작성되야하는데, 10과 zoo가 0, 1이 아니라 undefi.. 2023. 9. 21. [JavaScript] ES6 화살표 함수 arrow arrow 함수란? ES6에서 도입된 새로운 함수 표현 방식이다. 화살표 함수는 함수를 간결하고 명료하게 작성할 수 있도록 도와주며, 주로 익명 함수의 선언과 사용에 활용된다. 파라미터 매개변수 왼쪽과 같이 function(one, two) 가 (one, two) => 로 바뀌게 되는 것이다. 만약 function add(one , two) 나 function add2(one, two), function add3(one, two) 처럼 함수 명을 간단하게 없애버리고, 익명으로 대체하여 변수에 넣어주기 편하다. 파라미터가 하나일 경우 ( ) 를 생략할 수 있으며, 만약 파라미터가 없을 경우 ( ) 만 쓰고 함수 선언 가능. 객체 {key : value} 형태의 Object를 반환하기 위해서는 소괄호 ( ).. 2023. 9. 21. [JavaScript] 정규 표현식(RegExp) RegExp란? Regular Expression 의 줄임말로, 정규 표현식을 나타내는 자바스크립트의 내장 객체이다. 조건 1. 5~8자 이내여야 한다. 2. 반드시 영문(대, 소문자)로 시작해야한다. 그 외 나머지는 영문(대, 소문자) 또는 숫자로 만들 수 있다. HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 var patt = new RegExp("^[a-zA-Z][0-9a-zA-Z]{4,7}$") ^ : 문자열의 시작 지점을 나타낸다. [a-zA-Z] : 첫 번째 문자는 영어 대문자 또는 소문자로 시작해야 한다. [0-9a-zA-Z] : 나머지 문자는 숫자 또는 영어 대문자 또는 소문자로 이뤄져야한다. {4, 7} : 총 길이는 4에서 7자 사이여야 한다. $ : 문.. 2023. 9. 1. [JavaScript] JSON 객체, 배열 사용법 JSON 객체 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 JSON 배열 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 JSON(stingify, parse) HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 stringify( ) JSON 객체를 string으로 변환해 준다. parse( ) string 객체를 JSON객체로 변환해 준다. 2023. 9. 1. [JavaScript] 배열 객체와 날짜함수 배열 객체 1 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 pop( ) : 뒤에서부터 삭제 push( x ) : 맨 뒤에 숫자 x 넣기 unshift( x ) : 맨 앞에 숫자 x 넣기 shift( ) : 맨 앞에 숫자 삭제 splice( 1, 2 ) : 1번째, 2번째 삭제 x.concat( y ) : x와 y 합침 join( ) : 배열의 모든 요소를 기본 구분자 쉼표( , )로 결합한다. join( ' - ' ) : 배열의 모든 요소를 대시( - ) 로 구분하여 결합한다. every( x ) 배열 내의 모든 요소가 주어진 조건을 만족하는지 여부를 확인한다. 만약 배열내의 모든 요소가 x라면 true, 그렇지 않다면 false이다. some( x ) 배열 내의 어느 .. 2023. 9. 1. [JavaScript] String 객체 함수 HTML 삽입 미리보기할 수 없는 소스 String 객체 함수 예시 코드 HTML 삽입 미리보기할 수 없는 소스 replace() - 메서드를 사용하여 문자열 내에서 "test"를 찾아 "sample"로 바꿔 결과를 출력한다. length - 문자열의 길이를 출력한다. toUpperCase( ) - 메서드를 사용하여 문자열을 모두 대문자로 변환한 결과를 출력한다. bold - 문자열을 굵은 글씨로 변환한 결과를 출력한다. charAt( x ) - 문자열에서 인덱스가 x인 위치의 문자를 가져와 출력한다. ( 0부터 시작하는 인덱스 ) substring(x,y) - 인덱스 x 부터 y-1까지 부분 문자열을 가져와 출력한다. ( 시작 인덱스 포함, 끝 인덱스 포함 x) substring(x) - 인덱스 x부터.. 2023. 9. 1. [JavaScript] 생성자 함수 HTML 삽입 미리보기할 수 없는 소스 자바스크립트에서 생성자 함수는 객체를 생성하고 초기화하는 역할을 수행한다. 생성자 함수를 사용하면 유사한 속성과 메서드를 가진 여러 객체를 쉽게 생성할 수 있다. 생성자 함수를 사용하면 코드의 재사용성을 높이고, 객체 간의 구조를 일관성 있게 유지할 수 있다. HTML 삽입 미리보기할 수 없는 소스 1. 생성자 함수의 정의 생성자 함수는 function 키워드를 사용하여 정의된다. 함수 이름은 주로 대문자로 시작하며, 객체의 속성을 초기화하는 코드가 함수 내에 작성된다. 2. 새로운 객체 생성 생성자 함수를 사용하여 새로운 객체(인스턴스)를 생성할 때에는 new 키워드를 사용한다. new 키워드를 사용하면 생성자 함수 내부의 코드가 실행되어 객체가 초기화된다. 3... 2023. 9. 1. 이전 1 2 3 다음
