오늘부터 반을 나눠서 실습을 진행했다.
나는 JS에 좀 더 개념적으로나 원리적인 내용?
다시 말해서 기초를 심화까지 다뤄야 된다고 생각해서 '달리기 반'을 선택했다.
이렇게 생각한 까닭은
작년도에 프로젝트를 진행하면서 프레임워크나 언어에 대한 개념없이 시작하니까 진짜 코드를 클론하거나 복붙하는것 같은 느낌이 들었기 때문이다.
물론 그렇다고 진짜 다 복사, 붙어넣기를 했다는 건 아닌데 개념 없이 실습 내용이나 프로젝트를 위한 아키텍쳐를 바로 사용하다보니 혼이 나갔다? 정신없었다?가 맞는 표현이다.
그래서 첫 수업을 들어보니까 꽤 허점을 많이 찔렸다.
온라인 강의 내용을 복습하면서 말씀해주셨는데 논리 연산자 얘기를 하는데
사실 나는 ===와 ==의 차이를 정확히 알지는 못했다.
그냥 JS에서는 대부분 === 연산자를 사용하니 덩달아 사용했는데
정확히 이 부분을 꼬집으셨다.
차이는 데이터의 타입까지 확인하는 것이다.
사실 이 내용을 어딘가에서 분명 들었을 것이다.
그러나 이런 식으로 리마인드하지 않았다면 또 다시 저런 내용을 맞닥뜨렸을 때 헷갈려했을 것이 분명하다.
이외에도 코드 컨벤션 적용과 그에 대한 이유 등
정말 중요한 내용에 대해서 기초를 다질 수 있었다.
나에게 있어서 매우 소중한 시간이었다.
그렇게 강의는 잘 마치고
실습시간이 찾아왔는데, 문제가 어렵지 않게 진행되다가...
마지막에 deep copy에 대한 문제가 나왔다.
https://velog.io/@changyon99/JS-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0...Copy
사실 내가 한번 정리한 적이 있었던 내용이였는데
확실히 배우는 것과 실제로 하는 건 차이가 있다.
중첩 객체라서 그냥 재귀함수를 사용하려고 했는데?
그 다음이 배열이라 단순 객체로 취급하면 잘못된 복사로 진행되네???
'하... 이거 어떤식으로 구현해야할까?' 이 고민만 꽤 오래했다.
// B 유저에게 할인 쿠폰을 적용하려고 applyCoupon 함수를 만들었습니다.
function applyCoupon(cart, coupon) {
cart.items.forEach((item) => {
item.price -= coupon.discount;
});
}
const userACart = {
items: [
{ name: "키보드", price: 30000 },
{ name: "마우스", price: 20000 },
],
};
// const userBCart = userACart;
const coupon = { discount: 5000 };
// applyCoupon(userBCart, coupon);
// console.log(userACart); //{items: [ { name: '키보드', price: 25000 }, { name: '마우스', price: 15000 } ]}
// console.log(userBCart); //{items: [ { name: '키보드', price: 25000 }, { name: '마우스', price: 15000 } ]}
// 1. 실행 결과로 userACart.items와 userBCart.items는 각각 어떻게 달라져 있을까요?
// userAcart와 userBcart의 변경사항은 동일할 것이며
// 각 items들의 가격이 5000이 줄어든 키보드 - 25000, 마우스 - 15000일 것 이다. (실행 후 동일한 것 확인)
// 2. 1번의 결과에 대한 이유를 설명해보세요.
// 실행 전 예상 - userAcart와 userBcart는 참조형 변수이기에 단순 연산자를 통한 복사는 주소를 복사하는 것과 동일하다.
// 그렇기에 userAcart와 userBcart의 변경사항은 동일할 것이다.
// 3. 원래 의도대로라면 유저 A와 유저 B 장바구니가 독립적으로 동작해야 하는데, 그렇게 하려면 코드를 어떻게 수정해야 할까요?
// 실행 전 예상 - 얕은 복사로는 중첩 객체에 대한 주소 분리를 할 수 없기 때문에 재귀적으로 구현해야한다.
// 구현 중 - 재귀적으로 구현 시 items는 객체가 아닌 배열이라 재귀문이 아닌 반복문을 통해 복사해야한다는 것을 깨달았다.
let copy = function(obj){
var result = {};
for(prop in obj){
result[prop] = obj[prop].map((item) =>{
var dic = {};
for(tag in item){
dic[tag] = item[tag];
}
return dic;
} )
}
return result;
}
let temp = copy(userACart);
const userBCart = temp;
applyCoupon(userBCart, coupon);
console.log(userBCart);//{items: [ { name: '키보드', price: 25000 }, { name: '마우스', price: 15000 } ]}
console.log(userACart);//{items: [ { name: '키보드', price: 30000 }, { name: '마우스', price: 20000 } ]}결국엔 이중 for문을 통해 해결했다.
물론 배열 안에 있는 객체에 또 다른 객체 property가 생기면 의도대로 동작하진 않아도 이 경우에선 동작하는 걸로 문제를 해결했다.
후에 조원분들과 이 문제 해결방식에 대해서 얘기를 나눴는데
isArray() 혹은 structuredClone()을 통한 해결방식이 있다는 걸 깨달았다.
const userBCart = structuredClone(userAcart);진짜 얘는 한 줄 코드더라 ㅋㅋ;;
현업에서는 효율이 중요하니까~ 덕분에 좋은 메서드도 알아가고 의견도 나눌수 있었다.
기초 -> 심화는 아주 중요한 과정이다
리마인드를 통한 복습은 나의 성장의 밑거름이다
structuredClone()은 신이야!!
