KassyLog

DOM과 Virtual DOM이란? DOM은 document object model의 약자로 말 그대로 문서객체모델인데 자바스크립트가 이용할 수 있는 객체를 의미한다. (div a input …) Virtual DOM은 말 그대로 가상돔을 의미하는데 실제돔의 복제본으로 돔은 브라우저가 화면을 그리는데 모든 정보가 다 들어있기때문에 조작하는 작업이 무거운데 (수정될 때 마다 렌더트리가 계속해서 실시간으로 갱신 됨)리액트에서는 가상돔을 만들어서 관리하며 성능을 보다 효율적이게 한다. 가상돔을 활용하면 직접 돔을 조작하지 않고 최초의 돔의 상태를 메모리에 기억하고 변경이 있을 경우 해당 변경 사항만 반영하는 것이다. 리액트의 특징은? 가상돔을 활용하여 보다 성능을 가볍게 할 수 있다. 컴포넌트를 쉽게 재사용가..

https://recoiljs.org/ko/ Recoil A state management library for React. recoiljs.org 전역 상태를 관리하는 라이브러리이며 전역 store에서 상태들을 관리하며 컴포넌트가 각 상태를 구독하고 있는 형태로 사용한다. 내부적으로 ref를 통해 상태를 전달하여 리렌더링을 방지할 수 있고, atomic concept를 차용하여 리액트 상태에 가깝게 사용할 수 있다는 장점이 있다. atoms(공유상태)에서 selectors(순수함수)를 거쳐 리액트 컴포넌트로 내려가는 데이터플로우그래프를 만들 수 있다. atoms: 컴포넌트가 구독할 수 있는 상태의 단위 고유한 키, 기본값 필요 atom을 읽고 쓰려면 useRecoilState라는 훅을 사용 React의..

TanStack Query | React Query, Solid Query, Svelte Query, Vue Query Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue tanstack.com 일반적인 연결을 넘어 응답값 캐싱, 무한 스크롤을 위한 메서드등 다양한 기능들을 지원해주고 있는 라이브러리이다. React Query는 서버로부터 데이터를 요청하고 처리하기 위한 라이브러리로, RESTful API, GraphQL 등 다양한 형태의 데이터 요청을 처리할 수 있다. React Query는 캐시와 리패칭 기능을 제공하여 데이터 요청 및 처..

공통점 둘 다 CSS-in-JS 라이브러리로서, JavaScript 코드 안에서 CSS 스타일을 작성할 수 있다. 차이점 //styled-component const Button = styled.button` color: red; background-color: white; `; //emotion import { css } from '@emotion/react'; const Button = styled.button` ${css` color: red; background-color: white; `} `; css 클래스 이름 styled-components - 자동으로 고유한 CSS 클래스 이름을 생성한다. 이를 통해 클래스 이름 충돌을 방지할 수 있다. - CSS 문법을 따른다. emotion - 컴파일..

@craco/craco Create React App Configuration Override, an easy and comprehensible configuration layer for create-react-app.. Latest version: 7.0.0, last published: a month ago. Start using @craco/craco in your project by running `npm i @craco/craco`. There are 370 other www.npmjs.com 상대 경로 지옥에서 벗어나기 위한 craco ../을 무한 반복 하여 찾는 불편함을 해소할 craco Craco는 Create-React-App Configuration Override의 약어로, 말 그대..

JWT 토큰 인증 방식은 제 3자에게 토큰이 탈취되는 경우 보안에 취약하다는 단점이 있어 토큰에 유효기간을 부여하여 보안을 강화하게 되는데, 유효기간이 짧으면 사용자는 계속 로그인을 다시 해야하기 때문에 불편해 진다. 여기서 사용할 수 있는 것이 Refresh Token을 활용한 토큰 리프레시다. 다른 블로그를 참고해서 가져온 사진은 이와 같다. 여기서 내가 나만의 언어로 생각해본 리프레시 토큰의 인터셉터 작동과정을 대화체로 설명해보겠다! 서버: 너 토큰 만료 됐으니까 리프레시토큰으로 너인거 증명해~ 클라이언트: 앗! 나 리프레시토큰 챙겨왔어! 얼렁 통과시켜줘 서버: 음~ 알겠어. 다음에 또 챙겨와~ alert은 sweetalert2 라이러리를 활용해서 구현했으며 내가 실제로 구현한 코드는 아래와 같다 ..

현재 내가 진행중인 기능 중 이미지로 다운로드 해야하는 화면이 있는데 서버와 통신하지 않고 웹스토리지 상으로 저장된 데이터를 보여주고 있다. 나는 라이브러리를 활용하여 컴포넌트 자체를 화면으로 보여주는 기능을 구현하고 싶었다. 내가 사용한 라이브러리는 html2canvas이다. html2canvas Screenshots with JavaScript. Latest version: 1.4.1, last published: a year ago. Start using html2canvas in your project by running `npm i html2canvas`. There are 1777 other projects in the npm registry using html2canvas. www.npmjs..