HaeRim's Dev Blog

ref-Dom

Fri, 03 Sep 2021 00:00:00 +0000

일반 HTML에서 id를 이용하여 DOM에 이름을 다는 것처럼 (<div id="imId"></div>) 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. 바로 ref 이다.

→ 물론 리액트 컴포넌트 안에서도 id 값을 사용할 수 있지만, 권장하지는 않는다.

id는 유일해야 하는데 컴포넌트를 재사용하다보면 여러개의 id가 생기는 일이 발생한다.

🕵️‍♀️ ref(reference)의 모든것…

ref는 어떤 상황에 사용하는가?

DOM을 직접적으로 건드려야 할 때 사용한다.

state 로 해결이 가능한 부분도 있지만, 가끔 state 로만으로는 해결할 수 없는 기능도 잇다. 어떨때일까?

다음과 같을 때 사용한다.

특정 input에 focus 주기
스크롤 박스 조작
Canvas 요소에 그림 그리기 등

그런데, state 만으로도 해결이 가능한 부분이 있다고 했다. 밑에 예제 코드가 바로 그런 예이다.

해당 예제 코드는 [class 형 컴포넌트] 로 작성되었다.

click시 input 창 결과 값 다르게 해주기

import React, { Component } from 'react';
import './ValidationSample.css';

class ValidationSample extends Component {

  state = {
    password: '',
    clicked: false,
    validated: false
  }

  handleChange = (e) => { // input에 값 입력시 password 값 업데이트
    this.setState({
      password: e.target.value
    });
  }

  handleButtonClick = () => { // 버튼 클릭시
    this.setState({
      clicked: true, // cliked는 참이 되고
      validated: this.state.password === '0000' // validated 값을 검증 결과로 설정
    })
  }

  render() {
    return (
      <div>
        <input
          type="password"
          value={this.state.password}
          onChange={this.handleChange}
					{/* 검증 결과에 따라 sucess 혹은 failure 값 설정 */}
          className={this.state.clicked ? (this.state.validated ? 'success' : 'failure') : ''}
        />
        <button onClick={this.handleButtonClick}>검증하기</button>
      </div>
    );
  }
}

export default ValidationSample;

.success {
  background-color: lightgreen;
}
.failure {
  background-color: lightcoral;
}

state 를 이용한 제어를 해보았으니 이제 ref 를 이용하여 제어를 해보자.

ref 사용

ref를 사용하는 방법은 두 가지 이다.

1. 콜백 함수를 통한 ref 설정

ref를 만드는 가장 기존벅은 방법은 콜백 함수 를 사용하는 것이다. ref를 달고자 하는 요소에 ref라는 콜백 함수를 props로 전달해주면 된다. 이 콜백 함수는 ref의 값을 파라미터 로 전달받는다. 그리고 함수 내부에서 파라미터로 받은 ref를 컴포넌트의 멤버 변수로 설정해 준다.

<input
  ref={(ref) => {
    this.input = ref;
  }}
/>

다음과 같이 사용하면 된다.

this.input 은 input 요소의 DOM 을 가리킨다. ref의 이름은 자유롭게 지어주면 된다.

this.input 이 아닌 this.pizza 로 해주어도 된다.

2. createRef를 통한 ref 설정

이 방법은 리액트에 내장되어 있는 createRef 라는 함수를 사용하는 것이다.

이를 사용하면 더 적은 코드로 쉽게 사용이 가능하다.

import React, { Component } from 'react';

class RefSample extends Component {
  // 변수로 React.createRef() 담아주기
  input = React.createRef();

  handleFocus = () => {
    this.input.current.focus();
  };

  render() {
    return (
      <div>
        {/* 해당 변수를 ref를 달고자하는 요소에 ref props로 넣어줌 */}
        <input ref={this.input} />
      </div>
    );
  }
}

export default RefSample;

이렇게 설정한 뒤, 나중에 ref를 설정해준 DOM에 접근하려면 this.input.current를 조회하면 된다.

콜백함수와 다른 점, 눈치챘지? 저렇게 뒷부분에 .current 를 넣어 주어야 한다는 점이다.

Component에 ref 달기

리액트에서는 컴포넌트에서도 ref를 달 수 있다. 이 방법은 주로 컴포넌트 내부에 있는 DOM 을 컴포넌트 외부에서 사용할 때 사용한다. 컴포넌트에서 ref를 다는 방법과 DOM에서 ref를 다는 방법은 동일하다.

사용법

<MyComponent ref={(ref) => {this.myComponent=ref} />

이렇게하면 MyComponent 내부의 메서드 및 멤버 변수에도 접근할 수 있다.

즉, 내부의 ref에도 접근이 가능하다. (ex. myComponent.handleClick, myComponent.input 등..)

예제를 사용하며 더 알아보자.

스크롤 박스가 있는 컴포넌트를 하나 만들고

스크롤바를 아래(최하단)로 내리는 작업을 부모 컴포넌트에서 실행해보자.

import React, { Component } from 'react';

class ScrollBox extends Component {
  render() {
    const style = {
      border: '1px solid black',
      height: '300px',
      width: '300px',
      overflow: 'auto',
      position: 'relative',
    };

    const innerStyle = {
      width: '100%',
      height: '650px',
      background: 'linear-gradient(white, black)',
    };

    return (
      <div
        style={style}
        ref={(ref) => {
          this.box = ref;
        }}
      >
        <div style={innerStyle} />
      </div>
    );
  }
}

export default ScrollBox;

우선, 스크롤 박스 컴포넌트를 만들어주었다.

이제 잘 나오는지 확인해보자.

import React, { Component } from 'react';

import ScrollBox from './ScrollBox';

class App extends Component {
  render() {
    return (
      <>
        <ScrollBox />
      </>
    );
  }
}

export default App;

그럼 스크롤 박스가 잘 나올 것이다.

import React, { Component } from 'react';

class ScrollBox extends Component {
  // 스크롤바 아래쪽으로 내리는 메서드
  scrollToBottom = () => {
    // scrollHeight : 스크롤이 있는 박스 안의 div 높이 (650)
    // clientHeight : 스크롤이 있는 박스의 높이 (300)
    const { scrollHeight, clientHeight } = this.box;
    this.box.scrollTop = scrollHeight - clientHeight;
    // scrollTop : 세로 스크롤 바 위치 (0~350)
  };

  render() {
    // 생략....
  }
}

export default ScrollBox;

이 메서드는 부모 컴퍼넌트인 App 컴퍼넌트에서 ref를 이용하여 사용할 수 있다.

import React, { Component } from 'react';

import ScrollBox from './ScrollBox';

class App extends Component {
  render() {
    return (
      <>
        <ScrollBox ref={(ref) => (this.ScrollBox = ref)} />

        {/* 화살표 함수를 이용해 내부에서 메서드 실행 */}
        <button onClick={() => this.ScrollBox.scrollToBottom()}>
          맨 밑으로
        </button>
      </>
    );
  }
}

export default App;

버튼을 누르면 ScrollBox 컴퍼넌트의 ref를 타고 이 컴퍼넌트 안에 생성해준 scrollToBottom 을 실행하게끔 했다.

여기서 주의할 점은, 컴포넌트가 처음 렌더링 될때는 this.scrollBox 의 값이 undefined 라는 점이다.

그래서 문법상으로는 onClick={ this.scrollBox.scrollBottom } 형식으로 써도 틀리지는 않지만, 이 과정에서 값을 읽어올때 undefined 이기 때문에 오류가 발생한다.

그래서 화살표 함수 문법으로 새로운 함수를 만들고, 그 내부에서 this.scrollToBottom 메서드를 실행하면 이미 한 번 렌더링을 해서 this.scrollBox를 설정했기 때문에, 버튼을 누를때 this.ScrollBox.scrollToBottom 의 값을 읽어올 수 있는 것이다.

버튼을 누르면 정상적으로 최하단으로 이동이 가능할 것이다.

정리 📝

우선, ref는 컴포넌트 내부에서 DOM에 직접 접근해야 할 때에 사용한다.

사용하기 전에 ref를 사용하지 않고 기능 구현이 가능한지 고려하고 활용하는 것이 좋다.

여기서 조심할 점은 서로 다른 컴포넌트 끼리 교류를 할 때 ref를 사용하지 말아야하는 점이다.

물론, 구현은 가능하다. 그렇지만 컴포넌트1에 ref를 달고 그 ref를 다른 컴포넌트2로 이동시키고, 컴포넌트 1에서 전달받은 컴포넌트 메서드를 실행하게 된다면 이는 어긋난 리액트 설계이다.

위처럼 코딩을하면 앱 규모가 커질수록 스파게티 코드가 될 가능성이 높아진다. 컴포넌트 끼리 데이터 교류는 무조건 부모 ↔ 자식 흐름으로 교류하는 것이 맞다.

이는 나중에 리덕스 혹은 context API 를 이용해 효육적인 교류가 가능해진다 🙂

함수형 컴포넌트에선 useRef 라는 Hook 을 이용한다.

State2

Mon, 30 Aug 2021 00:00:00 +0000

state의 값을 바꾸어야할 때는 setState 혹은 useState 를 통해 전달받은 새터함수 를 사용

🤔 배열이나 객체를 업데이트 하는 경우는??

이 경우는 배열이나 객체의 사본 을 만들고, 사본 을 업데이트 한 후, 그 사본의 상태를 setState 혹은 새터함수 를 통해 업데이트한다.

// 객체 다루기
const object = { a: 1, b: 2, c: 3 };
const nextObject = { ...object, b: 2 };

// 배열 다루기
const array = [
  { id: 1, value: true },
  { id: 2, value: true },
  { id: 3, value: false },
];
let nextArray = array.concat({ id: 4 }); // 항목 추가
nextArray.filter((item) => item.id !== 2); // 아이디가 2인 항목 제거
nextArray.map((item) => (item.id === 1 ? { ...item, value: false } : item));

객체에 대한 사본 을 만들 때에는 spread 연산자 라고 불리는 ... 을 사용하여 처리한다.

배열에 대한 사본 을 만들 때에는 배열의 내장함수 를 활용한다.

(배열의 내장 함수 : forEach, map , filter, reduce, splice, slice, shift, pop, unshift, push, indexOf, findIndex, find, join )

정리 📝

props 와 state 는 둘 다 컴포넌트에서 사용하거나 렌더링할 데이터를 담고 있어서 비슷해 보일 수 있지만, 역할이 다르다.

props : 부모 컴퍼넌트가 설정.

state : 컴퍼넌트 자체적으로 지닌 값.

props는 자식 컴퍼넌트 내부에서 값을 스스로 업데이트 하지 못하지만, state는 내부에서 값을 업데이트 할 수 있다.

props 를 사용한다고 해서 값이 무조건 고정적이지는 않다.

부모 컴퍼넌트의 state 를 자식 컴포넌트의 props 로 전달하고, 자식 컴포넌트에서 특정 이벤트가 발생할 때, 부모 컴퍼넌트의 메서드를 호출하면 prop 도 유동적으로 사용이 가능하다.

이벤트 핸들링

Sat, 28 Aug 2021 00:00:00 +0000

Event?

사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것.

이벤트를 사용할 때 주의사항 🚨🚨🚨

이벤트 이름은 카멜(Camel) 표기법으로 작성한다.

ex) onClick, onChange

함수형태의 값을 전달한다.

리액트에선 이벤트를 설정할 때, 함수 형태의 객체를 전달한다. 화살표 함수로 바로 전달해도 되고, render() 외부에서 함수를 작성하여 불러와 전달해주어도 된다.

DOM 요소에만 이벤트를 설정할 수 있다.

컴퍼넌트에는 이벤트를 자체적으로 설정할 수 없다.
```
<MyComponent onClick={doSomething} />
```
이렇게 컴퍼넌트에 onClick 이벤트를 보내주어도 MyComponent 를 클릭할 때마다

dosomtiong 함수를 실행시키는 것이 아니라, 이름이 onClick인 props를 MyComponent에 전달을 해줄 뿐이다…

전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정할 수는 있다.
```
<div onClick={this.props.onClick}></div>
```

# 예제로 알아보자

위의 class 형 컴포넌트에서 작업했던 내용을 함수형 컴포넌트로 똑같이 구현이 가능하다.

e.target.name을 활용하지 않은 경우

import React, { useState } from 'react';

const EventPratice2 = () => {
  // state 설정
  const [username, setUsername] = useState('');
  const [message, setMessage] = useState('');

  // onChange 이벤트 설정
  const onChageUsrname = (e) => setUsername(e.target.value);
  const onChangeMessage = (e) => setMessage(e.target.value);

  const onClick = () => {
    alert(username + ':' + message);
    setUsername('');
    setMessage('');
  };

  const onKeyPress = (e) => {
    if (e.key === 'Enter') {
      onClick();
    }
  };

  return (
    <div>
      <h1>이벤트 핸들러 연습</h1>
      <input
        type='text'
        name='username'
        placeholder='사용자 명'
        value={username}
        onChange={onChageUsrname}
      />

      <input
        type='text'
        name='message'
        placeholder='할 말이 있나요?'
        value={message}
        onChange={onChangeMessage}
        onKeyPress={onKeyPress}
      />
      <button onClick={onClick}>메세지를 보내세요</button>
    </div>
  );
};

export default EventPratice2;

다음과 같이 onChange 관련 함수를 두개 만들어서 사용했다.

위와 같은 코드도 나쁘진 않지만, input의 갯수가 많아지면 가독성이 떨어지고 관리도 힘들다.

그럴 땐 e.target.name 을 활용하는게 훨 낫다.

e.target.name을 활용한 경우. && useState 객체로 변경한 경우

import React, { useState } from 'react';

const EventPratice2 = () => {
  // state 설정
  const [form, setForm] = useState({
    username: '',
    messgae: '',
  });

  const { username, message } = form;

  const onChange = (e) => {
    const nextForm = {
      ...form, // 기존의 form 내용을 이 자리에 복사한다.
      [e.target.name]: e.target.value, // 원하는 값을 덮어 씌운다.
    };
    setForm(nextForm);
  };

  const onClick = () => {
    alert(username + ':' + message);
    setForm({
      username: '',
      messgae: '',
    });
  };

  const onKeyPress = (e) => {
    if (e.key === 'Enter') {
      onClick();
    }
  };

  return (
    <div>
      <h1>이벤트 핸들러 연습</h1>
      <input
        type='text'
        name='username'
        placeholder='사용자 명'
        value={username}
        onChange={onChange}
      />

      <input
        type='text'
        name='message'
        placeholder='할 말이 있나요?'
        value={message}
        onChange={onChange}
        onKeyPress={onKeyPress}
      />
      <button onClick={onClick}>메세지를 보내세요</button>
    </div>
  );
};

export default EventPratice2;

정리

리액트에서 이벤트를 다루는 것은 제이쿼리나 순수 자바스크립트를 사용한 웹 애플리케이션에서 이벤트를 다루는 것과 유사하다. 리액트의 장점은 자바스크립트에 익숙하다면 쉽게 활용이 가능하다는 것이다.

그리고 클래스형 컴포넌트로 할 수 있는 대부분의 작업은 함수형 컴포넌트에서도 작업이 가능하다.

해당 예제에선 함수형 컴퍼넌트에선 useState 객체를 사용하는 방법을 이용하였는데,

이는 useReducer와 커스텀 Hooks 와 함께 사용하면 훨씬 편하게 할 수 있다.

State

Sat, 28 Aug 2021 00:00:00 +0000

State 란?

component 내부에서 변경할 수 있는 값 을 의미한다. 부모 컴포넌트는 자식 컴포넌트에게 props 를 전달해 주지만, 자식 컴포넌트는 부모에게 받은 props 를 읽기 전용 으로 밖에 사용하지 못한다. 즉, 수정을 하지 못한다는 뜻이다.

props 를 변경해주려면 부모 컴포넌트에서 변경을 해주어야 하는데, 그러면 너무 번거로우니 state 를 통해 직접 변경을 하는 것이다. 내부에서 선언하여 값을 변경할 수 있다.

state 는 두 가지 종류가 있다. 하나는 클래스형 컴포넌트 state 나머지 하나는 함수형 컴포넌트 state 이다.

