ivorycode

이 글은 CORS에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! 예전에 React를 이용하여 프로젝트를 진행하다 팀원 중 한 명이 CORS와 관련된 이슈와 마주한 적이 있었다. 당시 개발 초보자였던 우리에겐 이 이슈는 너무 강적이었기에 오로지 이슈 해결에만 집중하였고, CORS에 대한 개념을 정리하지 못했었다. 오늘은 그때 간과했던 부분들을 되짚어보고자 CORS에 대해 포스팅해보겠다. CORS Cross-Origin Resource Sharing CORS는 W3C에서 서로 다른 Origin에서 자원(Resource)을 공유할 수 있도록 하기 위해 내놓은 정책을 말한다. 여기서 서로 다른 Origin이라는 것은 도메인 또..

이 글은 SSR(Sever Side Rendering)과 CSR(Client Side Rendering)에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! Rendering 렌더링의 개념부터 다시 짚고 넘어가자! 서버로부터 HTML 파일을 받아 브라우저 화면에 표시하고 그리는 작업을 렌더링이라고 한다. 렌더링의 과정은 아래를 참고하자! - 서버로부터 데이터를 응답받아 HTML을 Parsing 하여 DOM트리를 생성한다. - DOM트리가 구축되는 동안 브라우저는 Render트리를 구축한다. - CSS설정 및 위치를 설정한다. - Render트리가 그려지고 브라우저 화면에 표시된다. SSR Server Side Renderin..

이 글은 Storage에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! 개발자 도구 Application 탭을 열어보면 Storage라는 카테고리가 있다. 여기엔 크게 로컬 스토리지, 세션 스토리지, 쿠기가 있고 그 밖에 IndexedDB와 Web SQL을 확인할 수 있는데, 도대체 이것들이 무엇이고 언제 사용하는지, 그리고 서로에 대한 차이점에 대해 알아보자!! Cookie 쿠키가 무엇인가? 쿠키란, HTTP의 일종으로써 인터넷 사용자가 어떤 웹페이지를 방문할 경우, 그 페이지가 사용하고 있는 서버를 통해 사용자의 컴퓨터에 설치되는 작은 기록 정보 파일을 말한다. 쿠키의 종류는 다음과 같다. - Session Cooki..

이 글은 브라우저 렌더링 과정에 대해 적은 글입니다. 이 포스팅을 포함해 게시된 모든 포스팅의 큰 주제는 순차적인 흐름을 지키지 않습니다. 혼란에 주의해 주세요! 브라우저(Browser)란? 브라우저, 웹 브라우저라고 불리는 이것은 웹 서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 그래픽 사용자 인터페이스 기반의 응용 소프트웨어를 말한다. 쉽게 말해 브라우저를 통해 사용자들은 영상, 이미지 등 자료들을 주고 받을 수 있고 공유도 할 수 있다. 대표적인 브라우저는 구글 크롬, 모질라 파이어폭스, 오페라, 사파리, 인터넷 익스플로어 등이 있다. 브라우저의 주요 기능 브라우저의 주요 기능은 사용자가 선택한 자원(Resource)을 서버에 요청하고 브라우저에 표시하는 것이다. 자원은 보통..