TIL - 22년 5월 2주차

김정현·2022년 5월 9일
tip
0

주간 공부 기록

목록 보기
1/33
post-thumbnail

22.05.08

드림코딩 FE101강의 시청
-coordinate007 만들기
-findRabbit 만들기

해당 포스트
https://velog.io/@yopi27/FE-프론트엔드-필수-브라우저-101-311

coordinate007, findRabbit 만들기를 통해
마우스에 반응하여 요소를 움직이는 방법과
스크롤 위치를 조작하는 방법을 공부하였다

  • 위치값을 변경하는 이벤트를 실행할 때 요소의 position에 absolute를 줘야하는 것
  • mousemove 이벤트
  • 변수명.classList.add
  • e.clientX, e.clientY
  • 요소명.style.top 으로 css 조작하기
  • transform:translate()
  • .getBoundingClientRect()
  • window.scrollTo()
  • 요소명.scrollIntoView()와 속성(behavior, block, inline)


오늘 공부하면서 느낀점은 js에서 html을 조작하는 기본기가 정리되지 않았다는 점이다

const 변수명 = document.querySelector("")을 사용해서 html의 요소를 지정한다
const 변수명 = document.createElement("")를 사용해서 js로 html요소를 생성한다
document.부모요소.append(변수명)를 사용해서 생성한 요소를 부모요소에 연결한다

https://velog.io/@yopi27/가상-선택자-정리
가상클래스는 부모태그:가상선택자의 구조가 아니다
나는 계속 부모태그 다음 바로 n번째 자식을 찾는 방식이 맞는 것 같다고 생각하지만
부모태그 해당순서의태그:first-child
부모태그 해당순서의태그:nth-child(n)
부모태그 해당순서의태그:last-child로 입력해줘야 한다
n번째 순서에 따라 해당하는 태그를 직접 찾아 입력해줘야하니
헷깔릴때는 내 기준으로 더 번거로운 방식이 맞는 방식이다
부모태그 찾고싶은태그:nth-of-type(n)을 사용하면 찾고싶은 태그만 순서대로 찾을 수 있다

22.05.09

드림코딩 fe101 강의 시청(4-1~4-11)
-DOM

  • DOM, DOM Tree
  • EventTarget
  • CSSOM, Render Tree
  • 웹 성능에 관하여 (layout, paint, conposition)
  • 레이어 데모(웹 레이어 3D로 확인하기)
  • http://csstriggers.com/ 참고 사이트
  • 웹 성능 확인 방법
  • 부모요소.removeChild()
  • 부모요소.insertBefore('추가할 노드', '참조할 노드')
  • 변수명.setAttribute('key', 'value')
  • 요소.style.transform으로 translateX, translateY값 변경하기
  • innerHTML의 효용

22.05.10

드림코딩 fe101 강의 시청(5-1~5-5, 6-1~6-4)
-쇼핑 리스트(투두 리스트) 만들기
-작성한 코드 리팩토링하기

  • script로 파일 연결할 때 head에 넣고 defer이나 load안써주면 에러가 난다
  • input에 이벤트 넣고 싶을 때는 input의 부모form태그에 이벤트를 줘야한다
  • innerHTML은 ""안에 HTML태그를 처음부터 써주고 값을 할당해주면 된다. 백틱과 ${}을 함께 사용.
  • 브라우저가 value를 못찾아서 한시간을 날렸는데 querySelector로 변수 지정할 때 오타가있었다
  • 변수명.classList.add("클래스명");으로 클래스 주기
  • const 변수명 = event.target.parentElement; 로 부모요소 찾기
  • 변수명.remove(); 찾은요소 제거하기
  • box-sizing을 사용해서 padding이나 border사이즈가 width, height에 포함 될 수 있도록 한다
  • block레벨의 요소는 자동적으로 오른쪽에 마진이 생긴다. 이 때 마진값을 auto로 주면 양쪽 모두 적용된다
  • transformr과 transition
  • ul과 overflow-y: auto;
  • 이벤트를 처리하는 함수는 보통 함수명 제일 앞에 on을 붙혀준다
  • createElement()로 요소를 생성한 뒤에 변수명.setAttribute('속성', '속성 내용')으로 속성을 준다
  • sources탭의 brakepoint를 지정하여 문제를 확인한다
  • 요소.scrollIntoView();
  • 주석은 코드를 그대로 설명하는 것이 아니라, 코드의 의도를 담아야 한다
  • event handler와 event target
  • bubbling과 capturing
  • preventDefault()와 passive
  • event Delegation
  • innerHTML을 사용한 리팩토링
  • 요소에 고유 ID를 부여할 때 사용하는 UUID
  • 개발자 도구의 sources로 원하는 정보값 찾기
  • 단순히 event.target.parentNode를 찾아서 삭제하는 경우 코드 개선 시 에러가 발생할 수 있다

