감귤밭 호지차 농장

세상세상 놀라온 정말 간단한 Axios GET/PUT/DELTE/PATCH 이런 기능만 쓰다가 면접에서 딱 "Interceptor" 설명해주세요. 하는 순간 아.......... 그래요.. 나는 길에 굴러다니는 말도 못하는 감자입니다. 읍.ㅇ.ㅡㅂ.... 인터셉터 공식 문서 : then 또는 catch 로 처리되기 전에 요청과 응답을 가로챌 수 있다. 공식 문서에서는 단어 뜻 그대로 서버로부터 데이터를 받아오거나 에러로 분기 되기 전에 중간에서 훽! 가로채는 녀석이란다. 서버랑 통신하기 전에 잠깐 기다렸다가 이것 좀 하고 가!!!! 이런 녀석이랄까...? //요청 axios.interceptors.request.use(function () { // 요청이 전달 되기 전에 작업 수행 return confi..

저장 공간 또는 DOM 요소에 접근하기 위해 사용되는 React Hook입니다. useRef로 관리되는 값은 값이 변해도 화면이 렌더링 되지 않는다는 특징이 있습니다. 또한, 컴포넌트가 종료되기 전까지는 렌더링이 되어도 값을 그대로 유지할 수 있습니다. 주로 변화는 감지해야 하지만 그 변화가 렌더링을 발생시키면 안되는 경우 많이사용합니다. 로그인 시 클릭 하지 않아도 자동으로 입력 폼이 포커스되는 기능이나 무한 스크롤에서 스크롤 이벤트를 감지해서 새롭게 데이터를 불러올 때 사용합니다. 보통 무한 스크롤의 새롭게 이벤트가 일어나는 지점을 관리할 때 사용하고는 합니다. Ref 사용 예시 입력 폼 포커스 이벤트 useRef 사용 예시 무한 스크롤의 새롭게 이벤트가 일어나는 지점 관리 useState와 useR..

React에서 SVG 파일을 함수 컴포넌트화해서 간편하게 관리 및 재사용하고 불러올 수 있게 만들어봅시다. # 사용 기술 스텍 React x Vite x TypeScript SCSS https://www.telerik.com/blogs/how-to-use-svg-react How to Use SVG in React SVG is an excellent way to develop scalable and responsive visuals. This article introduces SVGs and different methods of using them in a React application. www.telerik.com type SVG = { fillColor: string; width: string; h..

* Redux 정리 글 Redux 정의 * Redux-Toolkit 정리 글 [Redux x Redux-toolkit] 간단 사용법 * 기타 상태 관리 도구 정리 글 (useState / useContext / Recoil / Mobix ) 참고 : React 상태관리 최강자는? React 에서 사용하고 있는 상태관리 도구들의 각각의 차이점과 장단점 정리 글 React는 여러 상태 관리 도구들을 사용할 수 있는데 각기 장단점을 가지고 있어서 이들의 차이점에 대해서 정리해보는 시간을 가지도록 하겠습니다. 참고로 저는 Redux-Toolkit을 사랑하지만 많은 회사에서는 Redux , Redux-Saga를 많이 사용하더라구용.. Recoil 도 꽤 쓰고 말이죵... 우선 프로젝트를 진행할 때 왜? 상태관리 ..

메인 프로젝트의 코드를 재 구성하고 공부하면서 여러모로 왜 코드를 저렇게 짰을까 하는 생각이 드는 코드들이 많았다... 몇 달 전 ... 나... 정신.. # 파일 구조 CommunityDetail ( 커뮤니티 데이터 전체 조회 ) - CommentBox ( 개별 커뮤니티 아이템 ) 어제 밤에 코드를 좀 정리하고 (특히, Comment 파트) 잘 돌아가는거 확인하고? 오늘 아침에 다시 정리하려고 딱 켰는데... ... # 게시글 상세 클릭 시 벌어지는 일 : 공포 그 자체 어제는 안 그랬는데 왜 갑자기 게시글 상세 요청이 무한 요청이 되는 거지.....라는 두려움이 발생했다.. 우리의 GPT 씨의 도움으로 상위에서 랜더링 되는 의존성의 useState 요소가 하위에서 건드려지면서 무한으로 계속 리랜더링 ..

주제 : React-Icon을 사용하다가 동일한 컴포넌트 형태인데 상위 컴포넌트에서 하위로 icon 을 내려줄 수 없는지가 궁금해졌다. 원래 React-icon 사용법은 아래처럼 마음에 드는 아이콘을 찾아서 위에서 선언하고 그대로 부러와서 사용하면 된다. :: React-Icon import { LiaLockSolid } from 'react-icons/lia'; //생략 //생략 하지만 지금 메인 프로젝트 리팩토링 하다가 동일한 형식의 디자인에서 결국은 같은 Input 폼인데 들어가는 type 과 아이콘만 다를 이 컴포넌트들의 재사용성을 높이고 싶었다. ( 사실 일일히 다시 디자인하고 사용하기 귀찮았..던.. 크흠) 그래서 기존에 아래와 같았던 폴더 구조에서 login - login.tsx - logi..

이러한 에러와 함께 댓글 등록이 안되는 현상을 발견했습니다. Error : #321 페이지 React - Error Decoder A JavaScript library for building user interfaces legacy.reactjs.org useEffect 나 useState 를 쓸 때 잘못 import 했을 때 발생하는 에러라고 하네요. 원래 댓글 등록 할 때 새로고침을 해야지만 새롭게 뜨는 문제 때문에 상위 컴포넌트에서 useState 트리거를 내려줬는데 이때문에 뭔가 꼬인 듯 합니다. 우선은 삭제 해주었고 다시 댓글을 등록 했을 때 바로 댓글이 뜰 수 있게 나오도록 수정을 어떻게 해야 하나 고민이네요 # 업데이트 댓글의 작성 컴포넌트 부분하고 수정 삭제 컴포넌트하고 나눠져있고 해서 각..

해당 에러는 useSelector를 컴포넌트 함수가 아닌 다른 함수(call 함수)에서 사용하고 있다는 것을 나타냅니다. useSelector는 리덕스 스토어에서 상태를 가져오기 위해 리액트 함수 컴포넌트 내에서만 사용해야 합니다. 이러한 경우, useSelector를 사용하려는 함수(call 함수)를 리액트 함수 컴포넌트로 변경해야 합니다. 또는 useSelector를 사용해야 할 컴포넌트 함수 내부에서 해당 함수(call 함수)를 호출하여 상태를 사용하도록 해야 합니다.

Redux 와 Redux-toolkit " Redux " 는 상태 관리 라이브러리 중 하나로 가장 인기가 많은 녀석입니다. props 를 여기저기 내려주다가 props드롤링 이 일어나는 것을 방지하기 위해 서버와 주고 받는 데이터를 관리해주는 역할을 학도 있습니다. > 댕쩌는 설명 블로그가 있어서 첨부합니다. : 최고 리덕스야 고맙다! Redux & Redux Toolkit 알아보기 > 내가 정리한 Redux : [230424 ~ 5] 리덕스::REDUX Redux-toolkit 은 redux의 상위 업그레이드 버전으로 이해했습니다요... 어차피 {toy-project-DailyMusic}작업을 redux 로 상태 관리 하기로 했으니까 이왕 하는거 redux-toolkit으로 적용해서 사용해보겠습니다. ..