항해 플러스

React-Query(Tanstack-Query)React Query는 리액트 어플리케이션에서 비동기 데이터의 페칭(Fetching)과 캐싱(caching)을 간편하게 관리할 수 있게 해주는 라이브러리다.* 페칭과 캐싱더보기데이터 페칭이란?서버로부터 데이터를 가져오는(읽는) 것캐싱이란?특정 데이터의 복사본을 저장하여 이후 동일한 데이터의 재접근 속도를 높이는 것 주요 기능데이터 캐싱 : 동일한 데이터를 여러 번 요청하지 않도록 캐싱하여 성능을 향상시킴.자동 리페칭 : 데이터가 변경되었을 때 자동으로 리페칭하여 최신 상태를 유지함.쿼리 무효화 : 특정 이벤트가 발생했을 때 쿼리를 무효화하고 데이터를 다시 가져올 수 있음.  라이플 사이클 상태 정의 fresh : 만료되지 않은 쿼리컴포넌트 마운트, 업데이트..

Redux리덕스(Redux)는 어플리케이션 상태관리를 위해 만들어진 JS 라이브러리이며, 특히 리액트와 함께 사용된다.전역 상태관리 라이브러리이며 단방향 데이터 흐름의 리액트를 사용할 때에 불편한 점들을 해소해준다.예를 들면 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때 반드시 부모 컴포넌트를 거쳐야만 하기 때문에 부모 컴포넌트에서 그 값이 필요 없어도 불필요하게 거쳐야한다.그렇기 때문에 중앙에서 상태관리 해주는 것이 필요하다. 리덕스의 주요 기능1. 중앙화된 상태 관리어플리케이션의 모든 상태를 하나의 중앙 저장소(Store)에서 관리하며, 상태를 한 곳에서 관리하므로 데이터 흐름을 추적하기 쉽다. 2. 예측 가능한 상태 변경상태는 리듀서(Reducer)라는 순수 함수에 의해 변경되며, 리듀서는..

CHAPTER5 함수5.1 함수 매개변수function sing(song: string) { console.log(song);}sing("Hello");변수와 마찬가지로 타입 애너테이션을 통해 타입을 선언해 준다. 5.1.1 필수 매개변수JS에서는 인수의 수와 상관없이 함수를 호출할 수 있지만, TS에선 함수에서 선언된 모든 매개변수가 필수라고 가정하여 잘못된 수의 인수로 호출하면 타입오류가 발생한다.function singTwo(first: string, second: string) { console.log(`${first} ${second}`);}singTwo("do"); //Expected 2 arguments, but got 1singTwo("do", "re"); 5.1.2 선택적 매개변수JS..

2주차 입문 내용2025.02.16 - [항해99 플러스/React 스터디] - [React 스터디] 2주차 입문 단계 [React 스터디] 2주차 입문 단계11. 불변성 & 순수함수11.1 불변성1. 불변성이란?불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말한다. 원시데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 s-o-o-min.tistory.com1. Styled Components - 소개, 사용리액트에서 CSS-in-JS 방식으로 컴포넌트를 꾸밀 수 있게 도와주는 패키지다.기본적인 사용 방식은 꾸미고자 하는 컴포넌트를 SC의 방식대로 먼저 만들고, 그 안에 스타일 코드를 작성하는 방식이다.// src/App.jsimport React from "react";// sty..

11. 불변성 & 순수함수11.1 불변성1. 불변성이란?불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말한다. 원시데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성이 없다.  2 .변수를 저장하면, 메모리에 어떻게 저장이 될까?만약 우리가 let number = 1 이라고 선언을 하면, 메모리에는 1이라는 값이 저장되는데, number라는 변수는 메모리에 있는 1을 참조하게 된다. 다음 let secondNumber = 1 라는 또다른 변수를 선언했다고 가정했을 때 JS는 이미 메모리에 생성되어 있는 1이라는 값을 참조한다. 두 변수는 이름은 다르지만, 같은 메모리의 값을 바라보고 있다. let number = 1;let secondNumber = 1;console.log(n..

CHAPTER3 유니언과 리터럴이전 챕터에서는 타입시스템의 개념과 타입시스템이 타입을 이해하기 위해 값을 읽는 방법을 배웠다.이번 챕터에 TS가 해당 값을 바탕으로 추론을 수행하는 두 가지 핵심 개념을 확인해 보자.유니언(union): 값에 혀동된 타입을 두개 이상의 가능한 타입으로 확장하는 것내로잉(narrowing): 값에 허용된 타입이 하나이상의 가능한 타입이 되지 않도록 좁히는 것유니언과 내로잉은 코드 정보에 입각한 추론을 해내는 강력한 개념 3.1 유니언 타입let mathematician = Math.random() > 0.5 ? undefined : "Mark Goldberg";'이거 혹은 저거'와 같은 타입을 유니언이라 한다. 1. 유니언 타입 선언let thinker: string |..

들어가기 전항해 플러스를 신청한 이유는 React를 흡수하기 위해서다.지금 프론트엔드 시장에선 React는 default기 때문에 시작하지 않으면 난 바보가 될 것 같았다.그렇다고 독학으로 시작하기엔 React는 진입장벽이 Vue보다 높고, 자유도도 또한 높기 때문에 어떤식으로 코드를 짜야할 지도 막막했다.항해 플러스를 마칠 때 리액트 챌린저까진 아니더라도 플래티넘이 되게끔 목표로 잡고 있다.본격적으로 항해 플러스가 시작되기 전에 React의 기본적인 내용이라도 알고 가지 않으면 자존감이 맨틀을 뚫고 내핵으로 향할 것이 분명했기 때문에 사전 스터디를 신청했다.최근에 강의를 보면서 React를 맛봤기 때문에 아마 기초적인 내용은 머릿속에 맴돌고 있을 것이니 차근차근 시작해 보자.1. React 소개1.1 ..

들어가기 전스터디에서 채택한 도서는 한빛미디어에 러닝 타입스크립트라는 책이다.애초에 타입스크립트는 찍먹만 해봤기 때문에 이번엔 푹먹으로 학습 해보자.나는 windows를 사용하기 때문에 windows로 작성하겠다.들어가자.  CHATER1 자바스크립트에서 타입스크립트로 1.1 자바스크립트의 역사1995년 넷스케이프에서 웹사이트에 쉽게 접근하고 사용할 수 있는  JS를 개발했는데, 그 당시 개발자들은 별난 특성과 결점을 조롱했다고 한다. 그 이후로 JS기반의 ECMA 스크립트를 출시했고, 다른 최신 언어에서 제공하는 기능에 맞춘 새로운 기능들을 제공 했다. JS는 브라우저, 임베디드 애플리케이션(PC가 아닌 장치에 내장된 특수 프로그래밍), 런타임을 포함한 다양한 환경에서 새로운 버전과 이전버전과의 호환성..