network8

[Chrome]크롬 개발자 도구 네트워크 탭에서 유형별로 필터링 크롬 개발자 도구 네트워크 탭에서 유형별로 필터링 크롬 개발자 도구의 네트워크 탭에는 필터 기능이 존재하며 유형별로 요청(Request)을 필터링할 수 있습니다. 이번 포스팅은 요청(Request)을 유형별로 필터링하는 방법과 각 유형에 대해 간략하게 설명합니다. ※ Wasm과 매니페스트(manifest) Wasm은 WebAssembly의 약자이며, JavaScript가 아닌 다른 프로그래밍 언어로 작성된 코드를 호출하도록 하는 기술입니다. 매니페스트(manifest)는 웹 애플리케이션에 대한 정보를 JSON으로 표현하는 파일입니다. Wasm와 매니페스트에 대한 자세한 정보가 없어서 설명은 생략합니다. 다중 선택 여러 유형을 동시에 필터링하려면 Mac은 Command, Windows는 Control를 누.. 개발자 도구/크롬(Chrome) 2022. 11. 2.

[Chrome]크롬 개발자 도구 네트워크 탭에서 요청(Request) 검색 방법 크롬 개발자 도구 네트워크 탭의 필터 크롬 개발자 도구의 네트워크 탭 좌측 상단에 깔때기 모양의 필터 아이콘이 존재합니다. 필터 아이콘을 선택하면 다음 스크린샷처럼 필터 기능이 활성화됩니다. 이번 포스팅은 필터 기능에서 필터 검색창과 반전 사용 방법을 소개합니다. 텍스트로 Request 찾기 필터 검색창에 텍스트를 입력하면 요청 URL에 해당 키워드가 포함된 Reqeust만 조회됩니다. 다음 스크린샷에서 "keywo"라는 키워드가 요청 URL에 포함된 Request는 202개 중 2개라는 것을 확인할 수 있습니다. 정규 표현식으로 Request 찾기 필터 검색창에 정규 표현식을 사용하여 특정 Request를 찾을 수 있습니다. "search"라는 키워드가 요청 URL에 포함된 Request는 202개 중.. 개발자 도구/크롬(Chrome) 2022. 11. 1.

[Chrome]크롬 개발자 도구 네트워크 설정 기능 알아보기 크롬 개발자 도구 네트워크 설정 기능 크롬 76번째 버전에서 네트워크 패널의 UI가 변경되었습니다. 크롬 개발자 도구 창이 좁을 때 사용성 문제가 있어서 덜 사용되는 몇 가지 옵션이 네트워크 설정으로 이동되었습니다. 네트워크 패널 우측 상단의 톱니바퀴 아이콘을 클릭하면 위 스크린샷처럼 큰 요청 열 사용, 프레임별 그룹 지정, 개요 표시, 스크린샷 캡처를 선택할 수 있는 패널이 나타납니다. 이번 포스팅은 네트워크 설정에 존재하는 각 기능에 대해 소개합니다. 큰 요청 열 사용 큰 요청 열 사용은 말 그대로 요청에 대해 크게 표시한다는 의미입니다. [큰 요청 열 사용 선택 전] [큰 요청 열 사용 선택 후] "큰 요청 열 사용" 체크 후 크기와 시간에 대해 간략하게 알아봅시다. 55.2 kB는 압축된 리소스의.. 개발자 도구/크롬(Chrome) 2022. 11. 1.

[Chrome]HAR 파일 가져오기 및 내보내기 HAR 파일 HAR는 HTTP Archive format의 약자로 웹 브라우저와 웹 사이트 간의 정보 추적에 사용되는 형식입니다. 좀 더 쉽게 설명하자면, 크롬 개발자 도구 네트워크 탭의 패널 정보가 JSON 형식으로 변환된 파일입니다. HAR 파일은 주로 페이지 렌더링 문제, 로딩 시간, API 호출하는 과정에서 발생한 에러를 분석하는 용도로 사용됩니다. 예를 들어, API를 호출하는 과정에서 에러가 발생하였으며, 에러 내용을 웹 페이지 개발자에게 전달해야 하는 경우 HAR 파일만 전달하면 됩니다. 이번 포스팅은 HAR 파일의 장점과 크롬에서 HAR 파일을 내보내거나 가져오는 방법을 설명합니다. HAR 파일이 유용한 경우 다음은 HAR 파일을 유용하게 사용할 수 있는 몇 가지 사례입니다. 차단된 요청 .. 개발자 도구/크롬(Chrome) 2022. 10. 31.

