이번 포스팅은 CDN 코드를 사용하지 않고 VS CODE에서 직접 설치해 사용하는 방법에 대해 소개한다. Vue 란? MVVM 패턴의 View Model 레이어 라이브러리이다. Vue 생성하는 방법 Vue, VSCode 환경설정. Axios, Vue-Router 프로젝트 생성 vscode Axios, Vue-Router 설치 VSCODE에서 터미널 > 새 터미널 실행 맥 개발환경 세팅, 맥에 Vue.js 설치 & 프로젝트 만들기 (w. Visual Studio Code) Vue.js 설치 vscode 를 설치한다 자신의 버전에 맞는 vscode 를 설치 skylarcoding.tistory.com Vue의 Directive Vue 의 기본적인 Directive (지시자) 는 아래 CDN 코드를 이용한 사..
Entity Entity에 언더바 ('_')를 집어넣으면 DAO에서 인식하지 못하는 오류가 발생한다. @Entity @Setter @Getter @ToString @NoArgsConstructor @AllArgsConstructor public class SubscribeParty { @ManyToOne @JoinColumn(name="subscribe_num", nullable=false) @OnDelete(action=OnDeleteAction.CASCADE) //만약 board에서 본인이삭제하면 걍 아예 안뜨는걸로 private SubscribeBoard subscribe_num; private int point_basket; private Date remain_month; private int s..
Git 사이트에서 새로운 레포지토리 생성하기 깃 사이트에서 새로운 레포지토리를 생성한다. Git 연결하기 새 창열기를 먼저하고, VS CODE 에서 F1 키를 이용해 검색 창을 연다. 검색창에서 git clone을 실행한다. 새 창 열기는 기존에 공부할 때 사용하던 vue 탐색기와 구분하기 위해 사용하였다. Git Hub 에서 레포지토리 불러오기 깃에 있는 레포지토리를 불러올 수 있다. 선택하면 원하는 레포지토리를 선택할 수 있다. 새로운 폴더가 생성되는 것이므로, 선택할 때 유의해서 선택한다. 나는 vue 폴더를 모아놓는 곳을 리포지토리 위치로 선택했다. 선택하면 이렇게 폴더가 생성되고 자동으로 열리게 된다. Git 확장 프로그램 SourceTree 처럼 Git 의 커밋 기록을 쉽게 볼 수 있는 확장 ..
1,2편 보러가기 Vue.js 사용법 1 (CDN 코드 이용) Vue란? front 앱의 기본 뼈대와 api를 제공하는 Java Script 프레임 워크이다. 컴포넌트 베이스 개발이다. 컴포넌트는 (화면 ui 구성) , data, 메서드로 구성된다. 보다 동적이고 상호 호환적인 웹 애플리 skylarcoding.tistory.com Vue.js 사용법 2 (CDN 코드 이용) Vue란? 1편 보러가가기 ⬇️ Vue.js 사용법 1 (CDN 코드 이용) Vue란? front 앱의 기본 뼈대와 api를 제공하는 Java Script 프레임 워크이다. 컴포넌트 베이스 개발이다. 컴포넌트는 (화면 ui 구성) , data, 메서 skylarcoding.tistory.com Directive (지시자) 응용 (사..
vscode Axios, Vue-Router 설치 VSCODE에서 터미널 > 새 터미널 실행 맥 개발환경 세팅, 맥에 Vue.js 설치 & 프로젝트 만들기 (w. Visual Studio Code) Vue.js 설치 vscode 를 설치한다 자신의 버전에 맞는 vscode 를 설치하면 된다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugg skylarcoding.tistory.com Axios, Vue-Router 설치 하나씩 입력해준다. npm install axios..
그동안 로그인 유지에 세션을 사용하였었다.하지만 RestApi 는 stateless(상태 유지 안함)이기 때문에 세션과는 맞지 않는 특성을 가지고 있다. 그렇기 때문에 rest-api 에서는 로그인 유지로 token을 사용한다. 토큰에 정보를 담아서 암호화 ➡️ 복호화 한다. 인증을 통과한 유저에게 생성한 토큰을 주고, 유저는 받은 토큰을 요청 헤더에 담아서 보낸다. 사용방법 pom.xml에 의존성을 추가한다. io.jsonwebtoken jjwt-api 0.11.5 io.jsonwebtoken jjwt-jackson 0.11.5 runtime io.jsonwebtoken jjwt-impl 0.11.5 runtime demo 패키지 밑에 패키지 생성, jwttokenprovide 파일을 넣어준다. pac..
기능 설명 기존 목록 불러오기 목록 추가기능 (이름, 수량) 목록에서 체크리스트 체크/체크 해제 기능 중요도 확인 기능 장바구니 목록 {{item.name}} / {{item.num}} / {{item.important}} {{item.name}} / {{item.num}} / {{item.important}} name: num: 중요해?{{important}} 추가
v-on:click="a" 코드는 이벤트 핸들러로써 a() 메서드 함수를 호출하는 형태로 이벤트 핸들러를 지정한다. 그래서 클릭 이벤트가 발생하였을 때 a() 메서드를 호출한다. v-on:click="a()" 도 이벤트 핸들러로써 a()메서드 함수를 호출하는 형태이다. 이 두가지 차이를 자세하게 다뤄보려고 한다. v-on:click="a()" v-on:click="a" 메서드 호출 시점 해당 요소가 렌더링될 때마다 메서드가 호출된다. 이는 a() 메서드를 템플릿에서 직접 호출하는 것과 유사한 동작을 한다. 메서드 이름만을 이벤트 핸들러로 지정하는 방식은 이벤트가 발생했을 때 메서드가 호출된다. 따라서 이벤트가 발생해야만 메서드가 실행된다. 메서드 인자 전달 v-on:click="a(arg)">와 같이 메..
Vue란? 1편 보러가가기 ⬇️ Vue.js 사용법 1 (CDN 코드 이용) Vue란? front 앱의 기본 뼈대와 api를 제공하는 Java Script 프레임 워크이다. 컴포넌트 베이스 개발이다. 컴포넌트는 (화면 ui 구성) , data, 메서드로 구성된다. 보다 동적이고 상호 호환적인 웹 애플리 skylarcoding.tistory.com Directive (지시자) Vue Events vue event 는 vue의 디렉티브(지시자) 중 하나인 'v-on' 또는 '@' 기호를 사용하여 이벤트 처리를 할 수 있다. vue events 디렉티브의 기능은 Dom 이벤트를 감지하고 Vue 인스턴스의 메소드와 연결하는 것이다. v-on:click click click 버튼을 누르시오 cnt:{{cnt}} ..
Vue.js 설치 vscode 를 설치한다 자신의 버전에 맞는 vscode 를 설치하면 된다. https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudio.com Vue Language Features(Volar) ..
