개발이 더 좋은 주니어대표

​코드 최적화를 위한 API 인터셉터에 대해서 포스팅 하고자 한다.​API 의 인터셉터 (interceptor) 란APi를 사용할 때 요청이나 응답을 가로채서중간에서 사전 처리를 할 수 있게 해주는 것​​API 인터셉터가 사용 되는 곳공통 헤더 추가 : 일일이 모든 api 마다 header값을 추가하기 보다, interceptor를 통해 한 번 선언 후 , 그 다음부터는 header 추가를 안해도 됨.로그 : 요청 ,응답시 데이터를 log로 찍어내서 확인하기 위함.에러 처리 : 에러 발생시 공통 에러 처리를 하기 위함데이터 변환 : 서버로 보내기 전 데이터 포맷을 변경하거나 서버에서 받은 데이터를 특정 형식으로 변환할 떄 사용.​​동작 방식1) Axios 인터셉터 파일 생성 (파일 위치는 편한 곳 or ..

내 웹사이트는 로그인이 필요한데,새로고침을 하면 로그인이 풀려버리는 심각한 이슈가 지속되었다.​다행히도,자체적으로만 사용하는 사이트라서​우선순위가 뒤로 미뤄졌지만​너부 불편해서 개선하기로 했다.​ 기존에는 값을useStaterecoiluseContextreducer ​등 위의 4가지 방식으로 값 들을 저장 했는데,​새로고침하는 순간,​저 데이터들은 모두 초기화가 되는 것이 아닌가 ??​따라서, 나는새로고침을 해도 갱신이 안되는 데이터 관리가 필요했다.​그렇게 알게 된SessionStorage, LocalStorage(새로고침을 해도 데이터가 유지 됨.)​​SessionStorage 와 LocalStorage는 구분을 해야 한다.​​1) SessionStorage새로고침시에도 데이터가 유지 된다.브라우저를..

1편 useRef2편 use Effect3편 useDropZone4편 useCallback 5번째 react Hook 인 useContext 에 대해 포스팅 하려 한다.​주 내용은"context"의 데이터 활용 이다.  ​Context (컨텍스트) 란 ? 일반적으로 전역적인 상태를 관리여러 컴포넌트 간에 데이터를 공유할 때 사용​​​useContext 란 ? 해당 선언을 통해, 타 컴포넌트에서 쉽게 context의 데이터를 가져올 수 있는 방법 (컴포넌트 간에 props drilling을 피할 수 있음 )Ex. A-> D로 넘겨줘야 하는 데이터가 있는데, A->B->C-> D 의 계층 구조 일 때, A부터 D까지 props로 데이터를 넘기는 것이 아닌 , useContext를 통해 A에서 선언 후 ,바로..

1편 useRef2편 use Effect3편 useDropZone  4편 useCallback에 대해서 포스팅 시작합니다.   ​useCallback 이란 ?​성능 최적화가 목표.주로 함수가 불필요하게 다시 생성되는 것을 방지.함수를 기억해서, 컴포넌트가 리렌더링 될 때, 함수 재생성을 막음 , useEffect와 마찬가지로, 의존성 배열에 의해, 필요시에만 재 생성.​​useCallback 형태 const memoizedCallback = useCallback(() => { // 실행될 함수 내용}, [dependencies]);  useCallback 사용 시기자식 컴포넌트가 자주 리 렌더링 될 떄특히 자식 컴포넌트에 props로 넘길 때, 자식 컴포넌트가 변할 떄 마다 리렌더링이 발생하는데, 불필..

1편 useRef2편 use Effect  3편은 파일을 드래그 드롭, 선택 을 쉽게 해주는 Hook 이다.​하지만 구조가 좀 특이하여,(+새로운 점을 깨달으면서)​그 내용에 대해서 기술해보려 한다.​​기본적인 구조는 아래와 같다.  import { useDropzone } from "react-dropzone";const { getRootProps: getRootFile, getInputProps: getInputFile, isDragActive: isFileDragActive, } = useDropzone({ accept: { "image/*": [], }, onDrop: (acceptedFiles) => { //* 파일 올렸을 때 작동 할 부분 ..