TIL75 JS30-Whack A Mole JS30 30강을 진행하면서 배운 내용을 정리해두려 합니다. 1.textContent와 innerText의 차이. 나는 지금까지 이 두개가 그냥 같고 별다른 차이가 없다고 생각했는데 큰차이가 있었다. 결론적으로는 textContent가 성능상 훨씬더 유리하다. 이유는 아래와같다. 브라우저는 자동적으로 페이지의 레이아웃을 계산하여 각 element와 CSS를 화면에 렌더링 한다. 이하의 코드를 보자. elementA.className = "a-style"; var heightA = elementA.offsetHeight; // layout is needed elementB.className = "b-style"; // invalidates the layout var heightB = elementB.off.. 2021. 6. 27. JS30-Countdown Timer JS30 29강을 진행하면서 배운 내용을 정리해두려 합니다. 1. HTML 요소에 name 어트리뷰트가 있으면 document에서 메소드 가져오는것 처럼 선택이 가능함. ... ... //queryselector를 쓰지않고 document에서 바로 부를수 있다. document.customForm.addEventListener( ... const mins = this.minutes.value; //form 안의 input 엘리먼트도 name 속성이 있어서 바로 선택이 가능함. ... ) 2. 시간 구하기 관련 구현 //내가 구현한 방식. ... let timeInput; let seconds= 0; let minutes = 0; let id; function startTimer(e) { e.prevent.. 2021. 6. 27. JS30 - Video Speed Controller JS30 28강을 진행하면서 배운 내용을 정리해두려 합니다. 1. 최소 값이 있는 구간 구하기. const y = (e.offsetY / this.offsetHeight); const min = 0.4; const max = 4; const speedX = y * (max-min) + min; 이런 간단한 부분을 수학을 조금만 쓰면 되는데 나는 수학적 응용력이 너무 떨어지나보다... 이부분을 어떻게 구현할지 1시간 넘게 고민했는데 결국 구현하지 못하고 강의를 참조 했다. 2021. 6. 25. JS30-Stripe Follow Along Dropdown JS30 26강을 진행하면서 배운 내용을 정리해두려 합니다. 1. Arrow function은 this를 바인딩 하지 않기 때문에 arrow function 에서 this를 쓰면 바깥 스코프의 this를 사용함. function handleEnter() { this.classList.add('trigger-enter'); setTimeout(() => { //여기서 this는 addeventlistener 가 붙은 element를 가리킨다. this.classList.add("trigger-enter-active"); }, 150) function handleEnter() { this.classList.add('trigger-enter'); setTimeout( //setTimeout은 기본적으로 콜백함.. 2021. 6. 24. 6.HTTP 상태코드 인프런의 모든개발자를 위한 HTTP 웹 기본 지식 강의를 들은 내용을 정리하는 포스트입니다. 상태 코드 클라이언트가 보낸 요청의 처리 상태를 응답에서 알려주는 기능이다. • 1xx (Informational): 요청이 수신되어 처리중 (실무에서 아예 안씀) • 2xx (Successful): 요청 정상 처리 • 3xx (Redirection): 요청을 완료하려면 추가 행동이 필요 • 4xx (Client Error): 클라이언트 오류, 잘못된 문법등으로 서버가 요청을 수행할 수 없음 • 5xx (Server Error): 서버 오류, 서버가 정상 요청을 처리하지 못함 만약 모르는 상태코드가 나오면? => 클라이언트는 상위 상태코드로 해석해서 처리한다. ex) • 299 ??? -> 2xx (Success.. 2021. 6. 23. 5. HTTP 메서드 활용 인프런의 모든개발자를 위한 HTTP 웹 기본 지식 강의를 들은 내용을 정리하는 포스트입니다. 클라이언트에서 서버로 데이터 전송 클라이언트에서 서버로 데이터 데이터 전달 방식은 크게 2가지 • 쿼리 파라미터를 통한 데이터 전송 - GET - 주로 정렬 필터(검색어) • 메시지 바디를 통한 데이터 전송 - POST, PUT, PATCH - 회원 가입, 상품 주문, 리소스 등록, 리소스 변경 클라이언트에서 서버로 데이터를 전송하는 4가지 상황을 살펴보자. HTTP API 설계 • HTTP API - 컬렉션 - POST 기반 등록 - 서버가 리소스 URI 결정 • HTTP API - 스토어 - PUT 기반 등록 - 클라이언트가 리소스 URI 결정 • HTML FORM 사용 - 순수 HTML + HTML form.. 2021. 6. 23. 이전 1 2 3 4 5 6 ··· 13 다음
