전체 글

TIL - 20220920

오늘은 모던 JavaScript 튜토리얼에서 쿠키와 document.cookie에 대해 공부했다. 작성한 질문은 다음과 같다. 쿠키는 주로 웹서버에 의해 만들어지는데, 서버가 HTTP 응답 헤더에 Set-Cookie에 내용을 넣어 전달하면 브라우저는 이를 브라우저에 자체적으로 저장하며 브라우저는 사용자가 쿠키를 생성하도록 한 동일 서버에 접속할 때마다 쿠키의 내용을 Cookie 요청 헤더에 넣어서 함께 전달하고, 클라이언트 식별과 같은 인증에 많이 쓰인다. 쿠키의 옵션으로는 다음과 같이 존재한다. path - 이 경로나 이 경로 하위에 있는 페이지만 쿠키에 접근할 수 있으며 절대 경로여야 한다. 예를 들어, path=/admin 옵션을 사용하여 설정한 쿠키는 /admin과 /admin/blahblah에선..

TIL - 20220919

오늘은 모던 JavaScript 튜토리얼에서 웹소켓에 대해 공부했다. 작성한 질문은 다음과 같다. 웹소켓을 사용하는 이유는 서버와 브라우저가 연결을 유지한 채로 데이터를 교환하기 위해서 사용하며 데이터는 패킷 형태로 전달된다. 전송은 양방향으로 이루어진다. 소켓이 정상적으로 만들어지면 다음과 같은 이벤트를 사용할 수 있게 된다. open: 커넥션이 제대로 만들어졌을 때 발생 message: 데이터를 제대로 수신했을 때 발생 error: 에러가 생겼을 때 발생 close: 커넥션이 종료됐을 때 발생 new WebSocket()을 호출해 최초 요청을 전송하면 다음과 같은 요청 헤더들이 나온다. Origin - 클라이언트 오리진을 나타낸다. Connection: Upgrade - 클라이언트 측에서 프로토콜을 ..

TIL - 20220918

오늘은 모던 JavaScript 튜토리얼에서 파일 업로드 재개하기에 대해 공부했다. 작성한 질문은 다음과 같다. 1. 업로드할 파일에 고윳값을 구분할 파일 아이디를 생성한다. let fileId = file.name + '-' + file.size + '-' + file.lastModifiedDate; 파일 아이디는 파일 업로드를 재개할 때, 어떤 파일을 재개할지 알려줄 때 필요하며 이름, 크기 혹은 최종 수정 날짜가 변경되면 fileId는 별도로 생성된다. 2. 서버에 요청을 보내 몇 바이트만큼을 전송했는지 질의를 보낸다. let response = await fetch('status', { headers: { 'X-File-Id': fileId } }); // 서버가 얼마만큼 파일 바이트를 가졌는지 ..

TIL - 20220917

오늘은 모던 JavaScript 튜토리얼에서 CORS에 대해 공부했다. 작성한 질문은 다음과 같다. 크로스 오리진 요청은 다음과 같은 요청들이 있다. 안전한 요청 안전하지 않은 요청 안전한 요청은 다음 조건들을 충족해야 한다. 메서드는 GET, POST, HEAD 중 하나여야 한다. 헤더는 Accept, Accept-Language, Content-Language, 값이 application/x-www-form-urlencoded나 multipart/form-data, text/plain인 Content-Type 안전한 요청은 다음 절차를 따른다. 오리진 정보가 담긴 Origin 헤더와 함께 브라우저가 요청을 보낸다. 자격 증명이 없는 요청의 경우, 서버가 Origin 값과 동일하거나 *인 Access-..

TIL - 20220916

오늘은 모던 JavaScript 튜토리얼에서 FormData 객체에 대해 공부했다. 작성한 질문은 다음과 같다. FormData 객체란 폼을 쉽게 보낼 수 있도록 도와주는 객체이며, FormData 객체는 HTML 폼 데이터를 나타낸다. FormData의 메서드로는 다음이 존재한다. formData.append(name, value): name과 value를 가진 form field 추가 formData.append(name, blob, fileName): 형태의 필드를 추가한다. 여기서 세 번째 인수 fileName은 필드명이 아닌 사용자가 해당 이름을 가진 파일을 폼에 추가한 것과 같이 설정한다. formData.set(name, value): name과 value를 가진 form field를 추가하..

TIL - 20220915

오늘은 모던 JavaScript 튜토리얼에서 fetch에 대해 공부했다. 작성한 질문은 다음과 같다. AJAX는 Asynchronous JavaScript And XML의 약자로 직역하면 비동기적 JavaScript와 XML로 서버에서 부가 정보를 비동기적으로 가져올 수 있게 해주는 기술을 뜻한다. AJAX 이외에도 서버에 네트워크 요청을 보내고 응답을 받아올 수 있는 방법은 다양하며 그중 하나가 fetch이다. fetch는 서버에 네트워크 요청을 보내고 응답을 받아올 수 있는 메서드이며 기본 문법은 다음과 같다. let promise = fetch(url, [options]); url: 접근하고자 하는 url options: 말 그대로 넣어도 되고 안 넣어도 되는 매개변수이며 method나 header..

TIL - 20220914

오늘은 모던 JavaScript 튜토리얼에서 텍스트 디코더와 텍스트 인코더에 대해 공부했다. 작성한 질문은 다음과 같다. 텍스트 데이터가 있는 파일이 주어졌을 때, 자바스크립트 엔진은 내장 객체 TextDecoder를 이용하여 주어진 버퍼와 인코딩으로 값을 실제 자바스크립트 문자열로 읽을 수 있게 해 준다. 과정은 다음과 같다. 1. 객체를 생성한다. let docoder = new TextDecoder([label], [options]); 여기서 label의 Default는 utf-8이지만 big5와 같은 다른 인코딩 방식도 지원한다. options는 선택 항목이며, fatal은 boolean으로 true일 경우, 잘못된 글자(디코딩 불가능한 글자)를 대상으로 예외를 던지고, ignoreBOM은 boo..

TIL - 20220913

오늘은 모던 JavaScript 튜토리얼에서 이벤트 루프와 매크로태스크, 마이크로태스크에 대해 공부했다. 작성한 질문은 다음과 같다. 이벤트 루프란 자바스크립트에서 태스크가 오기만을 기다렸다가 태스크가 들어오면 처리하고, 처리할 태스크가 없는 경우에는 잠드는 루프를 의미한다. 이벤트 루프의 알고리즘은 다음과 같다. 매크로태스크 큐에서 가장 오래된 태스크를 실행한다. 모든 마이크로태스크를 실행한다. 이 작업은 마이크로태스크 큐가 빌 때까지 이어지며 가장 오래된 태스크부터 순차적으로 실행된다. 렌더링 할 것이 있다면 렌더링 된다. 매크로태스크 큐가 비어있다면 새로운 매크로태스크가 올 때까지 기다린다. 매크로태스큐가 온다면 1번으로 돌아간다. 여기서 핵심은 자바스크립트 엔진은 매크로태스크 하나 처리할 때마다 ..