Today I Learned

오늘 한일✅

• 드디어 우리조 프로젝트 시작
• Root 페이지 레이아웃 (Navbar, Footer) Live share로 같이 작업함
• DB 같이 설계함

문제점✅

• kimchi 각각의 item을 Map vs Object 둘중에 어떤것을 사용할지 회의가 있었다.

시도해본 것들✅

나는 자료구조의 Map과 object를 정확히 몰랐다. 구글링을 통해 찾아보았다.

해결✅

Kimchi 각각의 Item은 Object 사용하기로 결정!!!!!!!

• Map() 은 자바스크립트의 key-value 페어(pair) 로 이루어진 컬렉션
• key 를 사용해서 value 를 get, set 할 수 있음
• key 들은 중복될 수 없음: 하나의 key 에는 하나의 value 만

Map은 Key 자료형에 제약이 없다.
Map의 key 로 사용할 수 있는 데이터형: string, symbol(ES6), object, function >> number 는 사용할 수 없음에 주의!
Object key 로 사용할 수 있는 데이터형: string 과 symbol(ES6) 만 가능
=> 데이터 key가 모두 문자열로 구성되어 있어서 object로 사용할 수 있다.

순회: Object (for-in), Map(for-of)
=> 데이터가 배열로 이루어져 있어 아이템 순회가 가능하고, 각각의 아이템 내에서는 key로 직접 value를 받아오기 때문에 순회가 필요하지 않다.

Map.set/get 등 메소드를 사용할 수 있다.
⇒ Map 메소드를 쓰는게 오히려 번거롭고 헷갈릴 수 있다.

{
  "kimchis": [ // 품목 데이터 [Array]
    { // 제품 정보 {object}
      "id": number, // 데이터 유니크 넘버
      "catergory": string, // 데이터가 포함된 카테고리명
      "name": string, // 데이터 이름
      "description": string, // 데이터 한줄평
      "price": number, // 데이터 가격
      "image": string, // 제품 이미지 url
      "detail-image": string, // 제품 상세정보 이미지 url
      "recipe-image": string // 제품 레시피 이미지 url
    }
  ],
  "comments": [ //김치상품 게시글안에 해당 댓글들 [Array]
    { // 댓글 정보 {object}
      "nickname": string, // 작성자
      "password": number, // 작성시 기입하는 암호
      "content": string, // 내용
      "date ": string // 작성 일자, 문자
    }
  ],
  "cart": [ // 장바구니[Array]
    { // 댓글 정보 {object}
      "id": number, // 데이터 유니크 넘버
      "count": number // 상품 갯수
    }
  ]
}

알게 된점✅

• 자료구조 Map vs Object 차이를 조금알게 되었다.
  주말에 다시 제대로 읽어보자!
  Mdn (Map vs Object)
  블로그 (Map vs Object)