@kayoungkim

Tanstack Query에 대한 고찰

Nov 14, 2024 · 8 min read · 개발을하면서 Tanstack Query의 위엄을 느끼곤 한다. 코드는 직관적이고 사용법도 어렵지 않은데 방대한 어플리케이션을 효율적으로 관리할 수 있게 해준다. 그리고 GraphQl을 써보면서 비동기 데이터를 잘 처리하는 것이 얼마나 중요한 것인지 다시 한번 깨달았다. 상태(State) 브라우저는 단방향으로 페이지를 보여주고 웹을 제어하는 정도의 웹 페이지의 역할에서, 프로덕트 규모가 확장되면서, 다양한 인터렉션 및 사용자 경험(UI/UX)이...

[Snippet] 배열 생성하기

Oct 28, 2024 · 1 min read · 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 렌더링 최적화

May 21, 2024 · 3 min read · React 렌더링이란? 리액트에서 렌더링이란, 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미한다. 즉 사용자 화면에 View(내용)를 보여 주는 것. 초기 렌더링 렌더링을 담당하는 render 함수는 컴포넌트의 정보를 이용해 화면을 구성(렌더링)한다. 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있어, render 함수가 실행되면 그 내부에 있는 컴포넌트들도 재귀적으로 렌...

로컬에서 Aws Ec2 인스턴스에 배포하기

Apr 10, 2024 · 2 min read · EC2 (컴퓨팅) Elastic Compute Cloud(EC2)로 클라우드 컴퓨팅 서비스 클라우드를 통해 서버, 스토리지, 데이터베이스 등의 컴퓨팅 서비스를 제공하는 것으로 AWS에서 원격으로 제어할 수 있는 가상의 컴퓨터 한 대를 임대하는 것과 같다. 제공되는 가상 이미지를 ‘인스턴스(Instance)’라고 하며, 필요에 따라 사양(CPU 코어 수, 메모리 용량, 스토리지)을 변경할 수 있다. 서버에 Build 가져오기 1. 로컬에...

AWS S3 & CloudFront로 배포하기

Mar 18, 2024 · 2 min read · S3 & CloudFront란? AWS의 S3(Simple Storage Service)와 CloudFront는 둘 다 Amazon Web Services의 서비스 중에서 웹 애플리케이션과 데이터를 관리하고 배포하는데 사용되는 서비스다. Amazon S3 (Simple Storage Service): Amazon S3는 클라우드 기반의 객체 스토리지 서비스로, 데이터를 안전하고 확장 가능한 방식으로 저장하는 데 사용된다. S3는 파일, 이...