CHAYAN.LOG

React Query의 공식문서 및 리액트 네이티브를 다루는 기술의 주요 내용을 정리한 글입니다. 목차 useQuery란 쿼리는 비동기 요청 데이터에 대한 고유 키(Unique key)입니다. 보통 GET 요청에 사용되고, POST와 같이 서버의 데이터에 수정이 필요한 경우엔 Mutation을 사용합니다. useQuery 기본 구조 캐시 키를 사용해 데이터를 캐시합니다. 한번 데이터를 받아온 뒤, 나중에 동일 요청시 데이터가 이미 존재시 기존에 있던 데이터를 바로 보여줍니다. 이때, 캐시 설정에 따라 데이터를 새로 불러오기도 합니다. // useQuery 구조 useQuery(캐시 키, 프라미스 반환 함수, 캐싱option?) useQuery Hook 반환 값 - status : API 요청 상태를 문자..

React Query의 공식문서의 주요 내용을 정리한 글입니다. React Query란 리액트 쿼리는 리액트 웹앱에서 서버의 상태(state)를 가져오기(fetching), 캐싱(caching), 동기화(synchronizing), 업데이트(updating)를 수행합니다. React Query 개발 동기 일반적으로 리액트 어플리케이션은 컴포넌트로부터의 데이터 가져오기 혹은 업데이트하는 방식을 제공하지 않습니다. 그래서 개발자들은 제각각 데이터를 자기만의 방식으로 가져오고 업데이트 합니다. (Promise와 async&await로 처리하거나 전역 상태관리 라이브러리를 사용해 비동기 다루는 방식) 이때 아래와 같은다양한 이유로 어플리케이션과 서버간의 관계와 실시간 상태를 관리하는게 어렵습니다. 서버에서 데이..

목차 동기 1월 초중순 어느 날, 내 친구 A로부터 메시지를 받았다. "혹시 내 목소리를 TTS 보이스로 나오게 하는 프로그램 만들어 줄 수 있어?"라는 내용의 메시지였다. 친구 A는 인터넷 방송을 시작한지 얼마 안되었는데, 본인의 목소리를 직접적으로 방송에 내보내길 원하지 않았다. 하지만 시청자들과의 소통에 많은 불편함을 느꼈고, 처음엔 TTS(Text-To-Speech) 기능으로 소통하는 방법을 생각해냈다. 하지만, 방송에 집중하면서 TTS를 사용하기 위해 텍스트를 타이핑하는 과정이 비효율적이라 생각했다. 결국 앞서 말한 방식으로 작동하는 프로그램을 찾는데 실패했고, 내게 물어보게 된 것이었다. 서비스 서치 하기 TTS(Text-To-Speech) 기능이나 STT(Speech-To-Text) 기능을 ..

목차 리액트 훅이란? 함수형 컴포넌트를 클래스형 컴포넌트처럼 기능을 구현할 수 있게 해주는 기능입니다. 즉, 기존에 단순 view 역할밖에 수행하지 못했던 함수형 컴포넌트에서 상태를 관리할 수 있고(useState), 라이프 사이클에 따른 동작(useEffect)를 구현할 수도 있게 해 줬습니다. 이번 글에선 리액트 공식문서에서 보여주는 기본 Hooks가 아닌, 추가 Hooks에 대해 알아보겠습니다. 1. useReducer useState의 대체 함수로, state를 reducer의 형태로 관리하게 해 줍니다. 즉 (state, action)이 주어지면, 주어진 action에 따라 state를 newState로 만들어 반환해줍니다. // useReducer 사용 예제 const initialState ..

목차 자바스크립트에서 스레드에 대해 아는데로 말해주세요. 자바스크립트는 싱글 쓰레드 기반으로 동작하는 언어입니다. 그리고 비동기 처리를 위한 이벤트 루프 기반으로 작동합니다. 자바스크립트에는 싱글 스레드 방식으로 함수를 처리하는 콜 스택이 있고, 들어온 비동기 코드들은 Web API 로 인해 콜백 큐로 이동해 대기하고 있다가, 실행 순서가 되면 메인 콜 스택으로 불러와 실행됩니다. 그리고 이 과정이 이벤트 루프에 의해 이루어집니다. 이런 과정을 통해 비동기 코드를 처리해 동시에 코드가 돌아가는것처럼 실행됩니다. 추가) - 멀티 쓰레드 방식으로 작동한다면 동시성 문제를 해결해야하고, 이를 위한 복잡한 시나리오들을 신경써야 합니다. 일급 객체의 개념을 자바스크립트와 관련지어 말해주세요. 아래 3가지 조건을 ..