backtic

예전에는 문자열붙이기를 +를 통해서 했다.

그런데 백틱을 이용하면 진짜 타자를 치는 거처럼 해준다. 코드창에서 띄어쓰기를 하면 출력에서도 띄어쓰기가 되고, 줄바꿈을 하면 출력창에도 줄바꿈이 일어난다.

사용법

let num = 10;
let num2 = 20;

console.log(`${num} 
가나다
${num2}`);

저 사선처럼 생긴 따옴표에 쓰고싶은 글을써주면 된다. 문자는 그냥 입력하면되고, 변수는 ${}안에 입력하면된다.

결과

줄바꿈 처리가 잘 일어난 것을 확인할 수 있다.

optional nullish

null

// 예제 1) 유저 속성을 출력하세요
let user = null; //나중에 속성을 넣어야지 하고 null을 넣어놓음
console.log(`user는 ${user.address}`);// 근데 까먹고 추가 안하고 속성을 출력함

null결과

이렇게 되면 엄청난 에러가 발생하게 되어 전 시스템이 다 마비가 될 수도 있다. 그래서 null사용은 되도록 피해야한다.

if로 null확인
만약에 null로 입력을 했는지 아닌지를 확인 하는 방법은 뭐가 있을까

// 예전에는 if로 사용했다
 if (user != null) {
    console.log(`user는 ${user.address}`);
 };

if결과

결과창에 아무일도 일어나지 않는다.

"?"로 null확인
그런데 if절로 하는 것은 너무 길어 효율성을 위해 새로생긴 기능이 있다.

// 너무 기니까 이렇게 바뀜
console.log(`user는 ${user?.address}`);

그냥 객체명 뒤에 ?표만 붙여주면된다.


결과

이렇게 바뀐 것을 볼 수 있다.

모듈화

다른 파일에서 사용한 함수나 변수들을 현재파일에서 또 만들어 사용하기에는 번거로우니 가져다 사용할 수가 있다.

자바에서는 public되어있는 친구들은 다 import로 쓸 수 있는데 여기선 export를 따로 해줘야한다.

export
자바에서는 export를 통해 다른 js에서 사용하도록 허락한다.

// 상수
const odd = "홀수입니다.";
const even = "짝수입니다.";

// 함수
const hello = () => console.log("안녕하세요");

export{odd, even, hello};

이렇게 하면 odd,even상수와 hello함수를 다른 js에서 사용할 수 있다.

이렇게 함으로 가독성을 챙길수 있고 중복된 코딩을 하지 않아도 된다는 장점이 있다.

참고로 하나의 요소만 내보낼때는 "export default 요소"만 해주면 된다.

import
그럼 가져와서 사용은 어떻게 할 수 있을까?

import{odd, even, hello} from "./var_es6.js";

hello();
let num = 10;
if (num % 2 == 0) {
    console.log(even);
}else{
    console.log(odd);    
}

import중괄호 안에 가져올 변수들과 함수들을 입력하고 "from 경로"를 해주면된다.

결과

해당 파일에서 만들지 않은 함수도 잘 실행되는 것을 볼 수 있다.

structure

구조분해할당 - 배열

배열 변수에서 arr[0]에 어떤 타입의 값이 들어가있는지 모를 수 있다.
숫자인지 문자인지 추측이 어려워서 변수에 배열 index값을 넣어서 가독성을 증가시킨다.

let arr = [1,2];
let firstNum = arr[0];
let sencondNum = arr[1];

console.log(arr[0], arr[1]);

그런데 이렇게 하는건 너무 귀찮고 길다. 이것을 해결하기위해 구조분해할당을 사용할 수 있다.

let [firstNum, secondnum] = [1,2];

console.log(firstNum, secondNum);

이렇게 let의 대괄호에 변수명을 넣어주고 = 뒤의 대괄호에 값을 넣어주면 바로 변수에 배열값을 담는 기능이 된다.

구조분해할당 - 객체

// 방법 1
let  {name, count} = {name : "캔디", count : 5};
console.log(name + candy)

//방법2
let candy = {
    name : "캔디",
    count : 5
}

let  {name, count} = candy
console.log(name + candy)

객체도 다음과 같은 방법으로 하면 된다. 그런데 배열과는 다르게 변수명과 속성명이 같아야한다는 차이가 있다.

방법 2는 객체를 지정해주고 그 다음 구조분해할당을 해주는 것이다. 대신 여기서는 속성과 속성값대신에 미리 정해준 객체의 이름만 적어주면 된다.

비동기 코딩 (중요)

이걸 사용하면 성능이 좋아진다. (속도가 빨라진다.)

작업을 내리고 결과를 보고 했던것이 동기코딩이다.

결과를 먼저 보내는 쪽을 화면에 먼저 띄우는 코딩이다.

잘 모르겠으니 일단 예제를 보자

단점

let goSchool = setTimeout(()=>{
    console.log("학교에 도착");
},1000);
//setTimeout(함수(), 지연시간)함수는 일정시간 지연해서 실행하는 함수이다. 
//지연시간후 함수가 실행됨


console.log("학교에 감");
goSchool;
console.log("학교에서 코딩함");

goSchool이 좀 늦게 불러와지게 일부러 1초 지연을 주었다.

결과

계획은 학교에 도착해서 코딩을 하기로 되어있는데 결과가 늦게 온다면 먼저 다른게 실행되고 결과가 도착하게 된다. 그래서 순서대로 코딩을 할 수 없다는것이 한계이다.

그럼 이걸 어떻게 해결할 수 있을까.

