본문 바로가기

웹개발

 (60)
[server] 서버 기초 지식 정리 서버란? 네트워크의 클라이언트에게 서비스를 제공하는 컴퓨터. 웹브라우저가 클라이언트이며 웹 콘텐츠가 있는 컴퓨터가 서버이다. 클라이언트/서버 시스템 서버와 클라이언트로 구성되어 있는 시스템. 서버에서 데이터를 일원적으로 쉽게 관리할 수 있다. 서버는 클라이언트로부터 요청을 받아야 처리를 시작하고 서비스를 제공한다. 서버의 이름은 제공하는 서비스에 따라 달라진다. ex) 웹 서버, HTTP 서버 등 서버 구축 서버를 구축한다는 것은 서버 소프트웨어를 컴퓨터에 인스톨하여 실행시킨다는 것이다. 서버란 '서버 소프트웨어'가 가지고 있는 기능 자체를 가리키고 서버 소프트웨어를 인스톨하여 실행시키면 서버로 바뀐다. 한대에 컴퓨터에 여러대의 서버 소프트웨어를 작동시킬 수 있다. 어떤 서버를 구축할 것인가? 서버 소프..
localStorage & sessionStorage localStorage와 sessionStorage localStorage와 sessionStorage는 브라우저 내에 키-값을 저장할 수 있게 해주는 웹 스토리지 객체(web storage object)이다. 쿠키와 차이점 1. 웹 스토리지 객체는 네트워크 요청시 서버로 전송되지 않는다. 그래서 쿠키보다 더 많은 자료를 보관할 수 있다. 또한 개발자는 브라우저 내 웹 스토리지 구성 방식을 설정할 수 있다. 2. 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수 없다. 웹 스토리지 객체 조작은 모두 자바스크립트 내에서만 수행된다. 3. 웹 스토리지 객체는 도메인.프로토콜.포트로 정의되는 오리진(origin)에 묶여있다. 따라서 프로토콜과 서브 도메인이 다르면 데이터에 접근할 수 없다. 4. 쿠키는 ..
HTTP 쿠키 쿠키란? 쿠키는 브라우저에서 저장되는 작은 크기의 문자열로 HTTP 프로토콜의 일부이다. 쿠키는 주로 웹 서버에 의해 만들어지고 서버가 HTTP 응답 헤더로 내용을 전달하면 브라우저는 이 내용을 자체적으로 브라우저에 저장한다. 쿠키의 쓰임새 쿠키는 클라이언트 식별과 같은 인증에 가장 많이 쓰인다. 사용자가 로그인하면 서버는 HTTP 응답 헤더의 Set-Cookie에 담긴 세션 식별자 정보를 사용해 쿠키를 설정한다. 사용자가 동일한 도메인에 접속하려 하면 브라우저는 HTTP Cookie 헤더에 인증 정보가 담긴 고윳값(세션 식별자)을 함께 실어 서버에 요청한다. 서버는 브라우저가 보낸 요청 헤더의 세션 식별자를 읽어 사용자를 식별한다. document.cookie document.cookie를 이용하면 브..
자바스크립트 fetch fetch란? fetch()는 최신 AJAX 요청 문법으로 서버로부터 데이터를 요청하는 API이다. fetch의 기본 문법 let promise = fetch(url, [options]) url – 접근하고자 하는 URL options – 선택 매개변수, method나 header 등을 지정할 수 있다. options에 아무것도 넘기지 않으면 요청은 GET 메서드로 진행되어 url로부터 콘텐츠가 다운로드된다. fetch()를 호출하면 브라우저는 네트워크 요청을 보내고 프로미스가 반환된다. fetch(url, [options]).then(callback).catch(callback); 프로미스가 반환되기 때문에 fetch 요청 후에 .then()에서 응답(response) 객체를 받고 catch에서 요청에..
자바스크립트 async & await async & await 이란? async와 await은 새로운 개념이 추가된 것이 아니라 프로미스의 syntactic sugar이다. (*syntactic sugar: 기존에 존재하는 것을 감싸서 조금 더 간편한 API를 제공하는 것 ex) 클래스 ) 프로미스를 조금 더 간결하고 간편하고 그러고 동기적으로 실행되는 것처럼 보이게 만들어준다. async & await 기본 문법 함수 앞에 async라는 예약어를 붙인다. 그러고 나서 함수의 내부 로직 중 비동기 처리 코드 앞에 await을 붙인다. (일반적으로 await의 대상이 되는 비동기 처리 코드는 axios 등 프로미스를 반환하는 API 호출 함수이다.) async function 앞에 async를 붙이면 해당 함수는 항상 프로미스를 반환한다. 프..
프라미스 Promise 란 무엇인가? 프라미스란? 자바스크립트 비동기 처리에 사용되는 객체이다. 비동기 연산이 종료된 이후 결과 값이나 실패 이유를 처리하기 위한 처리기를 연결할 수 있어 마치 동기 메서드처럼 값을 반환할 수 있다. 다만 최종 값을 반환하는 것이 아니고 프라미스를 반환해서 미래의 어떤 시점에 결과를 제공한다. 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용한다. 프라미스가 필요한 이유는? 자바스크립트의 비동기 처리의 문제점을 해결하기 위해 사용한다. 프라미스(promise)는 프로듀서와 컨슈머를 연결해 주는 자바스크립트 객체이다. 따라서 정보를 제공하는 프로듀서(producer)와 정보를 소비하는 컨슈머(consumer)를 잘 알아야 한다. 프로듀서(producer) 프라미스는 class이기 때문에 new라는 키워드를 ..
자바스크립트의 비동기처리 & 콜백 함수 동기식 처리 모델(Synchronous processing model) 일(task)을 직렬적, 순차적으로 처리하여 어떤 작업이 수행하는 동안 다음 작업은 대기하게 된다. 비동기식 처리 모델(Asynchronous processing model) 일(task)를 병렬적으로 수행한다. 어떤 작업이 수행하는 동안 다음 작업이 대기하지 않고 수행된다. 즉 자바스크립트에서 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 실행하는 것이다. 자바스크립트의 대부분의 DOM 이벤트 핸들러와 Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기식 처리 모델로 동작한다. ( setTimeout의 콜백함수는 즉시 실행되지 않고 지정 대기 시간만큼 기다리다가 “tick”..
REST API - RESTful 한 API란 무엇일까? REST API란? REST API는 REST 아키텍처 스타일을 따르는 API이다. 그렇다면 여기서 말하는 REST와 API란 무엇일까? REST란 특정 기술이 아닌 분산 하이퍼 미디어 시스템( ex) 웹 )을 위한 아키텍처 스타일이다. REST는 HTTP가 가진 잠재력을 최대한 이용할 수 있게 유도하기 위해 만든 모범사례라고 할 수 있다. API란 간단히 말해 컴퓨터의 기능을 실행시키는 방법이다. 즉 REST API는 REST의 조건을 지키면서 내 컴퓨터가 아닌 다른 컴퓨터를 실행시키는 방법인 것이다. REST API 구성 자원(Resource) - URL 행위(Verb) - HTTP Method 표현(Representations) REST API는 크게 리소스(자원)와 행위와 표현을 규정하고 있다. ..

티스토리툴바