-
2021년 03월 09일
axios timeout 설정
axios은 기본적으로 api timeout이 설정되어 있지 않다. 따라서 API를 호출하면 서버에서 응답 주기 전까지는 계속 연결되어 았다. axios timeout 설정하기 axios를 생성하여 timeout을 옵션으로 추가하고 해당 인스턴스로 api를 호출하도록 작업을 진행한다. const instance = axios.create({ timeout: 30000, }); export const baseApi = (method, url, params) => { return instance .request({ method, url, data: params, }) .then(axiosResponseToData) .catch(axiosErrorResToData); }; 기존에 ts로 작성되어 있던 부분들인데, 불필요해 보여 제거 후 함수만 등록하였다.
-
2020년 01월 17일
스크롤 맨 하단으로 이동
채팅과 같이 메시지가 도착하면 최하단으로 계속 이동해야하는 경우나 단순 최하단으로 이동하고 싶을 때 구현하는 방법입니다. 자바스크립트에서 스크롤 하단으로 이동 엘리먼트의 height만큼 scroll 위치를 이동합니다. // overflow 스크롤이 걸려있는 엘리먼트 const ele = document.querySelector("ul"); ele.scrollTop = ele.scrollHeight; React에서 응용하기 React에서 채팅 레이아웃에서 메시지가 들어올 때마다 최하단으로 이동하는 코드입니다. import React, { useRef, useEffect } from 'react'; import { useMessages } from 'Hooks'; ... const messagesRef = useRef<HTMLUListElement>(null); // 메시지 엘리먼트를 저장 const { messages } = useMessages(); // Custom Hooks : 메시지 리스트 useEffect(() => { messagesRef.current!.scrollTop = messagesRef.current!.scrollHeight; }, [messages]); ... return ( <ul className="messages" ref={messagesRef}> {messages.map(message => { return ( <li key={message.key}> ... </li> ); })} </ul>; ) firebase를 사용하고 있으며, 메시지를 구독하면 useMessages에서 messages를 내려줍니다. 이후 messages가 업데이트될 때 마다, ul 엘리먼트를 최하단으로 이동합니다. 만일 특별하게 최하단으로 이동하기 싫으시다면, useEffect 내에 if문으로 조건을 설정하시면 됩니다.
-
2020년 01월 08일
axios - interceptors error 처리와 refreshToken
axios로 개발할 때, API마다 try ~ catch문을 적용하여 에러 처리를 진행해왔습니다. 이번 프로젝트에서는 Token을 관리하며, 서버에서 403에러가 오면 Token을 재발행해야하는 환경이라 더 나은 코드가 없을까 찾아보니 interceptors가 있었습니다. axios.interceptors axios.interceptors 함수를 통해 request, response를 감지할 수 있습니다. // API 호출 전 해당 함수가 먼저 실행됩니다. axios.interceptors.request.use( (config) => { return config; }, (error) => { return Promise.reject(error); } ); // API 실행 후 response를 감지하여 데이터를 return 합니다. axios.interceptors.response.use( (response) => { return response; }, (error) => { return Promise.reject(error); } ); 위 예제처럼 interceptors.response를 통하여 에러를 감지할 수 있게됩니다. 그러면 다시 response에 에러처리를 위해 코드를 작성합니다. const _axios = axios.create({ baseURL: process.env.REACT_APP_API_URL, }); _axios.interceptors.response.use( (response) => response, (error) => { if (error.response && error.response.status === 403) { return Auth.refreshToken() // token 재발행 및 반환 .then((token) => { originalRequest.headers["Authorization"] = token; return _axios.request(error.config); // error.config(origin API 정보)를 다시 요청 }) .catch((error) => { window.location.href = "/login"; }); } return Promise.reject(error);...
-
2020년 01월 07일
Javascript Scope 이해하기
스코프(Scope, 유효범위)에 대해서는 여러분들은 이미 사용하고 있을 것 입니다. 다만, 정확한 정의와 상세한 정보에 대해서 글을 통해 상세하게 알고 넘어가겠습니다. 스코프란? 특정한 변수(identifier)에 접근이 가능한가에 대한 규칙(범위)입니다. var x = "global scope"; function foo() { var x = "function scope"; console.log(x); } foo(); // function scope console.log(x); // global scope 위 예제에서 함수 foo 내 선언된 변수 x에 대해서는 foo 내에서만 참조가 가능하고 외부에서는 참조가 불가능하다. 이와같은 규칙들을 스코프라고 합니다. 스코프의 구분 스코프는 전역 스코프와 지역 스코프로 나눠집니다. 전역 스코프(Global Scope) 전역 변수(Global variable), 코드 어디에서든 참조할 수 있습니다. var로 선언한 전역 변수는 전역 객체(Global Object) window의 프로퍼티가 됩니다. 지역 스코프 (Local scope or Function-level scope) 지역 변수(Local variable), 지역(함수) 내에서 선언되어 함수 내에서 자신과 하위 함수에서만 참조 가능합니다. 자바스크립트 스코프 특징 자바스크립트는 함수 레벨 스코프(function-level scope)(함수 코드 블록 내에서 선언된 변수는 함수 코드 블록 내에서만 유효)를 따르고 있습니다. var x = 1; // 전역변수 (function () { var y...
-
2019년 12월 23일
Javascript Prototype 이해하기
자바스크립트는 프로토타입 기반 객체지향 언어라고 불립니다. 그리고 여러분들은 한번 쯤은 __proto__라는 Object를 본 적이 있을 것이고 그냥 지나치는 경우가 대다수일 것 입니다. 그러한 __proto__가 무엇이고 자바스크립트가 prototype 기반 언어라는 이유를 알아보도록 하겠습니다. Prototype 자바스크립트에서 모든 객체는 부모(객체 원형)와 연결되어 있습니다. 그리고 객체 지향에서 상속 개념과 동일하게 부모의 프로퍼티와 메소드를 상속받아 사용할 수 있게 됩니다. 여기서 부모 객체를 Prototype 객체 또는 Prototype이라고 부릅니다. 간단한 예제를 통해 알아봅니다. var item = { key: "key", }; console.log(item); // { // key: "key" // __proto__: { // item 객체의 Prototype(부모 객체) 정보 // constructor: ƒ Object() // hasOwnProperty: ƒ hasOwnProperty() // toString: ƒ toString() // valueOf: ƒ valueOf() // ... // } // } console.log(item.hasOwnProperty("key")); // true item 객체를 출력하여 __proto__ 프로퍼티를 열어보면 자바스크립트의 Object 객체가 부모이며, item 객체에서 선언하지 않은 hasOwnProperty 메소드를 상속받아 사용이 가능합니다. proto ? 위에서 생각할 수 있는 부분은 ‘아 __proto__ 프로퍼티를 통하여 부모 객체에 접근할 수 있구나’라는 것을 알...