단점 해결방법

node를 설치하면 js비동기코딩이 가능하다. 순서에 맞게 코딩이 불가한데 이걸 해결하기 위해서 promise하는 객체가 있다. 이 객체안에 코딩을 하면 결과가 올때까지 다른 실행을 보류한다.

만들일은 별로 없다. 요즘 함수들은 다 이 기능을 가지고 있기 때문이다. 그래도 이것이 어떤 원리로 움직이는 지는 알아야하니 알아보자.

let goSchool = new Promise((resolve, reject) => {
    // 2초 지연 함수 : Promise 객체에 넣음
    setTimeout(function () {
      console.log("학교에 도착했습니다.");
      // resolve() : 결과 성공했다는 확인 함수
      resolve();
    }, 2000);
  });

promise함수를 먹이는 방법은 let 변수명 = new Promise(함수명())을 해주면 된다 코드에서는 화살표 함수로 함수명이 없다.

  let myFunc = async() => {
    // 비동기 코딩
    try{
        await goSchool;//여기 함수가 도착할(실행될)때까지 기다렸다가 밑의 코드가 실행되게 만들어준다.
        console.log("학교에서 코딩함");
    }catch(e){//에러가 발생하면 실행할 코드
        console.log(e);
    }
  };
  myFunc();

async함수가 promise가 있는 함수를 쓸것이라는 것을 커퓨터에게 인지하게 해주고 try함수 안에 await뒤에 promise함수, 즉 먼저 출력되야하는 함수를 적어주고 catch에 에러가 나면 어떤 것을 출력할지를 내보내게 한다.

모든 만들어져 있는 함수에는 promise기능이 있다. 그래서 그 함수의 비동기코딩을 할때에는 promise를 찍어줄 필요는 없는데, 새로운 함수를 우리가 많들때는 promise를 찍어줘야한다.

vue

spa

single page application으러 html 한 페이지에서 서비스를 만드는것이다. 이렇게 하면 본문에서 다른 본문을 띄울때 새로고침이 안 되도 되고 바로 움직이기때문에속도가 비약적으로 빨라진다.

vue는 기본적으로 spa프로그램이다.

첫 화면

처음뜨는 화면 home vue로 vue의 첫 페이지이다.

template에 html태그를 작성하는 부분이다.

그리고 밑의 script부분에 js코드를 입력하면된다.

한장의 html에 html과 js를 다 작성할 수 있고 이걸 html페이지라고 하지 않고 component라고 한다.

콧수염 태그

html태그에 콧수염 태그를 이용하여 화면에 거의 모든 자료형을 출력할 수 있다.

 <h1>안녕하세요</h1>
    <p>테스트 중입니다.</p>
    {{"문자열 출력 되나요"}}<!-- 문자열 -->
    <br>
    {{123456}}<!-- 숫자 -->
    <br>
    {{1*2+3-2}}<!-- 계산도 되네요 -->
    <br>
    {{"문자열" + " 붙이기도 되나여"}}<!-- 문자열 붙이기 됨 -->
    <br>
    {{["가", "나"]}}<!-- 배열 -->
    <br>
    {{true}}<!-- true/false도 된다. -->
    <br>
    {{(false? "true" : "false")}}<!-- 3항연산자도 가능 -->
    <br>
    {{new Date().getDate()}}<!-- 함수도 가능 -->

이렇게 사용하면 되는데 결과가 어떤지 한번 보자
결과

모두 잘 나온다. html에서 연산은 안되고 함수, 참 거짓도 적용되지 않지만 vue를 사용하면 이것이 가능해진다.

콧수염 태그로 안되는 것들

 {{ {name:"홍길동", email : "hong@naver.com"} }}<!-- 객체로 인식하지 않고 문자열로 인식 -->
    <br>
    {{ if(){} }}<!-- if문도 안된다. if문을 사용하고 싶다면 3항연산자를 사용하자.-->
    <br>
    {{for(let i=0; i > 2; i++{})}}<!-- for문도 안된다. -->

위 세개는 콧수염 태그가 인식을 하지못한다.

app vue

여기는 css를 작업하는 곳이 있다 script를 입력하면 js도 입력이 가능하다.

component로 머리말 꼬리말 만들기

시작은 component폴더에 파일을 만들고 템플릿을 만드는 것으로한다.
"vueinit을 해주면 자동으로 템플릿이 생성된다.

이렇게 만든 component는 기본적으로 모든 component에 넣을 수 있다.

넣는 법
component를 넣으려면 import를 사용해서 넣어주면 된다.

export에도 객체형태로 다음과 같이 넣어줘야한다.

이렇게 연결이 되면 태그로 footer와 header를 원하는 위치에 넣을 수 있다.

젤 위에 머리말 태크를, 젤 밑에 꼬리말 태그를 넣어 주었다.

잘 들어간 것을 확인할 수 있다. 지금은 글자지만 나중에 잘 디자인한 뒤 이것들을 여러 페이지에 태그 하나만 걸어서 복붙수준으로 쓸수 있어서 굉장히 편리하다.

느낀점

vue를 쓰니 굉장히 편리하다는 걸 느꼈다. 일단 컴포넌트를 html태그 하나만으로 사용을 할 수 있다는 것에 놀랐고, 한페이지에 다코딩을 하니 가독성도 좋았다. 이제 시작했기 때문에 아직 많이 배워야하지만 지금까지 배운거는 진짜 기초고 이걸로 어렵게 만들던 코드들을 쉽게 빠르게 만들 수 있겠다 생각했다.