본문 바로가기

전체 글109

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.
JS30- Sticky Nav / Event Capture, propagation JS30 24강을 진행하면서 배운 내용을 정리해두려 합니다. 1.CSS position CSS 포지션이 잘 이해가안가는 부분이 있었는데 특정 element의 position을 fixed 로 바꾸면 아래에 있던 element가 위치가 위로 당겨지는 거였다. 그 이유는 absolute positioning에 해당하는 요소들인 문서의 normal flow 에서 벗어나기 때문이다. 스택오버플로우에서 해당 내용을 기막히게 비유한 글이있어서 간단하게. 옮겨 적는다. (https://stackoverflow.com/questions/33132586/why-isnt-my-margin-working-with-position-fixed/33132765#answer-33132765) HTML 문서를 하나의 강이라고 생각하고.. 2021. 6. 23.
4. HTTP 메서드 인프런의 모든개발자를 위한 HTTP 웹 기본 지식 강의를 들은 내용을 정리하는 포스트입니다. HTTP API를 만들어보자 아래의 기능을 지원하는 회원 정보 관리 API URI를 만드는 상황을 생각해보자 • 회원 목록 조회 => /read-member-list • 회원 조회 => /read-member-by-id • 회원 등록 => /create-member • 회원 수정 => /update-member • 회원 삭제 => /delete-membe 이렇게 동사를 활용해서 URI를 만드는 것이 맞는걸까??? URI = Uniform Resource Identifier 이다. 이때 Resource는 회원 그 자체를 의미하는거지 등록, 조회 수정 등의 행위는 해당하지 않는다. 따라서 회원이라는 단어에 집중하여 .. 2021. 6. 22.