나의 FE피봇이야기 (182) 썸네일형 리스트형 [Browser]브라우저 구조와 작동원리 업데이트 2024.3.25 공통 브라우저 구조 1. User Interface 사용자 인터페이스는 브라우저 상단 표시줄로, 컨트롤이 있는곳. 여기에는 URL을 입력하는 공간, 뒤로/앞으로 가기 버튼, 탭과 설정 옵션이 있는 공간이 포함. 2. Browser engine 브라우저 엔진은 사용자 인터페이스와 렌더링 엔진 사이의 다리 역할을 합니다. 사용자의 입력을 기반으로 렌더링 엔진을 쿼리하고 조작합니다. 3. Render engine 기본 기능은 '' 및 관련 기호 및 속성을 찾아 HTML을 구문 분석한 다음 CSS를 구문 분석하고 마지막으로 스크립트를 구문 분석하는 것입니다. 주목해야 할 점은 모든 구문 분석이 병렬로 진행된다는 점입니다.( Parsing 진행순서 HTML -> CSS -> JS) CS.. [Browser]CPU와 GPU를 통해 할당 받는 Process 애플리케이션을 시작하면 프로세스가 생성됩니다. 프로그램이 작업을 돕기 위해 스레드를 생성할 수도 있지만 이는 선택 사항입니다. 운영 체제는 프로세스에 작업할 수 있는 메모리의 "슬래브"를 제공하며 모든 애플리케이션 상태는 해당 개인 메모리 공간에 보관됩니다. 애플리케이션을 닫으면 프로세스도 사라지고 운영 체제에서 메모리를 확보합니다. When you start an application, a process is created. The program might create thread(s) to help it do work, but that's optional. The Operating System gives the process a "slab" of memory to work with and all ap.. [CSS]Display and visibility block : div inline : span div{ background-color : tomato; } span{ bakcgorund-color : aliceblue; } width & height : 100px div{ background-color : tomato; width : 100px; height : 100px; } span{ bakcgorund-color : aliceblue; width : 100px; height : 100px; } Display : inline div{ background-color : tomato; width : 100px; height : 100px; display : inline; } span{ bakcgorund-color : aliceblue; width :.. [Lecture]컴퓨터 네트워크 5강 : Message, Layer Detail 5 Layer Internet Protocol Stack 각 계층은 아래 계층의 서비를 제공받는 Service User / 윗 계층에게 서비를 제공하는 Service Provider. PDU(Protoco Data Unit)은 각 Protocol이 처리하는 기본 단위. 단 모든 층의 데이터 단위가 다름 Application (Message) Transpor (Segment) Network(Packet, Datagram) : 출발지로부터 도착지까지 Routing 수행 Link (Frame) : 한 Hop을 지나가는 일 수행 Physical : 4 : Application Layer: Where a Communication Originates The packet's history begins when a u.. [Lecture] 4강 / Chapter2 : Layers Application architecture 2 type(by HOST로 구분) - client-server - peepr-to-peer(P2P) Client-Server architecture 통신을 하는 주체는 프로그램이라고 함. 실행중인 프로그램을 프로세스(Process)라고 칭함. OS 관점에서. Server:precess that initiates communictation - always-on host - permanent IP address - data centers for scaling Clients:process that waits to be contacted - communicate with only server - do no communicate directly with each ot.. [HTMl]form&post w enctype 왜 인코딩(endcoding)이 필요한가? Chat GPT에게 물어보니 2가지를 이야기 해줬다. 1. 글씨와 바이너리 데이터를 읽을 수 있어서 2. 영어가 아닌 이상 character 인코딩이 필수 여서 The multipart/form-data encoding, enabled by the enctype attribute, allows the form data to be structured in a way that accommodates both text and binary data. If your form contains non-ASCII characters, such as accented letters or characters from languages other than English, using .. [HTML]Radio button 단일 선택 방법 Radio with Name label을 통해서 라디오 버튼을 묶지 않으면 단일 선택일 할 수 없다. Title Mr. Ms. PhD. 하지만 여기서 각 input에 name="title"로 묶으면 단일 선택으로 변경된다. Title Mr. Ms. PhD. [Lecture]Network 3강 : 1.4 delay, loss, throughput in networks One-Hop(Link) Delay 1. Processing delay(routing table lookup&swiching) 2. Queueing delay(output buffer at router when data be crowed) 3. Transmission delay (bit --> singal depanding on a cable performance) 4. Propagation delay(router to router) Nodal processing - routing table lookup & switching from input port to output port(store and forward) 1. Check bit erros 2. Determine output link Queuein.. [Lecture]Network 2강, Internet Structure. Physical Link : transmitter -> Receiver Guided media : signals propagate in solid. copper(Ethernet), fiber(HFC) , coax Unguided media : signals propagate freely. no physical "wire", radio link type ex) WIFI, Cellular(wide-area), terrestrial microwave, satellite End systems --> access networks --> links --> access network--> End systerms 1.3 Netwrok core : packet switiching, circuit switching, ne.. [Lecture]Network 1강 Internet is network of networks Network structure network edge == millions of connected computing devices : hosts = end systems network core == packet switches : foward packedts(chunks of data) : routers and switches access network, physical media == communication links : fiber, copper, radio, satellite. Protocol Protocols define format, order of messages sned and received among network entities.. [CSS]Margin collapse into each other Margin서로 상하좌우 충돌할 경우 margin 이 작은쪽이 큰 쪽에 먹힘 1. 상/하 마진이 겹칠때 ==> 무조건 큰쪽 마진으로 사용 2. 빈 요소의 상/하 마진이 겹칠 경우 ==> 빈 요소의 마진 Top or Bottom 1개만 남음(위 아래로 박스에 마진이 붙었을 지라도) 3. 부모 박스와 자식 박스의 상/하 마진이 겹칠때 ==> 무조건 큰쪽 마진으로 사용 - 부모의 마진이 자식의 마진보다 클때 - 부모의 마진이 자식의 마진보다 작을 때 아래 사이트가 설명 잘 해놓음 https://seons-dev.tistory.com/entry/css-Collapsing-Margin The Basic Concepts What’s important to know is : Margin collapse only ha.. [HTML] Loading="lazy" 렌더링 속력 올리기 Lazy loading is a strategy to identify resources as non-blocking (non-critical) and load these only when needed. It's a way to shorten the length of the critical rendering path, which translates into reduced page load times. From MDN 지연 로딩은 리소스를 비차단(중요하지 않음)으로 식별하고 필요할 때만 로드하는 전략입니다. 이는 중요한 렌더링 경로의 길이를 단축하여 페이지 로드 시간을 단축하는 방법입니다. 적용 지연 로딩은 애플리케이션의 여러 순간에 발생할 수 있지만 일반적으로 스크롤 및 탐색과 같은 일부 사용자 상호 작용.. [HTML]링크를 연결 할 때 키워드 만들기 Link 주의사항 1. 전체 주소를 사용하는 것은 피할 것 2. "여기 클릭(links to)"을 넣는 것은 피할 것. 왜냐하면 우리는 다 알고 있으니까 3. 최대한 간소화해서 넣을 것 4. "Click here"는 피하라. 어떠한 설명도 없이 클릭 이라는 것은 피할 것. 결론 짦게 쓰고 뭐에 대한 것인지 설명할 것 [ 일상]매니저로서의 마지막 오늘은 공식적으로 팀내 직원들에게 나의 마지막을 고하는 자리였다. 이곳에서 2년동안 일했다. 그리고 다른 곳에서 약 11개월을 일했다. 처음 매니저로 일할 땐 정말로 '나는 이런곳에 있는 사람이 아니다!' 라고 생가하고 일을 했다. 그래서 그런지 그때는 분노도 참 많았다. 지금도 종종 이런 생각이 들지만 나이가 있어서 그런지 아니면 운동을 해서 고통에 대한 역치가 높아져서 그런지 그래도 감내하려고 노력한다. 솔직히 좀 걱정은 많다. 한국 사회는 유교사회이면서 나이 사회이다. 현재 있는 곳에서도 나보다 어린 선임들이 있었지만 나이가 많으면 일단 윗 선임들은 불편해 한다. Front-End로의 전환은 상당히 기대도 되지만 더 많은 불확실성을 가지고 있다. [Front-End]HTML에서 토큰화와 어휘분석? 브라우저에서 HTML의 맥락에서 토큰은 마크업 언어의 가장 작은 개별 단위를 의미합니다. 브라우저는 HTML 문서를 구문 분석할 때 콘텐츠를 토큰으로 분류하고, 이 토큰은 DOM(문서 객체 모델) 트리를 구성하는 데 사용됩니다. HTML 구문 분석에는 네 가지 주요 유형의 토큰이 있습니다: 시작 태그: HTML 요소의 시작을 나타냅니다. 여기에는 태그 이름과 요소와 관련된 모든 속성이 포함됩니다. 끝 태그: HTML 요소의 종료를 나타냅니다. 태그 이름 앞에 슬래시(/)가 오는 태그 이름으로 구성됩니다. 코멘트: 문서의 HTML 주석을 나타냅니다. 로 끝납니다. 문자: HTML 요소 내의 일반 텍스트 또는 콘텐츠를 나타냅니다. 브라우저는 HTML 문서를 수신하면 "토큰화(Tokenization)" 또는 .. [Front-End] 브라우저 엔진과 렌더링 엔진의 차이는 뭘까? 웹 브라우저의 맥락에서 '브라우저 엔진'과 '렌더링 엔진'은 웹 페이지 렌더링을 담당하는 동일한 기본 구성 요소를 지칭하기 때문에 종종 같은 의미로 사용되기도 합니다. 하지만 두 용어 사이에는 미묘한 차이가 있을 수 있습니다: 브라우저 엔진: 레이아웃 엔진이라고도 하는 브라우저 엔진은 웹 콘텐츠 구문 분석 및 처리와 관련된 다양한 작업을 처리하는 웹 브라우저의 핵심 구성 요소입니다. 여기에는 렌더링 엔진이 주요 구성 요소 중 하나로 포함되어 있습니다. 브라우저 엔진은 렌더링 외에도 네트워킹(요청 및 응답 처리), HTML 및 CSS 구문 분석, JavaScript 실행 처리, 보안 프로토콜 관리, 사용자 상호 작용 처리 등의 작업도 관리합니다. 렌더링 엔진: 렌더링 엔진은 브라우저 엔진의 하위 집합입니다.. [Front-End]Compiler compiler is essentially a translater that translates one language of which the language of the programmer into a systems language. input -> lexical analysis -> token -> syntacital analysis Token 토큰화란? 주어진 텍스트에서 토큰(token)이라 불리는 단위로 나누는 작업을 토큰화(tokenization)이라고 한다. 토큰의 단위가 상황에 따라 다르지만, 보통 의미있는 단위로 토큰을 정의한다. 참조 https://www.youtube.com/watch?v=r6vNthpQtSI [Front-end]HTML, MarkUp What is Markup Language ? 구조화된 언어를 지칭함 Markup : 마크업(문서의 활자·조판 지정 표시) from Naver. 정리하면 뭔가로 마크업이 되어있는 구조화된 언어(It's describes the text that it's marking up) --> HTML 이라는 것 마크업이란 건 아래의 것을 의미함 , , , 요런식으로 구조화 되어있는 것을 Markup Language 라고 함 HTML's Element is a node as well. Element = node Attribute = class, id etc 속성은 요소에 실제론 나타내고 싶지 않지만 추가적인 내용을 담고 싶을 때 사용합니다. 위에는 나중에 스타일에 관련된 내용이나 기타 내용을 위해 해당 목표를 구분할.. [Front-End]Parsing 이란 사전적 의미 parsing : 어구의 해부, 문의 분석 parse : 어구의 해부, 문의 분석 Parsing a document means translating it to a structure the code can use The result of parsing is usually a tree of nodes that represent the structure of the document. This is called a parse tree or a syntax tree. 문서를 파싱하는 것은 코드가 사용할 수 있는 구조로 변환하는 것을 의미합니다. https://javascript.info/dom-nodes DOM tree javascript.info 파싱은 2개가 있음 어휘 파싱(lexical)과 구분.. [Front-End] a Web rendering Engine 솔직 문서를 읽어도 헷갈렸는데 영상찾아보니까 좋은 자료가 있어서 영상으로 이해함 https://www.youtube.com/watch?v=o3_u1azhfJw https://www.youtube.com/watch?v=z1Jj7Xg-TkU A browser Architecture 브라우저 작업 진행 시나리오 1. 사용자가 주소표시줄(사용자 인터페이스)에 URL을 입력 2. 브라우저 엔진에게 URL(입력받은 주소값) 전달 3. 브라우저 엔진은 URL에 해당하는 데이터를 자료저장소(caching)에서 먼저 찾아봄 4-1. 캐싱된 자료가 있다면, 랜더링 엔진은 브라우저 엔진으로부터 자료를 받아 HTML, CSS, image 등을 파싱 4-2. 캐싱된 자료가 없다면, 서버에 요청해서 자료를 찾고 런더링 엔진은 통.. 이전 1 ··· 5 6 7 8 9 10 다음
