JavaScript (39) 썸네일형 리스트형 쿠키, 세션, 로컬스토리지 쿠키 설명 로그인상황을 예시로, 로그인이 성공하면 서버는 클라이언트에 일종의 인증서를 보내준다. 클라이언트가 이것을 가지고오면 어떤사람인지 구분하는데 사용하기로한다. 클라이언트는 request를 보낼 때 마다 이 인증서를 request에 포함해서 보내야한다. 이 때 사용하는 것이 쿠키이다. 로그인에 성공했을 때 서버가 Set-Cookie헤더로 쿠키의 값을 보내준다. 클라이언트는 저장해두었다가, 서버에 Request를 보낼 때 마다 매번 Cookie헤더로 보내주어 로그인상태라는 것을 표시한다. 웹브라우저를 껐다 키거나, 컴퓨터를 껐다 키더라도 쿠키값은 유지되기 때문에 일정기간 로그인하지않아도 로그인상태가 유지된다. 특징 서버로부터 response로 쿠키를 받으면, 클라이언트에서는 별도로 작업을 해주지 않아.. 웹페이지 렌더링 방식(CSR, SSR, SSG) 웹페이지 렌더링 방식의 특징과 상황에 따른 렌더링 방식 선택 1. CSR(Client Side Rendering) 브라우저에서 동적으로 태그와 스타일을 생성해 페이지를 채운다. 최초에 하나의 페이지(비어있는 페이지)만 서버로부터 불러와 렌더링하고, 이후 모든것들을 브라우저에서 렌더링한다. (SPA) 한 번 렌더링하고 난 이후에는 필요한 부분만 렌더링하기때문에 효율적이다. 장점 페이지의 전환 속도가 SSR에 비해 빠르고, 깜빡임없이 부드럽게 페이지가 바뀌어 사용자 경험이 좋다. 자바스크립트에서 HTML을 만드는 연산작업이 서버에 집중되지 않기 때문에 서버에 부하가 적게 발생한다. 단점 모든 스크립트 파일이 로드될 때 까지 기다려야하기때문에 초기 로딩 속도가 느리다. (최초에 빈페이지를 받아오기때문에 페이지.. JavaScript - ajax Asynchronous Javascript And XML의 줄임말 동적 웹페이지를 구성하는 프로그래밍 방식. 전체 페에지가 다시 로드되지 않고 HTML페이지의 일부 혹은 DOM만 업데이트하므로서 좀 더 복잡한 웹페이지를 만들 수 있으며 부드러운 사용자경험을 줄 수 있다. 웹페이지 일부가 리로드되는 동안에도 코드가 계속 실행되어 화면의 멈춤 없이 비동기식으로 작업할 수 있다. 화면을 새로 고치지 않고도 서버와 통신하고 데이터를 교환하고, 페이지를 업데이트 할 수 있다. HTTP 요청만들기 const httpRequest = new XMLHttpRequest(); HTTP요청에, 서버에서 response를 받은 것을 처리할 JavaScript함수를 지정한다. httpRequest.onreadystatecha.. JavaScript - 비동기실행 순서 예제 // 1번 let num = 1; // 2번 setTimeout(() => { num = 2; }, 0); // 3번 num = 3; // 4번 console.log(num); 위 코드 실행시 콘솔에 출력될 값과 그 이유는? 출력될 값 3 이유 실행 순서는 다음과 같다. 처음 num변수에 1이 담김. setTimeout함수가 0초이지만, 일단 순서를 뒤로 미루고 함수밖의 로직을 먼저 처리한다. (콜스택에 setTimeout 바깥 로직이 먼저 들어가서, 0초후 실행되었어야하는 콜백함수의 순서가 뒤로 밀린다.) 이후 num에 3이 담김. console에 3이 찍힘. num이 2로 바뀜. JavaScript - async/await Promise객체로 인해 callback hell문제를 해결하고, 비동기 실행코드를 보기좋게 작성하는 것이 가능해졌다. 그럼에도 자바스크립트 문법은 계속 발전해서 Promise객체를 더 편하게 다룰 수 있는 문법이 생겨났고 그것이 바로 async/await이다. // fetch의 경우 fetch('https://learn.codeit.kr/api/members/1') .then((response) => response.text()) .then((result) => {console.log(result);}) // async/await의 경우 async function fetchAndPrint(){ const response = await fetch('https://learn.codeit.kr/api/mem.. JavaScript - 비동기 실행과 promise객체 비동기 함수의 실행 순서 console.log('Strart'); fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => {console.log(result);}); console.log('End'); 위 코드의 실행 결과는 아래와 같다. Start End result객체 fetch가 비동기동작을 하기 때문. fetch('https://jsonplaceholder.typicode.com/users') 1. request를 보내면 어떤 객체(Promise 객체)를 리턴한다. .then((response) => response.text()) 2. 그 객체의 then메서드를 .. JavaScript - API(response data, REST API, contnet-type 등) json json이란 fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { console.log(result); }); 위 코드로 request를 보내면, html이 아닌 다른 종류의 데이터가 출력된다. 이 것이 json포맷이다. 어떤 정보를 나타낼 때에 보통 json포맷을 선택한다. JavaScript Object Notation 의 줄임말로 정보를 교환할 때 사용하기 위해서 만들어졌다. 자바스크립트 문법을 빌려서 만들어진 데이터 포맷이다. 자바스크립트로부터 비롯되었지만, 탄생목적은 언어나 환경에 종속되지 않고, 언제 어디서는 사용할 수 있는 데이터 포맷이 되는 .. JavaScript - 웹과 통신 fetch fetch('https://www.google.com') .then((response) => response.text()) .then((result) => { console.log(result); }); 위의 명령어를 입력했을 때 나온 결과를 브라우저가 해석해서 우리에게 예쁜 화면을 보여준다. 명령어를 입력한 것 : request = 요청 결과를 받은 것 : response = 응답 fetch메서드는 서버에 request를 보내고, response를 받는 함수이다. 서버에 request를 보내고 response를 받는 방법을 여러가지가 있지만 보편적으로 fetch를 많이 사용한다. fetch는 '보내다' 라는 의미를 가진다. 위코드를 한줄씩 해석하면 아래와 같다. fetch('https://w.. 이전 1 2 3 4 5 다음
