본문 바로가기

frontend12

[Hoon] Vuejs 강의 - codesandbox 로 Vue SFC 환경 맛보기 codesandbox 로 Vue SFC 환경 맛보기 https://codesandbox.io CodeSandbox: Online IDE for Rapid Web Development CodeSandbox is an online code editor and prototyping tool that makes creating and sharing web apps faster codesandbox.io Create a Sandbox, it's free Vue main.js render - https://kr.vuejs.org/v2/guide/render-function.html // very short - es6 arrow function render: h => h (App) // short render: fu.. 2020. 5. 13.
[Hoon] Vuejs 강의 - v-for 와 컴포넌트 v-for 와 컴포넌트 https://kr.vuejs.org/v2/guide/list.html#v-for-와-컴포넌트 v-for를 컴포넌트에 직접 사용할 수 있습니다. Vue.component('todo-item', { props: ['text', 'isComplete'], template: '{{ text }}, {{ isComplete }}' }) new Vue({ el: '#app', data: { todos: [ { id: 1, text: 'Learn Vue', isComplete: false }, { id: 2, text: 'Take out the trash', isComplete: false }, { id: 3, text: 'Mow the law', isComplete: false } ] } .. 2020. 5. 13.
[Hoon] Vuejs 강의 - Component Basic Component Basic https://kr.vuejs.org/v2/guide/components.html 컴포넌트는 무엇인가요? 컴포넌트는 Vue의 가장 강력한 기능 중 하나입니다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 컴포넌트 사용하기 # 전역 등록 Vue.component('my-component', { // 옵션 template: '사용자 정의 컴포넌트 입니다!' }) // 루트 인스턴스 생성 new Vue({ el: '#app' }) # 지역 등록 컴포넌트를 components 인스턴스 옵션으로 등록함으로써 상위 템플릿에서만 사용할 수 있는 컴포넌트를 .. 2020. 5. 12.
[Hoon] Vuejs 강의 - 반복문 - 리스트 렌더링 반복문 - 리스트 렌더링 https://kr.vuejs.org/v2/guide/list.html v-for로 엘리먼트에 배열 매핑하기 v-for 디렉티브를 사용하여 배열을 기반으로 리스트를 렌더링 할 수 있습니다. v-for 디렉티브는 item in items 형태로 특별한 문법이 필요합니다. 여기서 items는 원본 데이터 배열이고 item은 반복되는 배열 엘리먼트의 별칭 입니다. #기본 사용방법 {{ item.message }} var vm = new Vue({ el: '#app', data: { items: [ { message: 'Foo' }, { message: 'Bar' } ] } }) v-for 블록 안에는 부모 범위 속성에 대한 모든 권한이 있습니다. v-for는 또한 현재 항목의 인덱스에.. 2020. 5. 11.
[Hoon] Vuejs 강의 - 폼 입력 바인딩 폼 입력 바인딩 https://kr.vuejs.org/v2/guide/forms.html 기본 사용법 v-model 디렉티브를 사용하여 폼 input과 textarea 엘리먼트에 양방향 데이터 바인딩을 생성할 수 있습니다. # input 메시지: {{ message }} new Vue({ el: '#app', data: { message: '안녕하세요!' } }) # textarea 여러 줄을 가지는 메시지: {{ message }} # checkbox v-model은 모든 form 엘리먼트의 초기 value와 checked 그리고 selected 속성을 무시합니다. 항상 Vue 인스턴스 데이터를 원본 소스로 취급합니다. 컴포넌트의 data 옵션 안에 있는 JavaScript에서 초기값을 선언해야합니다... 2020. 5. 11.
[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.
jQuery II jQuery 와 관련하여 Jesse Skinner 가 쓴 좋은 정보를 발견하였다. 아래는 IBM 에서 제공하는 번역본이다. jQuery 를 공부하는데 도움이 되길 바란다. http://www.ibm.com/developerworks/kr/library/x-ajaxjquery.html 디벨로퍼웍스 코리아 dW Korea - IBM Developer 개발자를 위한 튜토리얼, 블로그, 교육, 무료 체험판 그리고 다운로드가 제공되는 IBM 공식 개발자 프로그램입니다. developer.ibm.com 2010. 12. 27.
실전 HTML 5 가이드 - Web Standards Korea HTML 5 에 대한 Web Standards Korea 의 실전 가이드를 공유한다. HTML 5 에 대한 전반적인 이해와 HTML 5를 활용한 웹프로그래밍에 도움이 될 수 있을 것이다. 첨부된 파일의 저작권은 Creative Commons 기반으로 하고 있으며, 한국 웹 표준 커뮤니티의 윤석찬, 신현석, 정찬명, 경준호, 권정혁 웹 에서 보기 bit.ly/2LMzjNC 커피한잔(5000원) 으로 배우는 Vue.js 개념 핵심 강의! - 인프런 인강 55% 할인 쿠폰 커피한잔(5000 원) 으로 배우는 Vue.js 개념 핵심 강의! 모바일 환경에서도 강의를 수강할 수 있도록 강의가 많이 개선되었습니다. 인프런 인터넷 강의 선착순 100명 55% 할인쿠폰! [Vue.js] javascript Real pl.. 2010. 12. 26.
jQuery 시작하기 | by Hoon 요즘, jQuery 라는 놈이 웹 Front 단을 주름 잡고 있다. 어떤 녀석이 자세히 한번 알아보도록 하자. 1. jQuery 란 jQuery is a new kind of JavaScript Library. jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. jQuery 는 자바스크립트 라이브러리의 새로운 한 종류란 것이다. jQuery 는 빠른 .. 2010. 12. 23.
Velocity 개요, 실행원리 | by Hoon 1. Velocity 개요 Struts프레임워크를 도입하는 이점중의 하나는 web application의 Presentation부분(JSP등)과 Controller 부분(Action클래스)의 결합이 느슨해지는 것이 있다. 그래서 Presentation부분도 Controller 부분도 서로 의존하지 않고, 독립된 Controller 로서 각각 구현할 수 있다. 이에 따라 , 시스템의 다른 부분을 건들이지 않고, Presentation부분만을 통째로 바꿔 넣는 것이 가능하다. 실 예로, Struts의 Presentation부분을 구현하기에는, JSP를 사용하는 것이 일반적이지만, 그것 외의 기술을 이용하는 것도 가능하다. 여기서는 JSP를 대체해 꽤 사용되는 Apache Jakarta의 Template엔진인.. 2010. 12. 23.
JSON Example II - 출처 : json.org {"web-app": { "servlet": [ { "servlet-name": "cofaxCDS", "servlet-class": "org.cofax.cds.CDSServlet", "init-param": { "configGlossary:installationAt": "Philadelphia, PA", "configGlossary:adminEmail": "ksm@pobox.com", "configGlossary:poweredBy": "Cofax", "configGlossary:poweredByIcon": "/images/cofax.gif", "configGlossary:staticPath": "/content/static", "templateProcessorClass": "org.cofax.Wysiwy.. 2010. 12. 23.
Introducing JSON - 원문 json.org JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the .. 2010. 12. 23.