[BlockCar][ES6] 세련된 자바스크립트 ES6 사용하기

• Q. ES6의 브라우저 호환성은 어떻게 해결했나요?
• Q. ES6문법 중에 어떤 것을 어떻게 사용했는지 보여주실 수 있나요?
  • 1. 변수 선언 방식
  • 2. 기본 매개 변수 ( Default Parameters)
  • 3. 템플릿 리터럴 (Template Literals)
  • 4. 비구조화 할당 (Destructuring Assignment)
  • 5. 향상된 객체 리터럴 (enhanced object literals)
  • 6. 전개 연산자 (spread operator)
  • 7. 모듈 (module)
    • Default Export
    • Named Export
  • 8. 화살표 함수 (Arrow Function)
• Q. ES6를 실제 프로젝트에 적용해보며 느낀 점은 무엇인가요?

Q. ES6의 브라우저 호환성은 어떻게 해결했나요?

• ES6는 세련된 자바스크립트이기 때문에 모든 브라우저에서 호환되지가 않습니다. 그래서 세련된 ES6문법을 모든 브라우저에서 사용할 수 있도록 도와주는 Babel을 사용해서 webpack 설정을 했습니다.

Q. ES6문법 중에 어떤 것을 어떻게 사용했는지 보여주실 수 있나요?

1. 변수 선언 방식

기존에 자바스크립트에서 변수는 var로 선언을 했습니다. 하지만 ES6문법에서는 let, const를 통해서 변수 선언을 합니다.

• const

  const는 constants 말 그대로 상수를 나타냅니다. 변하지 않는 값을 담을 수 있고, 그 값을 변경하려하면 에러를 발생시킵니다.

• let

  let은 blockScope로써 ({})내에서 사용되고 사라집니다.

  for (let i = 0; i <= 10; i++) {
      if (i < 7) {
        secretPhone = secretPhone + carOwnerInfo.ownerPhoneNumber[i];
      } else {
        secretPhone = secretPhone + "*";
      }
    }
  

  위 코드는 차량 정보에 기록된 핸드폰 번호의 뒷자리를 비공개하기 위해서 만든 함수의 일부입니다. for()안에 i가 let으로 선언이 되어있는데 이렇게 작성하게 될 경우 for문이 끝나게 되면 let으로 선언한 i는 사라지게 됩니다. 그래서 변수명에 대해 중첩이 발생하지 않습니다.

  let은 const와 다르게 데이터의 값을 변경할 수 있습니다.

2. 기본 매개 변수 ( Default Parameters)

자바스크립트 코드를 작성하다보면 함수에 매개 변수를 받게 되면 값이 들어오지 않을 경우 데이터를 default값으로 설정하는 동작을 많이 작성하게 됩니다. 프로젝트 내에 사용된 하트 아이콘에 기본 사이즈와 색을 넣는 코드를 통해 설명드리겠습니다.

• ES6를 사용하지 않을 경우

  아래 코드처럼 size와 fill이 null이거나 undefined일 경우 값을 넣어주면 원하는대로 동작을 하게됩니다. 하지만 굉장히 불필요한 if문 2개가 존재하게 됩니다. Default Parameters를 사용하면 이 점을 해결할 수 있습니다.

  export const EmptyHeart = ({ size, fill }) => {
    	if(size === null || fill === undefined ){
  		size = 24;
      }
      if(fill === null || fill === undefined){
          fill="#000";
      }	
      return (
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width={size}
        height={size}
        viewBox="0 0 24 24"
        fill={fill}
      >
        <path d="" />
      </svg>
    );
  };
  

• ES6를 사용한 경우

  매개변수를 받는 곳에 =을 통해서 값을 미리 넣어놓게 되면 값이 들어오지 않으면 =뒤에 적은 값으로 셋팅이 되고, 값이 들어온다면 default값은 무시가 됩니다.

  import React from "react";
    
  export const EmptyHeart = ({ size = 24, fill = "#000" }) => (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill={fill}
    >
      <path d="" />
    </svg>
  );
    
  

3. 템플릿 리터럴 (Template Literals)

아래 코드는 차량 이미지를 보여주는 styled-components입니다.

• ES6를 사용하지 않은 경우

  아래 코드처럼 "" +variables + "" 의 형태로 문자열을 처리해야합니다.

  const CarImage = styled.div<{ url: string }>`
    background-image: ${props => "url(" + props.url + ")"};
  `;
  

• ES6를 사용할 경우

  ``를 사용하면 + 를 사용하지 않고도 문자열을 처리할 수 있습니다.

  const CarImage = styled.div<{ url: string }>`
    background-image: ${props => `url(${props.url})`};
  `;
  

4. 비구조화 할당 (Destructuring Assignment)

객체에서 원하는 value만 사용할 때 사용했습니다.

• 비구조화 할당을 하지 않은 경우

  const state = useSelector((state: rootState) => state.AuthReducer);
  const isSignInPopUpShow = state.isSignInPopUpShow;
  const isSignUpPopUpShow = state.isSignUpPopUpShow;
  const loggedInUser = state.loggedInUser;
  

• 비구조화 할당을 한 경우

  비구조화 할당으로 AuthReducer의 isSignInPopUpShow, isSignUpPopUpShow, loggedInUser를 비구조화 할당한 것입니다.

 const { isSignInPopUpShow, isSignUpPopUpShow, loggedInUser } = useSelector(
    (state: rootState) => state.AuthReducer
  );

5. 향상된 객체 리터럴 (enhanced object literals)

객체를 만들 때 일일히 key값과 value를 지정해주는 번거로움을 덜어줄 수 있는 문법입니다.

