전체 글
-
Vue js SPA 프로젝트 생성 및 실행하기, node js 설치개발 공부/PWA 2023. 9. 19. 08:29
SPA란? 단일 페이지 어플리케이션으로 사용자가 접속 후 다시 페이지를 리로딩하지 않고 필요한 부분만 로딩되는 형태. 적은 트래픽과 빠른 페이지 변환이 장점. Node js 설치 SPA 사용을 위해 node js 설치 필요 1. 홈페이지 접속 후 LTS 버전으로 다운 2. 명령 프롬프트에서 Vue-CLI 설치 : vue cli가 기본적인 프로젝트 세팅 해줌 (폴더 구조, 웹팩 설정, 라이브러리 구성 등) C:\Users\user>npm install -g @vue/cli 3. 프로젝트 생성 - 신규 프로젝트 템플릭 설정 : 기본 또는 사용자 정의 중 선택 웹팩 모듈 설치 vs code 터미널 창에서 웹팩 모듈 설치할 폴더로 이동후 설치 진행 npm install UNABLE_TO_VERIFY_LEAF_S..
-
Vue.js 프레임워크 데이터 바인딩 조건문 if 반복문 for개발 공부/PWA 2023. 9. 13. 16:05
Vue.js , Vuetify.js란? 기본 구조 단방향 바인딩과 v-Bind 디렉티브 양방향 바인딩과 v-model 디렉티브 조건문 반복문 이벤트핸들러, on 조건문 v-if vue.js의 조건문은 if뿐, 삼항 연산자 없음 {{ bFlag }} 참 거짓 반복문 v-for 반복문은 for문만 있음 while문 없음 과일 리스트 {{ item.sFruitName }} - 숫자 나오는 이유 : 태그는 순서가 있는 태그라서 이벤트 실행 v-on 이벤트 핸들러로 vue 메서드 실행 {{ sTitle }} 눌러주세요
-
Vue.js 기초 문법 데이터 바인딩 v-Bind v-model개발 공부/PWA 2023. 9. 13. 14:00
Vue.js , Vuetify.js란? 기본 구조 단방향 바인딩과 v-Bind 디렉티브 양방향 바인딩과 v-model 디렉티브 조건문 반복문 이벤트핸들러, on 단방향 바인딩, v-Bind - Html 어트리뷰트값에 연결하여 엘리먼트에 실시간으로 렌더링 제목! - 한쪽으로만 바인딩 되기 때문에 어트리뷰트 값 바꿔도 변수는 변하지 않음 머스태시와 v-bind 차이 {{ titleVal }} 1) 머스태시 2) v-bind : html의 속성 값을 넣음 양방향 바인딩, v-Model {{ sMsg }} 양뱡향으로 데이터 동기화되기 때문에 텍스트박스 내용 변경시 변수 값도 변경 됨 결과 화면
-
Vue.js 프레임워크를 이용한 PWA - 뷰 시작하기, 기초 문법개발 공부/PWA 2023. 9. 13. 10:05
Vue.js , Vuetify.js란? 기본 구조 단방향 바인딩과 v-Bind 디렉티브 양방향 바인딩과 v-model 디렉티브 조건문 반복문 이벤트핸들러, on Vue.js란? - 가볍고 직관적인 프론트엔드 개발 프레임워크로 단일 페이지 어플리케이션에 적합하다. - 링크 클릭할때마다 새로운 페이지 로드하는 방식이 아닌, 초기에 전체 페이지 로드 후 필요한 것만 비동기적으로 로드하기때문에 앱 성능 개선 가능하다. - 가상 DOM 사용하고 조작을 최소화하여 성능 향상 * 장점 - 양방향 데이터 바인딩 : 데이터 변화가 자동으로 화면에 반영되기때문에 별도로 동기화 할 필요 없음 - 컴포넌트 기반 아키텍처 : 작은 컴포넌트로 만들어 사용하여 UI를 재사용 용이 - 가상 DOM 사용으로 가볍고 빠름 : 변경된 부..
-
google api OAuth 클라이언트 ID 생성개발 공부 2023. 5. 10. 12:31
인증 정보 https://console.cloud.google.com/apis/credentials 접속하기 1. OAuth 클라이언트 아이디 생성 2. 애플리케이션 유형 선택, 이름 입력 데스크톱 앱, 웹 등 api 사용할 프로그램 유형을 선택하고 해당 프로그램 이름을 입력합니다 3. 사용자 인증 정보 들어가보면 추가한 앱 이름이 목록에 추가된 것을 볼 수 있습니다 1. https://developers.google.com/oauthplayground/ OAuth 2.0 Playground Request Body Manual entry Enter the data that will be added to the body of the request: File You may choose to send a fi..
-
Google Api 사용하기 - 프로젝트 생성개발 공부 2023. 5. 10. 10:10
google drive api 사용을 위해 1. 사이트 접속 https://console.cloud.google.com/apis/dashboard?project=driveproject-386300 Google 클라우드 플랫폼 로그인 Google 클라우드 플랫폼으로 이동 accounts.google.com 2. 프로젝트 생성 사이트 좌측 상단 화살표 눌러서 프로젝트 선택 모달 띄움 모달 우측 위에 새 프로젝트 클릭하여 프로젝트 생성 가능 3. 프로젝트 이름 입력 프로젝트 이름 입력 후 만들기 버튼 클릭 4. 프로젝트 생성 완료 다시 프로젝트 선택 모달 들어가보면 생성된 프로젝트 확인 가능
-
javascript 모듈 사용법 import, export 방법 실습 예제개발 공부/PWA 2023. 2. 21. 16:23
자바스크립트 모듈(Module)이란? -> 코드 관리하는 가장 작은 단위 -> 코드 관리, 재활용 용이 -> 이름으로 내보내기(named) / 기본으로 내보내기(default) 이름으로 내보내기/가져오기 1. md_named.js const strHi = 'hello';//상수 선언 const fnSum = (num1,num2) => num1+num2;//함수 선언 export{strHi,fnSum};//상수, 함수 이름으로 내보내기 2. main.js import {strHi, fnSum} from './md_named.js'; // md_named에서 내보내기한 모듈 가져오기 console.log(strHi); // hello 출력 console.log(fnSum(1, 2)); // 3 출력 md_n..
-
javascript 화살표 함수 return 생략 예제 소스개발 공부/PWA 2023. 2. 21. 13:22
자바스크립트 ES6 문법에서 새로운 함수 표현식이 생겼습니다. 바로 화살표 함수입니다. 기본 함수 선언 방식 const fn = function(num1,num2){ return num1+num2; } fn이라는 함수는 두개의 숫자를 매개변수로 받고 더한 값을 리턴하는 함수입니다. 위와 같은 함수 선언 방식이 가장 익숙한 방법이죠 이 함수를 화살표 함수로 바꿔보면 아래와 같습니다. 화살표 함수 const fn = (num1,num2) => { return num1+num2; } 첫번째 줄이 아주 간단하게 바뀌었습니다. 이번엔 이 함수에서 return 명령어를 제거해보겠습니다. 화살표 함수 return 생략 const fn = (num1,num2) => num1+num2; 화살표 함수 기능을 충분하게 사용..