♻️ Refactored by june

Author: june6723

.prettierrc

@@ -0,0 +1,11 @@
+{
+  "singleQuote": true,
+  "semi": true,
+  "useTabs": false,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "printWidth": 120,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "auto"
+}

src/refactoring/june/example-1.js

@@ -0,0 +1,46 @@
+// 1. setPriceByName, setShippingByName, setQuantityByName, setTaxByName에 고정 string으로 들어가는 key가 존재 (암묵적 입력)
+// 2. 이렇게 되면 item에 새로운 필드가 추가될때마다 함수를 새로 만들어야 하는 상황
+
+function setPriceByName(cart, name, price) {
+  var item = cart[name];
+  var newItem = objectSet(item, 'price', price);
+  var newCart = objectSet(cart, name, newItem);
+  return newCart;
+}
+
+function setShippingByName(cart, name, ship) {
+  var item = cart[name];
+  var newItem = objectSet(item, 'shipping', ship);
+  var newCart = objectSet(cart, name, newItem);
+  return newCart;
+}
+
+function setQuantityByName(cart, name, quant) {
+  var item = cart[name];
+  var newItem = objectSet(item, 'quantity', quant);
+  var newCart = objectSet(cart, name, newItem);
+  return newCart;
+}
+
+function setTaxByName(cart, name, tax) {
+  var item = cart[name];
+  var newItem = objectSet(item, 'tax', tax);
+  var newCart = objectSet(cart, name, newItem);
+  return newCart;
+}
+
+function objectSet(object, key, value) {
+  var copy = Object.assign({}, object);
+  copy[key] = value;
+  return copy;
+}
+
+// result
+const itemKeyArr = ['price', 'shipping', 'quantity', 'tax'];
+const setValueByKey = (cart, name, key, value) => {
+  if (!itemKeyArr.includes(key)) throw '아이템에 존재하지 않는 키값입니다!';
+  const item = cart[name];
+  const newItem = objectSet(item, key, value);
+  const newCart = objectSet(cart, name, newItem);
+  return newCart;
+};

src/refactoring/june/example-2.js

@@ -0,0 +1,38 @@
+// 1. loop가 중복해서 쓰이고 있다.
+// 2. cook, eat, wash, dry, putAway등 데이터를 이용해 할 일에 집중할 수 있는 코드를 만들자
+
+const foods = ['pizza', 'chungkukzang', 'ramen'];
+const dishes = ['main', 'size', 'personal'];
+
+for (var i = 0; i < foods.length; i++) {
+  var food = foods[i];
+  cook(food);
+  eat(food);
+}
+
+for (var j = 0; j < dishes.length; j++) {
+  var dish = dishes[j];
+  wash(dish);
+  dry(dish);
+  putAway(dish);
+}
+
+const forEach = (arr, callback) => {
+  if (!('length' in arr)) throw '배열이 아님!';
+  let index = 0;
+  while (index < arr.length) {
+    const current = arr[index];
+    callback(current, index, arr);
+    index += 1;
+  }
+};
+
+forEach(foods, food => {
+  cook(food);
+  eat(food);
+});
+forEach(dishes, dish => {
+  wash(dish);
+  dry(dish);
+  putAway(dish);
+});

src/refactoring/june/example-3.js

@@ -0,0 +1,40 @@
+// 1. fetching에 필요한 parameters, fetch function, error handling function 3가지가 같이 움직인다
+// 2. 만약 새로운 비동기 함수가 추가되면?
+var user = {
+  id: '1',
+};
+
+const getUserData = ({ id }) => {
+  const response = fetch(`https://jsonplaceholder.typicode.com/users?id=${id}`);
+  return response;
+};
+
+const logToSnapErrors = error => console.log(`🚫 에러가 발생했어요: ${error.message}`);
+
+try {
+  getUserData(user);
+} catch (error) {
+  logToSnapErrors(error);
+}
+
+// ------------------------------------------
+
+const fetchFlow = async (param, fetchCb, errorCb) => {
+  try {
+    await fetchCb(param);
+  } catch (error) {
+    errorCb(error);
+  }
+};
+
+fetchFlow(user, getUserData, logToSnapErrors);
+// 3. setUserData가 추가된다면?
+const setUserData = ({ id, name }) => {
+  const response = fetch(`https://jsonplaceholder.typicode.com/user/${id}`, {
+    method: 'POST',
+    body: JSON.stringify({ id, name }),
+  });
+  return response;
+};
+
+fetchFlow({ ...user, name: 'newName' }, setUserData, logToSnapErrors);