Dev.White | Feed

자바스크립트 Debounce

Sun, 20 Sep 2020 00:00:00 GMT

Debounce?

디바운스란 과도한 연속적인 요청을 방지하기 위해 사용합니다. 연속된 요청 중 마지막 요청만을 실행합니다. (또는 첫번째 요청만)

예를 들어 검색창에 타이핑을 할때마다 추천 검색어를 불러오는 API를 사용한다면, 빠르게 타이핑되는 자음모음마다 API가 호출될 테고 요청으로 받는 응답은 즉각적이지 않을 것인데, 따라서 호출을 통해 쓰이는 응답 결과는 얼마되지 않게 된다. 이렇게 낭비되는 API 호출은 유료 API의 경우 비용적인 문제로 치명적일 수 있다.

만들게 될 결과물은 Unsplash의 무료 이미지 API를 이용할 것입니다.

한번의 검색에 하나의 이미지가 추가됩니다. (아래의 결과는 4번의 검색이 이루어져 4개의 이미지가 존재하는 것)

빠르게 연속적인 검색 시 마지막 하나의 요청만 이루어져 하나의 이미지만 나오도록 하는 것이 목표입니다.

아래는 Debounce가 적용되기 전의 코드로 여기서 수정을 할 것입니다.

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Debounce</title>
    <style>
      .keyword {
        margin-bottom: 0.5em;
      }
      .image {
        height: 4em;
        margin-right: 2px;
      }
    </style>
  </head>
  <body>
    <input class="keyword" type="text" autocomplete="false" />
    <div class="image-wrap"></div>
    <script src="/js-debounce.js"></script>
  </body>
</html>

js-debounce.js

const keywordElement = document.querySelector(".keyword");

const renderImage = (imageURL) => {
  const imgEl = document.createElement("img");
  imgEl.src = imageURL;
  imgEl.className = 'image'

  document.querySelector(".image-wrap").appendChild(imgEl);
};

keywordElement.addEventListener("keyup", (evt) => {
  const { key, target } = evt;
  const { value } = target;

  if (key === "Enter") {
		fetch(`https://source.unsplash.com/featured/?${value}`).then((res) => renderImage(res.url));
  }
});

여기에서 실행하여 검색을 해봅시다. 검색어 입력 후 Enter를 빠르게 5번 입력한다면, 사진이 5개 추가되는 모습을 볼 수 있을겁니다.

이제 debounce를 구현해 봅시다.

// js-debounce.js

...

let timer = null;

keywordElement.addEventListener("keyup", (evt) => {
	...

  if (key === "Enter") {
    if (timer) clearTimeout(timer);

    timer = setTimeout(() => {
      fetch(`https://source.unsplash.com/featured/?${value}`).then((res) => renderImage(res.url));
      timer = null;
    }, 500);
  }
});

setTimeout의 동작을 500ms의 지연을 두고 실행되는 요청이라고 하고 clearTimeout의 동작을 요청 취소라고 이해하면 쉽습니다.

500ms의 지연 중에 새로운 요청이 오면 요청 취소 후 다시 지연을 둔 요청이 이루어지는 것입니다.

예로, 빠르게(< 500ms) 두번 Enter를 눌렀다고하면 아래와 같은 동작이 이루어 질 것입니다.

[첫번째 요청] timer 값이 없습니다. (대기 중인 timeOut 동작 없음)
[첫번째 요청] setTimeout에 해당하는 timer ID가 timer의 값이 되었고 해당 timeOut 동작은 대기 중입니다.
[두번째 요청] timer 값이 있습니다. (대기 중인 timeOut 동작 있음)
[두번째 요청] timer 값에 해당하는 timer ID를 가진 timeOut 동작을 취소합니다.
[두번째 요청] setTimeout에 해당하는 timer ID가 timer의 값이 되었고 해당 timeOut 동작은 대기 중입니다.
[두번째 요청] (500ms 후) 대기 중이던 timeOut 동작이 실행됩니다.

debounce를 구현하기 전처럼 빠르게 5번 검색을 실행하면 이제 마지막 요청 하나만 이루어지게 되는 모습을 볼 수 있습니다.

아래 코드는 debounce를 함수로 만들어 사용하는 모습입니다.

// js-debounce.js

...

const debounced = (func, wait) => {
  let timerID;
  return (...args) => {
    clearTimeout(timerID);
    timerID = setTimeout(() => func.apply(this, args), wait);
  };
};

keywordElement.addEventListener(
  "keyup",
  debounced((evt) => {
    const { key, target } = evt;
    const { value } = target;

    if (key === "Enter") {
      fetch(`https://source.unsplash.com/featured/?${value}`).then((res) => renderImage(res.url));
    }
  }, 500)
);

아래처럼 간단히 lodash의 debounce를 이용할 수도 있습니다.

// js-debounce.js

import _ from "lodash";

...

keywordElement.addEventListener(
  "keyup",
  _.debounce((evt) => {
    const { key, target } = evt;
    const { value } = target;

    if (key === "Enter") {
      fetch(`https://source.unsplash.com/featured/?${value}`).then((res) => renderImage(res.url));
    }
  }, 500)
);

자바스크립트로 컴포넌트 구현하기

Fri, 18 Sep 2020 00:00:00 GMT

자바스크립트만을 사용해 React와 비슷하게 Component를 구현해보는 것이 오늘의 목표입니다.

기본적인 최신 JS와 React에 대한 이해가 있다는 것을 가정으로 기술되었습니다.

구현 할 것은 검색 시 해당 키워드에 해당하는 랜덤한 이미지를 하나 보여주는 간단한 앱입니다.

기본적인 폴더 구조와 베이스 코드

폴더 구조

src/
- components/
- App.js
- style.css
index.html

~/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Search</title>
		<link rel="stylesheet" href="./src/style.css" />
  </head>
  <body>
    <main>
      <header>
        <h1>Image Search</h1>
        <input class="keyword" autocomplete="off" />
      </header>
      <div class="search-results"></div>
			<script type="module" src="./src/App.js"></script>
    </main>
  </body>
</html>

~/src/style.css

main {
  text-align: center;
}

div.search-results {
  margin-top: 1rem;
}

img.result-image {
  width: 80vw;
}

~/src/App.js

const keywordElement = document.querySelector(".keyword");

keywordElement.addEventListener("keyup", (evt) => {
	const { key } = evt;

  if (key === "Enter") {}
});

index.html의 경우, 두가지 부분만 보시면 됩니다. input.keyword와 div.search-results입니다. input.keyword의 동작을 기준으로 App에서 div.search-results가 컴포넌트로 분리될 것입니다.

App.js의 경우, 기본적으로 검색의 동작을 구현하기 위해 input.keyword 엘리먼트에 keyup 이벤트리스너를 추가했고, enter 동작에 unsplash가 제공하는 무료 Simple API를 이용해 키워드에 해당하는 랜덤한 이미지의 주소를 가져오는 것까지 구현되었습니다.

컴포넌트 구현

~/src/component/SearchResults.js

class SearchResult {
  constructor() {}

	async render() {
    const { keyword } = this.state;
    const element = document.querySelector(".search-results");

    if (keyword) {
      const imageURL = (await fetch(`https://source.unsplash.com/featured/?${keyword}`)).url;
      element.innerHTML = `<img class="result-image" src="${imageURL}">`
    } else {
      element.innerHTML = `<p>검색어를 입력하세요</p>`;
    }
  }
}

export default SearchResult;

기본적인 컴포넌트의 코드는 위와 같습니다.

검색어인 keyword 를 전달받았다면 이미지를 렌더하고, 없다면 검색어를 입력하라는 문구를 렌더합니다.

render 함수를 통해 렌더링이 이루어지므로, App.js에서 render 함수를 불러 첫 렌더링을 하면 됩니다.

~/src/App.js

import SearchResults from "./components/SearchResults.js";

const SearchResultInstance = new SearchResults();

const keywordElement = document.querySelector(".keyword");

