분류 전체보기19 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. [엘리스 AI트랙] 2차 프로젝트 회고록 6월에 엘리스 AI트랙 5기에 참여한 게 엊그제 같은데 벌써 10월이다. 프론트엔드 개발자라는 목표를 가지고 지금보다 부족한 실력 상태에서 시작하여 4개월이 흐른 지금, 나는 얼마나 성장했을까. 꽤 많은것을 배운 느낌인데 아직 내것이라는 감각은 확신할 수 없다. 그렇지만 이제는 내가 원하는 부분이 있다면 미약하게나마 구현할 수 있게 성장한 것 같다. 동시에 목표와 현재 실력의 간격을 확인할 수 있게 되었다. 오늘은 엘리스 2차 프로젝트를 회고해볼까 한다. 1. 엘리스 AI트랙 5기, 두번째 프로젝트의 시작. 1차 프로젝트와 데이터 분석까지 완료된 상황에서 진행된 이번 2차 프로젝트. 3주간 진행되는 2차 프로젝트는 1차와 많이 다르게 진행되었다. 우선 1차 프로젝트와는 달리 스켈레톤 코드가 주어지지 않았.. 2022. 10. 26. [JavaScript]객체 프로퍼티 개념 정리( 프로퍼티 플래그, 접근자 프로퍼티 등) 프로퍼티 플래그 객체 프로퍼티는 값(value)와 함께 플래그(flag)라 불리는 특별한 속성 세가지를 갖는다. `writable` - true면 값을 수정할 수 있다, 그렇지 않다면 읽기만 가능 `enumerable` - true면 반복문을 사용해 나열할 수 있다. 그렇지 않다면 나열 불가. `writable` - true면 프로퍼티 삭제나 플래그 수정이 가능. 그렇지 않다면 프로퍼티 삭제와 플래그 수정이 불가능 이를 좀 더 구체적으로 살펴보았다 writable 플래그 `writable` 플래그를 사용해 user.name에 값을 쓰지 못하도록 해보았다. 이를 통해 writable 을 true로 변경하지 않는 한 그 누구도 객체의 이름을 변경할수 없게 되었다. let user = { name: "euio.. 2022. 8. 11. [JavaScript] 객체관련 개념 정리 (깊은복사, 얕은복사, garbage collectoin, Execution Context 등) 객체 : 특수한 기능을 가진 연관 배열(associative array) ① 자바스크립트에는 8가지 자료형이 있음 - 원시형 : 오직 하나의 데이터만 담을 수 있음 - 객체형 : 다양한 데이터를 담을 수 있음 --> key로 구분된 Data집합 or 복잡한 개체(entity) ② 객체는 {}를 이용하여 만든다. ③ 중괄호 안에는 키(key, 문자형):값(value, 자료형)쌍으로 구성된 프로퍼티(Property)를 저장 가능 let user = new object() //'객체 생성자' 문법 let user = {} //'객체 리터럴' 문법 *중괄호를 이용해 객체를 선언하는 것을 객체 리터럴 이라고 부른다. 리터럴과 프로퍼티 1. 콜론(:)을 기준으로 왼쪽엔 키, 오른쪽엔 값 위치 let user = {.. 2022. 8. 11. axios.post 에러 fetch로 해결 | TypeError: Cannot read properties of undef 유튜브 클론코딩을 하고 있는 요즘.. 하루에도 열번씩 에러와 마주하고 있다. 사실 지금 하고 있는 유튜브 클론코딩은 John Ahn님이 인프런에 올려주신 강의를 참고하며 하고 있다. 그러나 2년 전에 올라온 강의인지라 강의만 보고는 클론코딩을 완성하기는 좀 힘들다. 각종 라이브러리의 지속적인 업뎃으로 인해 나타나는 에러 + 리액트 라우터 처리 변화로 인해 나타나는 에러는 나의몫이니까..(근데 이러면서 실력느는 거니까 오히려 조음) 오늘이 그 끝판왕이었던 것 같은데... Multer로 노드 서버에 비디오를 저장하는 작업을 했다. 브라우저에서 영상 파일을 업로드하면 콘솔창에 file name이 떠야 하는데.. 무한한 에러들이 나타남.... 이 이미지는 내가 에러를 해결하면서 겪었던 수많은 경고문이다...뭐 .. 2022. 8. 9. 이전 1 2 다음
