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) ..
문제상황 프로젝트에서 teacher이 회원가입 할 때 class가 null 이면 회원가입이 안되는 오류가 있어, class에서 기본적으로 '무소속' 값을 하나 가지고 있어야 했다. 그런데, 클래스를 생성하려면 선생님이 로그인을 해야하는 상황이다. 여기서 문제가 발생했다. 만약 선생님이 한명도 없고, 클래스도 한명도 없는 초기 상황에서 선생님은 어떻게 회원가입을 할 것인가? 회의에서는 ... 실행하자마자 선생님을 한명 넣자 (관리자) 실행하자마자 클래스를 하나 넣자 class가 null이 가능하도록 하자. 회의 결과는 2번이었다. 무소속을 처음부터 집어넣고 시작하자고 했다. Teacher table의 classnum은 다음과 같은 방식으로 입력하였다. https://skylarcoding.tistory.c..
Vue란? front 앱의 기본 뼈대와 api를 제공하는 Java Script 프레임 워크이다. 컴포넌트 베이스 개발이다. 컴포넌트는 (화면 ui 구성) , data, 메서드로 구성된다. 보다 동적이고 상호 호환적인 웹 애플리케이션을 개발하기 위해 사용된다. 사용방법 1. CDN 코드로 사용해서 빠르게 호출 2. 다운로드 후 설치 Node.js 설치 -> Vue 설치 .. 등의 과정을 거쳐 설치하여 사용한다. CDN 코드로 호출하는 것보다 더 많은 기능을 사용할 수 있다. 1. HTML 페이지 생성 2. div 생성 div 로 id 를 하나 부여하고, 해당영역을 Vue Application으로 할당해야한다. 3. Vue 어플리케이션 생성자 생성자를 선언하여 뷰 앱을 생성한다. 변수를 만들고 값을 할당하여..
