공부/Javascript 6

Vue.js 재직자 교육 4일차 [뷰 컴포넌트,뷰 템플릿

뷰JS 컴포넌트의 장점 재사용성 향상 - 개발효융성 증가 이미 만들어진 컴포넌트를 재사용하므로 품질이 보장됨 적절히 분할한 컴포넌트가 느슨하게 결합하므로 유지보수성 향상 컴포넌트는 템플릿 스크립트 스타일로 구성될 수 있다. 지역컴포넌트와 전역컴포넌트 지역변수,전역변수와 같은느낌으로 보면 될듯하다. 뷰 템플릿 관련 기술 0.string literal , template literal 1. text/x-template : script 태그에 text/x-template type을 사용하면 browser에 dom으로 인식되지 않아 template으로 활용 가능함. 무슨뜻이냐면 . vue.component('text',{template: 여기다가 템플릿 을 다 넣으면 엄청길어지니깐 따로 script파일로 빼서 ..

공부/Javascript 2022.09.28

[Vue.js] vue.js 시작하기 및 초보자 예제 실습

안녕하세요, 장지랩입니다. 회사에서 SM업무를 하다보면 SI에 비해 개발자로서 실력이 뒤떨어지지 않을까 하는 고민을 끈임없이 하게 되요 그러다 같은 고민을 갖고 있는 동료와 함께 웹서비스를 하나 개발해보기로 했어요. 우선 안써봤던 기술들을 써보자 해서 프론트엔드는 뷰.js가 채택되었습니다. 들어보기만 한 뷰JS에 대해 공부를 슬슬 할까합니다. 오늘 한내용에 대한 복습겸 포스팅입니다. 뷰JS는 프론트용 자바스크립트 프레임워크로 이에 대한 정의는 따로 적지는 않겠습니다. 저도 공부가 더 필요하거든요 추후.. 뷰JS란 무엇인가라는 포스팅으로 다루겠습니다. 1.vue.js 설치 그냥 뷰JS 스크립트만 임포트시켜주면 됩니다 헛헛.. CDN을 통해서 넣어줘도 되고, 직접 스크립트를 다운받아 넣어주셔도 됩니다. 스크..

공부/Javascript 2022.09.28

[marquee] javascript로 marquee 구현하기.. 흐르는 텍스트

흘러가는 텍스트를 만들일이 생겨 만들어 보았습니다.( jquery의 marquee 플러그인 사용은 배제했습니다!) html 태그 중 marquee라는게 있긴 한데 브라우저 제한이 있다고 해서 자바스크립트로 구현했습니다. 구현 은 인터넷에 올라와 있는 자료들을 참고로 했습니다. 방법 1. 어려웠던 부분 텍스트의 너비를 pixel로 구하는 방법 아직 해결하지 못한 부분 아래 소스는 에 marginleft 값을 변화시켜 텍스트를 흐르는 것 처럼 보이게 하는 방식입니다. 해당 소스 적용 시 크롬 모바일 개발자도구에서는 스크롤이 늘어나는 현상이 보이지 않지만, 실제 모바일에서 보면 margin 값에 따라 가로 스크롤이 늘어났다 줄어들었다 합니다.. css .flowInfo{overflow : visible; wh..

공부/Javascript 2016.12.28

[jQuery] 제이쿼리 시작하기

1. 다운로드 제이쿼리 공식 홈페이지에서 다운로드 할 수 있습니다. [ www.jquery.com/download ] 다운로드 페이지에는 두가지 버전이 존재합니다. uncompressed : 주석, 설명들이 친절하게 나와있고 들여쓰기도 잘 되있는 버전. 공부용..? compressed: 용량을 최소화 하기 위해 주석,들여쓰기,설명 등을 제거한 버전. 배포용, 개발용으로 많이 쓰임 2. 선택자 선택자를 사용하면 지정한 문서(HTML) 객체를 선택해 올 수 있다. 직접 선택자, 인전관계선택자, 탐색 선택자가 있다. 선택자 사용을 준비하기 위해 제이쿼리를 먼저 로딩해야한다. jquery 라이브러리를 풀러온 후, $(document).ready(function(){실행문}); 또는 $(function(){실행문..

공부/Javascript 2016.06.28

[javascript] javascript 내부의 //<![CDATA[//]]를 쓰는 이유

////]] 를 사용하는 이유는 브라우저가 스크립트를 HTML로 인식해 작동하지 않는 것을 방지해주고 XML parser로 부터 자유로워 지기 위해서 사용함. 파서(parser)란? 파서는 컴파일러의 일부로 프로그램 명령문,온라인 명령문, HTML 문서 등에서 Markup Tag등을 입력으로 받아들여서 구문을 해석할 수 있는 단위로 여러부분을 분할해 주는 것을 역할을 한다 (= 컴파일러나 인터프리터에서 원시 프로그램을 읽어들여 그 문장의 구조를 알아내는 구문 분석(parsing)을 하는 프로그램이다)

공부/Javascript 2016.06.27

[javascript] document.write와 가변인자 메서드

자바스크립트를 다시 보다가 document.write에서 문자열을 +가 아닌 ,로 이어주는 것을 발견했습니다. >> document.write("안녕","하세요")와 document.write("안녕"+하세요") 는 결과가 같다. document.write 메서드 자체에서 제공해주는 기능으로 가변인자를 허용하는 메서드인것임. 가변인자 메서드 말 그대로 갯수에 상관없이 인자를 사용할 수 있는 메서드다. int sum(int ... args){ int sum = 0; for(arg : args){ sum+= arg; } return sum; } 함수 구현시 인자값을 저런식으로 ... 키워드와 함께 사용한다. 우리가 흔히 사용하는 기본 메서드 중에도 가변인자 메서드를 찾아 볼 수 있을것이다.

공부/Javascript 2016.06.23