반응형 Front29 vue.js 실습) 프로젝트 생성 및 분석 주저리 앞서 지난 시간에 vue.js 많은 이론들에 대해서 살펴보다가 말았다ㅋㅋ 이제는 Back-End 개발자들을 위해 하나의 프로젝트를 생성해보면서 vuejs 아키텍처 가이드를 만들어보자! :) 바로 실습 들어가자! 위의 스크린캡쳐는 여러가지 정보를 담고 있다. 모르는 부분이 있다면 한번씩 검색해서 찾아보도록 하자. 1. npm node package manager의 약자로 node.js의 모듈 관리를 하기 위해 사용 - install : package를 설치할 때 사용 예) npm install 패키지명 package.json에 포함된 의존성 패키지들이 일괄적으로 설치 됩니다. - init : 프로젝트를 초기화 해주는 명령어로 package.json file을 만들어줍니다. npm init --hel.. 2022. 11. 16. Vue.js : SyntaxError: Cannot use import statement outside a module 간만에 앞단을 해보는데 오류가 발생! 오류내용 /usr/local/bin/npm run serve > kong-ui@0.0.0 serve /Users/terrypark/Project/kong-ui > vite preview /Users/terrypark/Project/kong-ui/node_modules/vite/bin/vite.js:2 import { performance } from 'node:perf_hooks' ^^^^^^ SyntaxError: Cannot use import statement outside a module at Module._compile (internal/modules/cjs/loader.js:892:18) at Object.Module._extensions..js (inte.. 2022. 10. 18. 제 3장 Vue.js 둘러보며 친해지기! 2021.08.14 - [Front/Vue.js] - 제1장 - Vue.JS 환경설정과 프로젝트 생성 2021.08.14 - [Front/Vue.js] - 제 2장 Vue.js 프로젝트를 github과 연동 1장과 2장에서는 환경설정 -> 프로젝트 생성 -> github연동 3장에서는 더욱 더 친해지기 단계 입니다. 구조를 익히고 필요한것을 찾아보는 단계 아키텍처, 프로젝트 구조, vue.js에 필요한 것들에 대해서 더욱 더 나아가 소스 코딩도 해보고 github 명령어 사용도 해보고! add, commit, push, pull 등등 vue.js는 javascript framework이다. 즉, 개발자가 개발을 잘하도록 구조도 잡아주고 도와주는 친구다. 저번 시간에 우리는 vue/cli로 프로젝트를 만들.. 2021. 8. 17. 제 2장 Vue.js 프로젝트를 github과 연동 2021.08.14 - [Front/Vue.js] - 제1장 - Vue.JS 환경설정과 프로젝트 생성 제1장 - Vue.JS 환경설정과 프로젝트 생성 Vue.js 이녀석...찍먹만 하고 제대로 안했더니 이도저도 아닌게 되버렸다. 아래는 ace-t의 찍먹 현장 입니다 ㅋㅋ 2018.09.10 - [Front/Vue.js] - Vue.js 맛보기 2019.05.31 - [Front/Vue.js] - [acet-#1] Vue.js.. acet.pe.kr 저번 스터디에서는 로컬 개발환경 셋팅 및 프로젝트를 생성해보았습니다. 오늘은 만들었던 프로젝트를 github에 연동하는 것을 해보도록 하겠습니다. 다들 아시겠지만..! github은 소스를 관리해주는 녀석 입니다. 아~주 오래전 호랑이 담배피던 시절 githu.. 2021. 8. 14. 제1장 - Vue.JS 환경설정과 프로젝트 생성 Vue.js 이녀석...찍먹만 하고 제대로 안했더니 이도저도 아닌게 되버렸다. 아래는 ace-t의 찍먹 현장 입니다 ㅋㅋ 2018.09.10 - [Front/Vue.js] - Vue.js 맛보기 2019.05.31 - [Front/Vue.js] - [acet-#1] Vue.js 무작정 해보기(기본-Vue.js? 좋은거? 먹는거?) 2019.06.04 - [Front/Vue.js] - [acet-#2] Vue.js 무작정 해보기(용어 등 훝어보기!) 2019.06.12 - [Front/Vue.js] - const definitions are not supported by current javascript version 2019.06.18 - [OpenSource/Spring Boot] - VueJS를 연동.. 2021. 8. 14. const definitions are not supported by current javascript version VueJs 셋팅 시 IntelliJ에서 나오는 오류! 해결 방법은 아래와 같이 자바스크립트 버전을 변경하여 주면 된다! 끝~ 2019. 6. 12. [acet-#2] Vue.js 무작정 해보기(용어 등 훝어보기!) # 바로 코딩을 해보고 싶으신 분은 jsfiddle로 쉽게 해볼수 있습니다. https://jsfiddle.net/chrisvfritz/50wL7mdz/ # Vue.js의 특징으로 단일 파일 컴포넌트를 들수 있다. Componet System : Vue의 또 다른 중요한 개념. # 호환성 Vue는 ECMAScript5 기능을 사용 -> IE8 이하 버전을 지원하지 않습니다. 하지만 모든 ECMAScript5 호환 브라우저를 지원합니다. # Vue Devtools * https://github.com/vuejs/vue-devtools#vue-devtools vuejs/vue-devtools ⚙️ Browser devtools extension for debugging Vue.js applications. .. 2019. 6. 4. [acet-#1] Vue.js 무작정 해보기(기본-Vue.js? 좋은거? 먹는거?) 공식 홈피 https://vuejs.org/ 한국어버전 : https://kr.vuejs.org/v2/guide/index.html Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org 구글트렌드 Vue.js를 왜 써야하나? 엄청 복잡하게 코딩을 했던 옛날! 이제는 Vue.js같은 프레임워크를 통해 빠르고 쉽게 코딩이 가능하다. 프레임워크에는 angularJS, react등도 있지만 Vue.js는 아래와 같은 특징이 있다고 한다. 약팔기(?) 접근하기 용이! 러닝커브도 낮다?! 레알? 다목적, 다용도의 고성능! 유지할 수 있는 테스트 가능한 angularJS랑 비슷한 느낌같은데.. 컴포넌트가 매우 중요한 개념인듯 싶다. 아래처럼 html, js,.. 2019. 5. 31. Vue.js 맛보기 vue-cli 설치terrypark@localhost ~ sudo npm install vue-cli -gPassword:npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)⸨░░░░░░░░░░░░░░░░░░⸩ ⠴ fetchMetadata: WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen)/usr/local/bin/vue -> /usr/local/lib/node_modules/vue-cli/bin/vue/usr/local/bin/vue-list -.. 2018. 9. 10. ECMAScript 데이터 유형(Types) 6가지 원시 데이터(Primitive Data) 유형 - null - undefined - number - string - boolean - symbol(ES6+) 객체(Object) 데이터 유형 - function object - array object (배열객체) - object 객체 생성 ? new 생성자 함수() 2018. 8. 14. 자바스크립트 이벤트 TEST Document 두 수의 합을 출력해봅니다. + = 12 2018. 8. 14. image map 편하게 사용하기 아래의 링크를 통해 쉽게 map을 컨트롤할 수 있다.https://www.image-map.net/ 2018. 7. 17. about HTML 텍스트 레벨 요소 요소 : 윗첨자 요소 : 아래첨자 요소 : 관련 참조 목적의 하이라이트된 글자 요소 요소 : 축약요소 요소 : 기계가 이해할 수 있는 날짜나 시간을 나타내는 요소 요소 : 더 이상 관련이 없거나 정확하지 않은 요소 참고 자료 윗첨자 요소 아래첨자 요소 축약 요소 시간 요소 더 이상 관련이 없거나 더 이상 정확하지 않은 요소 관련 참조 목적의 하이라이트된 글자 요소 저작권, 법적 텍스트, 주석 및 작은 글씨 요소HTML 5.2 기술 표준 사양 Text Level Semantics 2018. 7. 10. about html 요소 루트 섹션 요소 -> 섹션요소 - 문서 개요에 명시적으로 나열되는 경우에만 섹션 요소가 적합하다. : 독립적으로 분류 가능. / 제목 포함 시켜야 함. : 그룹화된 컨텐츠 : 보조 컨텐츠, 광고 등 : 내비게이션을 나타냄 메인요소 / 화면에는 하나만 보여져야 한다.컨테이너 요소html 요소를 묶어주는 컨테이너(의미를 가지지는 않음.) 요소.-> , 은 블록요소들 (h1~6, p, blockquote, section 등)을 감쌀 수 없다. 디비전(Division) 요소 스팬(Span) 요소HTML5 기술 표준 사양 the div elementHTML5 기술 표준 사양 the span element 2018. 7. 10. e-mail 한글 깨짐 현상 Problem : e-mail 한글 깨짐 현상 - setting my html encoding : meta http-equiv="Content-Type" content="text/html; charset=utf-8" 현재 이메일을 전송시에 클라이언트에서 한글이 깨져보이거나 정상적으로 보이거나 하는 현상이 있다. What is Content-Type?A Content-Type tells the web browser or email application how to interpret the text characters in your HTML or the body of the email. The most popular character sets are UTF-8 and ISO-8859-1. Where does.. 2016. 12. 2. angular.isUndefined 사용하기~ 앵귤러를 사용하면서 아래처럼 ng-model을 통해 input text에 들어오는 키워드들에 대해서 변경된 값을 바로바로 셋팅할 수 가 있다. 그리고 한가지 유의할 점은 input value에 {{keyword}} 즉, 다른쪽에서 넘어온 데이터를 셋팅을 해주게 되면input 의 변화가 없다면 undefined가 search()의 파라미터로 넘어가게 된다.ex) {{keyword}}가 카카오! 이 상태에서 검색버튼을 누르면 app.query에는 아직 undefined이다!! 그래서 제대로 된 검색결과가 나오지 않는다. 그러므로 체킹을 한번 해주고 기존에 있는 데이터({{keyword}})를 활용하면 되겠다.if(angular.isUndefined(keyword)){ keyword=$scope.keyword.. 2015. 9. 23. Failed to load resource: the server responded with a status of 404 (Not Found) angularJS를 사용하는데.. img를 가져오는데 resource에서 상대경로로 이상한 resource를 가져오는것이 아닌가? -_-;;그래서 오류가.. 2015. 9. 21. learn angularJS 이 페이지에서 학습을할 것은?! angularjs를 하기 위해 기본적인 지식들 정리! ㅎㅎ 공식 사이트 : https://www.angularjs.org/배우기 위한 사이트 : https://thinkster.io/angulartutorial/a-better-way-to-learn-angularjs/ ㄴ angularJS binding 동영상 : 음...ng-model의 유용함을 보여주는?! : https://thinkster.io/egghead/binding/ ㄴ 기본 컨셉을 알려줌! : https://code.angularjs.org/1.2.26/docs/guide/concepts 가이드 페이지 : https://docs.angularjs.org/guide/ 모듈?? 우선 모듈?? 모듈이 무엇인지 살.. 2014. 11. 6. angular, bower, karma, grunt, yo? 업무를 하면서 정리를 하지 않으니 그냥 대충 알고 가는것 같다.천천히 제대로 따라가자! 아래는 이번 웹프로젝트에 참여하면서 사용할 친구들이다.단, node.js가 먼저 셋팅되어있어야 한다.(npm 등)localhost:~ terrypark$ npm list --global -depth=0 /usr/local/lib ├── bower@1.3.12 ├── generator-angular@0.9.8 ├── generator-karma@0.8.3 ├── grunt-cli@0.1.13 ├── npm@1.4.28 └── yo@1.3.0 생소한 것들이 많다. angular, bower, karma, grunt, yo?하나씩 알아가보자!참고 url : https://www.youtube.com/watch?v=QfWmt.. 2014. 10. 15. ACE-T's JS Part 04. 익명함수! 요즘 gis를 하는데 있어서...아래의 형태가 있었습니다. 음..조금 당황 했습니다. ㅋㅋㅋ;; 많이 써보는 형태는 아니였던게죠..ㅠ.ㅠ..anyways..이제부터 알아가보도록 하겠습니다.^-^(function(){ })(); 참고 사이트 http://www.nextree.co.kr/p4150/ KSUG 최영목님이 댕기시는 회사에 너무 잘 정리를 해놔서..참고 하였습니다. 넥스트리 화이팅! ㅎㅎ 보통 함수 선언을할 때 아래와 같이 합니다. 이것은 함수 선언식이라고 부릅니다.function acetBlog(){ /* 실행코드 */} 하지만 아래와 같이! 선언할 수 있습니다. 함수 표현식과 즉시실행함수 가 있습니다. 당황하지 마세요! 이제부터 알아가면 되니깐요! ㅎ함수 정의할 때 “함수는 first-clas.. 2014. 7. 3. ACE-T's JS Part 03. Jquery 기초를 배워봅시다! 2014/04/24 - [Script/JavaScript] - ACE-T's JS_Part 01. 자바스크립트를 배운다는 것은?? 2014/05/08 - [Script/JavaScript] - ACE-T's JS_Part 02. Style과 Event 다루기!! 오늘은 어제 적용해본 Jquery에 대해서 간단히 설명 하려고 합니다 ㅎㅎ > 하나하나씩 적용한 내용을 살펴 보도록 하겠습니다!~ Result : Jquery로 CSS변경 해보기 UI source JS source$(document).ready(function(){ // DOM 생성이 완료 되면 실행. // CSS 변경해보기!!$('#study').css('background','pink'); // $('')라는 것으로 Jquery object화.. 2014. 5. 10. 이전 1 2 다음 반응형
