전체 글

React Query를 통한 실시간 서버 통신 (useQuery hook)

주식이나 디지털 자산 거래소를 보면, 실시간으로 현재 가격이 계속 실시간으로 갱신되어 최신 가격이 보이는 것을 확인할 수 있다. 리액트에서 이와 같은 기능을 어떻게 구현할 수 있을지 생각해 보았다. 실시간으로 서버와 통신을 하기 위해서 소켓을 사용할 수 있다. 소켓을 사용하는 방법 이외에 서버의 실시간 데이터를 받아 데이터를 갱신할 수 있는 방법으로 React Query를 사용해보기로 하였다. npm i react-query로 리액트 쿼리를 설치한다. React Query 초기 설정 리액트 쿼리를 사용하기 위해서 일단 QueryClientProvider가 사용될 컴포넌트 상위에 위치해야 한다. 그리고 QueryClientProvider의 client에 QueryClient가 연결되야 한다. import ..

간단한 Recoil 사용법

Recoil은 상태 관리 라이브러리로 facebook에서 react 전용으로 만들어졌다. 🍈 따라서 React 환경에 좀 더 최적화 된 라이브러리라고 할 수 있다. 🥕 예를 들어 Redux는 순수 javascript 환경에서도 사용될 수 있다. 기존의 상태 관리 라이브러리들보다 recoil은 배우기 쉽고 훅을 사용하기에 사용하기 편리한 장점을 지닌다. npm install recoil yarn add recoil 위와 같은 명령어로 recoil을 설치할 수 있다. RecoilRoot로 하위 컴포넌트를 감싸 사용할 수 있다. import React from 'react'; import { RecoilRoot } from 'recoil'; function App() { return ( ); } export ..

Redux를 이용하여 React 다크 모드 기능 구현하기 (with. styled-components)

styled-components를 사용하면서, createGlobalStyle를 사용하게 되었는데, 문득 이를 사용하면 손쉽게 다크 모드를 설정할 수 있지 않을까 하는 생각이 들어서 직접 다크 모드를 구현해 보았다. 🍉 전역으로 상태를 관리하기 위해서 Redux를 사용하였다. createGlobalStyle로 글로벌 스타일 설정하기 import { createGlobalStyle } from "styled-components"; import "./font.css"; const GlobalStyle = createGlobalStyle` *, *::before, *::after { box-sizing: border-box; } body { margin: 0; color: black; background-co..

Redux Toolkit (rtk) 사용하기

로그인 정보를 전역 상태로 사용하기 위하여 redux를 사용하기로 마음먹었다. 자연스럽게 일단 전역 상태를 저장할 store를 만들기 위해 createStore를 불러왔는데, 다음과 같은 상황에 처했다. 커서를 createStore에 대고 읽은 안내 메세지에 따르면, createStore는 deprecated되었고 그 대신에 @reduxjs/toolkit의 configureStore메소드를 사용하는 것을 추천받았다. 🥔 그리고 왜 RTK를 사용해야 하는지 적혀있는 공식문서의 주소도 안내받았다. 🥔 https://redux.js.org/introduction/why-rtk-is-redux-today Why Redux Toolkit is How To Use Redux Today | Redux Introduc..

text-shadow 적용하기

html의 텍스트를 강조하기 위한 스타일로 text-shadow를 사용할 수 있다. text-shadow : none | text-shadow : text-shadow : hi // css .hi { text-shadow: 1px 1px 5px red; } 참고 자료 : https://developer.mozilla.org/ko/docs/Web/CSS/text-shadow text-shadow - CSS: Cascading Style Sheets | MDN text-shadow CSS 속성은 텍스트에 그림자(shadow)를 추가합니다. 텍스트와 그 장식에 적용 할 쉼표로 구분 된 그림자 목록을 허용합니다. 각 그림자는 요소, 흐림 반경 및 색상의 X 및 Y 오프셋 조합으로 developer.mozilla..

React Native Elements 사용해보기

React Native Elements는 React Native의 UI toolkit으로 화면을 구성하는데 도움을 주는 라이브러리이다. 3.4.2 버전을 기준으로 작성하지만, v4에서는 라이브러리 이름이 바뀌는 등 많은 변화가 있었다. import React, { useState } from 'react'; import { Header } from 'react-native-elements'; const ElementsHeader = () => { return ( ); } export default ElementsHeader; Header 컴포넌트는 왼쪽과 가운데, 우측에 추가적으로 컴포넌트를 연결하여 상단에 앱의 헤더 정보를 표시할 수 있게 해준다. import React, { useState } fro..

간단한 calc() 사용하는 법

calc는 css함수로 css 속성값에 계산식을 지정할 수 있게 해준다. 더하기, 빼기, 곱하기, 나누기 연산이 가능하다. 연산자 좌우에 공백이 필요하다. 0으로 나누면 HTML 구문분석기에서 오류가 발생한다. 곱셈과 나눗셈에는 피연산자에 하나 이상의 숫자가 있어야 한다. 중첩해서 사용할 시 내부의 calc()은 ()로 취급된다. width: calc(50% - 8px); scss에서 calc 내부에 변수를 넣고 싶다면, #을 사용해야 한다. $len: 8px; width: calc(50% - #{$len});

HTML에 영상 삽입하기

영상을 삽입하기 위한 태그로 iframe이나 video를 사용할 수 있다. 유튜브 링크등 URL로 영상을 띄우기 위해서는 iframe을, 로컬의 영상을 사용하기 위해서는 video를 사용할 수 있다. video는 브라우저가 지원하는 여러 타입의 확장자를 지원하기 위해서 여러 옵션의 영상이 들어갈 수 있다. 지원되는 비디오가 없습니다. // iframe 전체 크기로 설정 const styleObj = { overflow: "hidden", overflowX: "hidden", overflowY: "hidden", height: "100%", width: "100%", position: "absolute", top: "0px", left: "0px", right: "0px", bottom: "0px" } ~..