클래스형 컴포넌트 State

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0,
    };
  }

  render() {
    const { number } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <button
          onClick={() => {
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

export default Counter;

1. constructor 메서드

constructor(props){
	super(props);
}

생성자 메서드이다. 클래스형 컴포넌트에선 반드시 먼저 super(props) 를 호출해주어야 한다. 이 함수가 호출되어야 현재 클래스형 컴포넌트가 상속받고 있는 react의 Component 클래스 가 지닌 생성자 함수를 호출해준다. (리액트 안 내장 함수)

super() 메소드를 호출해주어서 부모클래스에 props 를 전달해주어야 하기 때문이다.

2. State 초기값 설정

this.state = {
  number: 0,
};

this.state 값에 초기값을 생성해준다. state는 객체형 이여야 한다.

3. render 함수 코드

render(){
	const { number } = this.state;
	return(
		<div>
			<h1>{number}</h1>
			<button onClick={()=>{
          this.setState({ number: number + 1 })
        }}>+1</button>
		</div>
	)
}

3-1. state를 조회할때는 this.state로 조회한다.

3-2. setState :

state에 있는 값을 변경하기 위해선 this.setState 를 무조건 거쳐야한다. 이 함수가 호출되면 컴포넌트는 리렌더링 된다. setState 는 객체로 전달되는 값만 업데이트 해준다.

3-3. 리액트 이벤트 시스템 (onClick Event) 는 버튼이 클릭 될 때 호출할 함수를 설정해준다.

State 객체 사본 (state 사용시 주의사항)

state의 값을 바꾸어야할 때는 setState 혹은 useState 를 통해 전달받은 새터함수 를 사용

🤔 배열이나 객체를 업데이트 하는 경우는??

이 경우는 배열이나 객체의 사본 을 만들고, 사본 을 업데이트 한 후, 그 사본의 상태를 setState 혹은 새터함수 를 통해 업데이트한다.

// 객체 다루기
const object = { a: 1, b: 2, c: 3 };
const nextObject = { ...object, b: 2 };

// 배열 다루기
const array = [
  { id: 1, value: true },
  { id: 2, value: true },
  { id: 3, value: false },
];
let nextArray = array.concat({ id: 4 }); // 항목 추가
nextArray.filter((item) => item.id !== 2); // 아이디가 2인 항목 제거
nextArray.map((item) => (item.id === 1 ? { ...item, value: false } : item));

객체에 대한 사본 을 만들 때에는 spread 연산자 라고 불리는 ... 을 사용하여 처리한다.

배열에 대한 사본 을 만들 때에는 배열의 내장함수 를 활용한다.

(배열의 내장 함수 : forEach, map , filter, reduce, splice, slice, shift, pop, unshift, push, indexOf, findIndex, find, join )

정리 📝

props 와 state 는 둘 다 컴포넌트에서 사용하거나 렌더링할 데이터를 담고 있어서 비슷해 보일 수 있지만, 역할이 다르다.

props : 부모 컴퍼넌트가 설정.

state : 컴퍼넌트 자체적으로 지닌 값.

props는 자식 컴퍼넌트 내부에서 값을 스스로 업데이트 하지 못하지만, state는 내부에서 값을 업데이트 할 수 있다.

props 를 사용한다고 해서 값이 무조건 고정적이지는 않다.

built in Function 4 Object

Tue, 16 Feb 2021 00:00:00 +0000

Function 오브젝트

Function 오브젝트 프로퍼티 리스트

이름	개요
Function
new Function()	인스턴스 생성
Function()	인스턴스 생성
Function 프로퍼티
lenght	함수의 파라미터 수
Function.prototype
constructor	생성자
call()	함수 호출
apply()	함수 호출 : 배열을 파라미터로 사용
toString()	함수를 문자열로 반환
bind()	새로운 오브젝트를 생성하고 함수 실행

new Function()

구분	데이터(값)
파라미터	실행 가능한 JS 코드 opt
파라미터	파라미터 opt
반환	생성한 Function 인스턴스

Function 인스턴스 생성
파라미터에 문자열로 함수의 파라미터와 함수 코드 작성
var obj = new Function(“book”, “return book;”);
obj(“JS 책”);
obj는 function 인스턴스이다. book에 파라미터 값인 “js책”이 들어간다. return book은 함수 코드이다.
파라미터 수에 따라 인스턴스 생성 기준이 다름
- 파라미터 2개 이상 작성
  마지막 파라미터에 함수에서 실행할 함수 코드를 작성한다.
  이를 제외한 파라미터에 이름을 작성한다.
```
  var obj = new Function("one", "two", "return one + two;");
  console.log(obj(100, 200));
  // 값 : 300
```
  파라미터를 3개 작성했으며 첫번째와 두번째 파라미터는 호출한 곳에서 넘여준 값을 매핑할 파라미터 이름을 작성한다.
  세번째는 호출되었을 때 실행될 함수 코드이다.
- 파라미터 하나 작성
  함수에서 실행할 함수 코드 작성
  파라미터가 없을 때 사용
```
  var obj = new Function("return 1 + 2;");
  console.log(obj());
  // 값 : 3
```
- 파라미터를 작성하지 않을 때
  함수 코드가 없는 Function 인스턴스가 생성된다.

Function()

Function 인스턴스 생성
처리 방법과 파라미터 작성이 new Function()과 같다.
차이점은 단지 new 연산자를 사용하지 않는 것 뿐이다.

Built-in object 3 Object

Sun, 31 Jan 2021 00:00:00 +0000

Object

1. 자바스크립트의 오브젝트

오브젝트 구분
1. 빌트인 오브젝트(Built-in Object)
2. 네이티브 오브젝트(Native Object)
3. 호스트 오브젝트(Host Object)

빌트인 오브젝트

사전에 만들어 놓은 오브젝트이다.
예로는 앞서 포스팅한 Number 오브젝트와 String 오브젝트 등 11개의 오브젝트가 있다.

네이티브 오브젝트

JS 스펙에서 정의한 오브젝트이다.
빌트인 오브젝트도 네이티브 오브젝트에 포함된다.
JS를 실행할때 만드는 코드이다.

호스트 오브젝트

빌트인, 네이티브 오브젝트를 제외한 오브젝트이다.(즉, 네이티브 오브젝트가 아니면 전부 호스트 오브젝트이다)
예) window, DOM 오브젝트
```
  var node = document.querySelector("div");
  console.log(node.nodeName); //값 : DIV
```
DOM 함수 : querySelector()
DOM에서 제공하는 오브젝트를 호스트 오브젝트라고 한다.
마치 JS 함수처럼 DOM 함수를 사용한다.

빌트인 오브젝트는 네이티브 오브젝트에 포한된다고 봐야하기 때문에 자바스크립트의 오브젝트는 네이티브와 호스트 두가지라고 보면 된다.

JS는 호스트 환경에서 브라우저의 모든 요소 기술을 연결하고 융합하며 이를 제어한다.

2. 빌트인 Object 프로퍼티 리스트

이름	개요
new Object()	파라미터 데이터 타입의 인스턴스를 생성
Object()	Object 인스턴스 생성
Object.prototype
constructor	생성자
valueOf()	프리미티브 값 반환
hasOwnProperty()	프로퍼티 소유 여부 반환
propertyIsEnumerable()	프로퍼티 열거 여부 반환
isPrototypeOf()	prototype의 존재 여부 반환
toString()	문자열로 반환
toLocaleString()	지역화 문자열로 변환

밑에서 6개의 함수는 빌트인 오브젝트로 인스턴스를 만드는 오브젝트에 포함된다. (__ proto __)

3. 빌트인 오브젝트 구조

오브젝트 이름 (Object, String, Number…)
오브젝트.prototype
- 인스턴스 생성 가능 여부 기준
- 프로퍼티를 연결하는 오브젝트
  prototype이 없으면 인스턴스를 만들 수 없다. (프로퍼티를 연결할 수 없다)
오브잭트.prototype.constructor
- 오브젝트의 생성자
오브젝트.prototype.method
- 메소드 이름과 함수 작성

4. 함수와 메소드 연결

함수
-오브젝트에 연결
-Object.create()
메소드 -오브젝트의 prototype에 연결
-Object.prototype.toString()
이때 < toString > 함수가 메소드가 된다.

함수, 메소드 호출

함수 호출 방법
-Object.create();
```
  console.log(Object.create);
  // 값 : function create(){[native code]}
  console.log(Object.prototype.create);
  // 값 : undefined
```
1. Object에 create가 존재하므로 함수를 출력한다.
2. Object.prototype에 create가 존재하지 않으므로 undefined가 출력된다.
메소드 호출 방법 -Object.prototype.toString();
-또는 인스턴스를 생성하여 호출한다.
```
  console.log(Object.protoType.toString());
  // 값 : function toString(){[native code]}

  var obj = {};
  log(obj.toString);
  // 값 : function toString(){[native code]}
```
1. Object.prototype에 toString이 존재하므로 함수를 출력한다.
2. 인스턴스를 사용하여 메소드를 호출할 때는 prototype을 작성하지 않는다.
  prototype에 연결된 메소드로 인스턴스를 생성하기 때문이다.
  즉, toString 함수는 방법이 두가지 이다.
함수와 메소드를 구분해야 하는 이유
-JS 코드 작성 방법이 다르다. -함수는 파라미터에 값을 작성하고 메소드는 메소드 앞에 값을 작성한다.
```
  console.log(String.fromCharCode(49, 65);
  //값 : 1A
```
함수 앞에 배열로 값을 작성하면 Array 오브젝트의 함수가 호출되므로
String 오브젝트의 함수를 호출하면서 파라미터에 값을 작성해야한다.

prototype이 연결되어 있으면 medhod이고
연결되어 있지 않으면 함수이다.

프로퍼티 처리 메소드

hasOwnProperty()

구분	데이터(값)
object	기준 인스턴스
파라미터	프로퍼티 이름
반환	true, false

인스턴스에 파라미터 이름이 존재하면 true 반환, 존재하지 않으면 false 반환

var obj = {value: 123};
var own = obj.hasOwnProperty("value");
console.log(own);
//값 : true

[프로퍼티 존재 여부 코드]

obj 인스턴스에 value 프로퍼티가 존재하며 (name=”value”)

obj를 만들면서 직접 작성했으로 true를 반환한다.

var obj = {value: undefined};
var own = obj.hasOwnProperty("value");
console.log(own); //값 : true

[값은 체크하지 않음]

undefined가 값이지만 false로 인식된다.
하지만 값은 체크하지 않고 존재 여부만 체크 하므로 true가 반환된다.

자신이 만든 것이 아니라 상속받은 프로퍼티이면 false를 반환한다.

var obj = {};
var own = obj.hasOwnProperty("hasOwnProperty"); //괄호 안 hasOwnProperty는 프로퍼티 이름이면서 메소드이다.
console.log(own); //값 false

obj 에 아무런 값도 할당하지 않았으므로
hasOwnProperty()는 자신이 만든 것이 아니라 빌트인 Object 오브젝트에 있는 것이다.
자신이 만든 것은 위에 있는 프로퍼티 존재여부 코드에 있는 것이다.
{}를 실행하면 빌트인 Object의 prototype에 연결된 메소드를 사용하여
Object 인스턴스를 만드므로 자신이 만든 것이 아니다.

propertyIsEnumerable()

구분	데이터(값)
object	인스턴스, 오브젝트
파라미터	프로퍼티 이름
반환	true, false

오브젝트에서 프로퍼티를 열거 할 수 있으면 true를 반환한다.
```
var obj = {sports: "축구"};
console.log(obj.propertyIsEnumerable("sports"));
//값 : true
```
1. {sports: “축구”} 형태로 생성한 인스턴스는 obj의 프로퍼티를 열거할 수 있다.(for in 문 사용)
오브젝트에서 프로퍼티를 열거할 수 없으면 false를 반환한다.

var obj = {sports: "축구"};
Object.defineProperty(obj, "sports", {
    enumerable : false //열거할 수 없는 상태로 설정함
});
console.log(obj.propertyIsEnumerable("sports"));

for(var name in obj){
    console.log(name);
}
// 값 : false

{enumerable: false}로 열거 불가 설정
for-in 문에서 프로퍼티가 열거되지 않는다

Object와 prototype, 빌트인 Object 특징

빌트인 Object의 특징

인스턴스를 만들 수 있는 모든 빌트인 오브잭트의 __proto__에 Object.prototype의 6개 메소드가 설정된다.
number, string 등등 의 인스턴스의 __proto__에도 설정된다는 말이다.
따라서 빌트인 오브젝트로 만든 인스턴스에도 설정된다.

isPrototypeOf()

구분	데이터(값)
object	검색할 오브젝트.prototype
파라미터	검색 대상 오브젝트
반환	true, false

파라미터에 작성한 오브젝트에서 object 위치에 작성한 prototype이 존재하면 true를 반환하고 존재하지 않으면 false를 반환한다.

var numObj = new Number(123);
console.log(Object.prototype.isPrototypeOf(numObj));
//값 : true

Object.prototype처럼 오브젝트의 prototype을 작성한다.
numObj에 Object.prototype의 존재를 체크한다.
prototype이 존재하므로 true를 반환한다.

깊은 풀이
앞서 모든 빌트인 오브젝트엔 Object.prototype의 6개의 메소드가 들어있다 했다. new Number를 선언하여 number 인스턴스를 불러왔고 number 인스턴스 안에 __proto__가 있고 그 안에 또 __proto__ 안에 Object.prototype의 6개의 메소드가 들어있으므로
object.prototype이 존재하는 것이다.

toString()

구분	데이터(값)
object	Object 인스턴스
파라미터	사용불가
반환	변환한 값

인스턴스 타입을 문자열로 표시한다.
```js var point = {book: “책”}; console.log(point.toString()); // 값 : [object Object]

var obj = new Number(123); console.log(Object.prototype.toString.call(obj)); // 값 : [object Number]

1. toString() 앞에 Object 인스턴스를 작성했으며  
2. toString()을 실행하면 결과 값처럼 [object Object]를 표시한다.  
3. 앞의 소문자 object는 인스턴스를 나타내고 뒤의 대문자 Object는 빌트인 Object를 나타낸다.  

* 오브젝트에 toString()이 있으면 toString()이 호출되고  
    없으면 Object의 toString()이 호출된다.  

### toLocaleString()

| 구분 | 데이터(값) |
| :---: | :---: |
| data  | 변환 대상 |
| 파라미터 | 사용하지 않음 |
| 반환 | 변환한 값 |

* 지역화 문자 변환 메소드 대체 호출  
    Array, Number, Date 오브젝트의 toLocaleString()메소드가 먼저 호출된다.  
```js
console.log(1234.56.toLocaleString());
console.log("4567.89".toLocaleString());
// 값 : 1,234.56
// 값 : 4567.89

1234.56에 콤마(,)를 삽입하여 1,234.56으로 출력
이때에는 Number.prototype.toLocaleString()메소드가 호출된다.
“4567.89”는 String 타입이며
String.prototype.toLocaleString()이 없으므로
Object,prototype.toLocaleString() 메소드가 호출된다.
Object의 toLocaleString()이 없으면 애로거 발생한다. 즉, 에러 발생을 방지하기 위한 것이다.

Built-in object 2 String 문자열

Mon, 11 Jan 2021 00:00:00 +0000

String 오브젝트 🆒

ABC 처럼 문자 처리를 위한 오브젝트
문자처리를 위한 함수와 프로퍼티가 포함되어 있다.
함수를 호출하여 문자 처리를 하게 된다. (프로퍼티 값을 구한다.)

1. 문자열 연결 방법

한 줄에서 연결하는 법

var book = "12" + "AB" + "가나";
//결과 값 : 12AB가나

줄을 분리하여 연결

+로 문자열 연결

  var concat = 123 + "abc" +
                 "가나다";
  // 결과 값 : 123abc가나다

역슬래시() 문자열 연결
```
  var concat = "abc \ 
             가나다라";
  // 결과 값 : abc가나다라
```
줄 끝에 역슬래시를 작성한다. (역슬래시 뒤에 다른 문자는 작성불가하다)

2. 프로퍼티 리스트

이름	개요
new String()	인스턴스 생성
String 함수
String()	문자열로 변환하여 반환
fromCharCode()	유니코드를 문자열로 변환하여 반환 (사람이 읽을 수 있는 문자가 된다)
String 프로퍼티
length	문자열의 문자 수 반환
String.protoType
constructor	생성자
valueOf()	프리미티브 값 반환 (인스턴스에 있는 프리미티브 값 반환)
toString()	문자열로 변환
charAt()	인덱스 번째 문자 반환
indexOf()	일치하는 문자열 중에서 가장 작은 인덱스 반환 (왼쪽으로 오른쪽으로 가는데 가장 먼저 일치하는 문자의 index)
lastIndexOf()	일치하는 문자열 중에서 가장 큰 인덱스 반환 (가장 오른쪽에 위치하는 문자의 index)
String.protoType
concat()	문자열 연결
toLowerCase()	영문 소문자로 변환
toUpperCase()	영문 대문자로 변환
trim()	문자열 앞뒤의 화이트 스페이스 삭제 (공백삭제)
substring()	시작에서 끝 직전까지 값 반환 (바로 앞에까지의 값)
substr()	시작 위치부터 지정한 문자 수 반환
slice()	시작에서 끝 직전까지 값 반환. substring()과 차이 있음 (추출하는 조건이 차이가 있다)
match() 정규표현식 사용가능	매치 결과 반환 (다수의 다양한 매치 가능)
replace() 정규표현식 사용가능	매치 결과를 지정한 값으로 대체
search() 정규표현식 사용가능	검색된 첫 번째 인덱스 반환
split() 정규표현식 사용가능	구분자로 분리하여 반환
charCodeAt()	인덱스 번째 문자를 유니코드로 반환
localeCompare()	값의 위치를 1(왼쪽),0(같음),-1(오른쪽)로 반환

3. 문자열로 변환

String()

구분	데이터(값)
파라미터	변환대상 opt
반환	뱐환한 값

파라미터 값을 String 타입으로 변환하여 반환한다.
- 값을 작성하지 않으면 빈문자열을 반환한다.

var value = String(123);

console.log(value); // 값 : 123
console.log(typeof value); // 값 : string
console.log(typeof ("" + 123)) // 값 : string

("" + 123) 으로도 String 타입이 되지만
String(123)형태가 더 가독성이 높다.

new String()

구분	데이터(값)
파라미터	값 opt
반환	생성한 String 인스턴스

String 인스턴스를 생성하여 반환한다.

var obj = new String(123);
console.log(typeof obj); // 값 : object

파라미터 값을 String 타입으로 변환한다.
파라미터 값이 프리미티브 값이 된다.

valueOf()

구분	데이터(값)
data	String 인스턴스, 문자
파라미터	값 opt
반환	생성한 String 인스턴스

String 인스턴스의 프리미티브 값을 반환한다.

var obj = new String(123);
console.log(obj.valueOf()); //값 : 123

obj는 String 인스턴스이다.
파라미터 값 123이 String 인스턴스의 프리미티브 값으로 설정된다.
obj에 프리미티브 값으로 설정된 값이 반환된다.

4. length 프로퍼티

문자 수를 반환한다.

var value = "ABC";
for(var k = 0; k < value.length; k++){
    console.log(value[k]);
};
// 실행결과 
// A
// B
// C

“ABC”를 문자 하나씩 분리하여 반복한다. 따라서 3번 반복한다.

length 값이 반환되는 논리

value = "ABC"; 에는 length 프로퍼티가 없는데 3이 출력된다. 왜 일까?

var obj = new String("ABC");

위 코드를 개발자 모드에서 실행시킨뒤 sources에 들어가 살펴보면
오른쪽 local이 있다. 이 local에서 obj를 펼치면 length: 3이 있다. 둘은 같은 라인에 있다.
이건 value 변수와 obj가 같다는 뜻이기도 하다.
엔진이 value.length를 만나면 value가 String 타입 이므로
내부에서 new String(“ABC”)를 하게 되며(인스턴스를 생성한다.)
생성한 인스턴스의 length 값인 3을 반환하게 된다.

위 예제로 풀이하자면!
맨 처음 value에 대한 타입을 구한다.
내부에서 new String 인스턴스를 만든다. 그리고 “ABC”가 프리미티브 값에 설정된다.
이때 그 프리미티브 값을 보고 랭스를 만든다.

5. 화이트 스페이스 삭제

trim()

구분	데이터(값)
data	삭제 대상
파라미터	사용하지 않음
반환	삭제한 결과

문자열 앞뒤의 화이트 스페이스를 삭제한다.

var value = "  abcd  ";
console.log(value.length); // 값 : 8

console.log(value.trim().length); // 값 : 4

그냥 value의 length는 공백을 포함하여 8,
trim()을 사용하면 앞뒤의 공백이 사라지므로 4가 반환된다.

value.trim().length 처럼 . 으로 이어진 걸 메소드 체인(Method Chain) 이라고 한다.

6. 함수호출 구조 (String에 toString이 필요한 이유)

toString()

구분	데이터(값)
data	문자열, string 인스턴스
파라미터	사용하지 않음
반환	변환한 값

data 위치의 값을 String 타입으로 변환한다.

“123”.toString();

string()은 이미 문자열인데 어째서 toString()이 필요할까? 의미가 없다?

[ toString() 함수가 필요한 이유 ]

인스턴스를 만들때 toString이 인스턴스에 해당함

var twoProto = instance.__proto__.__proto__;

__proto__:
    toString();
    __proto__:
       toString(); 

위처럼 __proto__ 안에 __proto__가 있는 구조이다.

아래에 있는 것은 프로퍼티를 String으로 변환하는것, 위에 있는 것은 문자열을 String으로 변환하는 것
내려가서 실행되는걸 방지하기 위해 toString()을 작성해준다.

그래서 대부분의 빌트인 오브젝트에 toString()과 valueOf()가 있는 것이다.

JS 함수 호출 구조

데이터 타입으로 오브젝트를 결정한다.
오브젝트의 함수를 호출한다.

var value = 123;
value.toString();
"123".toString();

value.toString()은 Number 오브젝트의 toString()을 호출한다.
“123”.toString()은 String 오브젝트의 toString()을 호출한다.

toString(123);
123을 파라미터에 작성
```
  var result = toString(123);
  console.log(result);
```
1. Object 오브젝트의 toString()이 호출된다.
2. 123을 오브젝트로 간주하여 Object 형태를 문자열로 변환한다.
3. object Undefined 가 반환된다.
4. 값만 입력했는데 key:value 값이 들어오기 때문이다.

7. 인덱스로 문자열 정리

cahrAt()

구분	데이터(값)
data	반환 대상
파라미터	반환 기준 인덱스(index)
반환	인덱스 번째 문자

인덱스의 문자를 반환한다.

  var value = "sports";
  console.log(value.charAt(1)); // 함수를 호출하는 형태
  console.log(value[1]); //프로퍼티 이름으로 값을 구하는 형태
  // 값 : p, p

ES5에선 [1] 형태로 사용할 수 있다.

문자열 길이보다 인덱스가 크면 빈문자열을 반환한다.
```
  var value = "sports";
  console.log(value.charAt(12));
  // 값 : ""
```
sports의 전체 문자열 수는 6인데 파라미터의 인덱스가 전체 문자열보다 크므로
빈 문자열을 반환한다.

빈 문자열도 “값” 이다.
일반적으로 존재하지 않으면 undefined를 반환한다.
```
  var value = "sports";
  console.log(value[12]);
  // 값 : undefined
```
12번째 인덱스가 없으므로 undefined를 반환한다.
프로퍼티 이름으로 가서 반환하기 때문에 위에 빈 문자열을 반환하는 것과는 차이가 있다.

indexOf()

구분	데이터(값)
data	검색 대상
파라미터	검색한 문자열
파라미터	검색 시작 위치, 디폴트 : 0
반환	인덱스

data 위치의 문자열에서 파라미터의 문자와 같은 첫 번째 인덱스를 반환한다.
검색기준은 3가지가 있다.

1. 왼쪽에서 오른쪽으로

var value = "123123";
console.log(value.indexOf(2)); // 값 : 1
console.log(value.indexOf(23)); // 값 : 1

123123에서 `2` 는 두개이지만 처음 인덱스를 반환하므로 1이다.  
값을 구하게 되면 더 이상 값을 구하지 않고 끝난다.  
23에선 23이 존재하며 23중 처음인 2가 검색된 인덱스를 반환한다.

2. 두 번째 파라미터를 작성하면 그 작성한 인덱스번째부터 검색한다.

var value = "123123";
console.log(value.indexOf(2,3)); //값 : 4

index(2,3) 은 3번 인덱스부터 2를 찾아 검색하는 것이다.
3번째 인덱스부터 2를 찾아 2의 인덱스를 찾으니 값은 4가 된다.

3. 같은 문자가 없으면 -1 을 반환한다. (자주 쓰이는 방법!)

var value = "123123";
console.log(value.indexOf(15)); //값 : -1

indexOf를 사용할때 자주 사용한다. 존재 여부를 체크하기 때문

var value = "123123";
console.log(value.indexOf(2, -1)); //값 : 1
console.log(value.indexOf(2, 9)); //값 : -1
console.log(value.indexOf(2, "A")); //값 : 1

예제 1. 두 번째 파라미터 값이 0보다 작으면 처음부터 검색하므로 1이 나온다.
예제 2. 두 번째 파라미터 값이 length 보다 크면 -1 을 반환한다.
예제 3. 두 번째 파라미터가 NaN이면 처음부터 검색한다.

조건들은 전부 안 외워도 된다. index 번째의 값을 반환한다는 것, 존재하지 않으면 -1을 반환한다는 것. 이것만 기억하자

lastIndexOf()

구분	데이터(값)
data	검색 대상
파라미터	검색한 문자열
파라미터	검색 시작 위치, 디폴트 : 0
반환	인덱스

data 위치의 문자열에서 파라미터의 문자와 같은 인덱스를 반환한다.
(단, 뒤에서 앞으로 검색한다.)
```
  var value = "123123";
  console.log(value.lastIndexOf(2)); //값 : 4
```
마지막 인덱스를 반환하므로 4를 반환한다.
검색기준은 2가지 이다.

1. 두 번째 파라미터를 작성하면 작성한 인덱스부터 검색

var value = "1231231";
console.log(value.lastIndexOf(1, 4)); //값 : 3
console.log(value.lastIndexOf(2, -1)); // 값 : -1

예제 1)
인덱스는 왼쪽에서 오른쪽부터 시작한다. 그러나 첫번째 파라미터를 찾을땐 역순이다.
“1231231” 4번째 인덱스 2에서 오른쪽에서 왼쪽으로 이동해 “1231231” 1을 찾음. 고로 3이 반환된다.
예제 2) 두 번째 파라미터가 0보다 작으면 -1을 반환한다.

