LittleDeveloper

지난 시간에는 AI 개발에 있어서 VM 개발 환경이 필요한 이유와 설치해야 하는 것에 대해 알아보았다! 이번에는 가상환경을 세팅하는 구체적인 방법을 알아보자. 1) VirtualBox 설치 https://www.virtualbox.org/ Oracle VM VirtualBox Welcome to VirtualBox.org! VirtualBox is a powerful x86 and AMD64/Intel64 virtualization product for enterprise as well as home use. Not only is VirtualBox an extremely feature rich, high performance product for enterprise customers, it is als..

방학 동안 다양한 딥러닝 모델을 배워 보고 응용해보고 싶다는 생각에 AI 실무 교육 과정에 지원하게 되었다! 평소에 컴퓨터 비전에 관심이 있어 학기 중에 파이썬으로 opencv 예제들을 풀어보긴 했지만, 어떤 모델을 임포트해서 기능을 구현해본 적이 없어서 기초 개념부터 제대로 학습하고 싶었다. 이 교육의 목표는 실무에 바로 투입할 수 있는 AI 개발자를 양성하는 것이다. 따라서 이 교육을 통해 모델을 실제로 어떻게 활용할 수 있는지 내 스스로 많은 고민을 해보고(모르면 질문하고), 프로젝트를 진행할 수 있을 만큼의 실력을 갖출 수 있기를 바란다. 어떤 것을 배우기 전에 막막함이 앞설 때가 있고 설렘이 앞설 때도 있는데, 이번 교육은 설렘이 앞서는 경우 같다. OT를 들으면서 앞으로 배울 것들과 이것을 어..

npm run lint -- --fix https://soobindeveloper8.tistory.com/235 Vue warnings potentially fixable with the `--fix` option. 이건 뭔 에러 일까 ? eslint.org/docs/2.0.0/rules/quotes Rule quotes Enforce Quote Style (quotes) JavaScript allows you to define strings in one of three ways: double quotes, single quotes, and backt.. soobindeveloper8.tistory.com https://kdydesign.github.io/2019/04/22/vue-cli3-tutoria..

2.4 기타 디렉티브 주요 디렉티브들은 모두 다루었으니 나머지 디렉티브들을 알아보자. 1) v-pre : HTML 요소에 대한 컴파일을 수행하지 않는다. {{message}} v-pre 디렉티브를 사용하지 않았다면 콧수염 표현식을 사용해 message 속성의 값이 화면에 바인딩되어 나타나겠지만 v-pre 디렉티브로 인해 Vue 객체는 컴파일하지 않고 {{message}} 문자열이 그대로 출력된다. 이렇게 템플릿 문자열을 컴파일하지 않고 그대로 내보내기 위해 v-pre를 사용한다! 2) v-once : HTML 요소를 단 한 번만 렌더링한다. {{message}} 콘솔 창에서 message를 수정해도 화면에 수정사항이 출력되지 않는다. 즉, v-once 디렉티브는 처음 한 번만 렌더링을 수행하므로 Vue ..

v-for 디렉티브로 출력하는 데이터는 보통 배열이 많다. 그런데 배열 데이터가 변경될 때 추적이 되지 않는 작업이 있으므로 주의해야 한다. =>배열 데이터를 index 번호를 이용해 직접 변경하면 안되나?? 예를 들어, list.contacts[0] = {no:1, name:"winter", pos:"armamenter", address:"광야"}; 위의 코드처럼 배열 값을 변경할 수 없을까?? 정답은 No, 변경할 수 없다... 각 배열 값 내부의 속성을 직접 변경하는 것은 Vue 인스턴스 내부의 감시자(Watcher)가 추적하기 때문에 화면이 즉시 변경된다. list.contacts[0].name="winter"; 만약 기존의 배열 값을 직접 변경하고 싶다면, Vue.set 메서드를 사용하여 변경해..

