깔끔한청년개발일지

2.자바스크립 문법공부 ( 변수)

깔끔한청년 — Sun, 26 Sep 2021 23:21:12 +0900

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)

let b = 10;
	b = 20;
	console.log(b); // 20

2.const: 값의 재할당 이'불가능' 한 상수다.

const c = 10;
c=20; // TypeError: Assignment to constant variable.

const 는 상수를 선언하는 키워드 입니다.

재할당값은 불가능하다 .

3.스코프

스코프는 유효한 참조 범위를 말한다.

1) 함수 레벨 스코프

var x =1; 
if (true){
// x 는 전역변수이며 , 이미 선언된 전역변수 x가 있으며 x 변수는 중복선언된다.
var x =10 ;
}
console.log(x) // 10

var i =10 ;

for(var i=0; i<5; i++){
// i 는 전역변수이며 , 이미 선언된 전역변수 i 가 있으며 i 변수는 중복선언된다.
	console.log(i)	//0 1 2 3 4 5
 }
 console.log(i) //5

let foo =1;	//전역변수
{
	let foo=2; //지역변수
    let bar =3;  //지역변수
 }
 console.log(foo) //1
 console.log(bar)  // ReferenceError: bar  is not defined

4.호이스팅

자바스클립트는 코드를 실행하기 전, 일종의 '코드 평가 과정'을 거치는데,

이 때 '변수 선언문'을 미리 실행두기 때문에 뒤에서 선언된 변수도 앞의 코드에서 참조할 수 있게 된다.

이를 변수 호이스팅이라고 한다.

4-1.var:변수 호이스팅이 발생

//  foo 변수가 선언(1.선언단계)
// (2.초기화 단계)
console.log(foo);// undefined
//(3.할당 단계)
foo=123;

console.log(foo)

var foo

4-2.let,const 변수 호이스팅이 발생 하지만 다른방식으로 작동

let/const로 변수를 선언하는 경우,

코드 실행 전에는

1) 변수 선언

2) 초기화는 코드 실행 과정에서 변수 선언문을 만났을 때 수행이 가능하다.

console.log(bar); // ReferenceError: bar is not defined 
let bar = 10;

5.전역객체 프로퍼티 여부 (정리예정입니다.)

6.Vuex (state,getters,Mutations,Actions)

깔끔한청년 — Fri, 24 Sep 2021 22:34:18 +0900

1.Vuex 란 ?

Vuex 는 vue.js 애플리케이션 에대한 상태관리 + 라이브러리
Vuex를 사용하면서 해당 어플리케이션의 모든 컴포넌트에 대한 중앙 집중식 역할을한다.

단방향의; 데이터 흐름 (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.someGetter1
    }
  },
  // payload 
  mutations:{
    someMutation(state,payload){
      state.a= 789
      state.b.push(payload)
    }
  },
  //context 는 state,getters,commit,dispatch  총 4가지를 사용할수가있다 
  actions:{
    someAction1({ state,getters,commit,dispatch },payload){
      state.a=789 //Error
      // state.b.push(payload) Error
      commit('someMutation',payload)
    },
      someAction2(context,payload){
        context.commit('someMutation')
        context.dispatch('someAction1',payload)
    }
  }
}

1.Vuex 를 공부하면서 조금씩 조금씩 더욱더 추가할예정입니다 . !!

2.살을 붙이면서 내용정리를 한번더 훓겠습니다

5.Vue Router (SPA) 및 Hash Mode Vs History Mode 차이점

깔끔한청년 — Fri, 24 Sep 2021 00:45:33 +0900

Vue Router 란?

vue-router 에서 router 라는것을 일반적인 화면이 전환될때 사용하며 명칭은 router 라고 합니다.

SPA 는 Single Page Aplication 한개의 페이지로 이루어진 어플리케이션을 말한다.

SPA 설명에제 그림판

그림판으로 설명드려 죄송합니다 제가 보기 쉽게 하기위해 그리면서 글을 작성했습니다.

index.html (메인페이지)를 한개페이지를 보여주기위한 예제입니다.

1-1.Hash Mode Vs History Mode 차이점

Hash mode

