TIL :: 최근 본 상품 / 상품상세페이지 찜하기 / CS

최근 본 상품 

웹 스토리지 API 중 하나인 localStorage를 활용하여 비회원도 최근 본 상품 정보가 유지될 수 있게 하여 사용자 경험을 향상시키기 위해 세션 스토리지 대신 로컬 스토리지를 선택했다. 이유는 브라우저 세션이 종료되어도 정보가 유지되기 때문이다. 이렇게 함으로써 빠른 피드백 반응과 수정이 가능해져 개선효과가 뛰어나다. 처음 코드를 작성했을 때, 오류가 났었는데 상황은 이렇다.

 

 const getViewedProduct = () => {
        /** 최근 본 상품 선택자 **/
        const viewedProductList = document.getElementById('viewedProductList');
        /** 최근 본 상품이 없을 때 선택자 **/
        const noViewedProducts = document.getElementById('noViewedProducts');

        const viewedProductsData = localStorage.getItem('viewedProducts');
        const viewedProducts = viewedProductsData ? JSON.parse(viewedProductsData) : [];

        let productListHTML = '';
        viewedProducts.forEach((product) => {
            productListHTML += `
            <li>
                <a href="/product/${product.id}">
                    <img src="${product.product_image}" alt="${product.product_name}">
                </a>
            </li>`;
        });

        viewedProductList.innerHTML = productListHTML;
         // 페이지가 로드되었을 때 최근 본 상품 목록 업데이트
    	getViewedProduct();

 

 

이렇게 작성을 하고 테스트를 할 때 null이 반환 되면서 오류가 나고 값을 잘 불러오지 못했다. 그 이유는 viewedProductsData 변수에서 viewedProducts 라는 키값을 가져오려고 하는데, 사용자가 브라우저를 처음 이용했을 때 viewedProducts 라는 키의 값이 없었기 때문이다. 그 이후에 JSON 으로 넘어가면서 에러가 발생했던 것이였다. 왜냐하면 null은 JSON 문자열이 아니기 때문이다. 그래서 조건을 추가해서 오류를 해결했다. 방법은 아래와 같다.

// 로딩 시 viewedProducts 키가 없으면 빈 배열
    if (!localStorage.getItem('viewedProducts')) {
        localStorage.setItem('viewedProducts', JSON.stringify([]));
    }

 

viewedProducts 라는 키로 저장된 값이 없을 때, 빈 배열을 문자열 형태로 저장하게 하였더니 오류가 해결 되었다. 그리고 추가적으로

최근본 상품을 사이드에서 필요한 사람이 있고 없을 수도 있기에  토글을 추가해 표시 / 숨김도 할 수 있도록 하였다.

const toggleViewedProductsDisplay = () => {
        const viewedProductList = document.querySelector('#viewedProductList');

        // 표시(block) / 숨김(none)
        viewedProductList.style.display =
            (viewedProductList.style.display === 'none') ? 'block' : 'none';
    }

---

상품상세 페이지 찜하기

1. 찜한 목록 불러오기

async getMyPicks(id: number, categoryId: number){
    const picks = await this.pickRepository
        .createQueryBuilder('pick')
        .innerJoinAndSelect('pick.product', 'product')
        .leftJoinAndSelect('product.smallCategory', 'smallCategory')
        .leftJoinAndSelect('smallCategory.middleCategory', 'middleCategory')
        .leftJoinAndSelect('product.productImages', 'productImage')
        .where('middleCategory.largeCategory.id = :categoryId', { categoryId })
        .andWhere('pick.member_id = :memberId', { memberId:id })
        .orderBy({
          'product.createdAt': 'DESC',
          'productImage.position': 'ASC',
        })
        .limit(20)
        .getMany()
    return picks;
  }

  

pick 이라는 별칭으로 쿼리빌더를 생성하고, pick과 product 테이블을 inner join 했다. 그리고나서 각각의 테이블들을 left join하고 해당 결과들을 선택해서 where절을 통해 middleCategory의 largeCategory.id 가 입력받은 categoryId 와 일치하는지 조건을 두었다. 그리고 andWhere을 통해 추가적 조건을 만들고, 그 후에 결과들을 orderBy를 통해 정렬했다.

2. 프론트 코드

async function onPickButtonClick(productId) {
  try {
    const response = await fetch(`/pick/${productId}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    if (!response.ok) {
      throw new Error('찜하기 요청 실패');
    }
    const result = await response.json();

    const piced = result.message === '찜목록에 추가되었습니다.' ? true : false;
    setPickButtonColor(piced);
    alert(result.message);
  } catch (error) {
    console.error(error);
  }
}

함수를 만들어서 주어진 경로에 따라 fetch문을 작성하였다. 그리고 그 결과는 result 라는 변수에다 담았고,

그 밑에는 reuslt의 메세지를 piced 이라는 곳에 담아서 setPickButtonColor 를 통해 true 일때 색상이 생기고 false 일때는 색상이 없어진다. 그리고나서 버튼에 대한 이벤트를 걸어줘야 하는데,

function setPickButtonColor(piced) {
  const lickbutton = document.getElementById('likeColor');
  if (piced) {
    lickbutton.style.color = '#FFBF00';
  } else {
    lickbutton.style.color = '';
  }
}

 

pickbutton.addEventListener('click', () => onPickButtonClick(currentProductId));

이렇게 버튼을 누를때 색상이 들어갈수있게 했다.

---

CS

# TCP 와 UDP에 대해

TCP(Transmission Control Protocol) 란?

TCP는 신뢰성 있는 데이터 전송을 지원하는 연결 지향형 프로토콜이다. 일반적으로 TCP와 IP가 함께 사용되는데, IP가 데이터의 전송을 처리한다면 TCP는 패킷 추가 및 관리를 하게 된다. 연결 지향적인 TCP는 여러 과정을 통해 연결 후 통신을 하는데, 흐름 제어와 혼잡 제어를 지원하며 데이터의 순서를 보장한다. 그럼 위에서 말하는 흐름 제어와 혼잡 제어는 무엇인가 ? 

 

흐름 제어 : 보내는 측과 받는 측의 데이터 처리속도 차이를 조절해줌혼잡 제어 : 네트워크 내의 패킷 수가 넘치게 증가하지 않도록 방지해줌

 

# 특징

• 연결형 서비스로 가상 회선 방식을 제공
• 데이터의 전송 순서 보장
• 데이터의 경계를 구분하지 않음
• 신뢰성 있는 데이터 전송
• UDP보다 전송속도가 느림
• 연결을 설정(3-way handshaking)과 해제(4-way handshaking)

---

UDP(User Datagram Protocol) 란 ?

UDP는 비연결형 프로토콜로써, 인터넷상에서 서로 정보를 주고받을 때 정보를 보낸다는 신호나 받는다는 신호 절차를 거치지 않고 보내는 쪽에서 일방적으로 데이터를 전달하는 통신 프로토콜이다. TCP와는 다르게 연결 설정이 없으며, 혼잡 제어를 하지 않기 때문에 TCP보다 전송 속도가 빠르다. 그러나 데이터 전송에 대한 보장을 하지 않기 때문에 패킷 손실이 발생할 수 있다.

 

#특징

• 비연결형 서비스로 데이터그램 방식을 제공
• 비신뢰성
• 데이터의 경계를 구분
• 패킷 오버해드가 적어 네트워크 부하 감소
• 혼잡 제어를 하지 않기 때문에 TCP보다 빠름
• TCP의 handshaking 같은 연결 설정이 없음

---

@ 요약

TCP는 연속성보다 신뢰성 있는 전송이 중요할 때에 사용되는 프로토콜이며,
UDP는 TCP보다 빠르고 네트워크 부하가 적다는 장점이 있지만 신뢰성 있는 데이터 전송을 보장하지는 않는다.
그렇기 때문에 신뢰성보다는 연속성이 중요한 실시간 스트리밍과 같은 서비스에 자주 사용된다.