[Front-end] 개발자 공부

[개발 공부 87일차] replace(), JWT, 유닛 테스트와 에러 모니터링

MOLLY_ 2024. 8. 20. 00:06
728x90

<목차>
1. replace() 메서드
2. JWT | Access Token과 Refresh Token의 존재 이유

3. JWT | Access Token과 Refresh Token의 개념과 관리 전략
4. 쿠키, 세션, 토큰의 개념
5.
유닛 테스트의 필요성
6.
프론트엔드 에러 모니터링 및 로그 데이터 수집의 필요성

 

 

1. replace() 메서드

: 문자열에서 특정 부분을 다른 문자열로 교체하는 데 사용

원본 문자열을 변경하지 않고, 변경된 새로운 문자열을 반환. replace()를 활용하면 문자열의 특정 부분을 효율적으로 대체할 수 있음

 

 

기본 사용법

const str = "Hello, world!";
const newStr = str.replace("world", "JavaScript");
console.log(newStr); // "Hello, JavaScript!"

 

  • 첫 번째 매개변수
    • 문자열: 단순 문자열을 교체할 때 사용
    • 정규 표현식(Regular Expression): 보다 복잡한 패턴 매칭과 대체를 위해 사용
      • /g 플래그를 사용하면 모든 일치 항목을 대체 가능
  • 두 번째 매개변수
    • 문자열: 교체할 텍스트를 직접 지정
    • 함수: 일치하는 항목마다 실행되어 반환값으로 교체할 내용을 동적으로 생성 가능

 

 

*정규 표현식과 사용 예시

👾 정규 표현식(regular expression, 간단히 regexp 또는 regex)

: 특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용하는 형식 언어

const str = "Hello, world! Hello!";
const newStr = str.replace(/Hello/g, "Hi");
console.log(newStr); // "Hi, world! Hi!"

 

 

함수를 사용한 교체 예시

const str = "가격은 100 달러입니다";
const newStr = str.replace(/\d+/g, (match) => `$${match}`);
console.log(newStr); // "가격은 $100 달러입니다"

 

 

주의사항

  • replace() 메서드는 원본 문자열을 변경하지 않고, 항상 새로운 문자열을 반환
  • 문자열을 여러 번 교체하려면 /g 플래그를 사용해야 함

 

 

2. JWT | Access Token과 Refresh Token의 존재 이유

  • Access Token: 주로 짧은 기간 동안 클라이언트가 서버에 접근할 수 있는 권한을 인증하는 데 사용
    • 짧은 유효 기간으로 보안이 강화되며, 서버는 이를 통해 사용자의 요청을 인증함
  • Refresh Token: Access Token이 만료되었을 때 새로운 Access Token을 발급받기 위해 사용
    • 보통 더 긴 유효 기간을 가지며, 서버에서 사용자 인증을 유지할 수 있는 방법을 제공함
    • 이를 통해 사용자 경험을 개선하고, 지속적인 인증을 유지할 수 있음

 

 

3. JWT | Access Token과 Refresh Token의 개념과 관리 전략

Access Token과 Refresh Token의 개념

  • Access Token: 사용자의 인증 정보가 담긴 JSON Web Token(JWT)으로, 서버에 요청할 때 헤더에 포함하여 전송됨
    • 짧은 유효 기간을 가지며, 만료 시 재발급이 필요
  • Refresh Token: Access Token을 재발급받기 위한 Token
    • 클라이언트에서 보관하고 있다가 Access Token이 만료되면 이를 서버로 보내 새로운 Access Token을 발급받음
    • 보안상 중요하기 때문에 안전하게 관리되어야 함

 

 

관리 전략

  • Access Token은 짧은 유효 기간을 설정하여 도난 시 피해를 최소화함
  • Refresh Token은 장기간 저장해야 하므로, 서버 또는 보안이 강화된 저장소에 보관함
  • Refresh Token은 최소한의 정보만 담고 있어야 하며, 도난 시 큰 피해를 방지하기 위해 재발급 시에 여러 가지 보안 절차를 거쳐야 함

 

 

