'react' 태그의 글 목록

[리액트/Axios] Http GET 요청 body에 데이터를 담아 보낼 수 있다?

2023.11.14· 개발/React

백엔드 개발자님: 해당 api 업데이트했습니다. 메소드는 get이고 body에 담아서 보내주시면 됩니다~ 나: 넵~~ 결과 : ERROR ERROR 왜?? 👀 ?? 심지어 Redux로 작성한 api instance에서도 body를 담는걸 거부 ㅋ .. 파라미터가 url, config 이상으로 못 받는다고 뱉어냄. 시니어개발자님: get 요청하는데 바디에 담는다고??👀 나: 넵- 전에 그렇게 했는데요?😳? 안 되나요? 이전에도 게시판에서 검색할 때 get 메소드로 요청하며 바디에 담아서 보낸 기억이 있기에 - 당연하게~~~~ body에 담는거 오키도키요! 했던 상황. 혼란만 가중되는 상황 그래서 정리한다. 일단 결론만 보자면, pararms 를 써서 요청하면 config에 담겨서 get 요청시에도 바디에 ..

[리액트] useNavigate로 props 전달 & useLocation 으로 받기

2023.11.14· 개발/React

Redux를 사용해서 데이터를 전역으로 관리할 필요가 없을 때, useNavigate로 라우팅하면서 함께 해당 페이지로 데이터를 보낼 수 있는 방법이 있다. useNavigate와 useLocation이면 가능하다! 1. useNavigate() useNavigate를 사용해서 이동 경로로 state값 전달하기 const navigte() = useNavigate(); navigate("이동할 경로", state:{ "전달하고자 하는 데이터" }); 2. useLocation() useLocation을 써서 props 받기 const { state } = useLocation();

[react/typescript] Swiper 사용기

2023.10.29· 개발/React

