# mutation

dpldpl

개요 >react-query의 useMutation 훅을 사용하여 api 호출을 처리하려고 할 때, 에러가 발생하는 것을 발견했다. 이 에러는 mutation 함수의 매개변수에서 발생했다. 에러메세지를 보기 이전에 코드를 살펴보자. 우선, react-query 라이브러리로 api통신을 하기 위해서는 api를 통신하는 함수 코드 react-query 코드 두 가지 주요 부분이 필요하다. 우선, api를 통신하는 함수를 선언하는 코드(1번의 내용)부터 살펴보도록 하자. updateGroupApi라는 이름으로 함수를 하나 만들어 주었다. 이 함수는 그룹 이름을 업데이트하기 위한 api 호출을 수행하는 함수이다. 그룹의 기존 이름, 새 이름, 이메일을 매개변수로 받아 세 개의 파라미터를 하나의 데이터로 묶어서 서버에 전달해 patch 요청을 수행하고, 응답을 반환하거나 오류를 처리한다. 이 부분에는 아무런 문제가 없다. 문제

thdalwh3867

fuzzingbook sitemap > webpage: https://www.fuzzingbook.org/html/00Tableof_Contents.html git: https://github.com/uds-se/fuzzingbook/ Table of Contents Part I: Whetting Your Appetite Tours through the Book Introduction to Software Testing Part II: Lexical Fuzzing Fuzzing: Breaking Things with Random Inputs Code Coverage Mutation-Based Fuzzing Greybox Fuzzing Search-Based Fuzzing Mut

wha1eson

Mutation이 뭐길래 알아보는 겁니까? Mutate는 변경한다는 의미로 프로그래밍에서는 value를 change한다는 의미라고 볼 수 있다. JavaScript에서는 데이터 타입을 다음과 같이 분류한다. Primitive Data Types (원시 타입) undefined Boolean Number String BigInt Symbol … Structural Data Types (참조 타입) Object Functions Array Map … ☝🏻 Immutable, Mutable은 값을 바꿀 수 있는지에 대한 여부에 따라 달라집니다. > *“Im

thdalwh3867

