본문 바로가기

✨ 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.