1.변수 선언 방식은 총 3가지 가 있습니다. # var,let,const 차이점 5가지 1.중복선언 가능여부 2.재활당 가능여부 3.변수 스코프 유효범위 4.변수 호이스팅 방식 5.전역객체 프로퍼티 여부 1.중복선언 1.var:중복선언이 가능하다 . // 첫번째 변수 var a = 10; console.log(a); // 10 //두번째 변수 var a = 20; console.log(a); // 20 2.const,let : 중복선언 불가능 let a=10 ; let b=10 ; // SyntaxError: Identifier 'a' has already been declared 2.재할당 1.var,let : 값의 재할당이'가능'한 변수다 var a =10; a =20 ; console.log (a..
1.Vuex 란 ? Vuex 는 vue.js 애플리케이션 에대한 상태관리 + 라이브러리 Vuex를 사용하면서 해당 어플리케이션의 모든 컴포넌트에 대한 중앙 집중식 역할을한다. 데이터 흐름은 모두 한방향(SPA) 로 흐른다. 강의를 들으며 공부를 해보았던 예제 입니다. export default{ namespaced:true, //Data 매칭 하는 개념이다. state: () => ({ a:123, b:[] }), // computed 같은개념 getters:{ someGetter1(state,getters){ return state.a + 1 }, // 여기에서 보여준 다른 Getters 선언 someGetter2(state,getters){ return state.a + getters.someGett..
Vue Router 란? vue-router 에서 router 라는것을 일반적인 화면이 전환될때 사용하며 명칭은 router 라고 합니다. SPA 는 Single Page Aplication 한개의 페이지로 이루어진 어플리케이션을 말한다. 그림판으로 설명드려 죄송합니다 제가 보기 쉽게 하기위해 그리면서 글을 작성했습니다. index.html (메인페이지)를 한개페이지를 보여주기위한 예제입니다. 1-1.Hash Mode Vs History Mode 차이점 Hash mode Hash mode는 모든 URL을 HASH(#) 형태로 서비스합니다. URL이 변경될 때 페이지가 다시 로드 되지 않는다. export default new VueRouter({ routes }) History mode 페이지를 다시로드..
var Person,$elem,_name,first_name,val1 (사용가능한 예제) 1. 식별자 란?! 어떤 값을 구별해서 식별해낼 수 있는 고유한 이름을 말한다. 식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다. 단, 식별자는 특수문자를 제외한 문자, 문자, 숫자, 언더스코어(_), 달러 기호($)로 시작해야 한다. 숫자로 시작하는 것은 허용하지 않는다. 예약어는 식별자로 사용할 수가 없다. 1-1. 예약어란? 예약어는 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어를 말한다. 자바스크립트의 예약어는 다음과 같다. await, break.case, catch, class, const, let, var, if... 등등 이 있습니다 await,br..
1.Moment Js 란? 날짜와 시간에 관련된 데이터의 파싱, 검증 조작 등을 위해 만들어진 유용한 라이브러리입니다. 이전에 Date 객체를 이용하여 날짜와 시간에 관련된 연산을 할 때는 별도의 공통 함수를 만들어 사용해야 하지만 Moment Js를 사용하면 내장된 함수를 이용하여 간단하게 처리 가 가능하다 단점으로 용량이 무겁다 라고 정의 내릴 수 있습니다 https://momentjs.com/ Moment.js | Home Format Dates moment().format('MMMM Do YYYY, h:mm:ss a'); moment().format('dddd'); moment().format("MMM Do YY"); moment().format('YYYY [escaped] YYYY'); mome..
1.lowdb 란 JSON이라는 파일 형식을 사용하여 데이터를 저장하는 간단한 데이터 베이스이며 선언 방식입니다.(버전 4 버전으로 설치하였습니다 5 버전으로 설치해보았지만 다운그레이드를 하여 성공을 하였습니다) import lowdb from 'lowdb' import LocalStorage from 'lowdb/adapters/LocalStorage' const adapter =new LocalStorage('todo-app') //DB this.db = lowdb(adapter) 사용하는 방법 createTodo(title){ const newTodo = { id:cryptoRandomString({length: 10 }), title, createdAt: new Date(), updatedAt: ..
1.Entry - 자바스크립트가 로딩하는 모듈이며 모듈간의 의존성은 증가하며, 의존성의 그래프의 진입점을 웹팩에서 Entry이다 . entry:{ app:[ '@babel/polyfill', path.join(__dirname,'main.js') ] }, 2.Output -엔트리 에설정한 자바스크립트 파일을시작으로 의존되어 있는 모든 모듈을 하나로묶을것이다 번들된 결과물을 처리할 위치는 Output에 기록한다. output:{ filename:'[name].js',//app.js path:path.join(__dirname,'dist') }, 3.loader (로더) 웹팩은 모든 파일을 모듈로 관리한다고 한다. 자바스크립트 뿐만아닌 이미지,폰트,스타일 시트 전부 모듈로 관리한다. 로더는 use 키로 구성..
모듈 설치 가 끝난후 Vue-cli 로 Vue -Todo-list 진행작업 을 하고있습니다. 오류에 원인은 package.json 버전 다운그레이드를 해줘야 한다. (최신버전에서는 호환이 불가한이유였다.) webpack 관련 과 babel 버전을 다운그레이드를 해줘야한다.. 그리고 항상 error 속에 답이 있다 ..ㅠㅠ 저같이 삽질하시지 맙시다.. ㅠㅠ //개발용 의존패키지 입니다. npm i -D webpack@^4 webpack@^4
의존성 과 개발용 의존성 모듈을 배웠습니다. 패키지의 배포 시 포함될 의존성 모듈을 지정합니다. $ npm install --save MODULE_NAME # or $ npm i MODULE_NAME 개발용 모듈설치 패키지의 개발시 사용될 의존성 모듈을 지정합니다(배포시 포함되지 않는다.) $ npm install --save-dev MODULE_NAME # or $ npm i -D MODULE_NAME 개발용 의존성 과 의존성의 차이점은 배포 차이인 것 같다 (아직은 많이 몰라서 다시 공부해서 제대로 추가하겠습니다.) Wepack 웹팩은 오픈소스 자바스크립트 모듈 번들 소스이다. (쉽게 말해 Plugin라고 생각하면 편할 것 같다.) -Webpack-cli는 터미널에서 웹팩 명령 (Commands)를 ..
- Total
- Today
- Yesterday
- 자바스크립트 Basic
- VAR
- router
- Moment js
- babel
- Wepack-cli
- Vue Todo list
- lowdb
- dayjs
- Vue module 설치
- Vuex
- vue
- 트리구조
- webpack-cli
- Cli 오류
- 프론트엔드
- 자바스크립트 문법
- const
- vue-cli
- FRONT-END
- 재귀함수
- Wepack
- vue router
- Tode list
- loader
- 네이밍규칙
- 시간 라이브러리
- 모던 자바스크립트
- Vue예제
- lodash
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |