공대생Kim 공대생Kim

실행 컨텍스트(execution context) 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 스코프를 기반으로 식별자와 식별자에 바인딩된 값을 관리하는 방식과 호이스팅이 발생하는 이유, 클로저의 동작 방식, 그리고 태스트 큐와 함께 동작하는 이벤트 핸들러와 비동기 처리의 동작 방식을 이해할 수 있다. 전역 코드 전역 코드는 전역 변수를 관리하기 위해 최상위 스코프인 전역 스코프를 생성해야 한다. 그리고 var 키워드로 선언된 전역 변수와 함수 선언문으로 정의된 전역 함수를 전역 객체의 프로퍼티와 메서드로 바인딩하고 참조하기 위해 전역 객체와 연결되어야 한다. 이를 위해 전역 코드가 평가되면 전역 실행 컨텍스트가 생성된다. 함수 코드 함수 코드는 지역 스코프를 생성하고 지역 변수, 매개변수, ar..

REST API REST API는 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식을 말합니다. Resource : 데이터 or 자원 Collection :Element 가 가지고 있는 데이터 전체 Element : Collection으로 이루어진 각각의 데이터(보통 id 값으로 구분!!!!!) REST API CRUD REST API는 HTTP를 이용하기 때문에 HTTP가 가지는 Method를 이용할 수 있다. API CRUD에 대한 자세한 설명은 AJAX 블로깅에서 자세히 다룸!!!!!! REST API를 디자인하는 방법 REST 성숙도 모델은 총 4단계(0~3단계)로 나누어집니다. 앞서 이야기한 로이 필딩은 이 모델의..

1. strict mode란? 아래 예제의 실행 결과는 무엇일지 생각해보자. function foo() { x = 10; } console.log(x); // ? foo 함수 내에서 선언하지 않은 변수 x에 값 10을 할당하였다. foo 함수의 스코프에서 변수 x의 선언을 검색한다. foo 함수의 스코프에는 변수 x의 선언이 없으므로 검색에 실패할 것이고, 자바스크립트 엔진은 변수 x를 검색하기 위해 foo 함수 컨텍스트의 상위 스코프(위 예제의 경우, 전역 스코프)에서 변수 x의 선언을 검색한다. 암묵적 전역 변수(implicit global) 전역 스코프에도 변수 x의 선언이 존재하지 않기 때문에 ReferenceError를 throw할 것 같지만 자바스크립트 엔진은 암묵적으로 전역 객체에 프로퍼티 ..

State state는 내부에서 변화하는 값 UI렌더링 하기 좋은 state와 잠시 값을 가지고있기 좋은 변수의 역할을 분리하기 시작했다. useState() 를 사용하여 상태를 변화 시키는 것이 가능하다. useState()는 길이 2 짜리 Array를 반환한다. 초기값을 담고있는 State.값과 이 State를 업데이트해주는 set함수를 반환해준다. useState() 문법 const [state, setState] = useState(초기값); state : 상태가 들어올 변수 setState() : state의 값을 변경시킬 함수 다 State의 초기값을 업데이트 해주려면 set함수의 전달인자로 내가 업데이트 하고자 하는 값을 넣는다. set함수는 비동기적이다. State는 컴포넌트가 여러개여도 ..

Routing 사용자가 요청한 URL에 따라 해당 URL에 맞는 페이지를 보여주는 것. BrowserRouter 컴포넌트는 웹 애플리케이션에서 페이지를 새로고침하지 않고도 주소를 변경할 수 있다. 가 상위에 작성되어 있어야 React Router의 컴포넌트들을 사용할 수 있습니다. Routes, Route 경로를 매칭해주는 역할을 하는 컴포넌트입니다. 컴포넌트는 여러 컴포넌트를 감싸서 그중 경로가 일치하는 단 하나의 라우터만 렌더링을 시켜주는 역할을 합니다. 를 사용하지 않으면 매칭되는 모든 요소를 렌더링합니다. 의 역활은 바뀌지 전 의 역할과 같다. 컴포넌트는 path 속성을 지정하여 해당 path 에서 어떤 컴포넌트를 보여줄지 정합니다. 아래에서 배울 컴포넌트가 정해주는 URL 경로와 일치하는 경우에..

AJAX AJAX는 Asynchronous JavaScript And XMLHttpRequest의 약자로, JavaScript, DOM, Fetch, XMLHttpRequest, HTML 등의 다양한 기술을 사용하는 웹 개발 기법 AJAX의 가장 큰 특징은, 웹 페이지에 필요한 부분에 필요한 데이터만 비동기적으로 받아와 화면에 그려낼 수 있다는 것 검색창에서 한 글자를 입력할 때마다, 해당 글자로 시작하는 단어들을 서버로부터 받아와, 아래 추천검색어로 보여주게 됩니다. 다시 말해, 검색창에서는 필요한 데이터만 비동기적으로 받아와 렌더링 되며, 여기에 AJAX가 사용됩니다. AJAX의 두 가지 핵심 기술 AJAX를 구성하는 핵심 기술은 JavaScript와 DOM, 그리고 Fetch입니다. 전통적인 웹 애..

동기(synchronous) JavaScript의 동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리고 난 후 다음 코드를 수행하는 것’을 의미합니다. 예시로 동기적으로 운영되는 노점상의 경우 붕어빵을 주문받은 후 주문받은 붕어빵이 다 만들어지고 난 후에야 다음 손님의 주문을 받고 붕어빵을 제작하게 됩니다. 비동기(asynchronous) JavaScript의 비동기 처리는 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드들을 수행하는 것’을 의미합니다. 예시로 노점상이 비동기적으로 운영되는 경우 여러 손님의 주문을 받으면서 붕어빵을 제작하게 되고 완성되는 대로 손님에게 붕어빵을 제공하게 됩니다. 동기적으로 운영하는 경우보다 훨씬 효율적입니다. 타이머(Timer) 타이머 관련 API Set..

프로토타입 기반 언어 JavaScript는 흔히 프로토타입 기반 언어(prototype-based language)라 불린다 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다. 프로토 타입 function 기계(){ this.q = "strike" this.w = "snowball" } 기계.prototype.name ="kim" var nunu = new 기계() } 기계라는 객체에 비밀 공간이 생김 prototype = 유전자 nunu라는 변수에 name을 부여한 적은 없었지만 기계.prototype 이라는 부모 유전자에 기억되어 있어 그것을 가져다 쓸 수 있다. const car ={ wheel: 4, drive(){ console..