맨날 정해져있는 템플릿을 이용한 기능 개발만하다가 모처럼 새로운 UI를 짜야하는 일이 생겼다. 밑밥을 깔아보자면 ㅋㅋ... 처음부터 빌드한 프로젝트가 아니라 중간에 끼여든 프로젝트였기에 코드를 읽을 때부터 버벅이긴 했다. 자 이제 밑밥은 깔림. 내가 해야할 목록 1. swiper 라이브러리를 쓴다. 2. navigator 버튼을 나오게하고 첫 슬라이드에서는 왼쪽 버튼이 사라지게 마지막 슬라이드는 오른쪽 버튼이 사라지게한다. 3. 슬라이드는 마우스 드래그로도 가능하게한다. Code import React, { useState } from 'react'; import { Swiper, SwiperSlide } from 'swiper/react'; const Projects = () => { const [sw..

[리액트] React-Query - 1. data fetch & error

2023.05.08· 개발/React

React-Query 비동기 통신 fetch, axios 등을 사용하면서 서버 상태 관리 및 비동기 로직을 쉽게 다루게 해주는 라이브러리 비동기 통신을 하는 방법은 몇 가지 있지만 react-query를 사용하면 요청을 보내는 콜백함수를 전달하기만 한다면 라이브러리에서 제공해주는 많은 기능들(캐싱, 값 업데이트, 에러 핸들링 등)을 이용할 수 있으며 코드도 매우 간단해집니다. 사용하는 이유 서버로부터 값을 가져오거나 업데이트를 해야하는 로직을 store에서 개발해야하는 경우들이 많습니다. store는 client에서 state를 유지하면서 내부에 client data 와 server data 가 공존을 하게 되는 순간이 생겨납니다. 데이터들이 서로 상호작용하면서 혼란을 빚어내는데 react-query를 ..

[리액트] React image file Resize 하기 / react-image-file-resizer

2022.11.28· 개발/React

이미지파일을 많이 다루는 업무를 보고 있다. 갑자기 추가된 어떤 이미지에 대해서 프론트쪽에서 사이즈를 바꿔서 전달해야할 일이 생겼다. 그래서 찾아서 쓰게 된 라이브러리가 React Image File Resizer 넓디 넓은 리액트 생태계에서 없는게 없다. 이미지의 width, height, format 등을 바꿀 수 있게 도와주는 패키지이다. 설치하기 npm i react-image-file-resizer or yarn add react-image-file-resizer 사용하기 //불러오기 import Resizer from "react-image-file-resizer"; //어떻게 변경할 건지에 대한 내용을 차례 차례 넣어주면 된다. Resizer.imageFileResizer( file, //바..

[리액트] useRef 사용하기 - 리액트에서 특정 DOM에 접근하기

2022.11.15· 개발/React

useRef 를 자주 사용하지 않는데, 오랜만에 업무를 보다가 사용할 일이 생겼었다. 그래서 다시 한번 정리해본다!! useRef 사용하기 리액트를 사용하면서 주로 useRef를 사용할 때는 특정 DOM 요소에게 접근해야할 때이다. 컴포넌트에 생긴 스크롤 동작을 제어해야하는 상황이 있었는데, 이때 useRef를 써서 하면 된다. 이 외에도 포커스를 설정해줘야한다던지, 크기를 특정해야한다던지 DOM요소에 대한 세세한 것들이 필요할 때 쓸 수 있다. 저는 리액트를 함수형으로 쓰고 있기때문에 useRef hook에 대한 이야기를 합니다. 클래스형은 콜백함수도 써야하고. 살짝 방법이 다릅니다. useRef 선언하기 선언 방법은 간단합니다. useRef 를 사용해서 변수를 선언해주고 그 안에 초기값을 넣어줍니다...

[React/리액트] Error: App(...): Nothing was returned from render 에러 해결 방법

2022.09.19· 개발/❌ 오류 노트

📢 Error: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null. ✅ 오랜만에 만난 정말 간단한 에러! 최근에 만난 에러들은 기본 2시간 잡았던것 같았는데, 이 에러는 정말 간단하게 찾아냈다. 괄호가 어딘가에서 미씽되었던것!! 그래서 return 의 자리에 return 이 제대로 들어가지 않아서 생긴 에러이다! 어딘가에서 return 을 제대로 해주지 못 할 때 나타나는 에러이니, 찬찬히 코드를 살피다보면 바로 해결 할 수 있다!

[220702] TIL - aixos. get 쿼리로 쏘다!

2022.07.03· 개발/📝 TIL

React를 사용해서 서버와 통신을 하기 위해서는 Axios 혹은 Fetch와 같은 HTTP 클라이언트를 사용합니다 Fetch API는 네트워크 요청을 위해 fetch()라는 메서드를 제공합니다. 모던 브라우저에서 내장되어있어서 따로 설치할 필요 없이 바로 사용할 수 있습니다. 반면 Axios의 경우에는 npm이나 yarn을 이용해서 설치를 해야합니다. 둘 다 promise 기반이라서 이행 혹은 거부할 수 있는 promise를 반환합니다. Axios vs Fetch 문법 //Axios axios.get( url, { 옵션 }, {} ) or axios(url, { method: 'get', headers: { "Content-Type: "application/json" }, data: {}, }) //f..

React Testing Library 사용하기 (from Scratch) - 1

2022.04.29· 개발/React

테스트코드는 왜 중요한가요? 테스트코드는 코드를 리팩토링 할 때, 혹은 리팩토링을 하지 않아도 중요한 존재입니다. 리팩토링을 할 때에는 테스트코드를 짜두고 리팩토링을 하면 하기 전과 후의 결과가 동일하다는 것을 보장할 수 있습니다. 외에도 새로운 기능이 추가되거나 기존 기능이 변경되었을 때 다른 기능들이 제대로 동작하지 않을 수도 있기 때문에 테스트코드를 만들어두면 유지보수할 때 예상치 못 한 에러들을 미리 방지할 수 가 있습니다. 다양한 개발서적에서도 이 중요성을 굉장히 강조하고 있습니다. React Testing Library는 세부적인 구현사항보다는 실제 사용자 경험과 유사한 방식의 테스트를 작성하기를 권고합니다. 예를 들어서 div 태그를 사용하는지 보다 div 테그의 메세지가 브라우저에 잘 노출..

[React] React-Query 란?

2022.03.28· 개발/React

React-Query React app에서 비동기 로직을 쉽게 다루게 해주는 data fetching 라이브러리입니다. "전역 상테"를 건드리지 않고도 React 및 React-Native 앱에서 서버의 값을 클라이언트에 가져오고 캐시하고 업데이트할 수 있습니다. 이것을 사용하면 서버 상태의 까다로운 문제와 장애물을 극복하고 앱 데이터가 사용자를 제어하기 시작하기 전에 앱 데이터를 제어할 수 있습니다. 사용하는 이유 서버로 부터 값을 가져오거나 업데이트를 하는 로직을 store 내부에 개발하는 경우가 많습니다. 그러다보면 store는 클라이언트 state를 유지해야하는데, 어느 순간부터 서버 데이터와 클라이언트 데이터가 공존하게 됩니다.(redux가 그러함..) 이런 부분을 분리해서 사용하기 위해서 씁니..

[항해99] Day63. TIL – 리액트 즐겨찾기 버튼 / 댓글 구현 – redux, useState, useEffect

2022.02.20· 개발/⛵ 항해99

👩🏻‍💻 Today I Learned 📚 ⭐ 댓글구현의 후폭풍 댓글, 대댓글을 리액트 돔에서 useState만을 이용한 구현 후폭풍이 끝나고 상세페이지에 등장하는 또 다른 버튼. 즐겨찾기 버튼 구현에서 또 다시 많은 시간을 잡아 먹었다. 이때까지만해도 대댓글을 구현해냈다는 자신감에 가득 차있었는데, useState로는 즐겨찾기를 구현하다가 새로고침을 하면 내용이 저장되지 않고 모두 사라진다는걸 불현듯 깨닫고 😵 실시간으로 랜더링되는 걸 구현하려면 useEffect와 redux가 필요했다. 게다가 이 때 댓글이 들어가있는 게시글 상세 페이지를 다 랜더링하는게 아니라 댓글부분만 따로 관리를 해서 컴포넌트를 랜더링해줘야한다는거! 댓글이라는 걸 처음 구현해보는거라서 마음이 복잡했다. ㅎ ….. 댓글부분만 red..

[React.Js] 리액트 시작하기, Create-React-App

2022.02.17· 개발/React

JavaScript를 공부하면서 어느 정도 이해하기 시작했다는 생각이 들자 이것저것 프로젝트를 더 만들어보고, 더 쉽게 만들어보고 싶다는 생각이 들었다. 그렇게 리액트에도 손을 댔다. React(리액트)는 자바스크립트 라이브러리 중 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북 개발자들이 만든건데, 작년까지만 해도 굉장히 핫했는데, 요세는 또 다른게 핫하더라. 하지만 어쩔 수 없다 일단. 나는 리액트 배를 탔다. 사실 그냥 웹페이지는 HTML, CSS 만으로도 충분히 만들 수 있다. 하지만 페이지가 점점 늘어나고, 동적인 인터랙티브한 웹을 만들기 위해서는 자바스크립트가 필요하다. 게다가 요즘은 단순한 웹이 아니라, 모바일에서도 쓸 수 있는 유동적인 걸 좋아하다보니 이럴 때, 리액트가 정말 ..

티스토리툴바