리액트의 State 와 Props 에 대한 내용과 Event 를 통해 이를 활용하는 내용 등을 포함합니다. 😊

리액트 State 📋

리액트를 통해 동적 웹을 구현하고자 할 때, 빼놓을 수 없는 없는 개념 중 하나가 State 다. State 는 말 그대로 상태를 의미하며, 그 상태의 대상은 해당 컴포넌트를 향한다.
또한, State 는 컴포넌트의 UI 정보를 지닌 객체이기도 하다. 이게 무슨 의미인지 클래스형 컴포넌트에서 State 를 어떻게 정의하는 지에 대한 내용과 함께 알아보자.

import React, { Component } from 'react';

class State extends Component {
  constructor() {
    super();
    this.state = {
      color: 'red',
    };
  }

  handleColor = () => {
    this.setState({
      color: 'blue'
    })
  }

  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>Class Component | State</h1>
        <button onClick={this.handleColor}>Click</button>
      </div>
    );
  }
}

export default State;

State 를 위 예시를 활용하여 설명해보자. 일단 constructor 를 통해 state 의 초기 값을 설정해준다. 이 과정에서 해당 super() 를 꼭 넣어주어야 한다. 해당 super() 를 왜 필수로 사용해야 하는지에 대해서는 명확히 이해하지 못했기 때문에, 별도로 기재한다.

💡 super() 에 대하여

자바스크립트의 class 에서 super 란 부모 클래스의 생성자 내지 메서드를 불러옴을 의미한다. extends 를 사용하여 부모 클래스를 통해 클래스를 생성하면 super() 를 사용할 수 있게 된다. 그렇게 되면 다음과 같은 상황을 만들 수 있다.

class Person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum(){
        return this.first+this.second;
    }
}
class PersonPlus extends Person{
    constructor(name, first, second, third){
        super(name, first, second);
        this.third = third;
    }
    sum(){
        return super.sum()+this.third;
    }
}

위와 같이 Person 이라는 class 에서 파생된 PersonPlus 에서 super() 를 사용하여 부모 클래스의 생성자를 공유하고, super 를 통해 부모의 메서드를 사용할 수 있다.
리액트에서는 해당 super() 를 this 사용의 조건으로 강제한다는 부분이 있는데 해당 내용에 대해서는 심화 학습이 필요하기 때문에, 이번 리액트 state 에서는 생략하겠다.

setState() 🔧

변수가 아닌 state 를 사용하는 장점은 값을 동적으로 변경할 수 있을 때 진가를 발휘할 것이다. setState() 는 이러한 state 값을 변경할 수 있는 방법이다. 위 예시에서는 setState() 를 통해 요소의 색을 변경하고자 하였다.

  handleColor = () => {
    this.setState({
      color: 'blue'
    })
  }

  render() {
    return (
      <div>
        <h1 style={{ color: this.state.color }}>Class Component | State</h1>
        <button onClick={this.handleColor}>Click</button>
      </div>
    );
  }
}

해당 예시에서 setState() 를 통해 color 값을 blue 로 바꾼다는 것을 handelColor 라는 arrow function 을 통해 정의해준다. 그리고 h1 태그에 style 속성에서 color 에 해당하는 값으로 해당 state 값을 대입하고, 해당 state 값을 변경하기 위해 미리 정의해두었던 함수를 button 태그의 onClick 이벤트에 연동하여 대입해준다. 그렇다면 버튼을 클릭했을 때, h1 태그의 텍스트 색이 변화하는 것을 확인할 수 있을 것이다.
위와 같이 state 값을 변화시켜 동적인 웹 구축에 활용할 수 있다. 추가적으로, 함수형 컴포넌트의 경우 useState 라는 것을 활용하여 state 값과 변경 함수에 대해 일괄적으로 정의할 수 있다.

props 🗃️

state 에 대해 이해했다면 이제 props 에 대해 이해하면서 컴포넌트를 다루기 위한 준비를 확실하게 해보자. props 는 말 그대로 컴포넌트 속성 값을 의미하며, 자세히 말하자면 부모 컴포넌트로 부터 전달 받은 데이터 객체를 의미한다.
이게 사람 말인가 싶다면 그게 정상이다. 😊 자괴감에 빠지지 말고 좀 더 쉽게 알아보자.

props 를 통한 데이터 전달 📩

// Parent.js

import React from 'react';
import Child from '../pages/Child/Child';

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
    };
  }

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
    <Child titleColor={this.state.color}/>
      </div>
    );
  }
}

export default State;

// Child.js
import React from 'react';

class Child extends React.Component {
  render() {
        // console.log(this.props);

    return (
      <div>
        <h1 style={{color : this.props.titleColor}}>Child Component</h1>
      </div>
    );
  }
}

export default State;

위와 같이 두 가지 컴포넌트가 정의되어 있다고 가정하자. Parent 컴포넌트는 아래 작성된 Child 컴포넌트를 불러와 사용하고 이름대로 부모 자식의 관계를 갖는다. 해당 상황에서 Child 는 Parent 컴포넌트의 값에 접근하기 위해 어떻게 해야 할까?
우선 위 예시의 Parent 컴포넌트에서 Child 컴포넌트를 불러와 사용하는 과정에서 props 를 넘기기 위해 Parent 의 state 값인 blue 를 this.state.color 를 통해 전달해준다. 그리고 해당 props 를 titleColor 라고 정의한다.
그렇다면 이제 Child 컴포넌트는 titleColor 라는 값에 props 객체를 통해 접근 가능하다. 그렇게 Child 컴포넌트에서 this.props.titleColor 를 통해 넘겨 받은 props 값에 접근하고 이를 활용할 수 있는 것이다.
또한 props 를 통해 state 값 뿐만 아니라 setState 를 활용하는 event handler 또한 전달할 수 있다.

props 를 통한 함수 전달 📬

// Parent.js

import React from 'react';
import Child from '../pages/Children/Children';

class Parent extends React.Component {
  constructor() {
    super();
    this.state = {
      color: 'red'
    };
  }

  handleColor = () => {
    this.setState({
      color: 'blue'
    })
  }

  render() {
    return (
      <div>
        <h1>Parent Component</h1>
    <Child titleColor={this.state.color} changeColor={this.handleColor}/>
      </div>
    );
  }
}

export default State;

// Child.js

import React from 'react';

class Child extends React.Component {
  render() {
        // console.log(this.props);

    return (
      <div>
        <h1 style={{color : this.props.titleColor}}>Child Component</h1>
    <button onClick={this.props.changeColor}>Click</button>
      </div>
    );
  }
}

export default State;

이어지는 예시는 setState 부분에서 button 을 통해 h1 태그의 색을 바꾸는 것과 같은 예시이다. 다른 점이 있다면, event handling 을 부모 컴포넌트가 아닌 자식 컴포넌트에서 진행한다는 점이다. 그러기 위해서 부모 컴포넌트에서 정의한 state 를 변경할 수 있는 setState 가 들어간 event handler 함수를 위와 같이 전달하는 것이다.
함수를 전달하는 방식은 앞의 값 전달 방식과 동일하다. changeColor={this.handleColor} 를 통해 전달하고자 하는 props 함수를 changeColor 라는 이름으로 전달한다. 그리고 전자와 마찬가지로 자식 요소에서 props 객체를 통해 함수를 전달 받아 이벤트에 바로 사용하면 된다.
위와 같은 방식을 활용하면 컴포넌트의 컴포넌트화를 진행하는 과정에서 자유롭게 부모 자식의 데이터를 공유할 수 있다.

마무리 🧾

사실 학습하다 보니, state 와 props 라는 부분은 실제로 적용하면서 학습하는 과정에서 더욱 이해가 깊어지는 것 같다. 이를 활용하여 진행 중인 프로젝트의 컴포넌트화를 원활히 진행한 후 학습했던 내용을 되짚어 보는 것도 좋을 것 같다.

• state 는 컴포넌트의 상태이며 컴포넌트가 갖는 값을 의미한다.
• props 란 컴포넌트 속성으로 부모 컴포넌트로 부터 상속 받는 데이터를 의미한다.
• setState 를 통해 state 값을 변경할 수 있으며, 이를 이벤트 핸들링에 활용할 수 있다.
• props 를 통해 부모 요소의 state 를 자식에 반영할 수 있고, 이를 변경할 수도 있다.(State 끌어올리기)
  

그럼 20000 👍🏻

리액트(React)에 대한 기본적인 내용으로 리액트에 대한 기반 정보와 컴포넌트, JSX에 대한 내용을 포함합니다. 😊

리액트란 무엇인가? 🔤

험하디 험한 바닐라 자바스크립트를 지나 드디어 리액트에 도착했다. 잠깐 알아봤는데도 이리 어메이징하고 어썸한게 있나 싶다. 그렇다면 리액트는 무엇인가? 페이스북에서 만든건 알겠는데 제대로 알아본 적이 없다. 이번 포스팅에서 간단히 리액트에 대해 알아보고, 어떤 원리로 디스플레이에 반영되는지에 대해서도 Araboza.

리액트(React)는 자바스크립트 라이브러리의 하나로 사용자 인터페이스(UI)를 만들기 위해 사용된다. 앞에서도 말했듯이, 페이스북에 의해 만들어졌고 개별 개발자 및 기업들 공동체에 의해 유지보수 된다.
리액트와 비슷하게 사용되는 Angular, Vue가 MVC(Model-View-Controller) Architecture인데 반해, 리액트는 오직 View 만을 담당하며, 그렇기에 추가적인 third-party 라이브러리(React-router, Redux)를 함께 사용한다.

💡 third-party library

기본적으로 제 3자의 의미를 갖는 'third-party' 가 포함된 'third-party library'는 프로그래밍을 위해 도움이 되는 플러그인이나 라이브러리 등을 말한다.
이에 대한 예시로 리액트의 경우 React-router를 사용하는데, SPA(Single Page Application) 방식을 채택하는 리액트의 경우 MPA(Multi Page Application) 방식처럼 페이지의 이동이 불가피하다. 그렇기에 페이지를 새로 불러 들이지 않고 변경된 부분만 수정하여 하나의 페이지에서 출력하게 해주는 렌더링 라이브러리인 라우터를 사용하는 것이다.

가상 돔(Virtual Dom) 🌐

리액트의 가장 큰 장점 중 하나는 가상 돔(Virtual DOM)을 통해 실제 돔에 접근하는 대신에 추상화 시킨 객체에 접근한다는 것이다. 이 부분이 어떠한 장점을 갖는 지는 다음과 같은 이유가 있다.

위 예시는 UI를 변경하는 과정에서 가상돔과 브라우저의 상태를 보여주는 내용이다. 위 내용을 설명하기에 앞서 실제 돔과 가상 돔의 차이점에 대해 간단히 알아보자. 실제 돔을 조작하는 것은 화면에 실제로 적용하는 과정이기에 이를 진행하는 것은 상대적으로 무거운 프로세스에 속한다. 그렇기 때문에, 이를 직접 조작하는 것 보다 이전에 만들어 놓은 경량 복사본인 가상 돔에 이를 우선적으로 적용하고 실제 돔과 어떠한 차이점이 있는 지 비교하여 돔 조작을 진행하는 것이 보다 더 가벼운 프로세스에 해당하는 것이다.
다시 돌아와서 위 예시를 살펴보면, 우선 상태가 변화된 것을 인지하고 이에 따라 변화한 부분을 추적하여 가상 돔에 적용하였으며 마지막으로 변경 부분에 대해 실제 돔에 적용하여 이를 마무리 짓는다. 이렇게 되면 특히나 사용자의 인터랙션이 많은 SPA(Single Page Application)는 변화의 양이 많기 때문에, 변화의 양을 한꺼번에 묶어서 한 번에 진행하는 형태인 리액트가 훨씬 쾌적한 브라우저 환경을 제공한다.

💡 SPA(Single Page Application)

SPA(Single Page Application)란 서버에서 완전히 새로운 페이지를 불러오지 않고 현재 페이지를 동적으로 다시 작성함으로 페이지를 변경하는 형식을 말한다. 페이스북을 하다보면 다른 사람이 게시물에 댓글을 달았을 때, 별도의 새로고침 없이 업데이트 됨을 볼 수 있었다. 그러한 기능이 가능한 이유는 페이지가 업데이트 될 때, 새로운 문서(HTML)를 다시 스캔하는 것이 아니라, 자바스크립트를 활용하여 다시금 변화가 일어난 부분에 대해서만 수정을 진행하기 때문이다.
SPA와 반대되는 개념으로 MPA(Multi Page Application)가 있는데, 나는 해당 개념을 화이트보드의 갯수로 비유하여 이해하기로 했다. SPA의 경우 화이트보드가 하나고 여러가지 초안을 바꾸면서 수정하는 형식이고, MPA의 경우는 여러가지의 화이트보드에 초안들이 미리 작성되어 있는 상태에서 화이트보드를 변경하는 형식이라고 이해했다.
그렇기에 SPA 형식은 빠른 반응성, 화면 전환 등의 측면에서 사용자 친화적이고 상대적으로 유지보수가 쉽고 개발속도가 빠르며, 전체 트래픽 양이 적다는 장점이 있다.
반면에, 처음 접속과 동시에 모든 리소스를 한 번에 받기 때문에 초기 구동 속도가 느리다는 점과, 검색엔진 최적화(SEO)가 CSR 방식으로 어렵다는 점 등이 단점으로 꼽힌다.

컴포넌트(Component) 🧱

또한 리액트의 장점으로 컴포넌트(Component)를 활용한다는 점이 있다. 컴포넌트란 컴퓨터 소프트웨어에서 다시 사용할 수 있는 범용성을 위해 개발된 소프트웨어 구성 요소를 일컫는다. 그런 의미에서 알 수 있듯이 리액트에서는 반복되는 UI 구성 요소들을 하나의 컴포넌트로 지정하여 반복적인 작업을 방지하고 유지보수에 원활함을 부여한다. 컴포넌트의 특징을 정리하면 다음과 같다.

• 재활용이 가능하다.
• 코드 유지보수에 용이하다.
• 코드 가독성이 높아진다.
• 컴포넌트 내 컴포넌트를 포함할 수 있다.

이러한 특징 덕분에 컴포넌트를 활용하여 UI 구성을 좀 더 체계적으로, 계획적으로 할 수 있는 것이다.

리액트에는 두 가지의 컴포넌트 선언 방식이 있는데 하나는 클래스(Class)형 컴포넌트 , 나머지 하나는 함수형(Functional) 컴포넌트이다. 클래스형 컴포넌트와 함수형 컴포넌트의 역할은 비슷하지만, 그 선언 방식에서 차이를 보인다.

클래스형 컴포넌트(Class Component)

import React from 'react'

class Component extends React.Component { // extends : 클래스를 다른 클래스의 자식으로
  render() {
    return (
      <div>
        <h1>This is Class Component!</h1>
      </div>
    )
  }
}

export default Component

클래스형 컴포넌트는 보이는 듯이 render() 함수를 사용하고 JSX 를 반환하는 형식을 갖는다. 클래스형 컴포넌트는 다음과 같은 특징을 갖는다.

• state 기능, lifecycle 기능 등을 사용 가능
• 임의 메서드 정의 가능

함수형 컴포넌트(Functional Componant)

import React from 'react'

const Component = () => {
  return (
    <div>
      <h1>This is Functional Component!</h1>
    </div>
  )
};

export default Component

함수형 컴포넌트는 클래스형 컴포넌트와 다르게 render() 함수를 사용할 필요 없고, 보다 더 간략하게 컴포넌트를 선언할 수 있다는 장점이 있다. 함수형 컴포넌트의 특징은 다음과 같다.

• 메모리 자원을 상대적으로 덜 사용한다.
• 컴포넌트 선언이 편하다.
• Hook 활용

최근에는 함수형 컴포넌트를 더 선호하는 추세이다.

💡 JSX(JavaScript Syntax Extension)

JSX(JavaScript Syntax Extension)를 간단하게 말하면 "자바스크립트 내부에서 HTML을 사용한 것"이라고 말할 수 있고, 정확히 말하자면 자바스크립트 확장 문법이다.
위 예시들에서 자바스크립트 내부에 HTML 구조의 코드가 작성된 것을 확인할 수 있다. 이렇게 작성된 코드들은 바벨(Babel)이라는 자바스크립트 컴파일러를 통해 일반 자바스크립트 형태의 코드로 변환된다. 이렇게 JSX로 작성하면, DOM과 Event 를 활용하는 것보다 좀 더 직관적으로 확인할 수 있기에, 개발 과정에서 효율을 증가시킨다.
JSX의 문법적 특징으로 자바스크립트 표현을 {} 안에 작성하는 것과, Self Closing tag 그리고 작성할 때, 하나의 컴포넌트는 모든 요소들을 감싸는 하나의 최상위 요소가 존재해야 한다는 점 등이 있다.

// 최상위 요소 있음
return (
  <div>
    <h1>Hello, World!</h1>
    <div>Welcome to JSX!</div>
  </div>
)
// 최상위 요소 없음 : 오류 발생
return (
  <h1>Hello, World!</h1>
  <div>Welcome to JSX!</div>
)

최상위 요소가 존재하지 않는 경우, 다른 태그로 래핑하는 것이 꺼려지는 경우 Fragments를 활용하여 형식상의 래핑을 진행할 수 있다. 그렇게 되면 실제로 렌더링 되고 난 뒤에는 감싸는 태그는 존재하지 않는 결과를 보여준다.

// 최상위 요소 Fragments
return (
  <>
    <h1>Hello, World!</h1>
    <div>Welcome to JSX!</div>
  </>
)

리액트 라우터(react-router) 🗺️

앞에서 SPA 방식에 대해 언급하면서, 관련 개념으로 등장했던 라우터에 대해 알아보자. SPA는 말 그대로 하나의 페이지 만으로 구성된 어플리케이션을 의미하는데, 이것이 곧 한 종류의 화면 만이 존재하는 것은 아니다. 당연히도, SPA 또한 직접 브라우저의 API를 사용하고 상태를 설정해서 다른 뷰를 보여줄 수 있다.
이렇게 다른 주소에 따라 다른 뷰를 보여주는 것을 라우팅(Routing)이라고 하고, 공식은 아니지만 리액트의 경우엔 이제 알아볼 리액트 라우터(react-router)라는 써드 파티 라이브러리를 주로 사용한다.

리액트 라우터 사용법

우선 CRA 프로젝트를 생성했다는 전제 하에 이후의 과정을 알아보자. 리액트 라우터를 사용하기 위해서는 별도의 설치 과정을 필요로 한다.

npm install react-router-dom --save

CRA 프로젝트를 설치하고, 해당 디렉토리로 이동하여, 터미널로 해당 명령어를 실행하여 리액트 라우터를 설치한다. 설치가 끝났다면, 이제 컴포넌트를 구현할 차례다.

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from 'react-router-dom';

import Login from './pages/Login/Login';
import Main from './pages/Main/Main';

class Routes extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route exact path="/" component={Login} />
          <Route exact path="/main" component={Main} />
        </Switch>
      </Router>
    )
  }
}

export default Routes;

위 예시는 라우터 컴포넌트를 구현한 예시이다. 우선 최상단에서 리액트 모듈을 불러오고, 라우터에서 BrowserRouter , Switch , Route 를 불러온다. 위 세 가지는 아래의 컴포넌트 생성에 사용될 것이다.
그리고 이어서 페이지에 해당하는 컴포넌트들을 각각의 위치에서 불러온다. 위 예시에선 Login 과 Main 이라는 컴포넌트를 불러왔다.
그다음에 본격적으로 컴포넌트를 생성한다. 위 예시에선 컴포넌트 생성을 클래스 컴포넌트 방식을 사용하여 생성했다. 우선 Router 로 정의된 BrowserRouter 를 통해 전체 라우트들을 묶어준다. 그리고 그 안에 Switch 를 통해 이동할 Route 들을 묶어준다. 마지막으로 그 내부에 Route 를 작성하는 것으로 컴포넌트 생성을 마친다. 위 예시의 경우 초기 링크를 Login 으로 설정한다.
이렇게 Routes 컴포넌트를 생성하였으면, index.js 의 렌더링 부분을 변경해준다.

ReactDOM.render(<Routes />, document.getElementById('root'));

위 예시를 보면 Routes 컴포넌트를 렌더링하는 것으로 변경되어있다. 이렇게 설정하면, Routes 컴포넌트 내부에서 설정한 default 값의 링크로 초기 페이지가 설정되고, 이후 <Link> 컴포넌트 혹은 this.props.history.push() 를 통해 페이지를 이동할 수 있다.

💡 <Link> 컴포넌트와 this.props.history.push()

위 두 가지 방법은 리액트 라우터를 이용하여 링크를 이동할 수 있는 두 가지 방법이다. 왜 굳이 두 가지 방법이 존재하는지 사용법과 함께 차이점을 알아보자.
우선 각각의 사용법은 다음과 같다.

// <Link>
// 불러오기
import { Link } from 'react-router-dom'
<Link to="/signup">회원가입</Link>

// this.props.history.push()'
// 불러오기
import { withRouter } from 'react-router-dom'
// 함수 생성
goToMain = () => {
  this.props.history.push('/main');
}
// 이벤트에 추가
<button className="loginBtn" onClick={this.goToMain}>

위에서 볼 수 있는 가장 큰 차이점은 함수를 사용한다는 점일 것이다. Link 의 경우 바로 컴포넌트를 추가하여 이를 조건 없이 바로 실행할 수 있지만, this.props.history.push() 의 경우 함수를 통해 작성하여 해당 과정에서 로직을 추가할 수 있다는 점이 있다. 그렇다, 로직의 추가 가능 유무가 두 가지 방식의 큰 차이점이다.
또한 Link 의 경우, 렌더링 이후 <a> 태그로 변하는데, 사용에 있어 그 차이점이 존재한다. <a> 태그를 포함한 세 가지의 사용 방법은 다음과 같이 정리할 수 있다.

• Link : 별도의 로직이 필요 없는 페이지 내 이동 ex) 프로필 확인 등
• this.props.history.push() : 로직이 필요한 페이지 내 이동 ex) 로그인 등
• <a> 태그 : 외부 링크로의 이동

HTTP 통신의 개괄적인 내용이며 Stateless, Request, Response, Status code 등에 등에 대한 내용을 포함하고 있습니다. 😊

HTTP? 📶

HTTP, 단어로 분리해서 들으면 이게 뭔가 싶지만 우리는 웹 서핑을 하다 주소창에서 심심치 않게 이것을 확인할 수 있다. 그렇지만 굳이 이것에 대해 알아보려 하는 생각은 하지 않았을 것이다. 그렇다면 HTTP는 무엇인가.
앞서 개발자 도구의 네트워크 패널에 대해 공부하면서 HTTP Status에 대해 잠시 알아본 바가 있다. 이는 리소스의 요청과 응답에 있어 그 상태를 나타내는 것이라고 간단히 이해했었다. 그러한 맥락에서 HTTP의 정의부터 알아보자.
HTTP는 HyperText Transfer Protocol의 약자로 클라이언트와 서버 사이에서 이루어지는 요청(Request) 및 응답(Response)의 과정을 정리한 규약(Protocol)이다. 사람들도 내가 원하는 정보를 얻기 위해서 소통하고자 할 때 이를 묻는 양식이 정해져있다. "어떠한 정보가 필요한지, 물어보는 방식은 무엇인지" 등과 "그 요청에 대해 답변할 수 있는지, 안된다면 이유는 무엇인지" 등에 대해 커뮤니케이션 한다. 컴퓨터 또한 이러한 커뮤니케이션을 위한 규약이 필요한 것이다.

그렇다면 데이터를 요청하여 받고 이를 활용하여 화면에 나타내기 위해선 HTTP를 알아야겠네요? 🤔

그래서 이제 HTTP는 어떤 특징을 갖는지, 요청과 응답은 어떠한 형식으로 이루어지는지 등에 대한 내용을 알아볼 것이다.

HTTP의 특징 📤

HTTP는 위에서 언급했던 내용을 포함하여 다양한 특징을 가진다. 우선 대부분의 파일 형식들을 HTTP 통신을 이용해 전송 가능하다. 대표적으로 JSON, TEXT, IMAGE 파일들을 전송하는데 사용할 수 있다.
이러한 데이터의 이동은 위에서 언급한 바와 같이 요청과 그에 따른 응답으로 이루어지고, 응답과 요청은 무상태와 비연결성이라는 특징을 갖는다.

Request & Response 🔛

HTTP 통신은 클라이언트 측에서 요청을 보내면 이에 따라 서버 측에서 결과에 따라 응답을 보내는 형식을 갖는다. 당연히도 이에 대한 형식이 존재하고 이러한 형식에 맞추지 않고 맘대로 요청을 진행할 경우 문제가 발생할 것이다. (위 짤처럼 밑도 끝도 없이 달라고 하면 못 알아먹는다...😅)
그렇기 때문에 우리는 각각의 형식에 대해 이해할 필요가 있는 것이다.

Request

요청(Request)은 크게 StartLine , Headers , Body 인 세 가지로 구분된다. 각각의 영역에는 다음과 같은 정보가 들어간다.

• StartLine : 요청의 첫 번째 줄. 요청의 개괄적인 부분에 해당한다. = HTTP method / Request Target / HTTP version
• Headers : 요청의 메타데이터가 담기며 객체 형태를 갖는다. = Headers { Host : ~, User-Agent : ~ ... }
• Body : 요청의 상세 내용에 해당한다. 역시 객체 형태를 갖는다. Headers 와 유사한 구조를 갖는다. Body 가 존재하지 않는 메서드도 있다.(ex) Get) = Body { Host : ~, User-Agent : ~ ... }

Response

응답(Response) 또한 요청과 같이 StartLine , Headers , Body 인 세 가지로 구분되고, 내용 또한 대체로 유사하다.

• StartLine : 응답의 첫 번째 줄. 응답 상태에 대한 간략한 내용을 포함한다. = HTTP version / Status Code / Status Text
• Headers : 응답의 메타데이터가 담기며 객체 형태를 갖는다. = Headers { Connection : ~, Content-Length : ~ ... }
• Body : 응답의 상세 내용에 해당하며, 역시 객체 형태를 갖는다. 요청과 마찬가지로 생략될 수도 있다.

위와 같은 구조를 갖는 요청과 응답은 다음의 예시와 같이 진행된다.

💡 HTTP Method

