Project/codestates-final-project

16일차 / axios, 리벤슈타인 거리 값 추가 및 하이라이트 적용

fullfish 2022. 5. 21. 15:15

한것

프론트에서 axios 분기 만듦

리벤슈타인 거리 값 추가 및 하이라이트 적용

 

axios분기

예시(accountGet)일 경우

export function accountGet(trip_id) {
  console.log('어카운트 겟요청 됨');
  let url = `${endpoint}/account?trip_id=${trip_id}`;
  return axios.get(url, {
    headers: tokenHeader(),
    'Content-Type': 'application/json',
  });
}

불러오는 tokenHeader()

export default function tokenHeader() {
  const user = JSON.parse(localStorage.getItem('user'));
  if (user && user.accessToken) {
    return { Authorization: 'Bearer ' + user.accessToken };
  } else {
    return {};
  }
}

axios요청은 한눈에 알아보기 편하게

따로 폴더를 만든후에 한군데에 모아두었다.

services 폴더에

  account.js

  diary.js

  ...

 

리벤슈타인 거리 값 추가 및 하이라이트 적용

 

레벤슈타인 거리 (Levenshtein Distance)

레벤슈타인 거리란 문자열의 유사도를 검사하는 기본적인 알고리즘으로 편집 거리라고도 부름 a문자열에서 b문자열로 편집할때 몇번의 조작이 필요한지를 도출해낸다 예를들어 '가나다라'와 '

fullfish.tistory.com

정규표현식을 이용한 fuzzy정렬한 데이터에 리벤슈타인 거리 값을 추가해주었다. (중복검사 이후 중복되지않았을때)

그 이유는 리벤슈타인 거리는 오타가 존재하는 값이므로

정규표현식을 이용한 데이터값의 유사도가 리벤슈타인 거리를 이용한 값보다 높으므로

정규표현식 -> 리벤슈타인 순으로 출력되게끔 했다

또한 하이라이트를 적용시켜 줬다.

 

리벤슈타인 거리 

 

16일차 / axios, 리벤슈타인 거리 값 추가 및 하이라이트 적용

한것 프론트에서 axios 분기 만듦 리벤슈타인 거리 값 추가 및 하이라이트 적용 axios분기 예시(accountGet)일 경우 export function accountGet(trip_id) { console.log('어카운트 겟요청 됨'); let url = `${end..

fullfish.tistory.com