4주차.md

11월 20일

오늘 한일

프론트엔드 데브코스

• 노션 프로젝트 팀원들 리뷰

배운 것

어려웠던 점

한줄평

오늘도 수고했어.

11월 21일

오늘 한일

프론트엔드 데브코스

• core time 참석
• 데일리 스크럼
• js 강의 수강
• 노션 프로젝트 팀원 코드 리뷰

배운 것

어려웠던 점

한줄평

오늘도 수고했어.

11월 22일

오늘 한일

프론트엔드 데브코스

• core time 참석
• 데일리 스크럼
• js 강의 수강
• ToDoLIst 과제 리뷰 반영
• 고양이 사진첩 과제 수행 중
• 로토님 특강

배운 것

어려웠던 점

한줄평

오늘도 수고했어.

11월 23일

오늘 한일

프론트엔드 데브코스

• core time 참석
• 데일리 스크럼
• js 강의 수강
• 고양이 사진첩 과제 수행 중

배운 것

어려웠던 점

한줄평

오늘도 수고했어.

11월 25일

오늘 한일

프론트엔드 데브코스

• core time 참석
• 데일리 스크럼
• js 강의 수강
• todo list 리뷰 반영
• 고양이 사진첩 과제 완료

배운 것

프론트엔드 데브코스

js 강의

To do list Drag&Drop

• window.requestIdleCallback()
  • 이 개념을 소개한 이유는 드래그 앤 드롭 할 때마다 API 호출이 되면 좋지 않으니까 API 호출 이벤트를 특정 시점에 동시에 수행하기 위한 방법을 찾다가….
  • UI가 바쁘지 않을 때 이 함수를 실행해라!(특정 브라우저에는 적용 x)
• Web Workers(웹 어커)
  • js는 싱글스레드로 동작하기 때문에 API 호출 이벤트가 밀릴 수도 있음
  • 메인 스레드 외부에서 동작하므로 위에 싱글스레드로 인한 이벤트가 밀리는 문제 등을 방지할 수 있음

바닐라 JS로만 프로젝트 진행 시 좋은점

• 다른 라이브러리나 프레임워크가 어떻게 동작할 것이다와 같은 이해력을 키우는데 도움
• 화면을 독립적으로 동작하는 컴포넌트에 대해 생각하고 만드는 것에 대한 훈련
  • 화면을 선언적으로 생각하여 확장가능하고 버그를 덜 만드는 UI 프로그래밍에 대해 익힘
• 상태, 상태 변화에 의한 데이터 흐름 중심으로 UI를 표현하고 이를 통해 화면의 변화를 생각하고 추적
• 명령형에 비해 선언적 프로그래밍이 유지보수도 쉬움 ⇒ 제이쿼리 같은 경우 이벤트 발생 후 UI가 수정될 때 이벤트가 여러군데에서 일어나므로 나중에 유지보수가 어려움

CSS - Float

• border ⇒ 따로 border color를 지정하지 않으면 기존 color를 참조

• float 사용 시 항상 clear하는 것이 필수

  .container .item:nth-child(4) {
    clear:left;
  }
  
  .float {
    float: left;
  }

• element::after

  • element의 내부 요소의 마지막에 가상의 요소를 만들어 css 속성을 추가할 수 있는 선택자
  • content 필수

• float 사용시 형제 element 중에 float을 사용하지 않는 element가 있으면 문제 발생 ⇒ 다른 페이지 영역을 사용하기 때문에 겹침

• inline

  • width와 height를 가질 수 없음

• inline elemnet도 float을 사용하면 display가 block으로 수정 됨

CSS - Position

• fixed
  • body 말고도 transform, perspective(3차원 원근 효과)속성이 적용된 조상 element를 기준으로 삼기도 한다.
• z-index
  • postion의 값의 static을 제외한 relative, absolute, fixed, sticky 값이 있어야 함
  • display의 flex 및 grid의 자식 element(flex item 및 grid item)에서 사용 가능
  • 쌓임 맥락 ⇒ x,y,z 축에서 z축을 기준으로 element가 더 위에 있냐 아래에 있냐를 개념화 한 것
• inline을 block으로
  • position의 absoulte와 fixed 값을 사용하게 되면 display block으로 수정

CSS - Flex Containers 1

• inline-flex
  • flex는 수직으로 정렬(자기자신은 block)되려하고 가로 너비가 최대한 넓어지려고 함
  • inline-flex 는 수평으로 정렬(자기자신은 inline)되려하고 가로 너비가 최대한 좁아지려고 함
• flex-shrink
  • 기본값은 1
  • item의 감소 너비 비율을 설정

CSS - Flex Containers 2

• align-items
  • baseline 값 ⇒ item 안의 문자를 기준으로 정렬
• align-content
  • align-items가 1줄에 대한 정렬이라면 align-content는 2줄 이상의 모든 item의 정렬을 가능하게 함

CSS - Flex Items

• flex-grow
  • 증가되는 너비의 비율
  • flex-container에서 어느정도 비율을 차지할지를 설정
  • flex-item의 width 값을 제외한 너비의 비율
