<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>han-choi.log</title>
        <link>https://velog.io/</link>
        <description>Web Developer 웹 개발 공부하는 사람</description>
        <lastBuildDate>Wed, 26 May 2021 07:36:52 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <image>
            <title>han-choi.log</title>
            <url>https://images.velog.io/images/han-choi/profile/38d0b0f5-ba60-4592-b3ac-2ab4658bcf7d/social.png</url>
            <link>https://velog.io/</link>
        </image>
        <copyright>Copyright (C) 2019. han-choi.log. All rights reserved.</copyright>
        <atom:link href="https://v2.velog.io/rss/han-choi" rel="self" type="application/rss+xml"/>
        <item>
            <title><![CDATA[[JavaScript] Tracking Variable State]]></title>
            <link>https://velog.io/@han-choi/js-velog3</link>
            <guid>https://velog.io/@han-choi/js-velog3</guid>
            <pubDate>Wed, 26 May 2021 07:36:52 GMT</pubDate>
            <description><![CDATA[<pre style="background-color: whitesmoke">
<span style="color:blue">function</span> double(<b>arr</b>) {
 for(<span style="color:green">let</span> <i>i</i> = 0 ; <i>i</i> < <b>arr</b>.length ; <i>i</i> ++ ) {
     <b>arr</b>[<i>i</i>] = <b>arr</b>[<i>i</i>] * 2;
 }
  <span style="color:purple">return</span> <b>arr</b>;
}
<span style="color:red">const</span> <b>array</b> = [1,2]
<u><span style="color:red;">const</span> <b>doubleArray</b> = double(<b>array</b>)</u>;
<span style="color:teal">console</span>.<span style="color:gray">log</span>(<b>array</b>); // [2,4]
<span style="color:teal">console</span>.<span style="color:gray">log</span>(<b>doubleArray</b>); // [2,4]
</pre>

<blockquote>
<p>Suppose that you have a variable that will be used in various functions in your program. Also suppose that you want to keep this variable as it is without a change over the period of time of execution. In the program above, the variable  &#39;array&#39; that is [1,2] will not be kept original after a specific line execution. Look into the underlined line, where a function &#39;double&#39; is called and executed. Then you can go deeper inside that function to find out that the originally passed parameter is the &#39;array&#39; variable which then by function mechanism is returned at the end. The problem with this is that the &#39;double&#39; function essensially changes values of each element in the passed array. That is why when by the time it is returned, the &#39;array&#39; variable is no longer [1,2], rather [2,4].</p>
</blockquote>
<pre style="background-color: whitesmoke"><b>// The code fix to prevent changes in original variable state:</b>
function  double(arr) {
    let localArray = [];
    for(let i = 0 ; i < arr.length ; i ++ ) {
        localArray.push(arr[i]*2);
    }
    return localArray;
}
<span style="color:red">const</span> <b>array</b> = [1,2]
<span style="color:red;">const</span> <b>doubleArray</b> = double(<b>array</b>);
<span style="color:teal">console</span>.<span style="color:gray">log</span>(<b>array</b>); // [1,2]
<span style="color:teal">console</span>.<span style="color:gray">log</span>(<b>doubleArray</b>); // [2,4]

</pre> ]]></description>
        </item>
        <item>
            <title><![CDATA[[JavaScript] 사각형의 대각선 길이 구하기]]></title>
            <link>https://velog.io/@han-choi/js-velog2</link>
            <guid>https://velog.io/@han-choi/js-velog2</guid>
            <pubDate>Fri, 21 May 2021 00:05:14 GMT</pubDate>
            <description><![CDATA[<p>주어진 사각형의 대각선 길이를 구하는 프로그램을 작성하려고 합니다.
수학시간에 배웠었던 피타고라스 정리를 적용하여 프로그램 구조를 짤 것입니다. </p>
<pre style="background-color: whitesmoke">
<code style="color: salmon">pythagorean theorem</code> : c^2 = a^2 + b^2 <span style="color:blue; font-weight:bold"><=></span> c = sqrt(a^2 + b^2)
</pre>

<p>사각형을 대각선으로 자르게 되면 두개의 일치하는 삼각형이 만들어집니다. 그래서 사각형의 대각선은 바로 피타고라스 정리를 이용한 가장 긴 변이라는 것을 알수 있죠.</p>
<p>Program psuedoCode : 
사각형의 두 변의 길이를 각 a 와 b 라고 부른다.
위의 공식처럼 대각선길이는 각 변의 제곱의 합에 루트를 씌운 것이기에 그것을 출력해낸다.</p>
<p>이번 프로그램에서는 생산자로 불리는 컨스트럭터 (constructor) 함수를 이용할 것이다.</p>
<p><strong>JavaScript Functional Code</strong></p>
<pre style="background-color: whitesmoke;">
function Pythagorean(a, b) {
    this.a = a;
    this.b = b;
       this.length = () => Math.sqrt((this.a)*(this.a) + (this.b)*(this.b));
}
// now test

let rectangle1 = new Pythagorean(1,2) // 변의 길이가 각 1과 2인 사각형
let rectangle2 = new Pythagorean(1,1) // 변의 길이가 1일 정사각형

console.log(rectangle1.length().toFixed(2)) // 대각선 길이를 2.24 로 반올림해서 출력
console.log(reactnalge2.length().toFixed(2)) // 대각선 길이를 1.41 로 반올림해서 출력
</pre>

<p>이제는 이 함수를 이용하여서 무작위로 사각형을 만들고 그것의 따른 대각선 길이를 구하여서 오브젝트로 데이터를 저장시키는 프로그램을 만들어보겠습니다.</p>
<p><strong>Application Code</strong></p>
<pre style="background-color: whitesmoke">
function pythagorean(a, b) {
  this.a = a;
  this.b = b;
  this.length = () => Math.sqrt(this.a * this.a + this.b * this.b);
}

function reactangle(a, b) {
  return {
    width: a,
    height: b
  };
}

let randomWidth = [1, 5, 8, 12];
let randomHeight = [2, 5, 11, 12];
let w_index = Math.floor(Math.random()* randomWidth.length);
let h_index = Math.floor(Math.random()* randomHeight.length);
let REC = reactangle(randomWidth[w_index], randomHeight[h_index]);
console.log(REC);

const REC1 = new pythagorean(REC.width, REC.height);
console.log(`A rectangle has width : ${REC.width} and height : ${REC.height}.\n The diagonal length is ${REC1.length().toFixed(2)}`);
</pre>

<p>written by @han-choi
date written 5/20/2021
<a href="https://han-choi.github.io">Personal website</a>
<a href="https://github.com/han-choi">Github</a>
<a href="https://www.linkedin.com/in/haneul-choi-a07834183/">Linkedin</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[JavaScript] 자연수의 배열을 짝수와 홀수들로 나누기]]></title>
            <link>https://velog.io/@han-choi/js-velog1</link>
            <guid>https://velog.io/@han-choi/js-velog1</guid>
            <pubDate>Thu, 20 May 2021 08:00:02 GMT</pubDate>
            <description><![CDATA[<p>무작위의 배열을 만들고 그 안에 있는 요소들을 짝수와 홀수로 두개의 배열로 나눠보려고 합니다.</p>
<p>이론적으로 생각을 해보면은 첫번째로 해야 할 것은 바로 프로그램에서 각 수(number)가 짝수(even) 또는 홀수(odd)인지 확인시키 함수를  아래 조건문을 이용해 진실인지 거짓인지(boolean) 호출하게 하면 됩니다..</p>
<p>Program psuedoCode:
a라는 수를 2로 나누었을 때의 그 나머지를 b라고 부른다.
b가 0 또는 거짓(false) 이면 a는 짝수이다.
그렇지 않을 경우(b가 0이 아닐경우)에는 a는 홀수이다.</p>
<p><strong>JavaScript Functional Code</strong></p>
<pre style="color: ; background-color: whitesmoke">
let a = 24; // 짝수
let b = 17; // 홀수
    function checkEvenNumber(num) {
    let <code style="color:chocolate">remainder</code> = num % 2; // 나머지
    if(<code style="color:chocolate">remainder</code> === 0) {
        return <code style="color:blue">true</code>;
    } 
    return <code style="color:red">false</code>;
    }
// now test a, b;

let testA = checkEvenNumber(a); console.log(testA); // returns <code style="color:blue">true</code>
let testB = checkEvenNumber(b); console.log(textB); // returns <code style="color:red">false</code>
</pre>

<p>이제 어떠한 수를 넣어도 우리는 그 수가 짝수 인지 또는 홀수 인지 이 함수가 반환하는 값으 통해 쉽게 알 수 있습니다.</p>
<p>그렇다면 요소(element)들이 수(number) 무작위의 배열(array)을 만들어서 홀수배열과 짝수 배열로 만드는 프로그램을 만들어 보겠습니다.</p>
<p><strong>Applicaiton Code</strong></p>
<pre style="color: ; background-color: whitesmoke">
function checkEvenNumber(num) {
   let <code style="color:chocolate">remainder</code> = num % 2;
   if(<code style="color:chocolate">remainder</code> === 0) {
    return <code style="color:blue">true</code>;
   } 
 return <code style="color:red">false</code>;
}

const <code style='color:purple'>myArr</code> = [1, 2, 3, 4, 5];
let oddArr = [];
let evenArr = [];
<code style='color:purple'>myArr</code>.forEach(element => {
    if(checkEvenNumber(element)) {
        evenArr.push(element);
    } else {
        oddArr.push(element);
    }
})

// print the program result in console
console.log(evenArr); // [2,4]
console.log(oddArr); // [1,3,5]
</pre>


<blockquote>
<p><strong>왜 &#39;짝수&#39;인지 체크하는 논리를 선호하나요?</strong>
숫자 1은 2로 나누었을때 나머지가 1이 아니기때문에 경우의 조건문 하나가 더 필요하기 때문입니다. 그래서 이 프로그램을 응용할 때는 짝수인지를 체크하는 출력함수를 갖는것이이 더 효율적이라고 생각합니다.</p>
</blockquote>
<p>written by @han-choi 
date written <em>5/20/2021</em>
<a href="https://han-choi.github.io">Personal website</a>
<a href="https://github.com/han-choi">Github</a>
<a href="https://www.linkedin.com/in/haneul-choi-a07834183/">Linkedin</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[Test First Submission]]></title>
            <link>https://velog.io/@han-choi/v-test</link>
            <guid>https://velog.io/@han-choi/v-test</guid>
            <pubDate>Wed, 19 May 2021 23:36:03 GMT</pubDate>
            <description><![CDATA[<p>Hello, World!</p>
]]></description>
        </item>
    </channel>
</rss>