22.05.11

드림코딩 fe101 강의 시청(6-4~6-8, 7-1~7-4)

  • 이벤트 버블링에 의해 부모 컨테이너는 자식 요소에서 발새하는 모든 이벤트를 들을 수 있다
  • .quesrySelectorAll()로 지정된 셀렉터의 살아있지 않은 NodeList를 받아올 수 있다
  • NodeList는 배열이다
  • forEach, for loop으로 모든 자식에게 evet를 주는 것 보다 자식들의 부모에 event를 한번만 주는 것이 더 좋다
  • 이벤트의 target과 currentTarget을 활용하면 원하는 정보를 집중적으로 처리할 수 있다
  • innerHTML = `${}`을 사용하면 효율적인 코드를 만들 수 있다
  • setAttribute로 요소의 data-id값을 지정해주기
  • keydown이벤트와 keyup이벤트
  • form태그를 사용하면 세부적인 설정들을 생략할 수 있다
  • 변수의 저장방식과 할당, 참조
  • object의 저장방식과 할당, 참조
  • ture로 인식되는 값, false로 인식되는 값
  • 클래스와 콜백함수(다시 듣기)

22.05.12

드림코딩 fe101 강의 시청(8강)
-carrot, bug 게임 만들기

오전부터 시작한 게임 만들기가 오후까지 막막했지만
저녁시간부터 코드를 입력하는 것에 익숙해진 느낌으로 기능들을 만들 수 있었다
아직은 되는데로 가져다 붙힌 코드들이지만 아침까지도 못하던 일을 하고 있다는 점에서 성장한 점이 있는 하루여서 성취감을 느꼈다
오늘의 TIL에 상세한 내용은 게임을 완성한 뒤 합쳐서 작성할 예정이다

22.05.13

드림코딩 fe101 8, 9, 10강 시청, 9강은 듣다가 이해가 안돼서 10강으로 넘어감

carrot&bug 셀프 코딩 후 정리

CSS

  • %크기 단위는 부모요소의 크기에 비례한다
  • background, background-size
  • transform: scale()

JS
//요소 선택

  • document.querySelector("")

//요소 좌표 찾기

  • 변수명1 = 요소.getBoundingClientRect()
  • 변수명1.height, 변수명1.width, 변수명1.top...

//오디오 객체 설정, 재생하기

  • const 변수명2 = new Audio()
  • 변수명2.src = "파일경로.확장자"
  • 변수명2.play(), 변수명2.pause()

//시간 관련 메서드

  • setTime()
  • new Date()
  • getTime()

//반복 관련 메서드

  • setInterval()
  • clearInterval()

//countdown 코드

let interval;
function start() {
  interval = setInterval(countdown, 1000);
}

let limiteTime = 10;
const countdown = () => {
  limiteTime--;
  time.innerText = `00:0${limiteTime}`;
  if (limiteTime <= 0) {
    limiteTime = 10;
    clearInterval(interval);
  }
};

참고 영상:
https://www.youtube.com/watch?v=Rib69h2DOxg
https://www.youtube.com/watch?v=QAnPghdovEY
https://www.youtube.com/watch?v=QAnPghdovEY

//새로 고침 실행

  • location.reload()

//css값 변경 예시

  • 변수명.style.display = "flex"
  • 변수명.style.position = "absolute"

//두 수 사이의 난수 발생 함수

function randomIntFromInterval(min, max) {
  // min and max included
  return Math.floor(Math.random() * (max - min + 1) + min);
}

//요소 생성, 속성 부여, 연결

  • const 변수명 = document.createElement("태그명")
  • 변수명.setAttribute("속성", "속성값")
  • 부모요소.append(변수명);

//무작위 위치 생성, 부여

  • 요소를 발생시킬 필드의 위치값을 getBoundingRect()로 찾은 뒤 두 수 사이의 난수 발생 함수를 사용
  • 그렇게 만든 값을 변수로 지정하여 요소.style.top, 요소.style.left로 재할당한다
  • 재할당시 'px'을 붙혀서 입력해준다
  • 이 때 요소에 position값으로 absolute를 줘야 한다

//기타

  • innerText, innerHTML, textContent
  • return은 값을 반환하는 기능과 함수를 종료하는 기능이 있다

리펙토링과 class

  • class
  • constructor
  • instance
  • this
  • setClickListener()

자료구조와 event loop

  • OS
  • Process(code, stack, heap, data)
  • Thread
  • 멀티쓰레드, 싱글쓰레드
  • memory heap
  • call stack(LIFO)
  • queue(FIFO), task queue
  • event loop

22.05.14

복습 후 휴식

profile
김정현
개발 공부 블로그
다음 포스트

TIL - 22년 5월 3주차

0개의 댓글