Jihykim2 HTML + CSS, JS 제출

[jihyunk03]

done (Cabi FE onboarding)

• LV.0 아무것도 모르는데요 >> 07/29 제출
• LV.1 Cabi 웹 페이지 만들기 (1) >> 08/02 제출
• LV.0 참인듯 참아닌 참같은 너 >> 08/09 제출
• LV.1 개포동 배달음식은 비싸다 >> 08/09 제출

[junyoung2015]

Lv 0: fontPurple 의 네이밍 컨벤션이 중복되는 것을 제외하면 원본과 동일하게 잘 해주셨습니다!

고생하셨어요 👍

[junyoung2015]

Cabi 입니당!

[jihyunk03]

아니,, 온보딩 피그마가 달랐어요,,,, 억울합니다,,,

[junyoung2015]

로고가 70px * 70px 여야 요청사항에 부합합니다!

[junyoung2015]

색깔은 CSS 변수를 사용해서 관리하는 것이 좋습니다!
만약 font 색깔을 class 로 관리한다면, 먼저 변수를 만들고 class 를 쓰는 방법도 있을 것 같습니다.

:root {
  --white: #FFFFFF
  --primary-color: #9747FF;
  --secondary-color: #B18CFF;
  --bg-color: var(--white);
 }

.text-main {
  color: var(--primary-color);
}

.text-sub {
  color: var(--secondary-color);
}

[junyoung2015]

font-family 에 family-name으로 지정된 글꼴 (Noto Sans KR)을 사용할 수 없을 경우를 대비해서 브라우저가 대체할 수 있는 폰트를 설정해주는 것이 좋습니다!

font-family: 'Noto Sans KR', sans-serif;

[junyoung2015]

.fontPurple 이 두개인데 둘의 색깔이 다릅니다! 이대로 유지하신다면, Purple 과 LightPurple 로 이름에 구분을 주셔야 할 것 같아요

[junyoung2015]

background-color 도 CSS 변수로 관리하시는게 깔끔하고 좋습니다!

[junyoung2015]

box-shadow 의 색깔도 CSS 변수로 관리하시는게 깔끔하고 좋습니다!

[junyoung2015]

padding: 10% 0; 이여야 원본 페이지와 이미지 위치가 맞습니다!

[junyoung2015]

BEM 네이밍 컨벤션을 적용하면 재사용성과 가독성을 더 높힐 수 있어 보입니다!

이름을 유지하면서 BEM (Block Element Modifier) 컨벤션을 적용하면 아래처럼 될 것 같아요:

.login-modal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 360px;
  height: 500px;
  background-color: #FFFFFF;
  border-radius: 20px;
  box-sizing: border-box;
  padding: 85px 0;
  box-shadow: 10px 10px 40px 0px #00000040;
}

.login-modal__logo-image {
  width: 70px;
  height: 70px;
}

.login-modal__logo-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 40px;
}

.login-modal__sub-title {
  font-size: 16px;
}

.login-modal__login-button {
  width: 200px;
  height: 60px;
  border-radius: 6px;
  background-color: #9747FF;
  color:#FFFFFF;
  font-size: 18px;
}

[junyoung2015]

추가적으로, 이름에 login 이 두번 붙으면 클래스명이 너무 길어질 수 있으니 .login-modal 들을 .card .card__logo, .card__title 등으로 바꾸는 것도 좋아보입니다!

[junyoung2015]

font-weight: 300; 으로 하시면 원본 페이지와 더 동일할 것 같습니다!

[junyoung2015]

border-radius: 10px; 로 하셔야 원본 페이지에 더 부합합니다!

[jihyunk03]

level 1. Cabi 웹 페이지 만들기 (1) 추가로 제출했습니다!

[junyoung2015]

LV 1: 모바일 부분이 <meta> 와 viewport 의 부재로 인해 의도한 대로 되지 않는 점을 빼면 잘 해주신 것 같습니다!

저도 <meta> 와 viewport 에 대해 대충만 알고있었는데 다시 돌아보는 좋은 계기가 됐습니다!

[junyoung2015]

해당 bar 역시 item 이나 floor 등으로 나타내도 좋을 것 같습니다.

[jihyunk03]

그다음 온보딩 추가 제출했습니다!!

[junyoung2015]

LV 0: 참인듯 참아닌 참같은 너

JavaScript 의 타입, 형 변환, typeof 연산자, undefined 를 확인하는 법 등 이유까지 상세히 너무 잘 공부하고 쓰신 것 같습니다. 고생하셨습니다!

[junyoung2015]

추가하자면, undefined 와 null 을 확인하는 방법은 아래와 같습니다!

let a = undefined;

/*
 * typeof 를 쓰지 않을 때
 */ 
if (a === undefined)    // 올바른 방법
if (a === "undefined") // 틀린 방법

/*
 * typeof 를 쓸 때
 */ 
if (typeof a === "undefined)

/*
 * undefined 와 null 를 구분하는 방법
 */
if (!a && typeof a === "undefined")   // undefined
else if (!a && typeof a === "object") // null

[junyoung2015]

LV 1: 개포동 배달음식은 비싸다

JavaScript 에서 for 문으로 Object 의 key 에 접근하는 방법과 Object.values() 로 접근하는 방법 두가지 모두 잘 해주신 것 같습니다. 배열 핼퍼 메소드들도 잘 써주셨습니다.

다만, Array.filter() 과 Array.map() 으로 배열을 두번 도는데, 한번만 돌면서 처리하고 싶다면 아래처럼 작성해도 좋을 것 같아요:

function calculateTotal(obj) {
  return Object.values(obj).reduce((acc, { product, qty, price }) => {
    if (
      typeof product === "string" &&
      product.trim() !== "" && // Check if product is a non-empty string
      typeof qty === "number" &&
      !isNaN(qty) &&
      isFinite(qty) && // Check if qty is a valid number
      typeof price === "number" &&
      !isNaN(price) &&
      isFinite(price) // Check if price is a valid number
    ) {
      acc.push({ product, total: qty * price });
    }
    return acc;
  }, []);
}

위 방법에서는 typeof qty === "number", typeof price === "number" 로 추가적인 에러 처리를 했고, isFinite() 로 명세에 부합하도록 값이 Infinity 인지 체크했습니다.

[junyoung2015]

for (const key in obj) { 처럼 let, const 혹은 var keyword 를 추가해서 key 의 선언을 명시적으로 해주는 것이 좋습니다!

[junyoung2015]

totalPrice 가 Infinity 인지 isFinite() 함수로 확인해줘야 명세에 부합합니다!

[junyoung2015]

NaN 만 false 고, Infinity 는 true 값을 가지기 때문에 isFinite() 함수로 확인해줘야 명세에 부합합니다!

[junyoung2015]

추가적인 objArr 선언 없이 구조 분해 할당 (destructuring) 을 사용해 아래처럼 짤 수도 있습니다!

function calculateTotal3(obj) {
  return Object.values(obj).filter(([product, qty, price]) => {
    return product && qty && price;
  })
  .map(([product, qty, price]) => {
    return {
      product,
      total: qty * price,
    };
  });
}