8. 문자열 연결, 대소문자 변환

concat()

구분	데이터(값)
data	연결 시작 값, String 인스턴스
파라미터	연결 대상 opt, 다수 작성 가능
반환	연결한 결과

data 위치의 값에 파라미터 값을 작성 순서로 연결하여 문자열로 반환한다.

var result = "sports".concat("축구", 11);
console.log(result); // 값 : sports축구11

var obj = new String(123);
console.log(obj.concat("ABC")); // 값 : 123ABC

String 인스턴스를 작성하면 프리미티브 값을 연결한다.

toLowerCase()

구분	데이터(값)
data	변환 대상
파라미터	사용하지 않음
반환	변환 결과

영문 대문자를 소문자로 변환한다.

toUpperCase()

구분	데이터(값)
data	변환 대상
파라미터	사용하지 않음
반환	변환 결과

영문 소문자를 대문자로 변환한다.

console.log("CODE".toLowerCase()); // 값 :code
console.log("code".toUpperCase()); // 값 : CODE

문자열 추출 (외울 필요 없다 그냥 알아두면 좋음)

subString()

구분	데이터(값)
data	반환 대상
파라미터	시작 인덱스
파라미터	끝 인덱스
반환	결과

파라미터의 시작 인덱스부터 끝 인덱스 직전까지 반환한다.

var value = "01234567";
console.log(value.subString(2, 5)); // 값 234

2번 인덱스부터 5번 인덱스 직전(4번 인덱스)까지 반환한다.

두번째 파라미터를 작성하지 않으면(끝 인덱스를 작성하지 않으면) 반환 대상의 끝까지 반환한다.
파라미터를 모두 작성하지 않으면 전체가 반환된다.
다양한 추출 조건을 작성할 수 있다.
1. 두번째 파라미터 값(끝 인덱스)이 전체 length 보다 크면 전체 문자열 Length를 사용한다.
  따라서 시작 인덱스부터 끝까지 반환한다.
2. 파라미터 값이 음수이면 0으로 간주한다.
3. 첫 번째 파라미터 값(시작 인덱스 값)이 두번째(끝 인덱스 값)보다 크면 파라미터의 값을 뒤바꿔서 처리한다.
4. NaN은 0으로 간주한다.

substr()

구분	데이터(값)
data	반환 대상
파라미터	시작 인덱스
파라미터	반환할 문자 수
반환	결과

파라미터의 시작 인덱스부터 지정한 문자 수를 반환한다.

var value = "01234567";
console.log(value.substr(0, 3)); 값 : 012

0번 인덱스부터 문자 3개를 반환한다.

첫 번째 파라미터 값이 음수이면 length에서 파라미터 값을 더해 시작 인덱스로 사용한다.

var value = "01234567";
console.log(value.substr(-3, 3));
// 값 : 567

첫 번째 파라미터 값이 -3이므로 value의 length 값인 8을 더해 첫 번째 파라미터를 5로 만든다.
5번째 인덱스부터 3개의 문자를 반환하므로 567이 나온다.

두 번째 파라미터를 작성하지 않으면 양수 무한대로 간주한다.
양수 무한대는 최대 값이다. 고로 첫 번째 파라미터의 인덱스 값 부터 전체를 반환한다.
첫 번째 파라미터를 작성하지 않으면 0으로 간주하여 아예 전체가 반환된다.

slice()

구분	데이터(값)
data	반환 대상
파라미터	시작 인덱스
파라미터	끝 인덱스
반환	결과

파라미터의 시작 인덱스부터 끝 인덱스 직전까지 반환한다.
첫 번째 파라미터 값을 작성하지 않거나 NaN이면 0으로 간주한다.
false, undefined, null, 빈 문자열 은 0으로 간주한다.
두번째 파라미터를 작성하지 않으면 lenght를 사용한다.
값이 음수이면 lenght에 더해 사용한다.

정규 표현식을 사용할 수 있는 함수

match()

구분	데이터(값)
data	매치 대상
파라미터	정규표현식, 문자열
반환	[ 매치결과 ]

매치 결과를 배열로 반환한다. 매치 대상에 정규 표현식의 패턴을 적용하여 매치하고 결과를 반환한다.
```
  var value = "Sports";
  console.log(value.match(/s/)); // 값 : [s]
  console.log(value.natch("spo")); // 값 : null
```
match에서 /s/는 정규표현식이다.
한개가 있든 몇개가 있든 배열로 반환하기 때문에 [ s ] 가 반환된 것이다.
“spo”는 소문자 s를 파라미터에 작성했기 때문에(value의 값은 대문자 s로 입력되어 있다.) null이 반환된다.

정규 표현식이란? 🤔

문자열을 패턴으로 매치한다.
패턴(pattern) 형태 : ^,$,*,+ 등

replace()

구분	데이터(값)
data	치환 대상
파라미터	정규 표현식, 문자열
파라미터	대체할 값, 함수
반환	치환 결과

매치 결과를 파라미터에 작성한 값으로 대체하여 반환한다.
두번째 파라미터에 함수를 작성하면 먼저 함수를 실행하고 함수에서 반환된 값으로 두 번째 파라미터를 대체한다.

var value = "abcabc";
console.log(value.replace("a", "바꿈")); 
// 값 : 바꿈bcabc
console.log(value.replace(/a/, "바꿈"));
// 값 : 바꿈bcabc

function change(){
    return "함수";
};
console.log(value.replace(/a/, change()));
//값 : 함수bcabc

/a/는 처음 하나만 바꾸므로 뒤에 있는 a는 변경되지 않는다.
함수로 불러오면 함수를 먼저 실행하고 반환된 값으로 바꾼다.

search()

구분	데이터(값)
data	검색 대상
파라미터	정규표현식, 문자열
반환	매치된 인덱스

검색된 첫번째 인덱스를 반환한다.
매치되지 않으면 -1 을 반환한다.

var value = "cbacba";
console.log(value.search(/a/)); // 값 : 2
console.log(value.search("K")); // 값 : -1

두번째 결과는 k가 없으므로 매치되지 않는다. 그러므로 -1을 반환한다.

split()

구분	데이터(값)
data	분리 대상
파라미터	분리자(separator) : 정규 표현식, 문자열
파라미터	반환 수
반환	결과

분리 대상을 분리자로 분리하여 배열로 반환한다.

console.log("12_34_56".split("_"));
// 값 : [12, 34, 56]

split 파라미터에 넣은 ‘_’ 을 분리자로 사용하여 분리했다.
분리자는 반환되지 않는다.

