1. React 컴포넌트란? React 컴포넌트는 UI를 나타내는 독립적이고 재사용이 가능한 모듈이다. 컴포넌트에는 함수형 컴포넌트와 클래스형 컴포넌트 두 가지 타입이 있다. React 공식 메뉴얼에는 함수형 컴포넌트 사용을 권장하기 때문데 이 글에서는 함수형 컴포넌트를 다루겠다. 2. 함수형 컴포넌트 함수형 컴포넌트는 React에서 UI를 정의하기 위해 사용되는 함수이다. React 공식 문서에서 최신 버전의 React에서는 함수형 컴포넌트 사용을 권장한다. 함수형 컴포넌트의 장점 함수형 컴포넌트의 장점은 간결하게 작성이 가능하며 코드의 가독성이 뛰어나고, Hook을 이용해 state와 라이프 사이클을 제어할 수 있는 등 클래스 컴포넌트 처럼 동작할 수 있는 점이다. 또한 컴포넌트에서 다른 컴포넌트로 ..
REACT
React는 오직 V(View)만 신경 쓰는 라이브러이다. 1. 컴포넌트 React 프로젝트에서 특정 부분의 생김새와 재사용 가능한 기능들을 내장하며, 컴포넌트의 생김새와 작동 방식을 정의한 선언체이다. 2. 렌더링 사용자 화면에 뷰를 보여주는 것을 렌더링이라 한다. React는 가상DOM을 사용해 렌더링을 이루지만, 변경된 부분만 실제DOM에 적용된다. 2.1 초기 렌더링 사용자에게 맨처음 어떻게 보일지를 정하는 작업 위의 작업은 render() 함수가 한다. render() 함수는 뷰의 모습과 동작방식이 담긴 정보 객체를 반환한다. 최상위 컴포넌트가 render() 하면 자식 컴포넌트도 재귀적으로 렌더링 한다. render() 함수가 실행되고, 해당 컴포넌트의 가상 DOM이 생성되며, 변경사항이 실제..
브러우저의 랜더링 원리 브라우저가 화면에 나타나는 요소를 렌더링할 때, webkit이나 Gecko 등과 같은 렌더링 엔진을 사용한다. 렌더링 엔진이 HTML, CSS, Javascript를 렌더링할 때 CRP(Critical Rendering Path)라는 프로세스를 사용하며 아래의 단계들로 이루어진다. 토큰화된 HTML 문자열들을 이용해 DOM(Document Object Model) 트리를 구축 DOM은 Javascript를 이용해 실제 상호작용할 수 있는 HTML 엘리먼트로 이루어진 객체 HTML 파서의 특징 너그러운 속성 ▶ 최상단에 태그, 닫는 태그를 작성하지 않아도 정상적으로 렌더링된다. (HTML은 대부분의 프로그래밍 어너가 속한 촘스키의 문맥자유문법에 속하지 않기에 그렇다 한다) 파싱 과정..
어떤 일이 있었나.... 유저가 속한 프로젝트들을 보여주기 위해 유저의 정보를 이용해 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...
