전체 글 80

React에서 Bootstrap UI 사용하기

Bootstrap UI 설치하기 프로젝트 생성 후, 프로젝트 폴더로 이동하여 아래 명령어로 bootstrap 설치 npm install react-bootstrap bootstrap 사용하려는 js 파일의 제일 상단에 입력하여 사용 준비 import 'bootstrap/dist/css/bootstrap.min.css'; Bootstrap 사용 예시 아래와 같이 입력하면, 손쉽게 예쁜 화면을 만들수 있습니다. 더보기 import logo from './logo.svg'; import 'bootstrap/dist/css/bootstrap.min.css'; import { Container, Button, Row, Col, Card, Navbar } from 'react-bootstrap'; function ..

Web/React 2021.12.07

Volume Rendering - React

리소스로 가지고 있는 vti 파일을 출력하는 예제입니다. 먼저 public 폴더에 vti 파일을 넣습니다. 그리고 그 파일에 접근할때는 process.env.PUBLIC_URL+'/LIDC2.vti' 로 접근하면 됩니다. 실제 코드는 아래와 같습니다. 더보기 import './App.css' import { useRef, useEffect } from 'react'; // Load the rendering pieces we want to use (for both WebGL and WebGPU) import '@kitware/vtk.js/Rendering/Profiles/Volume'; // Force DataAccessHelper to have access to various data source imp..

ETC 2021.12.05

React 기초

React React는 front-end 코드를 구조화에 중점을 둔 라이브러리입니다. JSX를 이용하여 JS를 확장한 문법을 사용하며, 작은 단위의 컴포넌트를 재사용하는데 최적화 되어 있습니다. Angular에 비하여, 상대적으로 단순합니다. React 기본 구조 React 기본에 대해서는 이곳에서 잘 알려주므로 여기 참고하세요 https://react.vlpt.us/basic/ 함수형 컴포넌트 컴포넌트는 연관있는 함수 변수등을 모아놓은 객체인데, 가장 비슷한 것은 클래스입니다. 함수형 컴포넌트는 클래스 보다 짧고 직관적인 코드 작성이 가능하다고 합니다(저는 클래스가 익숙해서인지 클래스가 편하든데). HOOK 함수형 컴포넌트의 가장 큰 단점이 생명주기를 관리하는 함수가 없다는 점입니다. 생명주기란 예를 ..

Web/React 2021.12.05

React를 이용한 VTK.js 개발하기

node.js(npm 사용하기 위해)을 설치 yarn(npm와 비슷한 모듈 설치 매니져)을 npm을 이용하여 설치 npm install --global yarn React 프로젝트 생성 yarn create react-app vtk 설치 cd yarn add @kitware/vtk.js src/App.js 파일을 아래의 코드로 덮어쓰기 더보기 import './App.css' import { useRef, useEffect } from 'react'; import '@kitware/vtk.js/Rendering/Profiles/Geometry'; import vtkActor from '@kitware/vtk.js/Rendering/Core/Actor'; import vtkMapper from '@kitw..

ETC 2021.12.05

dev-leon의 블로그를 구글에서 검색할 수 있게 메타태그 등록하는 법

옆자리에 앉은 동료의 Tistroy 글은 구글 검색이 되고, 내 글은 검색이 되지 않아서 알아보았습니다. 구글 서치에 등록이 되어 있어야 검색이 되는데, 제 블로그는 등록이 되어 있지 않았습니다. 동료도 딱히 등록을 해준건 아니었는데, 제껀 검색이 안되니까 답답했습니다. 여러가지 방법을 알아보니까, 메타태그를 이용하여 구글 서치에서 제공하는 태그를 제 블로그에 적용하면 된다는 글을 보았고 이 글이 메타테그가 적용된 최초의 글이 될거 같습니다. 부디 구글에서 검색이 되길 바라며...... 참고한 사이트들 : https://interested-in.tistory.com/7 https://simjuliana.tistory.com/2850

카테고리 없음 2021.11.16

pytorch 1.9.1 cu102 버전 설치 방법

파이토치 공식 홈페이지에서 버전 1.9.1버전이 안보임.(20211103) 카톡커뮤니티에서는 홈페이지 업데이트 중이 아니냐는 의견도 있었음. 어쨌든 내가 필요한 버전인 1.9.1과 cuda10.2 버전을 찾기 위해 명령어 중 일부를 검색해서 비슷한 명령어를 찾아서 내가 원하는 형태로 변환했음. 일단 설치는 되었고 윈도우2016서버 클라우드 pc에서 9.2버전의 쿠다드라이버를 쓴다고 바꾸라고 하고 딥러닝 신경망을 안 돌아갔음. 드라이버 업데이트를 하려다가 혹시나 문제가 생길까바 그냥 다른 버전의 토치를 깜. 그래픽 드라이버를 업데이트하면 돌아갈듯 한데 일단 필요할 듯 하여 기록에 남겨둠. pip3 install torch==1.9.1+cu102 torchvision==0.10.1+cu102 torchaud..

AI 2021.11.04

Q-learning과 Deep Q-learning

Q-learning의 한계 그리드 월드는 Q-leaning으로 Q함수 테이블을 이용해 답을 구할수 있습니다. 그런데 만일 그리드 월드의 장애물 위치나 완료지점의 위치가 바뀌게 되면, 처음부터 학습을 다시 시켜야 합니다. 왜냐면 Q함수 테이블은 하나의 문제만을 가정하고 만든 테이블이기 때문에 게임의 상태가 바뀌면 Q함수도 모두 바꾸어 주어야 합니다. 근사함수(Approximation)의 등장 근사시킨다는 말은 대략적인 경향을 찾는다는 말로 이해하면 됩니다. 즉 완벽한 하나의 값을 찾기 보다는 대략적인 경향을 찾는 방법을 그리드에 대입해주는 것입니다. 그리드 월드에 대입하여 설명하면 하나의 그리드에 특정 답을 찾는게 아니고, 장애물의 위치와 완료지점을 고려한 대략적인 답을 찾는 함수를 찾으면 여러 종류의 그..

AI/강화학습 2021.10.09

그리드 월드와 Q-learning

그리드 월드란? 강화학습의 Hello world와 같은 예제입니다. 사각 그리드가 주어지고 시작점과 완료지점, 장애물 존재하며 Agent는 시작점에서 출발하여 장애물을 피하여 완료지점에 도착하면 성공하는 게임입니다. Q-learning 강화학습의 종류가 여러가지가 존재하는데, 그 중에서 기초적인 알고리즘에 해당하는 것입니다. 그리드월드가 5x5로 구성되어 있고, 그리드에서 수행할수 있는 동작이 4개(위치 이동)라면 100개의 Q값을 가졌다고 가정하고 가장 적절한 Q값을 찾는 알고리즘입니다.

AI/강화학습 2021.10.09

강화학습 용어들

시작하기 강화학습이란 Agent가 Environment에서 목적를 이루기 위해 Action을 수행하여, Environment로부터의 Feedback을 이용하여 최적의 Policy를 만들어 가는 방법입니다. 그런데 강화학습을 시작할 때, 용어가 많아서 공부할때마다 햇갈려서 정리해 놓겠습니다. 용어들 Agent : 행동과 학습을 하는 주체 Environment (환경) : Agent가 존재하는 세계 Action(행동) : Agent가 Environment 안에서 일으키는 움직임 State(상태) : Agent의 상태로써 Action을 하고 나면 상태가 변경됨 Policy(정책) : 특정 State에서 어떤 Action을 선택할지에 대한 전략 Reward(보상) : Action을 수행했을때 Environmen..

AI/강화학습 2021.09.09