자바스크립트 런타임 환경

2021-09-19T00:00:00+00:00

개발 공부하며 생각나거나 겪었던 이슈들과 참고할 내용들을 적어나갈 블로그 입니다.

런타임 환경

자바스크립트 런타임 환경 ( 엔진 이해, 스택개념 정리 )

자바스크립트는 싱글 쓰레드 언어

브라우저안에 여러 가지의 쓰레드가 들어 있기때문에 웹 APIs들을 이용하면 멀티쓰레딩이 가능

Memory Heap
- 데이터를 만들 때 저장되는 공간
- 구조적으로 정리된 자료구조가 아니라 아무곳에서나 저장되어져 있다.
Call Stack
- LIFO(last in first out) 쌓이는 구조
- 재귀 함수 : 함수안에서 함수 자기자신을 호출
  - 프로세스또는 스택 마다 지정된 콜 스택 사이즈가 있어서 콜 스택을 잘못 쓸 경우 지정된 최고 사이즈를 초과하여 에러발생 할 수 있음

브라우저 런타임 환경 이해 ( 큐 개념정리 )

Queue FIFO ( First In First Out ) => ex) add(), remove()

웹 API를 사용할때 콜백 함수를 등록 해 놓고,

원하는 이벤트가 발생하면 바로 웹 API는 태스크 큐에 우리가 등록한 콜백 함수를 큐 안으로 넣고,

이벤트 루프는 빙글빙글 돌면서 콜스택과 태스크 큐를 관찰하는 아이인데,

콜 스택이 비워져 있으면 태스크 큐에 있는 아이를 하나만 가지고 와서 콜스택에 넣어준다.

전체적인 흐름

자바스크립트 엔진에는 Heap 과 Call Stack 이 있다.

Call Stack 은 함수가 실행되는 과정을 기억하기 위해서 쓰이는 자료구조이다.

자바스크립트가 동작하는 런타임 환경에서는 태스크 큐 와 마이크로 태스크 큐 를 이용해서 asynchonous , 비동기 적인 처리를 하게 된다.

태스크 큐 는 한번에 하나씩만 Call Stack 으로 가지고 온다.

마이크로 태스크 큐 는 들어 있는 아이들과 새로 추가된 아이들까지 모두 다 수행할 때까지, 마이크로 태스크 큐 가 비어있게 될 때 까지 Call Stack 으로 가지고 온다.

Render 는 이벤트 루프 가 매 번은 아니되 주기적으로 브라우저에게 UI를 업데이트 하기 위해서

자주 자주 들러준다.

호출한 리퀘스트 애니메이션 프레임 콜백 큐 는 이 업데이트가 일어나기 전에 한번 쭉 순회하면서 코드가 실행이 된다.

리디아 할리의 시각화 움짤링크

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");
bar();
foo();
baz();

Next Theme Tutorial

2017-07-20T00:00:00+00:00

NexT is a high quality elegant Jekyll theme ported from Hexo Next. It is crafted from scratch, with love.

Live Preview

Screenshots

Desktop
Sidebar

Sidebar (Post details page)

Mobile

Installation

Check whether you have Ruby 2.1.0 or higher installed:

ruby --version

Install Bundler:

gem install bundler

Clone Jacman theme:

git clone https://github.com/Simpleyyt/jekyll-theme-next.git
cd jekyll-theme-next

Install Jekyll and other dependencies from the GitHub Pages gem:

bundle install

Run your Jekyll site locally:

bundle exec jekyll server

More Details：Setting up your GitHub Pages site locally with Jekyll

Features

Multiple languages support, including: English / Russian / French / German / Simplified Chinese / Traditional Chinese.

Default language is English.

language: en
# language: zh-Hans
# language: fr-FR
# language: zh-hk
# language: zh-tw
# language: ru
# language: de

Set language field as following in site _config.yml to change to Chinese.

language: zh-Hans

Comment support.

NexT has native support for DuoShuo and Disqus comment systems.

Add the following snippets to your _config.yml:

duoshuo:
  enable: true
  shortname: your-duoshuo-shortname

disqus_shortname: your-disqus-shortname

NexT can automatically add links to your Social Media accounts:

social:
  GitHub: your-github-url
  Twitter: your-twitter-url
  Weibo: your-weibo-url
  DouBan: your-douban-url
  ZhiHu: your-zhihu-url

Feed link.

Show a feed link.

Set rss field in theme’s _config.yml, as the following value:

rss: false will totally disable feed link.
rss: use sites’ feed link. This is the default option.

