'📃 Front-End' 카테고리의 글 목록 (2 Page)

Async / Await

2022.11.17

async/await 를 사용하면 비동기 코드를 작성할 때 비교적 쉽고 명확하게 코드를 작성할 수 있습니다. promise 사용 하기 전 (문제점) function fetchUser(){ // 데이터를 받아오는데 10초 정도 걸린다고 가정 return 'hyunho'; } const user = fetchUser() console.log(user) 위에처럼 시간이 걸리는 코드를 비동기적으로 처리를 하지 않으면, 자바스크립트 엔진은 동기적으로 코드를 수행하기 때문에, 즉 한줄 한줄씩 한줄이 끝나야 그 다음 줄로 넘어 갑니다. fetchUser() 함수가 선언된 곳으로 가서 함수의 코드 블록을 실행하는데 데이터를 받아오는데 10초가 걸리니까 10초동안 머무르고 있고, 그리고 나서야 'hyunho' 가 리턴이..

📃 Front-End/JavaScript

Promise

2022.11.17

자바스크립트에서 제공하는 비동기를 간편하게 처리 할 수 있도록 도와주는 객체 정해진 장시간의 기능을 수행하고 나서 정상적으로 기능이 수행이 되어지면 성공의 메세지와 함께 처리된 결과 값을 전달 합니다. 만약, 기능을 수행하다가 예상치 못한 문제가 발생하면 error 를 전달 합니다. 사용하는 이유 네트워크에서 데이터를 받아오거나 큰 데이터를 읽어오는 과정은 시간이 걸리는데 동기적으로 처리하면 앞선 일들을 처리하는 동안 다음 라인의 코드가 실행되지 않기 때문에 시간이 걸리는 일 들은 promise 를 통해 비동기적으로 사용하는 것이 좋습니다. promise 의 상태 promise는 state와 result 2가지 숨김 프로퍼티를 갖고 있습니다. result는 resolve(value)가 호출되면 value..

📃 Front-End/JavaScript

AJAX

2022.11.17

Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자 AJAX 란 자바스크립트를 통해서 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능 입니다. Ajax 를 사용하면 웹 애플리케이션은 기존 페이지의 화면 및 동작을 방해하지 않으면서 백그라운드에서 비동기적으로 서버로 데이터를 보내고 서버에서 데이터를 받아올 수 있습니다 XMLHttpRequest API는 비동기 통신에 자주 사용되며, 최근에는 fetch API가 자주 사용됩니다. 비동기 통신 요청을 보낸 후 응답과는 상관없이 동작하는 방식 웹페이지를 리로드 하지 않고도 통신이 가능한 구조 AJAX 의 장점 상호작용성이 좋아집니다. 서버의 새로운 컨텐츠를 전체 페이지를 다시로드할 필요 없이 동..

📃 Front-End/JavaScript

클로저(closure)

2022.11.16

내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 가리킵니다. 어휘적 환경(Lexical Environment) // (1) // one : 초기화 X, addOne : function let one; // (2) one : undefined, addOne : function one = 1; // (3) one : 1, addOne : function -> 전역 Lexical function addOne(num){ console.log(one + num); } addOne(5); // (4) 함수가 실행되는 순간 새로운 Lexical 환경이 만들어집니다. num : 5 (1) : 코드가 실행되면 스크립트 내에서 선언한 변수들이 Lexical 환경 에 올라갑니다. (4) 에서 함수가 넘겨받..

📃 Front-End/JavaScript

class

2022.11.16

ES6 부터 추가 되었습니다. 정의 함수의 한 종류이며, 객체를 생성하기 위한 템플릿(틀) 입니다. 클래스 안에는 속성(field), 행동(method) 이 있습니다. class 는 객체의 데이터 와 이를 조작하는 메서드 를 하나로 추상화 합니다. 문법 class Person{ constructor(name, age){ // 속성 this.name = name; // 객체를 초기화 하기 위한 값 this.age = age; } // 행동 speak(){ console.log(`${this.name} : hello`) } } // object , 새로운 object를 만들 때 new 키워드를 사용 합니다. const hyunho = new Person('hyunho', 26) console.log(hyun..

📃 Front-End/JavaScript

생성자 함수

2022.11.16

필요한 재료들을 넣어주고 찍어내는 붕어빵 판과 같습니다. 문법 function User(name, age){ // 첫 글자는 대문자로 this.name = name; this.age = age; } let user1 = new User("Mike", 30); let user2 = new User("Jan", 17); let user3 = new User("Tom", 20); new 연산자를 사용하여 호출 사용하는 이유 객체 리터럴 { ... } 을 사용하면 객체를 쉽게 만들 수 있습니다. 하지만 일일이 객체를 만드는 것보다 훨씬 빠르고 일관성 있게 만들 수 있습니다. 동작 원리 function User(name, age){ // this = {}; -> 빈 객체가 임시적으로 만들어짐 // 새로운 프로퍼티..

📃 Front-End/JavaScript

Event Loop

2022.11.16

먼저, 자바스크립트 엔진에 대해 알아야 합니다. 자바스크립트 엔진 자바스크립트 엔진 안에는 Memory Heap 과 Call Stack 로 나뉘어 있습니다. Memory Heap 데이터를 만들 때, 즉 변수를 선언해서 오브젝트를 할당하거나 문자 또는 숫자를 할당하게 되면 전부 메모리 힙에 저장 됩니다. 메모리 할당이 일어나는 곳 Call Stack 함수를 실행하는 순서에 따라서 차곡차곡 쌓아놓는 것 코드 실행에 따라 호출 스택이 쌓이는 곳 LIFO(Last In First Out) : 제일 나중에 들어온 것이 제일 처음으로 나갑니다. 런타임 환경 자바스크립트 언어 자체에는 멀티 스레딩이 없습니다. Process 운영체제 위에서 연속적으로 실행되고 있는 프로그램 독립적으로 메모리에서 실행 합니다. 각각의 ..

📃 Front-End/JavaScript

이벤트 버블링, 이벤트 캡처링, 이벤트 위임

2022.11.16

브라우저는 이벤트가 발생하면, capturing -> bubbling 순으로 이벤트를 감지 합니다. 이벤트 버블링 (Event Bubbling) 이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 더 상위의 요소에게 전달되어 가는 특성을 의미합니다. 상위의 화면 요소란? HTML 요소는 기본적으로 트리 구조를 갖습니다.여기서는 트리 구조상으로 한 단계 위에 있는 요소를 상위 요소라고 하며 body 태그를 최상위 요소라고 부르겠습니다. const one = document.querySelector(".one"); const two = document.querySelector(".two"); const three = document.querySelector(".three"); one.ad..

티스토리툴바