Mutation-Based Fuzzing은 소프트웨어의 버그를 찾는 데 사용되는 자동화된 테스트 방법입니다. 이 방법은 소프트웨어의 코드를 무작위로 변경하여 버그를 유발할 수 있는 조건을 찾습니다. Mutation-Based Fuzzing은 매우 효과적인 테스트 방법입니다. ![](https://velog.velcdn.com/images/thdalwh3

tykim1227

백엔드에서 제공한 필터링 기능의 사용법은 먼저, filter에 사용할 컴포넌트들을 먼저 만들어보자. 프로젝트가 모자 쇼핑몰이라 카테고리 대신 색상을 필터링해야함.. + 가격 필터링 ColorPicker.tsx PriceFilter.tsx 각각 색상필터링에 사용할 버튼, 가격 필터링에 사용할 버튼 컴포넌트들이다. ProductPage.tsx TypeScript를 사용하다보니 좀 번거로운 부분이 있다면 filterValues.value 의 type 처럼 많은 type을 지정해주어야 할때 인것같다. number, string 두 값모두 넣을 수 있게 하려다보니 null 까지 추가되었다.. 원래는 useState로 변경되는 값들을 관리하려고 했으나, 필터링이 중복적용 되게 하려면 필터링 배열을 따로 만들고 배열에 Push하는 방법이 좋을 것 같아 만들면서 수정했다. 아까 만들어둔 버튼 컴포넌트들을 return 해주면 ![](https://v

tykim1227

현재 진행중인 쇼핑몰 프로젝트에 react-query 를 적용했는데, 일단 급하게 useQuery만을 사용하여 data를 fetching 하는데만 react-query를 사용하고 있었다. 오늘 공부한 Mutation과 queryClient를 내 코드에 적용시켜 보자. queryClient와, Mutation을 적용, 리팩토링할 코드를 찾다가 아주 좋은 예시를 발견했다 리뷰등록 (수정 전) 현재 react-query로 fetching을 해오고 있으나 react의 hooks 만을 이용해 이벤트를 처리하니 이벤트 발생후 데이터 동기화, 최신화가 매끄럽지 않게 이루어지고 있었다. Mut

yoonezi

Graphql mutation는 백엔드의 오류나 요청한 내용의 삭제 등 여러한 이유로 실패할 수 있습니다. 따라서 try ~ catch를 사용하여 성공과 오류에 대한 처리를 나눠서 작업해야 합니다.

wns450

올해 들어서 자바스크립트는 새로운 문법이 추가되었다. 노마드코더 영상으로 접하게 되었고 있는 내용들을 정리하는 것이 목적이다. 방향성은 예측 가능하고 버그를 줄이는 방향이다. 이는 유지 관리에 도움을 준다. mutation한 값들은 경우의 수를 늘리고 혼란을 야기한다. 먼저 reverse를 보면 을 하면 결과로 이 나온다. 왜냐하면 reverse는 mutation하여서 기존(원본)의 배열을 바꾸고, 참조 주소를 그대로 반환한다. 그래서 x랑 y와 이어지게 된다. 이러한 경우의 수가 생기게되면 앞에서 말했듯이 혼란을 야기하기 떄문에, 많은 프로그래밍 언어에서 뮤테이션을 금지하거나 권하지 않는다. 그래서 이러한 해결책으로 권장하는 방법은 원본의 복사본을 만들고 이를 수정하는 방식을 권장한다. (알고리즘에서도 원본을 수정하는 것보다 새로운 변수에 할당하는 것을 권장한다.) React에서도 상태를 변경하기보다는 새로

rookieand

✒️ Mutation 이란 무엇인가? mutation 이란, 서버에 Side-Effect 를 일으키도록 하는 함수다. 인계 받은 쿼리 값을 기반으로 새로운 결과를 도출하여 서버에 변경 사항을 적용하도록 요청하는 기능을 한다. 보통 POST, PUT, DELETE 같이 데이터를 수정하거나 추가하는 요청을 보낼 때 같이 사용되며, react-query 에서는 관련 작업을 위해 useMutation 훅을 지원한다. 📒 useQuery 와의 유사점과 차이점 일반적으로 쿼리는 자동으로 실행된다. refetchOnWindowFocus 옵션을 통해서 창에 포커스를 맞출 경우 백그라운드 단에서 refetch 를 요청하거나, refetchInterval 옵션을 사용하여 일정 기간마다 refetch 작업을 수행한다. 굳이 사용자가 refetch 작업을 지정하지 않아도 백그라운드 단에서 진행된다. 하지만 mutation 은 사용자가 **선언적

zitto

🏷️ [목차] 동기 실행과 비동기 실행 VSCODE에서 비동기 REST-API에서 동기/비동기 실행 호이스팅(Hoisting) apollo-client 셋팅하기 _app.js의 작동 원리 apollo-client 로 graphql 뮤테이션 실행 graphql 뮤테이션에 async / await 적용 URL, URI URN 차이 네트워크 문제 해결방법 🖇️ [출처 및 참조] 코드캠프 💡 동기 실행과 비동기 실행 >### ✅ 동기(기다리자) vs 비동기(기다리지 말자) 비동기 실행: 서버 컴퓨터의 작업이 끝날 때까지 기다리지 않는 통신으로 서버에 요청(등록, 수정, 삭제 등)이 저장될 때까지 기다리지 않고 다른 작업을 진행한다. 동기 실행: 서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다

zitto

🏷️ [ 목차 ] HTTP 통신 HTTP 요청(Request)과 응답(Response) 요청(Request) 응답(Response) API API 종류 (rest-API vs graphql-API) rest-API와 graphql의 차이점 API 응답 데이터 JSON ( JavaScript Object Notation ) API와 CRUD GRAPHQL _ playGround 🖇️ [출처 및 참조] 코드캠프 https://developer.mozilla.org/ko/docs/Web/HTTP/Overview 💡 HTTP 통신 > HTTP란❓ 두 컴퓨터 간(프론트 백엔드)에 텍스트 데이터를 주고 받는 길이다. 클라이언트(ex: 브라우저)와 서버가 HTTP 라는 길로 요청(request)과 응답(response) 2가지를 서로 주

cloud_oort

Mutation(변이) React-Query에서 mutation의 역할은 서버에 있는 데이터를 업데이트하기 위해 서버로 네트워크 콜을 보내는 것이다. 즉 Create, Update, Delete할 때 쓰인다. 우리는 mutaion을 활용하기 위해 useMutation hook을 사용할 것이다. > CRUD의 사용방법은 다음과 같다. **Read: useQuery Create, Update, Delete: useMutation ** useMutation useMutation은 몇 가지 빼고는 useQuery와 비슷하다. 실제 네트워크 콜 할 때, 사용할 mutate function을 리턴 우리는 useMutation 리턴 오브젝트 값의 mutate function property를 이용하여 mutation call을 전달할 것이다. cache에 데이터를 저장하는 것이 아니기 떄문에 query key는 불필요하다. cache data가 없

bakukun

0. 서론 Fuzzing은 프로그램에 무작위의 데이터를 삽입하여 버그 및 취약점을 찾아주는 기술이다. 예를 들어, 프로그램에 들어가는 입력(표준입력 or 파일)을 변조시켜 정상적인 동작이 아닌, crash를 유발시키거나 메모리 corruption을 일으키는 테스트 사례를 찾는다. Fuzzing 기술은 여러 취약점을 찾는데 아주 유용한 툴로써 최근에 활발하게 연구개발이 진행되어 왔다. 이 프로젝트는 fuzzing 기술을 적용하여 전에 알려지지 않았던 여러 open-source 소프트웨어의 버그 및 실제 취약점을 찾고, 패치를 생성하여 community에 제출하는 과제를 수행한다. 1. AFL && AFL++ Fuzzing는 프로그램 혹은 메모리 스택에 자동으로 반무작위 데이터를 주입하고 버그를 탐지하는 Fuzzer라는 소프트웨어 테스트 도구로 수행된다. 이 중 주로 AFL++라는 Fuzzer를 활용하여 여러 오픈소스 소프트웨어를 Fuzz

rondido

apollographql에서 tutorial 가져오기 clone 받아오기 폴더 경로를 start/server로 이동 후 진행 apollographql에서 tutorial server/src/index.js schema.js index.js server 경로에서 npm start해줌으로써 실행 데이터소스 연결 datasource/launch.js resolvers를 만들어야한다. resolvers에는 쿼리를 만들어야한다. resolvers를 만들기 위해 데이터를 api 서버로부터 가져온다. index.js 데이터 소스 연결(SQLite by use Sequelize - ORM) Obejct Relational Mapping DB와 데이터를 매핑해주는 도구 resolvers.js index.js 위 코드를 통해 제대로 작동하는지 확인하기.

kjw8971

GraphQL을 공부하다 GraphQL에서 반드시 알아야 할 사항들이 다행히 공식 홈페이지에 정리가 되어 있었다. 처음이라 아직 어렵고 미숙한 사항들이 많아 공식 홈페이지의 글을 가져와서 정리하였다. 필드 GraphQL은 객체에 대한 특정 필드를 요청하는 것이 무척 간단합니다. 아주 간단한 쿼리를 실행하여 얻는 결과를 살펴 봅시다. 쿼리와 결과가 정확히 동일한 형태인 것을 볼 수 있습니다. 이것이 GraphQL의 핵심입니다. 항상 기대 한 결과를 얻을 수 있습니다. 서버에서 클라이언트가 요청하는 필드를 정확히 알고있기 때문입니다. name 필드는 String 타입을 반환합니다. 여기서는 스타워즈의 영웅이름인 "R2-D2" 를 반환했습니다. > 팁 - 위의 코드는 실제로 실행 됩니다. 원하는대로 변경하고 새로운 결과를 볼 수 있습니다. 쿼리의 hero 객체에 appearIn 필드를 추가하고 새로운 결과를 확인해보세요. > 앞의 예제에서는 `String

art11010

Vuex Vuex는 Vue.js 애플리케이션에 대한 상태 관리 패턴 + 라이브러리 이다. 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할을 하며 예측 가능한 방식으로 상태를 변경할 수 있다. 또한 Vue의 공식 devtools 확장 프로그램과 통합되어 설정 시간이 필요 없는 디버깅 및 상태 스냅 샷 내보내기/가져오기와 같은 고급 기능을 제공한다. 상태 관리 패턴이란 상태 :

pikadev1771

GraphQL 키워드 Query 저장된 데이터 가져오기 (REST의 GET에 해당) GraphQL은 거의 Query를 위한 언어... Mutation 저장된 데이터 수정하기 > * Create: 새로운 데이터 생성 > * Update: 기존의 데이터 수정 > * Delete: 기존의 데이터 삭제 Subscription (구독) 특정 이벤트가 발생 시 서버가 대응하는 데이터를 실시간으로 클라이언트에게 전송 (업데이트) 전통적인 Client(요청)-Server(응답) 모델을 따르는 Query 또는 Mutation과 달리, 발행/구독(pub/sub) 모델을 따름. GraphQL 구조 쿼리 (Query, 데이터 조회) 1) 쿼리(요청)와 결과는 정확하게 같은 모양이다. > #### ✅ hero의 name을 요청하는 쿼리 ✅ > #### 👉🏽 hero의 name을 요청한 쿼리의 결

hongwr

graphQL Provider 보통 index에서 useContext Provider처럼 App 자체를 싼다. client를 하나 설정하고 그걸 따서 Provider로 제공한다고 생각하면 됨. index에서 사용 원래 사용법 매일 client를 끌고와야 하는 단점, state를 매일 만들어서 넣어야 하는 단점들. 그러므로 useQuery라는 hook을 사용. 구조분해 할당으로 받을 수 있음. 변수를 필요로하는 쿼리로 변수를 보내는 server code Client code Apollo cache 위에 클라이언트 코드를 다시 보자. 여기에서 new InMemoryCache()는 Apollo cache를 의미한다. 이게 필요한 이유는 유저가 브라우저에서 한번 들어갔던 것을 케시에 저장해놓아서 다시 들어가도 로딩을 새로 하지 않아 속도가 빠르게 적용이 된다. 즉, apollo cache -> 들어

space086

중고마켓 상세페이지를 만드는 도중 만난 오류.. invariant violation을 직역하면 불변요소 위반이라고 뜬다. 쿼리를 동작해야 하는데, 뮤테이션이 쓰였다고 나와있는데 쿼리를 날리는데 오류가 날만한 요소가 있나 찾아보다가 어이없는 실수 발견 ㅎㅎ... fetchUseditem 은 쿼리 기능인데 뮤테이션을 넣어서 난 오류였음 뮤테이션을 쓴 자리에 query를 쓰니 해결!

space086

📔 학습목표 동기와 비동기방식 >> Asnyc - Await vscode에서 데이터전송 >> Apollo-Client/mutation 동기와 비동기방식 동기 : 서버 컴퓨터의 작업이 끝날 때까지 기다린 후 다음 작업을 실행하는 통신. 말 그대로 동시에 일어난다는 뜻. 요청과 결과가 동시에 일어난다는 약속. 즉, 요청을 하면 시간이 얼마가 걸리던지 요청한 자리에서 결과가 주어져야 한다. ex ) 게시글 등록 후 불러왔을 때 게시글이 불러와지지 않는 오류 👉 동기 실행 비동기 ![](https://velog.velcdn.com/images/space086/post/202599f2-