분리자에 빈 문자열을 작성하면 문자를 하나씩 분리하여 반환한다.
```
var value = "123"
console.log(value.split("")); // 값 : [1,2,3]
```
분리자를 아예 작성하지 않으면 분리 대상 전체를 하나의 배열로 반환한다.
```
console.log("123".split()); //값 : [123]
```
두 번째 파라미터에 반환 수를 작성할 경우 그 수만큼 반환된다.
```
var value = "12_34_56_78";
console.log(value.split("_", 3));
// 값 : [12, 34, 56]
value = "123";
console.log(value.split("A"));
// 값 : [123]
```
분리자가 대상에 없으면 분리 대상 전체를 하나의 배열로 반환한다.

unicode 관련 함수

Built-in object 1 Number

Mon, 11 Jan 2021 00:00:00 +0000

Built-in object 목록

Number 오브젝트

숫자 처리를 위한 오브젝트이다.
즉, Number object엔 숫자 처리를 위한 함수와 프로퍼티가 포함되어있다.
함수를 호출하여 숫자를 처리하고 프로퍼티 키로 값을 구한다.

프로퍼티 리스트

이름	개요
new Number()	인스턴트 생성
Number 함수
Number()	숫자 값으로 변환하여 반환
Number.propeotype
constructor	생성자
toString()	숫자값을 문자열로 변환
toLocaleString()	숫자값을 지역화 문자로 변환
valueOf()	프리미티브 값 변환
toExponential()	지수 표기로 변환
toFixed()	고정 소숫점 표기로 변환
toPrecision()	고정 소숫점 또는 지수표기로 변환

목적(개요)을 이루기 위해 수단(이름)을 사용한다.

1. Number()

구분	데이터(값)
파라미터	변환할 값 opt
반환	변환한 값

파라미터 값을 Number 타입으로 변환
1-1 ) 파라미터 값은 필수가 아니다.(입력 안해도 됨)
파라미터 값이 String 타입이라도 값이 숫자라면 변환이 가능하다.
```
log(Number("123") + 500);
log(Number("abs"));
// 결과 값 : 623, NaN
```

숫자로 변환할 수 있으면 변환한다.

log(Number(0x14)); //16진수를 10진수로 변환
// 0x는 16진수를 뜻한다. 그리고 1에 16을 곱한 뒤 4를 더한다. 고로 값을 20이다.
log(Number(true)); // true는 1, false는 0
log(Number(null)); // null은 0으로 변환
log(Number(undefined)); // undefined는 NaN으로 변환
// 결과 값 : 20, 1, 0, NaN

파라미터 값을 작성하지 않으면 0을 반환한다.

2. Number 상수

상수 이름	값
Number.MAX_VALUE	1.7976931348623157 * 10(308승)
Number.MIN_VALUE	5 * 10(-324승)
Number.NaN	Not-a-Number
Number.POSITIVE_INFINITY	infinity
Number.NEGATIVE_INFINITY	-infinity

상수는 값을 변경하거나 삭제할 수 없다.
영문 대문자 사용이 관례이다.
Number.MAX_VALUE 형태로 값을 사용한다.

3. new 연산자

new 연산자는 Number object는 아니지만 Number 인스턴스 생성과 연계가 되므로 알아보도록 하자.

구분	데이터(값)
constructor	생성자
파라미터	값 opt
반환	생성한 인스턴스

오브젝트로 인스턴스를 생성하여 반환한다.
- 원본을 복사하는 개념이다.
- new 연산자를 사용하면 인스턴스
```
 var obj = new Number();
 log(typeof obj);
 //결과 값 : object
```
  빌트인 Number 오브젝트로 인스턴스를 생성하여 반환한다.
  복사를 하는 게 new 연산자 복사한 복사본이 인스턴스이다.
  이렇게 생성한 인스턴스를 할당하고 호출되는 함수를 생성자 함수라고 부른다.
  생성한 인스턴스 타입은 object다.
소문자 object와 대문자 Object의 차이점을 기억하자.
- 코딩 관례로 첫 문자를 대문자로 작성한다.
인스턴스 생성 목적
- 인스턴스마다 값을 갖기 위해서이다.
```
 var oneObj = new Number("123");
 log(oneObj.valueOf());

 var twoObj = new Number("456");
 log(twoObj.valueOf());
 // 실행 값 : 123, 456
```
두 코드가 가지고 있는 다른 점은 파라미터 값 뿐이다.
다른 값을 저장하기 위해 인스턴스를 만들어서 저장하는 것이다.
(값이 다른 경우를 위해 인스턴스를 생성한다.)

4. new Number()

구분	데이터(값)
파라미터	값 option
반환	생성한 Number 인스턴스

빌트인 Number object로 새로운 Number 인스턴스 생성
```
  var obj = new Number("123");
  log(obj.valueOf());
  // 실행 값 : 123
```
빌트인 Number 오브젝트로 인스턴스를 생성하여 반환한다.
파라미터 값이 문자열이면 숫자로 변환한다.
생성한 인스턴스에 파라미터 값을 설정한다.
인스턴트 형태
인스턴스를 생성시 프로퍼티들이 단 하나도 오지 않는다. 단 하나 가져오는 것이 있는데 바로 prototype이다. 인스턴스를 만드는 기준은 프로토타입을 기준으로 해서 프로토타입에 연결되어 있는 것만 설정된다.

디버그로 찍어보면 prototype은 __proto__ 로 나와있다.

인스턴스를 만드는 기준은 프로토 타입이다.

프로토타입에 연결되어 있는 함수들을 복사해주는 것, 즉 다른 것들은 가려서 복사해주는 거다

5. 프리미티브 값

Primitive Value
- 언어에 있어 가장 낮은 단계의 값
- var book = "책";
  책은 더이상 분해나 전개가 불가하다.
Primitive type
- Number, String, Boolean : 인스턴스 생성 가능
- Null, Ùndefined : 인스턴스 생성 불가
- Object는 프리미티브 값을 제공하지 않는다.
[[PrimitiveValue]] : value [[]]는 자바스크립트 엔진이 만들었다는 것이다.
즉, 프리미티브 값은 자바스크립트 엔진이 만든 것이다.
var obj = new Number(123);
인스턴스를 생성하면 파라미터 값을 인스턴스의 프리미티브 값으로 설정한다.
프리미티브 값을 갖는 오브젝트
Boolean, Date, Number, String
```
      var obj = new Number(123);
      log(obj + 200);
      // 실행 값 : 323
```
프리미티브 값을 갖기 때문에 obj엔 123 값이 설정되기 때문에 값을 더할 수 있는 것이다.

valueOf() 함수

구분	데이터(값)
data	Number 인스턴스, 숫자
파라미터	사용하지 않음
반환	프리미티브 값

Number 인스턴스의 프리미티브 값 반환

  var obj = new Number("123");
  log(obj.valueOf());
  // 실행 값 : 123

위와 같이 인스턴스 obj의 프리미티브 값 123을 반환한다.

6. toString()

구분	데이터(값)
data	변환 대상
파라미터	진수(2~36)opt, 디폴트 : 10진수
반환	반환한 값

data를 String 타입으로 변환
```
var value = 20;
log(20 === value.toString());
log(value.toString(16));
// 결과 값 : false, 14
```
1. toString()함수는 숫자를 string 타입으로 변환 시키기 때문에 값이 false이다.
2. toString(16)은 20을 16진수로 변환하기 때문에 값이 14이다.
변환시 주의사항
```
log(20..toString());
// 결과 값 : 20
```
1. 20.toString()형태로 작성하면 에러가 난다.
2. 20이 아니라 20.을 변환 대상으로 인식하므로 점이 없는 valuetoString()형태가 되기 때문이다.

7. toLocaleString()

구분	데이터(값)
data	변환 대상
파라미터	사용하지 않음
반환	변환한 값

숫자를 브라우저가 지원하는 지역화 문자로 변환한다.
- *지역화 지원 및 형태를 브라우저 개발사에 일임한다. (크롬, 익플, 엣지등등…)
  그래서 각각 다를 수도 있다.
- 지역화를 지원하지 않으면 toString()으로 변환한다.

스펙상태

ES5 : 파라미터 사용불가

ES6 : 파라미터에 언어 타입 사용 가능

  var value = 1234.56;
  log(value.toLocaleString()); //한국식 1,234.56
  log(value.toLocaleString('de-DE')); //독일식 1.234,56
  log(value.toLocaleString('zh-Hans-CN-u-nu-hanidec')); //중국 한자 표시 

이걸 어디에서 사용해? 🤔

주 예시 : 사용자에 문화권에 맞는 시간 표기를 위해 사용한다. 한국의 경우 2021년 1월 2일로 표기하지만 미국은 01/02/21 이고 영국에서는 02.01.21 이다.

8. toExponential() (지수 변환!)

숫자를 지수 표기로 변환하여 문자열로 반환한다.
- 파라미터 소수 이하 자릿수 작성 (0-20까지)

구분	데이터(값)
data	변환 대상
파라미터	소수 이하 자릿수(0~20)
반환	변환한 값

표시 방법
변환 대상의 첫 자리만 소수점(.) 앞에 표시
나머지는 소수 아래에 표시한다.
지수(e+) 다음에 정수에서 소수로 변환된 자릿수를 표시한다.
```
 var value = 1234;
 log(value.toExponential());
 // 결과 값 ㅣ 1.234e+3
```
파라미터에 값을 작성하지 않으면 1을 소수점 앞에 표시하고 나머지를 소수에 표시한다.
이어서 e+를 표시하고 정수에서 소수로 변환된 234가 3자리이므로 e+ 다음에 3이 표시된다.

var value = 123456;
log(value.toExponential(3));
// 결과 값 : 1.235e+5

파라미터에 3을 작성했으므로 1.234e+5 로 표시된 것이 아니라 1.2345e+5 로 표시된 것이다. 2345에서 3자리로 표시할때 반올림을 하기 때문이다.

toFixed() 고정소수점

구분	데이터(값)
data	변환 대상
파라미터	반환할 소수 이하 자릿수
반환	변환한 값

고정 소숫점 표기로 변환하여 문자열로 반환한다.
- 파라미터에 소수 이하 자릿수 작성 (0-20까지)
표시방법
- 파라미터 값보다 소수 자릿수가 길면 작성한 자리수에 1을 더한 위치에서 반올림한다.
```
  var value = 1234.567;
  log(value.toFixed(2)); // 결과 값 : 1234.57
  log(value.toFixed()); // 결과 값 : 1235
```
  1. 파라미터에 2를 작성했으므로 소수 두자리까지 표시한다. 이때, 셋째 자리에서 반올림한다.
  2. 파라미터 값을 작성하지 않으면 0으로 간주하여 소수 첫째 자리에서 반올림하여 정수값을 표시한다.
- 변환 대상 자릿수보다 파라미터 값이 크면 나머지를 0으로 채워서 반환한다.
```
  var value = 1234.567;
  log(value.toFixed(5));
  //결과 값 : 1234.56700
```
  파라미터 값이 자릿수보다 크므로 모자라는 자릿수에 0을 첨부하여 표시한다.

Built

Sun, 10 Jan 2021 00:00:00 +0000

Built

Built-in (빌트인)

빌트인이란? 값 타입, 연산자, 오브젝트(object)를 사전에 만들어 놓은 것이다.
장점 사전 처리를 하지않고 즉시 사용이 가능하다.
빌트인 값 타입은 아래와 같다.
Undefined, Null, Boolean, Number, String, Object
빌트인 연산자(opeartor) +, - ,*, /, %, ++, --, new

Built-in Object

Number 오브젝트
123과 같은 숫자, 상수, 지수를 처리한다.

String 오브젝트
“ㄱㄴㄷ”와 같은 문자열을 분리 또는 연결한다.

Boolean 오브젝트
true, false

Object 오브젝트
{ key : value } 형태의 프로퍼티를 처리한다.

Arrat 오브젝트
[1, 2, “A”, “가나다”] 형태(대괄호)

Function 오브젝트
function abc(){} 의 함수 형태

Math 오브젝트
abs()(절대값), round()(반올림) 등의 수학계산을 한다.

Date 오브젝트
연월일, 시분초를 나타낼 수 있다.

JSON 오브젝트
서버와 통신하는 데이터 형태를 지원하는 오브젝트이다.
[{“name”} : “value”]의 형태
서버와 데이터 송수신에 사용된다.

RegExp 오브젝트
^, &와 같은 정규 표현식

글로벌 오브젝트
다른 오브젝트들과 성격이 조금 다르다.
소스 파일 전체에서 하나만 존재한다.
모든 코드에서 공유하고 접근할 수 있다.
전역 객체라고도 한다.

Object

Mon, 14 Dec 2020 00:00:00 +0000

오브잭트(Object)

Property (프로퍼티) {name : value} 형태 ES5에선 name과 key 값을 구분하지 않아도 되지만, ES6에선 구분해줘야한다.
name에 프로퍼티 이름/키를 작성한다. 따옴표 작성은 생략해도 괜찮다. 작성하지 않아도 문자열로 간주하기 때문이다.
```
  var book = {
      title : "책"
  };
```

value에 JS에서 지원하는 타입을 작성한다, String, Number, boolean, object, function…

  var book = {
      //object start
      title : "책", //string
      poinit: { //object
          ten : 10, // number
          bouns: 200, // number
          promotion: function(){} //function
      }
  };

오브젝트를 객체라고도 부르지만 뉘앙스가 좀 다르다.
오브젝트는 name과 value처럼 실체가 있지만 객체는 실체가 없는 경우도 있다.

프로퍼티 추가 및 변경

오브젝트에 프로퍼티 추가, 변경
```
  var obj = {};
  obj.abc = 123;
```
obj 오브젝트에 프로퍼티 이름으로 abc가 없다면 abc:123이 추가 되고,
abc가 있으면 프로퍼티 값이 123으로 변경된다.

작성 방법

  var book = {};
  book.title = "JS책";
  log(book);
  // 실행결과 : {title : JS책}

  var book = {};
  book["title"] = "JS책";
  log(book);
  // 실행 결과 : {title : JS책}

  var book = {title: "JS 책"};
  var varName = "title";
  book[varName] = "HTML 책";
  log(book);
  // 실행 결과 : {title : HTML 책}

프로퍼티 이름을 변수에 작성하고 이를 사용한다, title 프로퍼티 이름이 있으므로 프로퍼티 값이 HTML 책으로 변경된다.

Object 프로퍼티 열거

프로퍼티 값 추출

오브젝트에서 프로퍼티의 값 추출 var obj = {book: “책”};
var value = obj.book;
obj 오브젝트에 프로퍼트 이름인 book이 있으면 프로퍼티 값을 반환한다.
book이 없으면 undefined 를 반환한다.
```
var obj = {book : "책"};
log(obj.book);
log(obj["sports"]);
// 실행결과 : 책
// 실행결과 : undefined
```
book 이라는 프로퍼티 값이 존재하므로 프로퍼티 값인 “책”을 반환한다.
sports 라는 프로퍼티 값이 없으므로 undefined가 반환된다.

for~in 문

오브젝트에서 프로퍼티를 열거한다.
형태 : for(변수 in 오브젝트) 문장;
for(표현식 in 오브젝트) 문장;
```
var sports = {
  soccer : "축구",
  baseball : "야구"
};
for(var item in sports){
  log(item);
  log(sports[item]);
}
// 실행결과 : soccer, 축구, baseball, 야구
```
프로퍼티 이름이 item에 설정된다.(하나만 설정되는게 아니라 object 안에 있는 모든 프로퍼티)
sports[item]으로 프로퍼티의 값을 구한다.
ES3에선 프로퍼티를 작성한 순서대로 읽혀진다는 것을 보장하진 않는다. 그러나 ES5부터는 작성된 순서대로 읽혀진다.

Javascript 문장(Statement)

Tue, 24 Nov 2020 00:00:00 +0000

Javascript 문장

1. if

형태 if(표현식) 문장1 if(표현식) 문장1 else 문장2

조건에 따른 처리

표현식 평가
평가 결과 true / false 로 변환
true면 문장 1 실행

false면 문장 2 실행

  var a = 1, b = 1;
  if(a === b){ //문장 1
 log("블록사용");
  }
  // 결과 값 : 불록사용

  var a = 1, b = 2;
  if(a === b){
 //문장 1
 log("블록사용, true");
  }else{
 //문장 2
 log("블록사용, false");
  }
  //결과 값 : 블록사용, false

2. debugger

