리액트12 [D3JS] 4. 얼굴 그리기 with React & ES6 이 글은 https://youtu.be/2LhoCfjm8R4 강의를 정리하였습니다. 이번 강의에서는 - 리액트 컴포넌트 - 리액트 Props - JSX transpilation - ES6 - ES5의 함수와 ES6의 화살표 함수 - ES5의 var vs ES6의 let, const - ES6의 비구조화 할당 에 대해서 배웁니다. 우리가 사용하는 앱들도 새로운 업데이트가 생기듯 자바스크립트도 새 기능들이 업데이트 됩니다. 자바스크립트의 표준은 ECMA 스크립트인데요, 그래서 자바스크립트는 ECMA 스크립트 2019 혹은 ES6와 같은 이름으로 버전이 명명됩니다. ECMA 스크립트에 대한 설명은 위키백과 한국어보다 영어에 더 설명이 잘 되어 있습니다. https://en.wikipedia.org/wiki/E.. 2021. 10. 9. [D3JS] 2. svg로 얼굴 그리기 이 글은 https://youtu.be/2LhoCfjm8R4 강의의 2번째 강의를 요약하였습니다. [ 웹 기술을 이용하는 이유 ] 시각화를 하는데 다른 기술(파이썬, R, 자바 등)이 아니라 웹 기술을 이용하는 이유는? 1. 웹 브라우저를 이용하여 누구나 접근 가능하다. 2. 내 컴퓨터에 설치할 필요가 없다. 3. 모던 자바스크립트 기술을 이용할 수 있다. 4. 커스텀 디자인 작업이 가능하다. 5. 상호 작용이 가능하다. 우리가 데이터 시각화를 하기 위해 쓰이는 기술은 위와 같습니다. 1. HTML : 웹 페이지의 내용과 간단한 형식을 표현합니다. 일종의 뼈대(Skeleton)과 같습니다. 2. CSS : 웸 페이지를 꾸밀 수 있습니다. 일종의 Skin(피부), Theme(테마)와 같습니다. 같은 HTM.. 2021. 10. 3. React에서 setInterval 제대로 쓰는 방법 React에서 setInterval을 사용하는 방법은 Vanila Javascript와는 다릅니다. 아래의 예시 코드를 보시죠. import { useState } from "react"; import "./styles.css"; export default function App() { const [number, setNumber] = useState(0); const loop = setInterval(() => { console.log("number", number); setNumber(number + 1); if (number === 10) clearInterval(loop); }, 1000); return number : {number}; } 10초를 센 뒤에 루프가 끝나는 코드로 동작할 것 같지만.. 2021. 7. 29. 이전 1 2 다음
