Ch.Covelope

브라우저 렌더링 파이프라인 가이드: 웹 페이지가 화면에 그려지 과정 들어가며: 우리가 보는 웹 페이지는 어떻게 만들어질까요?여러분은 웹사이트에 접속할 때마다 일어나는 일을 생각해보신 적이 있나요? 주소창에 URL을 입력하고 엔터를 누르는 순간부터 실제로 화면에 콘텐츠가 표시되기까지, 브라우저는 놀라운 작업을 수행합니다."구글 검색창이 어떻게 내 화면에 나타나는 걸까?", "인스타그램 피드는 어떻게 스크롤할 때마다 부드럽게 표시되는 걸까?" 이런 질문에 대한 답을 알기 위해서는 '브라우저 렌더링 파이프라인'을 이해해야 합니다.이 글에서는 HTML, CSS, JavaScript가 어떻게 픽셀로 변환되어 우리 화면에 표시되는지, 그 전체 과정을 차근차근 살펴보겠습니다.브라우저 렌더링 파이프라인: 6단계 여정브..

[목차] 개요브랜치 관리 명령어변경사항 관리병합 및 리베이스원격 저장소 관리특수 상황별 명령어Git Reflog를 활용한 복구 작업외부 링크1. 개요Git 현대 소프트웨어 개발에서 필수적인 버전 관리 도구입니다. 이 글에서는 실무에서 자주 사용되는 Git 명령어들을 체계적으로 정리했습니다. 특히 팀 협업 과정에서 유용하게 활용할 수 있는 명령어들을 중심으로 다루었습니다. 자주 사용되는 유용한 Git 명령어 모음1. 브랜치 관리 명령어브랜치 생성 및 전환# 새 브랜치 생성git branch 브랜치이름# 현재 브랜치 기준으로 생성과 동시에 전환git checkout -b 브랜치이름# 현재 모든 브랜치 확인 (원격 포함)git branch -a 브랜치 이름 변경# 현재 브랜치 이름 변경git branch -..

RSA RSA(암호화 알고리즘)는 공개 키 암호화 방식으로, 안전한 데이터 전송 및 정보 보호에 널리 사용되는 암호화 기술이다. RSA는 대표적인 공개 키 알고리즘으로 알려져 있으며 주로 적은 양의 데이터나 전자서명에 사용한다. 다음과 같은 원리로 작동한다: 1. 키 생성: - RSA 알고리즘은 두 개의 소수(p, q)를 선택합니다. 이 소수는 매우 큰 수로, 소인수 분해가 어려워야 합니다. - 소수 p와 q를 사용하여 공개 키와 개인 키를 생성합니다. 공개 키는 (N, e)로 표현되고, 개인 키는 (N, d)로 표현됩니다. - N은 p와 q의 곱으로, 큰 정수입니다. N은 공개되며 모듈러 연산에 사용됩니다. - e는 1보다 크고 (p-1)(q-1)과 서로소인 수로, 암호화에 사용됩니다. - d는 e에 ..

자료구조란 자료 구조는 데이터 값의 모임, 또 데이터 간의 관계, 그리고 데이터에 적용할 수 있는 함수나 명령을 의미한다. 자료구조는 서비스나 어플리케이션에서 필요한 데이터를 메모리에 어떻게 구조적으로 잘 정리해서 담아두고 관리하고 최종적으로 가장 효율적인 방식으로 필요한 데이터를 빠르게 접근하고 필요한 수정/삽입/삭제 를 할 수 있도록 도와준다. 한정적인 자원에서 메모리를 효율적으로 사용하기 위해서 필요하다 모든 목적에 부합하는 자료구조는 없으며 필요 목적에서 효율적인 자료 구조를 선택하여 효율을 높일 수 있다. 자료 구조는 알고리즘과 밀접한 관계 가 있는데 이유는 보통 자료구조가 선택되면 그에 적용할 알고리즘이 거의 명확해진다. 예) 배열이라면 반목문을 사용한 알고리즘 이라던지 즉 자료 구조가 효율적..

