개발캡슐

cookie 설정 cookie 가볍게 쿠키의 의미에 대해 알아보자. 쿠키에 대해 더 알고자하면 https://ahahahangstudy.tistory.com/109 해당 링크를 참고. 쿠키는 HTTP 프로토콜의 바상태성을 보완하기 위한 수단인데, 클라이언트 로컬(local)에 저장되는 키와 값(key, value)이 들어있는 작은 데이터 파일이야. 애초에 서버와 클라이언트가 지속적으로 데이터 교환을 하기 위해 만들어졌어. 서버에서 HTTP Response Header에 Set-Cookie속성을 이용해서 클라이언트에 쿠키를 제공하지. 쿠키에는 이름, 값, 만료날짜/시간(쿠키 저장기간), 경로 정보들이 들어있어. - 서버가 웹 브라우저에 정보를 저장하고 불러올 수 있는 수단이고 - 해당 도메인에 대해 쿠키가..

Position Position CSS Position 속성은 문서 상에 요소들를 배치하는 방법을 지정하는 속성이야. position속성을 이용하면 텍스트나 이미지를 원하는 위치로 배치할 수 있고, 어떤 방식으로 놓을 지 결정할 수 있어. 요소를 배치할 최종 위치는 top, right, bottom, left 속성이 결정해줘. - 만약 position 속성에 대한 이해없이 css를 수정한다면 예상치도 못하게 블로그 레이아웃이 이상해지거나 망가질 수 있어서, position 속성에 대한 건 제대로 짚고 넘어가야해. Position 속성 종류 Position 속성에는 5가지가 있어. static | relative | absolute | fixed | sticky static - 요소를 문서 흐름에 맞추어 ..

HTTP HTTP ? HTTP(Hypertext Transfer Protocol)의 약자. HTML문서와 같은 리소스(자원)들을 가져올 수 있도록 해주는 프로토콜이지. 웹에서 이루어지는 모든 데이터 교환의 기초라고 할 수 있어. Protocol(프로토콜)은 "상호 간에 정의한 규칙"을 의미해. 특정 기기 간에 데이터를 주고받기 위해 정의됐어. 즉, 나는 이렇게 줄 테니 넌 이렇게 받고 난 네가 준 거 그렇게 받을게라고 정한거야. 웹에서는 클라이언트라고 부르는 브라우저와 서버 간에 데이터를 주고받기 위한 방식으로 HTTP 프로토콜을 사용하고 있어. 에러를 해결하는데도 HTTP지식이 중요해. 데이터를 주고 받을 때, 흔히 발생하는 CORS, CORB같은 에러들인데, HTTP만 잘 알아도 쉽게 해결할 수 있어..

캐시(Cache) 캐시(Cache) - 자주 사용하는 데이터나 값을 미리 복사해 놓는 임시 장소를 말해. - 문서의 사본을 자동으로 보관하는 HTTP 장치라고도 할 수 있지. ex) 웹 요청이 캐시에 도착했을 때, 캐시된 로컬 사본이 존재한다면, 그 문서는 원서버가 아니라 앞서 미리 저장된 캐시로부터 제공되는 거야. - 웹 프론트엔드에선 응답 데이터의 사본을 저장하는 공간이라고 해. - 속도를 위해 용량을 절충하는 캐시는 일반적으로 데이터의 하위 집합을 일시적으로 저장해. 보통 완전하고 영구적인 데이터가 있는 데이터베이스와는 대조적이야. - 웹 브라우저는 크게 2가지 방법으로 캐싱을 해. 거기엔 메모리 캐시와 디스크 캐시가 있어. => 둘 중에 어떤 방식이 사용되는 가는 파일 사이즈에 따라 브라우저 자체..

프레임워크? 라이브러리? 프레임워크(Framework) 정해진 메뉴얼, 룰을 제공해. 개발할 때 필수적인 코드와 알고리즘같은 기능을 제공하는데 이때 그 룰을 지켜야하지. 클래스와 라이브러리가 합쳐진 구조이고, 이런 협업 형태를 제공 해. 프레임워크 내에서 클래스와 라이브러리를 사용하면 되는 거지. 예를 들면, 부트스트랩, 앵귤러, 뷰가 여기에 해당 돼. 라이브러리(Library) 어떤 특정한 기능을 구현하기 위해 미리 만들어진 함수들의 집합이야. 필요할 때 자유롭게 사용할 수 있는 일종의 도구이지. 라이브러리를 사용하더라도 프레임워크가 정한 방식에 따라야 하는데, 어떻게 사용할지는 개발자가 정할 수 있어. 예를 들면, 리액트와 제이쿼리가 여기에 해당 돼. 프레임워크와 라이브러리의 차이점 - 제어 흐름의 ..

"브라우저"란? 우리가 흔히 인터넷에 접속할 때 사용하는 Chrome(크롬), Safari(사파리), Firefox(파이어폭스), Internet Explorer(익스플로러) 등을 말해. 브라우저는 유저가 선택한 자원을 서버로부터 받아와서 유저에게 보여줘. 이 자원은 페이지 외에도 이미지, 비디오 등의 컨텐츠들도 포함 돼. 받아 온 자원들을 렌더링 과정을 통해 유저에게 보여주게 되지. "렌더링" 되는 과정에서 렌더링이란? HTML, CSS, 자바스크립트 등으로 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말해. 브라우저인 크롬, 사파리, 파이어폭스들마다 다르지만, 그 브라우저들은 렌더링을 수행하는 렌더링 엔진을 가지고 있어. 크롬은 블링크, 사파리는 웹킷, 파이어폭스는 게코라는 렌더링 엔진을 사용..

Restful API? 0 -1. API(Application Programming Interface)란? - Application Programming Interface의 약자야. - 데이터와 기능의 집합을 제공해서 컴퓨터 프로그램간의 상호작용을 촉진하고, 서로 정보를 교환 가능하도록 하는 것이야. 0 -2. REST(Representational State Transfer) 란? - Application Programming Interface의 약자야. - 데이터가 요청(request)되어지는 시점에서 자원의 상태(정보)를 전달해. - JSON 혹은 XML를 통해 데이터를 주고 받는 것이 일반적이지. - HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)..

브라우저 저장소 브라우저 저장소(Browser Storage) - 브라우저 저장소란 해당 도메인과 관련된 데이터를 클라이언트 웹브라우저에 저장하는 공간이야. 브라우저 저장소의 종류 브라우저 저장소는 2가지가 있어. 1. 웹스토리지Web Storage - 웹 데이터를 클라이언트에 저장하기 위해 만들어진 키-밸류 형식의 저장소야. 2. 쿠키Cookie - 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어진 키-밸류 형식의 저장소야. 웹스토리지(web Storage) - 데이터를 클라이언트에 저장할 뿐이고 서버로 전송되지 않아. - 문자열 외에도 구조화된 객체를 저장할 수 있어. 그래서 개발 편의성을 제공하지. - 기존의 웹환경의 쿠키(Cookie)와 비슷한 기능이고, WebStorage는 key-v..