Skip to content

Latest commit

 

History

History
335 lines (229 loc) · 9.26 KB

4주차.md

File metadata and controls

335 lines (229 loc) · 9.26 KB
Raw

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 강의 수강

배운 것


어려웠던 점


한줄평

오늘도 수고했어.