Codekata💢

set

• 배열의 중복 요소를 제거하는 메소드

test1 = [3, 2, 3];
test2 = [2, 2, 1, 1, 1, 2, 2];

// 배열 내 가장 자주 나오는 요소를 출력하는 함수
function moreThanHalf(nums) {
  let setArr = new Set(nums);
  let setArr2 = [];
  let cntArr = [];
  for (let t of setArr) {
    let trueCnt = 0;
    nums.forEach((el) => (el === t ? trueCnt++ : null));
    setArr2.push(t);
    cntArr.push(trueCnt);
  }
  return setArr2[cntArr.indexOf(Math.max.apply(null, cntArr))];
}

console.log(moreThanHalf(test1));
console.log(moreThanHalf(test2));

---

props review

• scss 파일은 항상 마지막에 import (convention)
• 부모 컴포넌트에서 사용된 속성의 명칭과 값이 Props 데이터의 key, value 가 된다.

---

노드 관계 정리

previusSbling

• 이전 형제 노드

nextSbling

• 다음 형제 노드

parentElement? parentNodes? / chlidElement? childNodes?

• 대부분의 경우 동일합니다
• 다른 경우는 부모나 자식이 요소(element)가 아닐때 입니다

firstChild

• 첫번째 자식 노드

lastChild

• 마지막 자식 노드

---

비구조화 할당(구조 분해)

const object = { a: 1, b: 1 };

const { a, b} = object;

console.log(a);// 1
console.log(b);// 1
// object.key명칭 대신 a 변수를 활용할 수 있다

computed property name

• 속성명에 표현식을 사용하려면 대괄호("[ ]") 안에 표현식을 쓰면 됩니다.
• 표현식은 변수가 들어올 수도 있고, 함수가 들어올 수도 있습니다.

// 변수 활용 
var name1 = "장동건";
var name2 = "원빈";
var num = 1;
 
var obj = {
    [num+") "+name1]:"반장",
    [num+1+") "+name2]:"부반장"
};

console.log(obj); // { 1) 장동건: "반장", 2) 원빈: "부반장" }


// 함수 활용
function add(a, b){
    return a+b;
}
function conf(a, b){
    return `${a} + ${b}`;
}
var obj = {
    ["addNumber "+conf(5, 10)]:add(5, 10),
    [add(10, 20)+" is Result by"]:"10+20"
}
console.log(dbj); // {addNumber 5, 10: 15, 30 is Result by: "10+20"}

---

오늘의 CSS🎨

position(이미지 겹치기)

• 부모 요소: relative
• 자식 요소(겹치는 요소): absolute

.likeContainer1 {
  position: relative;
  .likeEmpty {
    position: absolute;
  }
  .likeRed {
    position: absolute;
  }
}

visibility

.className{
  visibility:hidden;
}
/*요소를 숨기는 설정*/

position: sticky? fixed?

• Fixed 속성은 화면의 절대적인(absolute) 위치로 존재하며,
  스크롤을 내려도 처음 위치한 곳에 고정(fixed) 되어 보이게 됩니다.
• Sticky 속성은 최초에 relative 속성처럼 동작하다가
  스크롤이 특정 지점에 도달하면 요소를 고정(fixed) 시킬 수 있습니다.

---

꿀Tip🧀

• 컴포넌트는 무조건 첫번째 대문자
• setState 실행되면 render 함수 자동실행 된다
  (그래서 this.state 직접 수정하면 반영이 안된다)
• lifeCycle
  constructor -> render -> componentDidMount(컴디마) -> render
• (render가 두번 반복되는데도 불구하고) 굳이 컴디마를 하는 이유
  백엔드 api 가져오는 fetch 가 컴디마 안에서 실행되기 때문
• 배열 요소 복사: ...array