본문 바로가기

STUDY/CS11

Reflow ,Repaint Reflow ,RepaintReflow란?웹 페이지 내에서 요소의 위치 또는 크기에 변화가 있을때, 변화된 레이아웃을 다시 계산 하는 과정을 말한다.크기 관련 속성width , height , padding , margin 등위치 관련 속성position , top , left 등레이아웃 속성display, flex, grid 등폰트 크기 관련 속성font-size , font-weight 등Repaint 란?웹 페이지 내에서 요소의 시각적인 표현에 변화가 있을 때 변화된 표현을 다시 계산하여 렌더 트리에 적용하는 과정색상 관련 속성color , background-color 등테두리 관련 속성border-color , border-radius 등Reflow 와 Repaint 의 성능상 차이점Reflow.. 2024. 8. 1.
프론트엔드 예상 질문 1 기술면접 준비REST ful APIREST ful API 는 HTTP 프로토콜 기반의 웹서비스 아키텍처 이다.REST API 를 제공하는 웹서비스고, HTTP 메소드(CRUD) 를 제공해 준다.클라이언드 - 서버 간의 통신을 가능 하게 하며, 일관적인 컨벤션을 통해 호환성을 높이기 위해 사용한다.HTTP 메서드GET : 서버에서 데이터를 요청하는 메소드이다.POST : 서버에 데이터를 전송하는 메소드이다.PUT : 서버에 데이터를 업데이트 하는 메소드 이다.DELETE : 서버에 있는 데이터를 삭제하는 메소드 이다.async / await비동기를 처리 할 수 있는 문법이다.async는 함수를 정의 할때 사용 하며, async로 정의 한 함수 내부에 await 키워드를 이용해 작업을 제어한다.await 가.. 2024. 8. 1.
URI, URL, URN 에 대해서 알아보기 URI, URL, URN 에 대해서 알아보기 URl (Identifier) 자원의 식별자 URL와 URN 을 감싸는 모체 URL (Locator) 자원의 위치로 자원 식별 URN (Name) 고유한 이름으로 자원을 식별 Protocol Domain Port Path To The File Parameters URI O O O O O URL O O O O X URL 과 URN의 차이점 URL은 리소스를 어떻게 얻을 것이고, 어디에서 가지고 와야 하는지를 명시하는 URI이다. URN은 리소스를 어떻게 접근할 것인지 명시하지 않고 경로와 리소스 자체를 특정하는 것을 목표로 하는 URI 이다. 2023. 1. 2.
하이퍼 텍스트 전송 프로토콜 (HTTP, Hyper Text Transfer Protocol) 하이퍼 텍스트 전송 프로토콜 (HTTP, Hyper Text Transfer Protocol) 이란? 웹 브라우저와 서버 사이에 HTML 문서와 같은 리소스 들을 주고 받을 수 있도록 해주는 통신 프로토콜 이다. 모든 데이터 교환의 기초이며, 클라이언트 - 서버 프로토콜이다. HTTP에서는 클라이언트가 서버에 요청 메세지를 보내고 서버는 클라이언트의 요청에 대한 응답을 반환한다. 연결 상태를 유지하지 않는 비 연결성 프로토콜이며, 요청과 응답(request, response) 방식으로 동작한다. 연결 상태를 유지하지 않는다는 말은 서버는 응답 메시지를 반환한 후에 클라이언트의 상태를 저장하지 않는다는 것입니다. 때문에 HTTP 프로토콜은 상태가 없는 프로토콜, 무상태성(stateless)라고도 불립니다... 2022. 12. 28.
교차 출처 리소스 공유 (CORS, Cross-Origin Resource Sharing) 교차 출처 리소스 공유 (CORS, Cross-Origin Resource Sharing) 란? HTTP 헤더 기반 메커니즘으로 브라우저가 리소스 로드를 허용해야 하는 자체 출처 이외 모든 출처(도메인, 스키마 , 포트)를 서버가 표시 할 수 있도록 한다. , , , 태그 → 기본적으로 Cross-Origin 정책을 지원함 태그의 href 에서 다른 사이트의 .css 리소스에 접근 하는 것이 가능 태그의 src 에서 다른 사이트의 .png .jpg 등의 리소스에 접근하는 것이 가능 태그의 src 에서 다른 사이트의 .js 리소스에 접근하는 것이 가능 (type = “module” 속성은 제외) XMLHttpRequest, Fetch API → 기본적으로 Same-Origin 정책을 따름 다른 도메인에게 .. 2022. 12. 28.
클라이언트 사이드 렌더링(CSR, Client Side Rendering) 클라이언트 사이드 렌더링(CSR, Client Side Rendering) 이란? 클라이언트(브라우저) 가 렌더링을 처리 하는 방식이다. 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 모든 처리를 하게 된다. 사용자들의 PC성능의 향상으로 많은 처리 동작 들이 무리 없이 수행 할 수 있게 되며, 자바스크립트의 표준화가 잘 되어짐에 따라 React, Vue와 같은 CSR 프레임워크 라이브러리들이 나타나게 된다. 사이트에 접속 한다. 서버에서 index 파일을 받아온다 ( HTML 파일이 아무것도 없기 때문에, 빈 화면 ) html 파일에 링크되어 있는 모든 로직이 담겨있는 js 파일을 클라이언트로 요청한다. 받아온 js 파일로 인해 동적으로 html 사용자에게 보여지고 클릭 할 수 있게 된다. CSR.. 2022. 12. 28.
서버 사이드 렌더링(SSR, Server Side Rendering) 서버사이드 렌더링(SSR, Server Side Rendering) 이란? 클라이언트에서 모든 것을 처리하는 방식이 아닌 서버로부터 html 파일을 받아와 페이지 전체를 렌더링 하는 방식이다. (JSP/Servlet 아키텍쳐 방식) 사이트에 접속 한다. 서버에서 이미 만들어진 index 파일을 받아오게 되고, 사용자가 볼 수 있다. ( js를 받아오지 않아서 동적으로 제어 할 순 없다) ( TTV ) 자바스크립트 파일을 서버에서 받아온다. 동적인 구현 클릭이나 인터랙션이 가능하게 된다. ( TTI ) 사용자가 사이트를 볼 수 있는 시간과 인터랙션을 할 수 있는 시간에 대한 공백이 존재하는 편이다. 장점 첫번째 페이지에 해당하는 문서만 브라우저에 우선 전달하여 렌더링을 하기 때문에 첫 페이지 로딩 속도가 .. 2022. 12. 28.
검색 엔진 최적화 (SEO, Search Engine Optimization) 검색엔진 최적화(SEO) 란? 검색 엔진은 웹 사이트 나 페이지의 데이터나 기능들을 봇이 읽어(크롤링)가서, 홈페이지의 구조와 기능을 파악하여 포털(검색엔진) 사이트에 노출을 시키게 된다. 이 과정에서 홈페이지의 구조와 페이지를 검색 엔진이 이해하기 쉽도록 개발하여, 상위에 노출 시킬 수 있도록 하는 작업을 검색엔진 최적화라 한다. 검색엔진 봇은 데이터를 크롤링 하는 과정에서 JavaScript 파일을 해석하지 못하고, html 문서 기준에서 정보를 수집해 가기 때문에 구조적 설계를 잘 해줘야 한다. CSR(Client-Side Rendering) 방식의 페이지 들의 경우 JS를 읽어 페이지를 구성해주는 형식이기에, JS를 사용하지 못하는 상태에서는 HTML문서에 아무것도 나타나지 않아, 검색 엔진이 제.. 2022. 12. 28.
아토믹 디자인 (Atomic Design) 개요 물질 순서로 화학의 개념을 웹에 적용하여, 인터페이스를 세분화한 디자인 시스템을 만드는 방법론 [출처] - Atomic Design Methodology 1. Atoms (원자) 원자는 모든 물질의 기본 구성 요소다. 각 원소마다 고유한 특성을 가지고 있으며, 더 이상 분해 할 수 없다. (가장 작은 단위) 2. Molecules (분자) 원자가 모인 원자의 그룹이다. 원자의 조합은 고유한 특성을 가지며, 원자보다 더 유동적인 작동이 가능하다. (원자의 그룹) 3. Organisms (유기체) 하나의 기능을 하는 분자들의 집합체이다. 이러한 유기체는 단순한 기능부터 매우 정교하고, 복잡한 기능이 있는 유기체에 이르기까지 다양하다. (분자의 그룹) 과학에서 나타나는 원자 - 분자 - 유기체 까지 의 .. 2022. 12. 27.
728x90

티스토리툴바