HTTP 통신에서 어떠한 목적을 갖고 있는 지에 따라 다른 HTTP Method가 사용된다. 다양한 Method가 있지만, 가장 많이 사용하는 GET 과 POST 를 비교하면서 알아보자.
우선 GET의 경우 데이터를 읽거나 검색할 때 사용하는 메서드로 성공적으로 이루어졌을 때, HTTP Code 200 OK를 반환한다. 또한 GET 요청은 idempotent(멱등성) 한데 이는 같은 요청을 하더라도 매번 같은 값을 반환한다는 의미를 가진다. 그러므로 GET 을 데이터를 변경하는 등의 안전하지 않은 연산에 사용하는 것을 지양한다.
반면에 POST 의 경우, 새로운 리소스의 생성에 사용된다. 더 구체적으로 부모 요소의 하위 리소스 생성에 사용된다는 말이다. 그렇기에 POST 는 성공적으로 완수하면 201 Created 를 반환한다. 그리고 POST 메서드는 GET 과 반대로 idempotent 하지 않기에 같은 POST 요청을 반복해도 같은 결과를 확신할 수 없다. 그러므로 같은 POST 요청을 보내면 다른 리소스를 반환할 가능성이 높다.
보다 더 구체적인 내용은 Request methods에 대한 명세와 w3schools.com의 GET method vs POST method를 참조하자.

Connectionless

요청과 응답에 있어 클라이언트와 서버는 연결을 시작한 이후 과정이 끝나면 동시에 연결을 끊어버린다는 특징을 갖는다. 그렇다면 왜 연결을 굳이 끊어야만 하는 것일까?
서버는 불특정 다수의 클라이언트와 통신을 해야하는 환경을 갖는데 만약 이 연결을 계속 유지한다면, 이와 함께 발생하는 리소스가 불가피하게 늘어날 것이고 연결의 수 또한 감소할 것이다. 그러한 이유 때문에 HTTP 통신은 비연결성을 갖는다.
이렇게 들으면 비연결성이 단점이 없는 것 같지만, 반복적으로 연결 및 해제의 과정을 거쳐야 하기에, 오버헤드가 발생할 수 있다는 단점 또한 갖고 있다.

Stateless

위에서 언급한 비연결성으로 인해 각각의 요청은 구분되어 서버에게 독립적인 대상으로 취급 받는다. 이 말이 무슨 말이냐면, 바로 이전에 보낸 요청임에도 불구하고 이전의 요청과 연관성을 갖지 못하며, 서로 간 영향을 주지 않는다는 것이다.
예를 들어, 다음과 같은 상황이 존재한다.

// Request/Response 1
Client -- '나는 유저 "a" 야 로그인 할 수 있니?' --> Server
Server -- '알겠어, 확인하고 시켜줄게' --> Client

// Request/Response 2
Client -- '전에 왔던, 유저 "a" 야 로그인 시켜줘' --> Server
Server -- '너가 누군데, 난 "a" 몰라' --> Client

앞의 요청에서 유저 a 라는 데이터를 확인하여 로그인을 요청하였고, 이에 따라 로그인이 되었지만 다시 로그인을 진행할 때, 전에 있던 유저 a 가 방문했던 기록을 다시 참조하는 것이 불가능하다고 했다.
이처럼 요청 간에는 독립성이 존재하기 때문에, 매 연결마다 새로운 데이터를 가져와야 하는 단점이 존재할 것이다.
이러한 상황에서 중복 요청을 방지하고자, 토큰을 포함하여 응답과 함께 보내 클라이언트에 저장하고 다음에 같은 요청을 진행하고자 할 때, 토큰을 함께 포함하여 요청을 시도하면 이를 더 신속하게 처리할 수 있도록 한다. 이러한 토큰은 클라이언트에 쿠키나 스토리지 등의 형태로 저장된다.

HTTP Status Code ❗

위에서 요청과 응답을 알아보았는데, 적절한 요청을 보냈을 때 응답에 포함되어 오는 정보 중, HTTP 통신의 상태를 나타내는 코드가 있다.
이러한 상태 코드의 유형은 아주 다양하지만, 그 중 간략하게 구분지어 몇 가지만 알아보도록 하자.

요청 성공

아래의 상태 코드들은 요청에 의해 연결이 성공적으로 진행되거나, 요청한 데이터가 성공적으로 전송된 경우 등을 의미한다.

• 200 OK : 성공적으로 응답
• 201 Created : 성공적으로 리소스 생성

클라이언트 에러

오류가 발생한 부분이 요청 부분에서 잘못된 것으로, 주로 프론트엔드 단에서 오류가 발생했을 때 보이는 응답 코드다.

• 400 Bad Request : 유효하지 않는 요청
• 401 Unauthorized : 리소스 요청에 대한 인증자격 부족
• 403 Forbidden : 요청을 이해했지만 승인을 거부
• 404 Not Found : 서버가 요청한 리소스를 찾을 수 없음

서버 에러

오류가 서버 측에서 발생했을 경우 나타나는 응답 코드로, 주로 백엔드 단에서 문제가 발생하면 나타나는 응답 코드다.

• 500 Internal Server Error : 내부 서버 오류로 요청을 이행하지 못함
• 501 Not Implemented : 요청 수행에 필요한 기능을 서버가 지원하지 않음

마무리 🧾

오늘도 어김없이 마무리 정리 시간이 돌아왔다. HTTP에 대한 전반적인 내용을 정리하면서 마무리하자.

• HTTP란 클라이언트와 서버 사이의 요청과 응답을 규정한 규약이다.
• HTTP는 요청(Request)과 응답(Response)으로 이루어지며 요청과 응답은 StartLine , Headers , Body 구분되는 형식을 갖는다.
• HTTP는 비연결성(Connectionless)과 무상태(Stateless)의 특징을 갖기 때문에 각종 스토리지와 쿠키를 활용한다.
• HTTP 통신 상태를 표현하는 응답 코드(HTTP Status Code)가 존재하며 각 코드마다 성공하거나 실패의 내용을 포함한다.

🔖 출처

HTTP : wikipedia : HTTP HTTP 특징 : kotlinworld : HTTP(HyperText Transfer Protocol)의 특징 HTTP Status Code : MDN Web Docs : HTTP 상태 코드

Database에 대한 개괄적인 내용으로 DB, DBMS, RDBMS, ACID 등에 대한 내용을 포함합니다. 😊

데이터베이스란 무엇인가 💾

데이터(Data)는 무엇인가. CS에서 데이터란 컴퓨터가 처리할 수 있는 문자, 소리, 그림 등의 형태로 된 자료를 의미한다. 컴퓨터 안 기록이라는 의미다. 그러한 데이터가 일반적으로 정리된 데이터의 집합을 데이터베이스(Database)라고 정의한다.
그렇다면 데이터베이스가 웹에서 어떠한 과정으로 요청되고 전달되는지 알아보자.

크게 클라이언트와 서버, 데이터베이스로 구분지었을 때, 클라이언트에서 서버에 필요한 데이터를 요청한다. 그렇다면 서버는 요청한 정보를 가공하고 전달해야하기 때문에, 데이터베이스로 부터 정보를 요청하고 그에 따른 응답을 받는 과정이 진행된다. 이 과정에서 DBMS(Database Management System)가 개입하여 그 역할을 수행한다.
DBMS는 말 그대로 데이터베이스를 관리하는 시스템으로 서버에서 데이터베이스에 요청할 때 이를 제어하고 관리하는 역할을 수행하는 시스템이다. 한 마디로, 저장된 데이터를 가져오는 실질적 주체인 것이다.

그렇다면 기록을 저장하기 위해 DB/DBSM을 사용하는 이유는 무엇일까? 🧐

DB의 경우 데이터 보존과 체계적 관리의 측면이 있다.
우선 데이터 보존의 경우 장기간 보관해야하는 목적의 데이터의 경우 휘발성 데이터 저장 방식은 비효율적인 결과를 불러온다. 그렇기에 장기간 데이터 보관을 하려면 이러한 데이터베이스 형태로 보관함이 용이하다는 장점이 있다.
체계적 관리의 경우 논리적으로 연관성 있는 데이터를 분산된 상태가 아닌 정리가 된 상태로 제어하고 관리하기 때문에, 데이터 요청에 의해 이를 가져올 때도 효율적으로 관리할 수 있다는 장점이 있다.
DBMS는 생산성, 기능성, 신뢰성 등을 사용의 근거로 말할 수 있다.
생산성 부분에서 설명하자면 데이터 요청의 목적은 크게 네 가지로 구분되는데 이것을 CRUD(Create, Read, Update, Delete)라고 한다. 이러한 데이터의 관리 및 연산 기능을 DBMS가 제공하기 때문에 유용하다고 할 수 있다.
기능성 측면에서는 단순히 하나의 데이터베이스 만을 일방향으로 활용하는 것만이 아니라 다양한 방식으로 원활환 관리를 진행할 수 있다(복수의 유저 요청 대응 가능 등)는 점이 그 이유가 된다.
마지막으로, 신뢰성 부분에서 한 곳에 집중되는 데이터를 분리하여 관리할 수 있어, 부하가 분산되고 데이터를 주기적으로 백업하여 결과적으로 안전한 데이터 관리가 가능하다는 점이 있다.

근데 데이터베이스 꼭 알아야 해요? 😟

프론트엔드가 굳이 데이터베이스에 대해 알아야 하냐고 생각이 들 수 있지만, 그렇게 생각하면 큰 오산이다. 어쨌든 프론트엔드 단에서 하는 업무는 결과적으로 백엔드에서 넘어온 데이터를 활용하여 완성할 수 있는 부분이고 그러기 위해선 넘어오는 데이터가 어떤 형식인지, 어떠한 방식으로 넘어오는지 등에 대한 내용은 이해를 돕기 위해 충분히 필요한 내용이다.
또한 개발은 혼자나 한쪽의 영역에서만 진행하는 것이 아니라, 서로 다른 부분들이 토론과 합의에 의해 이루어지는 것이기 때문에, 이에 대한 부분을 무시하고 "아 나는 그거 달라고 했는데, 왜 말을 못 알아먹지?" 라는 마인드를 접어두기 위해선 자료 구조나 데이터베이스에 대한 이해는 필수 불가결한 부분일 것이다.
그러니 앞으로 진행될 프로젝트의 과정에서 서로의 잘잘못 따지다가 뼈만 남은 웹 페이지를 남기기 싫다면 데이터베이스에 대해 간단히라도 머릿 속에 새기고 가자.

(그리고 이거 배우면 나름 재밌기도 한데...😅)

RDBMS(Relational DataBase Management System) 🖇️

DBMS는 배워서 알겠는데, RDBMS는 무엇일까? RDBMS를 해석하면 관계형 데이터베이스 관리 시스템이라는 의미를 갖는다. 그렇다면 관계형 데이터베이스에 대해 우선적으로 알아보자.
관계형 데이터베이스(RDB)란 관계형 데이터 모델에 기초를 둔 데이터베이스이다. 이 말이 무슨 말이냐면, 데이터를 관리하는 방식에 있어 데이터 간의 관계를 중심으로 이를 진행한다는 뜻이다. 다음 그림를 보면 이를 더 쉽게 이해할 수 있다.

위 그림은 관계형 데이터베이스가 어떠한 구조를 갖고 있는지 보여준다. 같은 분류로 묶이 여러가지 데이터베이스가 서로 간의 관계에 따라 연결되어 있다.
RDBMS에서 데이터베이스는 행(Row)과 열(Column)로 구성되어 있는 엑셀의 형식과 유사한 형태를 가진다. 이러한 표 형식의 2차원 데이터가 테이블(Table)에 해당하고 이러한 테이블들이 위와 같이 관계를 이루고 있는 것이 관계형 데이터베이스인 것이다. 그리고 이러한 관계형 데이터베이스를 관리하는 것이 RDBMS다. 대표적인 RDBMS로 Oracle, MySQL, PostgreSQL 등이 이에 해당한다.

💡 NoSQL(Not Only SQL)

엑셀이 장기간 동안 사무실을 지배했지만, 더이상 RDBMS로는 처리할 수 없을 만큼 복잡하고 방대한 데이터들이 생겨나기 시작했다.
그러한 연유로 NoSQL에 대한 중요성이 강조되었다. NoSQL이란 "Not Only SQL"의 약자로 관계형 데이터베이스와는 다르게 데이터나 테이블 간의 관계를 정의하지 않는다. 그렇기 때문에, 자유롭게 데이터를 저장할 수 있다는 장점이 있다.
그리고 key , Value 값으로만 나타내며 굳이 스키마 규격에 맞춰서 데이터를 다루지 않아도 된다는 장점 때문에 대용량 데이터의 관리에 유리하다.
하지만 RDBMS가 좀 더 정형화 된 데이터라는 점에서 아직까지 확실한 장점이 있기에, 각각의 필요 분야에서 적절히 사용 됨을 인지하자.

💡 Primary key

2차원 배열은 행과 열을 가지는데 주로 각 행의 첫 번째 요소는 해당 열의 인덱스가 배정되어 있는 것을 확인할 수 있다. 이를 Primary key 라고 하며 관계형 데이터베이스에서 데이터의 식별자로 이용하는 용도로 주로 쓰인다.

테이블 간의 관계 🔗

앞에서 말했듯이 관계형 데이터베이스는 각 테이블이 상호 연관성을 가지며, 이는 완전한 독립이 존재하지 못한다는 것이다. 그리고 그러한 관계는 테이블 간의 관계가 어떻게 되어 있는가에 따라서도 구분이 되는데, 이는 크게 1:1(One to One), 1:M(One to Many), M:M(Many to Many)로 구분된다.
우선 1:1은 각각의 테이블에 있는 데이터가 하나당 하나의 데이터만 연결되어 있는 것이다. 이에 대한 예시로 사람과 주민등록번호라는 각각의 테이블이 존재할 때가 있다.
각각의 사람의 이름이 적혀있는 테이블과 그 사람들의 주민등록번호가 저장되어 있는 테이블이 존재할 때, 각각의 사람들은 하나의 주민등록번호 만을 가질테고, 반대로도 각각의 주민등록번호는 한 사람의 주민등록번호 밖애 될 수 없다. 이렇게 각각의 데이터의 관계가 1:1로 이루어진 관계를 1:1 관계라고 한다.
다음으로 1:M은 하나의 데이터가 다른 테이블에 여러 데이터와 관련되어 있는 형태의 관계이다. 이에 대한 예시로 사람과 그 사람들의 가족의 이름들이 포함된 테이블의 관계를 예시로 들 수 있다.
역시나 하나의 테이블에는 사람들의 이름이 저장되어 있고, 다른 테이블에는 그 사람의 가족의 이름들이 포함된 명단이 있다. 한 사람은 여러 명의 가족의 이름과 대응이 될 수 있지만, 해당 가족들은 한 사람과 연관되어 있는 형태의 관계를 확인할 수 있다. 이러한 관계를 1:M 관계라고 정의할 수 있다.
마지막으로 M:M 관계는 다수의 데이터와 다수의 데이터가 복수 대 복수로 연결될 수 있는 관계를 말한다. M:M 관계는 한 사람과 그 사람이 입은 옷들을 저장한 테이블 간의 관계로 설명할 수 있다.
이 경우 한 사람당 머리부터 발끝까지 다양한 옷을 입었을테고, 그 옷들은 각각의 브랜드가 있을 것이다. 하지만, 다른 사람이라도 같은 옷을 입었을 경우가 존재하고 이렇게 되면 한 사람이 여러가지 옷을 입고 있지만, 하나의 옷이라도 여러 사람들이 공통적으로 입고 있을 수 있는 것이다. 이러한 관계를 M:M 관계라고 정의한다.

트랜잭션(Transaction) 🧰

트랜잭션(Transaction)이란 괸계형 데이터베이스가 제공하는 기능 중 하나로, 데이터베이스 상태를 변환시키는 하나의 논리적 기능을 수행하기 위한 작업의 단위 또는 한꺼번에 모두 수행되어야 하는 일련의 연산들을 의미한다.
트랜잭션은 ACID를 보장하면서 앞에서 언급한 일련의 작업이 하나의 작업처럼 취급되는 것이라, 모두 성공(Commit) 아니면 모두 실패(Rollback)만이 있는 것을 의미한다.
그렇다면 이 ACID에 대해 간단히 알아보자.

원자성(Atomicity)

원자성이란 트랜잭션의 연산은 데이터베이스에 전부 반영되든지, 아니면 전혀 반영이 되지 않든지 해야 한다는 것이다.
트랜잭션 내 모든 명령은 반드시 수행되어야 하며 하나의 명령이라도 오류가 발생한다면 트랜잭션 전부가 취소 되고 원래대로 되돌아간다.

일관성(Consistency)

일관성이란 트랜잭션의 실행이 완료되었을 때, 데이터베이스의 상태가 일관성이 있어야 함을 의미한다. 시스템의 고정 요소는 트랜잭션 전후와 관계 없이 상태가 같아야 한다.

독립성(Isolation)

독립성은 하나의 둘 이상의 트랜잭션이 실행되는 동안에는 다른 트랜잭션이 개입하지 못함을 의미한다. 또한 수행 중인 트랜잭션이 완료되기 전까지는 다른 트랜잭션이 해당 트랜잭션의 수행 결과를 참조할 수 없다.

지속성(Durability)

마지막으로, 지속성은 성공적으로 완료한 트랜잭션이 만든 결과는 시스템 고장이라도 저장이 되면 지속적으로 유지한다는 것이다.

💡 트랜잭션의 연산(Commit/Rollback)

위에서 언급한 트랜잭션의 연산에 대해 알아보자.
우선 Commit 연산은 한 가지의 트랜잭션이 성공적으로 마무리를 하고 일관된 상태를 유지할 때, 연산이 완료됐음을 관리자에게 알려주는 것이다.
그리고 Rollback 연산은 하나의 트랜잭션 처리가 비정상적인 종료가 되어 일관성이 깨졌을 때, 일부 정상 처리된 것이 있더라도 일관성을 위해, 해당 트랜잭션이 행한 모든 연산을 취소하는 것이며, Rollback의 경우 해당 트랜잭션을 재시작 혹은 폐기한다.

마무리 🧾

위 내용들을 요약하면 다음과 같이 정리할 수 있다.

• DB(Database)는 데이터의 집합이고, DBMS(Database Management System)는 이를 중간에서 관리하는 소프트웨어다.
• DB는 데이터 보존과 체계적 관리의 측면에서, DBMS는 생산성, 기능성, 신뢰성의 측면에서 이점을 갖는다.
• RDB(Relational Database)는 데이터베이스 중 데이터 간 관계에 중심을 둔 데이터베이스고, RDBMS는 이를 관리하기 위한 시스템으로, Oracle, MySQL, PostgreSQL 등이 이에 해당한다.
• 테이블 간의 관계에 따라 1:1, 1:M, M:M 관계로 구분된다.
• 트랜잭션(Transaction)이란 논리적 기능 수행을 위한 작업 단위 내지 일련의 과정을 의미한다.
• 트랜잭션은 ACID를 보장하며 일련의 작업이 전체의 성공(commit) 혹은 실패(Rollback)로만 이루어진다.

그럼 다음 토픽인 HTTP에서 다시 돌아오겠다.

자바스크립트의 DOM에 대한 내용으로 관련 서적인 DOM을 깨우치다를 포함하여 여러 자료들을 참고하여 작성하였습니다! 😊 사실상 해당 서적 리뷰가 맞지 않나...

DOM을 알아보자! 📃

DOM(Document Object Model)이란 무엇인가. 정말 어디에도 있는 DOM은 자바스크립트를 통해 HTML을 조작하기 위하여 알아야 할 개념 중 하나다. 단어 그대로 DOM은 문서 객체 모델로 XML이나 HTML 문서에 접근하기 위한 일종의 인터페이스다.

💡 인터페이스에 대한 간단한 이해

인터페이스(interface)란 서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고 받는 경우의 접점이나 경계면으로 정의된다. 이렇게 말하면 어렵게 들리지만, 둘 사이에서 상호작용 하는 곳이라고 해석하면 이해하기 편하다.
그렇다면 우리가 흔히 말하는 UI(User Interface)는 사용자와 컴퓨터 간의 상호작용 접접이라고 해석할 수 있다. 대표적인 UI 요소로서 버튼, 토글, 모달 등이 있는데 각각의 기능에 대해 생각해보면 인터페이스에 대한 이해가 더 수월할 것이다.

그렇다면 왜 HTML은 DOM으로 변환되어야 하는 것일까? 사실 자바스크립트 입장에서 HTML은 유의미한 데이터 형식이 아니다. 단지 텍스트 형식의 데이터인 것이다. 이를 자유롭게 다루기 위해서는 각 태그 요소가 어떠한 상관관계를 갖고, 어떠한 속성을 갖는 지에 대한 내용을 정의하여 객체 형태로 저장할 필요가 있었던 것이다.

💡 DOM은 원래 XML 문서를 위한 API 였다?

간단하게 말하자면, HTML의 문법이 XML 문법에 비해 비교적 유연하기 때문이다.
HTML은 가끔 시작 또는 종료에 대한 태그를 생략하는 것이 가능한데, 이렇게 너그럽고 편한 HTML의 요소가 공식적인 문법을 작성하기 어렵게 만드는 문제가 있다. 그렇기에 본디 비교적 엄격한 XML을 위한 것이었지만, HTML에서도 사용 가능하도록 확장되었다고 한다.

앞에서 작성했던 브라우저의 작동 방식에서 DOM에 대한 이야기를 많이 했는데, 정작 DOM에 대한 자세한 설명도 부족하고, 이에 대한 근본적인 이해가 부족한 것 같아서 해당 포스팅을 작성한다.
이어지는 내용에서 DOM에 대한 이해를 위해서 노드(node)에 대해 알아볼 것이다.

노드(node)학개론 🌱

위 여성분처럼 노드를 자유자재로 다루기 위해 노드에 대해 알아보자! 구글에 노드(node)의 정의에 대해 검색하면 컴퓨터 과학에서 쓰이는 기초적인 단위라고 한다. 노드에 대한 내용을 정리하면 다음과 같이 정리할 수 있다.

• DOM을 구성하는 각 요소는 노드다.
• 노드들로 구성된 트리 형태의 구조가 HTML에서 인덱싱을 통해 구분된 계층 구조와 캡슐화를 표현한다.
• 모든 요소가 노드에 해당하며, 공백과 주석도 마찬가지다.

노드의 유형

이러한 노드 중 HTML 문서를 다룰 때 가장 일반적인 노드 유형은 다음과 같다.

• DOCUMENT_NODE (예 : window.document)
• ELEMENT_NODE (예 : HTML의 태그들 <body>, <a> 등)
• ATTRIBUTE_NODE (예 : class='funEdges')
• TEXT_NODE (예 : 줄바꿈과 공백을 포함한 HTML 내 텍스트 문자)
• DOCUMENT_FRAGMENT_NODE (예 : document.createDocumentFragment())
• DOCUMENT_TYPE_NODE (예 : <!DOCTYPE html>)

위 노드 유형들을 포함한 모든 노드들은 각각의 요소를 식별할 수 있는 코드 값을 가진다. 모든 노드 유형들과 각각에 해당하는 코드 값을 표현하면 다음과 같다.

노드의 상속

DOM 트리의 각 노드 객체는 Node 로 부터 속성과 메서드를 상속받는다. 위 그림은 상속 관계를 표현한 그림이다. 그림에는 나오지 않았지만, Node 또한 다른 객체들처럼 Object.prototype 으로 부터 상속받는다.
또한, 위 그림에서 확인할 수 있듯이 각 노드 객체는 Node 를 포함한 해당 모든 상위 객체로부터 속성 및 메서드를 상속받는다.

노드의 속성 및 메서드

노드 객체의 속성과 메서드에서 중요한 내용은 계층 구조가 존재하고 주로 관계를 다룬다는 점이다. 또한 위에서 언급한 바와 같이 상위 노드 객체의 속성과 메서드를 상속받는다. 다음의 예시로 이에 대해 간단히 알아보자.

우선 기준이 되는 요소를 id 값으로 document.getElementById 를 통해 <body> 태그를 불러와 변수 start 에 저장한다. 이어서 해당 변수를 활용하여 노드 객체의 속성 값을 반환해본다.
그런데 start 의 첫 번째 자식 요소를 firstChild 를 통해 불러왔는데, 반환 값으로 <ul> 태그가 아닌 #text 가 반환되었다. 이유는 위에서 언급한 "모든 요소가 노드에 해당하며, 공백과 주석도 마찬가지다" 라는 부분에서 알 수 있다. 해당 HTML 문서에서 start 의 첫 번째 자식 요소는 body 와 <ul> 사이에 있는 공백이고, 그렇기에 #text 를 반환한 것이다. 만약, <ul> 태그를 지정하고 싶었다면 아래 두 가지 방식을 활용하면 되는 것이다.
이렇게 노드 간의 관계를 활용하여 연관된 노드를 지정하여 활용할 수 있다. 자주 사용하는 속성과 메서드는 다음과 같다.

속성

• childNodes
• firstChild
• lastChild
• nextSibling
• parentNode
• previousSibling

  메서드

• appendChild()
• removeChild()
• hasChildNodes()

다음의 예시를 보면 더 이해가 편하다.

개발자 도구를 사용하여 각 요소의 관계를 통해 속성과 메서드를 활용해보겠다.

최상단 부터 차례로 해석해보자. 우선 parent 클래스를 갖는 요소 중 첫 번째 인덱스에 위치한 요소를 변수 el 로 지정한다. el 을 입력하니 올바르게 div.parent 가 나타난 것을 확인할 수 있다. 해당 노드가 기준점이 되어줄 것이다.
이어서 el 의 자식 요소의 갯수를 el.childElementCount 를 통해 세 보니 5 라는 값이 출력되면서 알맞은 갯수를 출력해주었다. 이어서 el.firstElementChild 를 사용하여 첫 번째 요소를 찾고, 해당 요소에서 더 들어가 el.firstElementChild.nextElementSibling 를 통해 첫 번째 요소의 형제 요소를 찾았더니 알맞은 값이 출 됨을 확인할 수 있다.
마지막으로 해당 el 에 요소를 추가하기 위해 const div = document.createElement('div') 를 통해 div 태그를 하나 생성한다. 그리고 해당 div 에 classList 를 통해 child 라는 클래스를 추가했으며, 마지막으로 el 에 만들어 둔 div 를 추가하고 innerText 를 활용하여 해당 div 내부에 6 이라는 텍스트를 추가했다. 그렇게 해당 결과와 같이 5개 였던 요소들이 6개로 추가되었고, 같은 클래스를 부여하여 같은 CSS가 적용 되었음을 확인할 수 있다.

노드의 추적과 추가/생성

노드의 추적

