[React] 아마존 클론코딩하면서 겪은 에러 정리(리액트깎는 노인님 유튜브 강의)

리액트를 한창 공부할때 유튜브에 따라하면 공부 잘 될것같은 강의가 올라와있길래 날잡고 시도해보았다.

총 7시간 강의인데 나는 왜 몇날 며칠이 걸렸는지,,

아마존 사이트를 클론코딩하는 영상이었는데, 고작 2년전 영상임에도 불구하고 라이브러리가 업데이트되거나 리액트 정책이 바뀌거나 하는 부분들 때문에 검색하는데에도 시간이 꽤나 든 것 같다.

그럼에도 리액트로 개발할 때의 느낌이나 감을 좀 잡을 수 있게 되었고 개발에 대한 막연함?도 해소할 수 있었다.

 

나도 일일이 검색하면서 막히는 부분들을 풀어갔기 때문에 혹여 다른 분들도 공부하다 막히는 부분이 있다면 조금이라두 빠르고 쉽게 해결했으면 하는 마음에서 메모장에 적어두었던 내용들을 올려본다.

 

따라 코딩한 영상▽

https://www.youtube.com/watch?v=b5BH7kPboMk

 

---

1. export
따라했던 강의에는 인텔리제이로 했기 때문에 자동으로 구현되는 문법들이
vsCode에서는 따로 설정하고, 설치하고, import해야 했다

App.js로 import하기 위한 컴포넌트를 export 하기 위해서는
함수를 변수에다가 넣어서 export시켜야 한다.

src에 생성한 [Header.js] 파일 
export const Header = () => {}

App.js로 import
상단에 import {Header} from './Header'; 해주면
App 내부에 <Header /> 컴포넌트를 사용할 수 있다.

그치만 결국 자잘한 에러로 export default Header;
를 사용하게 됨

---

2. img src
이리해보고 저리해봐도 이미지가 안떠서 화딱지가 났는데,
리액트는 또 이미지 처리하는 방법이 따로 있는 것 같더라,,열받앙
몇가지 방법중 하나가 성공해서 공유
public 폴더에 img폴더를 생성한 후 이미지 저장
copy path나 copy relative path로는 뜨지 않던 이미지가
역슬래시를 지우고 슬래시로 바꾸었더니 해결되었다

/img/imgFile.png

이게 뭔차이야 진짜..두통 백슬래시와 슬래시의 용도가 다르고 되도록 정확한 용도로
사용해야된다고는 하나, 그럼 이미지는 왜 안뜨는건데,,

 

---

3. Switch -> Routes

개인플젝하면서 로그인기능때매 서칭하다가 Switch를 보게되었는데
배운적도 없고 해서 최대한 알고있는 걸로 때우고싶어 넘겼다
그리고 오늘 알게된건 react-router-dom이 v6으로 넘어가면서
그냥 Switch가 사라지고 Routes로 바뀌었다는 것,,
+ Routes 안에는 Route만 사용할 수 있다는 것,,, 즉 component 사용이 불가하다.
이제라도 알게되어서 다행이다ㅎㅎ

 

---

4. Link to 역시 Router 밖에서 사용할 수 없었다...
Router 내부에 component를 사용할 수 없어서 Header는 어짜피 제일 윗부분에 위치하니까 Router위로 빼놓았다.
그러나 Header의 로고에 Link to를 이용할 수가 없다는 것을 깨닫고...
Header를 App.js에서 빼고 아예 페이지 전부 위쪽에 컴포넌트를 돌려막기 하려다가
a태그를 쓰면 되지 싶어 그대로 둠..
두개 차이점이 대체 몰까
Link가 더 직관적이고 사용하기 편하다는 생각이 들기도 하고..

>> Link는 정보를 그대로 가지고있어서 다음 페이지에 넘길 수 있지만
a태그는 그러지 못한다. 새로고침 한 것처럼 데이터가 다 날아가서 정보를 넘길 수 없다.
대신 Route태그가 없는 일반 컴포넌트는 Routes 태그 내에서만 사용하지 못할 뿐
Router 바로 아래, Routes 밖에서는 사용이 가능했다! 게다가 Router 내부에서는 Link도 
사용할 수 있는 교집합 같은 공간이 있었다! 이걸 왜몰랐지??!!

npm i react-currency-format
npm i react-currency-format --force (강제설치)

 

---

5. Reduce
배열의 모든 요소에 대하여 콜백함수를 요청하는 함수

