일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- oracle
- 시큐리티
- JPA
- db
- kotlin
- Security
- error
- 코틀린
- Spring
- JavaScript
- 넥사크로
- 자바
- aws
- GitHub
- 쿼리
- 에러
- Java
- mybatis
- 오라클
- Eclipse
- Git
- 함수
- 알고리즘
- 방법
- Vue
- 스프링
- 프로그래머스
- 생성
- jquery
- IntelliJ
- Today
- Total
목록Vue (17)
송민준의 개발노트
github.com/axios/axios axios/axios Promise based HTTP client for the browser and node.js - axios/axios github.com axios란? - axios는 브라우저, node.js 등을 위한 프로미스 기반의 http 비동기 통신 라이브러리임. 특징 - 프로미스 활용(es6+) - 요청과 응답 데이터의 변형 - JSON형태로 자동 변경 간단 사용법 해당 프로젝트 경로로 이동 후 아래 명령어 입력 npm install axios package.json과 package-lock이 업데이트 됨. 코드 구조 Home Board List : Loading... Api result: {{boards}} Board 1 Board 1
우선 Git이 설치되어 있어야 한다. 이래저래 만지다 보니 커밋된거 같은데;; 1. 일단 아톰에서 local repository를 만든다. 만들면 아래 오른쪽 처럼 staged 상태창에서 깃허브에 올릴걸 설정한다. 2. 올릴거 정하고 커밋하면 로컬저장소에 있는게 커밋됨 3. cmd 키고 프로젝트 경로로 간다.(난 vuejs) 4. 깃헙에서 레퍼지토리를 하나 만든다.(이름은 Vue_Toy_Atom 으로 만들었음) 5. 아래처럼 명령어 치면 된다. 6. 확인하면 잘 올라가 있다. 맨날 이클립스나 인텔리제이, 소스트리 같은 GUI 툴을 사용해서 업로드 했는데 이번엔 첨으로 bash를 써봤다. 꽤나 간편한뎅...?
vue에서 로컬 스토리지에 값을 넣는 경우가 있다. 아래처럼 localStorage.setItem으로 설정해주면 된다. 개발자모드에서 확인 가능
뷰 개발자들이 편하게 프로젝트를 구성할 수 있도록 뷰 코어 팀에서 CLI 도구를 제공 CLI 설치를 위해선 node.js가 설치되어 있어야 한다. 커맨드 창에 입력 npm install vue-cli -global 테스트로 vue를 입력하면 아래처럼 뜬다. 초기 구성을 위한 명령어(vue init) vue init webpack // 고급 웹팩 기능 활용한 구성 방식. 테스트, 문법 검사 등 지원 vue init webpack-simple // 웹팩 최소 기능을 활용한 프로젝트 구성 방식. 빠른 화면 프로토타이핑용 vue init browserify // 고급 브라우저파이 기능 활용한 구성 ㅂ아식, 테스트, 문법 검사 등 지원 vue init browserify-simple // 브라우저리파이 최소 기능..
뷰 템플릿? HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해주는 속성이다. 템플릿 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환한다. 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 한다. 사용 안한 경우 {{message}} 사용한 경우 템플릿에서 사용하는 뷰의 속성과 문법 1. 데이터 바인딩 데이터 바인딩은 HTML 화면 요소를 뷰 인스턴스의 데이터와 연결하는 것을 의미한다. 주요 문법으로는 {{}}문법과 v-bind 속성이 있다. {{}} 은 위 예제에서 message가 바뀌면 반응성에 의해 화면이 자동으로 갱신되는데 갱신되는 ..
HTTP 통신 관련 라이브러리(Ajax와 유사) 1. 뷰 리소스 프레임워크 목록 가져오기 액시오스 뷰 커뮤니티에서 가장 많이 사용 되는 HTTP 통신 라이브러리임. Promise 기반의 API형식이 다양하게 제공됨. (서버에 데이터를 요청하여 받아오는 동작과 같은 비동기 로직 처리에 유용한 자바스크립트 객체 - Promise) 프레임워크 목록 가져오기
npm i vue-router --save 라우팅? 웹 페이지 간의 이동 방법. 현대 웹 앱 형태 중 하나인 싱글 페이지 어플리케이션에서 주로 사용 더보기 싱글 페이지 어플리케이션 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아닌 미리 받아 놓고 페이지 이동 시 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 어플리케이션 뷰 라우터 뷰 라우터는 뷰에서 라우팅 기능을 구현할 수 있도록 지원하는 공식 라이브러리이다. 태그는 다음과 같음 페이지 이동 태그. 로 표시됨. 클릭하면 URL로 이동 페이지 표시 태그. 변경되는 URL에 따라 해당 컴포넌트를 뿌려주는 영역 뷰 라우터 예제 Main 컴포넌트로 이동 Login 컴포넌트로 이동 * mount API el 속성과 동일하게 인스턴스를..