위 예시에서 div.parent 노드를 HTML에서 className 을 통해 가져온 것을 확인할 수 있다. 이렇게 DOM에서 메서드를 사용하여 특정 노드를 찾아올 수 있는데, 그 방법은 다음과 같다.

• document.querySelector('selector')
• document.querySelectorAll('selector')
• document.getElementsByClassName('className')
• document.getElementById('idName')

해당 메서드들을 활용하여 DOM 노드들을 특정 기준으로 불러올 수 있다.

각 메서드의 활용 방법과 반환 값을 알 수 있는 예시다. 해당 예시는 위 예시에서 div.child 의 마지막 요소만 div#lastChild 로 바꾼 뒤 진행한 예시다. 위 메서드들은 인자의 형식이나 반환 값의 형식에 따라 구분된다.
우선 인자 형식에 따라 document.querySelector('selector') , document.querySelectorAll('selector') 은 선택자 작성 방식으로 인자 값을 사용한다. 하지만 document.getElementsByClassName('className') , document.getElementById('idName') 의 경우는 클래스 명, ID 명을 바로 작성한다는 차이점이 있다.
그리고 반환 값의 형식에 따라 document.querySelector('selector') , document.getElementById('idName') 은 단일 값을 반환하기 때문에, 노드 하나 만을 반환하고 일치하는 노드가 존재하지 않는 경우 null 을 반환하지만, document.querySelectorAll('selector') , document.getElementsByClassName('className')의 경우 복수의 값을 반환하기 때문에 인덱스 값을 [i] 을 통해 입력해야 하고 값이 없을 때도 빈 배열을 반환한다는 차이가 있다.
이렇게 노드를 추적하여 특정 위치에 요소를 추가하거나 변경하는 것이 가능하다.
그렇다면 예시 일부를 추출하여 요소 생성과 추가의 과정을 설명해보자.

우선 div 라는 변수에 createElement 라는 메서드를 사용하여 div 태그 노드를 생성하고 저장한다. 그리고 해당 div 값에 classList 를 통해 ,child 라는 클래스를 부여해준다. 이후 앞에서 선언해 준 el 에 append 를 통해 div 변수를 추가한다. 마지막으로 innerText 를 통해 el 의 마지막 자식 요소에 6 이라는 값을 추가한다.
위에서 강조 표시한 생성과 추가에 대해 이어서 알아보자.

노드의 생성 및 추가

생성

• createElement()
• createTextNode()
  #### 추가
• innerHTML/Text = input
• outerHTML/Text = input
• textContent = input
• insertAdjacentHTML()

위 예시를 보면 각각의 방법으로 생성을 진행하고 추가도 진행한 내용이다. createElement() 의 경우엔 앞 전의 예시에서 사용했기 때문에 제외하였다.
우선 createElement() 와 createTextNode() 의 경우 선언과 동시에 변수에 저장되고 값의 형태의 경우, 전자는 element 노드 형태로, 후자의 경우 Text 노드 형태로 저장된다.
그리고 총 네 가지의 추가 방법을 작성했는데, innerHTML/Text 은 노드 요소 내부에, outerHTML/Text 의 경우 태그 전체를 갱신하며 기존 태그가 사라진다고 생각하면 된다. textContent 는 Text 요소를 생성하여 갱신하고, 마지막 insertAdjacentHTML() 의 경우엔 element 노드에서만 동작하며 인자 값이 두 가지가 들어가는데, (location, 'textStyleTag') 로 구성되며 앞엔 정해진 키워드(beforeend 등)를 인자로 갖고 뒤엔 outerHTML 작성과 같이 전체 노드 형식을 작성한다.
이외에도 추가에는 두 가지 방법이 더 있다.

앞의 방식들은 대부분 노드 값을 갱신하는 것이었다면, 위 두 가지 방법은 요소를 지우지 않고 추가를 진행한다. appendChild() 의 경우 추가하고자 하는 노드를 해당 요소의 맨 끝 자식 요소로 추가한다. 배열 메서드의 push() 와 같은 구조라고 생각하면 편할 것 같다.

insertBefore() 의 경우 인자 값으로 두 가지를 받는데, (element, location) 의 형태로 받게 된다. 우선 추가하고자 하는 요소를 받고, 이후 경로를 지정하여 해당 요소 기준으로 앞에 위치한다. 이렇게 유연한 방식으로 노드를 추가할 수 도 있다.

노드의 제거와 변경

노드의 생성과 추가가 이루어졌으면, 제거와 변경도 가능할 것 임을 이미 짐작했을 것이다. 제거와 변경은 다음과 같은 메서드를 사용하여 진행할 수 있다.

제거

• removeChild()

변경

• replaceChild()

우선 제거의 경우 removeChild() 와 같이 상속 관계를 활용하여 진행할 수 있다. 이 경우 해당 노드의 parentNode 혹은 parentElement 를 참조하여 제거를 진행할 수 있다.
변경도 제거와 같이 상속 관계를 활용하면서, 인자를 두 가지를 받는다. 인자는 (inputElement, location) 으로 location 에 inputElement 를 대입하여 사용 가능하다. 위 예시의 경우 parent 의 마지막 자식 요소를 지정하여 변경한 모습이다.

노드의 복제

특정 노드의 구조를 복제하여 사용할 수도 있다. 그렇게 된다면, 같은 구조의 노드는 반복적으로 생성할 필요가 없는 것이다. 복제는 다음의 방법으로 진행할 수 있다.

복제

• cloneNode()

해당 예시를 보면 parent 노드 자체만 복사한 경우와, 노드 전체를 복사한 경우가 구분되어 있다. cloneNode() 메서드의 경우, 특정 노드를 복제하는데 인자 값에 따라 전체를 복사할 지, 단일 요소만 복사할 지를 구분할 수 있다.
cloneOne 의 경우 인자 값을 부여하지 않았기 때문에, parent 노드 단일 객체 만을 복제했지만, cloneAll 의 경우 인자 값에 true 를 추가하여 해당 노드의 자식 요소들까지 전부 복제하였다.

마무리 🧾

완벽하게 해당 책을 독파하고 전체를 정리하여 작성하고 싶었지만, 부트캠프 커리큘럼과 동시에 진행하고자 하니 약간 버거워 내가 실제로 활용했던 부분에 대해서 작성하는 것을 1차 목표로 두고 기존의 작성 목록을 마무리지었다.
이어서 리액트를 진행할 예정이지만, 바닐라 자바스크립트 또한 놓치지 않고 꾸준히 공부해야 함을 명심하자.

🔖 참고

DOM : MDN Web Docs : DOM 소개 + 각종 메서드들

한 주간의 학습 내용을 복기하는 겸 로그인 화면을 간단하게 구현하고, 활용한 학습 내용을 정리한 포스팅입니다. 😊

프롤로그 🗂️

이전에 공부하면서 느낀 내용 중, 가장 큰 부분은 "이론을 배우고, 실습해보자" 라는 부분인 것 같다. 항상 인간은 자신이 망각의 동물인 것 마저 망각하고 얻은 지식에 대해 기만하는 자세가 생기는 것 같다(물론 나만 그럴 수도 😂).
자신감을 갖는 것도 중요하지만, 그 지식이 온전히 나의 것이 되기 위해서는 단순히 학습하는 것 외에도 추가적인 노력이 필요함을 요즘 절실히 느끼는 것 같다.
그래서 복기하는 시간을 갖자고 생각했던 것 같다. 그리고 복기하면서 다시금 "그때 해냈던 일이지만, 다시 하려니 어려울 수도 있구나" 라는 것을 심심치 않게 느꼈고, 가능한 뭔가 찝찝하고 확실하지 않다면 이렇게 정리하는 시간을 갖는게 좋을 것 같다. 드라마틱한 결과는 아니지만 소소하게 정리하다 보면, 언젠간 그 규모가 눈에 띄게 커지지 않을까 기대해본다. 🧩

개요 🗺️

Github Link 🔗

Github Page Link 📄 Github Repository Link 📦

복기 사항

• HTML container tag 의 역할과 상속 관계의 이해
• CSS display : flex 에 대한 이해
• getElementByClassName 와 getElementByID() 가 불러오는 데이터 구조의 이해
• addEventListener() 를 통한 이벤트 구현

구현 사항

• 인스타그램의 로그인 영역을 간단하게 구현
• login button 을 누르는(click) 이벤트가 발생하면, ID 와 Password 에 따라 결과 값을 다르게 alert 하는 기능

기술 스택

"아 이번엔 CSS와 JavaScript로 하겠습니다. 그런데, HTML을 약간 곁들인..."

결과 내용 🙌🏻

기부니가 조크등요 🕺🏻

막 그리 대단한 결과물은 아니지만, 내가 알고 있는 개념을 명확히 적용할 수 있었다는 점에서 뿌듯한 결과물이었다. 또한, 생각했던 것보다 소요 시간이 짧았기에, 그 부분도 내가 어느 정도 이해를 했다는 부분이라 생각되어 보람찼다.
아침에 일어나자마자 생각하고 구현해 본 사항이라, 실제 인스타그램을 클론하기 위해서는 더 많은 UI 요소가 필요하겠지만, 이를 초석이라 생각하고 조금씩 리빌딩 해볼까 싶다.

로그인 화면 리뷰 📟

로그인 화면 : HTML/CSS

HTML

<body>
    <div class="main">
        <h1 class="logo">Acidgram</h1>
        <div class="container">
            <input type="text" placeholder="ID" id="id" class="account">
            <input type="password" placeholder="Password" id="password" class="account">
            <button id="login" class="account">login</button>
            <p id="alert" class="account"> </p>
        </div>
    </div>   
    <script src="script.js"></script>
</body>

CSS

.main {
    width: 250px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid lightgrey;
    border-radius: 5px;
}

.logo {
    margin-top: 0px;
    margin-bottom: 40px;
}

#login {
    width: 100%;
    background-color: skyblue;
    border-color: transparent;
    color: white;
}

.account {
    display: block;
    margin-bottom: 3px;
    padding: 3px;
    border: 1px solid lightgray;
    border-radius: 3px;
}

#alert {
    border-color: transparent;
}

CSS 구성에 있어, 최대한 display : flex 를 활용하여 작성하려 했다.
먼저, 전체를 포괄하는 .main 에 display : flex 를 작성하고 justify-content: center; , align-items: center; 를 통해 가로, 세로 가운데 정렬을 진행한다. 그리고 flex-direction : column 을 통해 열방향으로 정렬하여 세로 한 줄로 정리하여 마무리했다.
나머지 부분은 rgb 값을 추출하진 않았고 유사하다고 생각하는 색상을 추가했으며 이외의 구성 또한 비슷하게 구현해봤다.

로그인 과정 : 자바스크립트

로그인 성공 화면

로그인 실패 : Password 오류

로그인 실패 : ID 오류

실패 횟수 초과

자바스크립트 코드

const id = document.getElementById('id')
const password = document.getElementById('password')
const login = document.getElementById('login')
let errStack = 0;

login.addEventListener('click', () => {
    if (id.value == 'acid') {
        if (password.value == '0000') {
            alert('로그인 되었습니다!')
        }
        else {
            alert('아이디와 비밀번호를 다시 한 번 확인해주세요!')
            errStack ++;
        }
    }
    else {
        alert('존재하지 않는 계정입니다.')
    }

    if (errStack >= 5) {
        alert('비밀번호를 5회 이상 틀리셨습니다. 비밀번호 찾기를 권장드립니다.')
    }
})

우선 addEventListener() 를 사용하기 이전에, id , password, login 에 getElementById() 를 통해 해당하는 elementNode 를 할당한다. 그리고 password 를 틀린 횟수를 할당할 errStack 변수 또한 정의해준다.
그리고 해당 노드의 value 를 활용하여 4가지 경우를 정의했다.

• id.value 가 일치하고, password.value 마저 일치하는 경우
• id.value 만 일치하는 경우
• id.value 마저 일치하지 않는 경우
• id.value 만 일치할 때, 해당 계정을 기준으로 password 를 5회 이상 틀린 경우

그렇게 구현된 화면이 위에서 부터 순서대로 나와있다.

마무리 📋

한 주간 배웠던 내용을 정리하면서 내가 몰랐던 부분에 대해서도 다시금 알아가고, 또 팀원들과 별도로 스터디를 진행하면서 새로이 알게 된 지식들도 정말 값진 경험들이었다.
앞으로 무언가가 궁금하면, 주저 말고 찍어보자. 그렇다면 화면에 답이 나올 것이다.

해당 포스팅은 브라우저 개발자 도구에 대한 내용을 포함하고 있으며, 크롬(Chrome)을 중심으로 다루고 있습니다. 😊

프롤로그 🌊

HTML을 작성하고 CSS나 자바스크립트를 작성할 때, 원하는 대로 되지 않으면 애꿎은 콤퓨타 탓만 하게 된다. 사실 우리가 사용하는 PC나 브라우저는 아무런 잘못이 없는데 말이다. (그만큼 화풀이가 필요하시다는 거겠지... 😂)
암튼 롤에서 습관적으로 하게 되는 남탓을 브라우저에게 하면서 대답을 받으려 하지 말고, 브라우저가 어떤 곤경에 빠져 있는지, 이 친구가 왜 내 말을 이해하지 못하는지(사실은 내가 뭘 잘못했는지)를 잘 알려주는 것이 개발자 도구(Development Tools)다.
그러니 이번 기회에 개발자 도구에 대해 배워서, 문제 해결을 위한 무지성 코드 작성으로 헤매고 있는 무민이가 아닌 영리한 개발자가 되도록 하자! 🦛

개발자 도구 🔍

코드를 작성하고 실행했을 때, 예상치 못한 오류가 발생한다면 갑자기 삶이 그렇게 고되게 느껴질 수가 없을 것이다. 이러한 상태를 빠르게 편-안해질 수 있도록 하는 것이 개발자 도구(Development Tools)이라고 앞에서 말한 바 있다.
개발자 도구는 브라우저에서 기본적으로 제공되는 개발을 도와주는 도구이다. 이를 이용하면 어떠한 부분에서 문제가 발생해서 내가 원하는 부분이 구현이 되지 않았는 가에 대해 쉽게 알 수 있다. 또한, 원하는 수정 사항을 브라우저 내에서 수정을 진행하여 실시간으로 이를 확인하며 원본 파일을 건드리지 않을 수도 있다.
단순히 이런 기능 외에도 다양한 패널과 탭이 존재하여, 그 사용법을 알고 있다면 문제 발생에 대한 대처를 명확하고 신속하게 하여 생산성을 극대화 시킬 수 있다.
기본적으로 개발자 도구는 윈도우 기준으로 F12 키 혹은 ctrl + shift + i 커맨드를 사용하여 열 수 있다. 이번 포스팅에선 크롬(Chrome)을 활용하여 먼저 학습을 진행했던 Elements, Console, Network, Application 패널에 대해 알아보자.

Elements panel 🧱

Elements panel은 웹 페이지의 DOM(node)이나 CSS(Style)에 대한 내용을 확인할 수 있는 패널이고, 해당 패널에서 UI나 CSS의 수정을 진행할 수도 있다. DOM에 대한 사항은 위 이미지 기준으로 왼쪽 영역에서 확인 가능하고, CSS에 대한 사항은 Styles 와 Computed 에서 확인할 수 있다.

DOM 보기 및 변경

특정 DOM node가 어디 있는지 찾기 위해 다음과 같은 방법을 시도할 수 있다.

• 해당 영역 마우스로 드래그하고 마우스 오른쪽 클릭 후 검사
• 검사 아이콘(위 노란색 영역) 클릭 후, 화면에서 요소 지정

이렇게 해당 노드를 찾았다면 마우스를 통해 토글을 열고 닫으면서 노드를 확인할 수 있지만, 키보드를 통해서도 가능하다. 키보드를 통한 기본 조작은 방향키를 사용하며 방법은 다음과 같다.

• 방향키 위, 아래(↑, ↓) : 노드 이동
• *방향키 오른쪽(→) : 토글 열기 *
• 방향키 왼쪽(←) : 토글 닫기

또한, 원하는 노드를 찾기 위해서 Elements 내부에서 ctrl + f 를 통해 노드 찾기 탭을 열 수 있다.

그리고 노드들을 추가(편집)나 제거, 재정렬 등을 하는 요소 수정이 가능하다. 해당 기능을 사용하는 방법들은 다음과 같이 정리할 수 있다.

• 노드 추가 및 편집 : 노드 혹은 텍스트 부분을 더블 클릭하여 편집 모드 실행. 요소 노드, 텍스트는 편집, 속성은 모두 가능.
• 노드 제거 : 노드 선택 후, 키보드 Delete 키 입력
• 노드 재정렬 : 노드 선택 후, 드래그 하여 이동

마지막으로, Elements 패널에서 ESC 키를 누르면, Console 패널을 동시에 사용할 수 있다.

CSS 보기 및 변경

CSS의 경우에도, 앞의 DOM node를 보거나 변경하는 방법과 유사하다. 조금 다른 점이 있다면 추가의 경우 해당하는 노드 영역을 클릭하면 새로운 CSS를 추가할 수 있다.
위 Styles 탭을 보면 위에서부터 아래까지 구역이 나누어져 있는 것을 알 수 있다. 해당 구역은 아래에서 위로 갈 수록 CSS 요소의 우선 순위가 올라간다.
이외 추가적인 사항에 대해서는 크롬 개발자 도구 CSS 보기 및 변경에 대한 사항에서 찾아보는 걸로 마무리 하자.
그리고 여기서는 Styles과 Computed의 차이점, user agent stylesheet는 무엇인가에 대해 알아보자!

💡 Styles 와 Computed

Styles와 Computed는 둘 다 CSS 요소를 보여주고 있지만, 그 표현 방법에서 다소 차이를 보인다.
우선 Styles의 경우 위와 같이 해당 노드에 어떤 선택자를 통해 CSS 요소가 반영되었는 지 혹은 반영되지 않았는 지에 대한 내용을 담고 있다. 하지만, Computed의 경우 다르게 표현되는 것을 확인할 수 있다. 위 이미지는 같은 노드의 CSS 값을 Computed 탭에서 확인한 것이다. Computed는 화면에 렌더링 되는 스타일 내용만 나열하고 다른 스타일 내용은 반영하지 않는다. 이를 통해 실제 화면 렌더링에서 어떠한 요소들이 반영되는 지에 대해 파악이 가능하다. 추가적으로 해당 탭에서는 편집이 불가능하다.

💡 user agent stylesheet

user agent stylesheet란 브라우저가 제공하는 기본 스타일 값을 의미한다. <button> 태그 등을 작성하면, CSS 요소를 작성하지 않았음에도 불구하고, 버튼의 형태를 유지한 상태로 화면에 렌더링 되는 것을 확인했을 것이다. 이는 브라우저에서 해당 태그에 대해 특정 CSS 값을 기본적으로 부여하도록 한 것이기 때문이다.
해당 영역은 수정이 불가능하며, 브라우저 별로(Chrome, Safari, IE) 기본적인 속성 값이 상이하기 때문에, 대개 개발 시작 단계에서 reset.css 혹은 normalize.css 에서 기본 스타일 값을 모두 초기화 시키고 진행하여 브라우저 종류에 상관 없이 동일한 화면을 출력하도록 한다.

Console panel ⚠️

Console panel은 자바스크립트와 연관된 패널로 자바스크립트 코드를 즉시 실행해보거나, 디버깅의 과정에서 사용하는 패널이다. 개발자는 console에 기록된 메세지를 보면서 자바스크립트가 원활하게 작동하는 지를 확인할 수 있고, 만약 문제가 발생한다면 오류 내용을 기록하여 개발자로 하여금 원인을 찾기 수월하게 만들어 준다.
위 예시를 보면 console.log() 를 통해 'Hello, World!' 라는 문자열을 콘솔에 출력하도록 자바스크립트 코드를 작성하였다. 이렇게 바로 자바스크립트 구문을 작성하여 DOM 노드를 제어하거나, 수정하고자 하는 자바스크립트 구문을 테스트 해볼 수 있다.

위 이미지에서 패널 오른쪽 노란색 부분을 누르면 콘솔 설정에 대한 내용을 볼 수 있다. 콘솔 설정의 각 항목에 대한 내용은 다음과 같다.

• Hide network : 네트워크 메시지 숨기기 ex) 404
• Preserve log : 페이지 로드 시 메시지 유지 : 기본적으로 콘솔은 새 페이지 로드 시, 메시지를 삭제함
• Selected context only : 선택한 context만 필터링 : top 영역의 토글을 누르고 드롭다운에서 해당 context 선택
• Group Similar messages in console : 메시지 그룹화 활성화/비활성화
• Log XMLHttpRequests : 모든 XMLHttpRequest 와 Fetch 콘솔에 대한 요청을 기록
• Eager evaluation : 반환 값 미리보기 활성화/비활성화
• Autocomplete from history : 앞에서 작성한 표현식 자동 완성 활성화/비활성화
• Evaluate triggers user activation

위와 같은 기능을 활용하여 Console panel을 사용 함에 있어 더 효과적으로 활용할 수 있다. 실제로 프론트엔드의 경우 "콘솔 찍어 봤나요?"라는 말을 하듯이, 다른 도구를 사용하는 것보다 console.log 를 활용하는 경우가 대부분이다.

💡 console 은 객체다

무의식적으로 사용하는 console.log() 이지만 정작 이게 무엇인지 자세히 생각해보지 않았을 것이다.
앞의 객체 포스팅에서도 짧게 언급했었지만, console 은 객체 형태이기 때문에 해당하는 프로퍼티들이 있을 것이고, 메서드도 존재할 것이다. 그 중 하나가 log 메서드이고, console.log() 는 하나의 메서드를 사용했다고 생각 함이 옳다.

Network panel 📶

Network panel은 웹 페이지 로드부터 필요한 이미지, 미디어, url과 같은 리소스들을 가져오는 과정을 확인할 수 있는 패널이다.
자세히 말하자면, 해당 리소스의 이름은 무엇인지, 로드 상태가 어떤지, 형식은 어떤지 등의 내용을 포함하여 요청하는 데 얼마 만큼의 시간이 걸렸는지 등의 내용을 알 수 있기 때문에 페이지 로드에 있어 지연되는 부분이나 문제인 부분의 성능 향상 내지 오류 해결을 도모할 수 있다.
위 예시를 보면 받아온 리소스들의 리스트가 탭으로 구분되어 정보를 제공하고 있다. 각 탭 마다 의미하는 바를 정리하면 다음과 같다.

• Filmstrip : 탭 위 타임라인 형태의 그래프. 각 데이터의 로드 순서를 시각적으로 확인 가능
• Name : 리소스 이름과 URL
• Status : HTTP 응답 코드, 작동 여부를 코드로 확인.
• Type : 리소스의 형식(.html, .js 등)
• Initiator : 리소스 요청 근원으로, 링크로 이동하면 요청 원인 소스 코드로 넘어감
• Time : 리소스 로드 시간
• Waterfall : 리소스 로드의 세부 과정을 구분하여 그래픽으로 표시

위와 같은 탭을 기준으로 구분하여 원하는 리소스에 대한 정보를 알 수 있다. 그리고 표시된 리소스 중 관련 없는 리소스들을 제외할 수 있도록 필터링도 가능하다.

💡 404 Page Not Found ?

웹 페이지를 로드할 때, 문제가 발생하면 404 Page Not Found라는 문장을 심심치 않게 볼 수 있다. 이는 HTTP 상태에 오류가 있음을 알려주는 코드인 404를 포함한 컴퓨터로부터의 메시지이다. 이러한 코드를 HTTP Status Code라고 정의한다.
404 Page Not Found의 경우엔 서버가 요청받은 리소스를 찾을 수 없다는 오류 메시지로, 브라우저에서는 알려지지 않은 URL을 의미한다. 네트워크 패널에서는 이러한 부분들을 확인할 수 있고, 리소스들의 HTTP 요청이 성공적으로 이루어졌는지 확인할 수 있다.

위 이미지의 노란색 영역을 보면 다양한 구분들이 나누어져 있음을 확인할 수 있다. 해당 영역은 파란색 아이콘인 필터 아이콘을 클릭하면 열고 닫을 수 있는 리소스 필터링 영역이다. 해당 리소스 필터링 영역의 각 부분은 다음과 같은 의미를 갖는다.

• Filter(input) : 원하는 리소스를 Name을 기준으로 검색할 수 있다. : 텍스트, 정규식, -(제외), 속성 필터 등을 사용 가능
• Hide data URLs : 다른 문서에 포함된 작은 파일 제외
• All ~ Other : 리소스 유형별 데이터 찾기 : ctrl + 마우스 클릭을 통해 다중 선택 가능
• Has blocked cookies / Blocked Requests : 요청이 막힌 쿠키나, 막힌 요청만 보기

위와 같은 기능을 활용하여 원하는 데이터 만을 추려 보기에 훨씬 수월해질 수 있다. 그렇게 추린 데이터 중 원하는 데이터를 찾았다면 해당 데이터를 클릭하고 자세한 사항을 확인할 수 있다.

위 이미지는 마켓컬리의 카테고리 API를 추적하여 찾은 결과다. 탭을 보면 Headers 부터 Cookies 까지 다양한 탭이 있지만, 이번엔 간단히 Headers 와 Preview 탭에 대해 알아본다.
Headers 는 요청에 대한 HTTP 헤더 데이터를 확인할 수 있는 영역으로, 일반적인 정보나 요청 헤더, 응답 헤더 섹션 등으로 구분된다. Preview 탭은 텍스트 형식으로 작성되어 있는 데이터를 트리 형태로 쉽게 확인할 수 있는 탭이다.

이외에도 더 많은 기능들의 자세한 사항은 크롬 개발자 도구 Network panel에 대한 사항에서 알아보는 것으로 마무리 한다.

Application panel 💿

Application panel도 현재 로딩된 웹 페이지에서 사용한 리소스를 확인할 수 있는 패널이다. 다만 앞의 네트워크 패널과 차이점이 있다면, 네트워크 패널은 요청에 있어 그 과정을 중점적으로 확인할 수 있는 탭이고, 어플리케이션 패널은 데이터베이스, 로컬 및 세션 스토리지, 쿠키 등 로딩된 모든 리소스를 구분지어 저장한 것을 확인할 수 있다.
위 이미지의 왼쪽을 보면 저장소 영역이 보일 것이다. 이번 포스팅에선 열려 있는 Local Storage , Session Storage , Cookies 부분을 중점적으로 알아보자.

Local Storage

Local Storage 는 웹 스토리지 객체의 일종으로 브라우저 내에서 key-value 페어의 객체 형태로 저장된다. Local Storage 의 데이터는 다음과 같은 특징을 갖는다.

