11주차회고 = ['밴딩머신', '팀빌딩', ['공부','React']]

밴딩 머신 졸업 🎓

드디어 밴머 졸업했다. ^^7 생각보다 오래 걸렸고, 생각보다 얻은 게 많았다. 늦은 새벽까지 도움을 준 우리 회고팀, 갓 원범님 모두 감사드립니다. 현재 내 코드를 돌아보면 만족스럽지 않은 부분이 많다. 구현하지 못했던 부분들도 눈에 밟힌다... 하지만 어쩌겠는가, 그 코드는 나의 최선이었음을...
원범님과 함께 코드를 짜고 있노라면 정말이지 생각지 못한 부분들을 많이 마주하게 된다. 우선 함수를 만들 때 악덕업주가 되지 말라고 했다. 함수에게는 단 한 가지의 일만 시키도록해야한다. 더불어 불필요한 코드를 없애는 리팩토링을 경험했다.

function itemMoveInCart(item, event) {
  // 아이템 새로 생성
  const drinkItemTitle = item.querySelector(".item__title").innerText;
  const imgSrc = item.querySelector("img").src;
  const cartItemLi = document.createElement("li");
  const cartItemBtn = document.createElement("button");
  const cartItemImg = document.createElement("img");
  cartItemImg.className = "item__img";
  cartItemImg.setAttribute("src", imgSrc);
  const cartItemTitle = document.createElement("strong");
  cartItemTitle.className = "item__title";
  cartItemTitle.innerText = drinkItemTitle;
  const cartItemCount = document.createElement("span");
  cartItemCount.className = "num__counter";
  cartItemCount.innerText = 1;
  
  ...
  
    // 카트에 아무것도 없거나, 중복되는 아이템이 없을경우 아이템 추가
  if (cartIdx == -1) {
    cartItemBtn.append(cartItemImg, cartItemTitle, cartItemCount);
    cartItemLi.append(cartItemBtn);
    seletItems.prepend(cartItemLi);
 
 ...
  
  }

itemMoveInCart 함수는 아이템 클릭 시 아이템을 장바구니로 이동시키는 함수다. 클릭한 아이템을 새로 생성하여 추가해주는 로직.
하지만 이 코드는 문제가 있다.
if 조건문에 해당할 시에만 아이템을 추가하면 되는데 사용할지 안 할지도 모르는 아이템을 미리 생성해서 가지고 있다.


그래서 아이템을 만드는 createCartItemLi함수를 새로 만들어서 따로 분리했다.

function createCartItemLi(item, drinkItemTitle) {
  const imgSrc = item.querySelector("img").src;
  const cartItemLi = document.createElement("li");
  const cartItemBtn = document.createElement("button");
  const cartItemImg = document.createElement("img");
  cartItemImg.className = "item__img";
  cartItemImg.setAttribute("src", imgSrc);
  const cartItemTitle = document.createElement("strong");
  cartItemTitle.className = "item__title";
  cartItemTitle.innerText = drinkItemTitle;
  const cartItemCount = document.createElement("span");
  cartItemCount.className = "num__counter";
  cartItemCount.innerText = 1;
  cartItemBtn.append(cartItemImg, cartItemTitle, cartItemCount);
  cartItemLi.append(cartItemBtn);
  return cartItemLi;
}

아이템 생성 과정을 빼버리니 드디어 함수가 제 기능을 하게 됐다.
조건문에 해당할 때에만 아이템을 생성한다!

function itemMoveInCart(item, event) {
  const drinkItemTitle = item.querySelector(".item__title").innerText;

    ...
 
  // 카트에 아무것도 없거나, 중복되는 아이템이 없을경우 아이템 추가
  if (cartIdx == -1) {
    const cartItemLi = createCartItemLi(item, drinkItemTitle);
    seletItems.prepend(cartItemLi);
    ...
    
    }

생각해보면 당연한 과정인데 함수에게 하나의 일만 시키는 게 참 쉽지 않다 🙁
원범님이 함수를 어떻게 짜는지, 어떻게 생각하며 짜야하는지, 모르는 게 있으면 언제든 질문을 던지라며 화(?)도 내셨다. 그렇게 최종 밴딩 머신이 완성되었을 때 마침 함께 있었는데, 원범님이 "축하드립니다. 첫 리팩토링을 경험하셨네요" 라고 말하는데 순간 쫌 멋져버린거지 ㅋ (사실 늘 멋집니다 🐸 👍)

프로젝트 팀 배정 🔮

자바스크립트의 학습기간이 끝나고 드디어 감귤마켓 프로젝트 팀 빌딩이 이루어졌다!
개발 공부를 하면서 생긴 버킷리스트중 하나는 해커톤처럼 다 같이 모여서 밤새 코딩하는 것이었는데... 이번 프로젝트를 하면서 이룰 수 있을 것 같다! ㅎ.ㅎ 팀 빌딩이 이루어지자마자 벌써 회의를 여러 번 했는데 다 너무 좋은 분들이고 알게 모르게 편한 감이 있어서 진작부터 안정감도 든다 ㅎㅎㅎㅎ하루빨리 플젝 시작하고 싶다는 생각과 동시에 막연한 두려움도 같이 찾아오지만 뭐... 어떻게든 해내고 말 것이다! 🥶

! 경험을 공유하다 ⚖️

공유 못했다. 정확히 말하자면 프로젝트 팀원들에게만 했다.
내 개인적인 느낌이기도 하고 그냥저냥... 고민이 됐다. 공유하고자 했던 경험은 회고 팀원들과 했던 코드 리뷰인데 정말 초보자의 코드 리뷰 경험이라서 공유하는 것에 주저했던 거 같다.

코드리뷰에 대한 개인적인 느낀점

혹여나 지나치다가 흥미가 생긴다면 읽어봐도 좋을 듯...
사실 코드리뷰 중점이라기보단 서로 간의 올바른 신뢰관계가 얼마나 중요한 것인지 몸소 깨닫게 된 경험이 맞겠다.

리...ㅇㅐㄱ트...

과거 리액트를 아~주~살~짝~ 공부할 때 적었던 글을 찾았다.
글은 3월에 작성...

모냐 나 꽤나 감성적...

재밌었구나? ㅋㅋㅋㅋ 하... 그렇다. 과거의 난 리액트가 재밌었다! 그때의 나는 지금보다도 자바스크립트 기본지식이 없을 때였는데도 불구하고 리액트를 좋아했다... 아직도 기억나는 건 별도의 새로고침없이 페이지가 렌더링 되는 모습을 보면서 많이 놀라워했었던 것. (물론 지금도 신기하다 리액트 짜식...)
무튼 리액트는 아직도 너무 신선하고 놀랍고......진짜 재밌다. 지금도 완전 초짜라 많이 배운것도 없지만 ^^ 아무튼 재밌다.ㅎㅎ
앞으로도 뇌가 고통받겠지만 자극은 언제나 짜릿하니까! 가보자고!! 😤



오늘의 뇌 합리화 🧠
> 두려움이라는 감정은, 뇌가 당신에게 무언가 중요한 것을 극복해야 한다고 말하는 방식입니다.
> 자랑스러워할 만한 목표에 도달할 때까지 기다리지 마세요. 그 목표를 달성하기 위해 내딛는 모든 단계를 자랑스럽게 생각하세요.