Framework&Library10 react Query의 useMutation을 활용하여 데이터 변경하기 리액트 쿼리는 HTTP 요청을 처리하고 프론트엔드 사용자 인터페이스를 백엔드 데이터와 동기화된 상태로 유지하기 위해 다양한 기능을 제공하고 있다. 그중 대표적인 기능이 데이터를 동기화된 상태로 가져오는 것이었다. 그런데 리액트 쿼리로 데이터 가져오기만 가능한 건 아니다.이벤트 생성과 같이 리액트 이벤트를 전송하는 것도 가능하다. 즉 사용자가 form에 입력한 데이터를 수집해서 백엔드로 전송하는 기능을 할 수 있다는 이야기이다. 그러한 기능 수행에 도움을 주는 쿼리가 바로 useMutation이다.useQuery가 데이터를 가져오는 데 중점을 두는 반면, useMutation은 데이터를 변경하고 백엔드로 데이터를 전송하는 데 중점을 둔다.useMutation 사용 방법React Query 설치 (이미 설.. 2024. 6. 22. Tanstack을 활용한 리액트 쿼리(React query) 사용법 리액트 쿼리를 사용하기 위해서 Tanstack 쿼리를 사용한다.Tanstack 쿼리는 HTTP 요청을 처리하고 프론트엔드사용자 인터페이스를 백엔드 데이터와 동기화된 상태로 유지하는데 이용하는 라이브러리이다. npm i @tanstack/react-queryHTTP 요청 작업에 있어 반드시 Tanstack 쿼리가 필요한 것은 아니다. useEffect나 fetch 함수로도 이러한 작업이 가능하다.다만 아래의 이유로 리액트 쿼리를 사용하면 보다 심플하게 기능 구현이 가능하다.useQuery 훅은 자체 작동을 통해 HTTP 요청을 전송하고 섹션에 필요한 이벤트 데이터를 가져온다,로딩 상태에 대한 다양한 메서드 및 추가 정보를 제공한다. 쿼리 키와 동일한 요청을 전송하면 이전 요청의 응답에 대해 재사용이 가능.. 2024. 5. 27. v-model에서 components에 props를 넘길 때 v-on과의 차이점 component에서 Props 넘기거나 Event처리를 할 때 v-model과 v-on의 차이에 대해. 1. v-model v-model은 form 입력 요소 또는 구성 요소에서 양방향 바인딩을 만듭니다. v-model의 사용은 다음과 같은 태그와 component에 한정되어 사용됩니다. 참고 링크 components 2. Component v-model component에 props를 넘길 때 양방향 바인딩이 요구되는 경우 v-model이 사용됩니다. 먼저 component에서 v-model이 사용되는 경우입니다. v-model을 HTML 상의 태그에서 활용하려고 할 경우 , ,와 같은 form 구성 요소에서 주로 활용됩니다. v-model 은 v-bind와 v-on의 기능의 조합으로 동작한다. 매번.. 2023. 6. 4. [Vue.js] Vue CLI 설치, JavaScript 기반 Vue 프로젝트 생성 및 사용하기 이전의 작업들은 index.html 파일을 더블 클릭해서 Vue 애플리케이션을 테스트 한 다음 브라우저에서 확인하는 방식으로 결과물을 확인했었다. 그런데 Vue는 프레임워크이므로 사실 이렇게 작업할 필요가 없다. 이렇게 되면 http:// 나 https://프로토콜이 아닌 file://프로토콜을 사용하게 되기 때문에 파일을 오픈하는 것 밖에 안된다. 이용자들은 웹사이트로 접속하기 때문에 우리는 웹 서버를 구동할 수 있는 개발 설정으로 접근 해야 한다. 개발 웹 서버는 컴퓨터에서 로컬로 실행되는 웹 서버 구동을 컴퓨터 내 로컬로 테스트 할 수 있다. 로컬 컴퓨터에서 HTTPS 또는 HTTP 프로토콜을 통해 제공한다. 1. Node js 설치 먼저 Node.js를 설치한다. Vue CLI는 내부적으로 Nod.. 2023. 1. 24. [Vue.js] 이벤트 및 methods, Computed, Watch Method, Computed, Watch의 차이점 1. Methods 메서드 메서드는 템플릿에서 데이터를 바인딩할 때 쓸수 있다. 이때 바인딩(binding)이란 식별자와 값을 연결하는 과정을 의미한다. 템플릿에서 사용해야 하는 데이터를 가져오기 위해서도 메서드를 쓴다. 데이터 바인딩을 위해 메서드를 쓰는 경우 메서드는 컴포넌트의 리렌더링 주기에 맞춰 매번 실행될 것이다. 변동사항이 생기면 템플릿을 재평가하고 해당 템플릿에 호출된 메서드를 다시 호출한다. 그러므로 이벤트 바인딩에는 메서드를 주로 사용해야 한다. 데이터 바인딩의 경우에는 중괄호와 함께 사용한다. 이는 페이지에 변동사항이 있을때마다 메서드가 실행한다. Vue Events Events in Action Add Remove Result: {{.. 2023. 1. 10. [React.js] 리액트의 기초 환경 설정, 초기 세팅 리액트 프로젝트를 시작하는 가장 쉬운 방법은 Create React App이라는 툴을 사용하는 것이다. 일단 그러려면 Node.js를 설치해야 한다. Node.js는 리액트와 직접적으로 관련있는 기술은 아니다. 다만 브라우저 밖에서 자바스크립트 코드가 실행될수 있도록 돕는 것으로 자바스크립트를 위한 런타임 환경을 제공한다. Create-react-app을 사용하기 위해서는 Node.js가 설치되어야 한다. node js 설치하기 => https://nodejs.org/ko/ 설치파일을 다운로드하고 실행하여 노드를 설치해보자. 이 과정은 간단하므로 생략해보겠다. 그다음 VSCode 터미널을 열고 다음과 같이 입력한다. 옛날에는 이것 말고도 입력할게 많았던 걸로 기억하는데 요즘엔 이 한줄이면 끝! npx c.. 2023. 1. 5. [React.js] React의 기초 및 핵심개념 리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는데 사용된다. 전통적인 웹사이트는 사용자가 링크나 버튼을 클릭하면 그 요청이 서버에 보내지고 새로운 html페이지가 브라우저로 보내지면서 화면에 보여졌다. 그래서 전통적으로 웹사이트는 약간 무겁고 불편하게 느껴지는 요소들이 있었다. 자바스크립트는 프로그래밍 언어로 개발자들이 브라우저에서 어떤 로직을 실행할 수 있게 해준다. 그리고 이 브라우저의 장점은 사용자들이 보는 것을 조작할 수 있다는 점에 있다. 브라우저에서 자바스크립트는 DOM을 조작할 수 있는데 이 DOM이라는 것을 통해 html의 요소들이 화면에 렌더링된다. 자바스크립트는 그러한 DOM을 조작할 수 있고 새로운 html페이지를 불러오지 않고도 사용자들이 보는 것들을 변경할 수 있다. .. 2023. 1. 5. [Vue.js] Vue의 기초 및 핵심 개념 : 일부 요소에서 Vue의 동작양상 Vue.js 란? 자바스크립트 프레임워크로 대화형이자 반응형인 웹 프론트엔드를 구축한다. 여기서 웹 프론트엔드란 브라우저에서 실행되는 웹 애플리케이션을 말한다. Vue.js는 JavaScript로 쓰기 적합하다 JavaScript는 브라우저에서 사용하는 프로그래밍 언어로 사용자가 페이지를 로드한후 브라우저에서 실행된다. 프레임워크란 JavaScript를 비롯한 모든 프로그래밍 언어에서 서드 파티 라이브러리를 말한다. 다른 일반 라이브러리와 달리 프레임워크는 추가기능을 제공할 뿐 아니라 규칙을 안내한다. 애플리케이션 구축시 코드의 작성법에 대한 명확한 구조와 아이디어를 제공한다. .유틸리티 기능과 규칙을 제공하는것이라 할 수 있다. 그러면 Vue 를 왜 사용하는 걸까? 우리는 Vue.js를 이용해서 대화형.. 2023. 1. 5. axios.post 에러 fetch로 해결 | TypeError: Cannot read properties of undef 유튜브 클론코딩을 하고 있는 요즘.. 하루에도 열번씩 에러와 마주하고 있다. 사실 지금 하고 있는 유튜브 클론코딩은 John Ahn님이 인프런에 올려주신 강의를 참고하며 하고 있다. 그러나 2년 전에 올라온 강의인지라 강의만 보고는 클론코딩을 완성하기는 좀 힘들다. 각종 라이브러리의 지속적인 업뎃으로 인해 나타나는 에러 + 리액트 라우터 처리 변화로 인해 나타나는 에러는 나의몫이니까..(근데 이러면서 실력느는 거니까 오히려 조음) 오늘이 그 끝판왕이었던 것 같은데... Multer로 노드 서버에 비디오를 저장하는 작업을 했다. 브라우저에서 영상 파일을 업로드하면 콘솔창에 file name이 떠야 하는데.. 무한한 에러들이 나타남.... 이 이미지는 내가 에러를 해결하면서 겪었던 수많은 경고문이다...뭐 .. 2022. 8. 9. [nodemon] app crashed - waiting for file changes before starting... 및 Error-listen-EADDRINUSE-address-already-in-use-5000 에러 해결과정 오늘은 오류의 날인가 보다... 01. 오류 발생 배경 유튜브 클론코딩 플젝을 진행하던 중.. 서버와 클라이언트 단을 따로 실행을 시키는 것이 불편하게 느껴졌다. 그래서 이걸 한방에 해결해줄 패키지 concurrently 를 설치하고 실행시키려는 찰나.. 갑자기 이런 오류가 발생했다. 서버를 5000번 포트를 사용하고 있었고 서버의 package.js파일에서 이를 연결시켜주고 실행했더니 오류 발생... 5000번 포트를 너무 많이 실행시켰나 싶어 이와 관련된 문제일거라 짐작했다. 02. 해결과정 1 검색을 해보니 예상대로.. node 서버를 5000번 포트로 띄우려 했으나, 이미 사용 중이기에 발생한것 이었다. 스택 오버플로우에 들어가보니 똑같은 에러 응답이 있었다. 위의 이미지는 해결과정이라고 할수 있.. 2022. 8. 4. 이전 1 다음
