리액트 함수형 컴포넌트 리팩토링하기 state 컴포넌트내 상태관리 클래스형 컴포넌트 this.state = { isVisible: true, users: [], }; 함수형 컴포넌트 useState 훅 사용하기 const [isVisible, setIsVisible] = useState(true); const [users, setUsers] = useState([]); useCallback const toggleVisibility = () => { setIsVisible(!isVisible); } 이 메서드는 요소를 다시 렌더링 할 때마다 다시 생성되는 문제가 있다. useCallback 으로 감싸서 함수를 재사용, 캐싱할 수있다. const toggleVisibility = useCallback( () => setIsVisible(!is.. 2020. 9. 30. 리액트 컴포넌트 절대경로 import 리액트 컴포넌트 import 시 절대경로와 상대경로 사용하기 상대경로 import Button from './components/Tabs'; 상대경로 단점 상대경로 폴더가 깊어질때는 아래처럼 패스가 길어지게 된다. 😭 import Button from '../../../../components/Tabs'; 절대경로로 import 하기 config파일 내 baseUrl 을 추가하면 아래처럼 절대경로로 import할 수 있다. 설정 변경시 IDE를 재실행 시켜줘야 제대로 작동한다. tsconfig.json { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } import Button from 'components/Tabs'; 절대경로 사용시 훨씬 .. 2020. 9. 30. javascript 연산자 Javascript Operator 자바스크립트 연산자 주요 기본식과 좌변식 의미 기본식 자바스크립트 일반식 및 기본 키워드 this 실행 문맥의 특별한 속성 function 함수 정의 class 클래스 정의 function 생성기 generator 함수 식 정의 yield 생성기 함수 일시정지 및 재개 yield* 다른 생성기 함수 또는 순회가능 객체로 위임 async function 비동기 함수 표현식 정의 await 비동기 함수를 일시 중지했다가 다시 시작하고 promise의 resolution/rejection을 기다림 [] 배열 초기자 및 리터럴 구문 {} 객체 초기자 및 리터럴 구문 /ab+c/i 정규식 리터럴 구문 ( ) 그룹 연산자. 좌변식 좌변값은 할당 대상을 의미 Property a.. 2020. 9. 29. canvas tutorial 1 Canvas API Javascript, HTML 엘리먼트를 통해 그래픽을 그릴 수 있다. 애니메이션, 게임 그래픽, 데이터 시각화, 사진 조작 및 실시간 비디오 처리를 위해 사용된다. Canvas API는 주로 2D 그래픽에 중점을 두고 있습니다. WebGL API 또한 엘리먼트를 사용하며, 하드웨어 가속 2D 및 3D 그래픽을 그린다. html JS const canvas = document.getElementById('canvas'); HTML 엘리먼트에 대한 참조를 얻는다. const ctx = canvas.getContext('2d'); 엘리먼트의 컨텍스트(렌더링될 그리기의 대상)를 얻는다. 실제 그리기 getContext('2d') 메서드를 이용해 그린다. ctx.fillStyle = 'gre.. 2020. 9. 26. Promise 프로미스 사용하기 Promise 프로미스는 비동기 작업의 최종 완료 또는 실패를 나타내는 객체, 콜백을 첨부하는 방식의 객체이다. 프로미스 장점 콜백은 자바스크립트 Event Loop이 현재 실행중인 콜 스택을 완료하기 이전에는 절대 호출되지 않는다. 비동기 작업이 성공하거나 실패한 뒤에 then() 을 이용하여 추가한 콜백의 경우에도 위와 같다. then() 을 여러번 사용하여 여러개의 콜백을 추가 할 수 있으며 각각의 콜백은 주어진 순서대로 하나 하나 실행되게 된다. chaining Promise.then() then() 메서드는 Promise를 리턴하고 두 개의 콜백 함수를 인수로 받는다. 하나는 Promise가 이행했을 때, 다른 하나는 거부했을 때를 위한 콜백 함수이다. const promise1 = new Pr.. 2020. 9. 23. 비동기 Asynchronous 이해하기 Asynchronous 비동기 보통 코드는 한번에 한가지 사건만 발생하면서 순차적으로 진행된다. 만약 어떤 함수의 결과가 다른 함수에 영향을 받는다면, 그 함수는 다른 함수가 끝나고 값을 산출할 때까지 기다려야 한다. 그리고 그 과정이 끝날 때 까지, 유저의 입장에서 보면, 전체 프로그램이 모두 멈춘 것처럼 보이게 된다. 기다리는 동안 다른 작업을 수행할 수 있는것, 이것이 비동기 프로그래밍의 기본이다. Blocking code 웹 앱이 브라우저에서 특정 코드를 실행하느라 브라우저에게 제어권을 돌려주지 않으면 브라우저는 마치 정지된 것처럼 보일 수 있다. 이러한 현상을 blocking 이라고 부른다. Threads 쓰레드는 기본적으로 프로그램이 작업을 완료하는데 사용할 수 있는 단일 프로세스이다. 각 스.. 2020. 9. 23. 이전 1 ··· 76 77 78 79 80 81 82 83 다음