• 브라우저에 계속 남아있는 데이터(데이터의 영구성 보장) : 사용자가 지우지 않는 이상
• 대체로 지속성이 필요한 데이터가 이에 해당 : ID 저장, 각종 UI 정보 등

또한, Local Storage 의 특정 데이터를 저장하거나 가져올 수도 있는데, 해당 메서드는 다음과 같다.

Session Storage

Session Storage 또한 웹 스토리지 객체의 일종으로 브라우저 내에서 key-value 페어의 객체 형태로 저장된다. Session Storage 의 데이터는 다음과 같은 특징을 갖는다.

• 윈도우나 브라우저 탭을 닫으면 사라지는 데이터 : 현재 페이지가 브라우징 되는 영역에서만 데이터가 유지되고, 새로 고침을 통해서는 해당 데이터가 사라지지 않음
• 대체로 단기간만 필요한 정보 : 언어 선택, 특정 유저 정보 등

Session Storage 의 경우에도 특정 데이터를 저장하거나 가져올 수도 있다.

Cookie

Cookie 는 클라이언트에 대한 내용을 웹 사이트에서 클라이언트의 웹 브라우저에 전송하는 정보이며, key-value 페어로 저장되지만 문자열 형태로 저장된다. 쿠키는 다음과 같은 특징을 갖는다.

• 만료일자를 지정하게 되어 있음(언젠간 제거된다.)
• 상대적으로 용량이 작음(최대 4KB < 5MB(Local Storage))

Cookie 또한 위와 같이 사용할 수 있는 메서드가 존재한다.

💡 Cookie 가 존재하는데, 왜 Local Storage 를?

앞에서 확인했지만, Local Stroage 와 Cookie 는 명확한 차이점을 갖지만, 그렇다고 Cookie 가 존재 함에도 불구하고 Local Storage 를 사용하는 이유가 직관적으로 다가오지는 않는다. 이에 대한 이유를 한 마디로 정리하면, Local Storage 가 보다 더 나은 영구적인 솔루션이라는 것이다.
HTML5가 나오고 등장한 Local Storage 는 기존의 Cookie 와는 크게 세 가지가 있다.
우선, Local Storage 는 Cookie와 달리 HTTP 요청에서 데이터를 주고 받을 필요가 없다. 이는 클라이언트와 서버 간 전체 트래픽과 낭비되는 대역폭의 양을 감소 시킬 수을 의미한다.
다음으로, 앞에서 언급한 바이지만 Local Storage 는 Cookie 보다 큰 용량(5MB > 4KB)을 갖고 있다. 그렇기에 영구적인 정보 보관에 있어 훨씬 유리하다.
마지막으로, Local Storage 의 만료 조건은 persistent cookie(지속성 쿠키) 처럼 동작한다. 이는 자바스크립트 코드를 통해 사용자가 의도적으로 제거하지 않는 이상 데이터는 삭제되지 않는다는 것이다. 이 또한 영구적 정보 보관에 유리한 내용이다.
추가적으로, Local Storage를 사용하면 문자열 뿐만아니라 javascript의 object로도 저장할 수 있다.

🔖 출처

Chrome 개발자 도구 : Chrome Developers : Chrome DevTools localStorage & sessionStorage & cookie : javascript.info : localStorage와 sessionStorage localStorage 와 cookie 의 차이점 : Erwinousy님 medium : 쿠키 vs 로컬스토리지: 차이점은 무엇일까?

CSS 레이아웃에 대한 내용으로 Box-model, display , flex, position등에 대한 내용을 포함하고 있습니다. 😊

CSS layout 🧩

레이아웃(layout)은 출판, 건축 등의 분야에서 시각적 효과나 사용 목적을 고려하여 구성·배열하는 등의 일이라는 사전적 정의를 갖는데, 이와 유사하게 CSS의 레이아웃은 알맞은 위치에 요소들을 배열하는 것이다. 레이아웃이 별도로 지정되지 않은 상태에서는 normal flow(일반 대열)로 배치된다.

💡 normal flow(일반 대열)

normal flow(일반 대열)란 CSS를 적용하지 않을 경우, 웹페이지 요소가 배치되는 방식을 의미한다. 보다 나은 웹페이지는 normal flow 상태에서 읽는 것이 가능하고, 견고하고 구조화 된 문서로 시작하는 것이다.
normal flow 상태에서 읽기 가능하다는 점은 기능이 제한된 브라우저에서 사용에 무리가 없거나, 페이지 콘텐츠를 소리 내 읽는 스크린 리더와 같은 기능을 사용하는 유저들에게 이를 가능케 하는(readable) 콘텐츠를 만들 수 있다는 것이다.
그렇기에 레이아웃 변경에 있어서도 최대한 normal flow에 맞춰 협력 함이 지향된다.

이러한 레이아웃을 이해하기 위해 기본적으로 각 요소에 대한 영역이 어떻게 설정되는 지에 대해 알아보자.

Box model 📦

Box model(박스 모델)은 문서 레이아웃 계산에서 각각의 요소를 사각형 박스로 표현하는 것이다.
박스 모델은 개발자 도구를 통해 위와 같이 확인할 수 있고, 안쪽에서 부터, 콘텐츠(contents), 패딩(padding), 보더(border), 마진(margin)에 대한 영역을 정의하고 있다. 각 영역을 간단하게 정의하면 다음과 같다.

• 콘텐츠 영역(content area) : 글이나 이미지, 비디오 등 실제 내용을 포함하는 영역.
• 안쪽 여백 영역(padding area) : 콘텐츠 영역과 테두리 영역 사이의 내부 영역으로, 콘텐츠 영역을 요소 안쪽 여백까지 포함하는 크기로 확장.
• 테두리 영역(border area) : 안쪽 여백 영역과 바깥 여백 영역을 구분하는 영역
• 바깥 여백 영역(margin area) : 테두리 영역 밖의 영역

이렇게 박스 모델을 통해 각 요소가 특정 위치에서 얼마 만큼의 크기를 차지할 수 있는 지를 지정할 수 있다.

이제 박스 모델에 대한 지식을 바탕으로 HTML 태그의 display 에 대한 내용을 block 과 inline 등의 개념과 함께 알아보자.

display 🖥️

HTML 작성 이후, 위 사진 같이 요소 이동을 위해 display 값을 설정할 필요가 있다. CSS의 display란 요소가 어떻게 표시될 지에 대해 선택하는 속성이다. 이를 통해 앞에서 언급한 normal flow 속에서 요소가 위치하는 방식을 변경할 수 있다.
display 는 당연히도 속성 값에 따라 그 요소의 표시 형식을 결정하기에, 이어서 해당 속성 값 중 대표적인 값에 대해 알아보자.

block

block 은 해당 요소를 블록 요소로 지정하며, 블록 요소에 대한 내용은 다음과 같다.

• 기본 값으로 가로 영역을 전부 차지하며, 다른 요소들과 구분될 때 줄바꿈이 발생한다.
• 크기 변경(width, height, margin, padding)이 가능하다.
• <div> , <p> , <h1> 등의 태그가 이에 해당한다.
  

div {
    background-color: red; /* 영역 구분을 위함 */
    width: 300px;
    height: 300px;
    margin: 100px;
    padding: 30px;
}

임의의 <div> 태그에 CSS를 적용한 예시이다. 예시와 같이 width 값 부터 시작해서 padding 값 까지 원활하게 적용된 모습이다.

inline

inline 값은 해당 요소를 인라인 요소로 지정하며, 인라인 요소에 대한 내용은 다음과 같다.

• 기본 값으로 내부 콘텐츠의 영역만을 차지한다.
• 줄바꿈이 이루어지지 않고, 이어서 작성된다.
• 크기 변경이 불가능하다. (width 와 height 는 미적용. padding 은 전 방향 적용되고, margin 은 right , left 만)
  

body {
    padding-top: 30px;
}

span {
    background-color: red;
    width: 300px;
    height: 300px;
    margin: 100px;
    padding: 30px;
}

임의의 <span> 태그에 CSS를 적용한 예시다. 모든 요소는 위에서 설명한 바와 같이 적용되지만, padding 의 경우 top , bottom 은 해당 영역을 정의하지만 차지하지는 않는다.

💡 inline 의 margin 의 특징

inline 의 margin-top 과 margin-bottom 의 경우 해당 영역을 정의하지만 차지하지는 않는다는 표현을 사용했는데, 이는 위 코드에서 body 태그에 들어간 CSS 요소를 제거하면 알 수 있다.
위 예시의 경우엔 body 에 padding-top 을 통해 최상단에 여백을 준 상태인데, 해당 여백이 사라지면 span 요소의 윗 쪽 패딩 부분이 사라진 것으로 보인다.
이는 해당 영역을 정의는 하지만, 다른 요소를 밀어내지 않는다는 의미로 차지하지 않는다고 정의하였다.
박스 모델에 대한 MDN 내용을 보면, 박스의 외부 디스플레이 유형이 inline 일 경우를 설명하는 부분에서 이처럼 정의되어 있다.
"패딩과 여백, 테두리는 다른 인라인 박스들이 다른 박스로부터 멀어지지게 하지 않습니다."
적용 결과 모든 방향의 패딩이 아닌, padding-right 와 padding-left 의 경우엔 해당 영역을 차지하는 것으로 확인되었다. 아래 예시의 경우엔, span 내부에 span 태그를 삽입하여 별도의 클래스를 부여한 뒤, 해당 클래스 요소에만 위와 같은 CSS 요소를 추가했다.

...
<body>
    <span><span class = 'span'>aaaaaaaa</span>
      aaaaaaaa</br>aaaaaaaa</span>
</body>
...

inline-block

inline-block은 inline 과 block 의 중간 형태이며 다음과 같은 특징을 갖는다.

• 기본 값으로 내부 콘텐츠의 영역만을 차지한다.
• 줄바꿈이 이루어진다.
• 크기 변경(width, height, margin, padding)이 가능하다.

.span {
    display: inline-block;
    background-color: red;
    width: 300px;
    height: 300px;
    padding: 30px;
}

위 inline 의 margin 에 대한 내용에서 나왔던 예시에서 display 값을 inline-block 으로 변경한 예시다. 보이는 바와 같이 클래스가 지정된 요소에 대해서 width 와 height 에 대한 부분이 명확히 정의되어 있고, padding 에 대해서도 명확히 적용된 것을 알 수 있다.
이처럼 크기 변경의 영역에서 block 과 같은 기능을 갖는다.

flex

flex 는 1차원 상의 요소들을 배치할 때 편리하게 사용할 수 있는 속성 값이다. 이를 배열하고자 하는 요소들의 부모(container)요소에 적용하면 동시에 모든 직계 자식들이 flex 항목이 된다. 이후 여러 속성 값을 통해, 해당 요소들을 자유롭게 배열할 수 있다는 점이 편리하다는 것이다.
이어서 display : flex 와 함께 사용하는 속성과 값들에 대해 알아보자.

justify-content

가로선 상의 정렬을 정의

• flex-start : 요소들을 컨테이너의 왼쪽으로 정렬
• flex-end : 요소들을 컨테이너의 오른쪽으로 정렬
• center : 요소들을 컨테이너의 가로선 상 가운데로 정렬
• space-between : 요소들 사이에 동일한 간격
• space-around : 요소들 주위에 동일한 간격
  

align-items

세로선 상의 정렬을 정의

• flex-start : 요소들을 컨테이너의 최상단으로 정렬
• flex-end : 요소들을 컨테이너의 최하단으로 정렬
• center : 요소들을 컨테이너의 세로선 상 가운데로 정렬
• baseline: 요소들을 컨테이너의 시작 위치에 정렬
• stretch: 요소들을 컨테이너에 맞도록 늘림
  

flex-direction

컨테이너 내부에서 요소들의 정렬 방향을 정의

• row: 요소들을 텍스트의 방향과 동일하게 정렬
• row-reverse: 요소들을 텍스트의 반대 방향으로 정렬
• column: 요소들을 위에서 아래로 정렬
• column-reverse: 요소들을 아래에서 위로 정렬
  

order

컨테이너 각 요소의 순서를 바꿀 수 있음

• 기본 값은 0이며, 양수나 음수로 변경 가능
• 해당 위치 기준으로 얼마나 움직일지를 정의
  

flex-wrap & flex-flow

flex-wrap 은 요소의 정렬에서 줄 구분의 유무를 정의하고, flex-flow 는 flex-wrap 과 flex-direction 을 합쳐 두 값을 동시에 대입(flex-flow : [direction] [wrap])한다.

• nowrap: 모든 요소들을 한 줄에 정렬
• wrap: 요소들을 여러 줄에 걸쳐 정렬
• wrap-reverse: 요소들을 여러 줄에 걸쳐 반대로 정렬(줄 시작 기준이 바뀜)
  

align-content

여러 줄 사이의 간격을 지정

• flex-start: 여러 줄들을 컨테이너의 꼭대기에 정렬
• flex-end: 여러 줄들을 컨테이너의 바닥에 정렬
• center: 여러 줄들을 세로선 상의 가운데에 정렬
• space-between: 여러 줄들 사이에 동일한 간격을 둠
• space-around: 여러 줄들 주위에 동일한 간격을 둠
• stretch: 여러 줄들을 컨테이너에 맞도록 늘림
  

grid

flex 가 1차원 레이아웃을 위한 것이라면, grid 는 2차원 레이아웃을 위한 것이다. 행과 열을 기준으로 요소들을 배열하는 것이다.
grid 는 다음과 같은 속성들을 사용하여 요소들을 배열할 수 있다.

• grid-template-columns : 열의 갯수와 크기를 정의
• grid-template-rows : 행의 갯수와 크기를 정의
• grid-gap : 요소 간 간격을 정의

<div class="wrapper">
    <div class="box1">하나</div>
    <div class="box2">둘</div>
    <div class="box3">셋</div>
    <div class="box4">넷</div>
    <div class="box5">다섯</div>
    <div class="box6">여섯</div>
</div>

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

또한, 자식 요소들에 대해 CSS 값을 부여하여 각 요소의 면적에 대해 정의할 수도 있다.

<div class="wrapper">
    <div class="box1">하나</div>
    <div class="box2">둘</div>
    <div class="box3">셋</div>
</div>

.wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 100px 100px;
    grid-gap: 10px;
}

.box1 {
    grid-column: 2 / 4;
    grid-row: 1;
}

.box2 {
    grid-column: 1;
    grid-row: 1 / 3;
}

.box3 {
    grid-row: 2;
    grid-column: 3;
}

위와 같이 grid-row 와 grid-column 을 통해, 각 요소가 차지하는 영역을 정의하여 grid 내 비율을 조정할 수 있다.

position 🚶

position 은 문서 상에 요소를 배치하는 방법을 의미한다. position 속성 값의 기준이 되는 중요한 요소 중 하나는 문서의 흐름을 따르는 지에 대한 여부일 것이다. 해당 부분에 집중하며 position 속성 값에 대해 알아보자.

static

static 은 position 의 기본 값으로, 요소를 일반적인 문서 흐름에 따라 배치하는 것을 의미한다. static 의 경우에는 top, right, bottom, left, z-index 속성들의 영향을 받지 않는다.

위 경우 top 속성에 값을 대입했지만, 결과로 반영되지 않은 모습이다.

relative

relative 는 위와 같이 문서의 흐름은 따르지만, 자신의 위치를 기준으로 top, right, bottom, left, z-index 속성들에 따라 요소의 위치가 변경될 수 있다.

static 과 같은 top 값을 할당했지만, relative 의 경우 요소의 위치가 변경되었다. 여타 값이 주어지지 않으면 relative 또한 static 과 같은 기능을 한다.
그리고 relative 의 경우에 자신의 위치를 기준으로 하기 때문에 다른 요소의 위치에 영향을 주지 않는다는 점이 중요하다.

위와 같이 body 에 요소를 추가해도 문서의 흐름에 따라 정해진 자신의 위치에서만 움직이기 때문에 다른 요소의 위치에 영향을 주지 않는다. 또한, 그렇기에 요소가 겹칠 수 있다는 점을 유의해야 한다. 위 경우엔 top 값으로 마이너스 값을 대입한다면 요소가 겹칠 수 있다.

absolute

absolute 는 일반적인 문서 흐름을 따르지 않고 제외된다. 그리고 가장 가까운 조상 요소에 대해 상대적으로 배치한다.

위 경우 가장 가까운 조상 요소인 first div 를 기준으로 absolute div 가 top : 100px 의 위치 함을 알 수 있다.
위 예시에서 second-div 가 사라져도 absolute 의 위치에는 변함이 없지만, first div 가 사라질 경우 그 다음 가까운 조상 요소인 second-div 를 기준으로 위치하게 된다.
만약 조상 요소가 존재하지 않는다면, body 를 기준으로 위치를 움직인다.

fixed

fixed 도 absolute 와 마찬가지로 문서의 흐름에서 제외되지만, fixed 의 경우 스크린 뷰포트를 기준으로 한 위치에서 배치되며, 스크롤 되어도 움직이지 않는다.

💡 뷰포트(viewport)

디스플레이 상의 표시 영역을 의미하며, 간단하게 웹페이지가 브라우저 화면에서 실제로 표시되는 영역을 의미한다.
뷰포트에 대한 사항은 head 태그에서 meta 태그를 통해 설정할 수 있다.

위 예시를 보면 상단 메뉴에 해당하는 텍스트 요소들이 스크롤이 진행 됨에도 고정되어 있는 것을 알 수 있다. fixed 값을 사용하면 해당 요소와 같이 요소를 배치할 수 있다.

🔖 출처

CSS layout : MDN Web Docs : CSS 레이아웃 입문서 CSS box model : MDN Web Docs : 상자 모델 CSS position : MDN Web Docs : position CSS Position : Suyeon Bak님 medium : (CSS) CSS Position 설명

브라우저 작동 원리에 대한 내용으로 브라우저 기본 구조, 렌더링 엔진 등에 대한 내용을 포함하고 있습니다! 😊

프롤로그 🤓

이번 학습은 사전스터디 학습에서 script 태그의 위치에 따른 주의점에 대해 발표하기 위한 공부를 하다 브라우저의 작동 원리에 대해 알아보면서 더 깊게 알아보고자 작성하게 됐다.
이번 학습을 진행하면서 CS 지식이 풍부할 때, 웹 브라우저 성능 향상에 있어 큰 도움이 된다는 사실을 다시금 깨달았고, 앞으로 궁금한건 정리하여 기록하자고 생각했다. (물론 노오력을 하겠다는 뜻이다...^^)

앞으로 나올 내용들은 2011년도에 발행된 이스라엘 개발자 탈리 가르시엘(Tali Garsiel)의 How Browsers Work: Behind the scenes of modern web browsers 의 내용을 네이버 D2에서 번역한 브라우저는 어떻게 동작하는가? 라는 포스팅을 참고하면서 작성한 포스팅이다.

브라우저 주요 기능과 웹 표준 🖥️

브라우저 주요 기능

• 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고 브라우저에 표시하는 것이다.
• 자원의 형태는 보통 HTML 문서지만 PDF나 이미지 등 다른 형태일 수도 있다.
• 자원의 주소는 URI(Uniform Resource Identifier)에 의해 정해진다.
  

웹 표준에 대하여

• 웹 표준의 존재는 어떤 운영체제나 브라우저를 사용하더라도 동일하게 보이고, 정상적으로 작동하기 위함을 의미한다.
• 과거 웹 표준을 일부만 따르던 시절에는 웹 제작자가 심각한 호환성 문제를 겪었지만, 최근 대부분의 브라우저가 표준 명세를 따른다.
• 2019년 기준, HTML과 DOM의 표준 개발 권한이 W3C에서 WHATWG 에게 념겨졌고, WHATWG의 Living Standard를 명세 표준으로 삼기로 했다. 이에 대한 내용은 "둘로 나뉜 웹 표준, 하나로 합쳐진다" 라는 해당 기사를 참고하면 된다.
  

브라우저의 기본 구조 📝

브라우저의 기본 구조는 다음과 같이 구성된다.

• 사용자 인터페이스 : 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분이다. 사용자와 상호 작용하는 매개체를 의미한다.
• 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이를 연결하여 동작을 제어하는 엔진
• 렌더링 엔진 : 요청한 콘텐츠를 표시하는 엔진. HTML과 CSS를 파싱하여 화면에 표시한다.
• 통신 : HTTP 요청과 같은 네트워크 호출에 사용.
• UI 백엔드 : 콤보박스와 창, 체크박스, 버튼과 같은 기본적인 위젯(장치)을 그림
• 자바스크립트 해석기 : 자바스크립트 코드를 해석하고 실행해주는 인터프리터
• 자료 저장소 : 자료 저장 계층. 쿠키 저장과 같이 모든 종류의 자원을 하드디스크에 저장할 필요가 있다.

위 구조에서 브라우저 마다 구분되는 렌더링 엔진에 대해 알아본다.

렌더링 엔진 ⚙️

렌더링 엔진은 HTML, CSS, JavaScript 등 요청 내용을 브라우저 화면에 표시하는 기능을 한다. 이 과정에서 다양한 브라우저의 렌더링 방식이 다르기 때문에, 크로스 브라우징 이슈 혹은 성능 차이가 발생하기도 한다.

렌더링 엔진들

대표적인 렌더링 엔진으로 오픈소스 브라우저에 해당하는 파이어폭스와 사파리, 크롬의 렌더링 엔진을 알아본다. 각각의 렌더링 엔진은 다음과 같다.

• 파이어폭스 : 게코(Gecko) - 모질라 재단에서 만든 레이아웃 엔진
• 사파리 : 웹키트(Webkit) - KTHML에서 파생된 레이아웃 엔진
• 크롬 : 블링크(Blink) - 웹키트에서 파생된 레이아웃 엔진

위와 같은 렌더링 엔진 중, 블링크를 예시로 들어 렌더링 엔진의 작동 과정을 설명한다.

작동 과정

렌더링 엔진은 웹 서버로 부터 전달받은 HTML 문서를 맨 처음 네트워크 레이어에서 불러온 뒤, 아래와 같은 과정을 거친다.

• DOM Tree / CSSOM Tree 생성 : HTML을 파싱하여 DOM Tree를 구성하고, CSS를 파싱하여 CSSOM Tree를 구성한다.
• Render Tree 생성 : 두 트리를 합쳐 Render Tree를 생성
• Render Tree 배치(reflow/layout) : 뷰포트의 정확한 위치에 각 노드를 표시
• Render Tree 그리기 : Render Tree의 각 노드를 가로지르며 형상을 그림
  

💡 파싱(parsing)

컴퓨터 과학에서 파싱의 정의는 일련의 문자열에 있는 의미있는 토큰(token)으로 분해하고 이들로 이루어진 파스 트리(parse tree)를 만드는 과정이라고 정의되어 있다.
현재 렌더링 엔진에서 말하는 DOM Tree와 CSSOM Tree의 경우에는 각각 HTML과 CSS를 파싱하여 만든 결과물이다.
HTML의 경우, 각 요소를 DOM(Document object model) 노드로 변환하여 Tree 구조를 만들어 DOM Tree를 생성한다. CSS의 경우에는 HTML 대신 CSS에 대해 DOM 프로세스를 진행하며 CSSOM(CSS Object Mode)도 트리 구조를 가지고, cascading rule에 따라 스타일을 세분화한다.

💡 렌더 트리(Render Tree)

위에서 언급한 HTML의 파싱이 이루어지고 DOM Tree가 형성된 후, CSS를 파싱하여 DOM Tree와 CSSOM을 합쳐 렌더 트리를 만든다. 렌더 트리는 시각적 요소가 어떻게 나타날지를 정한다. 렌더 트리를 생성하기 위한 과정은 다음과 같다.

• DOM Tree의 루트에서 시작해서 노드 각각을 읽으며 표시 ▶️ 메타 태그나 스크립트 태그 등의 노드는 표시되지 않는다. ▶️ 일부 노드는 CSS를 통해 숨겨지며 렌더 트리에서도 생략이 된다. 예를 들어, span 노드에 display : none 속성을 설정하면 렌더 트리에서 누락(visible : hidden 은 레이아웃에서 공간을 차지하므로, 앞의 예시와는 다르다.)
• 표시된 각 노드에 대해 적절하게 일치하는 CSSOM 규칙을 찾아 적용한다.
• 표시된 노드를 콘텐츠 및 계산된 스타일과 함께 내보낸다.

브라우저의 성능 최적화 ✅

앞에서 배운 브라우저의 작동 방식에 대한 이해를 했다면, 브라우저의 성능 최적화에 대한 주제를 다룰 수 있다.

CRP(Critical Rendering Path)

CRP(Critical Rendering Path)란 중요 렌더링 경로로 브라우저가 HTML, CSS, Javascipt를 화면에 픽셀로 변화하는 일련의 단계를 말하며 이를 최적화하는 것은 렌더링 성능을 향상시킨다. 사용자가 브라우저에 URL을 입력한 후, 브라우저는 다음과 같은 작업을 수행한다.

• 브라우저가 서버에게 HTML 파일을 요청하고 서버는 응답한다.(request/response)
• 서버에게 받은 HTML 파일을 로딩한다.(loading)
• HTML을 한줄 한줄씩 읽어서 DOM과 CSSOM으로 변환한다.(scripting)
• DOM과 CSSOM을 결합하여 렌더 트리를 형성한다.(rendering)
• 각 노드의 치 및 크기 계산한다.(layout)
• 화면의 픽셀로 변환한다.(painting)

위 과정을 카테고리화 하면 다음과 같다.

• Construction Part : DOM Tree 생성 ~ Render Tree 생성 : 브라우저가 이해할 수 있는 브라우저만의 언어로 바꾸는 작업 파트
• Operation Part : layout ~ composition : Render Tree를 이용해 구조 형성 및 배치 계산을 하여 화면의 픽셀로 변환.(composition은 최종적으로 z-index에 따라 가장 높은 요소가 나중에 배치되며 우선 순위를 구분)

해당 파트별로 최적화를 이끌어 낼 수 있는 부분은 다음과 같다.

• Construction Part : 불필요한 태그나 콘텐츠가 있는지 확인해 본다.
• Operation Part : 초기 렌더링 시간과 이후 자바스크립트에 의해 DOM이 추가/삭제되거나, CSS 속성 값이 변경되는 경우 등을 이해하여 Paint가 자주 일어나지 않도록 한다.

해당 부분만으로는 디테일한 이해가 부족하다. 이를 Layout과 Paint 그리고 Composite에 대한 개념을 이해하면서 알아보자.

layout & paint & composite

