프로그래머스 데브코스 76일차 with. TS 웹 풀스택

📚요약

지난 시간에 이어 프로젝트를 진행하겠습니다. 오늘은 도서 상세 페이지를 구현해 보겠습니다.

 

📖Book Store 프로젝트

도서 상세 페이지 화면은 상품의 상세 내용 보여주기, 좋아요 기능, 장바구니 추가 기능을 구현해야 합니다.

 

📄상세 내용 보여주기

상세 내용은 단순하게 서버에서 받아온 정보를 화면에 그려주는 것입니다. 이때 중요한 포인트는 디자인과 같은 화면으로 나타내는 것도 나타내는 것이지만 포맷을 재사용이 가능하도록 분리해 주는 작업입니다.

🍯tip! 날짜 포맷 함수를 직접 만들어도 좋지만, 기존에 있는 라이브러리 dayjs를 사용해 보면 좋습니다. 날짜 포맷부터 다양한 유틸리티 함수를 제공합니다.

📄좋아요 기능

좋아요 기능은 쉽게 생각되는 일반적인 좋아요 기능과 동일한 기능입니다. 해당 기능을 구현하는 방법은 두 가지로 나뉠 수 있습니다.

1. 서버에게 요청하고 응답받은 것으로 화면을 그려주는 것
2. 서버에게 요청하면서 응답을 예상해서 화면에 그려주는 것

서버가 응답이 아주 빠르다면 1번 방법으로 구현해도 큰 문제는 없을 것입니다. 하지만 그렇게 되면 사용자 경험(UX)적인 측면에서 불편해질 수 있습니다. 해당 측면을 고려해서 2번 방법으로 구현해 보겠습니다.

 

📑낙관적 업데이트(Optimistic Updates)

앞서 말한 2번 방법을 낙관적 업데이트라고 부르고, 이는 단순한 결과를 당연히 성공할 것이라고 생각해서 결과를 미리 보여주는 것을 말합니다. 이름을 보면 어느 정도 예상을 할 수 있듯이 낙관적 업데이트는 좋아요, 장바구니 추가와 같은 즉각적으로 반응되면 좋은 곳에 사용할 수 있습니다.

🍯tip! 컴포넌트 분리.  컴포넌트 분리는 고민이 많이 되는 부분입니다. 쉽게 구분하는 방법은 중복되는 렌더링 부분(중복되는 tsx 코드)을 컴포넌트로 작성하는 것이다. 컴포넌트로 만들고 나서는 다양한 곳에서 사용할 수 있도록 외부에서 컨트롤할 수 있도록 만들어주는 것 또한 중요하다.

 

📑Styled Components

styled 뒤에 태그가 아닌 컴포넌트를 입력하면 해당 컴포넌트로 직접 바꿀 수 있다.

import Button from './common/Button.tsx';

const LikeButton = ()=>{
  return (
  	<LikeButtonStyle>
      ...
    <LikeButtonStyle/>
  );
}

const LikeButtonStyle = styled(Button)``

위 코드는 아래 코드처럼 동작한다.

import Button from './common/Button.tsx';

const LikeButton = ()=>{
  return (
  	<Button>
      ...
    <Button/>
  );
}

const LikeButtonStyle = styled(Button)``​

📄장바구니 추가 기능

장바구니 화면을 임시로 만들어 두고 장바구니를 추가하면 동작할 것을 예상해서 만듭니다.

🍯tip! styled component props로 boolean 타입을 사용하는 경우 에러가 발생한다. 이는 다른 props와 구분할 수 없어 에러가 발생하는데 이를 해결하기 위해 네이밍을 살짝 변경해 준다. ex) added → $added

 

자세한 코드는 Github에 있습니다.

ProgrammersSchool/FE-BOOKSTORE/bookstore at main · nulzi/ProgrammersSchool

 

❔▪❓

Q. 로그인을 한 후에 새로고침을 하지 않으면 로그인을 하지 않은 상태로 유지가 되는데 왜 그런 것인가? 어떻게 해야 하는가?

A.

 

Q. Styled Components를 사용하고 있는데 스타일을 작성할 때 vscode-styled-components extension을 통해 스타일은 편하게 작성하고 있다. 하지만 내부에서 js를 활용하는 부분에서 보조가 부족한데 이를 도와주는 extension은 없는가?

A. 

 

다음 시간에 계속...

 

출처 & 참고

문윤기 강사님의 강의

What Are Optimistic Updates?, Kyle DeGuzman, 2024.07.22