전체 글

리액트 쿼리? 리액트 쿼리는 리액트 애플리케이션에서 비동기 상태를 관리하는 라이브러리이다. TanStack이라는 프로젝트에서 만들어진 오픈소스로, 강력한 비동기 상태 관리를 위한 패키지라고 스스로를 소개하고 있다. 리액트 쿼리를 사용하면 API 요청 상태를 더 간편하게 조회하고 응답 결과를 캐싱하고 에러에 대응할 수 있다. 리액트 쿼리는 데이터의 상태를 추적하고, 렌더링을 최적화하는 기능을 제공한다. 리액트 쿼리의 동기 리액트 애플리케이션을 개발하며 데이터를 가져오고 업데이트 하는 등 복잡한 상태 관리가 필요할 때가 많다. 사용자가 특정 데이터를 수정/삭제 요청을 했을때, 언제 유저의 데이터를 업데이트 해줘야 할까? 하나의 화면의 여러 컴포넌트에서 같은 API 요청이 사용되는데, 1번만 요청하고 결과를 ..

React에서 상태(State)란, 컴포넌트 내에 관리되는 변수 즉, 변하는 데이터를 의미한다. 서비스의 규모가 커질수록 관리해야 할 상태(State)가 많아지고 Prop Drilling이라는 현상이 발생된다. Prop Drilling이란, 하위 컴포넌트로 데이터를 전달하는 과정에서 컴포넌트의 트리 구조 상 중간 과정에 있는 컴포넌트를 거쳐 프로퍼티를 내려주는 것을 의미한다. 중간 과정에 있는 컴포넌트는 전달을 위해 불필요하게 복잡성을 증대시키거나, 프로퍼티 누락 및 변경 복잡성 등 불편함을 야기한다. 이를 체계적이고 효율적으로 관리하기 위해 상태 관리 라이브러리를 사용한다. Redux, MobX, Zustand, Recoil, Jotai 등 다양한 라이브러리가 존재하는데 상태 관리 패턴은 크게 3가지로..

CORS 란? 웹 개발을 하면 꼭 마주하게 되는 에러 메세지, CORS와 CORS 에러에 대해 알아보자. 먼저, CORS는 Cross Origin Resource Sharing(교차 출처 리소스 공유)의 약자로, 서로 다른 도메인 간에 자원을 공유하는 것을 의미한다. 한 도메인의 웹 페이지가 다른 도메인의 리소스에 액세스 할 수 있게 하는 보안 매커니즘을 말한다. 웹 브라우저에서 웹 사이트가 로딩되는 과정에 대해 생각해보자. 1. 프론트엔드 서버에서 HTML, CSS, JavaScript 코드를 받아온다. 2. JavaScript 코드가 백엔드 서버에 리퀘스트를 보내서 데이터를 받아온다. 3. 데이터를 받아서 렌더한다. - 프론트엔드 서버: https://my-service.com - 백엔드 서버: ht..

Next.js? 왜 쓰는 것일까? Next.js는 클라이언트 사이드 렌더링(CSR) 방식인 React를 서버 사이드 렌더링(SSR) 방식으로 구현할 수 있도록 도와주는 프레임워크이다. 리액트를 쓰면서 왜 굳이 또 Next.js 프레임워크를 사용하는 것일까? Next.js를 통해 얻는 가장 큰 장점은, 검색 엔진 최적화(Search Engine Optimization)를 위한 서버 사이드 렌더링(Server Side Rendering)을 가능하게 하기 때문이다. 거기에 프리 렌더링을 통해 미리 데이터가 렌더링 된 페이지를 가져올 수 있게 해주므로 사용자에게 더 좋은 경험을 주는 점도 Next.js를 사용하는 이유이다. 프리 렌더링은 서버 사이드 렌더링(SSR) 뿐만 아니라 정적 사이트 생성(SSG)으로도 ..

타입스크립트의 동작 원리 타입스크립트는 자바스크립트에 '타입'을 부여한 언어를 의미한다. 컴파일 언어이자, 정적인 타입의 타입스크립트가 어떤 원리로 동작되는지 알아보자. 1. 타입스크립트 코드를 작성한다. 2. 작성된 타입스크립트 코드는 '타입스크립트 컴파일러(tsc)'를 통해 파싱되어 '타입스크립트 AST 코드'로 변환된다. 3. '타입 검사기(Typechecker)'를 통해 파싱된 '타입스크립트 AST 코드'의 타입을 체크한다. 4. 타입스크립트 AST 코드를 '자바스크립트 코드'로 변환한다. --- 해당 과정까지는 '타입스크립트 컴파일러(tsc)'에 의해 수행된다 --- 5. 자바스크립트 코드를 '자바스크립트 AST 코드'로 파싱한다. 6. 자바스크립트 AST 코드를 '바이트 코드'로 변환한다. 7..

TypeScript를 사용하는 이유 자바스크립트만 사용하는 것에 비해 타입스크립트를 사용하면 어떤 점이 좋은걸까? 타입스크립트의 특징을 기준으로 정리해보자. 정적 타이핑 타입스크립트는 정적 타입을 제공해 코드 작성 시의 변수, 함수, 객체 타입을 명시해준다. 이는 컴파일 시간에 오류를 발견하고 디버깅을 용이하게 해준다. 자바스크립트는 동적 타입 언어로, 런타임에서만 타입 관련 오류를 발견할 수 있기 때문에 구동 전에 오류를 디버깅할 수 있다는 점이 용이하다. 강력한 객체 지향 프로그래밍(OOP) 지원 타입스크립트는 클래스, 인터페이스, 상속 등의 강력한 객체 지향 프로그래밍 기능을 제공한다. 이를 통해 큰 프로젝트를 더욱 쉽게 관리하고 구조화할 수 있는 장점이 있다. 개발 도구의 향상된 지원 타입스크립트..