keywordElement.addEventListener("keyup", (evt) => {
	const { key } = evt;

  if (key === "Enter") {}
});

SearchResultInstance.render();

SearchResults 컴포넌트를 import 하였고,SearchResultInstance로 SearchResult의 instanse를 만들고 마지막에 render 함수를 실행하여 첫 렌더링이 이루어졌습니다.

이제 다음으로 구현할 것은 실제로 App에서 값을 전달 받아, 받을 때마다 새로운 결과를 보여줘야합니다.

기본적으로 React를 생각해보면 컴포넌트는 state를 가지고 있고 state가 변경될 때마다 render가 실행됩니다.

따라서 이 컴포넌트도 state를 가지고, state가 변경 될 때마다 render가 실행되도록 변경해봅시다.

~/src/component/SearchResults.js

class SearchResult {
  constructor() {
    this.state = {
      keyword: "",
    };
  }

  setState(nextState) {
    this.state = nextState;
    this.render();
  }

	...

위와 같이 state를 만들었고, setState가 호출 될 때마다 state를 새로운 값으로 바꾸고 render가 실행됩니다.

~/src/App.js

...

keywordElement.addEventListener("keyup", (evt) => {
  const { value } = evt.target;
  const { key } = evt;

  if (key === "Enter") {
    SearchResultInstance.setState({ keyword: value });
  }
});

...

이제 App.js 에서 SearchResultInstance.setState({ keyword: value }); 를 통해 enter로 검색마다 검색 키워드를 SearchResultInstance의 setState로 전달함으로 SearchResults 컴포넌트가 새로 렌더링 되며 결과가 바뀌게 됩니다.

컴포넌트 개선

컴포넌트 상속

이 프로젝트에서는 하나의 컴포넌트(SearchResults)만 만들어 사용하고 있지만 다수의 컴포넌트를 사용한다면,

컴포넌트의 기능을 하는 컴포넌트 클래스를 하나 만들어 상속받아 사용하는 것으로 공통적으로 사용되는 중복을 개선할 수 있습니다.

~/src/component/Component.js

export default class Component {
  constructor(props = {}) {
    this.state = this.state ?? {};
    this.render = this.render ?? function () {};

    if (props?.element) {
      this.element = props.element;
    }
  }

  setState(nextState) {
    const prevState = this.state;

    this.state = {
      ...prevState,
      ...nextState,
    };

    this.render();
  }
}

이제 element는 props으로 전달받을 것이며, setState는 따로 구현하지 않아도 상속받아 사용이 가능 할 것입니다.

~/src/component/SearchResults.js

import Component from "./Component.js";

class SearchResult extends Component {
  constructor(props) {
    super(props);
    this.state = {
      keyword: "",
    };
  }