Follow the installation instruction in the plugin’s README. After the configuration is done for this plugin, the feed link is ready too.
rss: http://your-feed-url set specific feed link.

Up to 5 code highlight themes built-in.

NexT uses Tomorrow Theme with 5 themes for you to choose from. Next use normal by default. Have a preview about normal and night:

Head over to Tomorrow Theme for more details.

Configuration

NexT comes with few configurations.

# Menu configuration.
menu:
  home: /
  archives: /archives

# Favicon
favicon: /favicon.ico

# Avatar (put the image into next/source/images/)
# can be any image format supported by web browsers (JPEG,PNG,GIF,SVG,..)
avatar: /default_avatar.png

# Code highlight theme
# available: normal | night | night eighties | night blue | night bright
highlight_theme: normal

# Fancybox for image gallery
fancybox: true

# Specify the date when the site was setup
since: 2013

Browser support

Highlight Test

2017-07-19T00:00:00+00:00

This is a highlight test.

Normal block

alert('Hello World!');

print 'helloworld'

Highlight block

alert( 'Hello, world!' );

print 'helloworld'

def foo
  puts 'foo'
end

def foo
  puts 'foo'
end

1
2
3
def foo
  puts 'foo'
end

#include <iostream>

using namespace std;

void foo(int arg1, int arg2)
{

}

int main()
{
  string str;
  foo(1, 2);
  cout << "Hello World" << endl;
  return 0;
}

Emoji Test

2015-09-19T00:00:00+00:00

This is an emoji test. :smile: lol.

See emoji cheat sheet for more detail :wink: : https://www.webpagefx.com/tools/emoji-cheat-sheet/.

:bowtie::smile::laughing::blush::smiley::relaxed::smirk: :heart_eyes::kissing_heart::kissing_closed_eyes::flushed::relieved::satisfied::grin:

Gallery Post

2014-11-18T15:45:20+00:00

Nunc dignissim volutpat enim, non sollicitudin purus dignissim id. Nam sit amet urna eu velit lacinia eleifend. Proin auctor rhoncus ligula nec aliquet. Donec sodales molestie lacinia. Curabitur dictum faucibus urna at convallis. Aliquam in lectus at urna rutrum porta. In lacus arcu, molestie ut vestibulum ut, rhoncus sed eros. Sed et elit vitae risus pretium consectetur vel in mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tempus turpis quis lectus rhoncus adipiscing. Proin pulvinar placerat suscipit. Maecenas imperdiet, quam vitae varius auctor, enim mauris vulputate sapien, nec laoreet neque diam non quam.

Etiam luctus mauris at mi sollicitudin quis malesuada nibh porttitor. Vestibulum non dapibus magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin feugiat hendrerit viverra. Phasellus sit amet nunc mauris, eu ultricies tellus. Sed a mi tortor, eleifend varius erat. Proin consectetur molestie tortor eu gravida. Cras placerat orci id arcu tristique ut rutrum justo pulvinar. Maecenas lacinia fringilla diam non bibendum. Aenean vel viverra turpis. Integer ut leo nisi. Pellentesque vehicula quam ut sapien convallis consequat. Aliquam ut arcu purus, eget tempor purus. Integer eu tellus quis erat tristique gravida eu vel lorem.

MathJax with Jekyll

2014-02-16T00:00:00+00:00

One of the rewards of switching my website to Jekyll is the ability to support MathJax, which means I can write LaTeX-like equations that get nicely displayed in a web browser, like this one $ \sqrt{\frac{n!}{k!(n-k)!}} $ or this one $ x^2 + y^2 = r^2 $.

What’s MathJax?

If you check MathJax website (www.mathjax.org) you’ll see that it is an open source JavaScript display engine for mathematics that works in all browsers.

How to implement MathJax with Jekyll

I followed the instructions described by Dason Kurkiewicz for using Jekyll and Mathjax.

Here are some important details. I had to modify the Ruby library for Markdown in my _config.yml file. Now I’m using redcarpet so the corresponding line in the configuration file is: markdown: redcarpet

To load the MathJax javascript, I added the following lines in my layout post.html (located in my folder _layouts)

<script type="text/javascript"
    src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>

Of course you can choose a different file location in your jekyll layouts.

Note that by default, the tex2jax preprocessor defines the LaTeX math delimiters, which are \$...\$ for in-line math, and \\[...\\] for displayed equations. It also defines the TeX delimiters $$...$$ for displayed equations, but it does not define $...$ as in-line math delimiters. To enable in-line math delimiter with $...$ , please use the following configuration:

