<목차>
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
- [Velog] JiwonMoon - 유닛 테스트(Unit Test), 통합 테스트(Integration Test), 기능 테스트(Funcional Test)란? (feat.JUnit5, AssertJ) https://velog.io/@mon99745/%EC%9C%A0%EB%8B%9B-%ED%85%8C%EC%8A%A4%ED%8A%B8Unit-Test-%ED%86%B5%ED%95%A9-%ED%85%8C%EC%8A%A4%ED%8A%B8Integration-Test-%EA%B8%B0%EB%8A%A5-%ED%85%8C%EC%8A%A4%ED%8A%B8Funcional-Test%EB%9E%80
6. 프론트엔드 에러 모니터링 및 로그 데이터 수집의 필요성
프론트엔드 에러 모니터링의 필요성
- 사용자 경험 개선: 실시간으로 발생하는 에러를 모니터링하여 사용자에게 발생하는 문제를 신속하게 파악하고 해결 가능
- 빠른 문제 해결: 에러 발생 원인을 빠르게 파악하여 문제를 해결할 수 있어, 사용자 이탈을 줄이고 서비스 품질을 유지 가능
- 지속적인 개선: 모니터링 데이터를 분석하여 반복적으로 발생하는 문제를 해결하고, 프론트엔드 코드의 안정성을 향상 가능
프론트엔드 에러 모니터링을 통해 시스템의 신뢰성과 사용성을 높이고, 사용자가 겪을 수 있는 문제를 최소화할 수 있다.
로그 데이터 수집의 필요성
- 트렌드 및 패턴 분석: 로그 데이터를 통해 사용자 행동과 시스템 동작의 패턴을 분석하여 성능을 최적화 가능
- 보안 및 감사: 로그는 시스템에서 발생하는 다양한 이벤트를 기록하여 보안 문제를 추적하거나 감사 목적으로 사용 가능
- 문제 진단: 시스템에서 발생하는 문제의 원인을 파악하고 진단하기 위해 로그 데이터를 활용할 수 있음. 이를 통해 문제 해결 시간을 단축할 수 있음
'[Front-end] 개발자 공부' 카테고리의 다른 글
[개발 공부 88일차] 함수형 코딩 | 계층형 설계 II (0) | 2024.08.26 |
---|---|
[프로그래머스 Lv.2] 피보나치 수 | 개념 및 풀이 (JS) (0) | 2024.08.20 |
[개발 공부 86일차] 함수형 코딩 | 방어적 복사 (2) | 2024.08.19 |
[개발 공부 85일차] 함수형 코딩 | 더 좋은 액션 만들기 (0) | 2024.08.05 |
[개발 공부 84일차] ~(Bitwise NOT), ~~, >>> 연산자 (2) | 2024.07.24 |