2.3 반복 렌더링 디렉티브 반복적인 데이터를 렌더링하기 위해서는 v-for 디렉티브를 사용한다. v-for 디렉티브는 자바스크립트 언어의 for문과 유사하다. 아래의 예시를 통해 한번 알아보자. #예제 02-08 No. Name Position Address {{contact.no}} {{contact.name}} {{contact.pos}} {{contact.address}} model 객체는 내부에 contacts 라는 이름의 배열 데이터를 가지고 있다. 이 데이터를 여러 번 반복적으로 화면에 나타내야 한다. 이와 같은 작업을 위해 v-for 디렉티브를 사용한다. tr 이 바로 반복해야 하는 HTML 요소이다. 이 요소는 원본 데이터(contacts 배열)의 개수만큼 반복되어 나타난다. ... v-..

2.1 hellovuejus 예제 분석 지난 1장에서 예제를 통해 model 객체의 속성을 변경하면 화면이 변경되는 것을 확인했다. 이 index.html이 어떻게 구성되었는지 코드를 분석해보자. var model = { message: "첫 번째 Vue.js 앱입니다.", }; 위 코드에서 model 객체는 변수명 그대로 모델(Model) 객체로서, 데이터를 가지고 있다. var simple = new Vue({ el: "#simple", data: model, }); 또한 위 코드의 simple 객체는 Vue 객체이자 뷰모델(ViewModel) 객체이다. Vue 객체의 el 속성은 HTML 요소(Element)를 나타내고, data 속성은 모델 객체를 참조한다! 즉, Vue 객체는 HTML 요소와 데..

1.1 Vue.js란? Vue.js는 2013년 12월에 UI를 빠르게 개발하기 위해 만들어졌다. 따라서 Vue.js는 웹 화면 작성에 최적화된 자바스크립트 프레임워크이다. Vue.js는 크게 3가지 특징이 있다. 1) 많이 안 알려짐. React, Angular 에 비해 개발 생태계가 작은 편. => 하지만 급속도로 확산 중! 2) React, Angular 에 비해 대단히 유연하고 가벼움. (++가상 Dom이 있어 아주 빠른 UI 렌더링 속도) 3) 학습 곡선이 완만하다, 즉 배우기 쉽다. => 프레임워크의 확산 속도가 빠른 이유. 1.2 개발 환경 설정 Vue.js를 활용하기 위해 아래와 같은 툴이 필요하다. -Node.js -npm -VS Code -크롬 브라우저+Vue.js devtools -V..

웹페이지 배포를 위해 Heroku를 이용하기로 했다. 참고로 Heroku에는 아시아 서버가 없기 때문에 유럽이나 미국 서버를 써서 웹 애플리케이션을 생성 및 배포해야 한다. dash에 있던 Flask 서버를 Heroku에 노출시키기 위해 server=app.server 라는 코드 한 줄을 추가한 뒤, 몇 가지 세팅을 해준다. (app 안에 서버를 포함한 상태) 1. requirements.txt 파일 추가하기 heroku는 우리가 dcc, html, dash, plotly 등등이 필요하다는 사실을 모르기 때문에, pip를 사용해서 필요한 것들의 목록을 만들어야 한다. $ pip freeze > requirements.txt 위의 코드를 터미널 창에 치면, requirements 라는 이름의 텍스트 파일이..

방향그래프? 1. 방향 비사이클 그래프(DAG) 2. 방향 사이클 => 위상순서 x 위상정렬? 위상 정렬(topological sort): DAG로부터 위상순서를 얻는 절차 방향그래프의 위상순서(topological order) : 모든 i 더이상 나가는 간선이 없는 정점부터 번호 매김 2. 각 정점의 진입차수 이용 =>들어오는 간선이 없는 정점부터 번호 매김 -아래의 위상 정렬 알고리즘은, 두 번째 알고리즘이며, 1)인접정점리스트에서 새로 입력되는 간선에 대한 노드가 리스트의 '맨 앞에' 삽입됨 (*단순연결리스트 addFirst() ) 2)최초로 진입간선의 개수가 0인 정점을 찾을 때, '정점 번호 순..