브러우저의 랜더링 원리 브라우저가 화면에 나타나는 요소를 렌더링할 때, webkit이나 Gecko 등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript를 렌더링할 때 CRP(Critical Rendering Path)라는 프로세스를 사용하며 아래의 단계들로 이루어진다. 토큰화된 HTML 문자열들을 이용해 DOM(Document Object Model) 트리를 구축 DOM은 Javascript를 이용해 실제 상호작용할 수 있는 HTML 엘리먼트로 이루어진 객체 HTML 파서의 특징 너그러운 속성 ▶ 최상단에 태그, 닫는 태그를 작성하지 않아도 정상적으로 렌더링된다. (HTML은 대부분의 프로그래밍 어너가 속한 촘스키의 문맥자유문법에 속하지 않기에 그렇다 한다) 파싱 과정..
REACT
어떤 일이 있었나.... 유저가 속한 프로젝트들을 보여주기 위해 유저의 정보를 이용해 DB에 유저가 속한 프로젝트들의 정보를 가져와야 했다. DB에서 프로젝트들의 정보를 가져오기 까지 완료했다. 그렇다면 가져온 데이터는 어떻게 보관해야 할까? 라는 의문이 들었다. 가공은 객체 형식으로 된 데이터를 가져왔기에 비교적 쉽게 가공이 된다 치자. 내가 고민한 보관 방법은 Redux의 store에 보관을 해도 될까였다. 데이터를 가져올 방법을 고민하던 중 보게 된 react-query의 useQuery의 설명문을 보다 이런 의견을 보게되었다. 이 의견을 보니.... 흠.... 아무래도 우리가 만들고 있는 서비스가 실시간 수정이 가능도 하고, 다른 유저가 프로젝트에 새로 입장해도 안보여지면 이상할 것 같았다. 그래..
기본적으로는 fetch로 쿠키를 주고 받지를 않지만, 쿠키를 주고 받으려면 credentials를 설정해줘야한다. fetch는 Promise 객체를 반환한다.(HTTP Error는 반환하지 않는다.) credentials를 사용하는 예시를 적어두어야 겠다. 나중에 사용할 수 있기 때문..... 1. 자격 증명이 포함되게 보내는 경우 fetch(`${process.env.REACT_APP_API_URL}/naver_login/logout`, { method: 'get', credentials: 'include' }) 2. 요청하는 URL과 호출 스크립트가 동일한 Origin을 가졌을 때만 자격증명을 보내는 경우 fetch(`${process.env.REACT_APP_API_URL}/naver_login/l..
쿼리 스트링이란? URL의 한 부분으로써, URL에 부가정보(어떤 키워드를 검색하거나 페이지에 필요한 옵션)을 포함할 때 사용한다. 쿼리스트링을 사용하면 다양한 상황에서 조건에 맞는 정렬된 형태의 정보를 요청하고 받을 수 있다. 쿼리 스트링의 필요성? 검색을 예를 들자. 공구를 검색하는데 세상 모든 공구를 검색하는 것이 아니기에 검색할 키워드와 보여질 갯수, 옵션별 노출(상위 10개, 최신 10개 등) 과 같이 상황별 구체적으로 정보를 요청하고 받기 위해 쿼리 스트링을 사용한다. 쿼리 스트링의 모습과 라우팅 문자열의 모습을 하고 key=value 와 같이 작성된다. URL의 일부분으로 ? 를 기점으로 시작되며 각 key의 구분은 & 로 작성된다. // 한개만 있는 경우 http://www.example...
모달을 처음 만들어 보기도 하고 타입스크립트도 처음 다루어서 정말 어려웠다.... 오늘 완성은 하지 못했지만 React의 Portal이라는 기능을 이용해 fullPage 모달에 사용할 모달을 만들었다. React Portal이란? 부모 컴포넌트의 DOM 계층 구조의 밖에 있는 DOM노드로 자식(children)을 렌더링하는 방법을 제공할 수 있게 해주는 친구 ReactDOM.createPortal(child, container) 위와같이 사용해주면 되는데, child에 포탈을 통해 밖으로 보낼 대상이 되는 컴포넌트, container는 포탈을 통해 child가 이동할 곳 한마디로 child를 렌더링할 DOM Element를 넣어준다는 것이다. Portal을 통해 모달을 만들려면 모달 컴포넌트가 렌더링 될..
프로젝트 진행을 위해 공부를 속성으로 마치고, 처음으로 할당된 업무... 상단 헤더 제작이였다. 우선 헤더는 Figma에서 설계한대로 제작했다. 위와 같은 모양으로 제작을 했으며 헤더가 위아래 스크롤시에도 고정되게 했다. 결과는 아래와 같다. 아이콘 이미지의 모듈화 또한 했으며 코드는 아래와 같다. import { Link } from 'react-router-dom'; import icon from 'statics/img/icon/gamalda_icon.png'; import 'styles/components/modules/icon/icon_default.scss' type Test = { link: boolean } // link Prop을 이용해서 이미지만 필요할 때와 link와 같이 사용할 때 구..