위에서 자바스크립트에 의해 렌더 트리가 다시 재구성되는 경우(요소 추가 및 제거나 속성 값 변경 등)가 있다고 했다. 기존에 파싱이 되었던 DOM Tree와 CSSOM Tree는 자바스크립트에 의해 그 요소의 값이 변경되어 렌더 트리가 변경될 수 있다는 말인데, 이 과정에서 단계를 분리하여 그 과정을 최소화할 수 있다. 자바스크립트로 인해 Style 이후 과정의 반복을 단계화 한 다이어그램이다. 이 과정에서 3가지로 구분되어 반복이 이루어질 수 있는데, layout 이후의 과정 진행, paint 이후의 과정 진행, composite만 이루어지는 경우가 이에 해당한다. 위 다이어그램의 경우는 Layout 이후의 과정이 진행된 경우를 보여준다. 이를 레이아웃(또는 리플로우)라고 한다. 레이아웃은 요소의 기하학적 영향(위치, 크기 등의 변화)을 주는 CSS 속성값을 변경할 때 발생하는데, 반대로 영향을 주지 않는다면 위 다이어그램 처럼 layout 과정을 스킵하고 진행한다. 이를 리페인트라고 한다. layout과 paint의 과정이 필요 없는 CSS 속성을 변경할 경우에는, 브라우저가 바로 composite 단계로 넘어간다. 위 다이어그램이 해당 사례에 해당한다.
당연하게도 최소한의 과정을 포함하는 것이 부하가 적고 효율적인 운영이 가능하다. 각 CSS 요소는 렌더링 엔진마다 어느 단계를 거치는 지에 대한 차이가 존재한다. 이에 대한 내용은 다음 링크에서 확인할 수 있다. 이를 알맞게 적용할 때 성능 최적화를 유도할 수 있을 것이다.

🔖 참고 및 출처

브라우저 동작 원리 : NAVERD2 : 브라우저는 어떻게 동작하는가? 브라우저 동작 원리 : html5rocks.com : How Browsers Work: Behind the scenes of modern web browsers 렌더트리 & CRP : 개발 전용차선 : 렌더 트리(Render Tree), CRP(Critical Rendering Path) 성능 최적화 : TOASTUI : 성능 최적화 성능 최적화 : Google Developers : 렌더링 성능

자기소개 페이지 제작 과정과, 이후의 짧은 회고를 담은 내용입니다. 😊

HTML과 CSS에 대한 강의를 듣고, 마냥 간단할 것만 같았던 페이지 제작이었지만, 역시 인생은 실전인 것인가... 실제로 만들고 나니, 그렇게 고민하고 머리를 쥐어싸던 시간이 무색할 정도로 간단한 페이지가 완성되었다!
그렇다고 코드가 깨끗한 건 아니라니는게 반전이지만, 끝내고 나니 후련한 마음도 있고, 나름 내가 대견해서 얼른 벨로그를 쓰고 싶었다.
진짜, 깃허브 페이지 올리는거 너무 힘들었다... 페이지 만드는 것보다... 😂
제작 과정을 소개하기에 앞서 자기소개 페이지 링크와 해당 리포지토리 링크를 공유한다!

깃허브 리포지토리 링크 💻 자기소개 페이지 링크 💻

개요 🗺️

제작 기간

약 3일(21.08.19 ~ 21.08.21)

전체적인 구상

• 반응형 웹 구현하기(가.능.한)
• Snap Scroll 적용
  

기술 스택

" HTML 과 CSS 로 하겠습니다. 근데 이제 약간의 JavaScript 를 곁들인. "

결과 및 회고 🙌🏻

인생은 실전이다 😂

마이크 타이슨은 말했다. "누구나 그럴싸한 계획을 가지고 있다. 한 대 쳐맞기 전까지는". 이게 내 이야기일지 누가 알았겠는가. HTML 작성할 때만 해도 희망과 행복이 가득했던 나의 자기소개 페이지 프로젝트는 CSS 작성과 동시에 힘들어졌다. 인터스텔라가 가능하다면 과거의 나에게 "강의만 보지 말고 닥치고 코드 좀 쳐 봐" 라고 전달하고 싶다.
생각만 하는 것과 실제로 작성하는 것이 많이 괴리가 있고, 어려운 일이라는 사실을 알게 된 후, 상상으로 그려낸 다양한 기획안들은 철수시키고 나의 수준에 맞는 디자인 및 기능 구현을 목표로 다시금 구상을 했다.
그렇게 위와 같은 전체적인 구상 하에 조금씩 기능을 추가하기로 결정했다.

반응형 웹 구현

Snap Scroll 적용

메뉴 이동

사진 자동 전환

그렇게 위와 같은 기능이라면 기능인...? 것들을 구현했다.
반응형 웹의 경우 완벽한 구현은 못했지만, 그래도 구색 정도는 맞추고 싶어서 이래저래 시도를 해봤다. 대체로 화면 변화에 따라 바뀌는 요소들의 간격에 따라 각각의 위치를 조정해주고, 특정 구간에서 메뉴를 화면에서 없앤다는지 등의 형식으로 구현했다.

/* 첫 번째 페이지 구간 */
@media screen and (max-width: 683px) {
    #one h3 {
        top: 25%;
        transform: translate(-50%, -25%);
    }
    .menu {
        display: none;
    }
}

@media screen and (max-height: 610px) {
    .menu {
        display: none;
    }
}

/* 두 번째 페이지 구간 */
@media screen and (max-width: 683px) {
    #two h3 {
        top: 10%;
        left: 50%;
        transform: translate(-50%, -10%);
    }

    #two .talk {
        top: 77%;
        left: 50%;
        transform: translate(-50%, -77%);
    }
}

@media screen and (max-height: 610px) {
    #two h3 {
        top: 17%;
        left: 50%;
        transform: translate(-50%, -17%);
    }

    #two .talk {
        top: 77%;
        left: 50%;
        transform: translate(-50%, -77%);
    }
}

Snap Scroll 은 노마드 코더 님의 최신 CSS 기능 소개 영상을 참고했다.

#container {
    width: 100%;
    height: 100vh;
    overflow: auto;
    scroll-snap-type: y mandatory; /* scroll snap */
    scroll-behavior: smooth;
}

#container .item {
    scroll-snap-align: center; /* scroll snap */
    display: inline-block;
    width: 100%;
    height: 100vh;
    display: flex;
    font-size: 38px;
    color: white;
    justify-content: center;
    align-items: center;
}

메뉴 이동 부분은 a 태그를 이용하여 id 값을 통해 위치를 이동하도록 하였다. 스터디 팀원분께서 관련 자료를 알려주셔서, 해당 자료를 참고하여 작성했다!

<!-- a 태그에 hypertext reference id 값으로 설정 -->
<li><a href = "#one">#Home</a></li>
<li><a href = "#two">#About</a></li>
<li><a href = "#three">#Contact</a></li>

<!-- section에 id 값 부여 -->
<section id = 'one' class = 'item'>
<section id = 'two' class = 'item'>
<section id = 'three' class = 'item'>

사진 자동 전환 부분이 위에서 언급한 "약간의 자바스크립트"가 포함된 부분으로 이 부분은 w3bai.com을 참고하여 작성하였다.

var slideIndex = 0;
carousel();

function carousel() {
    var i;
    var x = document.getElementsByClassName("slide");
    for (i = 0; i < x.length; i++) {
      x[i].style.display = "none";
    }
    slideIndex++;
    if (slideIndex > x.length) {slideIndex = 1}
    x[slideIndex-1].style.display = "block";
    setTimeout(carousel, 3000); // 3초 마다 사진을 변경
}

깃허브의 역습 🐈‍

그렇게 좋다던 깃허브, 이번에 처음 접하면서 push 조차 몰랐던 내가 어찌저찌 노력해서 깃허브 페이지를 생성하는 쾌거를 이뤄냈다.
돌아보니 그렇게 고생할 일이었나 싶지만, 당시 push 오류가 발생했을 때, 무지성 구글링을 통해 방법을 찾아보고, 리포지토리를 몇 번은 지우고 다시 만든 것 같다.
다시 돌아보니, 그냥 add 도 안하고 commit 도 안했으며, 웹에서 커밋을 진행하면 뭔가 오류가 발생하는 것 같은데, pull 을 못해서 그렇게 된 것 같다. 그래도 결론적으로 사용해봤던 것에 의의를 두고! 새롭게 채워진 내 잔디가 너무 귀여웠다는...😊

짧은 회고 💡

이번 자기소개 페이지 만들기 프로젝트를 하면서, 내가 프론트엔드와 백엔드 중에 어떠한 것이 잘 어울릴지에 대해 확실하게 생각하게 되었다. 확실히 나는 미세한 마진이나 위치 조정에 집중해서 한 세월 보내는 것을 좋아하고, 결과물로 내가 생각했던 디자인의 웹이 나왔을 때, 그 만족감이 이루 말할 수 없는 것으로 보아 프론트엔드가 맞다고 확신하게 되었다.
그리고 기본에 충실한 사람이 어떤 의미를 가지며, 내가 한참 부족한 사람이라는 것을 다시금 깨달았다. 솔직히 처음 시작할 때, HTML 과 CSS 를 너무 가볍게 생각하고 강의를 들으면서, 이정도면 못하는 사람이 없겠다는 생각을 했던 것 같다. 위에서도 언급했지만, 역시 단순히 배운다는 것과 이를 활용하여 실제로 적용하는 것은 많은 차이가 있었다.
지금까지의 나는 시도하기를 두려워해서 지레 겁먹은 부분에 대해 시도 조차 하지 않는 경우가 다반사였다. 삶을 살아오면서 그렇게 지나간 기회들이 많았을 것이고, 그 중에는 내 인생을 바꿀 수 있는 기회들도 여럿 존재했을 것이다. 그렇게 지나가면서 이번에 새롭게 개발자의 길을 선택한 것은 두려움을 이겨내고 얻은 소중한 기회라고 생각한다. 끈기 없게 놓았던 여러 기회나, 두려움에 포기했던 순간들과 다르게 만족할만할 결과물을 만들어 내도록 방심하지 않고 꾸준히 노력하자.

HTML 시맨틱 웹과 시맨틱 태그에 대한 내용입니다. 😊

📑 시맨틱(Semantic) 개론

HTML 공부를 하다보면, 시맨틱 태그에 대한 내용을 꼭 마주하게 된다. 이전에, HTML 태그를 공부하면서

전부 <div> 로 작성해도 작동이 되는데, 굳이 다른 태그들이 필요한건가?

문득 이런 생각이 들었는데, 역시 이유 없이 존재하는 태그는 없다 이말이다. 매번 이유에 집착하게 만드는 나로써는 시맨틱 웹(Semantic Web)과 시맨틱 태그(Semantic Tag)는 좋은 집착의 대상이 되기에 충분했다. 그렇게 공부할 기회가 생긴다면, 포스팅을 작성하면서 이를 정리하고 싶었는데 오늘이 그 날이다.
사실 지금 당장에 필요한 내용은 아닐 수도 있지만, 시맨틱 태그의 경우 습관을 잘못 들이면, 이를 바꾸는 것이 많이 힘들 것 같다 싶어 기초를 탄탄하게 하자는 취지로 먼저 작성하게 되었다!
우선 시맨틱(Semantic)의 정의는 "의미론적인, 의미의"라는 뜻을 가진다. 해당 정의에서 유추해 볼 수 있는 시맨틱 웹과 시맨틱 태그의 의미는 의미있는 웹, 의미있는 태그 정도일 것이다.
그렇다면 의미있다는 것은 무슨 의미일까? 자 이제 시맨틱 웹과 태그에 대해 Araboza.

🌐 시맨틱 웹(Semantic Web)

웹 기술의 발전은 인터넷을 실생활까지 확산되는 결과를 이뤄냈지만, 축적되는 정보 속에서 불필요한 정보 또한 우후죽순으로 늘어났다. 그리고 그러한 정보들은 정보 검색 시 정보 홍수를 가중시켜, 올바른 데이터를 검색하는데 문제를 발생시켰다.
그런 문제들에 대해 2001년 팀 버너스리 등에 의해 제시된 웹 기술의 비전이 시맨틱 웹(Semantic Web)인 것이다. 시맨틱 웹이란 컴퓨터가 이해할 수 있는 잘 정의된 의미를 기반으로 의미적 상호운용성(semantic interoperability)을 실현하여, 다양한 정보 자원의 처리 자동화, 데이터의 통합 및 재사용 등을 컴퓨터가 스스로 수행하여, 인간과 컴퓨터 모두 잘 이해할 수 있는 웹이다.

간단히 말하자면 검색 과정에서 좀 더 정확한 정보를 가져오는 좋은 웹이라는 것이다!

그렇다면 왜 시맨틱 웹은 검색 과정에서 이점을 가질까? 이에 대한 내용을 검색 엔진 최적화(SEO : Search Engine Optimization)에 대한 개념과 함께 간단히 알아보자

💡 검색 엔진 최적화(SEO)와 시맨틱 웹

검색 엔진 최적화(SEO)란 검색 엔진으로부터 웹사이트나 웹페이지에 대한 웹사이트 트래픽의 품질과 양을 개선하는 과정이라고 정의된다. 웹사이트는 검색 엔진 상단에 노출되는 것이 중요하고, 검색 엔진 최적화의 여부는 이를 결정하는데 그 기준이 될 수 있다는 것이다.
검색 엔진은 로봇(Robot)이라는 프로그램을 통헤 크롤링을 진행하여 다수의 웹사이트 정보를 수집하고, 수집한 데이터를 키워드 색인을 통해 가공하여 사용한다. 이 과정에서 컴퓨터는 어떠한 데이터가 강조된 데이터 인지 구분하지 못한다. 그렇기에, 컴퓨터 입장에서 시맨틱 웹은 보다 명확히 데이터를 전달하는 친절한 웹인 것이다.
명확한 의미 인지는, 웹을 더 의미있는 데이터를 포함한 웹으로 만들고, 이는 검색 엔진 최적화의 측면에서도 효율적이다.

HTML으로 작성된 문서는, 메타데이터와 자연어가 뒤섞여 있고 이에 대해 개발자의 의도가 명확히 전달되면서 작성된 웹이 시맨틱 웹이라고 할 수 있다.

🔗 시맨틱 태그(Semantic Tag)

그렇기 때문에, 우리는 <div>를 남발하지 않고, 명확한 의미를 부여하는 시맨틱 태-그에 대해 인지하고 적재적소에 사용해야 하는 것이다.

그렇다면, "나는 검색 엔진 상단에 위치할 필요 없으니깐, <div> 로 도배하고 작동만 하게 할래요 🤪" 라고 생각할 수도 있으시겠다.

하지만, 시맨틱 태그는 단순히 웹 검색 엔진 상단에 위치하기 위해서만 사용하는 것이 아니다.
시맨틱 태그(semantic tag)란 개발자와 브라우저 모두에게 의미를 주는 태그라고 할 수 있다. 시맨틱 태그가 존재하듯이 논 시맨틱 태그(non-semantic tag) 또한 존재한다. 대표적으로 우리가 밥먹듯이 사용하는 <div>가 이에 해당한다.

• 시맨틱 태그(semantic tag) : <table>, <article> 등
• 논 시맨틱 태그(non-semantic tag) : <div>, <span> 등

시맨틱 태그의 경우, content 에 대한 설명을 명확히 포함하지만, 반대의 경우에는 이를 포함하지 않는 태그라고 할 수 있다.

시맨틱 태그의 이유

시맨틱 태그의 사용을 비유하자면, 물을 마시는 행위를 냄비나 그릇을 사용하여 할 수 있지만, 컵을 이용하여 마시는 것이 적절한 것과 비슷하다.

이를 간단한 예시와 함께 알아보자.

<!-- in HTML -->
<em>Hello</em>
<i>Hello</i>
<!-- 텍스트가 기울어지는 결과를 똑같이 출력 -->

위 두 줄의 코드는 똑같이 Hello 라는 텍스트가 기울어진 형태로 출력된다. 출력 결과에 대해서 사람들은 같은 내용이라고 인식하겠지만, 컴퓨터의 경우에는 이를 다르게 인식한다.
앞의 <em> 태그는 강조된 텍스트(emphasized text)를 의미하며 태그 안의 content 를 강조하는 의미를 갖고, 이어지는 <i> 태그의 경우에는 단순히 텍스트를 기울임꼴로 표시하는 기능을 가진 태그이다.
만약, 내가 content 를 강조하고자 하는 목적으로 태그를 사용한다면 화면 상으로 같은 결과를 보이지만, 브라우저에게 명확히 이를 강조하겠다고 의미를 부여하는 <em> 태그를 사용함이 효과적일 것이다.
이렇게, 브라우저로 하여금 의미있는 데이터를 제공받게 되면, 웹 접근성(Web Accessibility) 측면에서도 다른 일반 웹들과 비교하여 우위를 갖게 된다.
브라우저는 의미있는 데이터를 받을 때, 이를 가공하고 전달하는 과정에서 좀 더 효율적인 결과물을 만들어 낼 수 있기에 시맨틱 태그는 이러한 측면에서도 중요성을 알 수 있다.

💡 웹 접근성(Web Accessibility)

웹 접근성의 정의는 신체 및 정신적 장애의 유무와 관계 없이 모든 사람들이 웹사이트를 이용할 수 있는 것을 말한다.
장애라는 요소를 특정 짓긴 했지만, 웹 접근성은 장애를 갖지 않은 사람에게도 이점이 있다.
예를 들어, 팔이 부러지거나 안경을 잃어버리는 등의 과정에서 "일시적 장애"를 겪는 사람들에게나, 밝은 햇빛, 시끄러운 소리 등의 환경적 요소로 인해 상황적 제약을 겪는 사람 등이 이에 해당할 수 있다.

마지막으로, 코드를 작성하는 우리를 위한 것이기도 하다.
만약, 모든 코드가 <div> 태그로 구성되어 있다면, 작동은 원활히 하겠지만, 직접 보기에 직관적으로 이해되는 느낌이 있다면 그건 아마 시맨틱 태그로 작성된 부분일 것이다.
<div> 태그로 작성할 경우 이를 id 로 구분하거나 class 명을 통해 구분하는데, 코드 작성 길이가 길어질 수록 불편함에 대한 체감이 더 커진다고 한다.
협업의 측면에서도 서로가 이해하기 쉬운 코드를 작성하는 것은 중요한 부분일 것이고, 유지 및 보수에 용이하고, 가독성이 높은 코드를 작성하고 싶다면 시맨틱 태그로 코드를 작성하도록 하자! 😊
그렇게 시맨틱 태그로 작성해야 하는 이유를 정리하면 다음과 같다.

• 검색 엔진 최적화(SEO : Search Engine Optimization)
• 웹 접근성(Web Accessibility)
• 유지 보수 및 가독성

SEO와 시맨틱 태그의 연관성을 확인하기 위해 작성하신 seongkyun님의 포스트를 보면, 시맨틱 태그가 웹에 어떤 영향을 주는 지에 대해 조금 더 체감 될 것이다.

지금까지 시맨틱 웹과 태그에 대해 간단히 알아봤으니, 이제 그 예시에 대해 간단히 알아보자.

시맨틱 태그들

위 다이어그램을 보면, <div> 태그 만을 사용한 코드와 시맨틱 태그를 사용한 코드가 직관적으로 어떻게 차이가 나는지 인지할 수 있다.
각 요소를 최상단부터 해당 다이어그램에 존재하지 않는 시맨틱 태그까지 정리해보도록 하자.

header and nav

header 는 대체로 웹페이지 상단 정보 영역을 의미하고, nav 태그 는 페이지의 네비게이션 영역을 지정한다. 네비게이션 영역에 자주 쓰이는 예제로 메뉴, 목차, 색인 등이 이에 해당한다.

main

main 은 위에서 언급한 header 영역과 구분되어, HTML 문서 body 영역의 주요 컨텐츠나 핵심적인 내용을 포함하는 영역이다.
이어서 설명할 article 이나, section 등의 영역이 포함되기도 하는 영역이다.

article and section

article 은 신문 기사 하나와 같이 독립적인 콘텐츠 영역을 의미하며, 예시로 게시판과 블로그 글, 매거진이나 뉴스 기사 등이 이에 해당한다.
section 은 본문 영역의 연관성 있는 여러 영역들을 감싸는 용도로 사용 가능하다. 일반적인 섹션을 정의할 때 사용하고 주로 제목 요소(h1 ~ h6)를 포함하는 경우가 많다.
위 예시처럼 article 영역의 주황색 부분이 section 이 되어 구성될 수도 있고, 반대로 section 이 article 영역을 감쌀 수도 있다.

💡 <article> vs <section>

article 에 대해 자세히 설명하자면, 다른 페이지에서 보여져도 이해하는데 문제 없고, main 안의 다른 정보들 필요 없이 고유하게 독립적인 정보를 나타낼 수 있는 부분을 article 로 지정한다.
콘텐츠가 사이트에 포함된 독립적인 섹션의 성향이 크다면, section 대신 article 을 사용 함이 맞다.

aside

aside 는 문서 주요 내용과 직접적인 관련은 없지만, 부가적인 정보나 주 내용과 간접적으로 연관된 부분을 나타낸다. 주로 사이드바 혹은 콜아웃 박스 등으로 나타난다.

figure and figcaption

<!-- figure & figcaption structure -->
<figure>
    <img>
    <figcaption></figcaption>
</figure>

figure 은 이미지나 비디오, 코드 등과 같은 자료를 포함할 수 있는 영역이다. figcaption 은 부모 figure 태그에 포함된 자료의 설명이나 범례 등에 해당하며, figure 태그 안에 포함된다.

ul & ol & dl

<!-- ul & ol & dl structure -->

<ul> <!-- or ol -->
  <li>item1</li>
  <li>item2</li>
</ul>

<dl>
  <dt>description term</dt>
  <dd>description detail</dd>
</dl>

ul 의 경우 순서가 없는 리스트(Unordered list)를 나열할 때 사용하고, ol 의 경우 순서가 있는 리스트(Ordered list)를 나열할 때 사용하며, 두 태그 모두 li 를 사용하여 목록 요소들을 표현한다.
dl 은 설명 목록(description list)을 나타낼 때 사용하며, dt 로 설명할 단어(description term)를 표현하고, dd 에 설명 내용(description detail)을 작성한다.

button and a

button 은 클릭 가능한 버튼 요소를 의미하고, a 는 href 특성을 통해 다른 페이지나 같은 페이지의 어느 위치로 이동할 수 있는 하이퍼링크를 만든다.

💡 button vs a

button 과 a 는 CSS로 똑같이 이를 꾸몄을 때, 같은 외형을 갖지만 용도를 다르게 해야 한다.
우선 button 의 경우에는 눌렀을 때 특정한 행동이 실행되는 경우에 사용한다. 예를 들어, 로그인 버튼이나 가입 등과 같은 기능이 이에 해당한다.
a 의 경우에는 위에서 언급한 하이퍼링크에 대한 내용과 같이 특정 링크로 이동하고자 할 때에 사용하는 것이 효과적이다.

footer

footer 는 주로 웹페이지 하단에 해당하는 영역으로, 일반적으로 작성자, 관련 문서, 저작권 정보 등의 내용이 포함된다.

이외에도 많은 시맨틱 태그가 있기에 차차 사용해보면서 추가로 정리할 예정 😊

🔖 출처

시맨틱 태그 : bining님 벨로그 : [html] 시맨틱 태그(sementic tag) 시맨틱 태그 : Codesigner's Dev Story : Semantic HTML(시맨틱 HTML) 이란?

🔖 전체적인 참고

각각의 시맨틱 태그 : MDN Web Docs

자바스크립트의 객체와 구성 요소, 접근 방법 등의 내용을 포함하고 있습니다. 😊

👥 자바스크립트의 객체

프로그래밍에서 객체(Object)는 자주 사용되고 언급되는 요소 중 하나인데, 자바스크립트에서 객체는 관련된 함수와 데이터의 집합으로 정의할 수 있다.
여기서 생각나는 가장 가까운 기억은 객체 지향 프로그래밍(OOP)이 아닐까 싶다. 자바스크립트는 객체 지향 프로그래밍 언어이며 스크립트 언어에 속한다.

💡 절차적 프로그래밍(Procedural Programming)과 객체 지향 프로그래밍(Object Oriented Programming)

프로그래밍에서 무엇을 지향한다는 것은 특정 방식에 대한 패러다임이라고 해석할 수 있다. 그리고 앞으로 설명할 두 가지 방식이 반대되는 방식이 아님을 인지해야 한다.
앞에서 의미한 지향의 의미로 해석하면, 절차적 프로그래밍(Procedural Programming)을 절차 지향적인 방법(순차적인 명령 수행)으로 프로그래밍을 한다고 생각할 수 있지만, 이 부분은 번역상의 오류로 다뤄진다. 절차적이지 않은 프로그래밍을 생각할 수 없는 부분에서 이를 알 수 있다.
정확히 말하자면, 절차적 프로그래밍에서 절차적(procedural)이라는 뜻은 프로시저에 대한 이야기다. 프로시저에 대해 간단히 이해하면 특정 업무를 수행하기 위한 과정라고 생각하면 편하다.
그런 의미에서 절차적 프로그래밍은 특정 업무 수행을 위한 과정에 따라 차례대로 코드를 기술하는 방식이라고 이해할 수 있다. 그렇기에 Top-Down 방식으로 설계되고, 컴퓨터의 처리구조와 유사하여 빠른 처리 속도를 갖고 있다. 대표적인 언어로는 C가 이에 해당한다.
과거에는 비교적 큰 규모의 하드웨어와 소프트웨어가 필요하지 않아 절차적 언어가 대표적인 언어였지만, 코드의 규모가 커지고 복잡해져 동작을 이해하기에 어려운 상태의 '스파게티 코드'가 되어버리는 단점이 생겨났다. 이러한 문제 극복을 위해 객체 지향 프로그래밍이 등장한 것이다.
객체 지향 프로그래밍(Object Oriented Programming)은 객체를 생성하고, 해당 객체 단위의 상호 작용을 서술하는 방식을 의미한다. 객체 지향 프로그래밍은 처리 속도가 상대적으로 느리지만, 캡슐화(Encapsulation)와 상속(inheritance), 다형성(polymorphism)이라는 키워드와 장점을 설명할 수 있다.
우선, 캡슐화(Encapsulation)는 객체의 속성과 행위를 하나로 묶고, 실제 구현 내용을 은닉한다는 의미를 갖는다. 여기서 은닉은 접근 제한자를 통해 이루어질 수 있다. 그리고 상속(inheritance)은 상위 객체와 하위 객체의 관계에서 하위 객체가 상위 객체의 필드 및 메소드를 사용할 수 있게 물려준다는 의미이다. 마지막으로, 다형성(polymorphism)은 하나의 변수명, 함수명 등이 상황에 따라 다른 의미로 해석될 수 있다는 것이다. 이는 오버라이딩(Overriding)과 오버로딩(Overloading)이 가능하다는 의미다.
자바스크립트는 이 중 객체 지향 프로그래밍에 해당한다.

