takeU

const source = new EventSource(url); source.addEventListener('message', (e) => { console.log(e.data); }); 이 코드로 작성했는데 콘솔에 아무것도 안찍히는거임 분명히 네트워크탭에는 다 찍히는데 이벤트 리스너를 sse(유형 탭)로 지정하니까 잘 찍힘 source.addEventListener('sse', (e) => { console.log(e.data) } ㅇㅇ..별거아님..

import pako from 'pako' const url = 'http://~~~/test.gz'; const gzToJson = async () => { const { data } = await axios.get(url, { responseType: 'arraybuffer' }); const binaryData = data; const decompressedData = pako.inflate(binaryData); const json = JSON.parse(new TextDecoder().decode(decompressedData)); console.log(json); } BE에서 용량이 큰 JSON 파일을 gzip으로 으로 압축시켜 보내줬을 때 FE에서 압축 해제 후 디코드해서 사용하는 방법

면접도 못갔는데..

tsx에서 emotion 문법인 css 속성에 대한 에러 // tsconfig.json { "compilerOptions": { "types": ["@emotion/core"] } } 위와 같이 추가해주면 됨 출처: https://github.com/emotion-js/emotion/issues/1249

윈도우 11 VSCode ssh 연결 방법 개발 환경: 윈도우 11 그램 + 윈도우 11 데스크탑 데스크탑과 랩탑을 둘 다 활용하기 위해, 그램으로 데스크탑 윈도우 서버에 연결하는 과정을 기록 포트는 22번 그대로 썼고, 외부에서 사용할게 아니기 때문에 포트포워딩 안함 1. 윈도우 11 데스크탑 -> 윈도우 서버 설정 설정 -> 앱 -> 선택적 기능 -> 선택적 기능 추가 -> OpenSSH 서버 설치 관리자로 PowerShell 실행 -> Start-Service sshd로 서버 on (Stop-Service sshd로 off 가능) Set-Service -Name sshd -StartupType 'Automatic'로 윈도우 서버 자동으로 켜지게 설정 Get-NetFirewallRule -Name O..

웹 표준 및 HTML 마크업 시 유의사항 DOCTYPE 써주기 모든 페이지에는 h1 태그가 한개씩만 존재해야 한다 img 태그에는 반드시 alt 속성을 써줘야 한다 문단을 나눌 때 br 태그 쓰지 않기 인라인 태그안에 블록 태그 쓰지 않기 (a 태그 예외) 인라인 스타일 작성 금지 DOCTYPE 써주기 현재 상용되는 HTML5을 기준으로 html파일 최상단에 필수로 작성해야 함. HTML5 이전 버전에서는 문서 형식 선언문이 길었지만, HTML5로 넘어오면서 선언문이 짧아짐. 만약 문서 형식 선언을 하지 않는다면 구형 브라우저에서는 쿼크 모드(Quirks mode) 라고 불리는 표준 모드로 웹사이트를 구동해 의도한바와 다르게 화면에 출력될 수 있음. 모든 페이지에는 h1 태그가 한개씩만 존재해야 한다 h..

HTTP 상태 코드, 응답 코드 1xx (정보 전달) 요청을 받았으며 프로세스를 계속함 HTTP/1.0 이후 잘 쓰이지 않다가 101, 103의 등 페이지 로드 속도를 빠르게 하기 위해 다시 사용됨 100 Continue 101 Switching Protocols 102 Processing 수신 요청으로 처리는 하고있지만, 아직 응답을 할 수 없는 상태임을 알리는 코드 103 Early Hints Link Heder와 함께 사용(Link: ; rel=preload; as=style)되며 서버의 응답 전 PreLoading을 할 수 있도록 하는 응답 코드 2xx (성공) 요청을 성공적으로 받았음 200 OK 201 Created 요청이 처리되어 리소스가 만들어짐 POST, PUT 과 같은 Create, M..

교차 출처 리소스 공유 (CORS) Cross-Origin Resource Sharing 추가 HTTP 헤더를 사용해, 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 기본적으로 브라우저는 교차 출처 HTTP 요청을 제한 SOP(Same-Origin Policy) - 동일 출처 정책 사용 사례 XMLHttpRequest, Fetch API 웹 폰트 WebGL drawImage()를 사용해 캔버스에 그린 이미지/비디오 프레임 이미지로부터 추출하는 CSS Shapes 개요 HTTP 헤더 추가 OPTIONS 메소드로 preflight 요청 승인 시 실제 요청 전송 / 서버는 클라이언트에게 인증정보를 요구할 수 있음 시나리오 단순 요청 (Simple requests) pre..

HTTP 메시지 (HTTP/1.1) 서버와 클라이언트 간에 데이터가 교환되는 방식 요청(request) - 클라이언트 to 서버 / 서버의 액션이 일어나게끔 하는 메시지 응답(response) - 요청에 대한 서버의 답변 구조 시작 줄 - 요청, 성공 여부를 한줄로 표현 옵션 - HTTP 헤더 세트 / 요청과 메시지 본문에 대한 설명 빈 줄 - 모든 메타 정보가 전달되었음을 알림 본문 - 요청과 응답에 관련된 문서 / 존재 유뮤는 첫 줄과 헤더에 명시 시작 줄 + 헤더를 합쳐 요청 head라 부르며, 메시지의 페이로드는 body라 부름 요청 (request) 시작 줄 HTTP 메소드 - GET, POST, PUT, ,HEAD, OPTIONS 등.. 타겟 - URL, 프로토콜, 포트, 절대경로로 나타냄 o..

HTTP란? HyperText Transfer Protocol 하이퍼미디어 문서를 전송하기 위한 애플리케이션 레이어 프로토콜 이론 상 신뢰 가능한 전송 프로토콜이면 무엇이든 사용 가능하나 TCP 혹은 TLS (암호화된 TCP), UDP(HTTP/3)를 통해 전송 request - response 의 구조 클라이언트-서버 모델을 따름 무상태(Stateless) 프로토콜 서버가 클라이언트의 동작이나 상태를 저장하지 않는 형태 즉, 서버와 클라이언트가 독립 쿠키를 통해 세션을 만들어 헤더에 심는 확장이 가능함 HTTP 기반 시스템의 구성 요소 클라이언트 요청을 보내는 개체 요청 - 응답 - 리소스 혼합 - 페이지 갱신 서버 요청에 대한 문서를 제공하는 개체 논리적으로 단일 머신이지만, 여러 개의 서버를 동일한..