Hash mode는 모든 URL을 HASH(#) 형태로 서비스합니다. URL이 변경될 때 페이지가 다시 로드 되지 않는다.

export default new VueRouter({
  routes
})

History mode

페이지를 다시로드 하지않고 URl을 탐색할수 가 있다 . SPA의 단일 페이지 클라이언트앱이기 때문에 그렇다.

export default new VueRouter({
  routes,
  mode:'history'
})

https://router.vuejs.org/kr/guide/essentials/history-mode.html#%EC%84%9C%EB%B2%84-%EC%84%A4%EC%A0%95-%EC%98%88%EC%A0%9C

HTML5 히스토리 모드 | Vue Router

HTML5 히스토리 모드 vue-router의 기본 모드는 hash mode 입니다. URL 해시를 사용하여 전체 URL을 시뮬레이트하므로 URL이 변경될 때 페이지가 다시 로드 되지 않습니다. 해시를 제거하기 위해 라우터의

router.vuejs.org

https://okky.kr/article/831473

OKKY | [VUE] SPA 웹 프론트앤드 개발을 위한 정리

원본: [VUE] SPA 웹 프론트앤드 개발을 위한 정리 목표 본 포스팅에서는 SPA Single Page Application 개발에 앞서 SPA에 대한 이해 및 자바스크립트 프레임워크 Vue.js에 대한 기본적인 이해를 목표로 하

okky.kr

1.식별자 네이밍 규칙 (모던 자바스크립트 Deep Dive)

깔끔한청년 — Wed, 22 Sep 2021 14:25:38 +0900

var Person,$elem,_name,first_name,val1 (사용가능한 예제)

1. 식별자 란?!

어떤 값을 구별해서 식별해낼 수 있는 고유한 이름을 말한다.

식별자는 특수문자를 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함할 수 있다.
단, 식별자는 특수문자를 제외한 문자, 문자, 숫자, 언더스코어(_), 달러 기호($)로 시작해야 한다. 숫자로 시작하는 것은 허용하지 않는다.
예약어는 식별자로 사용할 수가 없다.

1-1. 예약어란?

예약어는 프로그래밍 언어에서 사용되고 있거나 사용될 예정인 단어를 말한다.
자바스크립트의 예약어는 다음과 같다.

await, break.case, catch, class, const, let, var, if... 등등 이 있습니다

await,break.case,catch,class,const,let,var,if .. 등 이 있습니다.

http://www.w3bai.com/ko/js/js_reserved.html

JavaScript예약어

자바 스크립트, 일부 식별자는 예약어이며, 변수 또는 함수 이름으로 사용할 수 없습니다. 자바 스크립트 표준 ECMAScript 3 (ES3) 1999 년 12 월 출시되었습니다. ECMAScript 4 (ES4) 포기했다. ECMAScript 5 (ES5)

www.w3bai.com

자세한 내용들은 JavaScript 예약어 확인 바랍니다.

네이밍 컨벤션(카멜 케이스, 스네이크 케이스, 파스칼, 헝가리 언 케이스) 등 있으며

//카멜케이스(CameCase)
const firstName
//스네이크 케이스(snake_case)
const first_name
//파스칼 케이스(pascalCase)
const FirstName
//헝가리언 케이스
const strFistName
const $elem =document.getElementById('myId'); //DOM 노드

2. 자바스크립트 코딩규칙

(제가 필요한 예제이며, 같이 공유하면 좋을 거 같아서 참고 및 공부를 해보았습니다.)

2-1. 변수, 함수명은 카멜 케이스를 사용한다.

const firstName

2-2. 파스칼 케이스 클래스에 사용해준다.

const FirstName

요약 글을 올리는 이유는 제가 아직 부족하고 배울게 많아서 올리게 되었으며,

모르는 것들을 꾸준히 공부를 하면서 올릴 생각입니다.!

4.Moment.js 와 Day.js 사용법

깔끔한청년 — Tue, 21 Sep 2021 23:09:12 +0900

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'); moment().format(); Relative Time moment("20111031", "YYYYMMDD").fromNow(); moment("20120620", "YYYYMMDD"

momentjs.com

npm install moment --save

공식문서 직접 사용된 예제 방식입니다.

Format Dates

moment().format('MMMM Do YYYY, h:mm:ss a'); // 9월 21일 2021, 11:25:57 오후
moment().format('dddd');                    // 화요일
moment().format("MMM Do YY");               // 9월 21일 21
moment().format('YYYY [escaped] YYYY');     // 2021 escaped 2021
moment().format();

Relative Time

moment("20111031", "YYYYMMDD").fromNow(); // 10년 전
moment("20120620", "YYYYMMDD").fromNow(); // 9년 전
moment().startOf('day').fromNow();        // 하루 전
moment().endOf('day').fromNow();          // 33분 후
moment().startOf('hour').fromNow();      // 27분전

Calendar Time

moment().subtract(10, 'days').calendar(); // 2021.09.11.
moment().subtract(6, 'days').calendar();  // 지난주 수요일 오후 11:29
moment().subtract(3, 'days').calendar();  // 지난주 토요일 오후 11:29
moment().subtract(1, 'days').calendar();  // 어제 오후 11:29
moment().calendar();                      // 오늘 오후 11:29
moment().add(1, 'days').calendar();       // 내일 오후 11:29
moment().add(3, 'days').calendar();       // 금요일 오후 11:29
moment().add(10, 'days').calendar();      //2021.10.01

Multiple Locale Support

moment.locale();         // ko
moment().format('LT');   // 오후 11:30
moment().format('LTS');  // 오후 11:30:29
moment().format('L');    // 2021.09.21.
moment().format('l');    // 2021.09.21.
moment().format('LL');   // 2021년 9월 21일
moment().format('ll');   // 2021년 9월 21일
moment().format('LLL');  // 2021년 9월 21일 오후 11:30
moment().format('lll');  // 2021년 9월 21일 오후 11:30
moment().format('LLLL'); // 2021년 9월 21일 화요일 오후 11:30
moment().format('llll'); // 2021년 9월 21일 화요일 오후 11:30

2,. Day Js 란?!

"Moment.js"와 호환되는 API를 경량 라이브러리입니다.

https://github.com/iamkun/dayjs

GitHub - iamkun/dayjs: ⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API

⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API - GitHub - iamkun/dayjs: ⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same m...

github.com

2-1.npm 설치 예제입니다

npm install dayjs --save

import dayjs from 'dayjs'

2-2.isSame을 활용한 format 예제입니다.

isSame() 메서드는 날짜/시간이 같은지 비교하여 true 또는 false를 반환합니다.

현재 시간 가져오기를 해보았습니다.

const isSame =date.isSame(this.todo.updatedAt)
    if(isSame){
       return date.format('YYYY년 MM월 DD 일') 
      	}else{
       return `${date.format('YYYY년 MM월 DD 일')} (edited)`
 	 }

3-1.lowdb,lodash 사용 과정 및 오류 해결

깔끔한청년 — Sun, 19 Sep 2021 23:34:42 +0900

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: new Date(),
          done:false
        }

        this.db
          .get('todos')   //lodash
          .push(newTodo)  //lodash
          .write()  //마지막은 항상 write 를 붙여줘야합니다
      }