브라우저 개발자 도구 창이 열려있을 때만 멈춘다.
ES5부터 지원한다.
break point를 주의 깊게 보자. 해당 버그로 이동시켜준다.

3. While

형태 : while(표현식)
표현식의 평가결과가 false가 될 때까지 문장을 반복하여 실행한다.
반복이 종료되는 조건이 필요하다.

var k = 1;
while(k < 3){
    log(k);
    k++; 
}; 
//결과 값 : 1
//        2

k는 1이므로 평가결과가 true로 log에 1이 입력된다.
그 후 k++로 인해 k+1 이 되고 k는 2가 된다.
k는 2 이므로 평가결과가 true가 되어 logdp 2가 입력된다.
반복해서 k가 3이 되면 평가결과가 false가 되므로 문장이 종료된다.

4. do ~ while

형태 : do 문장 while(표현식)
처리 방법은 while문과 같다. 단, do 문을 먼저 실행한다.

var k = 0;
do{
    log("do :", k);
    k++;
}while(k < 3){
    log("while :", k);
};
// 결과 값
// do: 0
// do : 1
// do : 2
// while: 3

제일 먼저 do문을 실행한다. do: 0이 출력된다.
while 문의 표햔식을 평가한다. true일시 do문을 실행한다. -> 반복
false일시 while문의 블록을 실행한다.

for()

형태 : for (초기값 opt; 비교 opt; 증감 opt) (괄호 안은 옵션이기 때문에 안 써도 무방하다.)
2번째에 있는 비교 효현식이 true일 동안 반복 실행한다.
```
  for(var k = 0; k < 2; k++){
      log(k);
  }
  // 결과 값 : 0
  // 1
```
[해설]
1. var k = 0; 초기값을 할당한다. 처음 한 번만 실행된다.
2. k < 2; 비교 결과가 true이면 for()블록 코드를 실행한다.
3. 처음은 k가 0 이므로 true가 되어 블록에 console을 실행한다.
4. k++ 로 넘어가서 k 변수값을 1 증가시킨다.
5. 다시 2번부터 실행된다. k가 2가 되면 false가 되어 실행 종료된다.

for() 옵션(opt)

for (초기값 opt; 비교 opt; 증감 opt)
opt는 생략 가능하다.
- 증감 생략
```
  for(var k = 0; k < 3;){
  log(k);
  k++
  }
  //결과 값 : 0, 1, 2
```
  증감식 옵션이 아닌 블록에서 변수 값을 증가 시켰다.
- 초기값과 증감 생략
```
  var k = 0;
  for(; k < 3){
      log(k);
      k++
  }
  // 결과 값 : 0,1,2
```
  1. 초기값은 작성하지 않아도 옵션에 ;를 적어줘야 한다.
  2. for문 앞에 변수 할당
  3. 증감식은 블록에서 실행
- 비교와 증감 생략
```
  for(var k = 0; ;){
      log(k);
      k++;
      if(k < 2){
          break;
      };
  };
```
  옵션을 생략하더라고 ;는 작성해야한다.
  프로그램 코드는 심플한게 최고이기 때문에 이런 코드 방식은 지양하자.
- 모두 생략
```
  var k = 0;
  for(;;){
  log(k);
  if(k<2){
      break;;
  };
  k++;
  }
```
  이렇게 모두 생략해서 작성해도 되지만,
  이런방식은 지양하자.

for() coding test

조건
1~50까지 수에서 짝수를 정렬하고 짝수끼리의 합을 구하라
1~50까지 수에서 홀수를 정렬하고 홀수끼리의 합을 구하라

<p id="even"></p>
<p id="odd"></p>

//짝수
var even = 0;
for(var i = 1; i <= 50; i++){
  if(i % 2 === 0){
    even += i;

    document.write(i + '<br/>'); // 짝수 리스트 출력
    document.getElementById('even').innerHTML = even; //짝수의 합 출력
  }
};

//홀수
var odd = 0;
for(i = 1; i <= 50; i++){
  if(i % 2 != 0){
    odd += i;
   document.write(i + '<br/>'); // 홀수 리스트 출력
   document.getElementById('odd').innerHTML = odd; // 홀수의 합 출력
  }
}

break;

형태 : break; break 식별자;
반복문을 종료시킬 때 사용한다.
```
var k = 0, m = 0;
while(k < 3){
  m++;
  if(m === 2){
      break;
  };
  log(m)
};
//실행결과 : 1
```
변수 m이 1씩 증가하여 if문 조건에 맞는 2가 되었을때 break 문이 사용되며 반복이 중지된다.
이때 k의 값이 3보다 작아도 break가 실행됐기 때문에 더 반복하지 않고 끝난다.
for, for~in, while, do~while, swich 에서 사용된다.

continue

형태 : continue; continue 식별자;
반복문의 처음으로 분기된다.

for(var k = 0; k < 5; k++){
    if(k === 2 || k === 3){
        continue;
    };
    log(k);
}
// 실행 값 : 0, 1, 4

k가 2 또는 3이면 continue문을 실행한다.
continue가 실행되면 consol.log(k)를 실행하지 않고 바로 k++로 간다.

for, for~in, while, do~while에서 사용된다.

swich

형태 :

  swich(표현식){
      case 표현식 : 문장 리스트 opt
      default : 문장 리스트 opt
  };

switch 표현식의 평가 값과 일치하는 case문을 수행한다. ```js var exp = 1; switch(exp){ case 1: log(100); case 2: logo(200); };

// 실행 값 : 100, 200

`switch`의 평가값은 exp로 1이다. 그러므로 case 1을 수행하여 100이 나온다.  
주의할 점은 case1 아래의 모든 문장도 수행된다는 점이다.  
이를 방지하려면 `break`를 작성해야한다.

* 일치하는 case가 없을 땐 `default` 실행
```js
var exp = 7, value;
switch(exp){
    case 1:
        value = 100;
    default:
        value = 700;
    case 2:
        value = 200;
};
//결과 값 : 200
log(value);

switch의 값이 7이므로 일치하는 case가 없기 때문에
default 값을 실행한다. default 뒤에 이어진 case2도 이어 실행되기 때문에 값은 200이 된다.

OR(||) 형태

var exp = 3;
switch(exp){
  case 2:
  case 3:
      log(100);
};
//실행 값 : 100

exp 값이 2 또는 3이면 case 가 실행된다.

try-catch

형태 : try 블록 catch(식별자) 블록
try 블록 finally 블록
try 블록 catch(식별자) 블록 finally 블록
try문에서 예외 발생을 인식한다.
예외가 발생하면 catch 블록을 실행한다.
```
var value;
try{
  value = ball;
}catch(error){
  log("catch 실행");
};
// 실행 값 : catch 실행
```
에러가 발생할 가능성이 있으면 반드시 try-catch를 사용해야 한다. try 블록에서 ball 변수가 존재하지 않으므로 에러가 발생한다.
에러가 발생하면 catch(error) 블록을 실행한다.
finally 블록은 예외 발생과 관계없이 실행된다.
```
var sports;
try{
  sports = ball;
  }catch(error){
      log("catch 실행");
  }finally{
      log("finally 실행");
  };
  //실행 값 : catch 실행, finally 실행
```
에러가 발생해 catch 블록을 실행한 후에 finally 블록을 실행한다. 만약 에러가 나지 않아도 finally 블록은 실행된다.

throw

형태 : throw 표현식;
명시적으로 예외를 발생시킨다.
예외가 발생하면 catch를 실행한다.
```
try{
  throw "오류 발생시킴";
  var sports = "스포츠";
}catch(error){
  log(error);
  log(sports);
}
// 실행 값 : 오류 발생시킴, undefined
```
throw 표현식에 문자열을 작성했다.
throw를 만나면 에러가 발생하고 catch 블록이 실행된다. 이때, throw 아래의 코드는 몇 줄이 있든 실행되지 않는다.
따라서 sports 변수의 값이 undefined가 된것이다.

try{
    throw{
        msg: "예외 발생시킴",
        bigo: "임의의 이름 사용"
    };
}catch(error){
    log(error.msg);
    log(error.bigo);
};
// 실행 값 : 예외 발생시킴, 임의의 이름 사용

try{
    throw new Error("예외 발생시킴");
}catch(error){
    log(error.message);
};
// 실행 값 : 예외 발생시킴

new 연산자는 새로운 object를 만드는 것이다.

strict 모드

형태 : “use strict”
엄격하게 JS문법 사용의 선언이다.
작성한 위치부터 적용된다.

ES5부터 지원된다.

"use strict";
try{
  book = "var를 선언하지 않음";
  log(book);
}catch(error){
  log(error.message);
}
// 결과 : book is not defined

Javascript 함수

Mon, 16 Nov 2020 00:00:00 +0000

함수(Function)

function

특정 기능을 처리하는 자바스크립트 코드의 묶음이다.

// 형태 1
function book(){
  var title = "js 책";
};
// 형태2
var point = function(one, two){
  var total = one + two;
  var bonus = total + 100;
}

함수의 구성요소

function 키워드
함수 이름
파라미터
- 매개변수, 인자, 아규먼트로도 부른다.
- 파라미터의 작성은 선택이다.
함수 Body
- 중괄호{} 안에 작성한 코드
- 함수코드, 소스 텍스트로도 부른다.
- 함수코드 작성은 선택이다.

함수의 이름 규칙

첫 문자
- 영문자, $, 언더바(_) : 사용가눙
- 숫자, &, *, @, + : 사용 불가
함수 이름 작명권장법
- 함수 코드를 읽지 않더라도
- 함수 이름과 파라미터로 기능을 알 수 있도록
- 시맨틱(의미, 뜻)을 부여하여 작명한다.

호출받는 함수

함수는 호출되어야 실행된다.
호출받는 함수 함수가 호툴되었을 때 실행되는 함수이다.
함수라고 하면 호출받는 함수를 지칭한다.
파라미터 호출한 함수에서 넘겨준 값을 받는다.
(one, two) 처럼 소괄호() 안에 파라미터 이름을 작성한다.

함수 호출

함수() 형태로 호출된다. 함수 이름과 소괄호()를 작성한다. 소괄호가 없으면 호출되지 않는다.
파라미터 호툴된 함수에 넘겨줄 값을 작성한다.
소괄호 안에 작성한다. JS에서 지원하는 타입을 작성한다.
콤마(,)로 구분하여 다수 작성 가능하다.

//호출받는 함수
function setValue(one, two){
    var total = one + two;
};
setValue(10, 20);

먼저 호출 받는 함수를 작성한다. 함수를 호출하며 파라미터 값 10,20을 호출받는 함수에 넘겨준다.
호출된 함수에서 10->one, 20->two에 설정한다. 즉, 왼쪽에서 오른쪽으로 설정된다.
그리고 setValue() 함수를 실행시킨다. 보통 호출받는 함수를 위에 작성하고 함수 호출을 아래에 작성한다. 이를 함수 라이프싸이클이라 한다.

return

형태 : return 표현식opt;
표현식의 평가 결과가 반환된다.
```
function getPoint(){
  return 10 * 30;
};
var result = getPoint();
log(result);
// 결과 값 : 300
```
먼저 getPoint() 함수를 호출한다.
return의 오른쪽 표현식(10*30)을 평가한다. 그리고 평가결과 300을 반환한다.
300을 가지고 getPoint()로 돌아간다.
300을 return 변수에 할당한다.
여기서 return을 작성하지 않으면 undefined 값을 반환한다.
return과 표현식을 한 줄에 작성해야 한다.
```
  // 실행됨
  return blha blha;
  //실행안됨
  return
  blha blha;
    
```
한줄에 작성하지 않으면 return 끝에는 세미콜론이 자동으로 첨부가 되어버린다. 그러면 return 뒤에 오는 표현식을 수행하지 않게 된다.

Javascript 연산자(Operator)

Mon, 16 Nov 2020 00:00:00 +0000

자바스크립트 연산자(Operator)

연산자의 사전적 의미?
규칙에 따라 계산하여 값을 구함

연산자 형태

+, -, *, /, %
>, >=, <, <=
==, !=, ===, !==
콤마(,), typeof, delete, void
instanceof, in, new 등

자바스크립트 표현식(Expression)

표현식 형태

1 + 2
var total = 1 + 2; 1 + 2 는 표현식을 평가한다고 한다.
1 + 2 = 3 에서 3은 평가 결과 라고 한다.

자바스크립트는 표현식의 연결이다.

할당 연산자

단일 할당 연산자
- = 하나만 사용한다.
- var result = 1 + 2;
  왼쪽에서 오른쪽으로 계산한다. result 의 값은 3이 된다.
복합 할당 연산자
- = 앞에 연산자를 작성한다.
- +=, -=, *=, /=, %=
  <<=, >>=
  >>>=, &=, ^=, |=
- 복합 할당 연산자는 = 앞을 먼저 연산한 후, 변수에 할당한다.
```
 var point = 7;

 point += 3;
 // 7 + 3 = 10
 // 10을 포인트에 할당한다. 고로 point의 최종 값은 10이다.
```

산술 연산자

+ 연산자

평가 결과를 더한다.

var value = 1 + 2 + 4;
log(value);
 // 1 + 2 + 4
 //결과 값 : 7

평가 결과를 연결한다. 한 쪽이라도 숫자(number)가 아니면 연결한다.

var two = "2";
var value = 1 + two;
log(value);
log(typeof value);

// 12 (숫자 1과 문자 2가 연결되어 12)
// String

var value = 1 + 5 + "ABC";
log(value)

// 결과 값 : 6ABC

숫자로 변환

자바스크립트는 연산하기 전에 우선 숫자로 변환하려고 시도한다.

값 타입	변환 값
Undifined	NaN
Null	+0
Boolean	true : 1, false: 0
Number	변환 전 / 후 같음
String	값이 숫자이면 숫자로 연산 단, 더하기(+)는 연결

예제 1

var value;
log(10 + value);

//결과 값 : NaN

위의 코드를 보면 변수 value의 값은 undifined 이나 자바스크립트는 값을 숫자로 변환하는 것을 시도하기 때문에 NaN 으로 나온다.

예제2

log(10+Null);
//결과 값 : 10
log(10 + true);
//결과 값 : 11
log(10 + false);
//결과 값 : 10

Null은 0으로 변환
true는 1로 변환, false는 0으로 변환이다.

예제3

log(10 + "123");
//결과 값 : 10123
log(123 - "23");
//결과 값 : 100

더하기(+)는 값이 숫자라도 타입이 String이면 문자열로 연결한다.
그러나 -, *, /는 숫자로 변환하여 연산한다.

-(빼기) 연산자

String 타입이지만 값이 숫자이면 Number 타입으로 변환하여 계산한다.

log("125 - 2");
//결과 값 : 123

이처럼 "125" 는 String 타입이지만 값이 숫자이므로 Number 타입으로 변환하여 계산된다.

*(곱하기) 연산자

빼기 연산자와 마찬가지로 숫자 값으로 변환할 수 있으면 변환한다.

양쪽의 평가가 하나라도 숫자가 아닐때 NaN을 반환한다.

  log(10 * "20"); //결과 값 : 200
  log(10 * true); //결과 값 : 10
  log(10 * false); //결과 값 : 0
  log(10 * null); //결과 값 : 0
  log(10 * "A"); //결과 값 : NaN

소수 값이 생기는 경우 처리
```
  log(2.3 * 3);
  //결과 값 : 6.8999999999999995
```
2.3 * 3의 값은 6.9로 출력되지 않는다.
이는 정상이며 IEEE 754 유동 소수점 처리 때문이다.

이를 해결하기 위해선 실수를 정수로 변환하여 값을 구한 뒤
다시 정수를 실수로 변환하는 방법이다.
```
  log(2.3 * 10 * 3 / 10);
  // 2.3 * 10 = 23
  // 23 * 3 = 69
  // 69 / 10 = 6.9
  // 결과 값 : 6.9
```

/ (나누기) 연산자

NaN 반환

양쪽의 평가결과가 하나라도 숫자가 아닐 때

분모, 분자 모두 0일 때
분모가 0일 때 : Infinity 반환
분자가 0일 때 : 0 반환

log(10 / 2); //결과 값 : 5
log(10 / "2"); //결과 값 : 5
log(10 / "A"); //결과 값 : NaN
log(10 / 0); //결과 값 : Infinity
log(0 / 10); //결과 값 : 0

% (나머지) 연산자

