개발이 더 좋은 주니어대표

​코드 최적화를 위한 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) => { //* 파일 올렸을 때 작동 할 부분 ..

1편 - useRef 에 이어 2편 - useEffect 다  useEffect는 react에서 기본적으로 제공해주는 훅 함수중 하난데,엄청 많이 쓰인다.​간단히 설명하자면,​​React Component가 "렌더링" 될 때마다 특정 작업을 실행한다.​​useEffect의 사용법은 간단한데,  useEffect( fucntion , [ 인자]) 이렇게 쓰인다,​finction에는 수행하고자 하는 작업[ 인자 ] 는 배열 형태로, 컴포넌트가 Mount 될 때, 인자로 넣어놓은 값이 업데이트 될 때useEffect를 실행시키는 용도이다.​​** 모든 Hook(훅) 이 마찬가지 지만,​사용할 떄는 선언부터 해야한다. import React, { useEffect } from 'react';  useEffec..

다시 Next js를 하면서 Next js에서 사용하는 Hooks 들을 정리해보려 한다.​​UseRef​Dom 요소에 접근​예를 들어서, input 에 inputRef 을 통해 접근을 하고, 에 속성으로 전달을 한다.​그 이후에,useEffect 내부에inputRef.current.focus();를 적용 해줌으로써, DOM요소에 직접 컨택할 때 쓰인다. import React, { useRef, useEffect } from 'react';function FocusInput() { const inputRef = useRef(null); useEffect(() => { // 컴포넌트가 마운트될 때 input 요소에 포커스 inputRef.current.focus(); }, []); ret..

24.09.20 최신본​ 인스타 그램의 피드에서 광고를 하다보면,꼭 부가세가 붙어서 나온다..​나가는 돈은 줄일수록 좋고,돈 계산도 쉽기 때문에알아보다가,​ 사업자는 인스타그램 광고시 부가가치세를 안내도 되는 거 였다.  ""우리나라 세법상해외사업자의 전자적 용역 공급시 B2C는 부가세 과세를 하고,B2B는 부가세 과세를 하지 않는다부가가치세법 제53조 2""    를 그럼 이제인스타그램 계정에서(프로페셔널 계정)​사업자등록을 해주는 방법을 포스팅 해보자.1) 계정 설정 - 광고 결제 2) 결제수단 - 비즈니스정보 (Business Info) 클릭   3) 이름 , 주소, 사업자 등록번호 등록   위 내용을 작성해주고,​Save 를 하면 종료 입니다.​주소, 사업자 번호, 회사명이틀리지 않았다면,​부가세..

전편을 안보고 오셨다면, 먼저 보고 오시기를 추천 드립니다.  1편 :https://want-all.tistory.com/3 Flutter (플러터) - 구글지도 사용 - (1) 환경세팅기피 기능 중 하나인 지도를 구현하기 위해서는상당히, 많은 작업이 필요하다. 이편에서는 Flutter 프로젝트 내부에서구글 맵을 생성하는 내용에 대하여포스팅을 하려고 한다.   플러터에서want-all.tistory.com 2편 : https://want-all.tistory.com/4?category=1160465 Flutter (플러터) - 구글지도 사용 - (2) 화면에 지도 표시1편을 보고오지 않았다면먼저 보고 오시기를 권장 드립니다.  https://want-all.tistory.com/3 Flutter (플러터..

전편을 보고오지 않았다면먼저 보고 오시기를 권장 드립니다.  1편 : https://want-all.tistory.com/3 2편 : https://want-all.tistory.com/4?category=1160465 Flutter (플러터) - 구글지도 사용 - (1) 환경세팅기피 기능 중 하나인 지도를 구현하기 위해서는상당히, 많은 작업이 필요하다. 이편에서는 Flutter 프로젝트 내부에서구글 맵을 생성하는 내용에 대하여포스팅을 하려고 한다.   플러터에서want-all.tistory.com  1 ) 마커 생성- 사실 마커 자체는 코드도 , 다른것도 별거 없다. 아래가 전부다.var marker = Marker( markerId: MarkerId(e['name'] as String),..