본문 바로가기
728x90

etc17

HTTP vs 이벤트(Event) 🔍 HTTP vs 이벤트(Event) — 차이점, 원리, 장단점, 사용 시점까지 완전 정리웹 개발이나 서버 아키텍처를 공부하다 보면 흔히 접하게 되는 개념이 바로 HTTP 통신과 이벤트 기반 처리입니다.하지만 두 개념의 구조, 동작 방식, 사용 목적은 완전히 다릅니다.이번 포스팅에서는 HTTP와 이벤트의 차이점을 개념부터 동작 방식, 장단점, 사용 시점까지 깔끔하게 정리해 드립니다.✅ 1. 개념 요약항목HTTP이벤트 (Event)정의클라이언트가 서버에 요청하고 응답을 받는 방식특정 사건이 발생하면 미리 등록된 함수가 실행되는 구조방향단방향 요청-응답 구조비동기, 반응형 처리주체클라이언트가 주도이벤트 발생자가 주도예시API 요청, 웹페이지 불러오기버튼 클릭, WebSocket 메시지 수신✅ 2. 동작 방.. 2025. 5. 7.
[면접 대비] 브라우저에 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.
728x90