기술 블로그

https://developer.mozilla.org/ko/docs/Web/HTTP/Status 작성중

https://developer.mozilla.org/ko/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context 쌓임 맥락 - CSS: Cascading Style Sheets | MDN 쌓임 맥락(stacking context)은 가상의 Z축을 사용한 HTML 요소의 3차원 개념화입니다. Z축은 사용자 기준이며, 사용자는 뷰포트 혹은 웹페이지를 바라보고 있을 것으로 가정합니다. 각각의 HTML 요소는 developer.mozilla.org 만약 아래와 같이 div 요소 3개가 있다고 하자 각각의 z-index는 검은색 2 빨간색 1 빨간색의 자식요소인 파란색은 3이다. 코드는 아래와 같다 . .black { backgroun..

https://blog.jaegwan.com/99 [TIL] 웹 브라우저 이해 브라우저 유저 인터페이스: url 입력창을 포함한 웹페이제 외적 클라이언트 요소 브라우저 엔진: 유저 인터페이스와 렌더링 엔진을 중재 렌더링 엔진: 리소스를 파싱하고 결과물을 바탕으로 페 blog.jaegwan.com 브라우저 렌더링에 대해 위 게시글에서 더 자세히 설명했다. 돔 객체 수정시 일반적으로 수정은 리플로우 단계부터 일어난다. 리플로우에서는 크기와 위치를 재조정하는 과정을 거치며 리페인트에서는 스타일을 입히는 과정을 거친다. 리플로우를 일으키는 작업을 하면 순차적으로 리페인트까지 일어나게 되는것이다. 만약 특정 요소의 위치를 변경하거나 크기를 키워야한다면 transform을 조작하는 방법과 position을 조작하는..

http란? 데이터 전달을 위한 통신 프로토콜로 클라이언트 서버 모델에서 사용되며 비 상태성을 지닌다. 보완 방법: 쿠키 세션 쿠키 - 클라이언트에서 저장하는 작은 데이터 셋 * 쿠키에 만료기간 있음 세션 - 서버 단에서 클라이언트를 식별하기위해 각 클라이언트마다 세션 아이디를 할당하고 쿠키를 내려보내 통신시 인증하는 구조 - 세션정보는 서버에 저장됨 - 일반적으로 세션은 브라우저 종료시 종료됨 OSI 7 계층이란 네트워크 프로토콜이 통신하는 구조 응용 어플리케이션 프로세스와 통신하는 구간 http 구간 세션 세션을 유지하고 암호화 , 직렬화등을 담당 동기화와 오류 복구 담당 전송 포인트 투 포인트 TCP/UDP등이 해당 양 끝단 신뢰성있는 전송 담당 데이터의 분할 및 재조립 네트워크 ip 계층이며 데이..

브라우저 유저 인터페이스: url 입력창을 포함한 웹페이제 외적 클라이언트 요소 브라우저 엔진: 유저 인터페이스와 렌더링 엔진을 중재 렌더링 엔진: 리소스를 파싱하고 결과물을 바탕으로 페이지를 그려냄 webkit, gecko 등 네트워크 레이어: http(s)프로토콜을 이용해 외부 리소스를 얻어오고 서버에 요청을 보낼 때 사용 js 인터프리터: 자바스크립트를 해석하고 실행 ui 백엔드: 렌더트리를 기반으로 운영체제의 인터페이스를 따르는 ui를 처리 자료 저장소: 데이터를 브라우저 자체 로컬에 저장하기 위한 레이어 접근 및 저장에 활용 로컬스토리지 등 동작 유터 인터페이스에서 url 입력받음 브라우저 엔진에서는 검색어인지 url인지 검증 렌더링 엔진을 거처 네트워크 레이어에서 리소스 요청 리다이렉션(3xx..

https://blog.jaegwan.com/96 [TIL] GCP Next.js deploy 최근 서류합격한 기업의 우대사항을 보니 GCP 배포가 기재되어 있어 면접 전 GCP 배포를 경험해보고자한다. 구글 클라우드에 가입 후 원할한 진행을 위해 카드 등록도 해준 후 배포하기 위한 프로 blog.jaegwan.com 이전 게시글에 이어서 작성되는 글이다. "CI/CD"란 "Continuous Integration"과 "Continuous Delivery" 또는 "Continuous Deployment"의 약어로, 소프트웨어 개발 및 배포 프로세스를 자동화하고 효율화하기 위한 방법론과 관련된 도구와 절차를 통칭합니다. GCP내의 CI/CD를 검색해서 Cloud Build를 클릭한다. 사용을 클릭한다. 이..