react36 [react query] stale이란? (feat, 캐싱,use query,fetch, react query에 대해 알아보) React-Query의 캐싱개념은 stale과 cachetime을 통해 이루어진다 Stale과 cacheTime은 무엇인지 먼저 알아보자. | Stale 이란? react query는 기본적으로 캐싱된 data를 stale한 상태로 여긴다. stale의 사전적 의미는 "신선하지 않는"이라는 뜻을 가진다. 신선하다 함은, 서버에서 조회한 데이터는 그때 당시의 데이터 snapshot이고, 외부 요청으로 서버 데이터가 변경이 되었다면 내 브라우저가 가진 데이터는 이미 오래된 낡은 데이터가 되었으므로 stale하다고 말하는 것이다. stale이란 최신화가 필요한 데이터라는 의미로 stale한 상태가 되면 다음의 경우에 refetch 된다. refetch 되는 조건들을 확인해보자. 1. 새로운 query inst.. 2022. 3. 20. [Docker와Kubernetes]도커(docker), 쿠버네티스란(kubernetes) 비교 도커와 쿠버네티스 비교 예시 컨테이너를 하나만 띄워서 사용해야지! => 도커 0월 0시에, 100개의 컨테이너를 자동으로 생성해야지! => 쿠버네티스 즉, 도커는 ’이미지를, 컨테이너에 띄우고 실행하는 기술’이고 쿠버네티스는 '도커를 관리하는 툴'이라고 생각하시면 됩니다. 따라서, 도커는 '한 개의 컨테이너를 관리’하는 데 최적화 되어있고, 쿠버네티스는 '여러 개의 컨테이너를, 서비스 단위로 관리’하는 데 최적화 되어있습니다. 도커(docker)란? 도커는 '컨테이너 기반의 오픈소스 가상화 플랫폼' 입니다. 그렇다면, 컨테이너란 무엇일까요? 컨테이너는, ‘애플리케이션’과 ‘애플리케이션을 구동하는 환경’을, ‘Host OS’ 로부터 격리한 공간을 의미합니다. 컨테이너는 보통 마이크로서비스로 사용됩니다. 마.. 2022. 2. 18. [React]아토믹(Atomic) 컴포넌트 디자인 개발 패턴 아토믹(atomic)디자인 패턴 대형 프로젝트에서 재사용할 수 있는 컴포넌트들은 필수입니다. 이번에는 여라가지 패턴 중 하나인 아토믹(Atomic)디자인 패턴을 알아보겠습니다. 소개 아토믹 디자인은 사용자 인터페이스를 작고 단순한 요소로 분리하는 개념입니다. 아토믹 디자인 패턴은 Aoms(원자), Molecules(분자), Organisms(유기체), Templates(템플릿)으로 구성되어지고 최종적으로는 Pages 단위가 됩니다. 즉, 일관된 UI를 만들고 유지보수성을 향상시켜줍니다. 구성요소 Atoms - 원자는 버튼, 제목, 텍스트 입력 필드와 같은 가장 작은 구성 컴포넌트이다. - 모든 컴포넌트들의 기초가 되는 블록이며, 더 이상 분해 될 수 없는 필수 요소이다. Molecules - 분자는 2개.. 2022. 1. 24. [webpack]웹팩 시작하기(1) 저번 글에 이어 웹팩 프로젝트를 설정하겠습니다. 먼저 package.json 파일을 만들어 줍니다. 문법 npm init -y webpack 준비에 필요한 패키지들을 다운받아 줍니다. (-D : 개발 영역에 다운로드 받는 의미입니다.) npm i -D webpack webpack-cli webpack-dev-server@next webpack : bundler 번들러가 동작하기 위한 핵심적인 package입니다. (webpack version4 이후는 cli도 설치해야 합니다.) webpack-cli : 터미널 부분에 입력하는 여러가지 명령들을 커맨드라인 interface라고 하는데 이것을 지원해줍니다. (이로인해 webpack-cli를 통하여 command line을 사용할 수 있게 만들어 줍니다 밑에.. 2021. 10. 6. [webpack]웹팩(webpack) 초기 설정 setting 이번에는 webpack 설정에 대해서 알아봅시다 👀 front-end의 필수 무기라고 할 수 있습니다. 먼저 등장 배경부터 알아보죠! | 웹팩(webpack)이 왜 생겼을까? 꼭 필요할까? - 대규모 project에서는 js 파일안에 많은양의 코드들이 존재합니다. 이 수많은 code line을 관리하려면 장난아니겠죠? 더 나아가 변수명도 만들기 힘들어집니다. 또한, 로딩하는데 속도가 파일이 크면 클 수록 장난 아니게 될겁니다. 결정적인 건, 신규 사이트들은 SPA를 활용한 방식의 사이트들이 많습니다. SPA란 하나의 html page에서 여러개(연관된)의 js 파일들을 포합하는 page입니다. 따라서 흩어져있는 js파일들을 하나의 파일로 번들링해줄뿐더러, 성능 최적화도 도와줍니다. 따라서 webpack을.. 2021. 10. 6. [Webpack]webpack-bundle-analyzer 배포 준비 안녕하세요! 이번에는 TypeScript Proejct를 배포를 위한 준비를 해보겠습니다! 먼저 간단하게 webpack-bundle-analyzer(웹팩 번들 에널라이저)에 대해 알아보겠습니다! Webpack을 사용하여 번들링되는 모듈을 분석해서 시각적으로 표현해주는 모듈입니다. 모듈이 차지하는 용량에 따라서 눈에 보이는 영역도 커지기 때문에 어떤 모듈이 얼만큼 용량을 차지하는지 쉡게 파악할 수 있습니다 밑에 그림 처럼요 ! Webpack 특성상 수십개들의 파일들을 단 하나의 js 파일로 압축해주는 역할을 맡고 있습니다. 이럴 때 용량 문제가 큰 이슈 사항인데요. 합쳤을 때 용량이 너무 크면 문제가 되겠죠? 지금은 app.js는무려 총 크기가 1.5MB를 차지하고 있습니다. (사실상 한국은 별 문제 없는.. 2021. 8. 27. 이전 1 2 3 4 ··· 6 다음
