본문 바로가기

javascript79

vue 통신 가로채기 axios interceptor의 개념과 활용! SPA 개발을 하다 보면 axios로 통신하는 경우가 많이 있는데 서버와 분리된 환경이다 보니 로그인 정보는 token을 이용해서 처리하는 경우가 많다. 이러한 경우 axios의 interceptor를 활용한다면 손쉽게 처리할 수 있다. 이를 보통 요청 가로채기라고 하는데, 통신 요청 직전을 가로채서 원하는 작업을 먼저 처리하고자 하는 것을 의미하기 때문이다.그럼 axios의 interceptor는 어떤 방식으로 처리가 되는지 하나씩 자세히 살펴보자.예제 코드는 모두 vue에서 작업을 진행하였다.vue3, axiosinterceptor란?인터셉터(interceptor)는 소프트웨어에서 통신 중에 어떤 작업을 수행하기 전이나 후에 먼저 다른 작업을 처리할 수 있도록 처리해 주는 역할이다. 보통 HTTP 요.. 2024. 5. 22.
자바스크립트 match() 함수 특정 문자 찾기 자바스크립트에서 문자열 내에서 특정 문자를 찾아야 하는 경우가 종종있다. 다양한 방법이 있는데, 오늘은 그 중에서 match() 함수를 활용한 방법을 정리해보려고 한다.match() 함수는 전체 문자열에서 찾고자 하는 문자를 매개변수로 전달하면 결괏값을 배열 형태로 반환해주는 함수다. 만약 찾고자 하는 값이 없으면 null이 반환된다. 사용방법은 매우 간단하지만 해당 함수는 어떠한 특징을 가지고 있는지 하나씩 살펴보도록 하자.match() 함수의 특징자바스크립트의 match() 함수는 문자열 메서드 중 하나로서, 대상 문자열 내에서 정규 표현식과 일치하는 부분을 찾아주는 기능이다. match() 함수는 주어진 문자열에서 정규 표현식과 일치하는 부분을 배열로 반환하는데, 이 때, 정규 표현식을 매개변수로 .. 2024. 5. 7.
자바스크립트 화살표 함수란 무엇인가 자바스크립트의 화살표 함수는 함수를 정의하는 또 다른 방법 중 하나다. 보통 익명 함수라고도 한다. 이름에서도 유추할 수 있듯이 함수 형태는 이름이 없고, 중간에 화살표를 사용해 간결하게 작성하는 방법이다. 화살표 함수는 () => {} 와 같은 형식으로 작성이 되며, 기존의 함수 작성 방법보다 훨씬 더 간결한 형태라고 할 수 있다.화살표 함수는 과연 쓸만한 함수인지... 함수의 특징과 활용 사례 등을 살펴보자.화살표 함수 (익명 함수)화살표 함수는 ES6(ECMAScript 2015)에서 도입된 새로운 형태의 함수 문법이다. 기존의 함수 형태보다 표현식이 더 간결하고 가독성이 좋으며, 주로 콜백 함수나 간단한 함수를 작성할 때 많이 사용된다.문법화살표 함수는 () => {} 형태로 작성되며, 화살표 왼.. 2024. 5. 5.
자바스크립트 reduce() 함수의 특징과 활용 오늘은 자바스크립트의 reduce() 함수에 대해 정리해보려고 한다. reduce() 함수는 배열을 순회하면서 요소의 값을 누적시켜 합을 구할 수 있도록 도와주는 기능이다. 일반 for문을 사용하여 누적을 해도 되지만 누적을 위해 만들어진 함수라고 하니 어떤 특징과 장점들이 있는지 알아보자.reduce() 함수의 개념과 특징자바스크립트의 reduce() 함수는 배열의 각 요소에 대해 지정된 콜백 함수를 실행하고, 그 결과를 하나의 값으로 축약하는 함수다.reduce() 함수는 배열을 순회하면서 각 요소를 처리하고, 그 결과를 누적하면서 최종값을 반환하는 구조다.함수의 특징누적된 반환값reduce() 함수는 배열의 각 요소에 대해 지정된 콜백 함수를 지정하고, 그 결과를 누적하여 하나의 값으로 반환한다.초.. 2024. 4. 29.
자바스크립트 filter() 함수의 특징과 활용에 대한 내용 자바스크립트를 개발하다 보면 배열 객체를 다루는 일이 정말 많다. 배열 안의 특정 요소를 필터링하거나 특정 조건에 부합하는 요소만 따로 추출해 처리해야 하는 경우가 많다. 이러한 상황에 적합한 함수가 바로 filter() 함수다. 함수 명 그대로 필터를 시켜주는 기능을 하는데, 배열을 기준으로 특정 조건에 부합하는 요소만 모아서 반환시켜 주는 방식이다.그렇다면 filter() 함수는 어떤 특징이 있는지, 어떤 상황에 활용되는지 자세히 살펴보도록 하자.filter() 함수의 개념과 특징filter() 함수는 배열의 각 요소에 대해 제공된 함수를 호출하고, 그 함수가 true를 반환하는 요소로 새로운 배열을 생성해 반환하는 기능이다. 이 함수는 주어진 조건에 따라 배열을 필터링하는 데 유용하게 사용된다.조건.. 2024. 4. 27.
자바스크립트 some() 함수의 개념과 사용 방법 자바스크립트를 개발하다 보면 for문을 사용하여 로직 처리해야 하는 경우기 정말 많다. 기본 for문을 제외하고 정말 다양한 종류의 반복문 처리하는 기능이 있는데, 오늘은 그중에서 some() 함수에 대해서 정리해보려고 한다. 배열 객체를 기준으로 루프를 돌며 반복 처리한다는 개념은 같지만 내부적으로 처리되는 방식이 조금 다르다는 점이 있다. some() 함수는 어떤 차이가 있는지 개념과 특징, 사용법 등을 알아보자.some() 함수의 개념과 특징some() 함수는 배열의 각 요소에 대해 제공된 함수를 호출하고, 그 함수가 적어도 하나에 대해 true를 반환할 때 반복문을 종료하고 최종 결괏값을 true로 반환하게 된다. 그렇지 않으면 마지막 요소까지 확인하면서 true가 없다면 false를 반환한다.조.. 2024. 4. 26.