전체 글301 this 키워드 객체는 메서드와 프로퍼티로 구성되어 있다. 동작을 나타내는 메서드는자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this는 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this가 가리키는 값, 즉, this 바인딩은 함수 호출방식에 의해 동적으로 결정된다. ■ 함수 호출방식 1. 일반 함수 호출 2. 메서드 호출 3. 생성자 함수 호출 1. 일반 함수 호출 - 전역 함수는 물론이고 중첩 함수, 콜백 함수(setTimeOut, m.. 2022. 11. 30. 실행컨텍스트(Excution Context) ■ 실행컨텍스트 정의 코드를 실행하는데 필요한 환경을 제공하는 객체 환경: 코드 실행에 영향을 주는 조건이나 상태 ■ 실행컨텍스트 특징 - 자바스크립트 엔진은 stack이라는 자료구조를 사용해 실행컨텍스트의 실행순서를 결정한다. ■ 실행컨텍스트 종류 (대표적인 것) - 전역 실행컨텍스트 (Global Excution Context) - 함수 실행컨텍스트 (Function Excution Context) *아래 그림참고 ■ 실행컨텍스트의 구성 1. 렉시컬 환경 (Lexical Environment) ㄴ 2-1. 함수 환경 레코드 ㄴ 2-1. 전역 환경 레코드 (Global Environment Record) ㄴ 4-1. 객체 환경 레코드 (Object Environment Record) ㄴ 4-2. 선언적.. 2022. 11. 29. DOM(Document Object Model) ■ 특징 1. DOM은 window객체 중 하나이다. (window.document / window.location / window.navigator / window.history / etc...) 2. DOM은 브라우저 환경에서 만들어진다. 3. DOM은 트리와 같은 계층구조와 정보를 표현한다. (트리 자료구조) 4. 노드 객체의 종류, 타입에 따라 필요한 기능을 프로퍼티와 메서드의 집합인 DOM API로 제공한다. 그리고 이 DOM API를 통해 HTML의 구조와 내용 또는 스타일 등을 동적으로 조작할 수 있다. ■ DOM 정의 - 브라우저의 렌더링 엔진은 HTML 문서를 파싱하여 브라우저가 이해할 수 있는 자료구조인 DOM을 생성한다. DOM(Document Object Model)은 HTML 문서.. 2022. 11. 25. CSR & SSR 웹 트렌드는 문제점을 해결하는 것에 중점을 두면서 새롭게 변화하고 발전해왔다. ■ Static Sites (mid 1990s) - 클라이언트가 브라우저에서 URL 주소로 접속하면, 서버에 이미 배포되어 있는 HTML문서를 브라우저에서 보여주는 형식이다. - 문제점: 페이지 내에서 다른 링크를 클릭하면 브라우저는 다시 서버에서 HTML문서를 받아와 보여주기 때문에 페이지 전체가 업데이트된다. ■ iframe (1996) - 페이지 내부에서 부분적으로 HTML문서를 받아와서 업데이트할 수 있게되었다. ■ XMLHttpRequest(1998~) - HTML문서 전체가 아니라 JSON과 같은 포맷으로 서버에서 가볍게 필요한 데이터만 받아올 수 있게 되었다. 그리고 그 데이터를 자바스크립트를 통해서 HTML요소를.. 2022. 11. 22. 비동기 처리에 대한 클린 코드 예제 5 6 7 8 id를 선택하세요. ■ 흐름 select event → handleChange → getProduct → renderProduct → render ※ 1차 리팩토링 - getProduct 함수에서 fetch를 분리한다. getProduct 함수는 이제 fetchProduct 함수의 결과 값만 출력해주는 기능을 수행하게되었고 더이상 async/await가 필요하지 않게 되었다. (사용해도 기능이 작동하는데 영향을 주지 않는다) async function fetchProduct(id){ const res = await fetch(`https://api.escuelajs.co/api/v1/products/${id}`); const json = await res.json(); return json.. 2022. 11. 21. [2] 클린코드 Rule [1] DRY(Don't Repeat Yourself) - 반복하지마라 [2] KISS(Keep It Simple, Stupid) - 심플하고, 멍청하게 유지하자 ■ Code : 10줄 짜리 코드를 1줄로 줄이기 위해 화려한 테크닉을 이용해서 가독성을 떨어뜨리기 보다는 누구나 이해할 수 있도록 심플하고 간결하게 작성하는 것이 좋다. ■ Function : 별도의 주석을 달지 않더라도 함수의 이름, 매개변수 그리고 구현된 사항의 코드를 읽었을 때 한 번에 이해할 수 있도록 한 가지의 기능을 수행하는 코드를 작성하는 것이 좋다. ■ Class : 한 가지의 챔임만 담당하는 클래스를 심플하게 만드는 것이 좋다. ■ View : 사용자에게 보여지는 UI를 담당하는 컴포넌트에는 별도의 비즈니스 로직을 포함하지 않.. 2022. 11. 17. 이전 1 ··· 13 14 15 16 17 18 19 ··· 51 다음