왼쪽 표현식 평가 결과를 오른쪽 표현식 평가 결과로 나누어 나머지를 구한다.
```
log(5 % 2.5); //결과 값 : 0
log(5 % 2.3); //결과 값 : 0.40000000000000036
```
소수 끝 36을 없애려면 실수를 정수로 변환하여 연산 후 다시 정수를 실수로 변환해야 한다.
```
log((5 * 10 - (2 * 2.3 * 10)) / 10); //결과 값 : 0.4
```

단항 연산자

1. 단항 + 연산자

형태 : +value (+변수)
값을 Number 타임으로 변환시킨다.

var value = "7";
log(typeof value); //결과 값 : String
log(typeof +value); //결과 값 : Number

이와 같이 타입을 Number 타입으로 변경시켜준다.
좀더 가독성이 좋은 Number()도 같은 기능을 가진다.

log(typeof Number(value)); // 결과 값 : Number

2. 단항 - 연산자

형태 : -value
값의 부호를 바꾼다.
+ 👉 -
- 👉 +
값의 부호는 연산할 때만 변경된다. (원래 값은 변경 ❌)

var value = 7;
log(-value); // 결과 값 : -7
log(8 + -7); // 결과 값 : 1
log(value); // 결과 값 : 7

후치 ++연산자

형태 : value++
값을 자동으로 +1 증가시킨다.
세미콜론(;) 다음에 증가 시킨다.
```
var one = 1;
var value = one++ + 3;
log(value); // 결과 값 : 4
log(one); // 결과 값 : 2
```
++연산자는 세미콜론 다음에 증가를 시키기 때문에 value는 4가 된다.
one++은 문장을 수행하기 전이기 때문에 값이 증가되지 않고 여전히 1이기 때문이다.

전치 ++연산자

형태 : ++value
값을 자동으로 +1 증가시킨다.
문장 안에서 1을 증가 시킨다.
```
  var one = 1;
  var value = ++one +3;
  log(value); //결과 값 : 5
```
++연산자는 표현식 평가 전에 1이 증가된다.
세미콜론 전에 증가를 시키기 때문에 표현식에서 증가된 값을 사용한다.

후치 –연산자

형태 : value–
값을 자동으로 -1 감소 시킨다.
세미콜론(;) 다음에 감소 시킨다.
```
  var two = 2;
  var value = 2-- + 3; 
  log(value); //결과 값 : 5
  log(two); //결과 값 : 1
```
후치 ++연산자와 마찬가지로 문장을 수행한 후에 감소시키기 때문에 value의 값은 2 + 3 으로 5이다.

전치 –연산자

형태 : –value
값을 자동으로 -1 감소 시킨다.
문장 안에서 1을 감소 시킨다.
```
      var two = 2;
      var value = --two + 3;
      log(value); // 결과 값 : 4
```
--연산자는 표현식 평가 전에 1이 감소된다.
세미콜론 전에 감소를 시키기 때문에 표현식에서 감소된 값을 사용한다.

!연산자

형태 : !value
논리 NOT 연산자

NOT 연산자는 피연산자가 단 하나뿐인 단항 연산자이다.

표현식 평가 결과를 true or false로 변환한 후
true ➡ false
false ➡ true 로 반환한다.

  var value = true;
  log(!value); // 결과 값 : false
  log(!!"A"); // 결과 값 : true

유니코드

세계의 모든 문자를 통합하여 코드화 시킨 것이다.
언어(Language), 🙈🙉🙊이모지(Emoji) 등
코드 값을 코드 포인트라도 부른다.
표기 방법
- 1. u와 숫자 형태 : u0031 ➡ 숫자 ‘1’
- 1. Javascript 표현법 : u 앞에 ‘'
    log("\u0031"); //결과 값 : 1

ES6에선 다섯자리의 코드 값을 지원한다. (원래는 네자리만 지원)

UTF

Unicode Transformation Format 의 약자이다.
유니코드의 코드 포인트를 매핑하는 방법이다.
UTF-8, UTF-16, UTF-32 로 표기 된다.
➡ HTML 작성시 표기법
utf-8은 8비트로 코드 포인트를 매핑했다는 뜻이다. 8비트 인코딩이라고 부른다.

괸계 연산자

작거나 큰걸 비교하는 연산자 (<, >, <=, >=)
instanceof 연산자
in 연산자

1. > 연산자

양쪽이 Number 타입일 때 왼쪽이 오른쪽 보다 크면 true
왼쪽이 오른쪽 보다 작으면 false
```
log(1 + 2 > 1); //결과 값 : true
```
String 타입 비교 한 쪽만 String 차입이면 false 양쪽이 모두 String 타입이면 유니코드 사전 순서로 비교한다.
<, >, <=, >= 는 비교 기준만 다르다.

== 연산자

양쪽의 값이 같으면 true 다르면 false
데이터 타입은 비교하지 않는다.
```
log(1 === "1"); // 결과 값 : true
```
String 타입을 Number 타입으로 변환하여 비교하기 때문에 같다.
```
var value;
log(value == null); //결과 값 : true
```
value는 undefined로 타입이 다르지만 값이 같으므로 true가 반환된다

!= 연산자

양쪽의 값이 다르면 true 같으면 false
a != b 와 !(a == b) 는 같은 뜻이다.

=== 연산자

양쪽의 값과 타입이 모두 일치하면 true 하나라도 다르면 false
```
  log(1 === 1); //결과 값 : true
  log(1 === "1";) // 결과 값 : false
```
주의하기! 📢
```
var value;
log(value == null); //결과 값 : true
log(value === null); //결과 값 : false
```
undefined 와 null은 값이다.
== 연산자로 비교하면 true, === 연산자로 비교하면 타입이 다르므로 false가 뜬다. 주의해서 사용하도록 하자.

!== 연산자

양쪽의 값 또는 타입이 다르면 true
하나라도 같으면 false

콤마(,) 연산자

콤마로 표현식을 분리한다.
```
var a =1,
  b = 2
```

() 연산자

그룹핑 연산자.

소괄호 안의 표현식을 먼저 평가한다.

var number = 5 / (2 + 3); // 결과 값 : 1

|| 연산자

논리 OR 연산자
표현식 안에 평가 결과가 하나라도 true면 true 아니면 false가 된다.
```
var value, zero = 0, two = 2;
log(value || zero || two); //결과 값 : 2
```
value의 값은 undefined로 false
zero의 값은 0 이므로 false (주의❕ 0은 false이다. 0제외는 true)
two의 값은 2 이므로 true이므로 two의 변수값 2를 반환한다.

true면 true가 아니라 true가 된 변수의 값을 반환한다.
```
var value, zero = 0;
log(value || zero); // 결과 값 : undefined
```
이 경우는 결과가 모두 false일때의 결과이다.
모두가 false이면 false가 아닌 마지막 변수의 값을 반환한다.
고로 마지막 변수인 zero의 값을 반환하여 결과 값이 undefined가 된다.
왼쪽의 결과가 true 이면 뒤(오른쪽)는 비교하지 않는다.
```
var one = 1;
log(one === 1 || two === 2); //결과 값 : true
```
왼쪽의 결과 값이 이미 true가 나왔기 때문에 오른쪽 결과값은 비교하지 않는다.
만약 비교를 하게 된다면 two 변수는 존재하지 않기 때문에 error가 뜰것이다.

&& 연산자

논리 AND 연산자
표현식의 표현결과가 모두 true면 true 아니면 false
```
var one = 1, two = 2;
log(one && two); // 결과 값 : 2
```
모두 true일 경우, 마지막 변수의 값을 반환한다.
왼쪽 결과가 false 이면 오른쪽은 비교하지 않는다.
```
var one = 1, zero = 0;
log(one && zero && nine); // 실행 결과 : 0
```
변수 one과 zero를 비교했을때 true와 false 이므로 false가 된다.
왼쪽 결과가 이미 false이기 때문에 nine은 평가하지 않는다.
마지막 변수인 zero의 값을 반환한다.

조건 연산자

삼항 연산자라고도 부른다.

exp ? exp-1 : exp-2 exp 위치의 표현식을 먼저 평가한다.
true ➡ exp-1 값 반환
false ➡ exp-2 값 반환

log(1 === 1 ? "같음" : "다름"); //결과 값 : 같음
log(1 === "1" ? "같음" : "다름"); //결과 값 : 다름

연산자 우선 순위

MDN 홈페이지 참조

Git 사용법

Thu, 12 Nov 2020 00:00:00 +0000

내가 보기 좋으라고 작성하는 🛠

Git 사용법

들어가기 전에…

난 회사내에선 smartGit과 Git Bash 를 사용했다.
스마트깃의 경우 사용방법이 간단하기때문에 이 포스팅에선 패스를 하고 Git Bash 와 터미널을 통한 깃 사용법을 작성할 예정이다.

1. Git 초기 설정

설정시 터미널이나 git bash 중 편한 걸로 작업해주세요.

1-1 [email 과 user name 등록하기]

// user name
git config --global user.name "이름"

// user email
git config --global user.email "이메일"

깃 Repository에 파일을 올리기 (commit) 위해선 Author, Committer에 대한 정보가 필요하다. 해당 정보가 없을 시엔 정보를 세팅해달라는 에러 메세지가 뜨니 커밋하기 전에 user 정보가 제대로 등록되어 있는지 확인해 보자.

//유저 이름 확인
git config user.name

//이메일 정보 확인
git config user.email

1-2 [Repository 만들기]

깃허브 홈페이지로 가서 Repository를 새로 추가한다.

1-3 [Repository와 연동]

로컬저장소에 디렉토리 생성하기 (폴더 생성) 프로젝트를 관리할 폴더를 하나 만들어 준다.
```
  cd 생성한 로컬저장소 경로
```
git bash 사용시 생성한 파일 오른쪽 마우스 클릭 후 git bash here 선택
로컬저장소 경로에서 로컬 git을 생성해준다.
```
  git init
```
최상위 경로에 📁.git 폴더가 생겼으면 끝!
가끔 폴더가 숨김폴더로 되어 있을 수도 있으니 숨김폴더 보이게끔 설정해보자.

로컬저장소와 Repository 연동 로컬저장소에서 변경된 내용을 Repository로 올리거나 받기 위해서는 연동을 시켜주어야 한다.

[그림] Repository 주소 복사

  git remote add {주소이름} {주소}
    
  // 예시
  // origin 이라는 이름을 주고 주소를 연결해준것이다.
  git remote add origin https://github.com/haerim95/haerim95.github.io.git

연결 확인법

  git remote -v

1-4 [로컬저장소 파일 Repository에 올리기]

먼저 변경된 파일의 리스트들을 살펴보자

git status

해당 명령어를 입력하면 추가되거나 변경,삭제된 파일들의 리스트가 뜰 것이다. 이 리스트를 보고 올리거나 올리지 않거나 하면 된다.

변경된 파일 전체 올리기
```
  git add .
```
특정 파일만 올리기
```
  git add <파일명>
```
변경사항 저장하기
```
  git commit -m "커밋 메세지"
```
”” 안엔 변경사항에 대한 내용을 간략하게 적어주면 된다.
ex) git commit -m “css 파일 수정”
github repository에 변경사항 올리기
```
  git push origin master
```
만약 Repository를 생성하고 처음하는 commit 이라면 아이디와 비밀번호를 입력하라고 나올 것이다. 그땐 github의 아이디와 비밀번호를 입력하면 된다.

지금까지 로컬저장소와 Git Repository 연동 방법을 알아보았다.
그러나 꼭 이 순서대로 해야하는 건 아니다. 어떤 사람은 파일을 먼저 올려놓고 push 전에 remote 를 해주는 경우도 있다. 이건 알아서 편한대로 하자.

2. 📄.gitignore

변경사항을 Repository에 올릴때 필요없는 파일까지 올라가는 경우가 있다. 그럴경우 로컬저장소 최상위 경로에서 .gitignore 파일을 만들어서 깃에 안 올릴 파일을 설정해주면 된다.

실제로 난 jekyll 세팅을 할때 .gitignore에 jekyll cache 등을 입력해주지 않아 add 후 status를 확인했을때 당황했던 적이 있다… 잊지말고 작성해주도록 하자.

.gitignore 같은 경우는 구글링을 하면 다른 사람들이 작성해놓은 리스트들이 많다. 찾아보고 맞는 걸 이용하자.

3. 변경된 내용 받기

내가 A 컴퓨터에서 작업 후, 작업 내용을 git Repository에 올린다음 B 컴퓨터에서 이어서 작업할 때… 어떻게 작업할까?

3-1 [다른 컴퓨터에서 처음 작업할때]

처음 다른 컴퓨터에서 이어서 작업하고 싶다면 clone 을 사용해야한다.

일단 그 전에 어느곳에 로컬저장소를 위치할지 정해주자.

git cd <로컬 저장소를 둘 위치>

그리고 clone을 해준다.

git clone <주소>

//예시
git clone https://github.com/haerim95/haerim95.github.io.git

이러면 이제 해당 위치에 로컬저장소가 생긴다.
git init도 자동으로 된다.

3-2 [데이터 갱신할 때]

처음 작업하는 것이 아닌데 내가 A 컴퓨터에서 작업 후 B 컴퓨터로 이어서 작업할때 데이터를 받는 방법이다.

git pull origin master

or

git pull <주소이름> master

origin은 주소이름이다. 만약 처음 repository를 등록할때 주소 이름을 origindl 아닌 chicken 으로 저장했다면 <주소이름> 영역에 chiken을 입력해줘야 한다. `git pull chicken master` 가 되는 것이다.

그런데 대부분 주소이름을 origin으로 만들기 때문에… 참고만 해두자

Javascript Data Type

Thu, 05 Nov 2020 00:00:00 +0000

Data Type

0 데이터 타입 형태

숫자 타입 : var value = 123;
문자 타입 : var value = "일이삼";

Data Type을 반환하고 싶다면?

typeof 연산자 사용 typeof 연산자와 같이 특별한 기능을 가진 단어를 키워드(ketword)라고 부른다.

    var point = 123;
    log(typeof point);

    var book = "책";
    log(typeof book);

[실행결과]

Number  
String

0-1 데이터 타입

데이터 타입은 자료형 이라고 표기하기도 한다.

Data는 반드시 Type을 갖는다.
데이터 타입에 따라서 javascript가 처리하는 방법, 혹은 에러가 생길 수 도 있다.

0-2. 데이터 타입 분류

언어 타입과 스펙 타입 두 가지로 나눠지는데
개념만 한 번 읽어보면 좋을 듯 싶다.

언어타입	스펙타입
JS 프로그램에서 사용할 수 있는 타입	언어 알고리즘을 위한 타입 (JS에서 사용 불가)
Undefined, Null, Boolean, String, Number, Object	Reference, List, Completion, Property, Descriptor, Data Block, Lexical Environment, Lexical Record 등

1. Number Type

부호(+,-)를 가진 값
Number Type 의 특수한 값 3개
- NaN : Not-a-Number
  값이 숫자가 아닌 것을 나타내는 값이다. 자바 스크립트는 프로그램이 죽지 않게 하려는 성향이 강하므로 값이 나오지 않을때 NaN으로 값을 표가해준다
- Infinity : 양수 무한대
- -Infinity : 음수 무한대

2. String Type

문자 타입

3. Undefined Type

Undefined (대문자)	undefined (소문자)
스펙에서 사용	값

    var point;
    log(point);

[ 실행결과 ]

    undefined

변수에 값을 할당하지 않은 것을 나타내는 시맨틱
변수를 선언만 한 것으로 undefined가 초깃값으로 설정된다.

4. Null Type

Null (대문자)	null (소문자)
스펙에서 사용	값

기본적으로 Undefined와 유사해보인다. 차이점을 비교해보자.

null	undefined
값을 할당해야 나옴	값을 할당하지 않으면 나옴

    //1번
    var book;
    log(book);

    //2번
    var point = null;
    log(point);

[실행결과]

    //1번 결과값
    undefined  

    //2번 결과값
    null

5. Boolean Type

true / flase 형태의 타입. 오직 true와 flase 값만 갖는다.

6. Object Type

{name : value} 형태를 갖는다.
name과 vaule는 묶어서 property(프로퍼티) 라고 지칭한다.

    var book = {
        title: "책", point: 123
    };
    log(book);

위처럼 {} 안에 key:value 형태로 작성한다.
왼쪽 : 프로퍼티 key 또는 name
오른쪽 : 프로퍼티 값

따라서 Object는 프로퍼티 집합이다.

타입 정리

Primitive (프리미티브) Type

number type
string type
boolean type
undefined type

🤔 그런데 이상한 점!

    log(typeof null);
    log(typeof {book : "책"});

