TIL-210319

작성일 2021-03-19 In TIL Disqus:

What?

JS - Event, DOM
bubbling/capturing	delegation: page navigation	DOM Traversing	element.childNodes
ParentNode	Element.closest()

How?

유데미 강좌 일일 목표치 수강 완료
팀 project 진행중..
=> 벤치마킹 사이트 및 관련 기능들 확인 완료

TIL-210318

작성일 2021-03-18 In TIL Disqus:

What?

Project 진행 중..
=> 사이트 벤치마킹 하다 보니 따로 코딩 공부를 하지 못했다..하하
금방 끝날 줄 알았는데 생각보다 확인할 내용이 많아 시간이 오래 걸렸다.
아무래도 오늘 다하긴 무리일 것 같고 내일 이어서 작업해야겠다. 😁

TIL-210317

작성일 2021-03-17 In TIL Disqus:

What?

JS- Style, Attribute, Class
style.backgroundColor	getComputedStyle()	SetProperty	src/alt 등 속성 접근 가능
getAttribute()	setAttribute()	HTMLElement.dataset	Element.classList / add(), remove(), toggle(), contains()

How?

getComputedStyle() : 인자로 전달받은 요소의 모든 css속성 값을 담은 객체로 회신
출처 : https://developer.mozilla.org/ko/docs/Web/API/Window/getComputedStyle
HTMLElement.dataset
=> 읽기 전용 속성
=> 요소의 사용자 지정 데이터 특성(data-*)에 대한 읽기와 쓰기 접근 방법을 HTML과 DOM 양측에 제공
출처 : https://developer.mozilla.org/ko/docs/Web/API/HTMLOrForeignElement/dataset
Element.classList
=> 엘리먼트의 클래스 속성의 컬렉션인 활성 DOMTokenList를 반환하는 읽기 전용 프로퍼티
출처 : https://developer.mozilla.org/ko/docs/Web/API/Element/classList
big project 시작
=> 기획 개요 및 일정 관리 수립

TIL-210316

작성일 2021-03-16 In TIL Disqus:

What?

JS- Date, Timers, DOM
new Date()	timers: setTimeout(1)/setInterval(n)	DOM 작동원리	getElementById/ getElementsByTagName getElementsByClassName classList parentElement
document.querySelector() document.createElement() prepend()/append()	before()/after() remove() removeChild()

How?

DOM 문법 숙지
Mini project (smooth scroll, appear effect / notion에 따로 정리)

TIL-210315

작성일 2021-03-15 Edited on 2021-03-16 In TIL Disqus:

What?

Udemy CSS and Sass 진행중 => CSS animations
Udemy JS 강의 진행 중 => Array, number, Dates, Timers
키워드

CSS/Sass
@keyframes	animation	backface-visibility

JS
sort()	slice()	상태변수	fill()
Array.from()	인수변수 _	parseInt	parseFlot
Number.isNaN/ isFinite/isInteger/ isNaN	Math.sprt/max/ min/random round	remainder operator

How?

간단한 bankist app 구현
=> 버튼 요소에 이벤트 리스너 등록 (정렬 기능)
문법 숙지

What?

배열 index는 왜 0부터 시작할까?
=> 자바스크립트 책에서 배열은 0기반이라는 설명만 있을 뿐 본질에 대해선 나오지 않았다. 그래서 따로 검색해봤더니 메모리를 다룰 때 0기반 indexing/offsets을 사용하기 때문이라는 걸 알게 됐다.
(출처:https://stackoverflow.com/questions/11364533/why-are-slice-and-range-upper-bound-exclusive)

TIL-210314

작성일 2021-03-14 Edited on 2021-03-15 In TIL Disqus:

What?

Udemy CSS and Sass 진행중 => setting 및 header
Udemy JS 강의 진행 중 => 배열 문법
키워드

CSS/Sass
linear-gradient clip-path transform/translate

CSS/Sass
linear-gradient	clip-path	transform/translate

How?

setting 작업 및 header 작업
=> 로고 이미지 추가, 배경 추가, 메인 텍스트 작업

Why?

CSS and Sass 강의 추가
=> Sass(CSS전처리기)는 코드를 효율적으로 작성할 수 있다고 한다. 실무에 도움이 되고 작업이 수월해질 것 같아 추가로 공부를 진행하게 되었다.

TIL-210313

작성일 2021-03-13 In TIL Disqus:

What?

Udemy JS 강의 진행 중 => 배열 문법
키워드

로그인 구현 => 이벤트 차단,
preventDefault, find,
optional chaining findindex includes some

every flat, flatmap

How?

간단한 bankist app 구현
버튼 요소에 이벤트 리스너 등록 (로그인 기능, 사용자 데이터 이전, 사용자 삭제)

TIL-210312

작성일 2021-03-12 In TIL Disqus:

What?

Udemy JS 강의 진행 중 => 배열 문법
키워드

알고리즘 =>
필요성 및 관련 내용 검색 chaining methods 화살표 함수와 체이닝 find method

How?

알고리즘 강의 수강 예정

Why?

알고리즘 => 문제 해결 능력 기르기 위함

TIL-210311

작성일 2021-03-11 Edited on 2021-03-12 In TIL Disqus:

What?

인사이드 자바스크립트 => 완독
Udemy JS 강의 진행 중 => 배열 문법
키워드

forEach map set filter reduce DOM 요소 생성

How?

진도, 공부 내용 키워드로 업로드 진행 => 핵심 키워드 추출 (output)
관련 서적 반복해서 읽기 => 생각하고 이해하기
책과 실습 동시 진행 => 응용하기
복습하기 => 이해력 높이기

Why?

무의미한 진도빼기 지양하기 위함

TIL-210219-210222

작성일 2021-02-22 In TIL Disqus:

What?

현재 ‘인사이드 자바스크립트’책과 ‘유데미 JS 강의’로 공부 진행 중
인사이드 자바스크립트 => 2번째 책

How?

책 : 객체지향 프로그래밍 내용 들어가기 전, 이전 내용에 대한 개념 복습 진행 중
강의 : 클로저까지 진행 (책 진도와 맞추기 위함)
개요, 환경, 데이터 타입과 연산자 진행 완료

Why?

개념에 대한 이해도가 떨어지는 걸 느낌 => 개념 숙지를 위한 복습 진행

로그인 구현 => 이벤트 차단, preventDefault, find, optional chaining	findindex	includes	some
every	flat, flatmap