Tanstack Query 옵션에 대한

chrome 웹 스토어에 있는 모멘텀앱을 만들어보고 있는 중에 unsplash api를 통해 백그라운드로 쓰일 사진을 가져와서 배경으로 사용하려고 했다. 이 모멘텀앱의 풍경 사진을 하루를 기준으로 바뀌는데, 이를 react-query를 이용하여 관리를 해볼려고 하는 와중에 어떻게 하면 하루를 기준으로 통신이 이뤼지게 할지 고민을 했다. 우선, staleTime을 하루 동안(밀리초 단위로 24시간)으로 설정하였지만 리액트 앱이 재랜더링될 때마다 데이터를 받아오기 때문에 또 하나의 방법이 더 필요함을 느꼈다. 떠오른 방법으로는 localStorage를 사용하여 마지막 요청 시간을 기록하고, 이를 기반으로 하루 한 번만 요청을 보내는 로직을 추가하는 것인데....말은 쉬운데 어떻게 할지 막막하다. 1. 일단 ..

• format_list_bulleted React
• · 2024. 5. 17.
• textsms

useContext와 useReducer 그리고 Hook에 대해서...

useContext와 useReducer는 React의 훅(Hook) 중에서 상태 관리와 관련된 훅이다. 이 두 훅은 컴포넌트의 상태 관리를 효율적으로 할 수 있도록 도와주지만, 사용 목적과 방식에 있어서 차이가 있다. useContext 훅은 React의 Context API를 함수형 컴포넌트 내에서 사용할 수 있게 해주는 훅이다. Context API는 전역적으로 데이터를 공유할 수 있는 방법을 제공한다. (Props 드릴을 안하기 위해...) 예를 들어, 사용자의 로그인 정보, 테마 설정, 언어 설정 등을 애플리케이션의 여러 레벨에 걸쳐 공유할 수 있다. useContext 훅을 사용하면, 컴포넌트 트리으 ㅣ깊은 곳에 있는 컴포넌트도 props를 일일이 전달하지 않고도 Context의 값을 직접 사..

• format_list_bulleted React
• · 2024. 5. 9.
• textsms

이중괄호로 데이터를 보내는 이유

export function PersonProvider({ children }) { const [person, dispatch] = useReducer(personReducer, initialPerson); return ( {children} );} context를 작성 중에 왜 value의 값은 이중괄호로 묶어 보낼까? 물론 primitive type의 데이터가 아니기 때문에 object형태로 만들어야 복합적인 데이터를 보낼 수 있기 떄문인데 이를 좀 명확하게 알면 좋잖아?  JavaScript와 React에서 { } 는 객체를 나타낸다. value={{ person, dispatch }} 에서 사용된 첫 번째 { }는 JSX 내에서 JS 표현식을 사용하겠다는 것을 나타내며..

• format_list_bulleted React
• · 2024. 5. 9.
• textsms

Type Alias 와 Interface, 뭘 써야할까?

결론을 먼저 말하겠다.  비슷한 고민을 하되, 설명할 수 있는 이유가 있으면 선택해서 사용하면 된다.     type TypeAlias = { x: number; y: number; }; interface Interface { x: number; y: number; } // object const obj1: TypeAlias = { x: 1, y: 1, }; const obj2: Interface = { x: 1, y: 1, }; 타입스크립트에서 타입 별칭(Type alias)과 인터페이스(Interface) 둘 다 객체의 구조를 정의하는 방법이다. 그러나 몇 가지 중요한 차이점이 있다. 이를 이해함으로써 각각을 어떤 상황에서 사용하는 것이 좋은..

• format_list_bulleted 카테고리 없음
• · 2024. 5. 6.
• textsms

객체지향 프로그래밍(OOP)에 대해서

객체지향...책을 펼쳐서 개념을 살펴보거나, 영상을 봐도 "아..."라고 속으로 생각했던 경험이 있는 거 다-아 안다. 그러니 이번 포스팅에서 좀 더 와닿게 이야기를 해보자.   일단 아래의 개념을 대강 쓰윽 훑어보자. 1. 객체지향 프로그래밍의 기본 개념객체지향 프로그래밍은 프로그램을 객체라는 기본 단위로 분할하여 프로그래밍하는 방법이야.객체는 데이터(속성)와 그 데이터와 관련된 기능(메서드)을 모아둔 것을 의미하지. 이러한 접근 방식은 프로그램을 더욱 모듈화 시키고, 코드 재사용을 용이하게 하며, 대규모 소프트웨어 개발에서 효율적인 관리를 가능하게 해. 2. 주요 개념클래스(Class) : 객체를 생성하기 위한 템플릿이야. 붕어빵을 찍어내기 위해 붕어빵틀이 있어야겠지? 그 틀이라 생각하면 돼. 클래스..

• format_list_bulleted Tyscript & OOP
• · 2024. 4. 30.
• textsms

useEffect

useEffect의 정의에 대해서 물어본다면... 1) useEffect는 두 개의 인수를 받는데, 첫 번째는 콜백, 두 번째는 의존성 배열이다. 이 두 번째 의존성 배열의 값이 변경되면 첫 번째 인수인 콜백을 실행한다. 2) 클래스형 컴포넌트의 생명주기 메서드와 비슷한 작동을 구현할 수 있다. 두 번째 의존성 배열에 빈 배열을 넣으면 컴포넌트가 마운트 될 때만 실행된다. 3) useEffect는 클린업 함수를 반환할 수 있는데, 이 클린업 함수는 컴포넌트가 언마운트될 때 실행된다. 내가 보는 '모던 리액트 딥다이브'라는 책에서는 이러한 정의들이 어느 정도 옳지만 완전히 정확하지 않다고 설명하고 있다. 그렇다면 무엇인가를 고민해 보자. useEffect는 생명주기 메서드를 대체..

• format_list_bulleted React
• · 2024. 4. 24.
• textsms