[실행결과]

    object;
    object;

null의 데이터 타입을 입력해보면 object 라고 뜬다. (ES5 기준)
ES6 에서 해당 해결방법이 나왔다고 하니 관련된 것은 나중에 다루겠다.

Javascript 다시 시작

Thu, 05 Nov 2020 00:00:00 +0000

Javascript 공부를 시작하며

퍼블리셔 업무를 2년 가까이 하면서 크고 작은 스크립트는 해결해 왔었다. (제이쿼리 포함)
구글링을 통해 어찌저찌 코드를 맞춰가다보면 액션이 실행됐고 그때문에 난 자바스크립트를 어느정도 할 줄 안다는 착각에 빠졌었다.
최근 유튜브 ‘제로초’ 님의 Vue 강좌를 보며 스크립트 조차 따라가기 버겁다는걸 깨달은 나는 뷰 공부를 일단 제껴놓고 스크립트에 대한 기초부터 다져가볼까 한다.

이 카테고리는 인프런 자바스크립트-비기너 강좌를 보며 게시글들을 작성할 예정이다.

작심삼일이 되지 않도록 화이팅! 🔥🔥🔥

vue 인스턴스

Mon, 07 Sep 2020 00:00:00 +0000

Vue 인스턴스

vue 애플리케이션은 Vue 함수를 사용하여 새로운 Vue 인스턴스를 만드는 것부터 시작한다.

    import Vue from 'vue'
    import App from './App.vue'

    new Vue({
        el: '#app',
        component: { App },
        template: '<App/>'
    });

vue 애플리케이션의 루트는 위와 같은 Vue 인스턴스로 구성된다.
이 루트를 기반으로 component들이 트리 형태로 위치한다.

[그림] component 구조 도식화

component란? 🤔

하나의 블록 안에 다른 블록들이 들어가 있는 부모-자식 구조다. 컴포넌트는 트리 구조를 형성한다. Vue 컴포넌트는 Vue 인스턴스를 가질 수 있다. 그러므로 인스턴스가 제공해주는 모든 기능을 전부 가지고 있다.

Vue 인스턴스 옵션

Vue 인스턴스 및 Vue 인스턴스가 확장된 컴포넌트에서 사용할 수 있는 데이터 기능 및 옵션

1. data 속성

    // 뷰 인스턴스
    const data = { a : 1};
    new Vue({
        data : data
    })

    //뷰 컨포넌트
    const myComponent = Vue.extend({
        name : 'MyComponent',
        data(){
            return { a : 1 };
        }
    })

[코드] data 속성 선언법

data 속성은 반응형 모델을 선언할때 사용한다.
반응형 모델이란, 어떤 액션으로 인해 값이 변경되었을 때 javascript, 사용자 view 에서 보이는 값도 연동되어 변경되는 것을 의미한다.
인스턴스가 생성된 후 this.$data로 접근할 수 있다.

vue 인스턴스는 데이터 객체 내부의 값을 프록싱(Proxying) 하므로 this.$data 와 this.a 는 같은 값이다.

프록시, 프록싱? 🤔

프락시 서버는 사용자가 요청을 보내고자 했던 서버로 대신 요청을 보내주는 역할을 한다. 접근하고자 하는 대상에 직접 접근하지 않더라도 프록시 구현체가 대상에 접근함으로써 접근 과정의 일부를 대신 처리해준다. 위에 설명한 this.a(Vue 인스턴스)에 접근함으로써 this.$data.a에 담겨있는 값에 접근할 수 있으므로 this.$data 내부의 값에 this가 대신 접근해준다 볼 수 있다. 즉 this.$data의 값을 this가 프록싱 해주고 있는 거다.

data 속성 선언 코드를 보면 Vue 인스턴스에서와 Vue 컴포넌트에서의 문법이 다른 것을 알 수 있다.

🔥 data 속성은 반드시 Object 지료형을 반환하는 함수로 선언되어야 한다.
javascript Object 자료형은 메모리에 저장된 값을 직접 가져오는 호출이 아닌 메모리에 저장된 주소 값을 가져오는 참조에 의한 호출이다.
따라서 data 속성을 일반 객체로 선언한다면 같은 주소를 참조하는 데이터들을 컴포넌트들이 공유하게 된다.

여러개의 컴포넌트 인스턴스들이 같은 객체를 참조해서 상태가 공유되는 것을 회피하기 위해 객체를 return 하는 함수를 써야하는 것이다.

값에 의한 호출, 참조에 의한 호출 💡

프로그래밍 언어에서 사용되는 호출 방식들이다. 어떤 함수에 값이 인자로 주어지거나 변수 어떤 값을 변수에 할당할 때 어떤 방식으로 호출되어 할당하느냐를 의미한다.

이부분은 C언어 이기때문에 나중에 따로 포스팅을 하겠다. 궁금하다면 호출 바로가기 에서 글을 읽어보자

2. Props 속성

    // String 배열
    Vue.component('MyComponent', {
        // 단순한 구문으로 표현하기
        props: ['size', 'myMessage']
    });

    //객체타입 지정
    Vue.component('MyComponent2', {
        props: {
            //타입만 체크할 경우
            height: Number,
            //타입 체크와 유효성 검사, 기본값 등을 추가로 지정할 경우
            width: {
                type: Numberm,
                required: true,
                default: 1,
                validator(value){
                    return value > 0
                }
            }
        }
    })

    <my-component :width="3" :height="3"></mycomponent>

[코드1] props 속성 선언법

props 속성은 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위해 사용된다.
원래 모든 컴포넌트 인스턴스에는 각자의 자체 격리된 범위(scope)가 있기때문에 하위 컴포넌트의 템플릿에서는 상위 데이터를 직접 참조할 수 없다. 그래서 props를 사용하여 하위 컴포넌트로 데이터를 전달하는 것이다.

스코프(Scope)? 🤔

변수에 접근할 수 있는 범위 스코프 종류에 따라 변수, 함수, 코드 등의 유효 범위가 달라질 수 있다. 관련 포스팅은 따로 할 예정이다.

그렇지만 상단의 [코드1] 은 동적(반응형) 바인딩이 아니라 상위 컴포넌트의 데이터가 변해도 하위 컴포넌트에는 반영되지 않는다. 만약 하위 컴포넌트 내부에서 props 데이터를 다뤄야 하는 경우 data 속성 내에서 해당 prop을 this로 접근하여 참조하도록 다시 선언하여 사용하거나 emit을 통해 부모 컴포넌트의 데이터를 변경해줘야 한다. (emit에 대해선 추후에 포스팅할 예정이다.)

Vue.component('MyComponent2', {
    props: {
        height : Number,
    },
    data(){
        return{
            dataHeight: this.height
        }
    }
})

[코드2] props 속성 동적(반응형) 사용법

3. computed 속성

computed는 계산된 데이터다. template 안에 표현식을 넣는 방법도 있지만, 복잡한 연산을 template 안에서 하다보면 유지보수하기 어려워진다. 복잡한 로직이라면 complate 속성을 사용하는게 좋다.

    // template 안에 표현식 사용
    <div id="example">
        
    </div>

[코드1] 템플릿 내부 표현식

    // computed 사용
    <div id="example">
        <p>원본 메세지 : ""</p>
        <p>역순 변환 메세지 : ""</p>
    </div>

    var vm = new Vue({
        el: '#example',
        data: {
            message: '안녕하세요'
        },
        computed: {
            //계산된 getter
            reversedMessage: function(){
                // this는 vm 인스턴스를 가리킵니다.
                return this.massage.split('').reverse().join('')
            }
        }
    })

[코드2] computed 사용 표현식

예제 결과

원본 메세지 : 안녕하세요
역순 변환 메세지 : 요세하녕안

위의 코드에서 data 속성인 message의 값을 변경한다면 computed 속성인 reversedMessage의 값도 변경된 message 값으로 함께 변경된다. 즉, computed는 data 값에 의존적이다.

computed의 장점은 종속 대상을 따라 저장(캐싱)된다는 것이다. 즉 위 코드에서 message 값이 변경되지 않는 한 reversedMessage를 여러번 요청해도 다시 계산하지 않고 이미 계산되어 있던 결과(저장된 값)를 즉시 반환한다.

즉, 쓸데없이 실행되지 않기 때문에 속도가 빨라진다. 또한 자신과 관련이 없다면 재실행 되지 않는다는 것이다.

4. method 속성

기본적으로 computed와 하는 일이 동일하다. 그러나 method는 template에서 호출시 ()를 적어주어야 한다.

<p id="example">뒤집힌 메세지 : "" </p>

 var vm = new Vue({
        el: '#example',
        data: {
            message: '안녕하세요'
        },
      method : {
          reverseMessage: function(){
              return this.message.split('').reverse().join()
          }
      }
    })

method는 computed와 하는 일이 기본적으로 같지만, computed와 다르게 method는 캐싱이라는 개념이 없기 때문에 매번 다시 렌더링된다.

method 🥊 VS 🥊 computed

둘은 vue 안에서 함수를 정의하고, 데이터가 변동됨에 따라 안에 있는 함수를 재호출한다.
둘의 차이점은 데이터가 변됭되는 것과 변동되지 않는 것에 있다.
만약 데이터가 자주 변동된다면 method, 그렇지 않다면 계속 캐시를 저장하는 computed를 사용하는 게 좋다.

5. watch 속성

watch 속성은 데이터 변화를 감지하여 자동으로 특정 로직을 수행한다.
computed와 유사하지만 computed는 내장 api를 사용하는 간단한 연산정도에 적합하고
watch는 데이터 호출과 같이 시간이 상대적으로 많이 소모되는 비동기 처리에 적합하다.

<div id="app">
  <input type="text" v-model="message">
  
</div>

var vm = new Vue({
  el: '#app',
  data: {
    message: '메세지!'
  },
  watch:{
    message: function(data){
      console.log('데이터가 갱신되었습니다. :' , data )
    }
  }
})

[코드2] watch 사용 표현식

watch는 감시할 데이터를 지정하고, 그 데이터가 변경되면 이런 함수를 실행하라는 방식으로 명령형 프로그래밍 방식이다.

watch 🥊 VS 🥊 computed

watch는 캐싱되지 않고 변수가 Obhect라도 deep 옵션을 통해 내부를 깊게 감시할 수 있다. 따라서 그 값을 사용하여 API 통신을 수행해 모델을 서버로부터 다시 받아와야 한다든가 하는 특정한 로직을 수행할 때 적합하다.
반면 computed는 한번 저장된 값은 캐싱되므로 어떤 변수들을 사용해 계산하기에 적합하다.

vue CLI로 생성된 환경을 알아보자

Fri, 04 Sep 2020 00:00:00 +0000

vue CLI 프로젝트 생성 후 환경

Vue 환경 세팅을 마쳤다면 자동으로 생성된 파일과 폴더를 볼 수 있을 것이다. 이 자동으로 생성된 파일들에 대해 알아보자! 👀

Vue Project를 성공적으로 생성했다면 이와 같은 구조의 파일, 디렉토리를 볼 수 있을 것이다.

파일 앞에 마침표(.)가 붙은 파일들은 Linux / Unix 기반의 운영체제에서 숨김 파일을 의미하므로 보이지 않을 수도 있다. 하지만 IDE로 해당 프로젝트를 불러오면 모두 노출된다.

자, 이제 파일 구조를 살펴보자.

* 순서는 위에 이미지 목록에 있는 순서이다.

1. 📁 build

이 디렉토리에는 Vue 프로젝트를 브러우저에서 실행할 수 있게끔 빌드하기 위해 작성된 파일들이 위치한다.

2. 📁 config

config 디렉토리엔 설정에 필요한 여러 가지 상수들이 선언되어 있다.
크게 나누면 dev 속성과 build 속성이 있다.

dev 속성	bulid 속성
개발환경에서 사용하는 상수	개발완료 후 애플리케이션을 빌드할때 사용하는 상수

3. 📁 node_modules / 📄 package.json

node_modules에는 사용자가 npm을 통해 설치한 패키지들이 위치하고 있다.
설치한 패키지들은 pakage.json 이라는 파일을 통해 관리하게 되는데, vue CLI는 필요한 패키지들을 초기 설정시 설치해주기 때문에 따로 원하는 패키지가 없다면 새롭게 설치할 필요가 없다.

4. 📁 src

src 에는 애플리케이션의 소스가 위치하게 된다.
애플리케이션이 동작하는데 필요한 대부분의 소스는 이 디렉토리 안에 존재한다.
main.js, App.vue, assets, router, component 기본적으로 세팅되는 5가지의 파일이다.

4-1. 📁 assets

애플리케이션에서 사용되는 정적 리소스들이 위치한다. 뒤에 설명할 static 디렉토리(5번)와 다른점이 있다면 이 디렉토리에 위치하는 리소스들은 빌드 시 Webpack이 처리하게 된다.
프로젝트 진행시 정적 리소스를 static에 위치할 것인지 assets에 위치할 것인지에 대한 판단이 필요하다.

4-2 📁 component

Vue 컴포넌트들이 위치하게 된다.

component?

하나의 독립적인 기능을 가지고 있는 단위 모듈.

4-3 📁 router

Vue의 공식 라이브러리인 Vue Router의 코드가 위치하게 된다.
사용자가 접속한 url에 어떤 컴포넌트를 랜더해야 하는지 정해주는 라이브러리다.
index.js에서 Router 객체를 추출하는 모듈 형태로 되어있다.

vue router는 거의 모든 vue 프로젝트에 사용되는 만큼 공식문서를 꼭 읽어보자

vue.router

4-4 📄 App.vue

Vue 애플리케이션의 루트 컴포넌트다.
vue 애플리케이션의 컴포넌트들은 App 컴포넌트를 중심으로 트리 형태의 구조를 가지게 된다.

4-5. 📄 main.js

Webpack이 빌드를 시작할때 가장 처음 불러오는 진입 지점이다.
즉, 우리가 작성한 애플리케이션은 이 파일을 실행함으로써 시작된다. 해당 파일에선 App.vue 파일을 불러와서 Vue 객체를 생성하고 #app 엘리먼트에 바인딩하는 코드거 작성되어 있다.

5. 📁 static

static 에는 이미지, 폰트같은 정적(static) 리소스들이 위치하게 된다.
이 디렉토리 내부에 위치한 파일들은 Webpack을 거치지 않는다. 거치지 않고 이 안에 있는 파일들을 그대로 복사하여 빌드 결과문 디렉토리인 dist📁 로 옮길 것이다.
처음 프로젝트를 세팅하면 이 안에 .gitkeep📄 이라는 파일 하나만 존재한다. 깃은 비어있는 디렉토리를 추적하지 않기 때문에 추적하게 하기 위해 생성해둔 것이다.

6. 📁 test

test 에는 e2e 테스트(end to end Test)에 관한 코드와 단위 테스트(Unit Test)에 대한 코드들이 위치하고 있다.

# 단위 테스트 명령어 실행 npm run unit # e2e 테스트 명령어 실행 npm run e2e # 통합 테스트 명령어 실행 npm run test

e2e 테스트란? 🤔

전체 시스템이 제대로 작동하는지 확인하기 위한 테스트. 최대한 실제 사용자 관점에서 테스트를 수행하기 때문에 수행 속도가 느릴 수 있다. 그래서 단위 테스트와 같이 자동화되는 테스트와 함께 구성된다.

단위 테스트란? 🤔

전체 시스템이 아닌 개별적으로 작성된 작은 규모의 코드 뭉치들이 제대로 작동하는지 검사한다. vue의 경우 보통 컴퍼넌트들의 기능을 테스트한다.

7. 📄 .babelrc

ES6를 지원하지 않는 웹 브라우저를 위해 ES6 문법을 ES5 문법으로 트랜스파일링(Transpiling) 하는 작업이 필요하다. 이는 주로 바벨(babel) 이라는 도구를 사용해주는데 .babelrc 파일에 바벨에 대한 세팅이 정의되어 있다.

8. 📄 .editorconfig

.editorconfig는 코드에 영향을 미치는게 아니라 여러가지 IDE에서 통일된 코딩 스타일을 유지할 수 있게 도와주는 파일이다. 파일의 인코딩 형식 등에 대한 설정이 정의되어 있다. IDE에 따라 프로그램 내에 플러그인이 기본적으로 내장되어 있는 경우도 있지만 그렇지 않은 경우도 있기때문에 별도의 플러그인을 설치해줘야 하는 경우도 있다.

9. 📄 .eslintignore

