one Book a Day

Type Ahead input form Filter for a city or a state form 태그로 검색창을 만듭니다. 자동완성을 구현할 것임. filter로 DB에 있는 모든 검색어 중 일치하는 prefix를 가진 모든 문자열을 나열. cities DB const endpoint = "https://gist.githubusercontent.com/Miserlou/c5cd8364bf9b2420bb29/raw/2bf258763cdddd704f8ffd3ea9a3e81d25e2c6f6/cities.json"; const cities = []; fetch(endpoint) .then((blob) => blob.json()) .then((data) => cities.push(...data)); fetch로..

존경하는 김민준 개발자님의 저서를 읽고 정리했습니다. 컴포넌트 컴포넌트의 기능은 단순 템플릿 이상이다. data가 주어졌을 때 이에 맞추어 UI를 만들어 줌, 라이프사이클 API를 통해 컴포넌트가 화면에 나타날때, 사라질떄, 변화가 일어날 때 이벤트를 통제하고 임의 메서드를 만들어 특별한 기능을 붙여 줄 수 있습니다. 클래스형 컴포넌트 클래스는 state및 라이프사이클 기능 사용가능, 임의 메서드 작성 가능. JS의 클래스는 ES6에서 생김. 그전에는 prototype을 사용해야했음. render함수 안에서 보여주어야 할 JSX를 반환해야함. 함수형 컴포넌트 선언하기 편하고 메모리 자원도 클래스형보다 덜 사용한다. 빌드 후 배포할때도 함수형 컴포넌트를 사용하는 것이 파일 크기가 더 작다. (별 차이 없긴..

Image_Gallary script 각 panel들을 가져와 각각에 click event 나 transition 이벤트가 끝났을 떄 특정한 함수를 실행시켜 class를 부여, 선택자를 동적으로 선택할 생각입니다. css /* Flex Children */ .panel > * { margin: 0; width: 100%; transition: transform 0.5s; /* border: 1px solid red; */ flex: 1 0 auto; display: flex; justify-content: center; align-items: center; } .panel > *:first-child { transform: translateY(-100%); } .panel.open-active > *:f..

Array_Cardio 1. filter const fifteen = inventors.filter( (inventor) => inventor.year >= 1500 && inventor.year `${inventor.first} ${inventor.last}` ); console.log(fullNames); 요소들을 원하는 대로 가공해서 재생산. 3.sort const ordered = inventors.sort((a, b) => (a.year > b.year ? 1 : -1)); console.table(ord..

김민준(velopert)님의 리액트를 다루는 기술 2장을 읽고 정리하였습니다. JSX import React from 'react'; node_modules 디렉터리의 react 모듈을 import를 통해 불러와서 사용할 수 있게한다. 모듈을 불러와서 사용하는 것은 원래 브라우저(2017이전)에는 없던 기능.(Node.js에서 지원하는 기능(require)) 지금도 브라우저는단순 js만 불러오는 용도. 프로젝트 번들링은 불가능. 이러한 기능을 브라우저에서 사용하기위해 bundler를 사용(코드를 묶는다) Webpack, Parcel, browserify... react는 편의성과 확장성이 뛰어난 Webpack을 주로 사용. 번들러는 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐 하나의 파일을..

CSS 변수 제어하기. 어떤 속성값을 제어할 것이냐? name에 부여한 style의 spacing과 blur속성을 제어한다. this 키워드 동작을 나타내는 메서드는 객체의 state 즉 property를 참조하고 변경할 수 있어야한다. 이때 메서드가 자신이 속한 객체의 프로퍼티를 참조하려면 먼저 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다.(객체 내부의 메서드가 객체를 참조할 수 있어야 제어가 가능) this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수. this를 통해 자신이 속한 객체 똔느 생성할 인스턴스의 프로퍼티나 메서드를 참조. this는 함수가 실행됨과 동시에 함수내부에 선언됨 객체 내 메서드에서만 의미를 가지지 일반 함수에서는 undefined..

JS 30개 프로젝트 만들기. Wes Bos님 강의 2.Analog Clock 제어해야 될 요소들 (시침, 분침, 초침) transform-origin 은 0퍼센트일경우 왼쪽 끝이 축, 100퍼센트는 오른쪽 끝이 축.(변환원점) 하나 더주면 상하 축까지 조정. 축을 기준으로 rotate 움직임은 0.05초 동안 유지 transition-timing-function transition의 진행속도를 조절한다. east. linear, ease-in, ease-out, initial, inherit ... 각 시계침들을 요소로 1초마다 set Date를 불러 업데이트.(setInterval) now 날짜 객체의 시, 분.. 위 코드는 오타. hour은 getHour로 받아옴. 원본은 수정 setInterval..

자바 스크립트 30개 미니 프로젝트 만들기 - 1 Drum Kit JS 30개 프로젝트 만들기. Wes Bos님 강의 Drum Kit data key값으로 오디오를 불러오는 것이 핵심. key와 audio에 대해 각 event 속성을 불러 control event를 트리거로 classList를 통해 class를 추가, 제거시키므로써 입력에 대한 제어를 가능케 함. const div = document.createElement('div'); div.className = 'foo'; // our starting state: console.log(div.outerHTML); // use the classList API to remove and add classes div.classList.remove("foo..

pointerEvents 쓰면 된다. 마우스 이벤트 특정상황에서 막고 싶을 때. 리액트 스타일에서도 쓸수있음. style={ type !== null ? type === "contest" ? { animation: "1s moveRight1 forwards" } : { animation: "1s fadeout forwards", pointerEvents: "none", } : {} }

JS의 비동기 처리방식 동기 / 비동기 처리 동기(Syncronous)는 먼저 시작한 작업이 끝날 때 까지 다른 작업을 할 수 없다. 비동기(Asyncronous)는 동시에 여러가지 작업을 처리하며 기다리는 과정에서 다른 함수 호출이 가능하다. 비동기 처리의 예 다음과 같은 작업들은 주로 비동기적으로 처리하게 된다. Ajax Web API요청 : 화면을 렌더링해야하는데 서버쪽에서 응답을 해주기까지 마냥 대기할 수 없다. 비동기적으로 처리한다. Ajax function getData() { let data; $.ajax({ type: 'post', url: 'https://devlibrary00108.tistory.com/', data: { seungjoo:zzang, }, s..