[Chrome]크롬 개발자 도구 네트워크 속도 조절하는 방법 크롬 개발자 도구 네트워크 속도 조절하는 방법 일반적으로 네트워크 속도는 모바일보다 PC가 빠릅니다. 따라서, PC에서 웹 페이지를 개발하는 경우 모바일처럼 동작하도록 테스트해야 하는 상황이 발생합니다. 다행히도 크롬 개발자 도구는 네트워크 속도를 조절할 수 있는 사용 제한 기능을 제공합니다. 이 기능을 통해 네트워크 속도를 조절한 다음 모바일에서 페이지를 로드하는 데 걸리는 시간을 측정할 수 있습니다. 이번 포스팅은 크롬 개발자 도구 네트워크 탭 툴바에 존재하는 사용 제한 기능 사용 방법을 설명합니다. 네트워크 속도 조절 방법 순서 1. 크롬 개발자 도구의 네트워크 탭으로 이동 후 ▼ 아이콘을 선택합니다. 순서 2. 원하는 항목을 선택합니다. 순서 3. 새로고침 아이콘을 꾹 선택한 다음 "캐시 비우기 .. 개발자 도구/크롬(Chrome) 2022. 10. 31.

[Chrome]크롬 개발자 도구 네트워크 탭 툴바 활용 방법 크롬 개발자 도구 네트워크 탭 툴바 활용 방법 크롬 개발자 도구의 네트워크 탭은 FrontEnd - BackEnd 혹은 Client - Server 간 주고받는 데이터를 확인하기 위해 사용되는 유용한 기능입니다. 네트워크 탭은 요청-응답 데이터뿐만 아니라 네트워크 속도, 요청 및 응답 리소스의 크기, API 호출 순서도 확인할 수 있기에 이 기능을 잘 활용한다면, 자바스크립트에서 console.log() 또는 자바에서 System.out.println()과 같은 코드를 작성하지 않고 디버깅할 수 있습니다. [티스토리 메인 화면 접속 후 개발자 도구 실행] 이번 포스팅은 네트워크 탭 툴바에 존재하는 6가지 기능(기록 중지, 삭제, 필터, 검색, 로그 보존, 캐시 사용 중지)을 소개합니다. (사용 제한, 네.. 개발자 도구/크롬(Chrome) 2022. 10. 31.

[Web]MIME Type과 Content-Type 인터넷에서는 다양한 데이터(텍스트, 이미지, 동영상, pdf 등)를 다루기 때문에 웹에서는 데이터마다 MIME Type을 설정하여 데이터 형식을 표시합니다. 다음은 MIME Type의 예시입니다. 텍스트 text/plain, text/csv, text/html 영상 및 이미지 image/jpeg, image/png, image/svg+xml 멀티파트(다양한 데이터 타입을 한 번에 보내는 경우) multipart/form-data, multipart/byteranges 대부분의 사람들은 MIME Type과 Content-Type를 동일한 개념으로 착각하는 경우가 많습니다. 이 둘은 엄연히 다른 존재이며 MIME Type은 Content-Type의 상위 개념입니다. 이번 포스팅에서는 MIME Type과 Co.. Web 2022. 4. 2.

[Web]웹 서버(Web Server)와 웹 클라이언트(Web Client) 웹 서버(Web Server)와 웹 클라이언트(Web Client) 네트워크 프로그래밍, 웹 프로그래밍 혹은 정보처리기사처럼 자격증 공부를 하다 보면 "웹 서버"와 "웹 클라이언트"라는 단어를 한 번쯤은 본 적이 있을 겁니다. "웹 서버"는 일상 속에서도 자주 나오는데, 쇼핑몰 사이트에서 타임 세일을 하거나 대학교 수강 신청에서 에러가 나는 경우 흔히 "서버 터졌다"라는 말을 사용하죠. 이번 포스팅에서는 웹 서버와 웹 클라이언트가 무엇이고 어떠한 역할을 하는지 알아보겠습니다. 웹 클라이언트(Web Client) 웹 클라이언트는 웹을 사용하는 고객을 의미하며 고객은 디바이스 장치(노트북, 스마트폰, 태블릿 등)가 될 수 있습니다. 디바이스 장치에서 동작하는 웹 클라이언트 프로그램은 웹 브라우저라고 합니다... Web 2022. 4. 2.

이전 1 다음

티스토리툴바