<script type="text/x-mathjax-config">
MathJax.Hub.Config({
  tex2jax: {
    inlineMath: [['$','$'], ['\\(','\\)']],
    processEscapes: true
  }
});
</script>
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML" type="text/javascript"></script>

A Couple of Examples

Here’s a short list of examples. To know more about the details behind MathJax, you can always checked the provided documentation available at http://docs.mathjax.org/en/latest/

Let’s try a first example. Here’s a dummy equation:

\[a^2 + b^2 = c^2\]

How do you write such expression? Very simple: using double dollar signs

$$a^2 + b^2 = c^2$$

To display inline math use \$ ... \$ like this \$ sin(x^2) \$ which gets rendered as $ sin(x^2) $

Here’s another example using type \mathsf

$$ \mathsf{Data = PCs} \times \mathsf{Loadings} $$

which gets displayed as

\[\mathsf{Data = PCs} \times \mathsf{Loadings}\]

Or even better:

\\[ \mathbf{X} = \mathbf{Z} \mathbf{P^\mathsf{T}} \\]

is displayed as

\[ \mathbf{X} = \mathbf{Z} \mathbf{P^\mathsf{T}} \]

If you want to use subscripts like this $ \mathbf{X}_{n,p} $ you need to scape the underscores with a backslash like so \mathbf{X}\_{n,p}:

$$ \mathbf{X}\_{n,p} = \mathbf{A}\_{n,k} \mathbf{B}\_{k,p} $$

will be displayed as

\[ \mathbf{X}_{n,p} = \mathbf{A}_{n,k} \mathbf{B}_{k,p} \]

Images

2013-12-26T22:46:49+00:00

This is a image test post.

Excerpts

2013-12-25T00:23:23+00:00

The following contents should be invisible in home/archive page.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget urna vitae velit eleifend interdum at ac nisi. In nec ligula lacus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed eu cursus erat, ut dapibus quam. Aliquam eleifend dolor vitae libero pharetra adipiscing. Etiam adipiscing dolor a quam tempor, eu convallis nulla varius. Aliquam sollicitudin risus a porta aliquam. Ut nec velit dolor. Proin eget leo lobortis, aliquam est sed, mollis mauris. Fusce vitae leo pretium massa accumsan condimentum. Fusce malesuada gravida lectus vel vulputate. Donec bibendum porta nibh ut aliquam.

Sed lorem felis, congue non fringilla eu, aliquam eu eros. Curabitur orci libero, mollis sed semper vitae, adipiscing in lectus. Aenean non egestas odio. Donec sollicitudin nisi quis lorem gravida, in pharetra mauris fringilla. Duis sit amet faucibus dolor, id aliquam neque. In egestas, odio gravida tempor dictum, mauris felis faucibus purus, sit amet commodo lacus diam vitae est. Ut ut quam eget massa semper sodales. Aenean non ipsum cursus, blandit lectus in, ornare odio. Curabitur ultrices porttitor vulputate.

Block

2013-12-25T00:14:39+00:00

This post is used for testing tag plugins. See docs for more info.

Block Quote

Normal blockquote

Praesent diam elit, interdum ut pulvinar placerat, imperdiet at magna.

Code Block

Inline code block

This is a inline code block: python, print 'helloworld'.

Normal code block

alert('Hello World!');

print "Hello world"

Highlight code block

print "Hello world"

def foo
  puts 'foo'
end

1
2
3
def foo
  puts 'foo'
end

Gist

日本語テスト

2013-12-24T23:33:26+00:00

This is a Japanese test post.

私は昨日ついにその助力家というのの上よりするたなけれ。

最も今をお話団はちょうどこの前後なかろでくらいに困りがいるたをは帰着考えたなかって、そうにもするでうたらない。

がたを知っないはずも同時に九月をいよいよたありた。

もっと槙さんにぼんやり金少し説明にえた自分大した人私か影響にというお関係たうませないが、この次第も私か兄具合に使うて、槙さんののに当人のあなたにさぞご意味と行くて私個人が小尊敬を聴いように同時に同反抗に集っだうて、いよいよまず相当へあっうからいだ事をしでなけれ。

それでそれでもご時日をしはずはたったいやと突き抜けるますて、その元がは行ったてという獄を尽すていけですた。

この中道具の日その学校はあなたごろがすまなりかとネルソンさんの考えるですん、辺の事実ないというご盲従ありたですと、爺さんのためが薬缶が結果までの箸の当時してならて、多少の十月にためからそういう上からとにかくしましないと触れべきものたで、ないうですと多少お人達したのでたた。

From すぐ使えるダミーテキスト - 日本語 Lorem ipsum