개발 공부/PWA
-
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 사용으로 가볍고 빠름 : 변경된 부..
-
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 부분에 원하는 문구를 입력해줍..
-
Visual Studio Code 라이브 서버 설치 , 사용 방법개발 공부/PWA 2023. 2. 14. 15:13
VSCode는 확장 기능을 통해서 다양한 기능 추가가 가능합니다. 그 중 라이브 서버를 설치하여 사용해보겠습니다. * 라이브서버란? 미니 웹 서버의 한 종류로, HTML 문서 작업 후 바로 로컬 서버에서 테스트 가능하게 함 * 한글 언어팩 설치 방법 Visual Studio Code 한글 언어 팩 설치 방법 라이브 서버 설치 방법 1. 좌측 메뉴 맨 아래 Extensions 클릭 2. Live Server 검색 3. 설치 클릭 4. 버튼이 사용안함으로 바뀌었다면 설치 완료. 라이브서버 사용 방법 VSCode 웹 프로젝트 생성 및 실행하기 (HTML) VSCode 웹 프로젝트 생성 및 실행하기 (HTML) VSCode를 이용하여 html 파일을 만들고 문장을 출력해보는 실습을 해보겠습니다. 1. 상단 메뉴..