웹 스토리지(Web Storage)브라우저 내에 key-value 형태로 데이터를 저장할 수 있는 저장소로 localStorage 와 sessionStorage 가 존재한다.주요 특징네트워크 요청 시 서버로 전송되지 않는다.최소 2MB 혹은 그 이상의 데이터를 저장할 수 있다.모든 웹 스토리지 객체 조작은 자바스크립트 내에서 실행된다. 따라서 서버가 http 헤더를 사용하여 스토리지 객체를 조작할 수 없다.웹 스토리지 객체는 domain, protocol, port 로 정의되는 origin 에 묶여 있으므로 protocol 과 sub-domain이 다르면 데이터에 접근할 수 없다.storage 이벤트web storage 에서 데이처가 갱신되면 storage event 가 실행된다.key - 변경된 데이터..
Firebase Realtime Database 101. 1. 구글 파이어베이스 홈페이지에 접속 이렇게 메인 화면에 시작하기 버튼을 클릭한다. 2. 파이어베이스를 적용하기 위한 프로젝트를 추가한다. 3. 프로젝트 이름을 입력한다. 3. 구글 애널리틱스 사용 여부를 결정한다. 구글 애널리틱스는 웹에 대한 전반적인 분석 툴을 제공해주는데, 서비스 배포가 목적이 아닌 mock API 로 사용하는게 목적이므로 나는 굳이 애널리틱스를 사용하지 않고 넘어갔다. 4. Realtime Datebase 생성 여러가지 기능을 제공하지만 api 구현을 위해 realtime database 즉, 실시간 데이터베이스를 클릭해준다. 다음 화면에서 데이터 베이스 만들기를 클릭하면 생성 과정으로 넘어간다. 5. 데이터베이스 생성에 ..
💡 본 포스팅은 NextJs 프로젝트를 배포 과정을 소개하는게 아니라, 배포 과정에서 겪은 에러들을 소개하고 해결 방법들을 기록하기 위한 글입니다. 배포 방법을 찾으시는 분은 뒤로가기 버튼을 눌러주세요. 에러 환경 기존에 Vercel 을 활용하여 배포 했던 프로젝트를 Github pages 로 배포 플랫폼을 변경하는 과정에서 발생 이전에 진행했던 사이드 프로젝트를 Vercel을 사용하여 배포하고 가비아에서 구매한 도매인을 연결했었다. 한달 반쯤 지났을까 아래와 같은 경고 메시지를 받았다. 아무래도 각 페이지에 작게는 10여개 많게는 수백개의 이미지를 랜더링 하다보니 image source의 갯수 제한을 초과했던 모양이다. 한동안 채용과제를 진행하느라, 아무런 조치를 못했었는데 5차례 경고 메시지가 온 후..
HTTP 의 개념 설명 HTTP 의 사전적 정의는 HyperText Transfer Protocol, 즉 World Widw Web을 위한 데이터 통신의 기초이자 웹 사이트를 이용하는데 쓰는 프로토콜이다. 이를 한 단계 풀어서 설명하자면 컴퓨터 내부에서 혹은 컴퓨터 사이의 데이터 교환방식을 정하는 규칙체계가 존재하는데, 이것이 프로토콜이다. 인터넷에서 컴퓨터들이 서로 정보를 주고 받는데 쓰이는 프로토콜은 대게 OSI 7계층 모델로 설명되거나 TCP/IP 4계층 모델로 설명된다. 이 중에 애플리케이션 계층은 웹 서비스, 이메일 등 서비스를 실질적으로 이용하는 사람들에게 제공한다. HTTP 는 FTP, SSH, DNS 등과 함께 응용 프로그램이 사용되는 프로토콜 계층인 애플리케이션 계층이다. HTTP는 HT..
최근 회사에서 서비스 홈페이지를 리뉴얼하는 업무를 맡아서 하고 있다. 백엔드 개발자 없이 프론트단만 업데이트를 진행하고 있는데, 기존에 있는 로그인 api 에 post 요청을 보내니 CORS 에레가 발생했다. 이전에 부트캠프에서 프로젝트를 진행했을 때, 겪었던 문제였지만 당시에 백엔드 개발자분이 서버단에서 해당 에러를 해결하기 위한 처리를 진행해주셔서 수월하게 해결했었다. 이번에 백엔드 개발자 없이 해당 문제를 해결하게 되면서 공부했던 내용들을 정리하고 백엔드 개발자가 없을 때 프론트 단에서 어떻게 해결하였는지 기록하고자 한다. SOP ( Same Origin Policy) 우선 CORS 를 이해하기 위해 SOP 에 대해 알고 있어야 한다. Same Origin Policy, 즉 동일 출처 정책은 다른 ..
Network Panel (네트워크 패널) Inspect Network Activity Demo Site 언제 네트워크 패널을 사용하는가? 보통 네트워크 패널은 resources 들이 기대한대로 download되고 upload 되는지 확인하고자 할 때 사용한다. resources 들이 제대로 upload되거나 download 되는지 확인하고자 할 때, 개별적인 resource의 속성들을 확인할 때 (HTTp headers, content, size 등) 만약 page load 속도를 향상시키고자 한다면 네트워크 패널보다는 Audits panel을 찾는 것이 좋다. 이것은 어떻게 하면 page 성능을 향상시킬지에 대한 방법들에 대해 제안해주기 때문이다. 최근에는 Audits panel 은 Lighthous..
Semantic Web 초기의 Web은 정보를 시각화하여 사용자에게 보여주었지만 이를 server 나 computer가 이해할 수 없었다. 문단의 맨 위에 굵은 글씨로 쓰인 것이 제목이라는 것을 사용자는 알 수 있지만 machine은 단지 굵은 글씨로만 인식하기 때문이다. 시맨틱 요소(semantic element)를 사용하면 web content에 의미를 부여할 수 있고 이를 통해 서버나 컴퓨터 역시 data의 의미를 이해할 수 있게 된다. (div 태그 대신 header, nav, p 태그 등을 사용하면 사용자가 개입하지 않아도 어디가 제목이고 네비게이션인지, 문단인지 구분이 가능하다.) 시맨틱 웹은 web of document 를 web of data로 바꾸었다. 웹 접근성 영역과 기능에 따라 적정..
Http Hyper Transfer Protocol Http 는 web-based application들이 상호 간에 data를 상호 교환할 수 있도록 해주는 application layer protocol 이다. TCP/IP based protocol 이다. Http 는 이미지, 비디오, 오디오, 문서와 같은 content를 전송하는데 사용된다. Http의 3가지 중요한 특징 connectionless request 를 만들고 난 후 client는 server와 연결을 끊고, response가 준비되면 server는 다시 client 와 연결을 만들고 다시 response를 전달한다. Http는 컴퓨터들이 읽을 수 있는 것이라면 어떤 data라도 전송이 가능하다. stateless client와 ser..
웹페이지를 만들면 브라우저가 HTML 파일을 읽기 시작하며 HTML 파일 내부의 각각의 태그들을 분석하여 Node로 변환한다. HTML 태그를 브라우저가 이해할 수 있는 형태의 오브젝트로 변환하는 것이다. Node 오브젝트는 EventTarget 이라는 오브젝트를 상속한다. 결국 Node 오브젝트는 EventTarget의 오브젝트라고 말할 수도 있다. 즉, 모든 Node는 이벤트가 발생할 수 있다. 따라서 document 역시 Node를 상속하기 때문에 document에서 이벤트가 발생할 수도 있다. 다시 말해 모든 Node 는 EventTarget이다 라고 할 수 있다. MDN Node MDN EventTarget CSSOM : CSS Object Model 브라우저에서 DOM을 만들고 나면 우리가 정..
