본문 바로가기

FrontEnd

 (37)
실행 컨텍스트(Execution Context)의 정의와 종류 1. GEC Global Execution Context 글로벌로 자바스크립트가 실행될때의 전역 실행 환경 콜스택에 제일 먼저 쌓이고 가장 나중에 제거된다. 자바스크립트가 싱글스레드이기 때문에 무조건 한개만 존재할 수 있다. 2. FEC Functional Execution Context 함수가 호출되고 실행될때 그 호출된, 실행되고있는 함수에 대해서 실행되고 있는 환경 함수 내부의 this와 함수가 필요로하는 지역변수들을 포함한다. 함수가 실행될때 생성되었다가 함수가 종료되면 제거된다. 3.Eval evel함수 실행시 생성되는 컨텍스트 (잘 안쓴다고 하기도 해서 따로 정리하진않음) ✔️ 참고 https://www.youtube.com/watch?v=AbNc8_poxu4
[Browser Rendering] - 3. 브라우저 렌더링 최적화 위의 내용을 보고 정리한 내용입니다..! Layer 웹페이지를 렌더링 하기 위해 필요한 이미지 단위 요소 레이어를 배치, 합성 하여 최종적인 웹페이지를 표현한다 페인트 단계에서 메인 스레드는 하나의 페이지를 여러 층의 레이어로 분리하고 그 레이어들을 어떠한 순서로 그릴지 결정한다. 이 과정에서, 레이아웃 트리를 기반으로 레이어 트리가 생성된다. 이렇게 레이어 트리가 생성되면 모든 시각적 부분을 그리기 위해 각 레이어의 픽셀을 채우게 된다. 즉, 웹 브라우저 화면에 있을때 기존의 렌더링 프로세스와 별개로 또 하나의 화면이라고 부를수 있는것이 Layer이다. 렌더링 과정 1. 스크립트가 들어오면 2. cpu에서 recalculate style이라고 스타일을 다시 계산함 3. 레이아웃 과정이 일어남 ( 브라우..
[Browser Rendering] - 2. 브라우저 렌더링 순서 ( webkit의 동작과정 ) 위 강의를 보고 정리한 내용입니다. URL과 URI URL은 URI에 포함된다. URI는 네트워크 상에서 자원을 식별하기 위한 문자열(식별자까지 포함) URL은 네트워크 상의 자원의 위치를 나타내는 주소 결론적으로 요약하자면, URL과 URN은 URI의 종류이다. 그렇기에 모든 URL은 URI이고, 또한 모든 URN은 URI이다. URL, URN 그리고 URI GraphQL과 RESTful API 정리하다가 URL, URN 그리고 URI의 차이점에 대해서 알고 넘어가야 할것 같아서 작성하는 글이다. 결론부터 말하자면 아래와같다. 자원의 식별자(URI), 위치(URL), 이름(URN) URI(Uniform.. im-designloper.tistory.com 렌더링 엔진 URI를 통해 요청을 받아서 해당하는..
[Browser Rendering] - 1. 브라우저 구성 요소, 렌더링 과정 위의 강의를 보면서 이해한 내용을 토대로 정리한 내용입니다 : ) 사실 글로 보는건 훗날 다시 보기 위함이기 때문에 정확한 이해를 위해 영상 보시는걸 추천드립니다 😁 Browser Elements 1. 사용자 인터페이스 페이지를 보여주는 창 외에 사용자가 컨트롤 할 수 있는 부분을 의미 2. 브라우저 엔진 1. 사용자 인터페이스와 렌더링 엔진 사이에서 동작 사용자가 입력한 URL의 URI값이나 사용자 인터페이서에서 입력된 값을 렌더링 엔진에게 전달하는 역할 2. 자료 저장소로 이동하는 역할 3. 렌더링 엔진 ✨ 사용자가 URI를 입력했을때 그에 해당하는 데이터를 파서를 통해 html, css를 파싱한 후 렌더링 한다. 4. 통신 렌더링 엔진으로부터 http요청 명령을 받아 서버에게 요청하고, 응답을 받아..
a태그의 target="_blank"와 rel="noopener noreferrer" 코드 작성하다가 발견한 rel="noopener noreferrer"에 대해서 정리해봅니다. target="_blank"을 사용하는 경우 보안상 취약점이 발견되서 피싱 공격을 피하기 위해 사용한다고 하는데, 아래에 쭉 정리해 두었습니다 : ) 1. target="_blank" a태그 , react나 vue에서 Link나 router-link로 사용하는 경우, 이동할 주소나 화면을 새창으로 열어주는 기능을 한다. 참고로, 웹 접근성을 위해 target="_blank"을 사용하는 경우 title="새창으로 열기" 등으로 새창으로 열린다는 부분을 추가해 주는것이 좋다고 한다. 2. Tabnabbing 피싱 공격 위의 코드를 사용해 A라는 메인 페이지에서 B라는 새로운 페이지를 열었을때, 서브 페이지인 B에서 ..
package.json의 scripts의 활용 ( &&, pre-, post- ) package.json의 scripts 리액트, 뷰로 CRA나 CLI로 개발환경 세팅후 자주 실행해야 하는 명령어를 package.json의 scripts에 작성하여 npm 명령어로 실행 할 수 있다. 실행 실행시에는 아래와 같은 같은 형태로 사용하고, npm run 스크립트이름 등록 등록시에는 아래의 형태로 이름과 명령어를 key value형태로 입력한다. { "scripts": { "script_name": "echo some\_command\_here" } } 어떤 스크립트 실행시, 한개의 스크립트로 여러개의 명령어를 실행하고 싶거나 특정 스크립트 이전이나 이후에 특정한 명령어를 실행하고 싶은 경우 아래의 두가지 방법 사용이 가능하다. 예시 > 테스트를 실행하기 전에 일부 테스트 로그를 삭제하고 나..
canvas의 영역을 클립보드에 붙여넣는 과정 정리 + 코드 이전에 간단하게 html2canvas로 화면의 element를 클립보드에 복사하는 방법에 대해서 정리했었다. https://im-designloper.tistory.com/66 [ html2canvas ] html을 이미지로 클립보드에 복사하기 ( with Vue.js ) html로 작성된 특정 영역을 클립보드에 이미지로 복사해야 하는 상황에 사용! html2canvas 설치 // Install NPM npm install --save html2canvas // Install Yarn yarn add html2canvas https://html2canvas.hert.. im-designloper.tistory.com 아래에서 html2canvas로 html element를 canvas로 변환한 이후에 클..
태스크 러너, 모듈 번들러, 모듈, 번들링, 웹팩 개념 한번에 정리! 1. 테스크 러너 : Task Runner 프로그램 개발에 수반되는 반복 작업들을 스크립트로 작성해 한 번에 실행되도록 한다. ex ) 번들링이나 불필요한 공백 제거하기, js 파일 난독화 등의 일 등이 있다. npm scripts npm scripts 사용 시 다른 태스크 러너의 환경 설정이나 규칙과 독립적으로 실행된다. 바로 npm 툴을 다룰 수 있으며 사용시 package.json을 통해 중앙화된 패키지 관리 및 번들링 수행이 가능하다. 자주 사용되는 명령어 더보기 npm init: 새로운 패키지나 프로젝트를 만들 때 쓰는 명령어 npm install (package-name) : 루트에 node_modules 폴더가 생성되고 거기에 (package-json)을 설치하는 명령어 npm update ..
[ FrontEnd ] 웹컴포넌트와 Shadow DOM 웹 컴포넌트 정리하다가 신기한 부분을 발견해서 정리해봅니다 : ) Shadow DOM이라고 들어보기는 했지만 감히 찾아볼 생각은 안하고 있었는데, 우연한 기회에 스터디 하다가 찾은 내용으로 ! 모든 홈페이지에서 확인해볼수 있는 방법과, 간단한 실습으로 실제로 Shadow DOM을 삽입하는 방법을 설명하고자 합니다. 웹 컴포넌트 웹 컴포넌트는 컴포넌트 기반 프로그래밍을 웹에서도 적용할 수 있도록 W3C에서 새로이 정한 규격이다. 웹 표준을 기반으로 구축되었으며, 최신 브라우저 및 모든 JavaScript 라이브러리, 프레임워크에서도 사용할 수 있다. 따라서 웹 컴포넌트를 이용하여 코드를 작성하면 Vue나 React와 같은 라이브러리, 프레임워크에 의존하지 않고 상호 운용이 가능하게끔 작성할 수 있다. Sh..
[ DataBase ] RDB, RDBMS, SQL, NOSQL 간단 개념정리 데이터베이스 종류인 RDB, RDBMS, SQL, NOSQL에 대한 간단한 개념 정리!! 일단 자세한 설명전에 간단하게 용어들의 관계를 정의하자면 아래와 같습니다. 🅐RDB(관계형 데이터베이스)를 🅑RDBMS(데이터베이스를 관리)로 생성하고 수정하고 관리한다. 🅒SQL은 RDBMS를 관리하기 위해 설계된 특수 목적의 프로그래밍 언어이고, 🅓NOSQL(비관계형 데이터베이스)는 RDB 형태의 관계형 데이터베이스가 아닌 다른 형태의 데이터 저장방식. RDBMS가 클라이언트/서버 환경에 맞는 데이터 저장기술이라면, NOSQL은 클라우드 환경에 맞는 저장 기술 아래에 더 자세한 설명을 정리해두었습니다 : ) 🅐 RDB Relational Database RDB는 관계형 데이터 모델을 기초로 두고 모든 데이터를 2..

티스토리툴바