분류 전체보기
-
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; 화살표 함수 기능을 충분하게 사용..
-
JavaScript 변수 선언 var let const 차이와 사용법 예제(+템플릿 리터럴)개발 공부/PWA 2023. 2. 15. 13:48
자바스크립트는 ES6 부터 변수 선언할때 var 외에 let, const가 추가되었습니다. 스코프는 변수의 유효범위와 연관 있습니다. 여기서 변수의 유효범위란 해당 변수를 사용할수 있는 범위입니다. [함수 스코프 : 유효범위가 함수 내부] : var -> var 는 함수 스코프 가능 블록 스코프 불가능 /* 함수 스코프 */ fnEx(); function fnEx(){ var a = 5; console.log(a);//5 출력 } console.log(a); // 오류 함수 스코프 가능한 var 변수는 함수 밖에서는 사용 불가능합니다. /* 블록 스코프 */ var a = 3; { var a = 5; console.log(a);// 5출력 } console.log(a); // 5출력 블록 스코프가 불가능..
-
VSCode 웹 프로젝트 생성 및 실행하기 (+핸드폰 화면 미리보기)개발 공부/PWA 2023. 2. 14. 15:16
VSCode를 이용하여 html 파일을 만들고 문장을 출력해보는 실습을 해보겠습니다. 1. 상단 메뉴 에서 [파일 -> 폴더열기] 를 선택한 후, 프로젝트를 저장할 폴더를 생성 또는 선택해줍니다. 2. TEST라는 폴더를 선택하면 이렇게 작업 폴더로 선택됩니다. 3. [파일->새 파일] 선택 후 HTML 파일을 생성합니다. 4. index.html 파일을 만들어 주었습니다. * 여기서 중요한 점은 폴더를 만든 후 파일을 만든다는 점입니다. 순서 기억하기! 코드 작성 VSCode는 생성된 파일 확장자를 보고 관련 기능을 제공해줍니다. 가장 자주 사용하는 상용구 코드를 불러오려면 두번째 [html:5] 를 클릭해줍니다. 이렇게 기본 구조를 불러온 후 언어를 변경해주고, body 부분에 원하는 문구를 입력해줍..