🔖 출처

절차적 프로그래밍 : 마녀표정님 Tistory : 1. 절차적 프로그래밍 : Procedural Programming 절차적 프로그래밍 & 객체 지향 프로그래밍 : Young Developer's Note : 절차적 프로그래밍과 객체 지향 프로그래밍 절차적 프로그래밍 & 객체 지향 프로그래밍 : 코딩과 프로그래밍 그 사이 어딘가... : 객체지향 프로그래밍(OOP) 절차적 프로그래밍(PP) 절차적 프로그래밍 & 객체 지향 프로그래밍 : Stranger's Lab : 객체지향(OOP)과 절차적 프로그래밍(PP) 객체 지향 프로그래밍 : 기본기를 쌓는 정아마추어 코딩블로그 : 객체 지향 프로그래밍이 뭔가요? (꼬리에 꼬리를 무는 질문 1순위, 그놈의 OOP) 프로시저(Procedure) : 애송이의 코딩이야기 : [ Oracle ] 프로시저와 함수의 차이

💡 스크립트 언어?(Script Language)

스크립트 언어(Script Language)란 응용 소프트웨어를 제어하는 컴퓨터 프로그래밍 언어를 가르킨다. 이는 이미 존재하는 소프트웨어를 제어하기 위한 언어라는 뜻이다.
스크립트 언어에 대해 찾다보면 연관된 내용으로 컴파일 언어와 인터프리터 언어에 대한 내용을 많이 찾게 된다.
컴파일 언어와 인터프리터 언어를 간단하게 설명하자면, 컴파일러는 소스코드를 모두 기계어로 변환한 뒤 실행하는 언어를 의미하고, 인터프리터는 소스코드 한 줄씩 해석하여 바로 명령어를 실행하는 언어를 의미한다.
정의에 따르면, 스크립트 언어는 인터프리터 언어에 해당하는 것으로 이해되지만, 모든 스크립트 언어는 인터프리터 언어에 해당하는지에 대한 질문을 보면 컴파일 되지만, 스크립트로도 실행 가능한 부분도 있다고 생각된다.

🔖 출처

스크립트 언어 : 위키백과 스크립트 언어 & 인터프리터 & 컴파일러 : 런코딩 : [자바스크립트] 스크립트언어 / 인터프리터와 컴파일러 차이점 스크립트 언어 & 컴파일 언어 : damiano1027님 벨로그 : [CS] 스크립트 언어 vs 컴파일 언어

자바스크립트가 객체 지향 프로그래밍 언어에 속하기에 객체에 대한 이해는 자바스크립트를 사용하기 위해 필요한 과정으로 생각된다.
이전 자바스크립트 기초에 대한 포스팅에서 기본 타입을 제외한 나머지 데이터가 모두 객체에 해당한다.

객체의 프로퍼티(Property)

객체는 프로퍼티의 집합이다.

프로퍼티(Property)란 객체를 이루는 단위이다. 프로퍼티는 키(key)와 값(value)로 구성되어 있고, 프로퍼티 키를 통해 각 프로퍼티를 식별할 수 있다.
위 내용들을 예시를 통해 알아보자.

let obj = {
  firstName : 'Acid',
  lastName : 'Park',
  age : 24
}

위 예시는 객체를 생성하는 객체 리터럴 문법이다. 위와 같이 중괄호({})를 열고 안에 키와 값을 콜론(:)을 기준으로 구분하여 작성하며, 프로퍼티 간의 구분은 콤마(,)를 통해 구분한다.
위 예시에서 키는 firstName 과 lastName, age 가 이에 해당하고, 값은 'Acid', 'Park' 그리고 24 등이 이에 해당한다.
프로퍼티 값에는 모든 자료형이 들어올 수 있고 배열과 함수도 가능한데, 값이 함수일 경우 이를 메소드(Method)라고 정의한다.

💡 메소드(Method)와 함수(Function)의 차이

함수와 메소드의 관계는 함수가 더 포괄적인 의미를 갖는다고 이해할 수 있다.
둘의 차이를 간단히 설명하면, 함수의 경우에는 독립적이고, 메소드의 경우 객체에 종속적이다.
이를 간단한 예시로 이해해보자.

// 함수
function func() {
  console.log('Hello, World!')
}
// 메소드
let obj = {
  method : function () {
    console.log('Hello, World!')
  }
}
func() // 함수 호출
obj.method() // 메소드 호출

위 두 가지 경우는 같은 값을 출력한다. 하지만, 함수는 독립적으로 자신의 함수명(func())만으로 실행이 되지만, 객체(obj)에 종속된 메소드(method)의 경우 obj 를 통해 실행된다.
이러한 부분이 메소드가 객체에 종속된다는 점을 의미한다.

🔖 출처

메소드와 함수 : 지속가능한 개발 블로그 : 메소드와 함수 (Method and Function)의 차이점

객체를 구성하는 프로퍼티는 다음과 같은 방법으로 접근할 수 있다.

프로퍼티 접근법

프로퍼티에 접근하는 것은 점 표기법(Dot notation)과 괄호 표기법(Bracket notation)을 통해 가능하다.
두 가지 방식을 통해, 다음과 같이 프로퍼티에 접근할 수 있다.

let obj = {
  firstName : 'Acid',
  lastName : 'Park',
  age : 24
}

console.log(obj.firstName) // 점 표기법
console.log(obj['firstName']) // 괄호 표기법

위 두 가지 방식은 같은 결과를 출력한다. 하지만 프로퍼티 식별자에서 차이를 보인다.
점 표기법의 경우 알파벳으로 시작하며, 공백을 포함하지 못하고, 숫자로도 시작할 수 없다. 하지만 괄호 표기법의 경우 문자열 형태를 가지며, 공백을 포함할 수 있고, 변수 또한 문자열로 해석된다면 사용할 수 있다.
점 표기법이 비교적 읽기 쉽고, 작성하기 더 편하기 때문에 자주 사용하지만, 특수한 경우에는 괄호 표기법이 더 용이할 수 있다.
예를 들어, 조건에 따라 다른 프로퍼티에 접근해야 하는 경우가 있다.

let obj = {
  name1 : 'David',
  name2 : 'Robert'
}

function func(n) {
  let result = n === 0 ? 'name1' : 'name2'
  return result
}

console.log(obj[func(1)])

해당 경우 'Robert' 라는 값이 출력되는 것을 확인할 수 있다. 이렇게 괄호 표기법을 사용하면 함수의 인자 값에 따라 유동적으로 다른 프로퍼티에 접근할 수 있다.
프로퍼티에 접근하는 방법을 알아보았으니, 이어서 프로퍼티 추가와 변경 및 제거에 대해 알아보자.

프로퍼티 추가, 변경, 삭제

프로퍼티의 추가와 변경은 위 두 가지 접근법을 통해 가능하다.

let obj = {
  name1 : 'David',
  name2 : 'Robert'
}

obj.name3 = 'Tom' // 점 표기법 추가
obj['name4'] = 'Duke' // 괄호 표기법 추가

console.log(obj.name3, obj.name4) // output : 'Tom' 'Duke'

obj.name3 = 'Kim' // 점 표기법 수정
obj['name4'] = 'Park' // 괄호 표기법 수정

console.log(obj.name3, obj.name4) // output : 'Kim' 'Park'

위와 같이 점 표기법과 괄호 표기법을 활용하여 프로퍼티의 추가와 변경이 가능하다.
괄호 표기법의 경우에는 동적으로 프로퍼티를 추가할 수 있다.

const obj = {

};

['red', 'green', 'blue'].forEach((color) => {
  obj[color] = color.substring(0, 1);
});

console.log(obj)
/* output : [object Object] {
  blue: "b",
  green: "g",
  red: "r"
} */

해당 예시의 경우 배열 내 요소들을 forEach() 메서드를 통해 순환하면서, 배열 내 요소들을 각각 프로퍼티 키로 가져오고, substring() 메서드를 활용하여 요소의 앞 글자만 추출하여 프로퍼티 값으로 저장하는 예시이다.
위와 같이 파라미터 값을 활용하여 동적으로 프로퍼티를 추가할 수 있다.
프로퍼티의 삭제는 배열 요소의 삭제와 같이 delete 연산자를 사용하여 가능하다.

let obj = {
  name1 : 'David',
  name2 : 'Robert'
}

delete obj.name1

console.log(obj) // output : [object Object] { name2: "Robert" }

위 예시와 같이 delete 연산자를 통해 프로퍼티의 삭제를 진행할 수 있다.

객체와 for...in 문

앞의 반복문에 대한 포스팅에서도 다룬 내용이지만 객체에 대해 알았으니, 다시 한 번 짚고 넘어가자.
for...in 문은 객체 내부에서 프로퍼티 키를 대상으로 순환한다.

let obj = {
    a: 1,
    b: 2,
    c: 3
};
for (let i in obj) { // i = key 값
    console.log(i + ': ' +obj[i]);
};
// output : a: 1, b: 2, c: 3

해당 예시에서 i 는 객체 obj 내부의 프로퍼티 키인 a, b, c 에 해당한다. 이처럼 프로퍼티 키로 접근할 수 있지만, 값(value)에 직접적으로 접근할 수 없다. 그래서 예시와 같이 obj[i] 와 같은 형식으로 값에도 접근할 수 있다.

객체와 메소드(Method)

객체의 저장된 값이, 즉 프로퍼티 값이 함수일 때, 이를 메소드(method)라고 한다. console.log() 의 경우에도 메소드의 형태를 갖고 있는데, 여기서 console 이라는 객체의 메소드인 log() 의 프로퍼티 값이 함수라는 것을 알 수 있다.

let obj = {
  sayHello : () => {
    console.log('Hello')
  }
}

obj.sayHello() // output : 'Hello'

위 예시는 console 에 Hello 라는 값을 출력하는 obj 의 메소드를 작성한 것이다. 해당 메소드의 경우 객체 obj 에만 사용이 가능하다.
또한, 메소드를 활용하면서 객체 내부의 프로퍼티 값을 활용할 수 있는데, 이와 관련되어 this에 대한 개념이 있다.

메소드와 this

메서드를 통해 객체 내부 정보에 접근할 수 있을 때, 메소드는 제 역할을 할 수 있다. 이와 관련되어 this라는 키워드가 있다. this 는 해당 객체를 가리키며, 이때 해당 객체는 메소드를 호출할 때 사용된 객체를 의미한다.
다음의 예시를 보면서 알아보자.

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

// 별개의 객체에서 동일한 함수를 사용함
user.f = sayHi;
admin.f = sayHi;

// 'this'는 '점(.) 앞의' 객체를 참조하기 때문에
// this 값이 달라짐
user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

해당 예시를 보면 동일한 sayHi() 라는 함수를 각각의 객체 user 와 admin 에 메소드로 추가한 뒤에 이를 실행하니, 결과 값이 John 과 Admin 으로 다르게 나타났다.
이를 통해, 자바스크립트에서 this 값은 런타임에 의해 결정된다는 것을 알 수 있다.
자바스크립트에서 this 가 어떻게 작동하는지에 대해서 지난 함수 포스팅에서 다뤘으니, 일반 함수와 화살표 함수의 this 차이, scope 의 구분에 대해 넘어가 다시 알아보자! 😊

🔖 출처

메소드 : 태기의 개발 Blog : 자바스크립트 - 객체 메소드 정리 메소드와 this : javascript.info : 메서드와 this

🔖 전체적인 참고

MDN Web Docs : JavaScript 객체 기본

자바스크립트의 반복문의 종류와 각각의 사용법, 특징 등에 대한 내용입니다. 😊

🔃 자바스크립트의 반복문

반복문(loop)은 프로그래밍에서 일정 구간을 조건에 따라 지속적으로 반복하는 구문을 의미한다.
반복문을 사용하면 단순히 같은 기능을 하는 구문들을 비효율적으로 여러 번 작성하지 않고, 한 번의 구문 작성만으로 똑같은 작업을 실행할 수 있다.
자바스크립트에는 대표적인 반복문으로 for 문과 while 문이 있고, while 문의 경우 변형되어 do~while 문으로도 작성 가능하다.
이번 포스팅에서는 해당 세 가지의 반복문 형태와 각각의 사용법 그리고 특징을 구분지어 알아볼 것이다.

For 문

for 문은 자바스크립트 반복문 생성 시, 일반적으로 사용하는 반복문 형태이다.
for 문 또한 변형된 형태가 몇 가지 존재하는데, 해당 형태들이 언제 사용되는지 그리고 어떻게 작동하는지에 대해 함께 알아볼 것이다.

For 문의 문법

기본적인 for 문은 for 키워드를 통해 작성 가능하고 구성 요소로 변수 초기화, 조건식, 증감식이 있다.

let arr = [1, "two", true]

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]) 
} // output : 1 two true

위 예시는 배열 arr 을 순회하며 console 에 arr 의 각 요소들을 출력하는 작업을 진행한다.
예시에서 for 다음의 괄호 안에 세미콜론(;)으로 구분된 요소들이 for 문의 구성 요소에 해당한다.
우선 let i = 0 을 통해 배열을 순회할 인덱스 요소가 될 변수 i를 선언과 동시에 초기화한다. 이어서 i 가 배열 arr 의 길이(arr.length) 보다 짧아야 함을 조건으로 제시하고, 반복의 기준이 되는 i 가 어떻게 변화할지에 대한 증감식을 작성한다. 예시의 경우 하나씩 증가하도록(i++) 작성하였다.
그렇게 작성된 해당 for 문은 총 배열 길이인 3 만큼 console.log(arr[i]) 구문을 반복하여 위와 같은 결과를 출력한 것이다.

💡 for 문의 동작 순서

for 문의 동작 순서에 대한 이해는 for 문의 작성에 있어 유연한 작성에 도움을 준다.

for (A; B; C) {
   D
}
// A : 변수 초기 선언, B : 조건식, C : 증감식, D : 실행 구문

위 예시는 for 문 요소들의 각 위치를 알파벳으로 정의한 것이다.
for 문의 변수 초기화(A)는 for 문 시작과 함께 처음에만 실행되고 이후 반복 실행하지 않는다. 이후 조건식(B)으로 넘어와 제시된 조건의 반환 값이 true 인지를 구분하여 true 일 경우, 구문(D)을 실행한다. 그리고 증감식(C)으로 넘어와 증감식에 해당하는 변화를 준다.
이후엔 다시 조건식으로 넘어와 조건을 확인하고, 구문을 실행한 뒤, 다시 증감식을 실행하는 것을 반복한다. 해당 순서를 작성하면 다음과 같다.
: A → B → D → ( C → B → D → ) (이후 괄호 안 반복)
for 문이 해당 순서로 작동하기 때문에, 이를 고려하여 for (let i = 0; i < arr.length; i++) 와 같은 보편적인 형태가 아니라 유동적으로 조건식과 증감식을 작성하여 for 문을 더욱 효과적으로 활용할 수 있다.

이어서 for 문 구성 요소의 기능에 대해 자세히 알아보자.
구성 요소 중 변수 초기화(위 예시 A) 부분의 경우, 배열의 인덱스 변수의 초기화 외에도 해당 반복문에서 사용될 변수의 초기화에 사용된다.

let arr = [1, 2, 3, 4, 5]

for (let i = 0, len = arr.length; i < len; i++) {
  console.log(arr[i])
}

해당 예시의 경우, 조건식에서 호출되는 배열의 속성인 길이(length)에 대해 특정 변수(len)로 미리 할당하여 조건식이 순환할 때마다 배열 길이를 반환하는 과정을 생략하도록 할 수 있다. 이때, 각 변수의 초기화는 콤마(,)를 통해 구분한다.
두 번째로, 조건식(위 예시 B)의 경우 주로 초기 변수의 상태 평가에 사용되지만, 외부 전역 변수를 사용하는 등의 방식으로도 조건을 자유롭게 설정할 수 있다.
또한, 조건식의 경우에는 생략할 수도 있으며, 해당 경우에는 break 를 반복문 내부에 삽입해야 한다.

💡 break 문과 continue 문

반복문에서 반복을 제어할 수 있는 구문이다.
break 문은 반복문을 더 이상 반복하지 않고, 바로 해당 반복문을 끝내라는 의미를 갖는다.
break 문의 경우, 조건문(if 등)을 활용하여 특정 조건에 해당하는 경우 조건문을 끝내는 기능을 작성할 수 있다.

let sum = 0;
for (let number=1;; number++) // 조건식 생략 가능
{
    if ( number == 5) // 5일 경우 break 실행
    {
        break;
    }
      sum = sum+number;
      console.log(sum) // 합이 10이 되고 반복문 종료
}

continue 문은 break 문과 달리 반복문을 끝내지 않지만, continue 문을 기준으로 아래에 있는 구문을 넘기고 반복문을 진행한다.
해당 경우에도 조건문(if 등)을 활용하여 특정 조건에 해당하는 경우만 넘어가고 반복문을 진행하는 기능을 작성할 수 있다.

let sum = 0;
for (let number=1; number<=10; number++)
{
    if ( number == 5) // 5일 경우 continue 실행
    {
        continue;
    }
      sum = sum+number;
      console.log(sum) // 합이 15가 되는 경우가 사라짐
}

break 문과 continue 문은 for 문 말고도 다른 반복문(while, do~while 문)에서도 사용할 수 있다.

🔖 출처

break & continue : 연금술사님 블로그 : 반복_break/continue문

마지막으로, 증감식(위 예시 C)의 경우에는 주로 초기 변수의 증감에 사용된다. 증감식 또한 선택 사항이며 생략 가능하고, 초기 변수 외에도 다른 요소의 증감에도 사용 가능하다.

🔖 출처

for 문의 구조 : jun.hansung : JavaScript For 루프(Loop)

앞에서 알아본 기본적인 for 문 이외에도 다양한 형태가 있는데, for...in 문과 for...of 문 등이 이에 해당한다.
for...in 문은 열거 가능한 속성(enumerable)이 있는 객체들에 사용할 수 있고, 객체의 경우 객체 내 프로퍼티들을 순환하면서 key 값에 접근할 수 있다.

let obj = {
    a: 1,
    b: 2,
    c: 3
};
for (let i in obj) { // i = key 값
    console.log(i + ': ' +obj[i]);
};
// output : a: 1, b: 2, c: 3

for...of 문은 반복자(iterator)가 있는 요소들은 모두 순환할 수 있으며, String 과 같은 문자열도 각 문자를 순환할 수 있다.

let arr = ["a", "b", "c"];
for (let i of arr) {
    console.log(i);
};
// a, b, c
let fruit = 'orange';
for (let i of fruit) { // i = 'orange'의 각 문자 단위
    console.log(i);
};
// o, r, a, n, g, e

🔖 출처

for...in, for...of : Swimjiy devlog : [JavaScript] forEach, for...in, for...of 정리

💡 for...in 사용 시 주의사항

for...in 은 배열의 순회에 사용하지 않도록 한다.
그 이유는 보통 객체 프로퍼티를 순회하는데 사용하는 for...in 은 배열 요소를 순회할 경우 모든 프로퍼티를 순회하기에 일반적인 for 를 사용하는 것 보다 느린 결과를 보여준다.
또한, 브라우저마다 순회 순서가 다르기 때문에, 매번 index 순서대로 수행되지 않을 수 있다는 문제점이 존재한다.
위와 같은 이유로 배열의 순회에서는 for...in 의 사용을 지양한다.

🔖 출처

for...in 주의사항 : TOASTUI : 안티 패턴

💡 반복문과 배열(Array)

반복문과 배열은 자주 함께 사용되는데, 그 이유를 이해하기 위해 자료 구조와 탐색 알고리즘에 대해 간단히 알아보자.
배열의 자료 구조에 대한 내용은 배열 관련 포스팅에 작성 했으니, 가서 확인하고 오자!
그렇다면 탐색 알고리즘과 반복문을 연관지어서 개념을 이해해보자. 탐색 알고리즘이란 수많은 데이터 중 원하는 데이터를 찾는 알고리즘으로 선형, 이진, 해시 탐색법 등이 이에 해당한다. 그 중 지금 알아볼 선형 탐색법은 데이터를 순서대로 하나씩 검색하는 방식이다.
배열의 자료 구조에 대한 이해가 됐다면, 배열은 선형 자료 구조라는 부분을 인지했을 것이다. 선형 자료 구조의 데이터는 일대일 관계를 갖고 순차적으로 연결되어 있기에 순서대로 하나씩 검색하는 방식인 선형 탐색법이 용이하다.
그렇기 때문에 배열의 매 요소를 순환하면서 데이터를 탐색하는 반복문이 배열과 자주 사용된다고 생각할 수 있을 것이다.

While 문과 do~while 문

while 문은 for 문과 유사하지만, 문법이나 구조에 있어서 차이를 보인다.
while 문의 정해진 구조는 조건을 제시하는 부분만 존재하고, 나머지 부분은 유동적으로 작성할 수 있다.
그리고 do~while 문의 경우 while 문과 유사하지만, 실행 구조에 있어 차이를 보여준다.
우선 while 문을 먼저 알아보자.

whlie 문

while 문은 조건문이 참일 때 실행되는 반복문이고. 문장이 실행되기 전 참과 거짓을 판단한다.

while 문의 문법은 간략하게 while (condition) {statement} 으로 구성되고, condition 부분이 true 이면 statement 부분을 반복적으로 실행한다.

let i = 0 // 변수 선언

while (i < 10) { // 조건식
  console.log(i)
  i++ // 변수 증감
}

예시를 보면 while 의 경우에는 for 문과 달리 변수 초기화나 증감식을 작성하는 구간이 고정적이지 않다. 그렇기 때문에, 자칫하면 무한 루프의 구간에 빠질 수 있다.
만약, 정해진 반복 횟수가 있다면 while 보다는 for 를 사용하는 것이 효율적일 수 있다.
반대로 정해진 조건을 만족할 때까지 실행해야 하는 구문이라면 for 문 보다 while 문이 효율적일 수 있다.
앞에서도 언급했지만, while 문의 경우에도 break 와 continue 문을 사용할 수 있다.
while 문의 실행 순서를 알아보면 다음과 같다.

while (A) { // A : condition
    B // B : Statement
}

while 문은 단순하게 조건(A) 부분이 통과되면, 지문(B)을 실행하고 다시 조건으로 순환하는 구조를 갖는다.

do~while 문

do~while 문은 while 문과 조건의 위치가 다르다.
그렇기 때문에 do~while 문은 조건 여부와 상관 없이 무조건 한 번 실행하고 반복문을 진행한다.
do~while 문의 문법은 간단하게 do { statement } while (condition) 이고 다음과 같은 예시로 작성할 수 있다.

let i = 0;

do {
  console.log(i);
  i++;
} while (i < 10)

예시를 보면 실행 구문보다 조건이 아래에 적혀있다. 해당 구조를 확인하고 do~while 문의 실행 순서를 확인하면 다음과 같이 이해할 수 있다.

do {
    B
} while (A)

위와 같이 실행 구문(B)을 조건에 상관 없이 실행하고 조건(A)에 걸리므로 while 문과 다르게 조건에 일치하지 않아도 무조건적으로 한 번은 실행하는 것이다.

🔖 전체적인 참고

반복문 : ZeroCho님 개인 블로그 : 반복문(loop - while, for, do)

자바스크립트의 자료형 중 참조 타입에 포함되는 배열(Array)에 대한 내용입니다. 😊

📋 배열(Array)이란?

배열(Array)을 간단하게 설명하면 순서를 가진 복수의 자료들을 저장하는 구조이다. 여기서 순서를 갖는다는 의미는 각 요소마다 인덱스를 활용할 수 있다는 점이 이에 해당하고, 복수의 자료들은 말 그대로 여러 자료들을 한 번에 저장할 수 있다는 점이다.
배열을 통해 하나의 변수에 여러가지 값을 동시에 저장할 수 있게 되면서 다량의 데이터를 효과적으로 다룰 수 있고, 인덱스를 활용하여 데이터를 추가하거나 제거하는 등의 다양한 기능들을 활용할 수 있다.
이번 포스팅에선 배열의 생성과 접근 방식, 메서드와 관련된 내용 등에 대해 알아볼 것이다.

배열의 생성

배열을 생성하는 방법은 크게 두 가지가 있는데 첫 번째로 리터럴을 사용하는 방식, 두 번째로 new 를 활용한 생성 방식이 있다.

let arr1 = [] // 리터럴(문자열) 방식
let arr2 = new Array(arrayLength) // new 활용 방식

첫 번째 방식은 간단하게 대괄호를 활용하는 것으로 배열을 생성할 수 있고, 두 번째 방식은 arrayLength 에 해당하는 부분에 숫자를 대입하여 해당 숫자 만큼의 길이를 갖는 배열을 생성할 수 있다. 해당 배열의 내부 요소들은 전부 undefined 로 구성된다.

let arr3 = new Array(3) // output : (3) [undefined, undefined, undefined]

또한 두 가지 방식 모두 배열 생성과 동시에 초기화가 가능하다. 리터럴 방식의 경우 대괄호 안에 요소를 콤마를 통해 구분하여 작성하는 방법으로, new 를 활용한 방식의 경우 소괄호 안에 요소를 콤마를 통해 구분하여 작성하는 방법으로 가능하다.

let arr4 = [1, 2, "Hi"] // output : (3) [1, 2, "Hi"]
let arr5 = new Array(1, 2, "Hi") // output : (3) [1, 2, "Hi"]

그리고 위에서 확인할 수 있듯이 배열은 다양한 데이터 타입을 함께 포함하여 사용할 수 있다.
이렇게 배열을 생성한 뒤에 배열 내 요소들을 활용하거나 추가 및 제거하는 방법에 대해 알아보자

배열 요소의 추가와 삭제

배열 내 요소는 각 요소마다 인덱스(index)를 갖고 있고, 인덱스를 통해 각 요소에 접근할 수 있다. 인덱스는 0 부터 시작하며 인덱스 위치를 지정하는 방법은 배열 이름에 대괄호([])를 열어 안에 인덱스를 삽입하면 된다.

let arr = [1, 2, "Hi"]
console.log(arr[0], arr[2]) // output : 1 "Hi"

위와 같이 배열의 인덱스를 지정하거나 배열 메서드(Method)를 활용하여 배열 요소의 추가와 삭제가 가능하다.

