[240910] 오로라 스킨 스터디, web component, template, slot, handlebarsJS (feat. 오로라 스킨 리액트 컴포넌트를 사용하면, 좀 더 나은 리액트 코드를 짤 수 있을 것 같다)

좋았던 점

• K 사 프로젝트를 하게 되면, 오로라 스킨에서 web component, template, slot, handlebarsJS 라는 개념에 대해 배울 수 있는 기회가 될 것 이라는 점

예시 코드를 통해서 느낀 '오로라 스킨 react' 에서는, 배우고 싶은 코드들이 많이 녹아있었다.

어떻게 바로 여기로 디버깅 하러 온거지

storybook 에서, currentTab 에 값을 넣으면 -> 위에 처럼 변해

storybook 에서, tabs 에 대한 설명을 넣으려면 어떻게 해야 하지?

'storybook 에서, currentTab 에 값을 넣으면 -> 위에 처럼 변해' 라는 글을 넣어주고 싶은데

[주의사항] 1. build 명령어만 유효함! (#⭐⭐⭐⭐⭐)

https://youtu.be/4zeusLdLizs?t=784

[주의사항] 2. dist 폴더 (#⭐⭐⭐⭐⭐)

https://youtu.be/4zeusLdLizs?t=784

- dist 폴더에 떨어져야 함 
- dist 하위에 있는 'mobile', 'pc' 라는 이름도 동일해야 함 
- 둘 중 하나만 존재해도 됨 
    - 다만, 내가 제공하고자 하는 게 pc 라면, pc 폴더는 있어야 한다는 것. 

• production 모드와 개발 모드에서 설정하는 값이 달라짐 (#❓❓❓❓❓ 이게 무슨)
  

[주의사항] 3. 모바일에서는 m 을 뒤에 붙여줘야 함 (#디바이스에 따라, 실제 모바일로 변경하게 하는 코드)

• production 모드 일 때만 '/m' 을 추가 (#❓❓❓❓❓❓)

  왜냐면 
  1) 호스팅시, 경로에, m 이 추가 됨 -> so, production 모드일 때 'm' 을 추가 
  2) 개발 모드 일 때는, dist 가, 바로 root 로 떨어지기 때문에, 'm' 을 넣지 않아도 됨
  

![Image](https://i.imgur.com/am5ztdD.png)





### '회원, 비회원' 최근 본 상품 조회하기

```bash
선택해야 하는 카테고리가 
1) 샵바이 shop API 
2) product 
3) 그 다음 api 들 

-> 근데, 1번, 2번, 을 어떻게 구분하지 (#❓❓❓❓❓)

[코드 base] 1) 아 이렇게 그냥, 스크롤 올라가는 함수 같은거는 util 에서 가져오는구나 2) css 는 그냥 import 해오는 구나 -> 그래서, 로직만 깔끔하게 보이도록

[궁금한거] router 에서 lazy 로 쓰여져 있는거 이게 뭐지?

• 이렇게 lazy 로 되어 있는게 뭐지? (https://youtu.be/TXZfSGfn1RE?t=178)
  

[궁금한거] 왜 SideNav 폴더를 만들어서, 다시, export 하고 import 하는거지

(https://youtu.be/TXZfSGfn1RE?t=382)

[오, 멋진거] modal 코드를 이렇게도 짤 수 있네! (#근데, 내가 (prev) 이 문법을 아직도 잘 모르는거 같음) (#⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐)

(https://youtu.be/TXZfSGfn1RE?t=450)

오로라 스킨도, '공통 컴포넌트' 사용하는 느낌. - 왜냐면, 1) 정해진 거대한 흐름중 하나인 VisibleComponent 를 쓰는 것 2) 그 하위 코드로 TruthyComponent 속성을 쓰고 3) TruthyComponent 속성 에 바인딩 하는 컴포넌트가 TitleModal 이라는 것 -> 결국, 1) 어떤 상황에서 VisibleComponent 를 쓰는지 2) VisibleComponent 가 갖고 있는 속성(interface) 이 뭔지 확인하고 3) 추가 depth 컴포넌트의 interface 를 파악하는 구조 (#⭐⭐⭐ 여기에서 신기한 것은, 'interface' 를 파악한다고 말하는 부분)

그래서 우선, interface 중 children, text, className 을 챙겨서 부모 컴포넌트에서 작성해줌


[궁금증] 근데, 이 i 라는게 뭐지?

그래서, 최종적으로, 이렇게 코드가 짜짐

최근 본 상품은 여러 컴포넌트에서 접근할 수 있어야 하니까, 'provider' 를 만든다. (#⭐⭐⭐⭐⭐) (#❓❓❓❓❓❓ 멋진데?) (#⭐⭐⭐⭐⭐ 와 이런걸 그냥 가볍게 짜는게 멋진데?)

(https://youtu.be/TXZfSGfn1RE?t=781)

- 보통은 useReducer 를 만들어서 provider 를 만든다? 
    - 그런데 지금은,
        - const RecentProductStateContext = createContext(null) 이걸 하고 
        - <RecentProductStateContext.Provider> 이걸 써서 만드네? 

- 바로 사용할 수 있게, custom hook 을 만들어준다? 
    - 이렇게 말하고 짠게 useRecentProductStateContext 

근데, 이외의 것들도 넘어갈 수 있게, 왜 아래 처럼 추가해주는거지? (#❓❓❓❓❓❓ #뭐지? 근데 왜 멋지지? 왜 이걸 이해하고 싶지?)

[state 만들기] 응? 상태 관리를 Map 으로 해준다고? useMemo 도 사용한다고? 이것도 멋진데? (#⭐⭐⭐⭐⭐)

const [productMap, setProductMap] = useState(new Map())

const recentProducts = useMemo( () => {
    // 1. 만약, productMap 의 size 가 없으면 -> 빈 배열 return 해줘
    if(!productMap.size) return []

    return [...productMap.values()]; // 그게 아니면, productMap 에서 values 를 꺼내줘
    }, [productMap])

(이렇게 만들고, 한번에 내려준다구?)

(여기까지를 '[state 만들기]' 라고 정의했다. 그 다음 'action' 을 만든다고 했다. 이 세부 정의를 내가 할 수 있어야 한다. #⭐⭐⭐⭐⭐)

[action] fetchHttpRequest 를 단독 사용하거나, 고도화 해서 사용할 수 있음.

1. mall 이 비어있으면, api 를 호출 하지 않아도 돼
   

2. fetchHttpRequest (utils 안에 있음)

3. error 가 발생하면 -> 오류가 error boundary 컴포넌트로 흘러간다. 여기에서 공통으로 캐치해서 사용 가능 (#⭐⭐⭐ 이러한 흐름을 코드 숲에서 어떻게 한꺼번에 알지 음.)
   
   

이렇게 해서 update 해서 쓰면 됨 (#😢😢😢😢😢 와 이 코드도 이거 진짜)

와... localStorage 에서 가져올 때, JSON.parse 하는 것도 바로 하네... 멋지다. 그리고, ...productMap.keys() 이렇게 해서 들어가네? 이건 또 뭐지 (#⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐)

productMap 이 productNo 를 갖고 있으면, 굳이, api 를 호출할 필요가 없다는 로직을 여기에서 어케 생각해내지. 그것도 이렇게 간단하게.

외부에 전달해준 값은, value 에 추가한다고?

두 컴포넌트에서 '최근 본 상품 기능' 이 필요하니, 이걸 provider 로써 제공 (#⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐⭐)

(이게 근데, 왜, 작동하는거지? | 왜 작동하지? | 멋진데 ⭐⭐⭐⭐⭐⭐⭐)

그리고 다시, ProductDetail 로 가서, productNo 가 0 보다 클 때, 실행되게 설정? (#⭐⭐ 이건 안 보면 모르는거 아니야? 이 flow 를 어떻게 다 알지)

(이렇게 추가해주는 건 또 뭐지)

이렇게 또 뭔가를 만들어주는데....... 이걸 해야 되는건가

아쉬운 점

• 구현해야 하는 기술에 비해, 현재 기간이 너무 짧다.
• 실제 K사 프로젝트는 '바닐라 자바스크립트' 로 되어 있다는 점.

나의 git 실력이 유감없이 노출되었다... 공부를 하자.

프로젝트 패치 받기... 내 git 수준....

• 샵바이 개발 가이드에서 git stash 가 나옴.

• 임시 저장소 에서, git remote add upstream https://skins.shopy.co.kr/shopby/aurora-skin.git 이걸 사용한다는 건 무슨 의미지?

  그냥, 현재의 로컬 temp 저장소랑 
  원격 저장소 주소 'https://skins.shopy.co.kr/shopby/aurora-skin.git' 를 연결하고 
  이름을 upstream 으로 짓겠다는 의미?  

• 받아온 걸 이렇게 확인하는 구나.

• 응? 받아온 걸 fetch 를 사용해서 받아온다구? (#❓❓❓❓❓ 이게 진짜 뭐지 #rebase 같은거 없이?)

• fetch 이후 바로 merge 를 한다고???????
  

• 그러면, incoming change 랑, current change 이게 뭐가 다른걸까나
  

• 충돌 해결하고 패키지 설치 -> 이건, yarn 으로 오캐이

• 그 다음 바로, temp 에 push 를 한다고? rebase 같은거 없이?
  

시도해볼 것

• 인덴트 코퍼레이션 여기 어때 (#⭐⭐⭐⭐⭐)
  

오늘 추가로 공부한 것 기록

샵바이 프로젝트 켜기

package.json 에서 serve 실행시 실행되는 디렉토리가 --baseDir=pc 이렇게 설정하니 됨 | --baseDir='pc' 이렇게 세미콜론을 넣으니 안 됨 (#✅세미 콜론이 들어가 있었음.)

작동하는 버전

template 태그 관련 예시

• https://chatgpt.com/share/5349ee21-63cb-4e58-ade8-00f921ce133f

1. template 태그를 html 에서 쓴다.

   <!DOCTYPE html>
   <html lang="en">
   <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Example: shopby-partials</title>
   
   <!-- ⭐⭐⭐ -->
   <template shopby-partials="partials/common-meta.html" shopby-partials-js="partials/common-meta.js"></template>
   </head>
   <body>
   <h1>Welcome to the Example Page</h1>
   
   <script src="main.js"></script>
   </body>
   </html>

web components

아, 이게 web components 구나

• https://developer.mozilla.org/en-US/docs/Web/API/Web_components

HandlebarsJS

• https://handlebarsjs.com/guide/#what-is-handlebars 를 사용하는구나
  

커스텀 엘리먼트

1) 예시 코드

// 1) 커스텀 엘리먼트 정의하기
    class ProductKeyword extends HTMLElement {
    connectedCallback() {
        this.innerHTML = `
        <div class="product-list__search-keyword-wrap">
            <em class="product-list__search-keyword">${this.getAttribute('keywords')}</em>
            <span>검색결과</span>
        </div>`;
    }
    }

    // 'product-keyword' 라는 커스텀 태그 정의
    customElements.define('product-keyword', ProductKeyword);=

2) 커스텀 엘리먼트 HTML 에서 사용하기 
    <product-keyword keywords="노트북"></product-keyword>