JavaScript Dev.

JavaScript Dev./Javascript

14. DOM과 클래스, 클로저

1. DOM DOM의 기본 개념 JS는 왜 만들어진 건가? 웹 페이지를 동적으로 만들기 위해 HTML 문서를 조작해서 생명력을 넣기 위해 만들어진 언어 웹 페이지가 동작하는 과정 클라이언트가 브라우저에 주소를 입력한다. HTML 문서를 서버로부터 수신 서버가 클라이언트에게 response를 준다. (즉, response가 HTML 문서(document)) 브라우저가 HTML 파일을 해석(parsing 파싱) 브라우저에는 기본적으로 렌더링 엔진이 있다. 서버가 클라이언트에게 준 HTML문서를 렌더링 한다. 랜더링 엔진이 HTML 문서에 코드를 해석한다. JS가 이해할 수 있는 방식으로 해석하고 내용을 토대로 DOM Tree를 구성 DOM Tree랑 CSSOM Tree를 묶어서 Render Tree를 구성 ..

JavaScript Dev./Javascript

13. 콜백 함수와 동기/비동기 처리

1. 콜백 함수란 다른 코드의 인자로 넘겨주는 함수. 즉, 콜백 함수를 넘겨 받는 코드(ex. forEach, setTimeout) 가 있다는 말. 콜백 함수를 넘겨 받은 코드가 콜백 함수를 필요에 따라 적절한 시점에 실행하게 된다. 콜백 함수는 다른 코드(함수 또는 메서드)에게 인자로 넘겨줌으로써 그 제어권도 함께 위임하는 함수. 콜백 함수를 위임받은 코드는 자체적으로 내부 로직에 의해 콜백 함수를 적절한 시점에 실행. 2. 제어권 호출 시점 ==> 콜백 함수의 제어권을 넘겨받은 코드는 콜백 함수 호출 시점에 대한 제어권을 가진다. 인자 ==> map 함수는 각 배열 요소를 변환하여 새로운 배열을 반환한다. 기존 배열을 변경하지 않고, 새로운 배열을 생성. // map 함수에 의해 새로운 배열을 생성해..

JavaScript Dev./Javascript

12. this(정의, 활용 방법, 바인딩, call, apply, bind)

1. 상황에 따라 달라지는 this 1. this는 실행 컨텍스트가 생성될 때 결정된다. 즉, this를 bind한다라고도 한다. this는 함수를 호출할 때 결정된다. 전역 공간에서의 this 1. 전역 공간에서 this는 전역 객체를 가르킨다. 2. 런타임 환경에 따라 this는 window(브라우저 환경) 또는 global(node 환경)을 각각 가르킨다. 2. 메서드로서 호출할 때 그 메서드 내부에서의 this 함수 vs. 메서드 (독립성) ==> 함수는 그 자체로 독립적인 기능을 수행 ==> 메서드는 자신을 호출한 대상 객체에 대한 동작을 수행 this의 할당 // CASE1 : 함수 // 호출 주체를 명시할 수 없기 때문에 this는 전역 객체를 의미해요. var func = function ..

JavaScript Dev./Javascript

11. 실행 컨텍스트(스코프, 변수, 객체, 호이스팅)

1. 실행 컨텍스트란? - 실행할 코드에 제공할 환경 정보들을 모아놓은 객체. 선언된 변수를 위로 끌어올린다. (호이스팅) 외부 환경 정보를 구성 this 값을 설정 스택(stack) - 마지막에 들어간게 첫번째로 나오는 구조 콜 스택(call stack) - 필요한 환경 정보들을 모아 컨텍스트를 구성하고 이것을 stack의 한 종류인 콜 스택에 쌓아올린다. 가장 위에 쌓여있는 컨텍스트와 관련된 코드를 실행하는 방법으로 코드의 환경 및 순서를 보장할 수 있다. 컨텍스트의 구성 구성 방법 a. 전역공간 b. eval()함수 c. 함수(흔히 실행 컨텍스트를 구성하는 방법) 실행 컨텍스트 구성 예시 // ---- 1번 var a = 1; function outer() { function inner() { co..

JavaScript Dev./Nest.js

passport를 이용한 kakao, naver, google 소셜 로그인 구현

01. 준비하기 모듈 설치 npm install @nestjs/passport passport passport-kakao passport-naver-v2 passport-google-oauth20 카카오 디벨로퍼 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 네이버 디벨로퍼 https://developers.naver.com/main/ NAVER Developers 네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 ..

JavaScript Dev./Nest.js

Nest.js

01. Nest.js란? Node.js 기반의 서버 사이드 애플리케이션을 빌드하기 위한 프레임워크 TypeScript로 개발이 이루어진다. 모듈화, Dependency Injection, 간결한 문법 등을 특징으로 한다. 02. 특징 모듈화: 애플리케이션을 모듈 단위로 구성하여 코드를 논리적으로 분리하고 재사용 가능하게 한다. 큰 규모의 애플리케이션 개발 시 구조를 보다 체계적으로 관리할 수 있도록 도와준다. Dependency Injection: 의존성 주입을 강력하게 지원하여 코드의 유지보수성과 테스트 용이성을 향상시킨다. 의존성 주입을 통해 컴포넌트 간의 결합도를 낮추고 모듈의 교체나 확장이 용이해진다. HTTP 요청 처리: 라우팅, 미들웨어, 예외 처리 등의 기능을 내장하고 있어 웹 애플리케이션을..

Yoonsoo
'JavaScript Dev.' 카테고리의 글 목록 (7 Page)