💡 자바스크립트에서 메서드(Method)란?

메서드와 함수는 서로 유사하지만 명확히 정의하자면 다른 존재이다.
간단히 정의하면 함수가 메서드를 포함하는 용어이고, 메서드는 객체에 종속되는 함수를 의미한다.
함수의 경우에는 그 자체가 기능을 수행하지만, 메서드의 경우에는 객체에 명령을 주고 객체가 기능을 수행하는 함수라고 이해하면 될 것이다.
그렇기에, 함수 호출 방식과 메서드 호출 방식에서도 차이를 보인다.

// 임의의 함수 선언
function funcName() {
    console.log('Hello')
}
funcName() // output : 'Hello'
// Array Method : pop()
let arr = [1, 2, 3]
console.log(arr.pop()) // output : 3

위 임의의 함수 funcName 은 함수명을 통해 바로 실행이 가능하지만 배열의 pop() 메서드의 경우 배열명(arr)에 . 를 붙이고 사용한다.
여기서 pop() 메서드는 Array 객체에 종속되어 있기 때문에, Array 객체에서 호출할 수 있다.

🔖 출처

함수와 메서드 : canonmj님 벨로그 : Javascript : 함수와 메서드의 차이는? object를 파헤쳐보자! 함수와 메서드 : 지속가능한 개발 블로그 : 메소드와 함수 (Method and Function)의 차이점

배열 요소의 추가

배열 요소 추가는 다음과 같이 인덱스를 활용하여 필요한 위치에 값을 할당할 수 있다.

let arr = []

arr[0] = 1

console.log(arr) // output : (1) [1]

이때 순서대로 할당할 필요는 필요는 없고, 필요 위치에 할당을 하면 된다. 만약 배열의 길이를 초과하는 범위에 요소를 할당하면 그 사이의 요소들은 모두 undefined 로 할당된다.

// 위 예시 코드에서 이어서 작성
arr[4] = 1

console.log(arr) // output : (5) [1, undefined, undefined, undefined, 1]

그리고 메서드(method)를 통해 요소를 추가하는 것도 가능하다. 대표적인 메서드로 push() 와 unshift()가 있다.
push() 배열 맨 뒤에 요소를 추가하고, unshift() 는 배열 맨 앞에 요소를 추가하는 메서드이다. 그리고 두 메서드는 요소를 추가한 뒤 새로운 배열의 길이를 반환한다.
push() 와 unshift() 메서드는 매개변수로 추가할 요소를 작성하여 사용할 수 있다.

let arr = [1, 2, 3, 4]

let pushArr = arr.push(5)

console.log(pushArr) // output : 5
console.log(arr) // output : (5) [1, 2, 3, 4, 5]

let unshiftArr = arr.unshift(0)

console.log(unshiftArr) // output : 6
console.log(arr) // output : (5) [0, 1, 2, 3, 4, 5]

배열 요소의 제거도 이와 유사한 방법으로 이루어진다.

배열 요소의 제거

배열 요소의 제거는 기본적으로 delete 연산자를 활용하여 가능하다.

let arr = [1, 2, 3, 4]

delete arr[2]

console.log(arr) // output : (3) [1, 2, undefined, 4]

하지만 해당 방법을 활용할 경우, 위와 같이 배열 길이(length)에는 변함이 없고 기존 위치에는 undefined 가 남음을 알 수 있다.
그렇기에 완전히 배열 요소를 제거하기 위해서 다음의 pop() 과 shift() 메서드를 활용할 수 있다.
pop() 메서드는 push() 와 유사하게 배열 맨 뒤의 요소를 제거하고, shift() 메서드는 unshift() 메서드와 유사하게 배열 맨 앞의 요소를 제거한다. 해당 두 메서드는 반환 값으로 배열에서 제거된 값을 반환한다.

let arr = [1, 2, 3, 4]

let popArr = arr.pop()

console.log(popArr) // output : 4
console.log(arr) // output : (3) [1, 2, 3]

let shiftArr = arr.shift()

console.log(shiftArr) // output : 1
console.log(arr) // output : (2) [2, 3]

또한, 추가적으로 splice() 메서드를 활용해서 요소의 제거를 진행할 수 있는데, 동시에 추가도 함께 할 수 있다. splice() 의 문법은 다음과 같다.

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

해당 문법을 사용하여 추가와 제거를 동시에 진행하면 다음과 같이 할 수 있다.

let arr = [1, 2, 3, 4]

let spliceArr = arr.slice(1, 1, 'two') // 요소를 제거하고 해당 인덱스에 요소 추가

console.log(spliceArr) // output : [2]
console.log(arr) // output : [1, 'two', 3, 4]

그리고 splice() 는 요소의 추가와 제거를 분리하여 각각의 용도로 사용할 수도 있다.

// 요소 제거
let arr = [1, 2, 3, 4]

arr.slice(1, 1)

console.log(arr) // output : (3) [1, 3, 4]

// 요소 추가
arr.slice(1, 0, 2)

console.log(arr) // output : (4) [1, 2, 3, 4]

위에서 알아본 메서드를 포함하여 배열 내 데이터들을 인덱스로 접근하여 추가 및 수정이 가능하다. 이제 이러한 배열이 자료구조적으로 어떠한 의미를 갖는지 간단하게 알아보자.

배열의 특징

배열은 하나의 변수에 여러 가지의 값을 저장할 수 있는 자료형으로서, 배열 또한 객체이기 때문에 관련된 속성과 메서드가 존재한다.
대표적인 속성으로는 length 가 이에 해당하고 메서드는 위에서 언급한 메서드들이 이에 해당한다.
눈으로 보이는 배열의 가장 큰 특징은 인덱스가 존재하기에 순서가 있다는 점이고, 이를 활용하여 효과적으로 데이터를 관리할 수 있다는 점이다.
그렇다면 배열은 어떠한 자료구조를 갖고 있으며, 자바스크립트의 배열은 타 언어의 배열과는 어떠한 차이점이 존재할까? 이에 대해 간단히 알아보자.

배열과 자료구조

우선 배열의 자료구조를 설명하기에 앞서 자료구조에 대한 간단한 설명을 해아 한다.
자료구조(Data Structure)란 컴퓨터 과학에서 자료에 효율적인 접근 및 수정을 가능케 하는 자료의 조직 및 관리와 저장을 의미한다.
자료구조는 그 형태에 따라 분류가 되는데, 선형 구조(Linear)와 비선형 구조(NonLinear)가 이에 해당한다.
선형 구조는 자료를 구성하는 데이터를 순차적으로 나열시킨 형태를 의미하며 배열, 스택(Stack), 큐(Queue) 등이 이에 해당한다. 선형 구조의 경우 저장된 자료의 전후 관계가 1:1인 것이 특징이며, 요소를 순서대로 작업하는 경우 효과적으로 활용할 수 있다.
반대로 비선형 구조는 하나의 자료와 여러가지의 자료가 연결될 수 있는 형태를 의미하며 트리(Tree)와 그래프(Graph) 등이 이에 해당한다. 비선형 구조는 데이터가 1:n 관계를 갖는 것이 특징이며 자료 간의 관계를 정의할 때 효과적으로 활용할 수 있다.
위에서 언급했 듯이 배열은 선형 구조에 속하며 그렇기에 선형 구조의 특징을 이해하면서 배열의 특징을 이해하면 수월할 것이다. 이어서 배열의 특징과 자바스크립트의 배열은 어떤 차이가 있는 지에 대해서 알아보자.

🔖 출처

자료 구조 : Wikipedia : 자료 구조 Linear & NonLinear : HelloWorld : 선형구조와 비선형구조 자료 구조 : blackb0x님 벨로그 : 자바스크립트의 자료구조

자바스크립트 배열의 특징

자바스크립트에서 배열은 타 프로그래밍 언어와는 차이점을 보인다. 이에 대해 알아보기 위해 프로그래밍 언어에서의 배열 특징에 대해 우선적으로 알아보자.
일반적으로 배열(Array)이란 같은 자료형을 가진 연속된 메모리 공간으로 이루어진 자료구조라고 할 수 있다.
위 두 가지 특징은 배열의 가장 기본적인 특징이면서 자바스크립트의 배열과 구분되는 특징이기도 하다.
먼저 같은 자료형을 가진다는 부분은 자바스크립트의 경우, 배열에 다양한 자료형의 자료들을 동시에 할당할 수 있다는 점에서 차이점을 갖는다.

let arr = [1, 2, 'Hello', true]
// Number와 String, Boolean의 자료형이 동시에 할당된 모습이다.

위와 같이 자바스크립트의 배열의 경우, 타 언어의 배열과 다르게 다양한 자료형을 하나의 변수에 할당할 수 있다.
그리고 일반적인 배열이 연속된 메모리 공간을 갖는다는 부분에서, 자바스크립트의 배열은 각각의 배열 요소들이 연속적으로 이루어지지 않아도 된다.

let arr = [1, 2, 'Hello', true]

delete arr[1]

console.log(arr) // output : (4) [1, undefined, "Hello", true]

일반적으로 배열에서 배열 요소의 삭제가 이루어지면, 배열 요소를 연속적으로 유지하기 위해 요소들을 이동시켜야 하지만, 자바스크립트의 배열 요소 삭제 방법 중 하나인 delete 를 사용하면 배열 길이가 감소하지 않고 배열 요소의 공간은 그대로 유지된다는 점이 이에 해당한다.

🔖 출처

배열 : CodeDragon : 배열(Array) 배열 차이 : CodeDragon : 배열(Array), 배열 차이 (java vs javscript)

💡 자바스크립트의 배열은 배열이 아니다?

위에서 언급한 바와 같이 자바스크립트의 배열은 여타 프로그래밍 언어에서의 배열과는 차이점이 있다.
기존의 배열은 밀집 배열(dense array)로 배열 요소가 밀접하게 연속적으로 이어져서 순차적인 작업에 최적화 된 형태이다.
하지만 자바스크립트의 경우에는 희소 배열(sparse array)로 배열 요소의 각 메모리 공간의 크기가 다를 수 있고 연속적으로 이루어지지 않아도 된다는 점에서 일반적인 배열의 의미를 갖는다고 말하기에 어려울 수 있다.
자바스크립트의 배열을 배열이라고 하지 않는다면, 자바스크립트의 배열은 일반적인 배열의 특징을 갖춘 객체라고 말할 수도 있다.
쉽게 말하자면 자바스크립트의 배열에서 인덱스는 객체(Object)의 프로퍼티 키(key)에 해당하고, length 프로퍼티를 별도로 갖는 객체라는 말이다.
그렇기에 자바스크립트의 배열은 기존 배열이 인덱스를 통해 각 요소에 빠르게 접근할 수 있는 만큼 효율적이지 않지만, 배열 요소의 추가와 삭제 등과 같은 작업에서 좀 더 효율적일 수 있다는 부분이 장점이다.
추가적으로, 모던 자바스크립트 엔진에서는 배열을 여타 배열과는 구별하여 좀 더 배열처럼 동작하도록 최적화하여 구현했다는 점도 알아두자.

🔖 출처

자바스크립트의 배열 : poiemaweb : 자바스크립트 배열은 배열이 아니다

배열과 시간 복잡도(Time Complexity)

특정 배열에 하나의 요소를 추가하는 메서드는 같은 실행 시간을 가질까? 같은 갯수의 요소를 처리하는 메서드라도 그 방식에 따라 다른 효율을 보일 수 있을 것이다.
자바스크립트 배열의 메서드들이 실행 시간을 각각 얼마나 갖는 가에 대해 이해하기 앞서, 시간 복잡도(Time Complexity)와 빅 오(Big-O) 표기법에 대해 알 필요가 있다.
우선 시간 복잡도란 실행 시간의 관점에서 해당 알고리즘의 효율을 측정하는 정도라고 말할 수 있다. 그리고 빅 오 표기법은 이러한 시간 복잡도를 나타내는 표기법이다. 빅 오 표기법은 O() 의 형태로 작성하고 시간 복잡도에 따라 괄호 안에 들어가는 값이 달라진다.
위 시간 복잡도와 빅 오 표기법을 활용하여 자바스크립트 배열의 일부 메서드들이 어떤 시간 복잡도를 갖는 지에 대해 알아보자.
우선, 배열 요소의 추가 및 제거와 관련된 push() 그리고 pop() 메서드와 unshift(), shift() 메서드가 있다.
push() 와 pop() 의 경우, 배열의 맨 끝에 요소를 추가하거나 제거하는 메서드이기 때문에, 한 번의 단계만 필요하고 시간 복잡도는 O(1) 로 나타낼 수 있다.
unshift() 와 shift() 의 경우에는, 배열 맨 앞에 요소를 추가하거나 제거하는 메서드이기 때문에, 다른 요소들의 인덱스 값이 바뀌므로 O(n) 의 시간 복잡도를 갖는다.

💡 pop() 이 shift() 보다 효율적이라고?

shift() 메서드가 O(n) 의 시간 복잡도를 갖는 것에 대해 자세히 설명하면 다음과 같다.
pop() 의 경우, 맨 끝의 요소만 제거하기 때문에 다른 요소의 인덱스에 영향을 주지 않는다.

let arr = [1, 2, 3]
arr.pop()
console.log(arr) // output : (2) [1, 2]

위 예시를 보면 맨 끝의 요소인 3 은 사라지고 기존 요소인 1, 2 는 인덱스 값이 그대로 임을 알 수 있다.

let arr = [1, 2, 3]
arr.shift()
console.log(arr) // output : (2) [2, 3]

하지만, shift() 의 경우 맨 앞의 요소인 1 을 제거함과 동시에 기존 요소인 2, 3 의 인덱스 값이 1 씩 감소하는 것을 확인할 수 있다.
그렇기에 같은 갯수의 요소를 처리하지만, shift() 의 경우 모든 요소를 순환하며 인덱스 값을 변환하기 때문에 시간 복잡도에서 차이를 보이는 것이다.

이렇게 배열의 메서드들의 시간 복잡도가 어느 정도인지를 알고 이해한다면 같은 데이터를 처리함에 있어서도 효율적으로 다른 결과를 만들어 낼 수 있기에, 많은 데이터를 처리할수록 시간 복잡도에 대한 이해가 충분하다면 그것은 필히 도움이 될 것이다.

🔖 출처

배열과 시간 복잡도 : 손누누님 Tistory : [Javascript/JS] 자바스크립트에서의 배열과 시간복잡도 자바스크립트 자료형과 복잡도 : 러닝워터 개발 블로그 : 문제 31 : 자바스크립트 자료형의 복잡도

🔖 전체적인 참고

배열 : MDN Web Docs : Array 자바스크립트 Array : poiemaweb : 5.28 Array 배열

자바스크립트의 조건문에 대한 내용입니다! 😊

📒 자바스크립트의 조건문(Conditionals)

자바스크립트에서는 코드의 진행을 제어할 수 있는 기능이 있다. 해당 제어 방식은 흐름 중간에 조건을 제시하여 흐름을 통제하던지 아니면 해당 흐름을 반복적으로 진행하도록 통제할 수도 있다.
위와 같이 주어진 조건에 따라 코드를 제어하는 구문을 제어문이라고 한다.

💡 제어문은 무엇인가

위에서 언급한 듯이, 제어문(control statements)은 특정한 결과를 도출해내기 위해서 조건을 제시하여 조건에 부합하는 상반되는 결과를 도출하거나, 구간의 반복 등을 유도하는 구문이라고 할 수 있다.
제어문에는 이번 포스팅에서 다룰 조건문과 반복문이 포함되며 흐름을 제어하는 구문이기 때문에, 순차적으로 진행되는 흐름이 제어문으로 인해 어떻게 전환되는지에 대한 이해가 필요하다!

🔖 출처

제어문의 정의 : Continuous Of Shoveling : [javascript 기초 강좌] 6. 제어문 ( if / switch / for / while / do~ while )

그 중 이번에 다룰 조건문(conditionals)은 코드 흐름 중간에 조건을 제시하여 흐름을 통제하는 제어문의 일종이다.
대개 조건문은 if 조건문을 사용하며 이외에도 switch 조건문도 사용을 하는데, 이번 포스팅에서는 해당 구문들의 차이점과 구조에 대한 이해를 할 것이다.

⚙️ if 문은 무엇인가?

영어 어휘에서 의미하는 if 를 이해했을 때 우리는 간단히 자바스크립트의 if 문의 기능에 대한 이해를 할 수 있다.
if 문은 말 그대로 만약에 ~ 면 이라는 조건을 제시하여 해당 조건에 부합하면 true 를 반환하여 작성한 구문을 실행하고, 반대의 경우 이어서 코드를 순차적으로 진행하거나 다른 조건을 다시금 제시하는 등의 흐름을 통제하는 기능을 하는 구문이다.
해당 정의를 이해하면 이어지는 if...else 문법에 대한 사항이나 구조에 대한 이해가 쉽게 될 것이다. 그럼 이어서 if...else 문의 문법에 대해 알아보자.

if...else 문의 문법

if...else 문은 크게 세 가지 단계로 이루어진다.
우선 조건을 제시하고 결과 값이 true 일 경우 구문을 실행하는 if 문, 앞의 조건이 false 인 경우 실행할 내용을 작성하는 else문, 마지막으로 앞의 조건이 false 일 경우 새로운 조건을 제시하는 else if 문이 있다.
해당 부분을 예시 코드로 살펴보자

if (condition1) { // if
    statement1
} else if (condition2) { // else if
    statement2
} else { // else
    statement3
}

위 예시 코드를 보면 조건은 총 2가지가 제시되어 있고, 실행 구문은 3가지가 작성되어 있다.
먼저 if 부터 보면 if 를 작성하고 소괄호(())를 열어 해당 소괄호에 조건(condition1)을 작성한 다음 중괄호({})를 열어 중괄호 안에 구문(statements1)을 작성하는 구조를 갖는다.
이어서 나오는 else if 도 if 와 같은 구조인데, 조건(condition2)을 제시하고 실행 구문(statements2)을 작성했으며 별다른 변화는 확인되지 않는다.
그러나 else 의 경우 조건 부분이 생략된 것을 알 수 있다. 그 이유는 else 문이 앞의 모든 조건들에 부합하지 않는 반대의 경우를 서술하기 때문에 별도로 조건을 작성하지 않아도 되는 것이다.
위 작성 방법은 세 가지 요소를 모두 활용하였을 때 작성할 수 있는 방식이고, else if 와 else 는 필수적인 요소가 아니다. 그렇기 때문에, else if 와 else 가 생략 가능한 경우를 다음의 예시에서 알아보자.

// n이 5 이상인 경우 true를 출력하는 조건문
let n = 3
if (n >= 5) { 
    console.log(true)
}
console.log(`none`) // output : `none`

위 예시의 경우 조건(n >= 5)이 만족하는 경우 true 를 반환하고, 아닌 경우에는 흐름을 이어서 진행하며 if 문 밖의 console.log() 를 실행하여 none 을 출력한다. 이렇게 반대의 경우를 별도로 규정하지 않아도 되는 경우에는 else 와 else if 를 생략할 수 있다.
또한 else 만을 추가해서도 구문을 작성할 수 있다.

// n이 5 이상인 경우 true를 출력하고, 반대의 경우 false를 출력하는 조건문
let n = 3
if (n >= 5) { 
    console.log(true)
} else {
    console.log(false)
}

이 경우에는 else 문이 n 이 앞 조건의 반대 상황을 의미하기 때문에 n >= 5 인 조건에 부적합한 모든 경우의 수들이 이에 해당하는 것이다.
여기서 알아야 할 점은 n >= 5 의 반대가 n < 5 만을 의미하는 것이 아님을 알아야 한다.
반대의 경우에는 숫자가 아닌 경우(NaN), 값이 정의되지 않은 경우(undefined), 값이 의도적으로 비어있는 경우(null) 등을 포함하기 때문에, 조건의 의도가 n < 5 이었다면 추가적으로 조건을 제시해야 할 것이다.
만약 해당 경우 코드를 이런 식으로 수정할 수 있다.

let n = NaN // n이 숫자 범위가 아닌 상황들을 else로 제시
if (n >= 5) { 
    console.log(true)
} else if (n < 5) {
    console.log(false)
} else {
    console.log('is Not a Number')
}

해당 코드는 위에서 언급했던 나머지 경우들에 대해 else 를 통해 일괄적으로 정의했고, 앞에 else if 를 추가하여 n < 5 에 대한 조건을 제시하였다.
알고리즘을 작성하다 보면 조건에 대한 명확한 제시가 되지 않아, 난 정확하게 입력한 것 같은데 예외의 경우에 걸려 답안과 일치하지 않는 상황이 발생하기도 한다. 그렇기 때문에, 조건이 명확하게 어떤 바를 의미하는 지에 대한 이해를 명확히 하고 적절하게 구문을 사용하여야 한다.

💡 if 와 else if 만을 사용하는 것

해당 경우에도 위와 마찬가지라고 생각한다.

let n = NaN
if (n >= 5) { 
    console.log(true)
} else if (n < 5) {
  console.log(false)
}
console.log('else') // output : 'else'

위 코드를 보면 변수 n 이 NaN 이기에 결과적으로 'else' 라는 결과 값을 반환한다.
이렇게 코드 진행이 이어지게 하는 것이 의도 된 경우라면 상관이 없지만, 만약 숫자가 아닌 결과를 오류로 간주하고 진행을 제어해야 하는 상황이라면 이는 문제가 될 수 있다.
조건문에서 자신이 생각한 의도와 코드에 작성된 의도가 명확히 일치해야 발생할 수 있는 오류를 최소한으로 할 수 있다고 생각한다.
그렇기에 위 코드의 경우에도 그 의도를 명확히 함이 중요하다고 생각한다.

이렇게 if...else 의 문법에 대해 알아보았고, 그렇다면 실제로 이 구문이 어떻게 작동하는 지에 대해 알아보자.

if...else 문의 흐름

if...else 의 흐름에 대해서 알아보기 전에, 앞에서 제시한 예시 코드를 일부 변형한 것을 살펴 보면서 알아보자.

let n = 3
if (n >= 5) { 
    console.log('n >= 5')
} else if (n < 5) {
    console.log('n < 5')
} else if (n === 3) {
  console.log(n)
} else {
    console.log('is Not a Number')
} // output : 'n < 5'

조건문의 흐름은 조건 일치 여부에 따라 그 흐름이 결정되는 것은 이미 다 알고 있을 것이다.
위 경우 변수 n 에 3 이라는 값이 할당되었고, 결과는 3 을 출력할 것 같지만 'n < 5' 를 출력하는 결과를 알 수 있다.
만약 의도한 출력 값이 3 이라면 이는 오류를 출력하지 않지만 문제가 있는 구문이다.
이는 앞의 else if 조건에서 제시된 n > 5 라는 조건이 다음의 n === 3 이라는 조건을 포함하는 조건이었기에, 3 이라는 값을 저장한 변수 n 은 앞의 조건에 대해 true 를 반환하였고 그 시점에서 결과 값을 출력한 것이다.
이를 의도한 바가 우선적으로 3 일 경우를 찾기 위함이라면 다음과 같이 수정할 수 있다.

let n = 3
if (n === 3) { 
    console.log(n)
} else if (n < 5) {
    console.log('n < 5')
} else if (n >= 5) {
  console.log('n >= 5')
} else {
    console.log('is Not a Number')
} // output : 3

이렇게 수정한 결과는 올바르게 3 이라는 값을 반환하는 것을 알 수 있다.
이렇게 조건문의 흐름은 우선적으로 작성된 조건에서 멈추면 뒤 조건들은 검증할 기회가 주어지지 않기 때문에 조건의 순서를 정확하게 하여 올바른 결과를 도출하도록 해야 한다.

이어서 switch 문에 대한 내용을 간단하게 알아보고 if 와 어떤 차이점이 있는지에 대한 내용을 알아보자.

🔄 switch 문은 무엇인가

우선 switch 문도 제어문의 일부이며 조건문에 포함된다.
switch 문을 간단하게 표현하자면 단순한 복수의 if 문을 표현하는 구문이라고도 표현된다. 이 말이 어떤 의미를 갖는 지 switch 문의 문법을 설명하면서 함께 알아보자.

switch 문의 문법과 기능

switch 문은 다음과 같은 문법을 갖는다.

switch (x) {
  case 'value1':  // if (x === 'value1')
    ...
    statement1

  case 'value2':  // if (x === 'value2')
    ...
    statement2

  default: // else
    ...
    statement3
}

언뜻 보면 if 문과 비슷하지만, 조건에서 소괄호(())가 없다는 점과 실행 구문에서 중괄호({})를 사용하지 않고 콜론(:)을 사용한다는 점에서 문법적인 요소의 차이를 보여준다.
그리고 switch 문의 경우에는 if 가 아닌 case 문을 통해 일치 여부를 구분하고, else 대신 default 문을 통해 반대의 경우를 출력하거나 반환한다.
또한 기능적인 부분에서도 차이가 존재하는데, if 의 경우에는 조건 지정의 자유도가 높지만, switch 문의 경우에는 일치 여부만 판별할 수 있기 때문에 단순한 조건만 제시할 수 있음을 알 수 있다.
이러한 switch 문은 범위나 복잡한 조건을 제시할 경우에는 사용할 수 없지만, 단순히 일치 여부만 판단해야 하는 if 문이 반복되는 경우를 대체할 수 있다.

🔖 출처

switch 문 : JAVASCRIPT.INFO : switch문

💡 switch 문, 언제 작성해야 할까?

switch 문과 if...else 문의 차이점은 탐색하고자 하는 데이터에 접근하는 방식에서 차이를 보이는 것으로 이해했다.
정확한 내용은 CS에 대한 내용이고, 아직 CS가 부족한 본인에게 완벽한 이해가 되지 않기에 최대한 간단하게 해석하여 작성한다.
간단하게 말하자면, if...else 문의 경우 조건에 만족하는 지를 구분하여 순차적으로 판단하는 반면에, switch 문의 경우 입력 값에 해당하는 점프 테이블의 위치로 jump 하는 방식을 채택한다.
그렇기에, 점프 테이블을 별도로 만들지 않지만 특정 데이터를 찾기 위해 구분하는 과정(조건 구분)이 지속적으로 존재하는 if...else 문의 경우 조건의 수가 적을 수록 유리하다.
반대로 구분하는 과정이 대입 값이 무엇인지만 확인하지만, 점프 테이블을 만드는 과정이 필요한 switch 문의 경우 조건의 수가 많을수록 유리하다.
당연히도 해당 내용은 if...else 와 switch 둘 다 사용할 수 있는 경우에 해당한다! 😆

🔖 출처

