const, let 리팩토링하고, 화살표 함수, Enhanced object literals, modules, export dafault

 

---

const, let 리팩토링하고, 화살표 함수, Enhanced object literals, modules, export dafault

2022/09/10

 

지난시간에 babel을 사용하여 변수를 const와 let으로 지정하는 방법을 공부했다.

그렇다면 지난 작업인 투두리스트의 변수들을 어떻게 const와 let으로 깔끔하게 작업가능할까?

 

1.const와 let을 리팩토링하기!

기존 작업했던 파일에서 var 변수 확인하기!

-App.vue파일에서 var를 찾아 let이나 const(오버라이딩이 안됨~)로 바꿔주기

methods:{
      addOneItem:function(todoItem){
        var obj = {completed: false, item: todoItem};
        localStorage.setItem(todoItem,JSON.stringify(obj));
        this.todoItems.push(obj);
      },

 

위의 코드에서 var obj를 const obj로 적어주면 된다!

 

-App.vue 파일에서 var를 찾아 let으로 바꿔주기

created: function(){
    if(localStorage.length > 0){
        for(var i =0; i <localStorage.length; i++){
          if (localStorage.key(i) !== 'loglevel:webpack-dev-server') {
          this.todoItems.push(JSON.parse(localStorage.getItem(localStorage.key(i))));
          }
        }
    }
  },

 

에서 for문에서 var = i 가 사용된걸 let i로 변경해주면 된다!

 

2. arrow function 화살표 함수

function 단어를 사용하지 않고 =>을 사용 (8글자가 아닌 2글자로! byte가 적어지는 효율을 높이자!)

-case1.Es5와 ES6는 어떻게 다를지?

**다른곳에서 아는 방식과 다른 표현식이 보여서 궁금했는데... ES6였구나...궁금증 매우해결!**

============ES5방식============
var add = function (a,b){
		return a * b;
	}
    
 ============ES6방식============
 var add = (a,b) => {
 		return a * b;
 	}
    
    
    
===> 결과 값은 동일하다!

 

-case2.Es5와 ES6는 어떻게 다를지?

array를 사용하여, 변수의 각 값을 나열하기

============ES5방식============
var arr = ["apple", "banana", "orange"];
	arr.forEach(function(value){
		console.log(value);
});

===> apple, banana, orange가 각각 출력된다
    
 ============ES6방식============
 var arr = ["apple", "banana", "orange"];
 arr.forEach(value => console.log(value));


===> apple, banana, orange가 각각 출력된다
    
    
===> 결과 값은 동일하다!

 

 

-bable에서 확인해보기

 

 

3.향상된 객체 리터럴 enhanced object literals

-객체의 속성을 메소드로 쓴다면! :와 function을 생략할 수 있음!

var priceSearch = {
	origin: 39900,
====== ES5 =====
	lookup: function(){
    	console.log ("show origin")
    }
===> lookup이라는 객체를 function을 사용하여 메소드를 만들때,
function을 써야함  ES6에서는 function을 생략할 수 있음!

====== ES6 =====
	lookup: () {
    	console.log ("show origin")
    }
===> function 생략가능!

};



priceSearch.lookup();

===> show origin이 나옴

 

-만든 todolist에 향샹된 객체 리터럴 사용하기

App.vue 파일에서 메소드의 메소드명:fucntion(){};에서 :function을 전부 제거해도 OK

 

methods:{
      addOneItem:function(todoItem){
        const obj = {completed: false, item: todoItem};
        localStorage.setItem(todoItem,JSON.stringify(obj));
        this.todoItems.push(obj);
      },
      
      
===> 여기의 :function을 제외해도 가능

 

-script상의 모든 :function을 제거한다.

-다른 vue파일도 동일하게 제거한다!

export default {
    data(){
      return{
        todoItems:[]
      }
    },

 

 

4.속성명 축약과 리팩토링

-콤포넌트 한 단어로 축약 가능! 모달의 객체이름과 콤포넌트의 이름이 동일하여 가능!

  components:{
    'TodoHeader' : TodoHeader,
    'TodoInput' : TodoInput,
    'TodoList' : TodoList,
    'TodoFooter' : TodoFooter,
    
  }

 

중복되는  'TodoHeader' 등을 삭제가능

  components:{
    TodoHeader,
    TodoInput,
    TodoList,
    TodoFooter,

 

=> 속성명을 짧게 축약해도 동일하게 구동이 됨!

=>다른 vue파일에서도 콤포넌트 동일한 이름 합치기 가능!

 

5.modules - 자바스크립트를 모듈화하기!

-모듈: 한 단위, 필요한 기능을 모듈화하여서 필요한 곳에 반복하여 쓰도록

-ES5까지는 모듈화가 없어서 자바스크립트 모듈로더 라이브러리가 필요했음! 예를들면 AMD나 Commons JS와 같은

=>모듈 라이브러리가 없으니, 호출하지 않으면 동작 X

 

-import로 각 파일의 모듈을 가져오고,

import TodoHeader from './components/TodoHeader.vue'
import TodoInput from './components/TodoInput.vue'
import TodoList from './components/TodoList.vue'
import TodoFooter from './components/TodoFooter.vue'

 

-그 모듈을 콤포넌트로 사용! (해당 콤포넌트는 위에서 축약된 콤포넌트)

  
  components:{
    TodoHeader,
    TodoInput,
    TodoList,
    TodoFooter,
    
  }

 

6.export default 에서 default란? 한가지만 가져올수 있음!

-확실하게 원하는 기능만 export하기 위해서 default 사용

 

export default {
    data(){
      return{
        todoItems:[]
      }
    },