  async render() {
    const { element, state } = this;
    const { keyword } = state;

		...

이제 생성자의 super로 부모의 생성자를 호출하고, render() 에서 이제 element 를 this에서 가져온다.

~/src/App.js

...

const SearchResultInstance = new SearchResults({
  element: document.querySelector(".search-results"),
}

...

App.js 에서는 인스턴스 생성시 element를 넘겨준다.

최종 코드

~/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Image Search</title>
    <link rel="stylesheet" href="./src/style.css" />
  </head>
  <body>
    <main>
      <header>
        <h1>Image Search</h1>
        <input class="keyword" autocomplete="off" />
      </header>
      <div class="search-results"></div>
    </main>
    <script type="module" src="./src/App.js"></script>
  </body>
</html>

~/src/style.css

main {
  text-align: center;
}

div.search-results {
  margin-top: 1rem;
}

img.result-image {
  width: 80vw;
}

~/src/App.js

import SearchResults from "./components/SearchResults.js";

const SearchResultInstance = new SearchResults({
  element: document.querySelector(".search-results"),
});

const keywordElement = document.querySelector(".keyword");

keywordElement.addEventListener("keyup", (evt) => {
  const { value } = evt.target;
  const { key } = evt;

  if (key === "Enter") {
    SearchResultInstance.setState({ keyword: value });
  }
});

SearchResultInstance.render();

~/src/components/Component.js

export default class Component {
  constructor(props = {}) {
    this.state = this.state ?? {};
    this.render = this.render ?? function () {};

    if (props?.element) {
      this.element = props.element;
    }
  }

  setState(nextState) {
    const prevState = this.state;

    this.state = {
      ...prevState,
      ...nextState,
    };

    this.render();
  }
}

~/src/components/SearchReults.js

import Component from "./Component.js";

class SearchResult extends Component {
  constructor(props) {
    super(props);
    this.state = {
      keyword: "",
    };
  }

  async render() {
    const { element, state } = this;
    const { keyword } = state;

    if (keyword) {
      const imageURL = (await fetch(`https://source.unsplash.com/featured/?${keyword}`)).url;
      element.innerHTML = `<img class="result-image" src="${imageURL}">`;
    } else {
      element.innerHTML = `<p>검색어를 입력하세요</p>`;
    }
  }
}

export default SearchResult;

한댓: 유튜브 한글 댓글만 보기 (크롬 확장 프로그램)

Fri, 26 Jun 2020 00:00:00 GMT

유튜브 영상에서 한글 댓글만을 볼 수 있는 크롬 확장 프로그램 "한댓"
쉽게 댓글 화면의 우측 상단에 위치한 버튼으로 한글 댓글만 보기를 활성화할 수 있습니다.

유튜브의 한국어 차별, 더이상 못 참겠어서 폭로합니다. by 영국남자 영상을 보고 간단하게 만들어봤습니다.

🇰🇷 "한댓: 유튜브 한글 댓글만 보기" 다운로드 (크롬 웹 스토어 바로가기)

댓글창의 우측 상단에 위치한 "한국어 댓글만" 체크박스를 체크하면 한글 댓글만 보여지게 됩니다.
확장 프로그램 아이콘을 클릭하여 '항상 활성화', '고사양 모드' 설정을 활성/비활성 할 수 있습니다.
- 고사양 모드와 일반 모드의 차이
- 일반 모드: 외국어 댓글이 잠깐 노출된 후 바로 사라집니다.
고사양 모드: 외국어 댓글이 전혀 노출되지 않습니다.
한글 댓글의 기준은 댓글의 시작과 끝의 각 여섯 글자 안에 한글이 있어야 합니다.

ECMAScript ES2016~ES2020 정리

Wed, 22 Jan 2020 00:00:00 GMT

2020년을 맞아 이미 많이 알고 있는 ES2015(ES6) 다음부터인 ES2016부터 ES2020까지 새로 나온 자바스크립트 기능들을 살펴보려고 합니다.

모두 소개하는 건 아니고 비교적 도움이 되는, 대표적인 것들을 추려 소개합니다.
또한 기초적인 사전 지식의 설명은 생략될 수 있습니다.

ES2016

Array.prototype.includes

배열 내장 함수 includes가 추가되었습니다.

['a', 'b', 'c'].includes('a') // true

코드를 보면 쉽게 역할을 알 수 있습니다. 배열에 아이템이 존재하는지 Boolean 값을 반환합니다.

이 함수로 이제 ['a','b','c'].indexOf('a') > -1 대신 좀 더 간결한 코드가 가능합니다.

Exponentiation operator

제곱 연산자. 기존에 제곱은 Math의 pow 함수를 이용했을 것입니다. 이제는 간단하게 ** 연산자로 가능하게 되었습니다.

let num = 2;

Math.pow(num, 10); // 1024
2 ** 10; // 1024

num **= 10;
num; // 1024

ES2017

String padding

문자열에 여백을 주기 위해 등장한 기능입니다. 여백 뿐만 아니라 그 여백에 보충 문자를 추가할 수 있습니다.

여백을 앞에 뒤에 추가할 수 있게 됩니다.

padStart(targetLength [, padString])
padEnd(targetLength [, padString])

간단한 예를 통해 살펴보겠습니다. start와 end의 차이는 앞뒤의 차이밖에 없으니 start만 살펴봅니다.

1월 을 01월 과 같이 길이를 맞춰야 할 경우가 있다 이럴때 사용 할 수 있습니다.

`1월`.padStart(1);        // "1월"
`1월`.padStart(3);        // " 1월"
`1월`.padStart(3, "0");   // "01월"
`1월`.padStart(7, "0AB"); // "0AB0A1월"

1번째 라인처럼 문자열보다 작은 수를 지정하더라도 문자열이 잘리거나 하진 않습니다

2번째 라인은 문자열의 길이보다 하나 긴 3을 넣어 하나의 여백이 추가된 모습입니다.

3번째 라인이 원하는 의도인 코드입니다.

4번째 라인처럼 보충 문자를 배열로 작성하면 배열을 순회 반복하며 여백을 채우며 0, A, B를 채우고 다음으로 0, A까지 채워진 모습을 볼 수 있습니다.

Object.values()

Object에 추가된 values 메소드는 객체의 key:value 에서 value 값들을 배열으로 반환합니다.

const obj1 = {name: "Jhon", age: 24};
Object.values(obj1); // ["Jhon", 24]

Object.entries()

객체 안의 모든 속성을 각각 key, value가 담긴 배열로 하나의 배열에 담습니다. [[key, value], [key, value], [key, value] ...]

const obj1 = {name: "Jhon", age: 24};

Object.keys(obj1);    // ["name", "age"]
Object.values(obj1);  // ["Jhon", 24]

Object.entries(obj1); // [["name", "Jhone"], ["age", 24]]

Object.getOwnPropertyDescriptors()

Object에 기존에 있던 getOwnPropertyDescriptor에 이어 복수형 s가 붙은 getOwnPropertyDescriptors 메소드가 추가되었습니다.

해당 메소드를 이해하기 위해서는 선행 지식으로 getOwnPropertyDescriptor가 무엇인지 알아야하며 속성 설명자의 네가지 속성을 알아야합니다. (링크 참조)

또한 Object.defineProperties() 같은 메소드를 알고 있어야 유용하게 활용할 방법이 생깁니다. 여기서는 자세한 설명없이 해당 메소드에 대해서만 설명합니다.

Object.getOwnPropertyDescriptor(obj, prop)

기존의 getOwnPropertyDescriptor는 인자로 객체와 속성명을 전달해 해당 속성의 속성 설명자를 반환하는 메소드입니다.

이제 여기서 설명하는 getOwnPropertyDescriptors는 속성명을 전달하지 않고 객체만 전달함으로 객체내의 모든 속성에 대한 속성 설명자를 반환합니다.

Object.getOwnPropertyDescriptor(obj)

두개의 예제입니다.

console.log(Object.getOwnPropertyDescriptor(obj1, "name"));
// Object {value: "Jhon", writable: true, enumerable: true, configurable: true}

console.log(Object.getOwnPropertyDescriptors(obj1));
// Object {
//   name: {value: "Jhon", writable: true, enumerable: true, configurable: true}, 
//   age: {value: 24, writable: true, enumerable: true, configurable: true}
// }

Trailing commas

함수의 마지막 매개변수와 인자에도 콤마를 넣을 수 있습니다.

아래와 같이 말이죠. 해당 기능이 왜 추가되었는지는 다양한 의견이 있습니다. 흥미가 있는 분들은 한번 검색해보세요.

const foo = (a, b, c,) => {}

async/await

사실상 ES2017의 핵심이라고 볼 수 있습니다.

새로운 비동기 처리 함수로 기존의 Promise 보다 가독성이 좋은 코드를 작성할 수 있게 되었습니다. 선행적으로 비동기 처리에 대한 지식과 Promise의 이해가 필요합니다.

해당 내용은 여기서 간단히 다루기에는 중요하고 내용이 길어 따로 포스팅을 할 예정입니다.

아래 링크는 async/await를 설명한 캡틴판교님의 포스트입니다.

CAPTAIN PANGYO - 자바스크립트 async와 await

ES2018

Rest/Spread Properties

기존의 배열에서 사용하던 rest/spread를 객체에서도 사용가능하게 되었습니다.

// Rest
const { one, two, ...others } = { one: 1, two: 2, three: 3, four: 4, five: 5 }
console.log(one, two, others); // 1 2 {three: 3, four: 4, five: 5}

// Spread
const obj1 = {one, two, ... others};
console.log(obj); // {one: 1, two: 2, three: 3, four: 4, five: 5}

const obj2 = { one: 100, five: 500 };
const obj3 = { five: 5000 };
const obj = { ...obj1, ...obj2, ...obj3};
console.log(obj); // {one: 100, two: 2, three: 3, four: 4, five: 5000}

마지막 라인의 obj의 출력을 보면 같은 속성 이름에 대해서는 앞의 것을 뒤의 것이 덮어쓴다는 것을 알 수 있다.

Promise.prototype.finally()

then, catch, finally에서 Promise는 기존에 then과 catch만 가능했으나 이제 finally도 추가되었습니다.

Promise.resolve('reslove')
.then((res) => console.log('success'))
.catch((err) => console.log('fail'))
.finally(() => console.log('finally'))

Asynchronous iteration

비동기 이터러블 객체를 순회하는 것이 가능해졌습니다.

이해를 위해서는 Promise, async/await의 이해가 선행됩니다.

for await (const req of requests) {
console.log(req)
}

ES2019

String.trimStart() & trimEnd()

문자열의 앞이나 뒤의 공백을 제거한다.

앞을 제거하는 trimStart와 뒤를 제거하는 trimEnd가 있다.

아래 예제를 보면 쉽게 이해할 수 있다.

const s = "     hello world";
const e = "!     ";

console.log(s + e + ';');
// "     hello world!     ;"

console.log(s.trimStart() + e.trimEnd() + ';');
// "hello world!;"

Optional Catch Binding

catch 매개변수 없이도 catch 블록을 사용할 수 있습니다.

try {
// some code
}
catch (err) {
// error handling code
}

위와 같이 catch(err){} 또는 catch(){} 와 같이 사용하던 것을 아래와 같이 사용할 수 있습니다.

try {
// some code
}
catch {
// error handling code
}

Object.fromEntries()

위에서 설명한 Object.entries() 의 정반대입니다.

객체를 entries로 배열로 만들었다면 fromEntries로 다시 객체로 만들 수 있다는 이야기입니다. entires를 이해했다면 간단하게 아래 예제를 통해 알 수 있습니다.

const obj1 = {name: "Jhon", age: 24};

const entries = Object.entries(obj1); 
console.log(entries); // [["name", "Jhone"], ["age", 24]]

const fromEntries = Object.fromEntries(entries);
console.log(fromEntries); // {name: "Jhon", age: 24}

Array.flat() & flatMap()

flat 메소드는 배열안의 배열을 쉽게 합칠 수 있게 됩니다. 예제를 통해 쉽게 이해할 수 있습니다.

const arr = [1, , 2, [3, 4, [5, 6]]];

console.log(arr.flat());  // [1, 2, 3, 4, [5, 6]]
console.log(arr.flat(1)); // [1, 2, 3, 4, [5, 6]]

console.log(arr.flat(2)); // [1, 2, 3, 4, 5, 6]

flat의 인자로는 배열의 깊이를 넘겨줄 수 있으며, 전달된 인자가 없을 경우 default는 1이다. 또한 빈 배열은 무시된다.

flatMap 메소드는 map()과 flat()이 합쳐진 것으로 볼 수 있다. 우선 map을 통해 새로운 배열을 만들고 flat을 통해 배열이 합쳐진다. (flatMap의 깊이는 1입니다)

const arr = [1,2,3];

const map = arr.map(v => [v]);
const flatMap = arr.flatMap(v=> [v]);

console.log(map);         // [[1], [2], [3]]
console.log(map.flat());  // [1, 2, 3]

console.log(flatMap);     // [1, 2, 3]

ES2020

Dynamic Import

파일 import를 동적으로 할 수 있게 되었습니다.

아래 예제는 if문에 따라 import한 파일의 사용 유무가 달라지는데 조건에 맞지 않더라도 일단은 최상단의 import를 통해 파일을 불러옵니다. 그러나 이제는 두번째 코드 예제와 같이 Dynamic Import로 인해 불필요한 동작을 줄일 수 있게 되었습니다.

import config from './config.js';

if(response) {
age = config.age;
}

if(response) {
import('./config.js')
.then(config => {
  age = config.age;
  console.log(config);
}
}

참고로 Dynamic import 예제인 두번째 코드에서 console.log의 출력 결과는 {age: 24, skills: ["react", "webpack"], default: "Jhon"} 입니다. 그렇다면 config 파일의 내용은 아래와 같습니다.

export const age = 24;

export const skills = ["react", "webpack"];

export default "Jhon";

default로 export를 한 것은 default라는 속성 이름을 가지는 것을 알아두세요.

BigInt

BigInt는 2^53 보다 큰 정수를 취급하기 위해 등장했습니다.

숫자 뒤에 n이 붙는 특징을 가지고 있습니다. 예로 10n 은 숫자 10을 뜻한다는 의미입니다.

자세한 예와 설명은 아래 예제로 설명하겠습니다.

const int1 = Number.MAX_SAFE_INTEGER + 1; 
// 9007199254740992

const int2 = Number.MAX_SAFE_INTEGER + 2; 
// 9007199254740992  <= ~993이 아니다.

const bigInt2 = BigInt(Number.MAX_SAFE_INTEGER) + 2n; 
// 9007199254740993n <= ~993이 되었다.

console.log(typeof int1, typeof int2, typeof bigInt2); 
// number number bigint

console.log(typeof 9007199254740993n); // bigint
console.log(9007199254740993n === bigInt2); // true
// 일반적인 숫자 뒤에 n을 붙이는 것으로 bitint 타입을 가진다는 것을 알 수 있습니다.

console.log(BigInt(10), BigInt(10n));
// 10n 10n <= BitInt의 인자로는 n의 여부가 중요하지 않다.

console.log(10 === BigInt(10)); // false
console.log(10 == BigInt(10)); // true

// console.log(9007199254740993n + 1);
// 위 코드는 에러가 발생한다. bigint를 연산할때는 number 타입과 섞어쓰는 것이 안된다.

Promise.allSettled

Promise.all()은 모든 작업이 성공(reslove)해야 실행되는 특징과 달리 Promise.allSettled()은 도중에 실패(reject)되더라도 모든 실행을 할 수 있습니다.

아래 예제를 통해 코드와 실행 결과를 살펴봅시다.

const p1 = new Promise((resolve, reject) => resolve("p1, resolved"));
const p2 = new Promise((resolve, reject) => resolve("p2, resolved"));
const p3 = new Promise((resolve, reject) => reject("p3, rejected"));

Promise.all([p1, p2, p3])
.then(response => console.log(response))
.catch(err => {
console.log(err);
});
/*
console.log(response)
{status: "fulfilled", value: "p1, resolved"}
{status: "fulfilled", value: "p2, resolved"}
{status: "rejected", reason: "p3, rejected"}
*/

Promise.allSettled([p1, p2, p3])
.then(response => console.log(response))
.catch(err => {
console.log(err);
});
/*
console.log(err);
p3, rejected
*/

Nullish Coalescing Operator

a ?? b 로 나타내는 연산자입니다. null이나 undefined일 때만 b를 반환합니다.

0은 false를 의미하기도 합니다. 따라서 0 || 'A' 는 A 가 될겁니다. 하지만 0이 의미있는 값이면 0 또한 사용해야 할 것입니다. 또한 삼항 연산자를 단축시켜 사용할 수 있는 장점도 있습니다.

예제를 통해 살펴봅시다.

0 || 'A'    // A
0 ?? 'A'    // 0

0 ? 0 : 'A' // A
0 ?? 'A'    // 0

Optional Chaining

foo.a.b 에 접근한다고 했을 때, a가 없다면 오류가 발생하게 됩니다.

따라서 오류를 방지하기 위해 if(foo.a && foo.a.b) 와 같이 사용하곤 합니다.

하지만 Optional Chaining을 이용하면 오류가 발생하지 않고 undefined를 반환받습니다.

Optional Chaining은 foo.a?.b 와 같이 표현합니다.

const foo = {
a: {
b: true
}
};

console.log(foo.a.b); // true
console.log(foo.b?.b); // undefined

console.log(foo.b.aa); // TypeError: Cannot read property 'aa' of undefined

React Hooks: useState, useEffect 알아보기

Wed, 08 Jan 2020 00:00:00 GMT

뒤늦은 Hooks 포스팅입니다. Hooks 기본을 정리해보고, 사용해오면서 알게 된 점도 정리해봅니다.
간단히 useState에 대해 설명하고, useEffect에 대해서는 조금 더 자세하게 알아봅니다.

Hooks는 React 16.8부터 등장한 새로운 기능입니다.
Class Component가 아니더라도 Functional Component에서 state 및 기타 기능을 사용할 수 있게 합니다.

아래는 리액트 공식 문서의 Hooks 설명 일부입니다.

Hook는 알고 있는 React 컨셉을 대체하지 않습니다. 대신에, Hook는 props, state, context, refs, 그리고 lifecycle와 같은 React 개념에 좀 더 직관적인 API를 제공합니다. 또한 Hook는 이 개념들을 엮기 위해 새로운 강력한 방법을 제공합니다.

일반적으로 Functional Component를 사용하게 되면 state를 사용할 수 없고 React LifeCycle을 사용할 수 없다는 한계에 부딪치게 되는데 Hooks의 등장으로 새로운 방법이 제공됩니다. (Effect Hooks 부분에서 자세히 알아봅니다)

useState()

기존의 Class Component에서 사용하던 것을 보면 아래와 같습니다.

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

위와 같이 state를 선언하고 this.setState({ count: 1 })와 같이 setState 함수를 통해 state 값을 변경할 것입니다.

기존의 state를 다루는 방법은 useState Hooks를 이용하게 됩니다.
아래의 코드는 useState를 사용한 예제입니다.

import React, { useState } from 'react';

const Example = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};

useState는 아래와 같이 사용합니다.

const [count, setCount] = useState(0);

useState()가 count, setCount로 구조 분해 할당되어있습니다.
useState는 state 변수와 해당 변수를 변경할 수 있는 함수(즉, setState 함수)를 반환합니다.
따라서 아래와 같은 방법으로도 사용할 수 있습니다. 이렇게 사용할 일은 없겠지만 말입니다.

const countVariables = useState(0);

countVariables[1](20); // == setCount
console.log(countVariables[0]); // 20, == count

Class Component 방식에서 사용하던 setState를 통해서는 기존의 state와 새로운 state를 합치는 방법으로 state 값이 변경되었으나, useState를 사용한 setState인 예제에서 setCount를 통해서는 state를 합치는 방식이 아닌 count state만을 변경하게 됩니다.

요약

선언

import React, { useState } from 'react';

const Example = () => {
  const [count, setCount] = useState(0);
  //...

갱신

<button onClick={() => setCount(count + 1)}>
// or
<button onClick={() => setCount(prevCount => prevCount + 1)}>
  // 기존의 setState 함수와 유사하게 prevState를 사용할 수 있습니다.

state 사용, 가져오기

<p>You clicked {count} times</p>

useEffect()

useState는 간단하고 사용하기 쉽습니다.
useEffect는 간단한 사용은 쉬울지 모르나, 제대로 동작을 이해하려면 깊게 공부가 필요해보입니다. 따라서 여기서는 사용함에 있어 햇갈리지 않고 오류를 범하지 않으면서 기본적인 동작을 이해하는 수준에서 기술하겠습니다. 기존 Class Component의 Life Cycle을 이해하고 있다는 전제하에 진행합니다.

아래 코드를 보겠습니다.

import React, { useEffect, useState } from 'react';

export const FuncComp = () => {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  useEffect(() => {
    console.log('useEffect');
  });

  return (
    <div>
      <button
        onClick={() => {
          setCount1(count1 + 1);
        }}
      >
        FuncComp>count1 + (current: {count1})
      </button>

      <button
        onClick={() => {
          setCount2(count2 + 1);
        }}
      >
        FuncComp>count2 + (current: {count2})
      </button>
    </div>
  );
};

해당 코드는 count1, count2의 state를 가지고 있습니다.
그리고 각각의 state를 변경(증가)하는 버튼이 위치합니다.

useEffect가 위치한 곳을 봐주세요.
여기서 useEffect의 안에 함수가 실행되는 시점.
즉, console.log가 작동하는 시점을 기존 Class Component의 LifeCycle의 관점에서 보면 아래와 같습니다.

componentDidMount
componentDidUpdate

마운트와 업데이트 시점에서 “useEffect” 문구가 출력되게 됩니다.
위의 예에서는 첫 로드시, count1 count2가 업데이트 될 때 출력됩니다.

간단히 보자면 위 useEffect안의 함수는 “매 렌더링마다 실행된다”라고 생각하면 쉽습니다. props, state가 변경될때마다 렌더링이 실행될테니말입니다.

의존성 추가

이제 아래 코드를 살펴보겠습니다.

useEffect(() => {
  console.log('useEffect');
}, [count1]);

useEffect(fn)형태에서 useEffect(fn, [])가 되어 인자로 배열이 추가되었습니다.

여기서 배열은 의존성을 담은 배열로,
위와 같이 count1을 담는다면 이제 마운트시에 호출되고, 그 후로는 count1이 변경될때만 호출되어 “useEffect”문구가 출력될 것입니다.

위의 예제에서 count1을 증가시키는 버튼을 누르면 “useEffect”문구가 출력될것이고, count2에서는 출력되지 않습니다.

여기서 의존성 배열을 비운다면 어떻게 될까요

useEffect(() => {
  console.log('useEffect');
}, []);

위의 코드는 간단하게 말하면 componentDidMount의 역활을 대체할 수 있습니다.
의존성 배열 자체를 인자로 넘기지 않으면 모든 state(+props)가 변경될 때 호출되게 되지만 넘긴다면 해당 의존성이 변경될때 호출되게 되고 비어있다면 마운트시에만 호출되게 되는 것입니다.
따라서 componentDidMount를 구현하고 싶다면 해당 코드와 같이 작성하면 됩니다.

CleanUp

아래 코드를 살펴봅시다. 의존성으로 count1을 가진 이펙트입니다.

useEffect(() => {
  console.log('count1', count);

  return () => {
    console.log('count1 CleanUp', count);
  };
}, [count]);

위의 코드를 보면 return 라인이 추가되어 함수를 반환합니다.

마운트 시, 그리고 count1에 변동이 있을 때 “count1” 문구가 출력될 것을 예상할 수 있습니다. “count1 CleanUp”은 언제 출력될까요?

일단 마운트가 되면 “count1”이 출력됩니다. 그 후 count1을 증가시키게되면 아래와 같은 과정을 거치게됩니다.
증가시키기 전인 count 값은 0입니다.
(이해를 위한 과정 설명으로 실제 작동은 이와 다를 수 있습니다)

count = 0인 해당 이펙트(위의 코드) 클린업 과정 실행
count = 1에 해당하는 렌더링
count = 1에 해당하는 이펙트 실행 이를 통해 업데이트 이전에 클린업이 실행된다는 사실을 알고있으면 됩니다.

또한 클린업은 언마운트시에도 작동하게 됩니다. 따라서 만약 해당 컴포넌트가 언마운트되면 위 코드의 클린업도 실행되게 됩니다.

아래 코드를 살펴보겠습니다.

useEffect(() => {
  console.log('mount');

  return () => {
    console.log('unmount');
  };
}, []);

useEffect(() => {
  console.log('update count1');

  return () => {
    console.log('update count1 or unmount');
  };
}, [count]);

코드의 첫번째 이펙트는 componentDidMount의 기능을 한다고 설명했던 코드입니다.
두번째 이펙트는 바로 위에서 살펴본 코드와 같습니다.

아래의 동작을 하면 어떤 순서로 출력문이 나올지 보겠습니다.

페이지 로드 (컴포넌트 마운트)
count1 증가 버튼 클릭
해당 컴포넌트 사라지게함 (언마운트)

< "mount"
< "update count1"
< "update count1 or unmount"
< "update count1"
< "update count1 or unmount"
< "unmount"

1~2라인은 마운트에 해당하는 출력입니다.
3~4라인은 count1값을 업데이트하면서 클린업->이펙트의 과정을 거친 출력입니다.
5~6라인은 컴포넌트가 언마운트되면서 이펙트들의 클린업이 실행된 출력입니다.

6라인을 보아 해당 이펙트(빈 의존성 배열)의 클린업은 componentWillUnmount의 기능을 하는 것을 알 수 있습니다.

클린업은 DOM에 추가한 이벤트 리스너를 컴포넌트가 언마운트될때 제거할 경우 등의 경우에서 사용되게 될겁니다.

요약

Mount (componentDidMount)

useEffect(() => console.log('mount'), []);

Unmount (componentWillUnmount)

useEffect(() => () => console.log('unmount'), []);

Update Any

useEffect(() => console.log('will update any'));

Update Any or Unmount

useEffect(() => () => console.log('will update any or unmount'));

Update Count

useEffect(() => console.log('will update count'), [count]);

Update Count or Unmount

useEffect(() => () => console.log('will update count or unmount'), [count]);

References

Borderless 테마로 Gatsby 블로그 만들기

Mon, 30 Dec 2019 06:02:00 GMT

지금 이 글을 보고 있는 블로그는 Borderless 테마를 사용하고 있는 블로그입니다.

Gatsby를 이용해 제작되었으며 Gatsby에 대한 간략한 설명은 이전 글(Gatsby로 블로그 만들기)에서 확인 할 수 있습니다.

Borderless 블로그 - 소개에서 borderless 테마의 기능과 특징을 확인하세요.

이 블로그와 같은 블로그를 만들고 싶다면 이 글을 간략하게 참고하시고,
Documents에서 자세한 방법을 참고하세요.

* 아래 설명과 문서는 Github Pages에 배포되는 것을 기준으로 설명합니다.
* 이 글에서는 매우 간략하게 방법을 기술하고 있습니다. 자세한 것은 문서에서 확인하세요

Install

해당 블로그로 시작하기 위한 방법은 두가지가 있습니다.

테마 Repository Fork 후 사용
테마 Repository Clone 후 사용

1. Fork로 시작하기

해당 Repository를 Fork 한 후,
Repository의 이름을 "username.github.io"로 변경합니다.
Setting > Branches - Default branch에서 기본 Branch를 변경합니다. develop를 선택하고 Update 버튼을 눌러 진행하세요.
이제 본인의 Repository를 Clone 합니다.
$ npm i 명령어로 패키지 설치
$ npm start 명령어로 개발 서버 시작
"localhost:8000"에서 확인할 수 있습니다.

2. Clone으로 시작하기

$ git clone -b develop https://github.com/junhobaik/junhobaik.github.io.git [SITE_DIRECTORY]
$ npm install

위의 과정을 통해 develop 브랜치를 기본으로 해당 저장소를 클론하고 필요한 패키지를 설치합니다.

$ npm start

개발 서버를 실행하며 localhost:8000에서 확인할 수 있습니다.

Basic Settings

./config.js 파일을 개인에 맞춰 수정합니다.
문자열은 ''로 비워두어 해당 기능을 비활성화 할 수 있습니다. (Site MetaData는 필수로 작성)

아래는 예제입니다.

module.exports = {
  /** Site MetaData (Required all)*/
  title: `Dev.White`,
  description: `Junho Baik's Development Blog`,
  author: `Junho Baik`,
  siteUrl: 'https://junhobaik.github.io',

  /** Header */
  profileImageFileName: 'profile.png',

  /** Home > Bio information*/
  comment: 'Jr. Web Front-end Developer. / javascript, react ...',
  name: 'Junho Baik',
  company: '',
  location: 'Korea',
  email: 'junhobaik@gmail.com',
  website: 'https://junhobaik.github.io',
  linkedin: '',
  facebook: '',
  instagram: 'https://www.instagram.com/junhobaik',
  github: 'https://github.com/junhobaik',

  /** Post */
  enablePostOfContents: true,
  disqusShortname: 'junhobaik',

  /** Optional */
  googleAnalytics: 'UA-123123123-0',
  googleAdsenseClient: 'ca-pub-5001380215831339',
  googleAdsenseSlot: '5214956675',
};

Writing Posts

./posts에 마크다운 파일을 위치시켜 게시물을 만들 수 있습니다.

./drafts에 마크다운 파일을 위치시켜 임시 게시물을 만들 수 있습니다.
(개발 환경에서만 표시, 배포시 표시되지 않는 게시물)

Markdown YAML Front matter

마크다운 상단에 아래와 같은 형식으로 게시물 정보를 입력합니다. 여기는 제목과 날짜가 필수로 들어가며 추가적으로 태그와 키워드를 넣을 수 있습니다.
그 후 하단에는 게시물의 내용을 입력합니다. 자세한 작성법은 문서의 Markdown YAML Front matter란을 확인하세요.

---
title: title here...
date: 2018-01-01
tags:
  - javascript
  - ES6
keywords:
  - keyword1
  - keyword2
---

... Content here ...

Deploy

$ npm run deploy

위의 명령어로 배포가 시작됩니다. master 브랜치로 commit이 자동으로 이루어지며, 반영되기까지는 수십초 정도, 때로는 최대 수분의 시간이 소요됩니다.

이제 본인의 주소로 들어가 확인할 수 있습니다.

더 자세한 Borderless 테마 사용법은 Documents를 참고하세요.

Borderless 블로그 - 소개

Mon, 30 Dec 2019 00:00:01 GMT

정적 사이트 제작 프레임워크 Gatsby를 이용해 만든 블로그,
“Borderless” 테마입니다.

심플한 디자인
마크다운 지원
게시물 태그 기능
게시물 검색 기능
시리즈 게시물 기능
Google Analytics
Google Adsense
Disqus 댓글 기능
검색 엔진 최적화(SEO)

화면 설명

Home 화면

게시물 목록을 볼 수 있는 홈 화면으로,
타이틀 이미지가 크게 표시되며 프로필 정보가 함께 표시됩니다.
게시물 목록에는 게시물의 제목, 날짜, 태그, 요약이 표시됩니다.
프로필 정보에는 소개 문구, 이름, 회사, 위치, 메일, 웹사이트, RSS, 소셜(페이스북, 링크드인, 인스타그램, 깃허브)를 표시할 수 있습니다.

스크롤 다운시 헤더와 프로필 정보가 숨겨져 게시물 목록에 집중할 수 있습니다.

Post 화면

게시물 화면입니다.
헤더는 스크롤 다운시 감춰지며 게시물의 내용에 집중할 수 있습니다.
화면의 크기가 충분히 넓을 경우 목차가 우측에 표시되며, 그렇지 않을 경우 게시물의 상단에 목차 버튼으로 목차를 볼 수 있습니다.
목차는 클릭하여 해당 위치로 이동할 수 있고, 스크롤 위치에 따라 보고있는 목차 부분이 강조되어 보고있는 위치를 알 수 있습니다.

게시물에 하단에는 게시물을 소셜 공유 할 수 있는 버튼들이 위치합니다.
그 아래로는 광고와 댓글이 위치합니다.

시리즈 게시물

만약 시리즈 게시물이라면 위와 같이 게시물 상단에 시리즈 목록이 표시됩니다.

태그 화면

태그 화면에서는 모든 태그가 표시되며,
게시물 수가 많은 태그는 텍스트 크기가 크게 표시됩니다.
현재 보고있는 태그는 텍스트가 진하게 표시됩니다.
아래는 태그에 해당하는 게시물 목록이 표시됩니다.

검색 화면

제목, 제목+내용으로 검색이 가능합니다.
검색 결과에 따른 게시물 목록이 아래 표시됩니다.

그 외 기능

간단히 설정 파일의 내용 몇가지만 수정하면 자신의 블로그로 활용할 수 있습니다.
Google Analytics의 TrackingID를 설정에서 입력하여 쉽게 등록 및 관리할 수 있습니다.
자신의 Google Adsense 정보를 설정에서 입력해서 쉽게 구글 애드센스를 활용할 수 있습니다.
자신의 Disqus 사이트 생성 후 shortname을 설정에서 입력하면 쉽게 댓글 기능을 활성화 할 수 있습니다.
검색 엔진 최적화로 기본 설정만 입력하면 따로 부가적인 작업 없이 구글 검색 결과에 문제 없이 노출될 수 있습니다.
웹 표준 준수로 Safari 브라우저 등 읽기 모드(Reader Mode)를 지원합니다.
마크다운내에서 이모지, 수학 표기법(ktex)를 지원합니다.
임시 게시물(draft)을 작성할 수 있습니다. 개발 환경에서는 표시되며 배포시 표시되지 않습니다.

Borderless 블로그로 자신의 블로그 시작하기

지금 보고있는 이 블로그를 자신의 블로그로 커스터마이징하여 사용할 수 있습니다.

아래 링크를 통해 Get Started, Document를 확인 할 수 있습니다.

Documents

Borderless 블로그 - 개발기

Mon, 30 Dec 2019 00:00:00 GMT

기존 블로그에서 새로 블로그를 구현했다.

테마 이름은 “Borderless”이다.
말그대로 블로그 디자인 요소에 선이 없어서 이렇게 지었다.

이번에도 동일하게 Gatsby를 이용하여 제작했고 태그와 검색 기능이 있는 것은 이전 블로그와 비슷한 구조이다.

그런데 이전 블로그는 GraphQL도 완전 백지 상태에서 껴맞추기식으로 구현해서 지저분한 곳이 있었고,
디자인쪽으로도 깔끔하고자했지만 뭔가 조잡한듯한 느낌을 지울 수 없었다.

블로그를 운영하면서 느끼게 된 점을 바탕으로 다시 디자인하고 생각하여 만들게 되었다.

홈화면을 화려하고 예쁘게 만들고 검색이나 태그 기능을 예쁘고 다양한 기능으로 무장하고... 하는 것도 좋겠지만,

블로그 유입은 9할 이상이 검색을 통해서 이루어진다. 따라서 방문자는 게시물을 보는 것이 제일 중요하고 그 이후에 블로그를 둘러보는 행동을 하는 사람은 거의 없다고 보면 된다.

그에 맞춰서 최대한 게시물에 집중 할 수 있는 디자인을 하고, 블로그를 시작한 의도에 맞춰 내가 필요하고 사용하기 편하게만 만들면 되는 것이다.

그래서 딱 몇가지만 고려했다.

내 정보를 보여줄 수 있었으면,
뭔가를 살펴볼땐 그것에만 집중 할 수 있어야한다.
불필요한 스타일, 애니메이션, 기능은 제거하자.

그래서 구현한 결과는 이렇게 된다.

내 정보를 보여줄 수 있었으면,
좌측에 개인 프로필과 메뉴가 위치한 블로그를 자주 볼 수 있다. 그러한 UI를 어느정도 원했다 프로필이 있었으면 했다. 하지만 좌측에 항상 뭐가 있다면 내용에 집중하는데 방해가 된다고 생각했고 반응형 디자인에도 좋지 않다고 생각해서 이러한 UI 보다는 다른 UI를 생각하게 되었다.
상단에 헤더가 위치하고, 블로그 로고 이미지와 블로그 제목이 좌측으로, 우측에는 메뉴(태그, 검색)가 위치한다.
게시물이나, 태그, 검색등의 작업을 할때는 로고와 텍스트가 작은 크기로 위치하다가 홈화면(게시물 목록 화면)으로 위치하면 로고 이미지의 크기가 커진다. 그리고 로고 이미지와 제목 아래 프로필 정보들이 나열된다. 이렇게 구현하면 마치 좌측에 프로필이 위치한 UI와 비슷하게 보인다. 하지만 홈화면에서 게시물 목록을 훑어보기 위해 스크롤하면 헤더와 프로필 정보가 감춰지면서 게시물 목록에만 집중 할 수 있게 된다.

뭔가를 살펴볼땐 그것에만 집중 할 수 있어야한다.
기본적으로 헤더를 항상 표시가 아닌 스크롤에 따라 숨기고 나타나도록 구현했다.
그래서 게시물을 읽을땐 온전히 게시물에만 집중 할 수 있고, 그 외로 표시되는 것은 TableOfContents 즉, 목차 뿐이다. 이것도 투명도를 낮춰 게시물을 읽는데 집중할 수 있도록 했다.

홈화면에서는 앞서 프로필을 설명하는 부분에서 설명한 것과 같이 스크롤 시에는 헤더와 프로필 정보가 모두 숨겨지며 보이는 것은 게시물 목록 뿐이다.

불필요한 스타일, 애니메이션, 기능은 제거하자.
기존에는 선, 배경색으로 개체들을 꾸미고 그림자를 입히고, 거기에 마우스 오버시 살짝 앞으로 나오는 듯한 애니메이션을 넣는 등 예뻐보이기 위해 이것저것 했는데 이번에는 정말 심플 그 자체가 되고자 했다.
그래서 생각한게 선과 색을 넣지 말자는 것이었다.
스타일에 선, 색, 그림자가 없다. (마크다운 게시물 안에는 당연하게 있을 수 있다..)
따라서 입체감도 없다. 머터리얼 디자인이 유행하면서 입체감에 많은 신경을 썼었는데 이번에는 아예 반대로 입체감이 없이 해보기로 했다. 어짜피 내용에만 집중하도록 디자인하다보니 입체감이 중요하지 않았다. 불필요한 요소는 보이지 않을테니까.
그리고 애니메이션은 최소화했다. 헤더와 프로필 부분 말고는 큰 애니메이션이 없다.
이 블로그 테마 이름을 Borderless라고 했는데, 바로 선이 없다는 이유에서다.

이러한 것 이외에도 세세한 구석에 신경을 많이 썼다.
UX를 고려해서 어느 곳에서도 부드럽게 전환이 가능하도록 신경썼고,
블로그가 기본적으로 해야하는 기능, 그리고 추가적으로 있으면 좋은 기능들도 당연히 구현했다.
대표적으로 Google Analytics, Disqus 가 있다. 애널리틱스는 웹 운영에 필수고, 댓글 또한 블로그에 없어서는 안될 기능이다.
구현 중에 본인의 Disqus를 새로 설정하면서 기존 댓글이 지워진 아쉬움이 있긴하다.

글을 쓰는 현재 아직 몇가지 해야할 것이 남았다.
몇가지 수정할 게 남았고, 그 다음으로 해야할 것이 다른 사람들이 이용할 수 있게 만들어두는 것이다. 기본적인 정보만 수정하면 자신의 블로그로 만들어 사용할 수 있게 처음부터 고려해서 만들어졌다. 이전 블로그도 이와 비슷하게 배포했는데 메일이나 댓글로 질문이 몇번와서 이번에는 문서를 조금 더 정성들여 적어봐야겠다.

다음으로는 간단하게 블로그를 소개하고, 그 다음에는 이 블로그를 자신의 블로그로 만드는 방법을 자세하게 적어볼 수 있도록 하려 한다.

현재까지 개발한 결과물에 대한 이야기 2019

Sun, 29 Dec 2019 00:00:00 GMT

이 글은 개발해서 운영하고 있는 서비스에 대한 잡담과 같은 후기이다.

현재까지 개발해서 지속적으로 운영하고 있는 결과물은 5개 정도이다.

Blog
Netflix AutoSkip
Tablo
Tablo (version 2)
WhatSubs

Blog

최근 새로 새단장을 했다. 지금 보고 있는 이 블로그이다. 새로 만들게 된 이유는 심플함을 항상 추구했지만 뭔가 항상 맘에 들지 않았고 그래서 새로 처음부터 구현하면서 몇몇 코드만 가져다가 만들게 되었다. 그러는 김에 있었으면 하는 기능도 몇가지 추가할 겸 말이다.
이번에 블로그는 완전 깔끔하게 게시물에 집중할 수 있는 디자인으로 만들었다. 블로그 테마(?)의 이름은 "Borderless"로 지었다. 디자인은 말 그대로 선이 없다. 스타일에 border가 존재하지 않는다. 선(border)뿐만 아니라 배경색, 그림자를 넣지 않았다. 그러면서도 세련되게 만들려고 노력을 많이 했다. 지금은 개인적으로 상당히 만족스럽게 만들어진것 같다. 아직은 구현이 끝나지 않았다. 디테일한 몇군데 수정만 거치고 나면 완성될 것 같다. 전에 쓰던 블로그와 비슷하게 다른 분들도 사용이 가능하게 배포할 예정이다.

게시물 부분에서는 업데이트를 자주 못했지만 개인적으로 저장하기 위해 시작했고 블로그를 개발하는 것도 스터디에 한부분이었던 블로그인데 조회수를 보면 조금 더 신경써야되나 싶다.

Google Analytics를 통해 살펴보면 올해 총 페이지뷰가 대략 11만이 넘었다.
애널리틱스를 자세히 살펴보다보면 재밌는 부분이 많다. 다른 사이트에서 내 블로그를 링크를 통해 들어오면 그 링크된 사이트가 어디인지 알 수 있는데 거길 들어가서 살펴보면 내 글도 누군가에게 도움이 되고 있구나라는 생각이 든다. 생활코딩의 강의 댓글에 내 블로그 글을 보면 도움이 될거라는 댓글을 보고 굉장히 뿌듯했던 기억이 난다.

그리고 몇달전인가 도입한 에드센스를 살펴보면 조회된 애드센스 광고 단위수가 2만이 넘었다.
이것도 수익보다는 에드센스 도입을 한번 해보자라고 스터디 차원에서 한 것이었다. 지금까지 총 수익은 7달러이다. 광고 차단 프로그램 탓도 있을 수 있겠다. 광고 차단 프로그램을 막을 수 있겠지만 수익을 생각하고 구현했던 것도 아니고 또한 광고 노출이 아닌 직접 클릭을 해야 수익이 나오는 것 같다.

그리고 블로그를 남들도 쓸 수 있도록 구현했는데 (이것도 스터디 차원에서 해본..) fork해서 블로그로 잘 운영하고 있는 분도 계시는 걸 보니 또 뿌듯했다. 업데이트를 제대로 한번 해야겠다는 생각도 든다. 지금은 게시물만 종종 올리고 블로그 자체는 만족하고 그냥 쓰고 있으니 말이다.

Netflix AutoSkip

간단하고 간략한 코드로 구현된 크롬 확장프로그램이다.

넷플릭스를 크롬 브라우저로 보는데 키보드와 마우스에서 멀리 떨어져서 볼 경우 인트로 스킵이나 다음 동영상을 넘기는 버튼을 누르러 다시 컴퓨터나 TV 앞으로 가는 것이 귀찮아 만들었는데 생각보다 많은 사람들이 쓰고 있다. 현재 3000명 정도가 전세계에서 쓰고 있고 이것도 애널리틱스에서 실시간 접속자로 전세계에서 접속하고 있는 위치 모습을 보면 재미있다.

만드는 것들이 모두 내가 필요해서 만들기 시작한 것들이 대부분인데 이 앱은 쓰는 사람들이 좀 있고 버그가 있었을 적엔 메일로 피드백이 몇번 오기도 했다. 그런데 이 웹앱을 사겠다는 메일이 몇군데서, 그것도 다른 나라에서 왔었는데 이게 뭔가 싶다. 엄청 많은 사람이 쓰고 있는 것도 아니고 간단한 코드로 구현되었고 코드도 다 공개되어있는데...

DOM 트리가 변경되는 것을 기준으로 기능이 동작하는데 이번에 넷플릭스 UI가 조금 변경되면서 최근에 새로 업데이트를 했다.

얼마 전 수정하면서 기능이 유사한 다른 앱들을 살펴보니 아직 대응들을 안한 것인지 인트로 스킵과 다음 에피소드 재생 대기를 스킵하는 것이 모두 잘되는 것은 내 앱 뿐이었다.

Tablo

trello와 비슷한 UI로 task가 아닌 link를 저장해 즐겨찾기와 같이 이용하는 크롬 확장프로그램으로 크롬의 새탭을 열면 열리는 웹앱이다. 크롬 시작화면 웹앱이라고도 할 수 있다.

현재 열려있는 탭 목록을 표시하고 거기서 드래그해서 자신만의 즐겨찾기 목록을 만드는게 주요 컨셉이었고 확장 프로그램 아이콘을 통해 웹 서핑 중 즐겨찾기 목록에 추가하는 것도 가능하다.

개발을 하고 따로 계속해서 발전시키지는 않았다. UI가 가로 스크롤이 필요한 UI이다보니 가로 스크롤에 대한 고민을 계속하긴 했었고 그에 대해 몇가지 변경이 이뤄지긴 했다.

개인적으로 필요해서 만들었고 잘 쓰고 있긴 했지만 계속해서 발전시키지 않은 이유는 새로운 기능을 포함해 새롭게 다시 만들 생각을 하고 있었기 때문이었고 그로 인해 Tablo version2를 만들게 되었다.

Tablo (version 2)

이번에는 세로 형식의 trello 형식이 아닌 가로 형식으로 바꾸었고, 기존의 현재 열린 탭들 목록에서 자신의 즐겨찾기 목록으로 드래그하는 것, 확장 프로그램 아이콘을 통해 웹 서핑중 해당 사이트를 자신의 즐겨찾기 목록에 추가하는 것은 그대로 유지되었다.

추가된 주요 기능은 간단하게 말하면 rss 구독 기능이다. rss 구독 주소를 등록할 수 있고 구독한 사이트들의 게시물이 화면에 보이게 된다.

내가 브라우저를 켰을때 어디로 이동할 지 즐겨찾기와 같은 목록이 보였으면 좋겠고,
내가 관심있는 기술 블로그들의 최신 게시물을 쉽게 한곳에서 확인하고 싶었고,
웹 서핑이나 서치중에 나중에 보기위해 저장할 곳이 필요했다.

위와 같은 이유를 모두 만족하는 내게 필요한 웹앱을 만들었다. 원하는 기능은 거의 구현했으며 크롬 웹스토어에 출시했다 이제 디테일한 수정과 개선을 계속해나가면 된다.

WhatSubs

최근에 만들었고 구글 플레이스토어, 앱스토어 심사를 통과했다.
개발기도 간단히 써놓은 것이 있다.

What(무엇) + Subscription(구독)을 합친 이름으로 큰 고민 없이 만들었는데 생각보다 맘에 든다.

WhatSubs는 구독 관리에 도움을 주는 앱으로, 자신이 구독하는 항목을 쉽게 목록에 추가하고 그 목록을 한눈에 쉽게 확인해 구독을 관리하는데 도움을 줄 수 있는 앱이다.

구독하는 서비스가 많아지다보니 어디서 어떤 결제수단으로 구독을 해 두었는지 까먹기도하고 확인하기에도 불편해서 한눈에 확인하고자 만든 앱이다. 또, 어디서든 쉽게 확인하려면 핸드폰이 낫겠다 싶어 이참에 React Native앱을 만들어보고자 제작하기 시작했다.

UI/UX에 많은 시간을 들였고 개인적으로는 만족스럽게 결과를 만들어냈지만 내 기준으로 만들다보니 최신 갤럭시 노트와 최신 아이폰과 같이 화면비가 긴 화면에 적합하게 만들어져 UI/UX로 아쉬운 점이 남았다. 해상도와 화면비를 고려해서 컨텐츠의 크기를 수정하기도 했지만 여전히 아쉬운 점이 많다.

P.S.

지속적으로 운영을 할거라면 개발 외에도 내 앱을 소개하는 페이지에도 신경을 좀 더 써야하나 싶다. 홍보까진 아니더라도 말이다.
이번에 출시한 WhatSubs는 소개 페이지를 그나마 포토샵을 오랜만에 사용해 만들었다. 아무래도 앱스토어와 플레이스토어에 올라가다보니 조금은 신경을 썼다. 그에 비해 다른 웹앱인 크롬 확장 프로그램들은 구글 프레젠트에서 대강 만들어 올리다보니 조금은 부실해보이는데 나중에라도 더 신경을 써서 만들어야겠다는 생각이 든다.

App Store Connect에 입력한 내용이 App Store에 어떻게 보일까?

Fri, 06 Dec 2019 00:00:00 GMT

App Store Connect에서 앱 정보를 입력하고 실제로 출시한다면
App Store에서 입력한 항목들은 어디에 어떻게 위치하게 될 지 정리해보았습니다.

아래는 App Store Connect에서 입력하고
App Store에 직접적으로 표시될 내용들입니다. 선택항목 및 표시되지 않는 항목은 제외한 목록입니다.

이름
부제
등급
앱 미리보기 및 스크린샷
프로모션 텍스트
설명
아이콘
카테고리
지원 URL
저작권
개인정보 처리방침 URL

검색 결과 화면

앱 스토어 검색을 통해 해당 앱을 찾는다면 검색 결과 목록에서 표시되는 내용은 아래와 같습니다.
아이콘, 이름, 부제 그리고 앱 미리보기 및 스크린샷이 아래와 같이 나타납니다.

또한 부제의 경우 길이에 따라 줄임표로 내용이 생략될 수 있습니다. 앱 미리보기 및 스크린샷의 경우 앱 미리보기가 우선이며 그 뒤로 스크린샷이 위치합니다.

앱 상세 화면

상단에는 위와 같이 아이콘, 이름, 부제, 등급, 앱 미리보기 및 스크린샷이 위치합니다.

스크린샷 아래로는 우선 프로모션 텍스트가 위치하며 더보기를 누를 경우에 이어서 설명이 추가적으로 노출되게 됩니다.

하단에서는 리뷰 부분에 앱 지원을 누르게 되면 입력해둔 지원 URL의 주소로 이동합니다.
카테고리는 두개의 카테고리를 입력해두더라도 첫번째 카테고리만 표시되게 됩니다.
등급은 상단 화면의 연령에 이어서 다시 연령 등급이라는 항목으로 표시됩니다.
저작권은 입력해둔 저작권에 앞에 ©가 추가되어 표기됩니다.
개인정보 처리방침을 누르게 되면 입력한 개인정보 처리방침 URL로 이동합니다.

(참고로 정보의 언어는 앱 스토어 커넥트에서 지정한 기본 언어가 나타나는 것이 아닙니다)

추가 정보

검색에 반영되는 항목

이름
부제
태그 태그의 경우에는 심사에 영향을 미칠 수 있으니 주의해서 작성해야합니다.

개인정보 처리방침 만들기

개인정보 처리방침이 없으면 심사에 올릴 수 없습니다. 개인정보보호 종합포털의 개인정보처리방침 만들기 메뉴를 들어가서 절차에 따라 만들 수 있습니다. 절차에 따라 완성된 내용이더라도 추가적인 검토와 수정은 필수입니다.