전체 글 (33) 썸네일형 리스트형 [BROWSER] Virtual DOM 가상 돔(Virtual DOM) 이란? Virtual DOM을 사용하면 실제 DOM에 접근하여 조작하는 대신, 이를 추상화한 자바스크립트 객체를 구성하여 사용 ✅ 실제 DOM의 가벼운 사본 DOM의 상태를 메모리에 저장하고, 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영 하는 기능 → 성능 향상 가상 DOM은 DOM의 상태를 메모리 위에 계속 올려두고, DOM에 변경이 있을 경우 해당 변경을 반영함 리액트가 가상돔을 반영하는 절차 EX) 특정 페이지에서 데이터가 변했다고 가정 했을 경우. - 리액트를 이용해 돔을 업데이트 시키는 절차 1. 데이터가 업데이트 되면, 전체 UI를 Virtual DOM에 리렌더링함 2. 이전 Virtual DOM에 있던 내용과 현재의 내용을 비교함 (가상 돔 끼.. [BROWSER] DOM 돔(DOM)이란? DOM(Document Object Model)은 웹 페이지를 이루는 태그들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. DOM(Document Object Model)을 영어 뜻풀이 그대로 하자면 문서 객체 모델을 의미한다. 문서 객체란 html, head, body와 같은 태그들을 javascript가 이용할 수 있는 (메모리에 보관할 수 있는) 객체를 의미한다. HTML의 DOM 트리 DOM은 HTML과 스크립팅 언어(Javascript)를 서로 이어주는 역할 ❓❔ 자바스크립트는 어떻게 HTML 태그들을 조종할 수 있는 걸까? - Document라는 전역 객체를 통해 접근 - window라는 객체는 document객체의 상위에 위치 🙄❕❓ 가.. Severless 서버리스(Serverless)란? 서버리스는 직역하자면 "서버가 없다"라는 의미가 있다. 하지만 실제로 서버가 없는건 아니다.대신 특정 작업을 수행하기 위해 컴퓨터나 가장머신에 서버를 설정하고, 이를 통해 처리하는 것이 아님을 의미한다. 그 대신, BaaS(Backend as a Servie) 혹은 FaaS(Function as a Service) 에 의존하여 작업을 처리하게 된다. BaaS vs FaaS BaaS (Backend as a Service) 보통 우리가 모바일이나 웹 어플리케이션을 만들게 될 때, 백엔드 서버 개발을 진행하게 된다. 서버 개발을 하다보면 고려할 사항이 꽤 많다. 대표적으로 유저가 늘어나게 되면 서버의 확장도 고려해야 하고, 보안성도 고려해야 한다. 그래서 탄생한 서비스가 F.. [JavaScript] JavaScript es5와 es6차이 JavaScript란? 자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어다. 자바스크립트로 작성한 프로그램을 스크립트(script) 라고 부른다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데 웹페이지를 불러올 때 스크립트가 자동으로 실행된다. 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고 실행도 할 수 있다. ES5와 ES6의 차이 Let, Const 기존의 var 키워드에 비해 블록 레벨 스코프를 가지며 재할당이 가능한 let, const 키워드가 추가 변수에 생명주기에 영향을 끼치며, 키워드만 보아도 변수의 변화가 생기는지 안 생기는지 알 수 있음 호이스팅에도 변화가 생김 Arrow Function 화살표 함수가 추가되어 함수를 간결하게 .. [JavaScript] JavaScript의 특성(3) 🐤 호이스팅과 TDZ는 무엇일까 ? 호이스팅과 TDZ 함수 안에 있는 선언들을 모두 끌어 올려서 해당 함수 유효 스코프의 최상단에 선언 하는 것을 말합니다. 호이스팅이란? 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언한다. 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑는다. 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킨다. 유효 범위: 함수 블록 {} 안에서 유효 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이다. 실제로 코드가 끌어올려지는 건 아니며, 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것이다. 실제 메모리에서는 변화가 없다. 호이스팅의 대상 var 변수 선.. [JavaScript] Javascript의 특성(2) 🐤 JavaScript 객체와 불변성 기본형 데이터와 참조형 데이터 자바스크립트 데이터 타입은 크게 2가지로 구분된다. 기본형 데이터 기본형 자료형이 연산하거나 할당될 때에는 변수에 값(value) 자체가 복제된다. 기본형 데이터는 값을 복사 할 때 복사 된 값을 다른 메모리에 할당 하기 때문에 원래의 값과 복사 된 값이 서로에게 영향을 미치지 않는다. Primitive type Number String(문자열) Boolean null undefinded Symbol /*기본형 데이터*/ const a = 1; let b = a; b = 2; console.log(a); //expected output: 1 console.log(b); //expected output: 2 참조형 데이터 기본형 데이터의 .. [JavaScript] Javascript의 특성(1) 🐤 JavaScript의 자료형과 JavaScript만의 특성 느슨한 타입(loosely typed)의 동적(Dynamic)언어 JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 또는 재할당이 가능하다. JavaScript형 변환 자바스크립트는 타입이 매우 유연한 언어이기에 자바스크립트 엔진 필요 또는 개발자의 의도에 따라 ‘암시적 변환’ 혹은 ‘**명시적 변환’**을 사용한다. 암시적 변환 자바스크립트 엔진 필요에 따라 자동으로 데이터의 타입을 변환한다. 산술 연산자 더하기**(+)** 연산자는 숫자보다 문자열이 우선이므로 숫자형이 문자형을 만나면 문자형으로 변환하여 연산한다. (문자 > 숫자) 다른 연산자(-,*,/,%) 다른 연산자는 숫자형이 문자형보다 우선이.. JWT, API JWT(Json Web Token) JWT란 Json 포맷을 이용하여 사용자에 대한 속성을 저장하는 Claim 기반의 Web Token이다. JWT는 토큰 자체를 정보로 사용하는 Self-Contained 방식으로 정보를 안전하게 전달한다. 보통은 회원 인증을 할 때 많이 사용된다. 사용자가 로그인을 하면 서버에서 사용자의 정보에 기반한 토큰을 발급하여 사용자에게 전달한다. 그리고 이후, 사용자가 서버에 요청을 할 때마다 JWT를 포함하여 전달한다. 서버가 클라이언트에게서 요청을 받을 때마다 토큰이 유효한지 인증됐는지 검증하고, 사용자가 요청한 작업에 권한이 있는지 확인하여 작업을 처리한다. API(Application Programming Interface) API란 응용 프로그램 프로그래밍 인터페이스.. 이전 1 2 3 4 5 다음
