본문 바로가기

Hoon's Company138

[Hoon] Vuejs 강의 - Vue 시작하기(Getting Started) Vue 시작하기(Getting Started) https://kr.vuejs.org/v2/guide/index.html#시작하기 [ 설치 ] 또는: JSFiddle - https://jsfiddle.net/ 선언적 렌더링 https://kr.vuejs.org/v2/guide/index.html#선언적-렌더링 Vue.js의 핵심에는 간단한 템플릿 구문을 사용하여 DOM에서 데이터를 선언적으로 렌더링 할 수있는 시스템이 있습니다. 텍스트 보간(Interpolation) - 텍스트 삽입 {{ message }} new Vue({ el:'#app', data: { message: '안녕하세요 Vue!' } }) 이제 데이터와 DOM이 연결되었으며 반응형이 되었습니다. 엘리먼트 속성 바인딩 내 위에 잠시 마우스를.. 2020. 4. 13.
[Hoon] Vuejs 강의 - SFC (Single File Components) 는 무엇인가? SFC (Single File Components) 는 무엇인가? Single File Components , SFC - .vue 확장자를 가진 싱글 파일 컴포넌트 싱글 파일 컴포넌트 — Vue.js Vue.js - 프로그레시브 자바스크립트 프레임워크 kr.vuejs.org 페이지내 Vue 선언 방식의 disadvantages(약점) ● Global definitions - 모든 컴포넌트에 대한 고유한 이름 필요 ● String templates - 구문 강조가 약함, 여러 줄로 된 HTML에 보기 안좋은 슬래시 ● No CSS support - CSS is conspicuously left out CSS 를 지원하지 않는 것이 아니라 CSS 가 눈에 띄게 모듈화 되지 않음 ● No build step .. 2020. 4. 13.
[Hoon] Vuejs 강의 - SPA (Single-Page Application)는 무엇인가? SPA (Single-Page Application)는 무엇인가? ●서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션을 말한다. 웹 애플리케이션 - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. 웹 애플리케이션(web application) 또는 웹 앱은 소프트웨어 공학적 관점에서 인터넷이나 인트라넷을 통해 웹 브라우저에서 이용할 수 있는 응용 소프트웨어를 말한다. 웹 애플리케이션은 클라이언트로서 웹 브라우저를 사용하는 사람이 많기 때문에 인기를 누리고 있다. 수천만 대의 PC에 굳이 소프트웨어를 배포해서 설치하지 않아도 웹 애플리케이션을 유지 관리할 수 있다는 점이 장점 중의 하나이다. 웹 애플리케이션은 웹 .. 2020. 2. 17.
[Hoon] Vuejs 강의 - PWA (Progressive Web Application) 는 무엇인가? PWA (Progressive Web Application) 는 무엇인가? ● 웹 소프트웨어의 일종으로, HTML, CSS, 자바스크립트를 포함한 웹 기술들을 사용하여 만듦. HTML - 위키백과, 우리 모두의 백과사전 위키백과, 우리 모두의 백과사전. HTML은 하이퍼텍스트 마크업 언어(HyperText Markup Language, 문화어: 초본문표식달기언어, 하이퍼본문표식달기언어)라는 의미의 웹 페이지를 위한 지배적인 마크업 언어다. HTML은 제목, 단락, 목록 등과 같은 본문을 위한 구조적 의미를 나타내는 것뿐만 아니라 링크, 인용과 그 밖의 항목으로 구조적 문서를 만들 수 있는 방법을 제공한다. 그리고 이미지와 객체를 내장하고 대화형 양식을 생성하는 데 사용될 ko.wikipedia.org 종.. 2020. 2. 17.
[Hoon] Vuejs 강의 - Vue.js가 무엇인가? Vue.js 가 무엇인가? ● Vue는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크(Progressive Framework) → 일반적인 웹 페이지 뿐만 아니라 PWA(프로그레시브 웹앱) 개발에 용이하다 ● 점진적으로 채택할 수 있도록 설계됨 vue -> vue router -> vuex Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org Introduction | Vue Router Introduction VERSION NOTE For TypeScript users, vue-router@3.0+ requires vue@2.5+, and vice versa. Vue Router is the official router for Vue... 2020. 2. 17.
[Hoon] MySQL - Too many connections 해결 및 튜닝 MySQL - Too many connections 해결 및 튜닝 MySql 이나 Mariadb 를 운용할때 종종 만나게 되는 too many connections 의 해결과 성능 튜닝에 대해서 알아보자. # 상태 확인 show variables like '%max_connections%'; show status like '%connect%'; "Aborted_connects" "53" - MySQL 서버에 접속이 실패된 수 "Connections" "10832" "Max_used_connections" "101" - 최대로 동시에 접속한 수 "Threads_connected" "100" - Thread Cache의 Thread 수 show status like 'Aborted%'; "Aborted_cl.. 2019. 1. 8.
[Hoon] AngularJS - Angular Style Guide & Angular 2 Angular Style Guide & Angular 2 The Angular 1 Style Guide. The Angular 2 Style Guide. https://angular.io Angular angular.io https://angular.io/docs/ts/latest/quickstart.html Angular angular.io https://angular.io/resources/live-examples/quickstart/ts/eplnkr.html Angular angular.io https://angular.io/docs/ts/latest/tutorial/ Angular angular.io AngularJS Patterns: Clean Code https://github.com/john.. 2019. 1. 4.
[Hoon] AngularJS - AngularJS 버전업하기 Updating AngularJS npm run update-deps bower.json angular version -> 해당 version 의 최신 버전으로 업데이트 "dependencies": { "angular": "~1.5.0", "angular-route": "~1.5.0", "angular-loader": "~1.5.0", "angular-mocks": "~1.5.0", "html5-boilerplate": "^5.3.0" } ===> "dependencies": { "angular": "~1.5.11", "angular-route": "~1.5.11", "angular-loader": "~1.5.11", "angular-mocks": "~1.5.11", "html5-boilerplate":.. 2019. 1. 4.
[Hoon] AngularJS Seed - the seed for AngularJS apps AngularJS Seed - the seed for AngularJS apps https://github.com/angular/angular-seed git clone https://github.com/angular/angular-seed.git cd angular-seed npm install npm start - http://localhost:8000/index.html Directory Layout - _test.js -> .spec.js npm test Running End-to-End Tests cd e2e-tests npm start npm run update-webdriver npm run protractor bit.ly/3fXOzon 인프런 인강 55%할인 쿠폰 - 커피한잔으로 Vue.j.. 2019. 1. 4.
[Hoon] AngularJS - Angularjs Tutorial Angularjs Tutorial 0 - Bootstrapping - https://docs.angularjs.org/tutorial/step_00 1 - Static Template - https://docs.angularjs.org/tutorial/step_01 2 - AngularJS Templates - https://docs.angularjs.org/tutorial/step_02 3 - Components - https://docs.angularjs.org/tutorial/step_03 4 - Directory and File Organization - https://docs.angularjs.org/tutorial/step_04 5 - Filtering Repeaters - https://do.. 2019. 1. 4.
[Hoon] AngularJS - PhoneCat Tutorial App PhoneCat Tutorial App Environment Setup Install Git - http://git-scm.com/download Install Node.js - https://nodejs.org/en/download node --version - Node.js v4+ git clone --depth=16 https://github.com/angular/angular-phonecat.git cd angular-phonecat npm install This command reads angular-phonecat's package.json file and downloads the following tools into the node_modules directory: Bower - client.. 2019. 1. 3.
[Hoon] AngularJS - Componets, Directives, Localization Example Directives Directives are a unique and powerful feature available in AngularJS. Directives let you invent new HTML syntax, specific to your application. Reusable Components We use directives to create reusable components. A component allows you to hide complex DOM structure, CSS, and behavior. This lets you focus either on what the application does or how the application looks separately. Locali.. 2018. 12. 31.
[Hoon] Javascript - Underscore.js Underscore.js Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It’s the answer to the question: “If I sit down in front of a blank HTML page, and want to start being productive immediately, what do I need?” … and the tie to go along with jQuery's tux and underscore.js 는 내장객체를 확장하지 않고, 사용하기 쉬운 함수 프로그래밍에 .. 2018. 12. 31.
[Hoon] AngularJS - Create Components Create Components http://plnkr.co/edit/NomETVhyqSIryX2Pm6dc?p=preview https://docs.angularjs.org/guide/component Component is a special kind of directive that uses a simpler configuration which is suitable for a component-based application structure. Advantages of Components: simpler configuration than plain directives promote sane defaults and best practices optimized for component-based archit.. 2018. 12. 31.
[Hoon] AngularJS - The AngularJS AngularJS AngularJS 개발자 구글 발표일 2010년 10월 20일 (8년 전)[1] 최근 버전 1.6.6 / 2017년 8월 18일 (15달 전)[2] 개발 상태 개발 중 프로그래밍 언어 자바스크립트 플랫폼 크로스 플랫폼 크기 144 KB (운영용) 1 MB (개발용) 종류 자바스크립트, 싱글 페이지 애플리케이션 프레임워크 라이선스 MIT 라이선스 웹사이트 angularjs.org AngularJS("Angular.js" 또는 "AngularJS 1.X")는 자바스크립트 기반의 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크의 하나로, 싱글 페이지 애플리케이션 개발 중에 마주치는 여러 문제들을 해결하기 위해 개발되었으며 주로 구글과 개별 커뮤니티, 여러 회사에 의해 유지보수되고 있다. 자바.. 2018. 12. 31.
[Hoon] 핵전쟁 위기 Internet 을 만들다 - 한국은 어떻게 극복할 것인가? 핵전쟁 위기 Internet 을 만들다 - 한국은 무엇을 만들어 내며, 어떻게 극복할 것인가? 스푸트니크 쇼크 동서 냉전이 한창이던 1957년 미국은 사거리 6000km 수준의 아틀라스 A 로켓을 발사 성공하였다. 그때 소련이 사정거리 8000km 에 이르는 세계 최초의 ICBM 인 R-7 로켓을 실전에 배치하였다는 선전이 들렸다. 미국과 서방은 이를 믿지 앉고 무시했지만, 1957년 10월 4일 소련이 세계 최초의 인공위성 '스푸트니크'를 성공적으로 발사한 사건이 발생했다. 이로써, 미국을 비롯한 서방 국가들은 엄청난 충격과 공포, 위기감을 받게 되었다. 대륙 간 탄도 미사일 ICBM 기술을 소련이 가장 먼저 보유하게 되면서, 핵탄두를 장착한 미사일의 선제공격을 가할 수 있다는 사실이, 공포와 위기감을.. 2017. 9. 5.
[Hoon] ellipsis - CSS3 text-overflow Property CSS3 text-overflow Property Use of the text-overflow property: div { text-overflow: ellipsis; } Definition and Usage The text-overflow property specifies how overflowed content that is not displayed should be signaled to the user. Default value: clip Inherited: no Animatable: no. Read about animatable Version: CSS3le.textOverflow="ellipsis" JavaScript syntax: object.style.textOverflow="ellipsis".. 2017. 8. 16.
[Hoon] Git - Branch / Merge / Tag git checkout -b feature_x - “feature_x” 라는 branch 를 만들고 해당 branch 로 checkout git checkout master - master branch 로 돌아오기 git branch -d feature_x - branch 삭제 git push origin - push 가 되지 않으면 다른 사람들이 접근이 안됨 git pull - 로컬 저장소를 원격 저장소에 맞춰 갱신 git merge git tag 1.0.0 Discard / Revert / Reset Discard(Undo) - git checkout -- - Revert - Reverse Commit - 삭제 하지 않음, 순차적으로 진행. Reset - 삭제, 여러 단계를 뛰어 넣어서 가능 bit... 2017. 8. 2.
[Hoon] Git guide- https://rogerdudler.github.io/git-guide/index.ko.html Git guide- https://rogerdudler.github.io/git-guide/index.ko.html Git 저장소 만들기 - git init 폴더를 하나 만들고, 그 안에서 git init 을 실행. Git 저장소 받아오기 - git clone /로컬/저장소/경로 git clone 사용자명@호스트:/원격/저장소/경로 Working direcotry, Working copy -> add Unstaged / Staged(Index), Uncommitted changes/ HEAD(commit) Git Commit - only local / Push - remote Commit git add , git add * , git commit -m “comment”(HEAD 에 반영) 원격 저장소에 .. 2017. 8. 2.
[Hoon] Git 설치 - git-scm.com Source Code - https://github.com/git/git Linux - $yum install git-core Ubuntu - $apt-get install git Mac 에 설치하기 - https://git-scm.com/download/mac Window - https://git-scm.com/download/win SourceTree - www.sourcetreeapp.com Sourcetree | Free Git GUI for Mac and Windows A Git GUI that offers a visual representation of your repositories. Sourcetree is a free Git client for Windows and Mac. www.sou.. 2017. 8. 2.
[Hoon] Git 기초 Git 핵심 Git 을 배우려면 Subversion 이나 Perforce 같은 다른 VCS 를 사용하던 경험을 지워야.. Git 은 미묘하게 달라서 다른 VCS 에서 쓰던 개념으로는 헷갈림. 델타(각 파일에 대한 변화)가 아니라 스냅샷 Git 은 커밋하거나 상태를 저장할 때마다 파일이 존재하는 그 순간이 중요. 크기가 아주 작아 성능이 탁월하다. Git은 성능을 위해 파일을 저장하지 않고, 이전 상태의 파일에 대한 링크를 저장한다. Git의 세가지 상태 - Committed, Modified, Staged Committed - 데이터가 로컬 데이터베이스에 안전하게 저장. Modified - 수정한 파일을 Commit 하지 않은 것. Staged - 현재 수정한 파일을 곧 Commit 할 것이라고 표시. .. 2017. 7. 25.
[Hoon] GIT 사용법 - the stupid content tracker Git ( / ɡ ɪ t / ) - 컴퓨터 파일의 변경 내용을 추적 하고 여러 사람이 사용하는 파일에 대한 작업을 조율 하는 버전 관리 시스템 (VCS)입니다 . 주로 소프트웨어 개발에서 소스 코드 관리에 사용되지만 , 파일의 변경 내용을 추적하는 데 사용할 수 있습니다. 분산 개정 관리 시스템 으로서 속도, 데이터 무결성, 및 분산 된 비선형 워크 플로우에 대한 지원을 목표로합니다. Git은 리눅스 커널 개발을 위해 2005 년 리누스 토발즈 (Linus Torvalds) 에 의해 만들어졌으며 다른 커널 개발자들은 초기 개발에 기여했습니다. 2005 년 이래로 현재 유지 관리자는 Junio ​​Hamano 입니다. 대부분의 다른 분산 버전 제어 시스템과 마찬가지로 대부분의 클라이언트 - 서버 시스템 과.. 2017. 7. 25.
[Hoon] MyBatis Cache 성능을 개선하고 순환하는 의존성을 해결하기 위해 필요한 로컬 세션 캐싱을 제외하고 기본적으로 캐시가 작동하지 않는다. Mabatis 캐싱을 활성화하기 위해서 SQL 매핑 파일에 한줄을 추가하면 된다. 이 설정은 60 초마다 캐시를 지우는 FIFO 캐시를 생성한다. 이 캐시는 결과 객체 또는 결과 리스트를 512개까지 저장하고 각 객체는 읽기 전용이다. 캐시 데이터를 변경하는 것은 개별 쓰레드에서 호출자간의 충돌을 야기할 수 있다. 매핑 구문 파일내 select 구문의 모든 결과가 캐시 될 것이다. 매핑 구문 파일내 insert, update 그리고 delete 구문은 캐시를 지울(flush) 것이다. 캐시는 Least Recently Used (LRU) 알고리즘을 사용할 것이다. 캐시는 스케줄링 기반으로.. 2017. 7. 16.
[Hoon] Spring Application Config 설정 Spring Application Config Base Package Servlet Handler Message Converter application/json;charset=utf-8 Annotation Config DataSource DataSourceSpied Mybatis Transaction Mapper Auto Scan bit.ly/3fXOzon 인프런 인강 55%할인 쿠폰 - 커피한잔으로 Vue.js 핵심 강의! 인프런 인터넷 강의 55% 할인 쿠폰 - 커피한잔(5000원)으로 배우는 Vue.js 핵심 강의! 모바일 환경에서도 강의를 수강할 수 있도록 강의가 많이 개선되었습니다. 인프런 인터넷 강의 선착순 100명 55% � plogger.tistory.com bit.ly/2TtRHis [V.. 2017. 5. 10.
[Hoon] Project Lombok https://projectlombok.org/ http://jnb.ociweb.com/jnb/jnbJan2010.html Installation java -jar lombok.jar Maven Adding lombok to your pom file org.projectlombok lombok 1.16.18 provided projectlombok.org http://projectlombok.org/mavenrepo Maven > Update Project.. Lombok features. val Finally! Hassle-free final local variables. @NonNull or: How I learned to stop worrying and love the NullPointerExcep.. 2016. 4. 1.
자동차 박사 - 차의 모든 것 스포츠카 자동차 배경화면 최근 자동차에 관심을 가지면서, 자동차 박사라는 새로운 어플을 하나 개발하였다. 위키를 연동하여, 자동차와 브랜드의 역사나 폭넚은 상식을 연결시켰다. 멋진 스포츠카 갤러리도 만들었다. 스포츠카 사진으로 스마트폰 배경화면 변경도 가능하다. 아무쪼록 나와같이 자동차에 관심이 있는 이들에게 도움이 될수 있었으면... 자동차 박사는 2013. 5. 6.
[Hoon] MySql 에서의 현재시각 sysdate vs now MySql 에서의 현재시각 sysdate vs now MySql 에서 현재시각을 위한 함수 sysdate() 와 now() 두 함수 모두 현재시각을 반환하지만, 몇가지 차이가 있음. 하나의 SQL 문에서 여러번 now()가 사용된 경우, now() 는 동일한 결과를 반환, sysdate()는 동일 SQL 문 내에서도 호출되는 시점에 따라 결과값이 달라짐. example> select now(), sysdate(), sleep(5), now(), sysdate(); result> now() sysdate() sleep(5) now() sysdate() 2013-05-03 오전 11:18:31 2013-05-03 오전 11:18:31 5 2013-05-03 오전 11:18:31 2013-05-03 오전 11.. 2013. 5. 3.
안드로이드 앱 SD 카드로 이동, 수평 스크롤 메뉴 안드로이드 앱 SD 카드로 이동, 수평 스크롤 메뉴 manifest 에 android:installLocation="auto" 퍼미션 허용 수평 스크롤 메뉴 -> HorizontallScrollView 를 이용 .. .. .. bit.ly/3fXOzon 인프런 인강 55%할인 쿠폰 - 커피한잔으로 Vue.js 핵심 강의! 인프런 인터넷 강의 55% 할인 쿠폰 - 커피한잔(5000원)으로 배우는 Vue.js 핵심 강의! 모바일 환경에서도 강의를 수강할 수 있도록 강의가 많이 개선되었습니다. 인프런 인터넷 강의 선착순 100명 55% � plogger.tistory.com bit.ly/2TtRHis [Vue.js 입문] 초보 실전 웹앱 개발 - 1부 : vue 개념 ~ 핵심 문법 - 인프런 이 강의를 수강하.. 2013. 5. 3.
오라클 문자열 split 하기 오라클 문자열 split 하기 SELECT SUBSTR ('홍길동#과장#IT', (SELECT INSTR ('홍길동#과장#IT', '#') FROM DUAL) + 1, (SELECT INSTR ('홍길동#과장#IT', '#', 1, 2) FROM DUAL) - ((SELECT INSTR ('홍길동#과장#IT', '#', 1, 1) FROM DUAL) + 1) ) AS RESULT FROM DUAL bit.ly/3fXOzon 인프런 인강 55%할인 쿠폰 - 커피한잔으로 Vue.js 핵심 강의! 인프런 인터넷 강의 55% 할인 쿠폰 - 커피한잔(5000원)으로 배우는 Vue.js 핵심 강의! 모바일 환경에서도 강의를 수강할 수 있도록 강의가 많이 개선되었습니다. 인프런 인터넷 강의 선착순 100명 55% �.. 2013. 5. 3.
경제통 - 뉴스 신문 금융 취업 면접 상식 주식 증권 경제통은 안드로이드 앱입니다. 구글마켓에 등록되어 있습니다. 아래 링크를 통해 주용정보를 확인 및 설치할 수 있습니다. 2011. 7. 20.