항해99 플러스/React 스터디

비동기 프로그래밍 입문개념 일반적으로 코드는 동기적으로 실행된다. 즉 앞에 있는 코드가 끝나야만 그 다음 코드가 수행이 된다.// (1)const a = 1;// (2)const b = 2;// (3)console.log(`a의 값은 ${a}입니다.`);// (4)alert(`hello ${b}!`);// 항상 코드는 (1) -> (4)의 순서대로 실행이 됩니다. 이러한 방식을 동기적 방식이라 하고, 비동기는 그에 반대되는 방식이다.비동기(asynchronous)적 방식이란? 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식이며, 대표적으로 setTimeout, addEventListner 등이 있다. 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드이며 주로 ..

Routerreact-router를 사용하기 전에 Router의 기본적인 내용만 훑고 가보자. Routing라우팅이란 기본적으로 네트워크에서 경로를 선택하는 프로세스를 의미한다.주소(URL)의 파라미터로 요청이 들어왔을 때 각각 맞는 콘텐츠로 이동시켜주는 작업이라 보면 될 것 같다. React Router설치 및 세팅패키지를 설치하자.yarn add react-router-dom import { BrowserRouter, Routes, Route } from 'react-router-dom'위는 가장 많이 사용되는 모듈 3가지다. BrowserRouterhistory API를 활용해 history 객체를 생성한다.history API는 내부적으로 stack 자료구조의 형태를 띄우며 사용자가 방문한 url..

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

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

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..

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