if...else vs switch : THINK-PRO BLOG : switch문과 if문의 성능 비교 (ISA 관점에서)

🔖 전체적인 참고

MDN Web Docs : if...else MDN Web Docs : switch

자바스크립트의 함수(function)의 다양한 정의 방법과 실행, 사용 이유 등에 대한 내용입니다. 😊

📒 자바스크립트의 함수란?

프로그래밍에서 함수(function)란 하나의 특별한 목적의 작업을 위해 독립적으로 설계된 프로그램 코드의 집합이라고 정의할 수 있다.

해당 정의를 이미지로 표현하면,

위와 같이 표현될 수 있는데, 이미지에서 나온 특정 입력 값이 투입되면 함수를 거쳐 새로운 출력 값을 반환하는 것과 같은 역할을 하는 것이다.

자바스크립트에서 함수는 일급 객체로 취급된다.

💡 일급(first-class) 객체란

다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 일급 객체를 위한 조건은 다음과 같다.

• 변수(variable)에 담을 수 있다.
• 인자(parameter)로 전달할 수 있다.
• 반환 값(return value)으로 전달할 수 있다.
  #### 🔖 출처 >> [1급 객체 : 위키백과 일급 객체](https://ko.wikipedia.org/wiki/%EC%9D%BC%EA%B8%89_%EA%B0%9D%EC%B2%B4) [1급 객체 : 최정렬님 github.io](https://bestalign.github.io/dev/first-class-object/)

위 일급 객체에 대한 설명에서 나온 변수와 인자 그리고 반환 값에 대한 내용이 이어지는 자바스크립트 함수의 사용법에서 다뤄진다.

⚙️ 함수(function) 사용법

함수도 변수가 선언과 할당의 과정이 있듯이, 마찬가지로 함수는 정의와 실행의 과정이 있다.

함수의 정의

함수를 정의하는 다음과 같은 방법들이 있다.

• 함수 선언문
• 함수 표현식
• 화살표 함수 표현식

우선 함수 선언문은 일반적인 프로그래밍 언어에서 함수 선언과 비슷한 형식으로 가장 기본적인 방법이다.

function functionName(parameter) {
    statements
}

위 구문에서 보이는 바와 같이, function 을 작성하고 함수 이름(functionName)을 작성한 뒤에 소괄호(()) 안에 매개변수(parameter)의 이름을 작성한다. 그리고 중괄호를 열어 함수를 실행했을 때 작동되고자 하는 구문(statements)을 작성한다.

함수 표현식은 함수 선언식의 구문과 비슷하지만 변수 값에 함수를 저장하는 형태의 구문을 갖는다.

let functionExpression = function functionName(parameter) {
    statements
}

보이는 바와 같이 함수 선언문과 비슷한 형식이지만 변수(functionExpression)를 선언하여 해당 변수의 값으로 함수(fucntionName)를 할당한다.

위와 같이 구문 작성 방식의 차이가 있기 때문에, 두 방식은 차이점이 존재한다. 그 차이점은 호이스팅과 관련된 사항인데, 호이스팅 관련 내용은 이전 자바스크립트 기본에 대한 포스트에 기재했으니 기억 안나면 다시 보는걸로!

💡 함수 선언문과 함수 표현식의 차이점

간단히 말하자면, 함수 선언문은 호이스팅에 영향을 받고, 함수 표현식은 호이스팅에 영향을 받지 않는다!
해당 내용을 예시를 활용하여 알아보자

// 함수 선언문
sayHello(); // output : hello
function sayHello(parameter) {
    console.log('hello')
}

// 함수 표현식
sayHello(); // ReferenceError: sayHello is not defined
let functionExpression = function sayHello(parameter) {
    console.log('hello')
}

위 두 가지 구문은 공통적으로 함수 실행 이후 선언이 이루어지는 형태이다.
그러나 함수 선언문의 경우에만 정상적으로 함수 실행이 작동하는 결과를 확인할 수 있다.
이는 위에서 언급한 바와 같이 호이스팅이 함수 선언문의 경우에만 일어나기 때문이다.
변수는 var는 호이스팅이 일어나기 때문에 해당 방법을 지양하고 let과 const 방식을 지향해야 했다.
마찬가지로, 함수도 호이스팅으로 인해 스코프가 꼬이고 문제 발생에 대한 정확한 원인 분석이 어려워지는 문제점 등이 발생하기 때문에, 대체적으로 함수 표현식을 지향한다!

이어서 화살표 함수(Arrow function)는 문법에 들어가는 => 해당 부분이 마치 화살표 같아서 이름 지어진 함수 정의 방식이다. 화살표 함수의 문법은 다음과 같다.

let arrowFunc = (parameter) => {
    console.log('Hi')
}

arrowFunc() // output : Hi

또한, 앞의 두 가지 방식과는 다르게 화살표 함수는 구문이 짧고, this의 바인딩 방식에서 일반 함수와 구분된다.

💡 일반 함수와 화살표 함수의 차이

this 에 대한 간단한 이해

this 를 간단하게 설명하자면, 현재 실행하고 있는 문맥이 무엇인가에 대한 내용이다.
누가 호출했느냐에 대한 내용이 중요한 부분인데, 브라우저 콘솔을 기준으로 기본은 window 다.

// in browser
console.log(this); // output : window
// strict 모드일 경우, undefined 라고 한다.

이러한 this 객체 안에서는 결과 값이 달라진다.

var obj = {
  a: function() { console.log(this); },
};
obj.a(); // obj
var a2 = obj.a;
a2(); // window

이는 객체 메서드 호출 시, this 를 내부적으로 바꾼다고 한다.
그러나 아래의 경우에는 window 가 출력된다. 왜냐하면 아래의 경우에는 변수에 값을 저장한 순간 객체의 메서드가 아닌 일반적인 함수가 되었기 때문에 더 이상 obj 의 메서드가 아닌 것이다.
이렇게 자바스크립트의 this 는 정적인 것이 아닌 동적인 존재로 여겨진다. 이는 일반 함수의 this가 동적 스코프(dynamic scope)에 해당한다고 할 수 있다.
그러나 this 는 동적 스코프가 아닌 정적 스코프(lexical scope)의 this를 갖는데, 이러한 부분에서 차이점을 가지며 바인딩 방식에 차이를 보인다.
동적 스코프와 정적 스코프에 대한 내용은 아래 간단히 설명할 것이므로 필요 하에 목차를 눌러 이동하자!(해당 내용이 너무 길어져 별도로 작성 😂)

바인딩(binding) 방식의 차이

멀고도 먼 길이었다. 이제 바인딩의 차이에 대해 알아보자.
동적 스코프와 정적 스코프에 대한 이해를 마쳤다는 전제 하에 간단히 설명하자면, 화살표 함수는 함수 선언을 할 때this 에 바인딩하는 객체가 정적으로 결정된다는 점이다. 이 말은 화살표 함수는 언제나 상위 스코프의 this 를 가리킨다는 것이다.
예시 코드를 보면서 해당 내용을 이해해보자.

function Person(){
  this.age = 0;
  setInterval(() => {
    this.age++; // this는 Person 객체를 참조
    console.log(this.age);
  }, 1000); // output : 1... 2... 3...
}
var p = new Person();

콜백 함수(callback function)에 대한 내용은 잠시 미뤄두고 스코프에 대한 내용에 집중하자면, 위와 같은 상황에서 setInterval() 함수의 this 는 상위 스코프인 Person의 객체를 참조하여 해당 값인 0 을 사용한다.
위에서 잠깐 언급한 바와 같이, 화살표 함수는 간단하게 함수 구문을 작성할 수 있다는 장점과 앞에서 이해한 this의 바인딩 부분에서 상위의 객체를 참조할 수 있다는 점이 콜백 함수를 작성하는 데에 용이하다.
이와 관련되어 콜백 함수에 관련된 내용과 화살표 함수로 대체 가능한 경우에 대한 내용은 별도로 포스팅을 할 예정이다. 👊

🔖 출처

this : 제로초님 개인블로그 : 자바스크립트 this는 무엇인가? Arrow Function Binding : Nesoy Blog : Javascript Arrow function과 Binding에 대해

💡 Lexical Scope와 Dynamic Scope

Lexical Scope 는 변수나 함수가 선언된 곳의 내용 사용한다는 의미이고, Dynamic Scope 는 변수나 함수가 호출된 곳의 내용 사용한다는 의미를 갖는다.
해당 내용은 어떻게 해석할 수 있을까에 대해 예시 코드를 보면서 알아보자

function log() {
  console.log(name);
}
function wrapper() {
  var name = 'nero';
  log();
}
var name = 'zero';
wrapper(); // output : zero

해당 코드는 두 가지 방식에 따라 결과가 달라진다.
우선 자바스크립트는 Lexical Scope 의 방식을 따르고 함수의 선언에 따라 상위 스코프가 결정되기 때문에, 코드를 실행하면 결과 값으로 zero 를 반환한다.
이는 선언을 기준으로 스코프를 결정하기 때문에, 선언하는 순간 자기 스코프 기준으로 상위 스코프의 가장 가까운 곳의 변수를 고정적으로 참조한다.
그렇기 때문에, 위 코드의 경우에는 wrapper() 함수가 선언된 시점에서 상위 스코프의 전역 변수 name을 고정적으로 참조하기 때문에, 선언 시 nero 라는 값을 가진 name 이라는 지역 변수는 출력 결과에 영향을 주지 않는다.
만약 Dynamic Scope 방식이라면 호출을 기준으로 스코프가 결정되기 때문에, 함수가 선언되고 name의 값이 변경되었지만 wrapper() 함수 내의 log() 함수가 호출 된 시점에서 name 이 재선언 되어 출력 값은 nero로 출력될 것이다.
이정도로 간단하게 각 스코프에 대해 설명할 수 있다. 👌

🔖 출처

Lexical and Dynamic Scope : Suyeon Bak님 medium : (JavaScript) Lexical Scope(Static Scope) and Dynamic Scope Lexical and Dynamic Scope : 제로초님 개인 블로그 : 함수의 범위(scope)

함수명에 따른 구분

또한, 함수 작성 방식에서 함수의 이름(식별자 : identifier)을 작성하는 지의 유무에 따라 구분되기도 한다.

식별자 규칙에 대한 내용 리마인드! 🧐

일반적으로 함수의 이름을 정의하는 함수 형태를 기명 함수라 하고, 반대로 참조할 식별자 없이 선언된 함수를 익명 함수라 한다.

// 기명 함수
function sayHello1() {
    console.log('Hello, World')
}
// 익명 함수 1
let sayHello2 = function () {
    console.log('Hello, World')
}

위와 같이 기명 함수(sayHello1())는 해당 함수명을 통해 선언되었지만, 아래 익명 함수(sayHello2())의 경우 함수 표현식의 구문으로 let 을 통해 변수에 할당되었으며, 변수명을 통해 구분할 수 있다.
그리고 기명 함수의 경우엔 선언된 함수명을 통해 실행하지만, 아래 익명 함수의 경우에는 변수명을 통해 실행 가능하다. 위 익명 함수의 경우에는 아래와 같이 실행된다.

sayHello2(); // 기명 함수와 동일

이러한 익명 함수는 주로 다른 함수에 대한 인수로 사용하거나, 클로저(closure)로 사용하는 경우에 활용된다.

클로저(closure)는 간단하게 말하자면 내부 함수가 외부 함수에 접근할 수 있는 것에 대한 내용인데, 이후 별도의 포스팅을 진행할 것이다. 그래도 지금 당장 이해가 필요하다면 아래 링크로!

🔖 참고

closure : 생활코딩 : 클로저

return 문의 역할

그리고 함수에서 작동된 구문에 따라 나오는 결과 값을 반환하기 위해서는 return 문이 존재해야 한다. 다음의 코드를 살펴보면서 알아보자.

// return 문이 없는 함수
function sayHello() {
    let a = 'Hello, World'
}
console.log(sayHello()) // output : undefined

해당 함수의 경우 변수 a 에 'Hello, World' 라는 문자열을 저장하였지만, 이를 실행하여 console 에 출력하니 undefined 라는 값을 반환하였다.
이는 함수의 기본 반환 값이 undefined 로 정해져있고, returtn 값을 설정하지 않았기에 기본 값이 출력된 것이다.
해당 코드에서 변수 a 의 값을 출력하기 위해서 다음과 같이 수정할 수 있다.

// return 문이 있는 함수
function sayHello() {
    let a = 'Hello, World'
    return a
}
console.log(sayHello()) // output : 'Hello, World'

위 코드에서 return 값으로 a 를 설정하니 의도한 대로 Hello, World를 출력하는 것을 알 수 있었다.
해당 경우에는 단순히 console 에 출력하는 것이 목적이었지만, return 은 구문에 대한 값을 반환한다는 점에서 중요한 요소 중 하나이다.

함수의 실행

이미 위에서도 많이 봤겠지만, 함수의 실행은 다음과 같은 형식으로 할 수 있다.

function sayHello() {
    console.log('Hello, World')
}
sayHello(); // output : 'Hello, World'

위와 같이 함수명에 소괄호를 붙혀 실행할 수 있다. 또한 앞에서 언급한 익명 함수의 경우에는 변수명을 활용하여 함수를 선언할 수 있다.
그리고 함수 실행을 선언 이후에 별도로 진행하는 것 말고도, 선언과 동시에 즉시 함수를 실행하는 함수도 존재한다.

// 기명 즉시 실행 함수 1
(function sayHello() {
    console.log('Hello, World')
})(); // output : 'Hello, World'
// 기명 즉시 실행 함수 2
(function sayHello() {
    console.log('Hello, World')
}()); // output : 'Hello, World'
// 익명 즉시 실행 함수 1
(function () {
    console.log('Hello, World')
})(); // output : 'Hello, World'
// 익명 즉시 실행 함수 2
(function () {
    console.log('Hello, World')
}()); // output : 'Hello, World'

위 네 가지 함수 구문은 기명과 익명 함수로 구분되고 괄호의 위치만 달라진다. 괄호의 위치가 변경되어도 보시다시피 결과 값은 동일하다.
즉시 실행 함수의 문법을 말하자면 함수를 작성하고 함수를 소괄호로 감싼 뒤, 인자를 포함할 소괄호를 다시금 작성해주면 된다.
함수 표현식으로도 즉시 실행 함수를 작성하였지만, 익명 기명 구분 없이 오류가 발생했다.

(let sayHello = function () {
    console.log('Hello, World')
})(); // SyntaxError: /src/index.js: Unexpected reserved word 'let' (2:1)

위와 같은 구문 오류를 반환하는 것을 알 수 있다.

🔖 출처

즉시 실행 함수 : beomy님 tistory : [자바스크립트] 함수(Function), 즉시실행함수(Immediately-invoked function expression)

🧐 함수를 사용하는 이유

이렇게 함수에 대해 어느 정도 알아봤으니 함수를 사용하는 이유에 대해서도 간단하게 알아보자. 해당 내용에 대해서는 재사용성, 가독성, 모듈화라는 세 가지 키워드를 통해 알 수 있다.

재사용성

재사용성은 말그대로 코드의 재사용에 대한 것을 의미한다.
예를 들어, 같은 기능을 하는 구문이 있지만 사용되는 인자가 달라서 인자마다 같은 형식의 구문을 반복한다면 해당 구문은 매우 길어질 것이며, 불필요한 반복 업무 또한 늘어날 것이다.

// 일정 구간에서 2의 배수들을 배열에 담는 구문
let two = []
for (let i = 1; i < 10; i++) {
  two.push(i*2)
} 
console.log(two) // output :  [2, 4, 6 ... , 18]
// 일정 구간에서 3의 배수들을 배열에 담는 구문
let three = []
for (let i = 1; i < 10; i++) {
  two.push(i*3)
} 
console.log(three) // output :  [3, 6, 9 ... , 27]

해당 경우에 함수를 사용한다면 같은 함수에 인자만 다르게 대입하여 코드를 재사용할 수 있고, 간략한 코드와 반복 업무의 감소를 도모할 수 있다.

function pushMultiple(n) {
  let arr = []
  for (let i = 1; i < 10; i++) {
    arr.push(i*n)
  }
  return arr
}
console.log(pushMultiple(2)) // output :  [2, 4, 6 ... , 18]
console.log(pushMultiple(3)) // output :  [3, 6, 9 ... , 27]

가독성

가독성 또한 간단하게 말해 읽기 쉬운 코드를 의미한다. 해당 내용도 재사용성에서 사용한 예시를 활용하여 설명할 수 있다.
먼저 읽기 쉽다는 것은 복잡하지 않고 간략하다는 의미가 될 수 있다.
위 예시를 보면 함수를 사용하지 않은 구문과 함수를 사용한 구문이 단순히 코드 줄 갯수의 부분에서 차이가 있다는 것을 알 수 있다. 코드가 짧다는 것은 간략하게 같은 기능을 실행하고 이해할 수 있다는 장점이 된다.
또한, 읽기 쉽다는 것은 해석에 용이하다는 의미도 포함된다.
앞서 함수를 사용하지 않고 작성한 구문의 경우에는 출력하기 이전에 해당 변수명이나 for 문을 보고 직관적으로 결과 값을 예측하기 어려운 부분이 있다.
그러나 함수를 사용한 구문은 pushMultiple() 이라는 함수명에서 해당 함수가 배수와 push() 메서드를 활용한다는 부분에 대해 어느 정도 유추할 수 있기에 해당 코드를 읽고 해석하는 것에 있어 유용하다.

모듈화

모듈화에 대한 이해를 위해 우선 모듈(module)에 대한 개념을 간단히 이해해보자.
모듈이란 소프트웨어 설계에서 기능 단위로 분해하고 추상화 되어 재사용 및 공유 가능한 수준으로 만들어진 단위를 의미하는데, 그러한 의미에서 모듈화는 원활한 협업을 도와주는 역할을 한다고 보면 된다.
필요 기능을 정의하고 구조적인 부분에서 서로에게 영향을 주지 않도록 코드를 작성하여, 오류가 발생하였을 때 디버깅의 과정에서 확실한 원인 파악과 이후 원활하고 신속한 수정 및 보수의 과정을 할 수 있다는 부분이 모듈화에 대한 내용에 포함된다.

🔖 출처

함수를 사용하는 이유 : 개발 흔적 남기기 : Javascript - 함수(Function)를 사용하는 이유, 문법 module : VincentGeranium Blog : 모듈(Module)와 모듈화란?

🔖 전체적인 참고

함수 : MDN Web Docs : 함수

📓 수정 로그

자바스크립트의 기초적인 내용인 데이터 타입과 변수 선언 및 할당에 대한 내용입니다 :)

💾 Data types

자바스크립트의 데이터 종류는 기본 타입과 참조 타입으로 구분된다.

기본 타입(Primitive type)

: 원시 자료형, 원시 데이터라고도 하며 변경 불가능한 값이다.

• 숫자형(Number) : 1 100
• 문자형(String) : cat dog "1"
• 논리형(Boolean) : true false
• null : null
• undefined : undefined
  

💡 null과 undefined의 차이점

• 이 두 타입 모두는 값이 없음을 의미하지만, null의 경우엔 의도적으로 값이 비어있음을 의미하고, undefined의 경우엔 변수의 선언만 이루어지고, 값을 할당하지 않은 상태이다.

참조 타입(Reference type)

: 값 자체를 복사하는 원시 타입과 달리 주소를 복사한다.

• 배열(Array) : [1, 'cat', true]
• 객체(Object) : { a : 200 }
• 함수(Function) : function sayHello() {}
  

🔗 변수와 선언 및 할당

변수(variable)란 하나의 값(데이터)을 저장하기 위한 메모리 공간을 의미한다.

변수는 선언을 통해 해당 메모리 공간을 만들고, 할당을 통해 데이터를 해당 공간에 저장한다.

변수의 선언

변수의 선언은 다음의 세 가지 방법으로 이루어진다.

• var
• let
• const

변수의 선언은 한 번에 하나의 변수를 선언하는 것과 여러 변수를 선언하는 것 모두 가능하다.

// 하나의 변수 선언
let a;

// 여러 변수 동시에 선언
let a, b, c;

기존에 자바스크립트에서 변수 선언은 var로 가능했으나, ES6 부터 let과 const가 추가되어 사용되고 있다.

💡 왜 let과 const를 사용하는가

• 호이스팅(Hoisting)과 스코프(Scope)에 대한 간단한 이해

호이스팅(Hoisting)

console.log(a); // output: undefined
var a = 'Hello, World';
console.log(a); // output: Hello, World

호이스팅은 함수 안의 선언들을 미리 훑어 코드 최상단에 선언하는 것이다.
위 예시를 보면 var를 사용하여 선언된 변수 a가 선언되기 이전에 console.log를 실행했음에도, 불구하고 에러가 발생하지 않았으며 undefined라는 값을 반환한다. 이는 호이스팅을 통해 우선적으로 변수 선언 부분만 분리하여 최상단으로 끌어올렸기 때문이다.
비교적 과거의 게시물에서는 호이스팅이 var 변수 선언과 함수선언문에서 이루어진다고 기재되어 있는데, 실제로 코드를 작성해보니 let과 const, 함수표현식, 화살표 함수 등 전부 호이스팅이 되었다. 어느 시점 이후부터 수정된 듯 보인다.
그러므로 var, let, const, function, function*, class 키워드를 사용해 선언한 모든 식별자(변수, 함수, 클래스 등)는 호이스팅이 된다고 보는 것이 맞는 것 같다.

스코프(Scope)

let a = 1; // a : 전역 변수
function local() {
  let b = 2; // b : 지역 변수
}

유효범위의 의미를 갖는 스코프는 크게 코드 전 영역에서 참조 가능한 전역 스코프(Global scope)와 함수 코드 블록 내에서만 참조 가능한 지역 스코프(Local scope)로 구분된다.
변수는 선언 위치에 따라 스코프가 정해지기 때문에, 전역에서 선언되면 전역 변수(Global variable) 지역 내 선언 변수는 지역 변수(Local variable)이 된다.
위 경우 변수 a는 전역 변수이기 때문에 코드 전역에서 참조할 수 있지만, 변수 b는 함수 local 안에서만 참조할 수 있다.

• var와 let, const의 차이점
  

  함수 레벨 스코프와 블록 레벨 스코프

  var는 함수 레벨 스코프를 따르는데 이는 변수의 스코프를 구분하는 기준이 함수라는 의미이다.
  

  function func() {
  if (true) {
    var a = 1;
  }
  a = 2;
  console.log(a);
  }
  func(); // output : 2

  임의로 만든 func 함수의 if 문 안에서 변수 a의 선언이 이루어졌지만, var는 함수 레벨 스코프를 따르기 때문에 if 블록 밖에서도 변수 a의 참조(접근)가 가능하다.
  반면에 let과 const는 블록 레벨 스코프로 블록 단위로 스코프를 구분한다.

  function func() {
  if (true) {
    let a = 1;
  }
  a = 2;
  console.log(a);
  }
  func(); // output : ReferenceError : a is not defined 

  그렇기 때문에 let으로 선언된 if 블록 밖의 변수 a는 정의가 되지 않았다는 결과가 나온다.
  
• 정리
  var는 함수 외부라면 전역 변수에 해당하고, 참조의 영역이 비교적 방대하기 때문에 디버깅의 과정에서 원인 파악의 어려움을 주거나, 중복 선언 가능으로 인해 예측하지 못한 값의 반환이 이루어 질 수 있기 때문에 문제가 된다. 그러므로 재선언이 불가능하고 블록 레벨 스코프를 지원하는 let과 const를 사용함이 바람직하다.

  ✔️ 추가적인 내용 : let과 const의 차이점

  구분|let|const

• |-|- 재선언|X|X 재할당|O|X

  🔖 출처

  호이스팅 및 스코프 - MJ Kim's GitHub.io 스코프 - Poiemaweb

또한, 변수 선언 과정 중 변수명을 작성하는 과정에서 식별자 규칙을 준수해야 한다.

💡 식별자(Identifier)

식별자(Identifier)란 이름을 붙일 때 사용하는 단어다.
변수명, 함수명 속성명, 메소드명 등이 이에 해당하기에, 변수 이름 작성에 있어서도 다음의 식별자 작성 규칙에 따라야한다.

📓 식별자 규칙

• 키워드를 사용할 수 없다.
  • 키워드 : 제어문의 시작과 끝, 특정한 조작 목적 등으로 쓰이는 단어
  • ex) break , for , function 등
• 첫 번째 글자는 문자, 언더스코어(_), 달러사인($)으로만 시작 가능하다. = 숫자는 불가능하다.
• 언더스코어(_), 달러사인($)를 제외한 특수문자는 사용 불가능하다.
• 공백은 포함하지 못한다.
  위와 같은 규칙에 부합하지 않으면 에러가 발생한다. 또한, 식별자 관례에 대한 내용으로 camelCase에 대한 내용이 있다.
  camelCase 란 식별자 작성 중 하나인데, 식별자 전체 중 첫 번째 단어를 제외한 모든 단어의 앞자리를 대문자로 변경하는 방식이다.
  예를 들면 myname 이라는 변수명의 경우, myName이라고 작성한다.

변수의 할당

변수의 할당은 할당연산자(=)를 통해 이루어지고, x = y 라면, y의 값을 x에 할당함을 의미한다.

변수의 할당은 선언과 분리할 수 있으며, 한 번에 여러 변수를 선언함과 동시에 할당할 수 있다.

// 선언과 할당 분리
let a; // 선언
a = 1; // 할당
console.log(a); // output : 1

// 한 번에 여러 변수를 선언과 분리하여 할당
let b, c, d;
b = 1, c = 2, d = 3;
console.log(b, c, d); // output : 1 2 3

// 한 번에 여러 변수를 선언과 동시에 할당
let e = 1, f = 2, g = 3;
console.log(b, c, d); // output : 1 2 3

위에서 언급한 바와 같이 let과 const는 재할당의 영역에서 구분되는데 이는 다음과 같다.

let a;
a = 1;
console.log(a); // output : 1
a = 2;
console.log(a); // output : 2

let a = 1;
console.log(a); // output : 1

let의 경우 변수의 선언과 할당을 분리하여 진행할 수 있고, 재할당도 가능하다. 또한, 변수의 선언과 할당을 동시에 진행하는 것도 가능하다.

const b; // SyntaxError : Const declarations require an initialization value

const b = 1;
b = 2 // TypeError: "b" is read-only

하지만, const의 경우 선언과 동시에 값을 할당하지 않으면 에러가 발생하고, 재선언의 경우에도 에러가 발생한다.

이를 구분하여 let과 const를 적절한 용도에 사용하면 된다!

📓 수정 로그