export const getBasketTotal = (basket) => 
    basket?.reduce((amount, item) => item.price + amount, 0);

  0: 처음 값
  amount: 초기값이자 아ㅠ으로 축적될 값들이 저장될 인수
  item: 현재의 아이템의 속성이 들어감. item.price: 장바구니 가격

  reduce: 배열의 모든 값을 함산할 때 사용
  basket 배열에서 item의 price를 합산하기 위해 reduce 사용

---

6. optional chain
값이 null이거나 undefined일 때 에러를 반환하지 않도록 검증해주는 것
에러 대신 null 또는 undefined로 반환한다.

 

---

7. 파이어베이스 에러문제는 stackoverflow 참고 짱쉽게 해결!ㅎㅎ!
https://stackoverflow.com/questions/70445014/module-not-found-error-package-path-is-not-exported-from-package/70929981


이번엔 로그인이 안되는 에러
https://velog.io/@fervor_dev/Error-%EC%9D%B4-%EC%8B%9C%EC%8A%A4%ED%85%9C%EC%97%90%EC%84%9C-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%A5%BC-%EC%8B%A4%ED%96%89%ED%95%A0-%EC%88%98-%EC%97%86%EC%9C%BC%EB%AF%80%EB%A1%9C-%ED%8C%8C%EC%9D%BC%EC%9D%84-%EB%A1%9C%EB%93%9C%ED%95%A0-%EC%88%98-%EC%97%86%EC%8A%B5%EB%8B%88%EB%8B%A4

---

 

8. useHistory는 useNavigate로 변경되었다!! 구만바꿔!!

 

 

---

9.
npm i @stripe/stripe-js --force
npm i @stripe/react-stripe-js

npm i axios

뭐만 설치하려고만 하면 아아주 에러가 나왔는데 찾아보니 npm 버전문제일수도,,?
Conflicting peer dependency라고 자꾸 뜨는데 아마도 react-currency-format 때문일 것이라
강력하게 추측중



npm i express
npm i cors : 도메인 이름이 서로 다른 사이트간 api 요청을 할 때 
허락된 사이트만 정보가 오갈 수 있도록 허용 (권한 부여)
그렇지 않은 사이트는 접근하지 못하도록 한다.

firebase emulators:start

---

10. 와!!!이건진짜어려웠다!!!
useStripe를 사용해서 결제기능을 구현하려 했는데 계속해서 
Error: Could not find Elements context; You need to wrap the part of your app that calls useStripe() in an provider
가 뜨면서 화면출력이 안되었다.

오타가 있나 싶어 찾아보았는데 그건 아니었고 역시나 stackoverflow에서 답을 찾을 수 있었
즉 stripe promise 객체는 Elements로 wrapped해야된다는 뜻이었다.
그래서 다시 App.js파일로 돌아와서 stripePromise를 element로 받는 Router를 수정했다.
바뀐 Router-dom 문법때문에 여간 성가신것이 아니다.
Uncaught Error: [Elements] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
이 에러를 피하기 위해서 원래 강의에 나와있는 문법은 이거지만
<Route path="/payment">

                        <Header/>
                        <Elements stripe={promise}>
                            <Payment/>
                        </Elements>

                    </Route>
이거를 처음에는 
          <Route path="/payment" element={ <Payment stripe={promise} />}
이렇게 써서 그냥 props로 가져갈 수 있도록 했는데
Elements로 감싸야한다그래서

          <Route path="/payment" element={
            <Elements stripe={promise}>
              <Payment />
            </Elements>
          } />

이런식으로 바꿔주었더니 출력이 된다ㅠㅠㅠ
에러가 계속 뜨고있기는 한데,, 일단 출력이 된것만으로도 만족이다ㅠㅠ
뭔가 계속 쉬운길을 돌아가고 있는 느낌!

---

11. npm install moment (현재시간)

---

>> 당시 적었던 메모
이거하면서 리액트에 대한 이해도가 높아짐.
라우터 어려웠는데 대강 이해됨
화면구성은 여러번을 해봐도 새롭고 신기하다. 더 많이 해봐야하나
디자인은 자신이 없는데,,

Error - 이 시스템에서 스크립트를 실행할 수 없으므로 파일을 로드할 수 없습니다.

 

 

 

Error - 이 시스템에서 스크립트를 실행할 수 없으므로 파일을 로드할 수 없습니다.