본문 바로가기

FrontEnd

 (96)
비동기식 처리 모델과 Ajax 출처: https://poiemaweb.com/jquery-ajax-json 1. Introduction 브라우저에서 웹페이지를 요청하거나 링크를 클릭하면 화면 전환이 발생한다. 이것은 브라우저와 서버와의 통신에 의한 것이다. 서버는 요청받은 페이지(HTML)를 반환하는데 이때 HTML에서 로드하는 CSS나 JavaScript 파일들도 같이 반환된다. 클라이언트의 요청에 따라 서버는 정적인 파일을 반환할 수도 있고 서버 사이드 프로그램이 만들어낸 파일이나 데이터를 반환할 수도 있다. 서버로부터 웹페이지가 반환되면 클라이언트(브라우저)는 이를 렌더링하여 화면에 표시한다. Traditional Web Page Lifecycle Ajax(Asynchronous JavaScript and XML)는 자바스크립트..
JSON, JSON.parse()와 JSON.stringify() Deepdive p 819참고 JSON(JavaScript Object Notaion): 클라이언트와 서버 간의 HTTP통신을 위한 텍스트 데이터 포맷. 자바스크립트에 종속되지 않는 언어 독립형 데이터 포멧으로 대부분의 프로그래밍 언어에서 사용할 수 있다. JSON은 자바스크립트의 객체 리터럴과 유사하게 키와 값으로 구성된 순수한 텍스트이지만 JS의 객체 리터럴과 약간은 다르다. JSON의 키는 반드시 큰따옴표(작은따옴표 사용 불가)로 묶어야 한다. 값은 객체 리터럴과 같은 표기법을 그대로 사용할 수 있다. 하지만 문자열은 반드시 큰따옴표(작은 따옴표 사용불가)로 묶어야 한다. 서버에서 클라이언트로의 데이터전송, 클라이언트에서 서버로의 데이터 전송 모~두 JSON포멧의 문자열로 이루어진다. 직렬화(Ser..
실행 컨택스트 참조: https://www.youtube.com/watch?v=EWfujNzSUmw (복습. Closure함수: 자신이 선언 되었을 때 렉시컬 환경(렉시컬 스코프)을 기억하는 함수) (내생각)실행컨텍스트(환경), 스코프가 같은 의미로 쓰일수 있다. (내생각)실행컨텍스트: 코드 실행에 필요한 환경(조건이나 상태)을 모아둔 객체(즉 스코프역시 코드 실행에 필요한 조건이나 상태를 모아둔 영역이므로 스코프가 실행컨텍스트와 같은 의미일 수 있는것이다) 요약: 실행 컨텍스트이란? 코드를 실행하는데 필요한 환경을 제공하는 객체. 여기서 환경이란 코드 실행에 영향을 주는 조건이나 상태를 의미함. 식별자 결정을 더욱 효율적으로 하기 위한 수단으로써 필요한 정보를 한곳에 모아 제공하는 객체. 스코프 체인이란?: 스코프들..
클로저(closure) 출처: https://poiemaweb.com/js-closure 요약. 클로저란? 자신(함수)이 선언되었을때의 렉시컬 환경(렉시컬 스코프,정적 스코프)을 기억하는 함수 자유변수: 클로저함수에 의해 참조되는 외부함수의 변수 1. 클로저(closure)의 개념 클로저(closure)는 자바스크립트에서 중요한 개념 중 하나로 자바스크립트에 관심을 가지고 있다면 한번쯤은 들어보았을 내용이다. execution context에 대한 사전 지식이 있으면 이해하기 어렵지 않은 개념이다. 클로저는 자바스크립트 고유의 개념이 아니라 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어(Functional Programming language: 얼랭(Erlnag), 스칼라(Scala), 하스켈(Haskell), 리스프(L..
함수 호이스팅 ing 출처: https://www.youtube.com/watch?v=fETYLCU2YYc
생성자 함수, 객체 메서드(Object method), 계산된 프라퍼티(computed property)에 대하여 https://www.youtube.com/watch?v=8hrSkOihmBI&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=2 생성자 함수의 내부 실행절차 new함수명(); ==>> 빈객체를 만들고 this에 할당함. ==> this객체 안에 property들을 추가 ==>>this를 반환(실제로 위와 같은 코드는 당연히 없음) 단 어떠한 함수라도 위와 같이 new를 붙여서 생성하면 위와 같은 알고리즘이 동일하게 적용됨. 따라서 생성자 함수는 첫 앞글자를 대문자로 해주는 것이 관례임. 객체 메서드에 대하여 //앞서 배운 내용 몽땅 적용해 보기 let n="name"; let a="age"; const user={ [n]:"Han", [a]:29, [5]:6,//키가 ..
프로토타입을 이용한 객체의 상속 JS에서 상속을 할수 있는 방법은 2가지가 있다. 프로토타입을 이용한 상속과 extends를 이용한 클래스 상속. 여기서는 프로토타입을 이용한 상속을 알아본다. 프로토타입을 이용한 상속은 xxx.__proto__=yyy 를 통하여 계속하여 이루어질수 있다. //최고조상이 될 car객체 const car={ wheels:4, drive(){//이름지어보기. 지어짐. 하지만 이렇한 형식으로 객체안의 함수를 정의할 수 있음. console.log("Driving..."); } } //car객체를 상속할 bmw, audi, Lamborghini const bmw={ color:"red", navigation:1, }; const audi={ color:"blue", } const Lamborghini={ col..
Class, Class에서의 상속과 생성자 호출 참고: https://www.youtube.com/watch?v=OpvtD7ELMQo&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=15 //생성자 함수에 의한 객체 생성 예 // 예1. const User=function(name, age){ this.age=age; this.name=name; this.showName=function(){ console.log(this.name); } } let joe=new User("Joe", 30); console.dir(joe); // 예2 function User2(name,age) { this.name = name; this.age=age; this.showName=function(){ console.log(this.na..

티스토리툴바