(프로젝트) 쇼핑몰 만들어보기

이번주 월요일부터 목요일까지 4일동안 '0' 에서 혼자서 쇼핑몰페이지를 만들어보았다.
실제로 해보니 왜 프로젝트 해봐야 하는지 뼈저리게 느꼈다.

알고있던 개념이라고 생각했지만 실제로 바로 코드가 안쳐져서 애먹는 경우도 많았고,
여러번 삽질을 해봐야지 그제서야 이해가 되는 경우가 많았다...
4일동안 순차적으로 어떻게 진행했는지는 다음 포스팅에서 올릴거고  (싸피 에세이 써야하니깐...ㅎ)
일단 오늘 4일차에 뭘했는지 적어보려고 한다.

일단 내가 구현한 쇼핑몰!!

5.18 (목) <To do>
1.top buttons는 재사용할 가능성이 있으니 컴포넌트로 만든다

2.상품리스트 페이지에 state를 어떻게 달지?
Top buttons를 클릭할때마다
원래 state가 ‘전체’ 이던 것이, 버튼을 누를때마다 그 Top button의 type을 state로 갖도록 설정해준다

3.메인페이지에서 상품리스트를 렌더링하는 조건과(type이 brand 이면 ~ 속성을 렌더링)
상품리스트페이지에서 상품리스트를 렌더링하는 조건이 다르다(type이 brand인 객체들만 렌더링)
즉, 상품분류 컴포넌트를 따로 만들어야 한다.

4.State와 배열 데이터의 type이 같을 경우에만,
배열데이터의 상품을 내보낸다 (이때, filter와 map 메소드를 각각 사용한다)

5.filteredProducts 라는 변수에 배열데이터의 type과 state가 같은 상품정보들만 담는다
return 문에 가서 filteredProducts 라는 변수에 map 함수를 써서, 모든 원소들을 한번씩 돌면서
상품데이터들이 렌더링 되도록 만든다. 6. 각자 다른 속성을 가지고 있는 객체가 5개이상일 경우에.
자세히 말하자면 category 속성이 달라질때마다 그 객체에 딸린 다른 속성들도 다 다른 경우는?
filteredProducts.map() 내에 if 조건문을 작성하여 product.type에 따라 다른 리턴문을 작성합니다

7. Productlist 페이지 가서 모달창 구현하기

8. topbuttons 를 누를때 스타일이 적용되었으면 좋겠음
문제: 1. 클릭할때 5개가 동시에 스타일적용됨
        2. 같은 버튼을 2번누르면 다시 스타일이 풀림

---

특히, 8번이 가장 골머리였는데, 차근차근 해결해나갔음 => 한마디로, 한번에 공통적인 className이 적용되는 것이 문제임
     각 버튼마다 별도의 isActive 상태를 가지도록 수정해야 한다

문제: 첫번째 클릭때는 렌더링되는 상품에 효과가 적용되고,
        두번째 클릭시에 버튼에 css가 적용된다
<button onClick={()=>{buttontype('All'); buttonActive(0,'All')}}
가설 1. 여기서 두개의 함수가 동시에 작동되려고 하니까 문제가 발생하는거 아닐까?
=> 그래서 각각의 함수를 쓰는 대신에 인자를 두개 받는 새로운 함수를 생성했음
=> 그래도 문제는 풀리지 않았음

가설 2.
buttonActive 함수 내에서 isActive 배열을 업데이트한 후에 setIsActive를 호출해야 합니다. 그런데 그 순서로 안되고 있는 건가?
그러나 현재 코드에서는 setButtonType와 setIsActive를 동시에 호출하고 있기 때문에 상태 업데이트가 제대로 이루어지지 않을 수 있음
=> 해결됨!! 함수 handleButtonClick 가 문제였음

const handleButtonClick = (index, type) =>{
          setButtonType(type)
        if(type === buttonType){
            let newIsActive = [...isActive];
            newIsActive.fill(false);
            newIsActive[index] = true;
            setIsActive(newIsActive); 
        }
    }

여기서 if 조건문을 삭제하고, setButtonType(type); 이 것을 맨 밑으로 추가해줬음!
왜 두번째 클릭시에만 className이 추가되었냐면
첫번째 클릭에서는 buttonType이 업데이트되지 않아서 isActive 상태가 업데이트 되지 않고,
두번째 클릭에 이르러서야 이전에 업데이트된 buttonType과 type이 일치하여 isActive 상태가 업데이트 되었다



질문) 여기선 쓰인 순서대로만 보면 setButtonType(type) 이 제일 위에 있는데, 왜 첫번째 클릭에서는 buttonType이 업데이트되지 않는다고 한거야? state 변경함수가 if 조건문보다 속도가 느려서 그런거야?

gpt 답변) useState의 state 변경함수인 setButtonType 함수는 비동기적으로 동작합니다.
즉, setButtonType 함수를 호출하면 상태 업데이트가 예약됩니다. 
따라서, setButtonType 함수를 호출한 직후에는 ‘buttonType’의 값이 즉시 업데이트 되지 않습니다
첫번째 클릭에서의 동작순서는 다음과 같습니다.
1.  handleButtonClick 함수가 호출됩니다.
2. setButtonType(type) 를 통해 buttonType 값 업데이트를 예약합니다(즉시 변경X)
3.if 조건문을 실행하여 type과 buttonType을 비교합니다.
4.첫 번째 클릭에서는 이전의 buttonType 값과 type 값이 다를 것이므로, 조건문은 false가 됩니다.
5.따라서 isActive 상태가 업데이트되지 않습니다.

두 번째 클릭에서의 동작 순서는 다음과 같습니다:

1. handleButtonClick 함수가 호출됩니다
2. setButtonType(type)을 통해 buttonType 값이 이미 업데이트되었습니다.
3. if 조건문을 실행하여 type과 buttonType을 비교합니다.
4. 이전의 buttonType 값과 type 값이 동일할 것이므로, 조건문은 true가 됩니다.
5. isActive 상태를 업데이트하여 해당 버튼을 활성화합니다.

---

그리고, 마지막으로 pull request 도 해보면서
선생님께 코드 리뷰를 부탁드렸다.


처음으로 솔로 프로젝트 해본 느낀점을 간략하게 말해보자면
<첫 프젝 후, 느낀점 3가지>
1.프로그래머스를 왜하는지 알것 같다 => 기본적으로 코드로직을 짜는 훈련이 필요하다
2.함수에서 인자를 잘 살펴보는 것이 중요하다
3. 어느 구간에서 발생하는 지 찾는 것이 매우 중요하다.
(예를 들어, css 나 className 이 문제면 콘솔창에서 화면을 클릭해본다던지, 렌더링이 안되면 return 문을 잘 살펴본다던지)


나의 원격 레포지토리
https://github.com/jieun9999/fe-sprint-coz-shopping

GitHub - jieun9999/fe-sprint-coz-shopping