async & await
·
JavaScript
async // async function hello() { return 'hello'; } async function helloAsync() { return 'hello Async'; } console.log(hello()); // hello console.log(helloAsync()); // Promise {} // pending promise를 출력하면 그대로 출력이 됨 // async를 붙이면 자동으로 비동기처리가 됨 // async function hello() { return 'hello'; } async function helloAsync() { return 'hello Async'; // Promise resolve로 반환함 } helloAsync().then((res) => { cons..
Promise
·
JavaScript
비동기 작업이 가질 수 있는 3가지 상태 Pending(대기 상태) : 현재 비동기 상태가 진행 중이거나 진행 할 수 없는 문제가 생겼을 때 Fulfilled(성공, 이행) : 비동기 작업이 의도한대로 이행이 되었을 때 상태 Rejected(실패) : 비동기 작업이 모종의 이유로 실패했을 때의 상태 / 취소 되는 경우도 포함 성공하거나 실패하면 그대로 작업이 끝남. resolve 가 되었을 때 function isPositive(number, resolve, reject) { setTimeout(() => { if(typeof number === 'number') { // 성공한 로직 -> resolve resolve(number >= 0 ? '양수' : '음수') } else { // 실패 -> rej..
동기 & 비동기
·
JavaScript
동기 방식 자바스크립트는 코드가 작성된 순서대로 작업을 처리함 이전 작업이 진행 중 일 때는 다음 작업을 수행하지 않고 기다림 먼저 작성돈 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행한다. -> 동기 방식의 처리 동기적 처리 방식의 문제점 동기적 처리의 단점은 하나의 작업이 너무 오래 걸리게 될 시, 모든 작업이 오래 걸리는 하나의 작업이 종료되기 전까지 모두 멈추기 때문에, 전반적인 흐름이 느려진다. 웹사이트에서 버튼 하나하나마다 30초씩 걸리게 된다. -> 동기 처리 방식의 문제점 멀티 쓰레드 코드를 실행하는 일꾼 Thread를 여러 개 사용하는 방식인 'MultiThread' 방식으로 작동시키면 이런 식으로 분할 작업 가능 오래 걸리는 일이 있어도 다른 일꾼 Thread에게 지시하면 되므..
다시 공부하는 리액트 5장 ref.DOM 이름 달기
·
React/다시 공부하는 리액트
1. ref는 어떤 상황에서 사용해야 할까? 특정 DOM에 작업을 해야 할때 ref를 사용해야함 여기서 특정 작업이란 DOM을 꼭 직접적으로 건드려야 할때를 말함 예를 들어 일반 순수 JS 및 jQuery로 만든 웹사이트에서 input을 검증할때는 특정id를 가진 input에 클래스를 설정함 2. 예제 컴포넌트 생성 class ValidationSample extends Component { state = { password: "", clicked: false, validated: false, }; handleChange = (e) => { this.setState({ password: e.target.value, }); }; handleButtonClick = () => { this.setState({..
다시 공부하는 리액트 4장 이벤트 핸들링
·
React/다시 공부하는 리액트
1. 리액트의 이벤트 시스템 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷함 2. 이벤트를 사용할 때 주의 사항 1. 이벤트 이름은 카멜 표기법으로 작성 HTML: onclick -> React: onClick 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. 화살표 함수 문법으로 함수를 만들어 전달 렌더링 부분 외부에 미리 만들어 전달 3. DOM 요소에만 이벤트를 설정할 수 있음 DOM 요소에는 이벤트를 설정할수 있지만 컴포넌트에는 이벤트를 자체적으로 설정할 수 없음 3. 이벤트 종류 몇가지만 정리 해봤다. 나머지 이벤트는 리액트 매뉴얼 (http://facebook.github.io/react/doc..
spread 연산자(...)
·
JavaScript
... 스프레드 연산자 펼치는 연산자 -> 객체의 값을 새로운 객체에 부여해줌 const cookie = { base: 'cookie', madeIn: 'korea' }; const chocochipCookie = { ...cookie, toping : 'chocochip' }; const blueberrypCookie = { ...cookie, toping : 'blueberry' }; const strawberryCookie = { ...cookie, toping : 'strawberry' }; console.log(chocochipCookie); // {base: "cookie", madeIn: "korea", toping: "chocochip"} console.log(blueberrypCookie..
오류확인자
'분류 전체보기' 카테고리의 글 목록 (23 Page)