10주 5일차 - react custom component 과제

10주 5일차 - react custom component 과제

1. 배운 것

• flex 사용 시 요소 중앙정렬 시키는 방법
• css- position 속성 복습
• css 선택자 - 자식 결합자
• styled-components의 attrs 메서드
• event.key
• 이벤트 버블링
• e.target.value false 조건

2. 내용 정리

flex 사용 시 요소 중앙정렬 시키는 방법

container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
	position: relative;
}

---

CSS - position 속성 복습

요소의 위치를 지정하기 위한 속성으로 5가지(static, relative, absolute, fixed, sticky) 타입이 있다.

어떤 위치를 기준점으로 잡는지가 position 속성의 각 타입 마다 차이가 있다.

위치 이동의 속성값 적용 시 top, bottom 중 하나, left, right 중 하나만 적용시킬수 있음에 유의한다.

sticky는 지원하지 않는 브라우저가 다수 있어 나머지 4개를 복습한다.

z-index 속성

position 속성이 적용된 요소들의 수직 방향으로서의 레벨(레이어)을 지정해주는 속성이다.

숫자가 높을수록 위로 위치한다. (기본값: 0)

값은 정수로 양수, 음수 모두 가능.

position: static

최초에 모든 요소의 기본값은 static이다.

top, right, bottom, left 속성값 사용 불가.

position: relative

이동의 기준점은 자신의 본래 위치를 기준으로 한다.

float와 달리 자기 자신의 원래 위치를 기억하므로 위치가 이동되어도 다른 요소들이 position: relative인 요소의 원래 위치했던 공간을 침범하지 않는다.

position: absolute

기준점: 선택 가능/ 자신을 감싸는 여러 조상 요소 중 position: static이 아닌 요소 중에서 위치 이동의 기준으로 삼을 요소를 선택할 수 있다.

float와 유사하게 동작하나 차이점이 있다.

• 공통점: 불완전한 block 요소가 된다. 따라서 크기 지정이 가능하지만 block처럼 자리를 차지하지는 못한다.
• 차이점: float는 인라인 컨텐츠들이 float된 요소의 위치를 비켜가서 위치하지만 position: absolute 요소는 인라인 컨텐츠 내용 위에 겹쳐진다.

position: fixed

position: abosolute와 동일하게 불완전한 block 요소가 되며 자리를 차지하지 못한다.

absolute와의 차이점은 위치 이동의 기준점이 viewport를 기준으로 삼는다는 점이다.

---

css 선택자 - 자식 결합자 (A > B)

> 결합자는 첫번째 요소의 바로 아래 자식인 노드를 선택한다.

아래 예제는 ul 안에 첫번째로 등장하는 자식이 li인 경우를 가정, li 모두를 선택한다.

ul > li {
	 color: blue;
}

styled-components의 attrs 메서드

html 태그 고유의 attribute를 반복적으로 사용하지 않기 위해 사용하는 메서드이며 스타일링은 인라인 스타일로 적용된다.

attributes를 삽입하기 위한 메서드이며 1개의 객체타입의 arg를 받는다.

styled-component를 사용할 때 마다 속성과 속성값을 컴포넌트(태그) 안에 넣어줄 필요가 없다. 즉 html 태그 고유의 attribute를 넣어 재사용하기 위한 컴포넌트를 만들 때 attrs 메서드를 자주 사용할 수 있다.

const StyledInput = styled.input.attrs({ type: "checkbox" })`
	position: absolute;
  left: -1000%;
`;

passing props (예시: ${ props ⇒ props.big }) 와 다르게 attrs() 메서드는 인라인 스타일이 적용되며 애니메이션 등과 같이 빈번히 변경이 있는 스타일링 시 효율적인 메모리 사용을 위해 attrs 메서드 사용이 권고된다.

참고: https://velog.io/@ayaan92/styled-components-.attrs에-대하여

---

event.key

입력된 키의 값을 받을 수 있다.

참고: https://way-be-developer.tistory.com/244

알고리즘 스터디 - 프로그래머스 [level 2] 위장 - 42578

// 해시 : 빈도수 정렬 혹은 탐색 용도
// 이 문제는 빈도수 정렬
function solution(clothes) {
// 객체로 빈도수 정렬
// 1. 요소의 타입 확인
    // obj[type[1]]
    let answer = 1;
   const obj = {};
    for (type of clothes) {
        if (obj[type[1]]) {
            obj[type[1]] += 1;
        } else {
            obj[type[1]] = 1;
        }
    }
  for (key in obj) {
      answer *= obj[key] + 1; // 해당 타입 중 아무것도 안 입었을 때 경우의 수 1을 더한다
  }
   return answer - 1; // 아예 아무것도 안 입었을 경우의 수 1을 뺀다 
}

객체를 이용하여 입력값을 해싱해야 하는 문제였다. 왜 경우의 수에서 1을 더하고 빼고 하는지 개념 자체가 없었어서 헤맸던 문제였다.

사실 Map으로 풀면 훨씬 코드가 깔끔하고 명시적인데 아직 제대로 배우지 못해서 우선 객체로 풀었다. 시간이 날때 주말간 다시 Map으로 풀어보아야 겠다.

• 알고리즘 연관 수학 개념
  • 경우의 수
  • 소수 찾기(에라토스테네스의 체)
  • 최소공배수 최대공약수
  • 유클리드 호제법
  • 이항 계수(nCr)
  • 모듈러 연산(나머지 정리)
  • 순열과 집합, 부분집합

참고 자료

• 김버그님 html/css 강의 position 파트

3. 리뷰

3.1 좋았던 점

• 평소 많은 도움 주셨던 동기분께서 이번 스터디 때 객원멤버로 와주셔서 정말 많은 가르침 주셨다.

3.2 아쉬웠던 점

• 리액트 훅, props로 함수 사용의 미흡함
• css 다 까먹음
• 해시 공부가 부족했던 점
• 스터디 전에 Map 좀 더 제대로 익혔어야 했음
• 체력, 시간관리

3.3 notes

사람이 전부다. 알고리즘에 대해 아무것도 모르는 상태에서 알고리즘 스터디를 만들고 운영하고 있는데, 스터디 커리큘럼을 기회가 될 때마다 현재 상황에 맞게 재조정을 거치는 과정에서도, 이번 스터디 모임에서도, 또 평소에도 참 많은 분들이 도움 주셔서 감사할 따름이다.

참 부족한 나지만 믿고 와주신 스터디원분들께도, 도움 주시는 동기분들께도 누가 되지 않도록 열심히 해야겠다.