이 파일 내부에 선언되어 있는 경로에 위치한 파일들은 린터(Linter)가 검사를 진행하지 않는다.

Linter?

정적 타입 분석도구이다.

10. 📄 .eslintrc.js

앞서 말했듯이 linter란 코딩 컨벤션(coding convention)과 관련된 에러를 체크해주는 작은 프로그램이다. 이런 코딩 컨벤션에 대한 설정 파일이 들어있다. 물론, 코딩 컨벤션을 지키지 않았다면 빌드는 실패한다.

11. 📄 .gitignore

이 파일에 선언된 경로에 위치한 파일들은 깃에서 따로 형상 관리를 하지 않는다. (깃을 사용하지 않는 프로젝트라면 무시해도 좋다)

12. 📄 .postcssrc.js

자바스크립트를 이용하여 css를 변환하는 툴이다. 그렇지만 sass와 less같은 css 메타언어와는 다르다. postCSSsms 는 언어가 아닌 개발 도구이며, 어떤 플러그인을 쓰냐에 따라 수행하는 역할이 달라진다.

13. 📄 index.html

사용자가 웹페이지에 접속했을 때 다운로드하게 되는 HTML 템플릿이다.
기본적인 vue 애플리케이션은 Webpack이 번들린된 파일을 index.html에 삽입하고 클라이언트에서 랜더링을 수행하는 방식으로 작동한다.
외부 스크립트를 CDN을 통해 호출해야 하거나 문서의 타이틀을 수정하는 등, HTML에 작성해야 하는 코드가 있다면 이 파일에 작성하면 된다.

vue 세팅해보자!

Wed, 02 Sep 2020 00:00:00 +0000

vue.js 를 시작하며…

앞으로 vue.js 카테고리에 추가될 글들은 책
커피한잔 마시며 끝내는 Vue.js를 정리하며 작성될 예정입니다. 🤸‍♀️🤸‍♀️🤸‍♀️
책을 기반으로 포스팅을 하지만 추가적인 의문점이나 구글링을 통한 내용도 작성될 것입니다.

vue 시작하기 🚀

1. node.js 설치 (설치가 되어 있다면 pass)

vue.js 를 설치하기 위해선 node.js가 설치되어 있어야 한다.
node.js 설치하기

current 버전은 지양하도록 한다. 최신 버전이기 때문에 호환성 문제가 있기 때문이다. 편의에 따라 yarn을 설치하셔도 좋습니다!

Node.js 설치 확인 방법

$ node -v
$ npm -v

위의 코드를 터미널, cmd 등에 입력 했을 때 버전이 뜨면 설치가 완료됐다는 뜻이다. 💡 npm은 node.js를 설치하면 함께 설치되므로 별도로 설치하지 않아도 된다.

2. Vue CLI

CLI란 Command Line Interface의 약자다. 텍스트 터미널을 통한 사용자와 컴퓨터의 상호 작용 방식을 말한다.

cli 2.x.x / cli 3.x.x or 4.x.x 를 유의하자

나는 책에 소개된대로 2.x.x 버전을 이용하겠다.

vue cli 설치를 위해 터미널 or cmd에 아래와 같은 명령어를 입력해 준다.

2.x 버전 설치

/* 해당 디렉토리 안에서만 설치 */ $npm install vue-cli /* 전역 설치 */ $npm install vue-cli -g

3.x 버전 설치

/* 해당 디렉토리 안에서만 설치 */ $npm @vue/cli-service /* 전역 설치 */ $ npm i -g @vue/cli

여기서 잠깐!! 👀

Vue CLI 3.x 버전과 (현재는 기본으로 깔면 4.x이다) Vue CLI 2.X 버전은 프로젝트를 생성할때 기본적으로 생성되는 디렉토리 구성이 다릅니다.

Vue CLI 2.x	Vue CLI 3.x
개발자가 직접 파일을 세팅할 수 있다	옵션 지정을 안하면 간단하게 시작 할 수 있다

3.x 버전을 미리 깔았는데…2.x 버전으로 바꾸고 싶다면? 🤔

$ npm install @vue/cli-init -g /* init으로 초기화 후 2.x 버전을 까는 명령어를 입력한다. */ npm install -g vue-cli

vue 버전 확인은 이렇게 한다.

$ vue --version

버전을 확인 했으면 이제 프로젝트를 생성해보자!

나는 책을 따라 2.x 버전을 이용할 것이다. 📖

반대로 낮은 버전에서 높은 버전으로 올린다면?

npm r -g vue-cli npm install -g @vue/cli

2. Vue 프로젝트 생성

vue CLI 를 이용해 프로젝트를 초기화하는 기본 명령어는 아래와 같다.

$vue init template-name project-name

vue CLI 3.x 버전 이상은 아래와 같이 생성합니다.

vue create [project name]

template-name 이 위치한 곳엔 template-name을, project-name 이 위치한 곳엔 프로젝트 이름을 넣으면 완성

그런데…template-name이 뭐야? 🤔

위의 2.x 버전 코드를 보면 project-name은 내 프로젝트 디렉토리의 이름을 입력하라는거구나! 하고 생각할 수가 있다.
그런데 template-name 은?

template-name은 Vue CLI에서 정의하는 옵션 6개 중 하나를 입력해야 한다.

option-name	description
webpack	browserify와 vueify를 이용하는 간단한 옵션 liter와 단위 테스팅 도구를 사용할 수 있다.
webpack-simple	webpack 빌드 도구, vue-loader를 이용하는 풀옵션 작은 애플리케이션을 만드는데 용이
browserify	browserify와 vueify를 이용하는 간단한 옵션 liter와 단위 테스팅 도구를 사용할 수 있다.
browserify-simple	browserify와 vueify를 이용하는 간단한 옵션 작은 애플리케이션을 만드는데 용이
pwa-webpack	pwa 기반의 애플리케이션을 만들때 용이
simple	하나의 HTML 파일 안에서 Vue 컴포넌트로 개발하기에 용이

책에는 이렇게 나와있지만…

그래서 템플릿 네임은 왜 적어주는거고, 웹팩이 뭔데? 🤔

vue setting을 하면서 에러가 뜨면 열에 여덟은 웹팩 관련이었다!
그래서 웹팩에 관련해서 짧막하게 알아보았다.

웹팩?

webpack : 파일 간의 연관 관계를 파악하여 하나의 자바스크립트 파일로 변환해 주는 변환 도구

웹팩은 애플리케이션 동작과 관련된 여러개의 파일(HTML, CSS, Javascript…) 들을 하나의 js 파일로 변환 시켜준다.
내가 애플리케이션을 만들때 10개의 html 파일, 3개의 css 파일 등등을 만들어 사용했다면
웹팩이 이것을 합쳐 하나의 js 파일로 만들어주고 애플리케이션을 구동할땐 이 하나의 js 파일만 로딩하면 되도록 한다.

웹팩에 대한 건 다른 포스팅에서 자세히 알아보도록 하겠다. 👩‍🎓

npm과 yarn 그리고 brew

Tue, 11 Aug 2020 00:00:00 +0000

패키지 관리자 툴 ⚙

패키지 관리자 툴이란?
JavaScript에서 모듈을 설치할 수 있는 패키지 툴이다.
pakage는 모듈이라고도 불리는데 프로그램보다는 조금 작은 단위이다.

node.js 에서 자주 사용하는 NPM 과 페이스북에서 개발한 yarn 그리고 맥OS에서 사용하는 brew 에 대해 알아보자.

1. NPM

npm 이란?

npm은 Node Package Manager의 약자이다. 말 그대로 node.js로 만들어진 pakage(Module)를 설치 및 관리해주는 CLI 기반의 툴이다.
npm 명령어를 통해 개발자는 패키지 또는 모듈을 프로젝트에 설치할 수 있다.

npm 웹 사이트

npm 사이트 바로 가기

npm 홈페이지에선 원하는 패키지를 검색할 수 있다.

npm 사용법

node.js 설치
npm 시작

    > npm init

패키지 설치

    > npm install [pakage name]

여기서 [pakage name]은 원하는 패키지 파일을 찾아서 설치를 한다. (괄호는 x)

localhost 호출하기

    > npm run serve

npm을 이용해 사이트를 만들때 로컬 호스트를 호출하는 방법이다.

2. yarn

yarn 이란?

npm과 마찬가지로 javaScript 패키지 매니저이다.
npm보다 뒤늦게 만들어졌으며 npm의 단점을 보완하기 위해 facebook에서 개발했다.

yarn 웹사이트

yarn 사이트 바로 가기

yarn 사용법

node.js 설치
yarn 설치

설치 방법은 여러가지이다. 가장 쉽게 설치할 수 있는 방법은 npm을 통해 설치하는 것이다!

    > npm install --global yarn

🤔 왜 npm을 통해 설치?
yarn은 조금 개선된 버전의 npm이다. 따라서 npm으로 설치가 가능하니 npm이 설치되어 있다면 npm을 이용해 설치하는 것이 간단하다.

두 번째는 yarn 홈페이지에 나와있는 chocolatey 나 scoop을 이용해 설치하는 것이다.

    $ choco install yarn

    @scoop install yarn

마지막으로 소개할 brew (맥OS 패키지 매니저)를 이용하여 설치할 수 도 있다.

    $ brew install yarn

버전 관리 툴을 사용해야 한다면 node.js를 제외하고 설치도 가능하다.

    $ brew install yarn --without-node

yarn 실행하기

프로그램 초기화 (package.json을 생성한다.)

    yarn init

pacjage.json 의존성 모듈 설치

    yarn install

또는

    yarn

의존성 모듈을 설치하려면

    $yarn add [pakage]
    $yarn add [pakage]@[version]
    $yarn add [pakage]@[tag]

의존성 모듈을 제거하려면

    yarn remove [pakage]

locallhost 호출

    yarn start

3. Homebrew(홈브류)

homebrew (홈브류)란?

맥OS용 패키지 관리자 이다.
리눅스 등의 패키지 관리자와 사용법이 비슷해서 쉽게 사용이 가능하다는 장점이 있다.
기본적으로 맥OS용 패키지 관리자이지만 리눅스나 윈도우의 WSL도 지원하고 있다.

편리하게 사용할 수 있지만 커뮤니티 기반으로 운영이 되기 때문에 안정성이 보장되지 않다.

🤔 홈브류 를 사용하는 이유?

맥에서 원하지 않는 프로그램들이 나도 모르게 설치되거나 재설치, 업데이트, 삭제할 때 기존의 데이터가 남아있는 경우가 많다. Homebrew를 이용하면 이러한 문제 없이 깔끔하게 프로그램을 설치, 삭제, 업데이트 할 수 있다.

웹사이트

homebrew 사이트 바로가기

homebrew 설치하기

첫 째로 터미널을 실행한 뒤 homebrew 웹사이트로 들어가 설치 코드를 복사한다. 둘 째로 터미널에 복사한 코드를 붙여넣기 한다. 셋 째로 설치 중간에 password를 입력하라 하는데, 여기선 자신의 맥북 비밀번호를 입력하면 된다.

    $brew --version

위의 명령어를 실행하여 버전이 뜨면 homebrew 설치 완료

🤔 만약 GUI 기반의 어플리케이션을 설피하고 싶다면? cask 패키지를 설치!

    brew install cask

위와 같이 cask를 설치하면 safari, chrome 같이 그래픽을 통해 작업하는 프로그램을 설치할 수 있게 된다.

homebrew 실행하기

먼저 새롭게 진행된 업데이트가 있는지 확인해보기

    brew update

새로운 업데이트가 있다면 자동으로 설치된다.

내가 설치하고 싶은 프로그램을 Homebrew를 통해 설치할 수 있는지 확인하는 법

    brew search [프로그램 명]

Homebrew를 통해 프로그램 설치가 가능한지 확인해봐야 한다. (만약에 없으면 Appstore를 통해 설치해야한다.)

설치가 가능하다면 cask를 통해 설치 프로그램명을 확인 한다.

    brew cask install [프로그램명]

[프로그램명] was successfully installed!

위와 같은 문장이 뜨면 정상적으로 설치가 완료된 것이다.

🤔 어떤 패키지 매니저를 사용하는게 좋을까?

yarn은 npm을 기반으로 npm의 단점을 보완하고자 나온 패키지 매니저이다. 속도와 보완을 개선한 것이 yarn이지만 요즘 npm의 속도도 별반 다르지 않아 차이가 없다 한다. yarn과 npm의 명령어는 기본적으로 동일하거나 비슷하다. 따라서 그냥 자기가 쓰기에 편한 / 익숙한 패키지 매니저를 사용하는게 좋을 것 같다. (모두 쓸 줄 알면 더 좋다)

난 업무용 컴퓨터에선 npm을, 개인 공부용 컴퓨터에선 brew와 yarn을 사용할 예정이다.

Markdown

Fri, 07 Aug 2020 00:00:00 +0000

마크다운(Markdown)이란?

마크다운(markdown)은 일반 텍스트 기반의 경량 마크업 언어다.
일반 텍스트로 서식이 있는 문서를 작성하는 데 사용되며, 일반 마크업 언어에 비해 문법이 쉽고 간단한 것이 특징이다. HTML을 잘 모르는 사람도 쉽게 다양한 서식을 추가할 수 있는 문서 편집 문법이다.
확장자는 .md를 사용한다.

마크다운 문법 사용하기

’#’의 갯수로 ‘h1’~’h6’까지 나타낼 수 있습니다.

작성 ✍️

  #제목  
  ##제목  
  ###제목  
  ####제목  
  #####제목  
  ######제목

결과 🙌

제목

텍스트 강조 / 모양

markdown 에서도 텍스트 강조, 기울기, 취소줄 등 여러가지 텍스트 효과를 줄 수 있다.

작성 ✍

*기울기*  
_기울기_  
**굵은글씨**
__기울기/굵은글씨__
***기울기/굵은글씨***
~~취소줄~~

결과 🙌

기울기
기울기
굵은글씨
기울기/굵은글씨
기울기/굵은글씨
~~취소줄~~

수평선(hr) 작성

---

* * *

__ __ __ - or * or _ 등을 3개 이상 입력하면 작성할 수 있다.

작성 ✍

---
***
__ __ __

결과🙌

코드블럭 (Code Block)

스페이스바 네 번 입력해서 띄우기 (빈칸 네 개 필요)

` ``` ` 으로 앞뒤 감싸기

` ~~~ ` 으로 앞뒤 감싸기

작성 ✍

` ` ` 
  code start
` ` `

~ ~ ~ 
  code start
~ ~ ~

결과🙌

    code start

    code start

🤔 더 알아보기

만약 코드의 컬러를 넣어주고 싶다면 어떻게 해야할까?
css, js, c, php … 특정 언어를 명시해 줄 수 없을까?

👉 ` ``` ` 뒤에 언어를 명시해주면 두 가지가 해결 된다!

작성 ✍️

  ` ` `javascript  
    var hello = "안녕!";  
    console.log(hello);  
    ` ` `

결과🙌

    var hello = "안녕!";
    console.log(hello);

❓ 코드블록부분을 black 처리 하고 싶었지만 아직 방법을 모르겠다.
추후 찾아 볼 예정!

링크 (link)

< > 로 url 혹은 이메일 주소 감싸주기

[링크에 사용할 이름](URL)

작성 ✍

<https://haerim95.github.io/>  
[Haerim 개발 블로그](https://haerim95.github.io/)

결과🙌

https://haerim95.github.io/
Haerim 개발 블로그

테이블 (Table)

Markdown에서도 테이블을 만들 수 있다. ||를 사용하여 작성한다. 헤더 테이블 작성 다음 줄에 열에 맞게 |---|를 작성해줘야 한다. 테이블 안에서 ` : (세미콜론) `를 통해 텍스트 정렬도 가능하다.

작성 ✍️

  | 과일 | 과자 |
  |:---:|---:|
  | 사과 | 애플파이|
  | 바나나 | 바나나킥 |
  | 포도 | 마이구미 |
  | 체리 | 체리마루 |

결과 🙌

과일	과자
사과	애플파이
바나나	바나나킥
포도	마이구미
체리	체리마루

이미지 링크(Image link)

![이미지 설명글](Image URL)

작성 ✍️

    ![markdown logo](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg "마크다운 로고")

결과 🙌

코드강조

markdown 안에 코드강조 을 넣고 싶을 때 사용한다. 코드강조은 현재 보이는 코드강조 글자에 있는 효과이다.

작성 ✍️

  나는 `개발자`가 되고 싶다.

결과 🙌

나는 개발자가 되고 싶다.