요약본

1.3일 동안 버전 그레이드로 고생했습니다.. 버전의 중요성을 알았고

2. 아직은 실력이 부족하다는 것을 알았습니다.

참조할 사이트

https://lodash.com/

Lodash

_.defaults({ 'a': 1 }, { 'a': 3, 'b': 2 });_.partition([1, 2, 3, 4], n => n % 2);DownloadLodash is released under the MIT license & supports modern environments. Review the build differences & pick one that’s right for you.InstallationIn

lodash.com

https://github.com/typicode/lowdb

GitHub - typicode/lowdb: Simple to use local JSON database (supports Node, Electron and the browser)

Simple to use local JSON database (supports Node, Electron and the browser) - GitHub - typicode/lowdb: Simple to use local JSON database (supports Node, Electron and the browser)

github.com

3.Webpack Plugin 설치과정 및 copy-webpack-plugin

깔끔한청년 — Sun, 19 Sep 2021 01:10:23 +0900

webpack plugin 설치과정 및 설명예제 입니다

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 키로 구성된객체로 설정할수가 있다

  module:{
    rules: [
      {
        test: /\.vue$/,
        use: 'vue-loader'
      },
      {
        test:/\.js$/,
        exclude:/node_modules/,
        use:'babel-loader'
      },
      {
        test:/\.css$/,
        use:[
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  },

https://webpack.js.org/concepts/loaders/#loader-features

Loaders | webpack

webpack is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser, yet it is also capable of transforming, bundling, or packaging just about any resource or asset.

webpack.js.org

module.rules 를 사용해 여러개의 로더 지정이 가능하다. 이것은 로더를 표시하는 간결한 방법이며, 코드를 깔끔하게 유지하는데 도움이 된다. 또한 각 로더에 대한 전체 개요를 제공한다.

로더는 오른쪽에서 왼쪽으로 평가, 실행된다고 한다.

4.npm run dev fails : ValidationError: Invalid options object 오류 가 발생했다 .

npm run dev fails : ValidationError: Invalid options object

https://stackoverflow.com/questions/61937054/npm-run-dev-fails-validationerror-invalid-options-object

npm run dev fails : ValidationError: Invalid options object

Currently learning Vue js and express js through some tutorials, I am still newbie regarding these technologies. Anyway following the tutorials I am building a small project in which I have a fol...

stackoverflow.com

즉, webpack 자체의 문제가 아닌 copy-webpack-plugin이 버전 6 이상부터는 Patterns를 한번더 감싸줘야 한다는 의미이다.

2.To do list 및 오류 ([오류해결] npm install 설치시 npm ERR! code ERESOLVE)

깔끔한청년 — Tue, 14 Sep 2021 22:55:41 +0900

모듈 설치 가 끝난후 Vue-cli 로 Vue -Todo-list 진행작업 을 하고있습니다.

오류에 원인은 package.json 버전 다운그레이드를 해줘야 한다. (최신버전에서는 호환이 불가한이유였다.)

webpack 관련 과 babel 버전을 다운그레이드를 해줘야한다..

그리고 항상 error 속에 답이 있다 ..ㅠㅠ 저같이 삽질하시지 맙시다.. ㅠㅠ

//개발용 의존패키지 입니다. 
npm i -D webpack@^4 webpack@^4

1.Vue (Wepack,Babel,Sass)

깔끔한청년 — Sun, 12 Sep 2021 20:04:53 +0900

의존성 과 개발용 의존성 모듈을 배웠습니다.

패키지의 배포 시 포함될 의존성 모듈을 지정합니다.

$ 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)를 실행할 수 있게 해주는 도구입니다.

webpack-cli 커맨드에서 실행할수 있는도구입니다.
$ npm i -D webpack webpack-cli
//개발용 으로 실시간 Reload 서버를 실행하기위해  wepack-dev-server 설치
$ npm i -D webpack webpack-cli
//wepack-merge 웹팩 Config 객체를 병합(merge)하기 설치 합니다.
$ npm i -D webpack-merge

여기서 주의할 점은 모르는 것들 꼭 Stack Over flow 참고하시면 좋습니다.

Babel

바벨은 Es6 이상의 코드를 Es5 이하 버전으로 변환하기 사용한다고 한다.

@babel/core: 바벨이 실제 동작하는 모듈입니다.
@babel/preset-env: 바벨의 지원 스펙을 지정합니다.
babel-loader: 웹팩(Webpack) 지원을 위해 사용합니다.

$ npm i -D @babel/core @babel/preset-env babel-loader

EsLint

'EsLint' 코드 품질과 코딩 스타일의 문제를 식별하기 위한 정적 코드 분석 도구입니다.

npm i -D eslint babel-eslint eslint-config-standard  eslint-plugin-import eslint-plugin-node eslint-plugin-promise eslint-plugin-standard eslint-plugin-vue
 // wepack-cli 설치 명령어 입니다.

render function 동작 Es6 문법 간소화

//h = hyperscriptd의 약어로 html 구조를 생성하는 스크립트의 의미 Virtual DoM 구현에서 관행적으로 사용
render: h=> h(App)

총 세 가지를 설치를 하였으며 자세한 내용 따로 빼놓았습니다. 그리고 지금은 현재 공부하는 과정이며,

혼자 공부하면서 몰랐던 부분을 저장과 기록을 채워놓을 예정입니다

현재 몰랐던 부분들 정리 요약본 입니다.

1.Wepack-Cli 사용도를 몰랐습니다 설치 과정을 하면서 알게 되었습니다.

2. 의존성과 개발용 의존성 차이점

3.Babel의 사용도 빈도를 알았습니다.

4.render function 동작 ES6 문법 간소화

5.Vue 문서화 찾는요령