본문 바로가기

분류 전체보기

 (267)
새로운 컴포넌트 등록 및 데이터 바인딩 다음과 같이 컴포넌트를 생성한다. ng generate component heroes 1.hero.ts export class={ id:number, name: string } 2.hero.component.ts import 'hero' from './hero' //6-10번줄을 사용하기 위함 export class HeroesComponent implements OnInit { hero: Hero = { id: 1, name: 'winstrom', }; constructor() {} ngOnInit(): void {} } 3.hero.component.html (바인딩) {{title}} 해당 hero.name 으로 바인딩 된다. 4.app.Modules.ts import { FormsModule } ..
데이터 바인딩 영웅을 화면에 나타내기 위해 영웅클래스를 만들어준다. -------app.component.js---------- >>@Component 의 templatedp 작성할 내용들을 적어준다. @Component({ //루트 컴포넌트이다. selector: 'app-root', //templateUrl: './app.component.html', template: ` {{ title }} // export class의 title사용 {{ hero.name }} //히어로 라는 클래스의 name을 사용 ( ngModel로 바인딩 되어있음 id: {{ hero.id }} 이름 : //아래와 같이 모델링 해준다. `, styleUrls: ['./app.component.css'], }) [(ngModel)]을 사용..
Angular Cli 으로 프로젝트 시작 Anglar Cli 로 자동으로 프로젝트를 생성 할 수 있다. 1.npm 으로 cli 을 설치한다. npm install -g @anuglar/cli 2.폴더를 생성하고 3. cli 로 프로젝트를 생성한다. ng new AppName 4. 서빙 해본다. ( 프로젝트의 변경이 있을 경우 자동으로 컴파일 &서버 ng serve 5. 프로젝트 이해 ------------------------------------------ app.component.ts 첫번째 컴포넌트가 생성된 것이고 루트컴포넌트라고 하며 app-root라고 한다. 앱이 커지면서 컴포넌트 트리의 루트가 될 컴포넌트이다. app.component.css 에서 스타일을 지정 할 수 있고, app.component.html 에 내용을 작성 할 수 ..
TypeScript in VS_Code typescript 는 모든 브라우져에서 호환 가능한 스크립트 언어이다. 이를 사용하기 위해서는 브라우져로 전송하기 전에 JS 언어로 컴파일 해주어야 한다. 순서는 이렇다. 1. npm install -g typescript 2. test.ts 파일 생성 3. tsc test.ts 로 컴파일 >> .js 파일 나옴 4. node test.js 파일 실행 ======================================= 또한 우리는 tsc 컴파일러의 기본 컴파일 옵션이 아닌 추가 설정을 하고 싶을떄 tsconfig.json 파일을 생성해서 설정해주면 된다. 우리는 컴파일된 .js 파일을 특정 폴더에 저장해주도록 설정해보겠다. { "compilerOptions": { "target": "es5", "m..
vuetify 사용 시작 1. 프로젝트의 vue폴더에 들어가서 ( vue-cli3로 설치된 폴더) 터미널 >> npm install vuetify 2. node-modules 에 vuetify 설치된것을 확인 할 수 있다. 3. 다음을 추가한다. ----main.js-------------------------- import Vuetify from 'vuetify' import 'vuetify/dist/vuetify.min.css' Vue.use(Vuetify) ============================================================================================================에러잡기=======================================..
모듈 내보내기 ,가져오기 두가지방법 CommonJS / ES6 1. https://www.daleseo.com/js-module-require/ 자바스크립트 CommonJS 모듈 내보내기/불러오기 (require) Engineering Blog by Dale Seo www.daleseo.com 구형 : 많은 프로젝트에서 ES6 모듈 시스템을 점점 더 널리 사용되고 있는 추세이기는 하지만, 안타깝게도 아직까지 항상 import 키워드를 사용해서 코딩을 할 수 있는 것은 아닙니다. 태그를 사용하는 브라우저 환경에서는 물론이고, NodeJS에서도 CommonJS를 기본 모듈 시스템으로 채택하고 있기 때문에, Babel과 같은 ES6 코드를 변환(transpile)해주는 도구를 사용할 수 없는 상황에서는 좋든 싫든 require 키워드를 사용해야 합니다. 따라서 Commo..
npm run build / npm run serve 한번에 해주는 플러그인 (maven) https://eastgyu.github.io/spring/Spring-Vue/ [Spring] Spring Boot 와 Vue.js 연동하기 Spring Boot와 Vue.js 연동하기 eastgyu.github.io pom.xml에 다음추가 ----------------------------------------------------------------------------------------------------------------------------------- ... org.springframework.boot spring-boot-maven-plugin com.github.eirslett frontend-maven-plugin 1.8.0 frontend frontend install n..
에러!! <strong>We're sorry but frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> npm run serve 를 하기전에 npm run build 를 해줘보자! 추가. 에러가 아니였다. 우리가 제대로된 코드를 작성하지 않으면 소스내에 있는 index.html 을 보여주는것이다. 소스를 다시확인하자.

티스토리툴바