React125 React(84) React-Query - useMutation 적용하기 React-Query 를 사용하여 HTTP 통신 방식에서 create 와 update, delete 를 하기 위해서는 useMutation() 을 사용해야 한다. 이미 실무에서는 내부 api용 라이브러리와 커스텀 훅을 만들어 useMutation 을 사용하고 있지만, 가장 기본적인 사용법을 이해하고자 포스팅을 올려본다. Get 방식으로 React-Query 를 어떻게 사용하는지 궁금하시다면? (아래 포스팅 클릭 ↓↓↓) React(85) React-Query - useQuery 적용하기 React-Query 를 사용하여 HTTP 통신 방식에서 Get 를 하기 위해서는 useQuery() 을 사용해야 한다. 가장 기본적인 사용법을 익혀보도록 하자 Create, Update, Delete 에서는 React-.. 2022. 10. 3. React(83) TypeScript - Record 란 Record 는 React v2.1 부터 도입된 유틸리티 타입이다. 요 녀석은 객체전용 타입이다. Record 는 요렇게 두 개의 제네릭 타입을 받을 수 있다. 첫번째 제네릭 타입 K 는 key 의 타입이고, 두번째 제네릭 타입 T 는 value 값의 타입을 의미한다 type studentNames = Record; ↑ ↑ 객체에서 키의 타입 값의 타입 쉽게 말해서 나는 객체 안의 값들을 전부 string 으로 사용하고 싶다. Record 가 없었을 때는, 객체 프로퍼티 타입을 하나하나~~~~ string 이라고 적어줘야 했다. type studentNames = { name1: string; name2: string; name3: string; name4: string; }; 하지만 Record 를 사.. 2022. 9. 23. React(82) HTTP 통신 delete 요청보내기 (게시물 삭제) HTTP 통신에는 크게 4가지 방식의 요청이 있다. 게시글을 예로 들어보자 게시글 생성은 POST(create) 요청을 하고, 게시글 수정은 PUT(update) 요청을 하고, 게시글 삭제는 DELETE 요청을 하며, 게시글 보기는 GET(read) 요청을 한다. 오늘 구현해볼 HTTP 요청은 DELETE 이다. 사실 삭제가 제일 쉽긴 하다. 그럼 구현하러 가보자 React(82) HTTP 통신 delete 요청보내기 (게시물 삭제) Api.ts 여기는 deletePost 함수가 들어있다. http.delete 메소드를 사용한다. export async function deletePost(id: number): Promise { try { const res = await http.delete( // de.. 2022. 9. 21. React(81) 동시접속시 한쪽이 취소하면, 다른한쪽의 버튼 막기 두 회원이 중고제품을 거래중이라고 가정해보자. 거래를 하는데 판매자가 거래취소를 하게되면 실시간으로 구매자가 결제를 하지 못하게 막아야 불상사가 일어나지 않는다. 이런 막중한 책임감을 가지고 후덜덜하면서 짯던 코드를 공부용으로 다시 정리해보았다. 판매자 [취소하기] 버튼을 누르면 취소상태가 된다. 구매자 취소상태가 되면 즉시 [결제하기] 을 버튼을 막아야함 결과화면 미리보기 판매자 아이디로 접속해 있을 때 [취소하기] 버튼을 누르면 구매자 화면에서는 [결제하기] 를 누르면 결제 버튼이 활성화 → 비활성화 된다. React(81) 동시접속시 한쪽이 취소하면, 다른한쪽의 버튼 막기 payment 타입과 상태 변수 // 페이 진행상황을 타입으로 정리해보았다. type PayStatusType = 'start'.. 2022. 8. 21. React(80) 객체 값을 동적으로 할당하기 나는 if 문과 switch 문의 신봉자였다. 하지만 조건문을 사용(남발)하게 되면, - 조건문이 속한 함수가 매번 렌더된다. - 조건에 맞는지 일일이 검사를 해야한다. 얼마전 사수님과 이야기하다 조건문을 최소화하여 객체의 키값으로 바로 해결할 수 있는 방법을 사용해보게 되었다. - 객체는 첫 렌더시에 이미 메모리에 저장되있고, 키값만 넣어주면 바로 가져올 수 있다. - 객체는 순서를 보장하지 않는다. (즉, 순서대로 검사한다는 개념 자체가 없다 원샷원킬) React(80) 객체 값을 동적으로 할당하기 원하는 자동차 회사를 알려주면, 회사별로 판매하는 차 가격에 대한 정보를 알려주는 코드라고 해보자. 일단 자동차 회사 타입을 정해주고, 차 가격 정보를 알려주는 객체도 만들어 보았다. (🐣 "흠 나는 신입.. 2022. 8. 18. React(79) 숫자 세자리 마다 콤마 붙이기(comma seperator) 입력창에서 기본중의 기본! 숫자입력시 세자리마다 콤마를 붙여보자. toLocaleString() 을 붙이면 해결 ! ....?? 이 안되기도 한다. (우리가 사는 세상은 그렇게 호락호락하지 않다 🥲) 숫자를 string 형으로 입력받아야만 하는 경우가 있다. 이럴 때 onChange 메소드 안에서 string → number 로 형변환을 해서 toLocaleString() 을 사용해도 콤마( , ) 가 추가되는 순간 문자열로 인식되기 때문에 제대로 동작을 안하는 이슈가 생겨 버린다. 이런 경우 내장함수보다는 정규식을 사용하는 것이 더 좋다! 그럼 이런 까탈스런 경우를 해결하러 가봅시다 결과화면 미리보기 React(79) 숫자 세자리 마다 콤마 붙이기(comma seperator) 여기서 관건은 onCha.. 2022. 8. 13. React - TypeScript 실행오류 Cannot add property, object is not extensible 타입스크립트 에러가 났다. readonly 객체는 수정할수 없기 때문에 에러가 난것이다. 나의 경우는 redux 객체를 수정하려고 했기 때문에 에러가 나버렸다. React - TypeScript 실행오류 Cannot add property, object is not extensible 리덕스 값(객체)는 직접 수정할 수 없다. 그 이유는 상태 값은 불변 객체이다. 상태 값은 순수 함수에 의해서만 변경되어야 한다. 하지만 리덕스 객체를 직접 수정하려고 하니 당연히 나게된 에러였던 것이다. 객체를 직접 수정할 수 없다면 ? 복사해서 값을 고쳐주면 된다. (feat. 참조에 의한 복사) ** 참조에 의한 복사란 (더보기클릭) 더보기 객체를 만들면 객체 자체는 메모리에 저장되고, 변수에는 참조값만 저장이 된다... 2022. 7. 27. React(78) useEffect 에서 스크롤 이벤트 동작원리(feat. addEventListener) 요즘 모아놓은 스크롤 이벤트를 포스팅하다보니 개념정리도 함께 되고 있다. 예전에 급히 사용했던 퍼즐(코드) 조각들이 하나씩 모여 동작원리까지 공부하며 완성 되어 가는 것 같아 매우 뿌듯하다. 스크롤 이벤트는 워낙 다양한 사용법이 있지만 응용이 가능한 가장 기본적인 코드로 정리해보았다. React(78) useEffect 에서 스크롤 이벤트 동작원리(feat. addEventListener) 웹페이지에서 일어나는 모든 사건을 이벤트라고 한다. 이벤트는 특정 동작이 벌어지는 사건이 일어난 것이다. 스크롤 이벤트는 스크롤이 움직이는 순간!! 을 감지한다. 엘레멘트 사이즈 ( Element Size ) 스크롤 이벤트에서 많이 사용되는 수치들이다. 이 수치들을 기본적으로 알고 있어야 스크롤 맨아래까지 내리면 OO.. 2022. 7. 18. React(77) 스크롤 시, 하위메뉴를 헤더 아래로 고정하기 상단이 고정된 헤더가 있다. 스크롤 하다가 페이지 중간에서 하위메뉴를 만나면 헤더 바로 아래로 고정되는 기능을 구현하려고 한다. 구글링을 해보니 자바스크립트로 하위메뉴까지의 스크롤의 높이를 구한 뒤, 고정시키는 로직이 대다수였다. 고민고민하다가 CSS 만으로도 구현할 수 있다는 사실을 알아냈다. 많은 분들에게 도움이 될지는 모르겠지만 그래도 공유해보려고 한다. 결과화면 미리보기 페이지 중간에 하위 메뉴 탭이 있다. 스크롤을 내려보자 스크롤을 내리다가 헤더가 하위탭을 만나자 고정되고, 그 아래의 내용들만 스크롤되기 시작한다. React(77) 스크롤 시, 하위메뉴를 헤더 아래로 고정하기 Product.tsx 첫번째 useEffect 를 통해, 첫 렌더시 스크롤을 0으로 잡아주고, 두번째 useEffect .. 2022. 7. 12. 이전 1 2 3 4 5 6 ··· 14 다음 반응형
