Ella 프론트엔드일지

0. 변수 - 변수(Variable)는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. - 변수는 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 가리키는 상징적인 이름이다. - 프로그래밍 언어의 컴파일러 또는 인터프리터에 의해 값이 저장된 메모리 공간의 주소로 치환되어 실행된다. 따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없고 변수를 통해 안전하게 값에 접근할 수 있다. - 식별자(변수명) : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 - 변수 값 : 변수에 저장된 값 - 할당 : 변수에 값을 저장 - 참조 : 변수에 저장된 값을 읽어들이는 것 1. 변수 선언 (변수를 생성하는 것) -..

0. Ajax (Asynchronous JavaScript and XML) - 자바스크립트를 사용하여 1) 브라우저가 2) 서버에게 비동기 방식으로 데이터를 요청하고, 서버가 응답한 데이터를 수신하여 웹페이지를 동적으로 갱신하는 프로그래밍 방식 - 브라우저가 가지고 있는 호스트객체 Web API 인 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고 페이지의 일부만을 로드하는 기법 (XMLHttpRequest는 HTTP 비동기 통신을 위한 메서드와 프로퍼티를 제공한다.) => 즉, 자바스크립트를 이용한 비동기 통신이며, 클라이언트와 서버간에 XML 데이터를 주고 받는 방식 🔸Ajax를 사용하면 기존 방식과 어떤 차이가 있을까? - Ajax 가 등장하기 이전에는 웹브라우저가 어떤 정..

0. 동기와 비동기 - 현재 실행 중인 태스크가 종료될 때까지 다음에 실행될 태스크가 대기하는 방식 을 동기(synchronous) 처리 방식이라고 하며 - 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식 을 비동기(asynchronous) 처리라고 한다. (오해하면 안되는건, 비동기는 동시의 문제가 아니다. 순서의 문제다. 비동기도 정해진 순서가 있다) - 한번 비동기는 영원한 비동기다. - 대표적으로 타이머 함수인 ① setTimeout/ setInterval ② HTTP 요청 ③ 이벤트 핸들러 는 비동기 처리 방식으로 동작한다. 1. 자바스크립트 엔진 - 자바스크립트 엔진은 자바스크립트 코드를 이해하고 실행을 도와줌 - 자바스크립트 엔진은 Memory Heap..

0. 호출 스케줄링 - 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출) 할 수 있게 하는 것 호출 스케줄링을 구현하는 방법은 1. setTimeout 과 2. setInterval 이 있다. 1) setTimeout - setTimeout 함수로 생성한 타이머는 한 번 동작함 🔸setTimeout 예제코드 function sayHi() { alert('안녕하세요.'); } setTimeout(sayHi, 1000); - 위 코드를 실행하면 1초 후에 sayHi()가 호출된다. function sayHi(who, phrase) { alert( who + ' 님, ' + phrase ); } setTimeout(sayHi, 1000, "홍길동", "안녕하세요."); // 홍길동 님, 안녕하세요. - ..

0. 이벤트 - 이벤트는 어떤 사건을 의미함 - 즉, 사용자가 '클릭' 했을 때, '스크롤'을 내렸을 때, 무언가 '입력' 했을 때 등으로 상호작용으로 인해 일어나는 사건을 의미한다. - DOM 요소와 관련이 있다. 1. 이벤트 종류 - 이벤트 종류는 아래 블로그를 참고하자 https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%F0%9F%92%AF-%EC%B4%9D-%EC%A0%95%EB%A6%AC 🌐 브라우저 이벤트 종류 & 사용법 총정리 브라우저 이벤트 란? 이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 이벤트란 예를 들어 사용자가 버튼을 클릭했을 때, 웹페이지가 로드되었을 때와 같은 것인데 이것은 DOM ..

0. class - ES6 의 클래스가 도입되기 이전에는 생성자 함수로 프로토타입 기반의 인스턴스를 생성했다. - ES6 클래스 문법은 좀더 Java 스럽게 객체지향적으로 표현하기 위해 추가된 새로운 문법이다. - 결국엔 object 를 여러개 만들기 위해서 class 를 쓰는 것이다. 1. class 만드는 방법 🔸class 를 선언하는 방법 class 에는 constructor 라고 하는 키워드를 넣어야한다. 1)클래스 선언문 class MySelf { constructor(age, height) { this.age = age; this.height = height; } } 2) 변수에 클래스를 선언(기명 클래스 표현식) const MySelf = class MySelf { constructor(ag..