• 향상된 객체 리터럴을 사용하지 않을 경우

  const carNumber =  carNumberInput.value;
  const carData = getCarData();
   const Car = {
      carNumber: carNumber
      carData: carData
    };
  

• 향상된 객체 리터럴을 사용할 경우

  const carNumber =  carNumberInput.value;
  const carData = getCarData();
   const Car = {
      carNumber
      carData
    };
  

6. 전개 연산자 (spread operator)

전개 연산자는 ...를 사용해서 배열 혹은 객체를 펼치는 기능을 해줍니다.

• ES5에서 배열을 합쳐야할 경우

  concat을 사용해서 배열을 합쳤었습니다.

  var a = [1,2,3];
  var b = [4,5];
  var c = 6;
    
  var d = a.concat(b,c);
    
  console.log(d);
  // [1,2,3,4,5,6]
  

• ES6의 전개연산자를 사용할 경우

  확실히 직관적이며 간결하게 배열을 합치는 코드를 작성할 수 있습니다.

  const a = [1,2,3];
  const b = [4,5];
  const c = 6;
    
  const d = [...a, ...b, c];
    
  console.log(d);
  // [1,2,3,4,5,6]
  

7. 모듈 (module)

• ES6의 export, import를 사용해서 모듈화를 적용했습니다.

Default Export

• Container , Presenter디자인 패턴에 사용한 코드로 예시를 들겠습니다.

• MainPresenter.tsx

  Presenter는 Container에서 사용해야하기 때문에 모듈을 다른곳에서 사용할 수 있도록 내보내야합니다. export default 를 통해서 export default는 모듈마다 한번만 할 수 있는 export 입니다. “한번만 할 수 있다?” 이 부분에 대해서 밑에 추가적으로 설명하도록 하겠습니다.

  import React from "react";
      
    const MainPresenter =  () => "MainPresenter";
      
  export default MainPresenter;
      
  

• MainContainer.tsx

  Container는 Presenter를 사용함과 동시에 index.tsx에서 사용할 수 있도록 모듈을 내보내야합니다.

  • MainPresenter를 사용하기 위해서는 import
  • 자기 자신(MainContainer)을 내보내기 위해서는 export를 사용해야합니다.

  import React from "react";
  import MainPresenter from './MainPresenter';
      
    const MainContainer =  () => {
    return <MainPresenter/>
    }
      
  export default MainContainer;
      
  

• index.tsx

  index파일에서는 MainPresenter.tsx를 return 해주는 MainContainer.tsx를 import해서 사용해줍니다.

  import React from "react";
  import MainContainer  from './MainContainer';
      
  export default MainContainer;
  

Named Export

• 제가 이해한 Named Export는 특정 파일에서 만든 변수, 함수등 다양한 것을 사용할 수 있도록 모듈화 해주는 것입니다.

• 아래 코드는 로딩화면에 보여질 스피너 아이콘을 작성한 코드입니다.

  export const Spinner = ({ size = 24, fill = "#000" }) => (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={size}
      height={size}
      viewBox="0 0 24 24"
      fill={fill}
    >
      <path d="생략" />
    </svg>
  );
    
  

• src/Components/Commons/Loader.tsx

• 로딩화면을 만들기 위해서 아래처럼 icon을 import 해야하는데, export default 와는 다르게import { Spinner } from "../Icons/Commons"; {}로 사용을 합니다.

  import React from "react";
  import styled, { keyframes } from "styled-components";
  import { Spinner } from "../Icons/Commons";
    
  const Wrapper = styled.div`
    width: 100%;
    min-height: 60vh;
    display: flex;
    justify-content: center;
    align-items: center;
  `;
    
  const rotate = keyframes`
    from {
      transform : rotate(0deg);
    }to {
      transform : rotate(360deg);
    }
  `;
    
  const SpinnerContainer = styled.div`
    animation: ${rotate} 2s infinite;
  `;
  const Loader = () => {
    return (
      <Wrapper>
        <SpinnerContainer>
          <Spinner></Spinner>
        </SpinnerContainer>
      </Wrapper>
    );
  };
    
  export default Loader;
    
  

8. 화살표 함수 (Arrow Function)

ES6에서는 더이상 function이라는 단어를 사용하지 않아도 됩니다. =>화살표처럼 생긴 이 친구가 코드를 간결하게 작성할 수 있도록 도와주기 때문입니다.

• Arrow Function을 사용하지 않은경우

  const add = function(a:number,b:number){
  	return a + b;
  } 
  

• Arrow Function을 사용한 경우

  const add = (a:number, b:number) => a + b;
  

코드가 확실히 간결해지는 것을 확인할 수 있습니다.

Q. ES6를 실제 프로젝트에 적용해보며 느낀 점은 무엇인가요?

• Arrow Fuction으로 코드 길이가 확실히 짧아진 것 같습니다.
• 평소에 모듈화 하는 것을 좋아하는데 export import를 통해서 손쉽게 모듈화를 작성할 수 있었습니다.
• ES6를 사용하게 되면 아직 모든 브라우저가 호환이 되는 것이 아니기 때문에 Babel설정을 추가하는 것이 귀찮을 수도 있지만, 확실히 귀찮음을 감수할 수 있을 정도의 직관성, 간결성, 편리성을 갖추고 있다고 생각합니다.
• 하루빨리 모든 브라우저에서 ES6가 호환이 되고 더 좋은 자바스크립트 문법이 나와서 자바스크립트가 더욱 강력해지면 좋겠다는 생각을 프론트엔드 개발자로서 해봅니다….