해피랑 개발하자

사용하는 이유? react-query를 사용함으로서 서버, 클라이언트 데이터를 분리 react-query 장점? 여러 장점이 있지만 프론트 개발자가 직접 구현하기 귀찮은 일들을 수행 - 캐싱 - get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행 - 데이터가 오래 되었다고 판단하면 다시 get - 동일 데이터를 여러번 요청하면 한번만 요청 (옵션에 따라 중복 호출 허용 / 시간 조절 가능) - 무한 스크롤 (Infinite Queries) - 비동기 과정을 선언적으로 관리 - react hook과 사용하는 구조가 비슷

Recoil은 React를 위한 상태 관리 라이브러리다. 설치 yarn을 사용한다면 아래의 명령어를 사용하여 설치한다. yarn add recoil RecoilRoot recoil 상태를 사용하는 컴포넌트는 부모 트리 어딘가에 나타나는 RecoilRoot가 필요하다. 루트 컴포넌트가 RecoilRoot를 넣기 좋은 장소이다. import React from 'react'; import { RecoilRoot, atom, selector, useRecoilState, useRecoilValue, } from 'recoil'; function App() { return ( ); } 다음 부분에서 CharacterCounter 컴포넌트를 구현할 것이다. Atom Atom은 상태의 일부를 나타낸다. Atoms는..

- Recoil의 등장? React 자체에 내장된 상태 관리 기능의 한계 컴포넌트의 상태는 공통된 상위요소까지 끌어올림으로써 공유될 수 있지만, 이 과정에서 거대한 트리가 다시 렌더링되는 효과를 야기하기도 한다. Context는 단일 값만 저장할 수 있으며, 자체 소비자를 가지는 여러 값들의 집합을 담을 수는 없다. 이 두가지 특성이 트리의 최상단(state가 존재하는 곳)부터 트리의 잎(state가 사용되는 곳)까지의 코드 분할을 어렵게 한다. Recoil은 직교하지만 본질적인 방향 그래프를 정의하고 React 트리에 붙인다. 상태 변화는 이 그래프의 뿌리(atoms)로부터 순수함수(selectors)를 거쳐 컴포넌트로 흐르며, 다음과 같은 접근 방식을 따른다. 공유상태(shared state)도 Re..

2. 연산자 산술연산자 산술연산자는 사칙연산과 같은 작업을 한다. + : 덧셈 - : 뺄셈 * : 곱셈 / : 나눗셈 대입연산자 대입연산자는 특정 값에 연산을 한 값을 바로 설정할 때 사용할 수 있는 연산자이다. let a = 1; a += 3; a -= 3; a *= 3; a /= 3; 논리연산자 논리연산자는 boolean 타입(true/false)를 위한 연산자이다. ! : NOT const a = !true; -> 결과) a=false const b = !false; -> 결과) b=true && : AND const a = true && true; -> 결과) a=true let f = false && false; f = false && true; f = true && false; -> 결과) f..

0. JavaScript는 무엇일까? JavaScript는 웹 브라우저에서 사용하기 위하여 만들어진 프로그래밍 언어이다. 이 언어는 주로 웹 브라우저 상에서 UI를 동적으로 보여주기 위하여 사용되어 왔다. 기존에는 브라우저에서만 사용해왔던 언어이지만, 이제는 단순히 웹페이지에만 국한되는 것이 아니라 Node.js 런타임을 통하여 서버쪽에서도 사용이 가능하다. 또한, NW.js, Electron 등의 도구를 사용하여 데스크탑 앱을 만들 수 있고, react-native, NativeScript를 사용하여 모바일 앱도 만들 수 있다. 그리고 하드웨어에서도 Node.js를 통하여 JavaScript를 사용할 수 있기 때문에 IoT 진영에서도 사용될 수 있다. 1. 변수 JavaScript의 변수와 상수 변수와..