Study
-
[Git & GitHub] 왕초보를 위한 깃과 깃허브 사용 튜토리얼Study/Frontend 2020. 2. 13. 13:00
Git & GitHub 튜토리얼 Git은 리눅스의 창시자 Linus Torvalds가 개발한 도구이다. 위는 깃허브에 Linus가 올린 첫 번째 수정 커밋인데 커밋 메세지가 눈길을 끈다. Initial revision of "git", the information manager from hell 지옥에서 온 정보 관리자... ㅋㅋㅋㅋ 얼마나 소스코드를 공동으로 관리하는 것이 힘들었는지 알 수 있는 메세지다. Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. 깃은 한마디로 버전 관..
-
자바스크립트 비동기 처리 async & awaitStudy/JavaScript 2020. 2. 10. 11:12
What is async & await? async & await 문법은 자바스크립트 비동기 처리 패턴 중 비교적 최근에 나온 문법이다. 이는 콜백 함수와 프로미스의 단점을 보완하고 가독성을 높이고 관리의 편의성을 높인 방식이다. 기본 문법 구조 async function 함수명() { await 비동기처리메소드명(); } async는 함수명 앞에 붙여주고 await는 비동기 처리 메소드명 앞에 붙여준다. await 뒤에 오는 비동기 처리 메소드는 반드시 Promise 객체를 반환하는 함수여야 한다. 보통 Axios와 같이 프로미스 객체를 반환하는 API 호출 함수가 비동기 처리 메소드 자리에 온다. 그리고 await 키워드는 async 함수 내부에서만 유효하다. 여러 개 비동기 처리 다루기 with H..
-
자바스크립트 비동기 처리 PromiseStudy/JavaScript 2020. 2. 9. 12:49
What is Promise? The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. Promise 객체는 자바스크립트의 비동기 처리에 사용되는 객체이며, 비동기 처리할 작업의 성공 또는 실패를 분리해서 코드를 실행하고 그에 대한 결과 값을 반환한다. Promise의 상태 프로미스는 Promise 객체가 생성되고 종료될 때까지 3가지 상태를 가지고 있다. 대기(pending) : 비동기 처리 로직이 아직 이행하거나 거부되지 않은 초기 상태 이행(fulfilled) : 비동기 처리가 성공적으로 완료되어 결과 값을 반환한 상태 거부(rejected..
-
자바스크립트 비동기 처리 다루기 (Asynchronous call)Study/JavaScript 2020. 2. 8. 09:00
왜 비동기 처리가 필요한가? 자바스크립트 코드가 작성된 순서대로 실행되어야 하는 경우가 있고 그렇지 않은 경우가 있다. 예를 들어, 서버에 데이터를 요청한 후에 데이터가 포함된 화면을 출력하는 코드가 있다고 하자. 그런데 어떠한 문제가 발생하여 데이터를 불러오는데 오랜 시간이 걸리게 되면 데이터를 불러오는 코드에서 작업이 멈추게 되고 그 다음에 작성된 코드는 실행조차 되지 않는다. 이와 같이 모든 코드가 작성된 순서대로, 즉 동기적으로 처리된다면? 아마 웹 애플리케이션을 실행하는데는 수십 분이 소요될 것이다. 이럴 때 필요한 것이 코드가 작성된 순서대로 실행되지 않고, 특정 작업의 처리가 끝날 때 까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리이다. 비동기 처리 Asynchronous..
-
React shouldComponentUpdate vs PureComponentStudy/React 2020. 1. 18. 10:49
shouldComponentUpdate - 컴포넌트가 업데이트 되는 시점에 호출되는 메서드 - 컴포넌트가 리렌더링 할지 말지를 결정하는 메서드 기본형태 shouldComponentUpdate(nextProps, nextState) { if(조건) { return true; } return false; }; - 리렌더링 할 조건을 작성한다 - true를 리턴하면 리렌더링하고, false를 리턴하면 리렌더링하지 않는다. 예시 import React, {Component} from 'react'; class Counter extends Component { state = { number: 0 }; shouldComponentUpdate(nextProps, nextState) { if(this.state.num..