코드를 읽는 순차적인 흐름과 오류처리에 관하여 (Cmarket Redux)

코딩 입문자들이 코딩을 어려워 하는 이유는 크게 2가지라고 생각한다

 

첫번째, 긴 코드를 볼때 어디서부터 읽어야 할지 모른다는 점

두번째, 오류가 있을때, 어디서 오류가 생겼는지 모른다는 점

 

이 두가지 원인때문에 몇시간이고 머리를 싸매면서 괴로워하는데,,,

그러다가 번아웃이 쉽게 온다아ㅏ

그리고 나는 코딩을 못하는 구나... 크흡 라고 말하며 좌절감에 눈물을 훔치게 된다.

 

 

이미 코딩을 좀 하는 인간들은 이해를 못하겠지만, 나처럼 아직 노하우를 터득하지 못한 사람들에게

조금이라도 코딩을 수월하게 만들어줄 이야기를 해보려고 한다

 

앞서 두가지 문제를 해결하는 방법은 무엇일까?
첫번째, 긴 코드를 볼때 어디서부터 읽어야 할지 모른다는 점 
=> 순차적으로 읽는다

두번째, 오류가 있을때, 어디서 오류가 생겼는지 모른다는 점
=> 오류를 찾는다

 

 

 

 

 

 

 

먼저, 순차적으로 읽는 방법부터 탐구해보겠다

 

순차적으로 읽기: 큰 껍데기부터 

 

순차적으로 읽는 다는 건 알겠다. (그런데 순차적으로 안 읽히니까 이러고 있는거 아니냐고,,,)

님들 기준에서 순차적으로 읽는다는 것에 대한 의미를 명확히 해보자...

순차적으로 읽는게 뭔데? 한줄한줄 코드를 읽는것?

아니다.

큰 껍데기 부터 읽는 것이다.

그리고 작은 껍데기로 내려 가는 것이다.

 

먼저 가장 큰 껍데기인 index.js 파일을 열어본다. 실제로 렌더링할 컴포넌트인 <App/>이 박혀있다

 

 

 

그럼 다음 껍데기인 App.js 파일을 열어본다

 

 

<Routes> 가 감싸고 있는 두개의 <Route>가 있다.

각각의 <Route>는 <ItemListContainer/>과 <ShoppingCart/> 라는 2개의 컴포넌트를 가지고 있다.

 

 

ItemListContainer에 들어왔다. 쭉 한번 훑어본다. 

handleClick이라는 귀여운 함수가 우리를 반기고 있다 ㅎ

handleClick 아래를 보면 dispatch로 action을 담아서 옮기라는 TODO 가 적혀있다.

 

그럼 action이 있는 곳을 가서 action이 어떻게 생겼는지 보도록 하겠다

 

 

action은 type과 payload를 가진 애구나.. action을 보면서 위의 handleClick 코드를 채워준다.

 

지금은 문제를 바로 풀기보다 전체적인 흐름을 보는 것이 위주이기 때문에  <ShoppingCart/>라는 두번째 컴포넌트로 향하겠다

 

 

 

그런데 좀 코드가 길다. 

하지만, 겁 먹을거 없다

쇼핑카트 안에서 선언되는 함수가 많을 뿐이다.

여러가지 함수 중에서 우리가 채워야할 부분을 먼저 살펴보자

 

함수 handleQuantityChange 와 함수 handleDelete 가 있다

둘다 dispatch을 써서 action을 전달하는 코드를 작성하면 된다.

(참고로, dispatch는 이벤트가 일어나는 컴포넌트 안에서 사용된다!)

각 함수에 맞는 action이 무엇인지 궁금하면 위에서 했던 것처럼 action이 정의된 파일인 actions > index.js에 가보면 찾을 수 있다

 

만약 어떤 함수가 정의된 부분을 봐도, 이해가 잘 안되거나, 함수 정의 부분이 뚫려있다면(지금과 같이 test를 푸는 용으로),

return 문 아래로 가서 어떻게 실행되는지를 찾아보면 된다

예를들어, 함수 handleQuantityChange가 감이 잘 안온다 하면 그 파일을 쭉 내려서 return 문을 살펴보자!

어쨌든 화면에 렌더링 되는 기준은 return 문이다

 

return <CartItem/> 을 뱉고 있는데,

