etc16 [면접 대비] 브라우저에 google.com을 입력하면 무슨 일이 일어날까? 개요웹 개발자나 네트워크 엔지니어 면접에서 자주 나오는 질문 중 하나가 **"브라우저에 google.com을 입력하면 무슨 일이 일어나는가?"**이다. 이 질문은 웹의 동작 원리, 네트워크 구조, 브라우저 렌더링 과정 등을 얼마나 이해하고 있는지 평가하는 데 사용된다. google.com을 입력하고 엔터를 누르는 순간부터 웹페이지가 표시될 때까지의 전체 흐름에 대하여 정리했다.1. 사용자가 google.com 입력 후 Enter를 누름먼저 사용자가 브라우저의 주소창에 google.com을 입력하고 Enter를 누르면, 브라우저는 이 URL을 처리하기 시작2. DNS(Domain Name System) 조회브라우저는 google.com을 IP 주소로 변환하기 위해 DNS 요청을 보냄.로컬 캐시 확인: 브.. 2025. 2. 10. [VSCode] ctrl+enter 단축키 변경 기존 : 다음줄로 이동업데이트 후 : GitHub Copilot Suggestions 열림 -> 다시 기존으로 바꾸는 방법!!! 단축키 설정에서 직접 변경Ctrl + K Ctrl + S를 눌러 키 바인딩 설정을 엽니다.ctrl+enter를 검색합니다.GitHub Copilot: Accept Inline Suggestion 항목이 있다면 우클릭 → 키 바인딩 제거를 선택합니다.여기까지 하면 기존처럼 다음줄로 이동이 작동될 것! 여전히 안된다면 4번을 해보자!!(Insert Line After 항목을 찾아 Ctrl + Enter를 다시 할당합니다.)이제 다시 Ctrl + Enter를 입력하면 자동완성 대신 원래대로 다음 줄로 이동할 갓! 😊 2025. 2. 5. [스크랩] REST API 관점에서 바라보는 HTTP 상태 코드(HTTP status code) https://sanghaklee.tistory.com/61 REST API 관점에서 바라보는 HTTP 상태 코드(HTTP status code) REST API 관점에서 바라보는 HTTP 상태 코드(HTTP status code) TOC Introduction HTTP 와 REST HTTP Status Code 2XX Success 4.1. 200 OK 4.2. 201 Created 4.3. 202 Accepted 4.4. 204 No Content 4XX Client errors 5.1. 400 Bad Request 5.2. 401 Unauthori sanghaklee.tistory.com HTTP 와 REST HTTP(HyperText Transfer Protocol)는 웹 환경에서 정보를 주고받기.. 2023. 8. 31. [Ext Js] 12 MVVM 아키텍처 MVC 대체하기 위한 아키텍처MVC : 각 뷰를 통제하는 controller를 제어하기 어렵고, view와 controller가 N:N구조로 만들어지다 보면 복잡Model과 Controller를 View에 종속적인 구조로 구성한 View기준 아키텍처.View가 종료되면 ViewController와 ViewModel은 같이 소멸.→ ViewModel뷰가 보여주는 화면을 대신.통신을 위한 데이터 레이아웃이 아니다!→ ViewController뷰의 이벤트나 필요한 메소드를 구현해 view와 상호 연동.전역적인 글로벌 controller와는 달리, 자신과 연결된 View에 한하며 이벤트나 참조 등의 구현이 단순Reference 이용데이터 바인딩 이용 : viewModel의 데이터를 이용기본 구성 만들기cmd창에.. 2023. 8. 31. [Ext Js] 07 위젯(그리드 & 트리) draganddrop 그리드내부 아이템을 가지고 있는 컨테이너Ext.grid.Panel 이라는 패널의 일종Ext.grid.Panelxtype: 'gridpanel'Ext.grid.Panelxtype: 'grid'그리드는 Store를 필요로 함스토어 : 데이터를 가지고 있는 저장소. 서버나 로컬의 데이터를 가져와 보관.데이터의 레이아웃은 Model로 정의.그리드 출력해보기Ext.onReady(function() { var store = Ext.create('Ext.data.Store', { fields: ['name', 'email', 'phone'], groupField: 'nation', data: [ { nation:'대한민국', name:'김하나', email:'hong@test.com', phone:'999-9.. 2023. 8. 31. [Ext Js] 04 레이아웃 초기 ExtJS에서 태그 안에는 아무것도 없지만, app.js에 코드를 작성하면 미리 정의되어 있는 컴포넌트들이 자동으로 삽입되어 index.html에 보임ExtJS 컴포넌트들은 기본적으로 block 속성 (위-아래로 정렬)1. panel레이아웃을 구성할 때 쓰이는 Container.하위 구성요소를 포함할 수 있음renderTo:Ext.getBody() →어디에 보여지는지 : body안에Ext.onReady(function(){ Ext.create("Ext.panel.Panel",{ region: 'center', width: 500, height: 400, border: true, title: 'Hello', html: '&.. 2023. 8. 31. [Ext Js] 03 Ext JS 동작의 기본 위젯화면을 구성하는 집합으로 목적에 맞는 다양한 기능과 외형을 갖음각 컴포넌트는 xtype을 이용하여 정의xtype사용하는 이유 : Ext.create문을 이용하는 것 보다 짧고 간결하기 때문에위젯의 실시간 추가child widget을 실시간으로 추가하려면 add메소드를 사용add메소드는 일반적으로 Ext.create문을 이용하여 생성하고 사용쿼리Ext.ComponentQuery.query여러 건인 경우 : 배열 형태의 인덱스 값을 추가하여 처리ex) Ext.ComponentQuery.query('datafield')[0];ex) name속성이 추가되었을 경우 Ext.ComponentQuery.query('datafield[name=myDateField1]')[0];Ext JS 6에서는 id를 읽어올 수.. 2023. 8. 31. [Ext Js] 02 클래스 디버깅console.log(’…’)MVVM 아키텍처 사용 시, F12-Network 탭에서 requires한 파일이 정상적으로 로딩되었는지 확인클래스 정의객체 정의 → Ext.define(’클래스명’, {…});클래스는 일반속성과 config 속성을 가질 수 있음config 속성 : 설정과 같은 속성. 클래스 생성시 속성으로 인정config:{ name:null }과 같이 config 속성으로 name을 부여할 수 있음config에 속성을 설정할 경우 → 해당 속성은 자동으로 get, set 접두어를 붙여 메소드로 사용 가능 → this.getName(), this.setName(’설정값’)생성자 함수는 처음 클래스가 생성될 때 자동으로 constructor라는 생성자가 추가됨constructor 생성자.. 2023. 8. 31. [Ext Js] 시작해보기 Ext JS는 고성능의 변형가능한 UI 위젯을 지원.다양한 벡엔드 소스에 맞출 수 있는 데이터 패키지 포함. 최소한의 조작으로 서버의 데이터를 가져와 사용할 수 있도록 지원다양한 화면에 적합한 레이아웃 매니저와 설정을 지원. 반응형 레이아웃을 이용하여 데스크탑, 모바일 또는 화면 크기에 따른 세부적인 제어 가능진보된 차트 패키지 지원.쉽게 사용하거나 변경할 수 있는 테마 지원.내부에서 사용하는 컨트롤러, 모델, 뷰컨트롤러, 뷰모델 등은 공유하여 사용 가능이를 위해 classic과 modern이라는 toolkit을 지원→ 프로젝트를 기본으로 생성하면, 클래식과 모던 두 개의 위젯을 포함한 프로젝트가 생성됨.센차 컴맨드를 이용해 프로젝트를 만들고 컴파일.센차 컴맨드작업공간 및 패키지 관리기본적인 applic.. 2023. 8. 30. 이전 1 2 다음