• flex-shirink
  • 감소 너비 비율
  • 0으로 설정하면 줄어드려하지 않음
• flex-basis
  • 요소의 기본 너비를 설정
  • width 값이 있어도 무시
• flex
  • flex: grow shrink basis;
  • flex 값을 사용할 때 basis 값을 생략하면 초기값이 auto 가 들어가는 것이 아니라 0 이 들어가기 때문에 grow 관련해서 문제가 발생할 수 있음
• order
• align-self
  • item을 개별단위로 관리할 수 있음
  • auto를 하게되면 flex-container에서 상속받음

CSS - Grid Containers 1

• grid-template-rows
  • 행의 개수 및 높이 지정
  • repeat에서 1fr를 사용하려면 cotainer 또는 item에 높이값이 지정되 있어야 함, 비율만 정하는 것이므로 눈에 잘 보이지가 않음
• grid-template-columns
  • 열의 개수 및 너비 지정
  • fr ⇒ fraction(공간 비율)
  • repeat(열의 개수, 공간 비율), grid-template-rows에서도 사용 가능
• grid-auto-rows, grid-auto-columns
  • 위에 두 속성이 명시적 으로 사용자가 범위를 지정해주었다면 그 외의 범위를 처리하기 위해 사용하는 암시적 속성
• grid-auto-flow: dense
  • 빈 공간이 생겼을 때 자리를 매우기 위해 사용하는 속성
  • row가 기본값, column으로 하면 열축을 기준으로 쌓여감
  • row, dense, col, col dense

CSS - Grid Containers 2

• justify-content(행 축, 수평), align-content(열 축, 수직)
  • grid container 영역의 정렬을 위한 속성
  • flex와 비슷
  • 속성 값의 이름이 조금 다름(기본 값은 normal, start, end, center, space-between, space-around, space-evenly)
• cell
  • item 한개의 영역을 가르키는 용어
• justify-items, align-items
  • cell 영역의 정렬을 위한 속성
  • space 관련 값은 없음

CSS - Grid Containers 3

• grid-area
  • 영역 이름 설정
  • .container header {grid-area: header;}
• grid-template-areas
  • grid-area 를 통해 설정한 이름이 있는 영역을 통해 배치를 하는 속성
  • . 대신 none 사용 가능
• grid-gap
  • 영역간의 간격 수정.
  • grid-gap: 10px 40px; ⇒ 행간 간격 10px, 열간 간격 40px
  • grid-row-gap, grid-column-gap으로 개별 설정 가능
  • 위에 속성에서 grid는 제거해도 됨(gap, row-gap, column-gap)

CSS - Grid Items 1

• line
  • 개발자 도구를 통해 line을 확인할 수 있음
• grid-row-start: n
  • 행에서 n번 line부터 시작하겠다는 의미
  • grid-row-end: n과 함께 사용, n까지 영역을 차지
  • grid-column-start, grid-column-end도 동일
  • span 2 ⇒ 두개의 영역을 확장 해라
  • 단축 속성 ⇒ grid-row: 시작 숫자 / 끝 숫자, grid-column: 시작 숫자 / 끝 숫자

CSS - Grid Items 2

• justify-self, align-self
  • 셀안의 item 외부에 빈 공간이 있어야 함 ⇒ 정렬은 빈 공간이 있어야 하므로 당연한 이야기
  • cell의 개별 정렬이 가능하게 함
  • normal 값을 사용하고 width, height가 auto이면 최대한 늘어나게 함

CSS - Grid Functions, Units (1)

• minmax
  • grid-template-columns: minmax(100px, 1fr) minmax(200px, 1fr); ⇒ 첫 번째 열의 item의 최소 너비는 100px, 최대 너비는 1fr, 두번째 열도 마찬가지
  • 명시적, 암시적 영역 둘 다 사용가능
  • auto 값을 설정하면 그 영역의 고유 height 및 width 값으로 설정 됨
• fit-content
  • fit-content(300px) ⇒ text 크기에 맞추어 width나 height를 300px 까지만 넓힐 것임

CSS - Grid Functions, Units (2)

• min-content
  • grid-template-columns: repeat(4, min-content);
  • 최소 너비 기준(문장에서 가장 긴 단어)으로 너비를 확장
  • 한글은 한글자가 기준(그리드단위? ⇒ 위?가 기준) ⇒ word-break: keep-all 을 통해 단어 단위로 기준 변경
• max-content
  • item이 가질 수 있는 최대 너비를 기준으로 너비를 확장
• auto-fit
  • grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  • 스크린이 커지고 작아질때 마다 브라우저가 유동적으로 개수를 수정
  • auto-fit 은 지정할 수 있는 minmax의 최대 너비, auto-fill 은 minmax의는 최소 너비를 기준으로 개수 정함

어려웠던 점

한줄평

오늘도 수고했어.

11월 26일

오늘 한일

프론트엔드 데브코스

• js 강의 수강

배운 것

어려웠던 점

한줄평

오늘도 수고했어.