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..

비동기 작업이 가질 수 있는 3가지 상태 Pending(대기 상태) : 현재 비동기 상태가 진행 중이거나 진행 할 수 없는 문제가 생겼을 때 Fulfilled(성공, 이행) : 비동기 작업이 의도한대로 이행이 되었을 때 상태 Rejected(실패) : 비동기 작업이 모종의 이유로 실패했을 때의 상태 / 취소 되는 경우도 포함 성공하거나 실패하면 그대로 작업이 끝남. resolve 가 되었을 때 function isPositive(number, resolve, reject) { setTimeout(() => { if(typeof number === 'number') { // 성공한 로직 -> resolve resolve(number >= 0 ? '양수' : '음수') } else { // 실패 -> rej..

동기 방식 자바스크립트는 코드가 작성된 순서대로 작업을 처리함 이전 작업이 진행 중 일 때는 다음 작업을 수행하지 않고 기다림 먼저 작성돈 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행한다. -> 동기 방식의 처리 동기적 처리 방식의 문제점 동기적 처리의 단점은 하나의 작업이 너무 오래 걸리게 될 시, 모든 작업이 오래 걸리는 하나의 작업이 종료되기 전까지 모두 멈추기 때문에, 전반적인 흐름이 느려진다. 웹사이트에서 버튼 하나하나마다 30초씩 걸리게 된다. -> 동기 처리 방식의 문제점 멀티 쓰레드 코드를 실행하는 일꾼 Thread를 여러 개 사용하는 방식인 'MultiThread' 방식으로 작동시키면 이런 식으로 분할 작업 가능 오래 걸리는 일이 있어도 다른 일꾼 Thread에게 지시하면 되므..

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({..

1. 리액트의 이벤트 시스템 리액트의 이벤트 시스템은 웹 브라우저의 HTML 이벤트와 인터페이스가 동일하기 때문에 사용법이 꽤 비슷함 2. 이벤트를 사용할 때 주의 사항 1. 이벤트 이름은 카멜 표기법으로 작성 HTML: onclick -> React: onClick 2. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달한다. 화살표 함수 문법으로 함수를 만들어 전달 렌더링 부분 외부에 미리 만들어 전달 3. DOM 요소에만 이벤트를 설정할 수 있음 DOM 요소에는 이벤트를 설정할수 있지만 컴포넌트에는 이벤트를 자체적으로 설정할 수 없음 3. 이벤트 종류 몇가지만 정리 해봤다. 나머지 이벤트는 리액트 매뉴얼 (http://facebook.github.io/react/doc..

... 스프레드 연산자 펼치는 연산자 -> 객체의 값을 새로운 객체에 부여해줌 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..