웹 브라우저에서 로컬에 작은 텍스트 데이터를 저장하는 영역인 쿠키!.. 쿠키는 클라이언트와 서버 간의 상태를 유지하고 추적하기 위해 사용을 하는데, 여러 가지 옵션이 있다. 그중 유효기간에 대한 옵션을 살펴보려고 한다. 보통 쿠키가 언제까지 유효한지 설정되어 있지 않으면, 브라우저가 닫힐 때 쿠키도 함께 사라진다. 이런 쿠키를 세션 쿠키라고 한다. 그럼 쿠키의 유효기간을 어떻게 설정할까? 🤔 MaxAge MaxAge 옵션은 쿠키의 만료기간을 설정할 때 사용한다. 현재부터 만료기간까지의 브라우저에서 유지되는 시간을 초 단위로 설정한다. 예를 들어 아래와 같이 Max-Age=3600 이라고 한다면, 브라우저에 저장 후 1시간 동안 유지된다. Set-Cookie: id=a3fWa; Max-Age=3600; P..

브라우저 저장소는 크게 쿠키와 웹 스토리지가 있다. 로컬스토리지와 세션스토리지는 웹스토리지에 속하는데.. 이들에 대해서 한번 정리해 보자. 쿠키 웹 사이트에 접속할 때 생성되는 정보를 담은 작은 텍스트 파일이다. 별도로 삭제처리하거나 유효기간이 만료되지 않는 이상 삭제되지 않고 서버와 통신할 때 자동으로 주고받는다. 쿠키는 주로 이런 목적을 위해 사용된다. 세션 관리 서버에 저장되는 로그인이나 장바구니 같은 기능에 사용 개인화 테마나 사용자가 선호하는 값을 세팅 트래킹 사용자의 행동을 기록하고 분석 쿠키는 웹스토리지처럼 클라이언트에서 직접 추가/수정/삭제를 할 수 있고, 클라이언트에 저장되기 때문에 보안에 취약하다. 쿠키를 추가해보기 🤔 서버에 특정 API 요청을 했을 때 서버가 응답 시 header 안..

HTTP(HyperText Transfer Protocol) 인터넷에서 데이터를 전송할 때 사용되는 프로토콜이다. HTML, Text 외에도 이미지나 여러 파일, JSON 등 거의 모든 형태의 데이터를 전송할 수 있다. HTTP 특징 HTTP의 특징으로는 크게 몇 가지를 들 수 있다. 클라이언트 - 서버 구조 요청과 응답으로 나뉘어서 클라이언트는 서버로 요청을, 서버는 클라이언트로 요청에 대한 결과로 응답한다. 클라이언트와 서버가 각각 독립되어 있어 독자적으로 빠르게 발전해 왔다. 무상태 프로토콜(Stateless) 서버가 클라이언트의 상태를 보존하지 않기 때문에 서버의 확장성이 높다는 장점이 있다. 하지만 클라이언트가 추가로 데이터를 전송해야 하는 단점이 있다. 🤔 Stateful과 Stateless의..

꽤나 어려운 개념인 캐시.. 캐시에 대해서 간략하게나마 정리해보고자 한다. 좀 더 깊게는 시간 내서 알아보는 것으로.. 🤔 캐시 캐시는 데이터나 값을 저장하는 임시저장소다. 장점 데이터를 접근하는 시간이나 값을 계산하는 시간을 줄일 수 있어 성능을 향상할 수 있다. 반복적인 작업을 수행한다면, 캐싱된 값을 사용하면 되니 작업 시간을 줄일 수 있다! 네트워크 병목을 줄일 수 있다. 네트워크 작업은 메모리 작업보다 시간이 더 오래 걸리기 때문에 이 시간을 줄일 수 있다. 안정성을 높일 수 있다. 캐싱된 값을 이용해서 서버의 부하를 줄일 수 있다. 서버가 다운되거나 장애가 발생되어도 캐싱된 값을 사용하면 되니 안정성이 높아진다. 단점 캐시의 일관성 문제 캐싱된 값이 업데이트가 되지 않은 상태로 오래 남아있다면..

라이브러리와 프레임워크의 차이가 뭔가요?라고 하면 프레임워크는 뼈대, 라이브러리는 기능 수행에 필요한 코드모음.. 정도가 생각이 난다. 리액트는 라이브러리, 뷰나 nextjs는 프레임워크. 정의를 명확하게 알아야 차이에 대해서 설명할 수 있을 것 같아 구체적으로 정리해 본다! 라이브러리 라이브러리는 특정 기능을 위한 코드를 모아둔 것이다. 개발자가 원하는 대로 라이브러리를 사용할 수 있고, 라이브러리를 사용하여 코드의 양을 줄일 수 있다. 제어의 흐름으로 보았을 때, 애플리케이션이 라이브러리를 사용하기 때문에 능동적이다. 프레임워크 프레임워크는 원하는 기능 구현에 집중할 수 있도록, 개발에 필요한 형태와 기능을 갖추고 있는 일종의 뼈대다. 개발자는 프레임워크에 지정된 방식대로 메서드 등의 코드를 구현한다..

'Restful API란?' 이라는 질문에 답변을 위한 REST API에 대한 내용을 정리해본다. RESTful API는 결국 REST하다는 의미인데, 먼저 REST가 어떤 의미인지부터 알아야할 필요성이 있겠다. REST API REST API는 HTTP를 기반으로 클라이언트가 서버의 리소스에 접근하는 방식을 규정한 아키텍처 REST는 REpresentational State Transfer의 약자로, 자원(Resource)에 대한 요청을 행위(HTTP Method)로 처리한다. 주로 JSON, XML 형식의 데이터로 반환되어 처리된다. REST의 구성 자원(Resource) - URI (엔드포인트) 행위(Verb) - HTTP Method (HTTP 요청 메서드) 표현(representations) -..

www.google.com 을 주소창에 입력했을 때 일어나는 일 꼭 구글이 아니더라도, 우리는 어떤 주소를 브라우저의 주소창에 입력했을 때, 페이지가 바로 뜨는 것을 당연하게 생각하고 있다. 어떤 식으로 그 페이지를 불러오는지에 대해 고민해 본 적이 있던가? 브라우저의 렌더링 과정에 대해 다시 공부하다보니 이 과정이 궁금해지기도 했고, 프론트엔드 개발자라면 반드시 알고 있어야 할 내용인 것 같아 한번 정리해보려고 한다. 결국 웹페이지에 우리가 원하는 화면이 보이려면 서버에서 데이터를 가져와야 한다. 데이터를 받아오기 위한 과정을 나열해보자! www.google.com로부터 IP 주소 얻어오기 도메인 도메인이라는 것을 한번쯤 들어봤을 것이다. 쉽게 말하면 각각의 IP 주소에 붙은 이름표 같은 것이다. IP..