전체 글

React Query에서 Post, Delete, Patch/Put (useMutation hook 사용하기)

react query에서 단순한 조회, get 요청을 보내기 위해서는 useQuery를 사용한다. 반면, 데이터의 수정이 일어나는 Post, Delete, Patch(Put) 요청을 위해서는 useMutation을 사용해야 한다. 실제로 useMutation을 사용한 예시 코드를 남긴다. import axios from 'axios'; import { useMutation } from "react-query"; const PostData = () => { const posting = async () => { const url = `/posting`; const payload = { data }; axios.post(url, payload) .then(el => console.log(el.data)) .c..

Kaikas의 내장 caver 객체 사용하기

React 환경에서 caver-js를 설치하고 컴파일하면, 에러가 발생한다. 🧅 BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. caver-js에서 사용되는 패키지들이 webpack v5에 포함되지 않았기에 발생하는 문제이다. 이를 해결하기 위해 webpack.config.js에 설정을 해주거나, react-scripts의 버전(to v4)을 낮출 수도 있다. 🍄 webpack.config.js는 리액트에서 node_modules/react-scripts/config 폴더 내부에 존재한다. 하지만 이러한 방법들은 결국 임시방편에 지나지 않는다고 생각하였고, 다른 방법을 찾는 도중에 카이카스..

useCallback과 useMemo 사용하기

useCallback useCallback은 자주 볼 수 있는 hook인데, 사용처와 방법에 대해서 확실히 정리하기 위해서 글을 남기기로 하였다. 랜더링의 최적화를 위해서 사용되는 useCallback은 이미 랜더링되었던 동일한 함수라면, 다시 함수가 선언되지 않는다. useCallback은 콜백 함수를 memoization(메모제이션)하고, 의존성이 변경되었을 때만 메모제이션된 함수의 버전이 변경된다. useCallback의 첫 번째 인자로 함수가 들어가고, 두 번째 인자로 deps(의존성)이 들어간다. useCallback에서 반환된 콜백 함수를 변수에 담아 사용한다. deps에는 함수에 사용된 상태나 props가 모두 deps 배열에 포함되어야 한다. 🍉 useCallback 두 번째 인자인 배열(..

Material UI를 사용하여 Pagination 적용하기

많은 데이터를 보여줘야 할 때, 가독성을 위해서 페이지를 나눠야할 필요가 있을 수 있다. Pagination을 통해서, 더 깔끔하게 사이트를 구성할 수 있다. Pagination 컴포넌트의 구현을 위해서 리액트 컴포넌트 라이브러리인 Material UI (mui)를 사용하였다. 🍙 mui 설치 : npm install @mui/material @emotion/react @emotion/styled 🍯 mui Pagination 사용 : https://mui.com/material-ui/react-pagination/#main-content 🍯 mui에서는 division을 나누기 위해서 Stack를 사용한다. React Pagination component - Material UI The Paginati..

React Native 웹뷰 사용하기 (react-native-webview)

react-native-webview 설치하기 npm i react-native-webview 간단한 사용 예시 import React from 'react'; import {StyleSheet, View, Text} from 'react-native'; import {WebView} from 'react-native-webview'; const INJECTED_JAVASCRIPT = `(function() { window.ReactNativeWebView.postMessage(JSON.stringify(window.location)); })();`; const runFirst = ` document.body.style.backgroundColor = '#eeddcc'; setTimeout(functio..

DOM과 JavaScript

DOM : Document Object Model javascript를 통해서 DOM을 조작하여 HTML을 변경할 수 있다. js -> DOM -> HTML 조작 script의 위치에 따라서 실행결과가 달라질 수 있다. script 요소를 만나면 웹브라우저는 HTML 해석을 잠시 멈춘다. script 요소는 등장과 함께 실행되기 때문에 만약 head 부분에 script가 존재하고, 이 script가 HTML의 body의 내용을 수정한다면, 오류가 발생할 수 있다. 따라서 이럴경우 script는 반드시 body의 마지막 부분에 존재해야 한다. JS에서 DOM은 document 객체에 구현되어 있다. -> DOM 구조를 조회할 때는 console.dir()을 통해서 확인할 수 있다. (Object처럼 볼 수..

낙관적 업데이트 - Optimistic update (with React)

프론트엔드 개발을 하다보면, 직면하는 문제가 있다. 나의 경우에는 커뮤니티 사이트를 만들고 있었는데, 댓글을 삭제한 뒤 해당 댓글이 삭제된 페이지를 다시 렌더링해야 했다. 이 경우, delete 요청을 보내고 다시 get 요청을 보내 댓글의 목록을 받아와야 할까? 하지만, 이렇게 하니 다시 Get으로 받아온 데이터는 아직 댓글이 삭제가 되지 않은 상태였다. 이 문제에 처음 직면하였을 때, 내가 선택한 방법은 삭제 후 결과를 받은 뒤 일정 시간이 지나고 다시 Get 요청을 보내 갱신된 데이터를 받는 것이었다. 그러나, 이 방법이 과연 좋았을까? 시간이 지나고 다시 해당 문제에 대해 찾아보니 낙관적 업데이트에 대해서 알게되었다. cont MyPage = () => { const [offButton, setO..

react-native-image-picker를 사용하여 카메라 사용, 이미지 선택하기

라이브러리를 설치한다. npm i react-native-image-picker 🍪 android 권한 설정 android/app/src/main/AndroidManifest.xml 에 추가한다. 🍩 ios 권한 설정 ios/App_이름/info.plist 에 추가한다. NSPhotoLibraryUsageDescription This app requires access to the photo library. NSMicrophoneUsageDescription This app does not require access to the microphone. NSCameraUsageDescription This app requires access to the camera. 또한, 라이브러리 설치 후 pod ins..