You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1) 얼마 전에 리액트로 프로젝트 완성 후에 웹의 이론적인 부분하고 타입스크립트 그리고 뷰를 조금 공부하느라 리액트를 안 쓰다가 오랜만에 강의를 보면서 시작하려는데 기본 세팅에서 에러가 발생했다. npx create-react-app my-app 입력후 아래 처럼 에러 메세지가 나왔고 내용은 더 이상 글로벌(전역) 설치를 지원하지 않으니 글로벌 설치를 제거하라는 거였다. You are running `create-react-app` 5.0.0, which is behind the latest release (5.0.1). We no longer support ..

SOP(same origin policy)-동일 출처 정책 CORS(cross origin resource sharing)-교차 출처 리소스 공유 여기서 origin 은 protocol , host, port SOP 어떤 출처(protocol , host, port = origin)에서 불러온 문서, 스크립트, 리소스가 다른 출처에서 가져온 리소스와 상호작용하는 것을 제한하는 브라우저 보안 방식. 예를 들어 SOP가 없다면 클라이언트가 우연히 악성 사이트에 접속해서 해커가 만든 스크립트가 실행되어 클라이언트의 개인 정보나 다른 민감한 정보가 있는 사이트에 요청을 보낸 뒤 그 응답 값을 다시 해커 서버로 보내 개인 정보를 탈취할 수 있게 된다. 하지만 SOP 정책으로 인해 해커의 스크립트 출처와 요청을 받..

쿠키 사이트에 방문, 이용할 때 브라우저에 저장되는 내용 (내 컴퓨터에 저장) 예) 우리가 어느 특정 사이트에 로그인을 하면 쿠키에 특정 사이트에 로그인한 기록을 가지고 다음에 자동으로 로그인을 할 수 있다. 브라우저를 닫았다가 다시 열어도 기록은 남아있다. (쿠키가 많이 쌓이면 오래된 기록은 삭제됨) 쿠키는 임의로 삭제 수정이 가능하고 로그인 정보 등 민감함 정보들이 있는데 쿠키는 클라이언트에 하드에 저장되므로 해당 컴퓨터를 다른 사람이 사용하거나 해킹당해서 접속하면 쉽게 노출될 수 있어 보안성이 낮다. 세션 쿠키와 비슷한 기능을 한다고 생각할 수 있다. 하지만 세션은 클라이언트가 아닌 서버 쪽에 저장된다. 그리고 쿠키의 생명주기와 다르다 쿠키는 브라우저를 닫아도 바로 삭제되지 않지만(유효기간 설정에 ..

브라우저가 웹 페이지를 랜더링 하는 과정 -DOM(Document Object Model)은 웹 페이지에 대한 인터페이스입니다 브라우저 렌더링 과정은 사용자가 페이지에 접속하여 HTML을 서버에서 내려받게 되면 이를 브라우저 렌더링 엔진에서 파싱(처리) 한다. 이렇게 "DOM 트리" 를 만들고, link 태그를 통해 CSS 파싱을 해서 "CSSOM 트리"를 결합한 것이 "렌더 트리" 가 되고, 레이아웃 작업에서 엘리먼트가 그려질 위치를 계산하고 페인트 단계에서 화면에 그려준다. 이 과정을 진행하다가 자바스크립트를 만나면 런타임 환경에 수행권한을 넘겨 자바스크립트를 파싱을 완료 할때까지 DOM 파싱은 중단된다. 호이스팅이란 함수 안에 있는 선언들을 모두 끌어올려 해당 함수 유효 범위의 최상단에 선언된거 처..

IDE ? IDE (Integrated development environment) 통합 개발 환경 이란 코딩, 디버그, 컴파일, 배포 등 프로그램 개발에 관련된 모든 작업을 하나의 프로그램 안에서 처리하는 환경을 제공하는 소프트웨어다. 최근의 통합 개발 환경(IDE)은 그래픽 사용자 인터페이스(GUI) 응용 프로그램 개발용 고속 개발 도구가 많다. 자세한 내용은 아래 링크에 기재되어 있다. https://ko.wikipedia.org/wiki/%ED%86%B5%ED%95%A9_%EA%B0%9C%EB%B0%9C_%ED%99%98%EA%B2%BD 통합 개발 환경 - 위키백과, 우리 모두의 백과사전 통합 개발 환경 위키백과, 우리 모두의 백과사전. ko.wikipedia.org 이번 수업에서는 goorm 의..