자세히 보면 handleQuantityChange를 props로 정의한 것이 보인다

그럼 자식 컴포넌트인 <CartItem/>에 가서  props를 어떻게 받아오는지를 살펴봐야겠다

 

 

CartItems에 왔다. 위의 코드를 보면 {handleQuantityChange}를 작성하여 props를 잘 받아온 것을 볼 수 있다

아래에 보면

 

 <input
        type="number"
        min={1}
        className="cart-item-quantity"
        value={quantity}
        onChange={(e) => {
          handleQuantityChange(Number(e.target.value), item.id)
        }}>
  </input>

 

함수 handleQuantityChange가 두개의 인자를 받는데,

첫번째 인자로는 브라우저에서 사용자가 입력하는 값(숫자)를 ,

(Number(e.target.value), item.id)

두번째 인자로는 renderItems 라는 배열의 한 요소인 item에서 id 속성값을 인자로 받아온다

(Number(e.target.value), item.id) 

 

(shoppingCart.js)

const handleQuantityChange = (quantity, itemId) => {
    //TODO: dispatch 함수를 호출하여 액션을 전달하세요.
    dispatch(setQuantity(itemId, quantity))
   
  }

  const handleDelete = (itemId) => {
    setCheckedItems(checkedItems.filter((el) => el !== itemId))
    //TODO: dispatch 함수를 호출하여 액션을 전달하세요.
    dispatch(removeFromCart(itemId))
  }

TODO는 이렇게 dispatch로 action을 전달하는 방식으로 작성하면 된다.

action 함수 안에 있는 인자들은 원래  action이 정의된 부분에서 그대로 가져오면 되고.

 

 

 

 

그런데, 한가지 문제가 생겼다

 

ItemListContainer 컴포넌트 안에 있는 handleClick 이라는 함수는 그대로 인자(itemId)를 받아왔더니,

빨간 밑줄이 쳐지면서 에러가 뜬다

 

 

 

터미널에도 오류가 뜬다

 

 

바로, 오류를 찾는 방법을 알아보겠다

 

 

 

 

 

 

 

 

오류찾기 : 콘솔로 조사하기

 

방금 우리는 빡치는 에러를 목격했다..

이럴때 어떤 생각이 드는가?

또 에러났네,,,ㄸㅂ 

 

하지만, 오류를 일단 찾았으면, 님은 반쯤은 성공한거다.

진짜 문제는 오류가 뭔지도 못찾는 상황이다...

 

그럼 어디서 오류가 났는지 쉽게 찾을수 있을까?

바로 콘솔과 npm run test를 적극적으로 활용하는 것이다.

 

먼저, 브라우저를 켜서 클릭해보면서 함수가 실행이 잘되는 지를 파악한다

브라우저를 키니 아예 error 경고창을 보내며 브라우저가 보여지지 않는다. ㅠㅠㅠ

우선, 이 부분을 주석처리를 하고 console.log(item)을 작성해보았다

 

왜 이렇게 했냐면, handleClick에서 받아오는 인자인 item이 무엇인지 궁금했기 때문이다.

뭔가  item이 어떤 형태인지 안다면, 제대로된 데이터를 addToCart가 캐치할 수 있을듯?

 

 

 

브라우저를 열고 강시모자를 장바구니 담기 클릭! 했더니 콘솔창에 item이 무엇인지 뜬다.

item에서 id는 item.id인 것이다.

 

쉽게 설명하면, 장바구니에 원래 담겨있는 친구들의 id는 itemId이지만,

장바구니에 새로 담길, 원래 근본이 상품리스트인 친구들의 id는 item.id 이다

그래서,  dispatch(addToCart((item.id))) 이렇게 작성하면 상품들이 장바구니에 추가가 잘된다.

끝이다.

 

 

 

마지막으로, 정리하자면 오류 캐치하는 방법은

1. 브라우저를 켜서 잘 실행되는지 보고, 
2. 잘 안되는 부분이 있으면 그 페이지에 그 기능을 실행하는 부분에 가서 
3. 내가 궁금한 것을 콘솔에 넣는다. 그리고 형태를 확인

특히, 코드에서 변수나 함수를 정의하는 부분과 실행하는 부분 구분해서 보는 것이 중요하다!

 

 

 

다 읽느라 고생많았다

빠이~