Tanstack Query에 대한 고찰
'One of the best libraries for managing server state.' 일까..?
Latest articles
[Snippet] 배열 생성하기
1. Array.from let num = Array.from({ length: n }, (_, i) => i + 1) length가 n인 배열을 만들고, 각 요소를 1부터 n까지 채워줌 순회 가능 또는 유사 배열 객체에서 얕게 복사된 새로운 배열 인스턴스 생성 2. Array와 fill, map let num = Array(n).fill(0).map((_, i) => i + 1); Array(n)은 n 길이의 빈 배열을 생성하고,...
React 렌더링 최적화
React 렌더링이란? 리액트에서 렌더링이란, 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미한다. 즉 사용자 화면에 View(내용)를 보여 주는 것. 초기 렌더링 렌더링을 담당하는 render 함수는 컴포넌트의 정보를 이용해 화면을 구성(렌더링)한다. 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있어, render 함수가 실행되면 그 내부에 있는 컴포넌트들도 재귀적으로 렌...
로컬에서 Aws Ec2 인스턴스에 배포하기
EC2 (컴퓨팅) Elastic Compute Cloud(EC2)로 클라우드 컴퓨팅 서비스 클라우드를 통해 서버, 스토리지, 데이터베이스 등의 컴퓨팅 서비스를 제공하는 것으로 AWS에서 원격으로 제어할 수 있는 가상의 컴퓨터 한 대를 임대하는 것과 같다. 제공되는 가상 이미지를 ‘인스턴스(Instance)’라고 하며, 필요에 따라 사양(CPU 코어 수, 메모리 용량, 스토리지)을 변경할 수 있다. 서버에 Build 가져오기 1. 로컬에...
AWS S3 & CloudFront로 배포하기
S3 & CloudFront란? AWS의 S3(Simple Storage Service)와 CloudFront는 둘 다 Amazon Web Services의 서비스 중에서 웹 애플리케이션과 데이터를 관리하고 배포하는데 사용되는 서비스다. Amazon S3 (Simple Storage Service): Amazon S3는 클라우드 기반의 객체 스토리지 서비스로, 데이터를 안전하고 확장 가능한 방식으로 저장하는 데 사용된다. S3는 파일, 이...
Jenkins CI/CD 프론트 환경 구축하기
1. 아이템 생성 Dashboard → 새로운 Item Enter an item name 프로젝트 명 입력 Freestyle project 선택 2. 테스트 구성 세팅 메뉴 → 구성 2-1. 소스코드 관리 Repository URL 해당 Repository URL 입력(https://git-1.cocone.jp/syf/hello-cocone-front-v2.git → GitLab > Clone > HTTPS clone 복사) ...
Next.js App Router에서 다국어(i18n) 처리하기
i18next(internationalization) 웹/앱 어플리케이션에 다국어를 지원하는 자바스크립트 프레임워크 React, Angular, Vue.js를 비롯한 Node.js, Deno, PHP, iOS, Android 등 다양한 플랫폼을 지원한다. 유저 locale(지역/언어)을 감지해 사용중인 브라우저 환경의 언어를 제공한다. 작동 방식 클라이언트 - window.navigator const locale = window.nav...
Node, Ngnix 설정하기
Node 자바스크립트 프로그램을 실행할 수 있는 환경 Node.js “node.js는 Chrome v8 javascript 엔진으로 빌드된 javascript 런타임이다.” 기존에는 자바스크립트 프로그램을 웹 브라우저 위에서만 실행할 수 있었는데, 구글이 다른 엔진과 달리 매우 빠르고 오픈소스로 공개한 v8 엔진을 사용하여 크롬을 출시하면서 v8 엔진 기반의 노드 프로젝트가 시작되었음 노드는 v8(자바스크립트 엔진)과 liubuv(비동기...
React 반응형 라이브러리로 Web/Mobile 구분하기
React로 어플리케이션 구현 시, PC와 Mobile을 구분해서 반응형으로 제작할 때 npm 라이브러리를 사용할 수 있다. 대표적으로 ’react-device-detect' , ’react-responsive' 가 있으며, 사용률은 npm trends 기준 react-device-detect 가 높다. react-device-detect 플랫폼/디바이스를 확인해 분기 처리할 수 있으며, 특정 조건에 맞춰 Android/IOS에 따라 해...