2024-12-10.md

📝 Today I Learn

🗓️ 날짜: 2024-12-10

🙏🏻 스크럼

• 학습 목표 1 : 프론트엔드 JS 코드 - Fetch (게시글 상세 조회)

# Fetch

| URL 특정 경로 값 추출

// 현재 URL에서 postId 추출
const urlSegments = window.location.pathname.split('/');
const postId = urlSegments[urlSegments.length - 1];

• window.location.pathname: 현재 페이지 경로 반환 (.com 뒷 부분)
• .split('/'): 경로 문자열을 '/'를 기준으로 나누어 배열로 변환

| Promise를 실패 상태로 전환

.then(response => response.ok ? response.json() : Promise.reject(`서버 에러 발생: ${response.status}`))

// 다른 방법
then(response => {
    if (response.ok) { 
        return response.json();
    } else {
        throw new Error(`서버 에러 발생: ${response.status}`);
    }
})

• Promise.reject(reason): 자동, Promise를 명시적으로 실패 상태로 전환, Promise 체인 내에서 간결하게 실패 처리 (이후 호출되는 catch 블록으로 전달됨)
• throw new Error(): 수동, 실행 중 예외를 발생시키고 Promise 실패로 전환, Promise 체인뿐만 아니라 모든 코드 블록에서 사용 (세부 정보 전달 가능)

| commentId

commentElement.dataset.commentId = comment.id;

• 댓글을 화면에 표시할 때 각 댓글에 고유한 ID를 HTML 요소의 data-* 속성으로 저장 (commentElement라는 댓글 요소에 data-comment-id 속성으로 댓글의 고유 ID를 저장)

| 댓글 삭제 버튼 클릭 이벤트와 댓글 삭제 모달 확인 이벤트 분리

• commentId가 없었을 때는 삭제 버튼 클릭 시 이벤트를 기준으로 해당 댓글을 처리하기 위해 댓글 삭제 모달 확인 이벤트는 댓글 삭제 이벤트 내에 위치했었음
• 또한, 사용자가 모달을 여러 번 열고 닫으면 동일한 리스너가 중첩되어 여러 번 실행되는 문제가 발생할 수 있기에 once: true를 사용했었음
• 그러나 이제는 commentId로 해결이 되기 때문에 이벤트를 아예 분리해버림

| JWT 디코딩

function decodeJWT(token) {
    // JWT 토큰을 디코딩하여 유저 정보를 추출하는 함수
    const base64Url = token.split('.')[1];
    const base64 = base64Url.replace('-', '+').replace('_', '/');
    const decoded = JSON.parse(window.atob(base64));
    return decoded;
}

• JWT는 헤더.페이로드.서명 형태로 나누어져 있음
  • split('.')[0]: 헤더(Header)
  • split('.')[1]: 페이로드(Payload)
    • 사용자나 클라이언트 관련 정보를 담고 있는 부분(사용자 ID, 이름, 토큰 만료 시간 등)
    • base64Url 인코딩된 문자열 (base64의 변형으로, URL-safe(특수 문자가 없는) 형식)
  • split('.')[2]: 서명(Signature)
• base64는 URL에서 사용하기 위해 특정 문자를 변경한 버전 (-를 +로, _를 /로 교체)
• window.atob(base64): 변환된 base64 문자열을 디코딩하여 원본 JSON 문자열로 변환
• JSON.parse(): 디코딩된 JSON 문자열을 실제 JavaScript 객체로 변환
• 이 함수는 JWT를 디코딩해 페이로드 내부 정보를 추출하므로, 로그인 상태 확인, 권한 체크 등에 유용 (토큰 검증은 하지 않으니, 보안을 위해 별도로 서명을 검증해야함)

| 사용자 ID를 JWT 토큰에서 추출

function getLoggedInUserId() {
    const token = localStorage.getItem('authToken'); 
    if (token) {
        const decodedToken = decodeJWT(token);  
        return decodedToken.userId; 
    }
    return null;  
}

• localStorage.getItem('authToken'): 브라우저의 로컬 스토리지에서 authToken이라는 키로 저장된 JWT 토큰을 가져옴

✊🏻 오늘의 도전 과제와 해결 방법

• 도전 과제 1: TIL 작성
• 도전 과제 2: 프론트엔드 JS 코드 - Fetch (게시글 상세 조회)
• 도전 과제 3: 프론트엔드 JS 코드 - Fetch (게시글 추가)
• 도전 과제 4: 프론트엔드 JS 코드 - Fetch (게시글 수정)
• 도전 과제 5: HTTP REST API 수정

💭 오늘의 회고

• 이 정도로 fetch 코드를 작성하고 나니 매커니즘을 깨달은 것 같아서 뿌듯하다. HTTP REST API도 수정하면서 정확한 의도를 알게되었다.

🔗 참고 자료 및 링크

• 게시글 상세 조회 (JS 코드)