개발38 [D3JS] 6. 데이터 시각화 자료 웹사이트 (코로나 바이러스 지도) 이 글은 https://youtu.be/2LhoCfjm8R4 강의를 정리한 글입니다. 2021년 강의답게 코로나 바이러스를 보여주는 실습을 하는군요. 수업에 나온 지도는 https://coronavirus.jhu.edu/map.html COVID-19 Map - Johns Hopkins Coronavirus Resource Center Coronavirus COVID-19 Global Cases by the Center for Systems Science and Engineering (CSSE) at Johns Hopkins University (JHU) coronavirus.jhu.edu 여기서 볼 수 있습니다. 빨간색 원을 클릭하면 자세한 정보가 나오는 interaction이 있습니다. 이 지도에 대.. 2021. 10. 21. [D3JS] 5. 얼굴 그리기 with Semantically meaningful JSX refactoring 이 글은 https://youtu.be/2LhoCfjm8R4 강의를 듣고 정리하였습니다. [Compartmentalizing Complexity] Compartmentalize는 "서로 영향을 주지 않도록 구분하다"라는 뜻입니다. https://vizhub.com/curran/be34ae5bb6ef438b9047b0c717d5315c?edit=files&file=index.js Smiley Face Part V Splitting React components into multiple files using ES6 modules. Bonus: React Fragments! vizhub.com 지난 강의에 이어 위의 코드를 리팩토링 해봅시다. 19~20 번째 라인은 not semantically meaning.. 2021. 10. 11. [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] 3. React + d3 얼굴 그리기 이 글은 https://youtu.be/2LhoCfjm8R4 강의를 정리한 것입니다. [ React + D3 얼굴 그리기 ] 드디어 D3를 사용하는군요! svg와 어떻게 다를지 궁금합니다. svg 에는 arc가 없지만 d3에는 arc가 있습니다. arc란 뭘까요? arc는 d3-shape에 있습니다. https://github.com/d3/d3-shape GitHub - d3/d3-shape: Graphical primitives for visualization, such as lines and areas. Graphical primitives for visualization, such as lines and areas. - GitHub - d3/d3-shape: Graphical primitives f.. 2021. 10. 4. [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. [D3JS] 데이터 시각화란 무엇인가 회사에서 D3JS를 써먹어 보기 위해 강의를 듣기 시작했습니다. https://youtu.be/2LhoCfjm8R4 이 강의를 들으며 정리를 해보려고 합니다! 이 강의는 양이 많고 자막이 없지만 d3js를 심도 있게 공부할 수 있고, 영어 리스닝 실력이 좋아지고(?), 무료이고, 무엇보다 Hooks를 이용한 React로 구현을 알려준다는 게 좋아서 이 강의를 선택했습니다. 강의를 해주시는 분은 Curran Kelleher이고 그의 유튜브 채널은 https://www.youtube.com/channel/UCSwd_9jyX4YtDYm9p9MxQqw 여기입니다. Visualization Analysis & Design (Tamara Munzner)의 책을 바탕으로 만든 강의라고 합니다. 데이터 시각화는 시각적.. 2021. 9. 25. "나는 LINE 개발자입니다"를 읽고 집 근처 도서관에 가서 책을 구경하는데 "나는 LINE 개발자입니다"라는 책이 눈에 띄었다. 다른 회사 개발자들의 삶은 어떨까 궁금해서 냉큼 빌려왔다. 라인에서 일하는 개발자들이 어떻게 개발자가 되었는지부터 라인에 입사하게 된 이유, 라인에서는 어떻게 일하는지 등의 이야기들이 있었다. 무엇보다 좋았던 건 나라는 개인과 지금 다니는 회사 모두에게 유익한 내용이라는 점이었다. 개발자 개인에게 좋은 내용을 먼저 소개하고, 회사에 도움이 되는 내용을 그다음에 소개하겠다. 더 많이 성장하고 싶은 주니어 개발자의 공부 팁 1. 개발에 대한 흥미 잃지 않기 개발자로 일하고 계신 분들은 대부분 개발을 좋아하신다. 하지만 좋아하는 정도에서는 차이가 있다고 생각한다. 개발자 분들 중에도 쉬는 시간에도 개발을 하고 새로 출.. 2021. 9. 12. 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. AI 이미지 캡셔닝 - Image Captioning 이 글은 Washington University in St.Louis의 Jeff Heaton 교수님의 강의를 참고하였습니다. 링크 : https://github.com/jeffheaton/t81_558_deep_learning/blob/master/t81_558_class_10_4_captioning.ipynb 딥러닝 학습을 통해 이미지 캡셔닝(Image Captioning)을 하는 방법에 대해 알아보겠습니다. 목차는 다음과 같습니다. 1. Image Captioning이란? 2. 전체적인 구조 3. Word Embedding(Glove) 4. 실습 예제 1. Image Captioning이란? 이미지를 설명하는 캡션(설명)을 만들어 내는 것을 의미합니다. 즉 이미지를 입력으로 넣으면 문장이 만들어지는 .. 2020. 12. 16. 이전 1 2 3 4 5 다음
