본문 바로가기

프론트엔드

vue router 네비게이션 가드
순서 beforeEach 어떤 페이지든 간에 이동할 때 제일 먼저 실행되는 훅 (전역가드) beforeEnter 이동하려는 라우트에 진입하기 전 호출되는 훅 / 라우터마다 각각 다르게 가드를 지정할 수 있음 beforeRouteEnter 새로운 컴포넌트를 만들기 전 호출 (next이용하여 dom업데이트된 이후 실행가능) beforeRouteUpdate 컴포넌트를 재사용할 경우에만 발생 (/shop/goodsList/1 > /shop/goodsList/2) beforeResolve 네비게이션 작업을 완료하기 전 호출하는 훅 (전역가드) afterEach 네비게이션 작업이 완료된 후 호출하는 훅 (전역가드) beforeRouteLeave 기존 컴포넌트 제거 전에 호출 (폼 작성 데이터 유실 방지용)
React vs Vue
공통점은? React와 Vue는 컴포넌트 기반이고 Virtual Dom 방식이라는 공통점이 있고 가볍고 빠르다. virtual dom 으로 빠른 렌더링 경량 라이브러리 reative component SSR 라우터, 번들러, state management 차이점은? react는 jsx / vue는 html기반 템플릿을 사용한다. react 커뮤니티가 훨씬 크다. vue가 learning curve가 낮다 react는 단방향으로만 데이터를 전달한다. vue는 양방향 데이터 전달이 가능하다. react는 class형과 함수형이 있다
hasOwnProperty & hasOwn & (key) in 차이점
hasOwnProperty란? hasOwnProperty() 는 객체가 특정 프로퍼티를 가지고 있는지를 알려주는 메소드이다. 사용법은 객체.hasOwnProperty(’확인할 프로퍼티’)이고, 리턴되는 값은 **boolean**이다. const object1 = {}; object1.property1 = 123; console.log(object1.hasOwnProperty('property1')) // true console.log(object1.hasOwnProperty('property2')) // false object1이라는 객체를 만들고, 그 후에 property1이라는 프로퍼티에 123을 담았다. hasOwnPropery를 이용해 콘솔을 찍어 property1이 있는지 체크해보면 true가 ..
Prototype 프로토타입
Prototype 프로토타입 javascript의 모든 객체는 자신의 원형이 되는 객체를 가진다. 이를 프로토 타입이라고 한다. 보이지 않는 속성이 [[Prototype]] 이 자신의 프로토타입 객체를 참조한다. 이를 __proto__ 라는 속성으로 참조할 수 있지만 비표준이고 모든 브라우저에서 동작하는 것은 아니기 때문에 실제로 사용하는 것은 피해야한다. .prototype 과 [[Prototype]] 위에 말했듯이 모든 객체는 은닉 객체인 [[Prototype]] 을 갖는다. 그리고 함수 객체는 접근할 수 있는 속성인 .prototype 을 갖는다. 이름만 보면 같은것으로 보이기 때문에 관계를 명확히 파악하여야한다. [[Prototype]] : 자신의 프로토타입 객체를 참조하는 속성이다. .proto..
new 연산자
new의 동작방식 javascript에서는 new 연산자를 통해 함수를 생성자로 호출할 수 있고, 그에 따라 새로운 객체를 생성할 수 있다. function Func() {} const makeNew = new Func(); 빈 객체 생성 {} [[Prototype]] 속성을 생성자 호출할 함수의 prototype 속성으로 지정 > 여기서는 해당 객체의 [[Prototype]] 을 Func.prototype으로 지정 객체를 생성하고 이 객체를 this로 지정 함수를 호출하고 해당 함수의 this로 위에서 지정한 객체를 사용 > Func() 을 호출하고 이 함수에서 this를 위 객체로 지정 함수의 리턴값이 원시값이라면 새로 만들어진 객체가 리턴되고, 리턴값이 객체라면 해당 객체를 리턴 > 함수의 리턴값이..
Closure 클로져
Closure클로저란? 클로저란 함수가 속한 렉시컬 스코프를 기억하여 함수가 렉시컬 스코프 밖에서 실행될 떄도 그 스코프에 접근할 수 있게 하는 기능을 말한다. function outer() { var a = 2; function inner () { //현재 a를 참조하고 있음 console.log('inner함수실행! a는? ', a); //함수가 속한 렉시컬 스코프 기억 (outer에서 a를 찾아서 기억) } //결국 inner가 클로져임 return inner; } var test = outer(); // 여기서 콘솔을 찍어보면 function inner()가 담겨있음 test(); //inner()가 실행되면서 기억된 a였던 2가 찍힘 inner함수실행! a는? 2 여기서 GC(Garbage Co..
Hoisting 호이스팅
‘ var와 함수식은 위로 끌려올려진다. ’ var의 경우 1. 내가 짠 코드 console.log(a); var a = 2; 2. 실제 컴파일된 자바스크립트 var a console.log(a); //undefined a = 2; 3. 실행결과 💡 undefined 내가 짠 코드의 소스를 보면 변수 a가 선언되기전에 a를 콘솔로 찍었다. 그렇지만 오류가 나지 않는다. (물론 값을 제대로 찾지는 않는다.) 이유는 var와 함수식이 최상단으로 끌어올려지기 때문이다. 이걸 바로 Hoisting이라고 한다. 컴파일러는 자바스크립트 엔진이 인터프리팅을 하기 전에 컴파일을 하는데, 이 때 var a = 2; 를 var a 와 a = 2 2개의 구문으로 본다. var a 선언문을 컴파일을 할 때 처리하고, 실제 실..
Scope 스코프
Scope란? 자바스크립트 엔진이 참조의 대상이 되는 식별자를 검색할 때 사용하는 규칙의 집합이다. 즉, 어떤 변수를 사용하거나 함수를 호출하려고 할 때 그 식별자를 검색하는 구조라고 이해하면 된다. Lexical Scope 렉시컬 스코프 렉시컬 스코프는 변수, 함수의 스코프이다. 변수, 함수를 어디에 썼는가를 보고 그 스코프가 판단이 된다. Scope chain 스코프 체인 현재 스코프에서 식별자를 검색할 때 상위 스코프를 연쇄적으로 찾아나가는 방식을 말한다. 실행컨텍스트가 생성될 때 마다 Lexical Environment가 만들어지고, 그 안에 밖을 참조하는 outer 참조값이 있는데, 이 outer 참조값이 상위 스코프의 Lexical Environment를 가리키기 때문에 체인처럼 연결이 된다...
Event Loop 이벤트 루프 (태스크큐 & 마이크로 태스크 큐)
‘이벤트 루프란 ?’ 자바스크립트 엔진 > 요청을 동기적으로 처리 javascript는 단일스레드 기반 언어로 자바스크립트 엔진이 단일 콜스택을 갖는다. 즉, 요청이 동기적으로 진행된다는 의미이다. 비동기 요청 처리는 브라우저나 Node.js가 담당 자바스크립트 엔진이 비동기로 처리할 수는 없다. 비동기 요청은 브라우저나 Node.js가 담당한다. 여기서 자바스크립트 엔진과 그 실행환경을 연동시켜주는 장치가 이벤트 루프이다. 따라서 이벤트 루프는 자바스크립트 엔진에 있지 않고 그 환경에 속한다. 태스크 큐 Task Queue & 마이크로태스크 큐 Microtask Queue 자바스크립트 실행환경은 2가지 큐를 가지고 있으며 각각 스크립트 실행, 이벤트 핸들러, 콜백함수 등의 태스크(Task 할일)이 담기..
Javascript 메모리 개념 (V8엔진 & 콜스택Call Stack & 힙Heap)
‘자바스크립트의 메모리 개념’ ‘자바스크립트 엔진 ? V8엔진이란 ?’ 자바스크립트는 Interpreter Language(≠ Compile Language)이기 때문에 코드를 해석하고 실행하는 엔진이 필요하다. 구글에서 만든 V8엔진은 자바스크립트를 해석하고 컴파일하여 기계어로 변환해준다. ‘V8엔진의 메모리 구조: 콜스택과 힙’ Javascript는 단일 스레드이므로 V8 엔진은 Javascript 컨텍스트 당 한개의 프로세스를 사용한다. 실행 중인 프로그램은 V8 프로세스에서 할당된 일정량의 메모리로 표현되는데 이를 Resident Set이라고 한다. 이 Resident Set이 힙메모리와 스택으로 나누어져 있다. 즉 자바스크립트 엔진이 자바스크립트를 실행할 때마다 콜스택 메모리와 힙 메모리를 사용..
http1.1 와 http2
NOTION에서 보기: https://www.notion.so/http-1-1-http-2-602c8b4333fe4d7683d77bd726270254 http/1.1 와 http/2 HTTP란? www.notion.so HTTP란? HTTP란 인터넷 상에서 데이터를 주고 받기 위한 클라이언트 서버 모델을 따르는 프로토콜로, WWW에서 하이퍼텍스트 문서를 교환하기 위해 사용되는 통신규약이다. TCP/IP프로토콜 위에서 동작한다. 포트 80번을 사용하여 통신한다. HTML 문서, 이미지, 동영상, 오디오 , 텍스트 문서 등 모든 종류의 데이터를 전송한다. 하이퍼텍스트 기반으로 데이터 전송한다. (= 링크 기반으로 데이터에 접속하겠다라는뜻) 첫 표준은 HTTP/1.1 이며 이후로 HTTP/2 HTTP/3이 등..
Execution Context 실행 컨텍스트
Execution Context 1. Execution Context란? 💡 자바스크립트 코드가 실행되고 연산되는 범위를 나타내는 추상적인 개념. 코드들이 실행되기 위한 환경이자 하나의 컨테이너라고 볼 수 있다. 2. 자바스크립트 코드 실행에 필요한 정보 변수 함수 변수의 유효범위 this 3. Types of Execution Context 실행 컨텍스트 타입 Global Execution Context 전역 실행 컨텍스트 window 전역컨텍스트 생성, this를 전역 객체로 설정 Functional Execution Context 함수 실행 컨텍스트 함수가 호출될 때마다 해당 함수에 대한 새로운 실행 컨텍스트가 생성된다. 여러개를 호출하면 순차적으로 호출된다. **Eval Function Execu..
브라우저 렌더링
[프론트엔드 면접준비] 브라우저 렌더링 브라우저 렌더링 🔦렌더링과정 1. HTML, CSS 다운로드 (DOM, CSSOM 생성) 💡 HTML. CSS파일은 단순한 텍스트로 받아들이기 때문에 연산과 관리가 유리하도록 Object Model로 만들게 된다. **HTML은 DOM Tree**로, **CSS는 CSSOM(CSS Object Model)**로 만들어지게 된다. 2. Render Tree 생성 (’실제화면에 표시’되는것들로 구성하는 단계 HTML + CSS) 💡 **DOM Tree와 CSSOM Tree**가 만들어지면 이 둘을 이용하여 **Render Tree**를 생성한다. 순수한 요소들의 구조와 텍스트만 존재하는 DOM Tree와는 달리, 스타일 정보가 설정되어 있으며 Render Tree는 실..

티스토리툴바