4. 쿠키, 세션, 토큰의 개념

  • 쿠키: 클라이언트에 저장되는 작은 데이터 조각으로, 서버가 사용자를 식별하거나 세션을 유지하는 데 사용
  • 세션: 서버에서 관리하는 사용자 상태 정보를 말하며, 클라이언트의 요청마다 서버에 저장된 세션 데이터로 사용자를 인증
  • 토큰: 인증 정보가 담긴 암호화된 문자열로, 클라이언트가 서버에 인증 정보를 전송하는 데 사용. JWT는 이러한 토큰의 한 형태임

 

 

각 토큰은 어디에 저장해야 안전한가?

  • Access Token: 일반적으로 클라이언트의 메모리나 안전한 로컬 저장소에 저장. XSS 공격에 노출되지 않도록 로컬 스토리지보다는 메모리에 저장하는 게 더 안전
  • Refresh Token: 보안이 강화된 장소에 저장해야 하며, 서버에 보관하거나 클라이언트에서 사용하는 경우 보안된 쿠키에 저장하는 게 좋음

 

 

쿠키에 저장할 때 httpOnly, secure 옵션의 의미

  • httpOnly: 이 옵션을 사용하면 자바스크립트에서 쿠키에 접근할 수 없게 되어 XSS 공격으로부터 보호 가능
  • Secure: 이 옵션을 사용하면 HTTPS 연결에서만 쿠키가 전송되도록 설정할 수 있어 중간자 공격을 방지 가능

 

 

5. 유닛 테스트의 필요성


유닛 테스트: 코드의 작은 단위(보통 함수 또는 메소드)를 독립적으로 테스트하여 해당 단위가 정확하게 동작하는지 확인하는 과정
. 즉, 전체 코드 중 작은 부분을 테스트하는 것

 

 

유닛 테스트가 중요한 이유

  • 버그 조기 발견: 코드 작성 후 바로 테스트를 통해 오류를 발견할 수 있어 수정 비용 절감 가능
  • 리팩토링 지원: 코드 변경 시 테스트를 통해 기존 기능이 정상적으로 동작하는지 확인할 수 있어, 리팩토링의 부담을 줄일 수 있음
  • 코드 품질 향상: 테스트 가능한 코드를 작성하려면 자연스럽게 *모듈화되고, 가독성 있는 코드를 작성하게 돼 코드 품질이 향상됨

👾 모듈화

: 큰 코드를 작은 조각의 코드로 나누어 다루기 쉽도록 하는 과정 (작게 나누어진 각 부분을 '모듈'이라고 함)

 

 

 

주요 유닛 테스트 라이브러리

  • JUnit: Java용 유닛 테스트 프레임워크로, Java 개발자들 사이에서 널리 사용됨
  • pytest: Python용 테스트 프레임워크로, 간결하고 강력한 테스트 기능을 제공
  • Jest: JavaScript와 React 애플리케이션의 테스트를 위해 널리 사용되는 프레임워크로, 강력한 기능과 성능을 제공
  • RSpec: Ruby 언어용 테스트 프레임워크로, BDD(Behavior Driven Development)를 지원

 

 

Reference

 

 

6. 프론트엔드 에러 모니터링 및 로그 데이터 수집의 필요성

프론트엔드 에러 모니터링의 필요성

  • 사용자 경험 개선: 실시간으로 발생하는 에러를 모니터링하여 사용자에게 발생하는 문제를 신속하게 파악하고 해결 가능
  • 빠른 문제 해결: 에러 발생 원인을 빠르게 파악하여 문제를 해결할 수 있어, 사용자 이탈을 줄이고 서비스 품질을 유지 가능
  • 지속적인 개선: 모니터링 데이터를 분석하여 반복적으로 발생하는 문제를 해결하고, 프론트엔드 코드의 안정성을 향상 가능

프론트엔드 에러 모니터링을 통해 시스템의 신뢰성과 사용성을 높이고, 사용자가 겪을 수 있는 문제를 최소화할 수 있다.

 

 

로그 데이터 수집의 필요성

  • 트렌드 및 패턴 분석: 로그 데이터를 통해 사용자 행동과 시스템 동작의 패턴을 분석하여 성능을 최적화 가능
  • 보안 및 감사: 로그는 시스템에서 발생하는 다양한 이벤트를 기록하여 보안 문제를 추적하거나 감사 목적으로 사용 가능
  • 문제 진단: 시스템에서 발생하는 문제의 원인을 파악하고 진단하기 위해 로그 데이터를 활용할 수 있음. 이를 통해 문제 해결 시간을 단축할 수 있음

 

 

728x90