FE/Network 썸네일형 리스트형 FE/Network [성능 최적화] PageSpeed와 Lighthouse 코어 웹 바이탈(Core Web Vita) 페이지의 성능은 곧 사용자 경험과 관련이 있다. SEO 전략을 세우는 데 중요한 구글의 품질 평가 요소 중 한 축을 담당하는 코어 웹 바이탈은 개발 과정에서 빠뜨려서는 안 될 중요한 개념이다. 코어 웹 바이탈이란? 웹 페이지의 사용자 경험을 측정하는 중요한 지표들로 검색 엔진이 웹 페이지의 품질과 성능을 평가하는 데 사용된다. 로딩 시간 (Loading Performance) 최대 콘텐츠 렌더링 시간 (LCP, Largest Contentful Paint) 좋은 사용자 환경 제공을 위해서는 페이지가 처음 로드되기 시작한 후 2.5초 이내에 LCP가 발생해야 한다. 첫 바이트까지의 시간(TTFB), 콘텐츠가 포함된 첫 페인트(FCP) 역시 LCP 관련 문제를 진단.. FE/Network HTTPS * HTTPS의 필요성과 암호화 방식 - HTTPS에서 사용하는 대칭키, 비대칭키 방식 HTTPS란? 기존 HTML을 주고받는 프로토콜인 HTTP에 TLS 및 SSL 프로토콜을 더하여 보안 기능을 강화한 프로토콜이 HTTPS이다. 접속한 사이트가 보안된 웹 사이트인지 가장 쉽게 확인할 수 있는 방법은 뭘까? 바로 브라우저 화면의 주소 바 옆에 있는 자물쇠 아이콘을 눌러보면 된다. 해당 아이콘을 누르면 아래와 같이 “이 사이트는 보안 연결(HTTPS)이 사용되었습니다.”라는 메시지를 볼 수 있다. HTTPS는 HTTP Secure의 약자로, 단어 뜻 그대로 기존의 HTTP 프로토콜을 더 안전하게 사용할 수 있음을 의미한다. 이유는 HTTPS가 HTTP와 달리 요청과 응답으로 오가는 내용을 암호화하기 때문이.. FE/Network HTTP * 여러 종류의 HTTP의 특징 - HTTP의 무상태성과 비연결성 * HTTP 메시지 구성 중 하나인 헤더 - HTTP 헤더 중 바디를 설명하는 헤더인 표현헤더 - HTTP 헤더 중 요청과 응답에서 주로 사용되는 헤더 - HTTP 헤더 중 서버에 요청하는 콘텐츠를 협상할 수 있는 협상헤더 HTTP의 역사 응용 계층의 대표적인 프로토콜인 HTTP 역사는 다음과 같다. HTTP/1.1, HTTP/2는 TCP 기반이며 HTTP/3는 UDP 기반 프로토콜이다. HTTP 특징 1. 클라이언트 서버 구조 클라이언트가 서버에 요청을 보내면 서버는 그에 대한 응답을 보내는 클라이언트 서버 구조로 이루어져 있다. 2. 무상태 프로토콜 (Stateless) HTTP에서는 서버가 클라이언트의 상태를 보존하지 않는 무상태 프.. FE/Network [네트워크 계층 모델] OSI 7계층 & TCP/IP 4계층 모델 네트워크 통신을 계층별로 나눈 이유 통신 과정에서 일어나는 데이터 캡슐화 OSI 7계층 모델 해당 계층 모델은 ISO(International Organization for Standardization)라고 하는 국제표준화기구에서 1984년에 제정한 표준 규격이다. 왜 네트워크에 대한 표준 규격을 정해야만 했을까? 지금은 상상하기 어렵지만 같은 회사에서 만든 컴퓨터끼리만 통신이 가능했던 시절이 있었다. 따라서 다른 회사의 시스템이라도 네트워크 유형에 관계없이 상호 통신이 가능한 규약, 즉 프로토콜(Protocol)이 필요했다. 그래서 ISO에서는 제조사에 상관없이 공통으로 사용할 수 있는 네트워크 표준 규격을 정의했다. OSI 7계층 모델은 네트워크를 이루고 있는 구성요소들을 7단계로 나누고, 각 계층의.. FE/Network IP Packet과 TCP/UDP Packet * 네트워크의 탄생 배경 * IP와 IP Packet을 이용한 통신 방법의 개념과 한계 * IP Packet을 이용한 통신 방법의 한계를 보안하기 위한 TCP/UDP Packet 네트워크 흐름을 이해하기 위해서는 웹 통신을 가능하게 한 HTTP 통신의 흐름을 파악하는 것이 중요하다. 해당 포스팅에서 자세히 다루겠지만, 우선 HTTP 통신은 애플리케이션 계층에 속해 있다. HTTP 통신을 깊이 이해하기 위해서는, TCP와 UDP 같이 보다 낮은 레벨의 프로토콜도 학습해야 한다. 이를 위해 IP를 시작으로 TCP/UDP 그리고 HTTP까지 이르는 전체 통신 흐름을 살펴보겠다. 네트워크 탄생 배경 인터넷이 대중화되면서 네트워크는 컴퓨터 기술에서 빼놓을 수 없는 분야가 되었다. 지금 우리가 사용하는 인터넷 프로.. FE/Network [Network] Express의 미들웨어(Middleware) Express로 구현한 서버가 Node.js HTTP 모듈로 작성한 서버와 다른 점은 다음과 같다. 라우터를 제공한다. (이전 포스팅) 미들웨어를 추가할 수 있다. (해당 포스팅) 이번 포스팅에서는 미들웨어에 대해 알아보겠다. 미들웨어 (Middleware)란? 사전적 의미 미들웨어(서로 다른 여러 프로그램을 함께 운용할 수 있는 소프트웨어) software that acts as a bridge between an operating system or database and applications, especially on a network 미들웨어(Middleware)는 자동차 공장의 공정과 비슷하다. 자동차 공장에서는 컨베이어 벨트 위에 올려진 자동차의 뼈대에, 공정마다 부품을 추가한다. 모든 부품이.. (비)[Network] HTTP모듈을 Express로 리팩토링 보호되어 있는 글입니다. FE/Network [Network] SOP & CORS - CORS 동작 방식 - CORS 설정 방법 - node.js를 이용하여 서버 구축하기 같은 JavaScript를 사용하지만 node.js 환경에서 사용하는 코드에는, CommonJS나 모듈 등 브라우저에서 찾아볼 수 없는 다소 생소한 개념이 포함되어 있다. node.js에서 사용하는 이 개념들은 백엔드뿐만 아니라, 프론트엔드에서도 적극 사용한다. API 서버는 프론트엔드 개발자라도 구현할 수 있어야 한다. 새로운 서비스를 만들려고 해도, 필요한 데이터를 저장하거나 불러오는 기본적인 API 서버를 구현할 수 없다면 아무런 동적 활동을 할 수 없는 클라이언트만 구현하게 될 것이다. node.js에 대한 내용은 프론트엔트와 백엔드 등 웹 개발에서 공통적으로 사용하므로 반드시 알아야 한다. CORS 에러 웹.. FE/Network [Network] Effect Hook & Ajax 요청 * Effect Hook과 Ajax의 개념 및 활용 - side effect로부터 분리하여 React 컴포넌트를 만들기 (비즈니스 로직과 표현 영역 구분) - Effect Hook과 Ajax를 사용해 서버로부터 데이터를 받아오는 방법 - 컴포넌트 내에서 네트워크 요청 시, 로딩 화면과 같이 보다 나은 UI 만들기 - Effect Hook을 이용해 비동기 호출 및 AJAX 요청과 같은 side effect를 React 컴포넌트 내에서 처리하는 방법 Side Effect (부수 효과) 함수 내에서 어떤 구현이 함수 외부에 영향을 끼치는 경우 해당 함수는 Side Effect가 있다고 이야기한다. React에서는 Side Effect가 발생했다고 말하는 경우는 컴포넌트 내에서 fetch를 사용해 API 정보.. FE/Network [Network] Postman으로 HTTP 요청 및 응답 받아오기 Postman으로 HTTP 요청 해보기(API 테스팅) Open Weather Map의 Open API 사용해보기 웹 개발에서 사용하는 대표적인 클라이언트는 브라우저이다. 브라우저는 서버에 HTTP 요청을 보낼 수 있는 훌륭한 도구이지만, 주로 웹 페이지를 받아오는 GET 요청에 사용한다. 브라우저의 주소창에 URL을 입력하면, 해당 URL의 root-endpoint로 GET 요청을 보낸다. 테스트를 위해 GET 요청이 아닌 다른 요청을 보내려면, 개발자 도구의 콘솔 창에서 Web API fetch를 사용해야 한다. 테스트를 위해 매번 코드를 작성하는 것은 상당히 번거로운 작업이다. 매번 코드를 작성하는 것 대신에, HTTP 요청을 테스트할 수 있는 다양한 API 테스트 도구들이 있다. 이러한 API 테.. FE/Network [Network] Open API란? Open API 정부에서 제공하는 공공데이터가 있다. 공공데이터에 쉽게 접근할 수 있도록 정부는 Open API의 형태로 공공데이터를 제공하고 있다. 공공데이터 포털에 접속해 원하는 키워드를 검색하면, 해당 키워드와 관련된 API를 확인할 수 있다. 이 API에는 "Open"이라는 키워드가 붙어 있다. 글자 그대로 누구에게나 열려있는 API이다. 그러나 "무제한으로 이용할 수 있다"라는 의미는 아니다. API마다 정해진 이용 수칙이 있고, 그 이용 수칙에 따라 제한사항(가격, 정보의 제한 등)이 있을 수 있다. Open API를 간단하게 경험해 볼 수 있는 대표적인 페이지는, Open Weather Map이라는 웹 사이트에서 제공하는 날씨 API 이다. 이 웹사이트에서는 다음의 설명처럼 데이터를 제공한다.. FE/Network [Network] REST API * REST API * REST 성숙도 모델 * Open API와 API Key REST API는 웹에서 사용되는 데이터나 자원(Resource)을 HTTP URI로 표현하고, HTTP 프로토콜을 통해 요청과 응답을 정의하는 방식이다. 웹 애플리케이션에서는 HTTP 메서드를 이용해 서버와 통신한다. 예를 들면 GET을 통해 웹 페이지나 데이터를 요청하고, POST로 새로운 글이나 데이터를 전송하고, DELETE로 저장된 글이나 데이터를 삭제할 수 있다. 이처럼 클라이언트와 서버가 HTTP 통신을 할 때는 어떤 요청을 보내고 받느냐에 따라 메서드의 사용이 달라진다. 이런 사용은 아무런 규칙 없이 이루어지는 것이 아니다. 만약 혼자서 웹사이트를 만들고 관리한다면, API를 어떻게 설계하고 구현하든 상관이 없.. FE/Network [Network] AJAX, SSR, CSR * AJAX * SSR과 CSR - 차이점 (구현 사이트, 코드) https://web.archive.org/web/20030324214833/http://naver.com/ https://web.archive.org/web/20030324214833/http://naver.com/ web.archive.org 인터넷의 소중한 유물로 남아있는 2000년대 초반의 네이버...!!!! 확실히 현재의 네이버 화면과 비교했을 때, 웹 페이지 속에 동적인 요소가 없다. AJAX 웹페이지에서 일부분만 바꿀 때, AJAX를 사용한다. AJAX 의 뜻 AJAX는 Asynchronous JavaScript And XMLHttpRequest의 약자이다. JavaScript, DOM, Fetch, XMLHttpRequest.. FE/Network [Network] HTTP * HTTP Messages * HTTP Requests * HTTP Responses HTTP HTTP는 HyperText Transfer Protocol의 줄임말로, HTML과 같은 문서를 전송하기 위한 프로토콜이다. HTTP는 웹 브라우저와 웹 서버의 소통을 위해 디자인되었다. HTTP Messages HTTP Messages는 클라이언트와 서버 사이에서 데이터가 교환되는 방식이다. 전통적인 클라이언트-서버 모델에서 클라이언트가 HTTP Messages 양식에 맞춰 요청을 보내면, 서버도 HTTP Messages 양식에 맞춰 응답한다. HTTP Messages에는 다음과 같은 두 가지 유형이 있다. 요청(Requests) 응답(Responses) HTTP Messages는 몇 줄의 텍스트 정보로 구.. FE/Network [Network] URL과 URI, IP와 포트, 도메인과 DNS 브라우저의 작동 원리(보이지 않는 영역) * URL과 URI * IP와 포트 * 도메인과 DNS * 크롬 브라우저 에러 '내가 꿈꾸는 세상은 전 세계가 네트워크로 연결된 상태에서 서로의 자료를 공개하고 이렇게 공개된 자료를 하이퍼텍스트를 이용해 공유할 수 있는 세상이다.' Sir Timothy John Berners-Lee : WWW의 아버지 - 하이퍼텍스트 문서를 작성할 수 있는 마크업 언어 HTML - 하이퍼텍스트를 전송하는 프로토콜 HTTP - 웹 상의 자원을 모두가 접근할 수 있도록 만든 식별자 URL https://www.lgcns.com/blog/it-trend/17563/ 웹의 발명 - 팀 버너스 리(Tim Berners-Lee) - LG CNS 2015년 크리스마스, 월드 와이드 웹(Wor.. FE/Network [Network] 웹 애플리케이션 아키텍처 (클라이언트, 서버, HTTP, API) * HTTP에서 사용하는 클라이언트 - 서버 아키텍처 * 브라우저의 작동원리를 이해하기 위한 네트워크 기초 지식 * 클라이언트와 서버가 통신하는 방법인 API '내가 꿈꾸는 세상은 전 세계가 네트워크로 연결된 상태에서 서로의 자료를 공개하고 이렇게 공개된 자료를 하이퍼텍스트를 이용해 공유할 수 있는 세상이다.' Sir Timothy John Berners-Lee : WWW의 아버지 - 하이퍼텍스트 문서를 작성할 수 있는 마크업 언어 HTML - 하이퍼텍스트를 전송하는 프로토콜 HTTP - 웹 상의 자원을 모두가 접근할 수 있도록 만든 식별자 URL https://www.lgcns.com/blog/it-trend/17563/ 웹의 발명 - 팀 버너스 리(Tim Berners-Lee) - LG CNS 201.. ⬆︎ 이전 1 다음
