<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>초보의, 초보에 의한, 초보를 위한</title>
        <link>https://velog.io/</link>
        <description>법대생의 좌충우돌 IT 생존일대기</description>
        <lastBuildDate>Sat, 10 Jul 2021 12:46:47 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <image>
            <title>초보의, 초보에 의한, 초보를 위한</title>
            <url>https://images.velog.io/images/aaron_93/profile/0490ef6a-ca40-448e-a726-3711be3f25cb/무새무새-물음표.png</url>
            <link>https://velog.io/</link>
        </image>
        <copyright>Copyright (C) 2019. 초보의, 초보에 의한, 초보를 위한. All rights reserved.</copyright>
        <atom:link href="https://v2.velog.io/rss/aaron_93" rel="self" type="application/rss+xml"/>
        <item>
            <title><![CDATA[스파르톤 - 생존일지]]></title>
            <link>https://velog.io/@aaron_93/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%86%A4-%EC%83%9D%EC%A1%B4%EC%9D%BC%EC%A7%80</link>
            <guid>https://velog.io/@aaron_93/%EC%8A%A4%ED%8C%8C%EB%A5%B4%ED%86%A4-%EC%83%9D%EC%A1%B4%EC%9D%BC%EC%A7%80</guid>
            <pubDate>Sat, 10 Jul 2021 12:46:47 GMT</pubDate>
            <description><![CDATA[<h3 id="21시-생존기록">21시 생존기록</h3>
<blockquote>
<p>21:30 현재 체력상태</p>
</blockquote>
<p><img src="https://images.velog.io/images/aaron_93/post/2a95f3ad-227b-4c57-b572-6123a3dcbd81/HealthOverview.png" alt=""></p>
<p><img src="https://images.velog.io/images/aaron_93/post/d5111275-d587-403c-bb68-a50215b5f8e7/afaf824832c98b035ca2ebd849f01a08.gif" alt=""></p>
<p>한줄평 : 아직은 정신 멀쩡하지만 미래의 나... 부탁한다</p>
<hr>
<h3 id="21시-공부기록">21시 공부기록</h3>
<ol>
<li><p>웹의 동작 개념</p>
</li>
<li><p>DOM</p>
</li>
<li><p>Javascript ES6 문법</p>
<ul>
<li><p>class
클래스는 객체 지향 프로그래밍에서 <strong>특정 객체를 생성하기 위해 변수와 메소드를 정의하는 일종의 틀</strong>로써,
객체를 정의하기 위한 <strong>상태(멤버 변수)와 메서드(함수)</strong> 로 구성된다. 클래스는 객체 단위로 코드를 그룹화하고 쉽게 재사용이 가능하게 해 준다.</p>
<pre><code class="language-javascript">class Cat {
// 생성자 함수 : 클래스 인스턴스를 생성하고 생성한 인스턴스를 초기화 하는 역할
constructor(name){
  this.name = name;
}
// 함수
showName(){
  return this.name;
}
}
// extends : 부모 클래스를 상속받아 옴
class MyCat extends Cat{
constructor(name, age){
   // 부모 클래스에 접근 가능하게 해줌
  super(name);
  this.age = age;
}
showName(){
  return &#39;내 고양이 이름은 &#39;+super.showName()+&#39;입니다.&#39;;
}

showAge(){
  console.log(&#39;내 고양이는 &#39;+this.age+&#39;살 입니다!&#39;);
}
}

let my_cat = new MyCat(&#39;perl&#39;, 4);
my_cat.showName();
my_cat.showAge();</code></pre>
</li>
<li><p>변수</p>
</li>
<li><blockquote>
<p><a href="https://www.notion.so/I-82c991cda9564deb940676fb727626b8">https://www.notion.so/I-82c991cda9564deb940676fb727626b8</a></p>
</blockquote>
</li>
<li><p>스코프
스코프는 <strong>참조 대상 식별자가 유효한 범위</strong>를 말한다. 모든 식별자는(변수, 함수, 클래스 등) 자신이 선언된 위치에 의해 자신이 유효한 범위(다른 코드가 변수 자신을 참조할 수 있는 범위)가 결정된다. 아래의 코드에서 변수 x는 두 번 선언이 되었는데 자바스크립트 엔진은 이 중 어떤 변수를 참조해야 할 것인지를 결정하는 과정을 거치게 되는데 이를 ** 식별자 결정** 이라고 한다. 아래의 코드에서 foo 함수 외부에 선언된 변수 x는 어디서든 참조가 가능하지만 foo 함수 내부에서 선언된 변수 x는 foo 함수 내부에서만 참조가 가능하다. 즉 스코프는 코드가 어디서 실행되며 주변에 어떤 코드가 있는지에 따라 결정되는 실행, 평가의 범위라고 할 수 있다.</p>
</li>
</ul>
</li>
</ol>
<pre><code class="language-javascript">    let x = &quot;global&quot;

        function foo(){
          let x = &quot;local&quot;
          console.log(x); // &quot;local&quot;
        }

    foo();
    console.log(x) // &quot;global&quot;</code></pre>
<br>

<hr>
<h3 id="23시-생존기록">23시 생존기록</h3>
<blockquote>
<p>23:00 현재 체력상태</p>
</blockquote>
<p><img src="https://images.velog.io/images/aaron_93/post/2e7bc252-80c7-4d0e-8e8a-487a424c61b6/giphy.gif" alt=""></p>
<p>한줄평 : 이정도는 껌이지 ^~^</p>
<p><img src="https://images.velog.io/images/aaron_93/post/da4cd5ce-6c9f-4c07-bf13-b9aac92dacbc/image.png" alt=""></p>
<p>공개처형당했다. 이렇게 된 이상 전력을 다한다....</p>
<hr>
<h3 id="23시-공부기록">23시 공부기록</h3>
<ol>
<li>JSX
리액트에서 사용되는 <strong>XML/HTML 꼴의 확장된 자바스크립트 구문</strong> 으로써  구문 내부에 작성된 HTML꼴의 텍스트는 전처리기를 통하여 정규 자바스크립트 객체로써 반환되어 자바스크립트 엔진이 파싱이 가능하게끔 한다. 작성 할 때 여러개의 HTML 라인을 작성한다면 반드시 <strong>부모-자식 관계에 맞게 작성</strong> 해야하고 내부에 여러 요소가 있다면 virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교를 할 수 있게끔 하기 위해서 <strong>반드시 하나의 부모 element로 감싸야한다.</strong></li>
</ol>
<hr>
<h3 id="00시-생존기록">00시 생존기록</h3>
<blockquote>
<p>00:00 현재 체력 상태</p>
</blockquote>
<p><img src="https://images.velog.io/images/aaron_93/post/238e9f34-857a-41e4-a75b-3c3c90a2d896/gif-funny-work-48.gif" alt=""></p>
<p>(치킨 뺏겨서 기분이가 좋지 않음)</p>
<p>막판에 치킨을 뺏겨서 몹시 기분이가 좋지 않았지만 퀴즈 댕꿀잼이었다. <strong>그렇다고하더라도 잃어버린 치킨은 돌아오지 않는다....</strong>
<img src="https://images.velog.io/images/aaron_93/post/f1ef7722-b452-42f4-bfb9-1375c571c6ff/giphy%20(1).gif" alt=""></p>
<hr>
<h3 id="00시-공부기록">00시 공부기록</h3>
<ol>
<li>Component
컴포넌트는 <strong>독립적이고 재사용가능한 코드 묶음</strong> 이라고 할 수 있다. 컴포넌트는 <strong>props</strong>라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 react 엘리먼트를 반환한다. 컴포넌트에는 두가지 종류가 있는데 함수형 컴포넌트와 클래스 컴포넌트가 존재한다. 함수형 컴포넌트는 간단하게 작성이 가능하다는 장점을 갖고 있고 Hook이 등장하고 난 후(v16.8) state와 라이프사이클 기능이 구현 가능해지면서 리액트 <strong>공식문서에서도 함수형 컴포넌트와 훅을 사용할 것을 권장</strong>하고 있다. 이 hook이 등장하고 난 후부터 함수형 컴포넌트의 사용이 급격히 늘었는데 그 이유는 <strong>클래스형 컴포넌트는 this를 사용하는 특성상 immutability가 보장되지 않기 때문</strong>이다.</li>
</ol>
<p>더 읽어보기 : <a href="https://overreacted.io/ko/how-are-function-components-different-from-classes/">https://overreacted.io/ko/how-are-function-components-different-from-classes/</a></p>
<hr>
<h3 id="01시-생존기록">01시 생존기록</h3>
<blockquote>
<p>01:00 체력상태</p>
</blockquote>
<p><img src="https://images.velog.io/images/aaron_93/post/1c81e173-5fc4-4442-b43f-e78bad1e8f07/hungry-gif1.gif" alt=""></p>
<p>배가 고파지고있다... 편의점을 털어야겠다... 츼킨... 또륵...</p>
<hr>
<h3 id="01시-공부기록">01시 공부기록</h3>
<p>간단한 텍스트 입력 화면 만들어보기</p>
<pre><code class="language-react">
import React from &#39;react&#39;;
import logo from &#39;./logo.svg&#39;;
import &#39;./App.css&#39;;

function App() {
  const styles = {
    border: &#39;1px solid #eee&#39;, 
    padding: &#39;20px&#39;,
    display: &#39;flex&#39;, 
    width: &#39;100vw&#39;, 
    maxWidth: &#39;400px&#39;, 
    margin: &#39;30px auto&#39;, 
    flexDirection: &#39;column&#39;
  };

  return (
    &lt;div className=&quot;App&quot;&gt;
      &lt;div style={styles}&gt;
        &lt;h1 style={{ color: &#39;green&#39; }}&gt;안녕하세요!&lt;/h1&gt;
        &lt;hr style={{width: &#39;100%&#39;}}/&gt;
        &lt;p style={{ textAlign: &#39;left&#39; }}&gt;이름을 입력해주세요.&lt;/p&gt;
        &lt;input type=&quot;text&quot;/&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  );
}

export default App;

</code></pre>
<hr>
<h3 id="02시-생존기록">02시 생존기록</h3>
<blockquote>
<p>02:00 체력상태</p>
</blockquote>
<p><img src="https://images.velog.io/images/aaron_93/post/c5966944-64ed-4581-b01d-dd4eceda490a/tenor.gif" alt=""></p>
<p>아무도 날 막을수 없으셈 ^^</p>
<p>그래도 할건 다 하면서 열심히 하고 있습니다. (근엄 진지)</p>
<hr>
<h3 id="02시-공부기록">02시 공부기록</h3>
<ul>
<li>css in React</li>
</ul>
<p>리액트도 HTML이나 자바스크립트처럼 css를 in-line으로 적용할 수도 있고 따로 파일을 만들어 불러와 적용시키는 방법이 있다. in-line으로 css를 적용하려면 HTML tag 안에 직접 style = {<strong>자바스크립트 객체</strong>} 꼴로 적용시키면 된다. 이때 중요한 것은 style <strong>속성값에 일반 문자열이 아닌 자바스크립트 객체가 할당</strong>되어야 한다는 것이고 css 속성명은 <strong>카멜케이스</strong>로 작성되어야 한다는 것이다.</p>
<pre><code class="language-javascript">    &lt;h1 style={{ color: &#39;green&#39; }}&gt;&lt;/h1&gt;</code></pre>
<p>다른 방법으로는 외부에 stylesheet를 통해 스타일을 정의해놓고 react 컴포넌트 파일에서 해당 css 파일을 import 해 오는 방법이 있다. import 후 엘리먼트의 <strong>className 속성을 이용하여 외부 파일에서 정의된 스타일을 맵핑</strong>해 주는 것이다. </p>
<pre><code class="language-css">/* button.css */
.btn {
  color: white;
  background: teal;
  padding: 0.375rem 0.75rem;
  border: 1px solid teal;
  border-radius: 0.25rem;
  font-size: 1rem;
  line-height: 1.5;
}</code></pre>
<pre><code class="language-javascript">// app.js
import React from &quot;react&quot;;
import &quot;./Button.css&quot;;

function Button() {
  return &lt;button className=&quot;btn&quot;&gt;External&lt;/button&gt;;
}</code></pre>
<hr>
<h3 id="03시-생존기록">03시 생존기록</h3>
<blockquote>
<p>03:00 체력상태</p>
</blockquote>
<p><img src="https://images.velog.io/images/aaron_93/post/c5d2c9d9-759f-42e9-9480-2cfa78281498/%E1%84%83%E1%85%A1%E1%84%8B%E1%85%AE%E1%86%AB%E1%84%85%E1%85%A9%E1%84%83%E1%85%B3.jpeg" alt=""></p>
<p>100인 달리기 개꿀잼ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ</p>
<hr>
<h3 id="03시-공부기록">03시 공부기록</h3>
<ul>
<li>CSS preprocessor</li>
</ul>
<p>css는 프로젝트가 커질수록 선택자(selector)를 지나치게 많이 쓰게 된다던가 구문의 부재등으로 알아보기 힘들게 되고 이는 곧 유지보수의 어려움으로 연결된다. 이를 해결하기 CSS와 비슷한 문법을 갖고 있지만 더 많은 기능(선택자 중첩(nesting), 조건문, 반복문 등)을 갖고있는 전처리기를 이용하는 방법이 등장했다. 하지만 전처리기는 웹에서 직접 동작하지 않기 때문에 CSS로 컴파일하는 과정이 필요하다.</p>
<p>SASS는 가장 유명한 3개의 전처리기 중 하나로써 2006년부터 시작한 오래된 CSS 전처리기이고 그만큼 높은 성숙도와 많은 커뮤니티를 갖고 있다.</p>
<p>SCSS는 SASS의 3버전에서 새롭게 등장한 것으로 CSS구문과 완전히 호환되도록 새로운 구문을 도입해 만든 SASS의 상위집합(superset)이다.
다만 몇가지 차이가 있는데 그 중 한가지는 <strong>SASS</strong>는 유효범위를 <strong>들여쓰기</strong>로 하지만 <strong>SCSS</strong>는 <strong>중괄호</strong>로 구분한다는 점 등이 있다.</p>
<hr>
<h3 id="04시-생존기록">04시 생존기록</h3>
<blockquote>
<p>04:00 체력상태</p>
</blockquote>
<p>이제 짤방 구하기도 귀찮아... 너무 쌩쌩함 ㅋㅋㅋ</p>
<hr>
<h3 id="04시-공부기록">04시 공부기록</h3>
<ul>
<li>DOM
DOM이란 Document Object Model로써 웹페이지를 객체로 표현하는 모델을 의미한다. 브라우저마다 DOM을 표현하는 방식이 다 다르기 때문에 구체적으로 DOM이 정형화된 언어나 모델이 있는 것은 아니다. 그렇기 때문에 특정 웹 브라우저에서 작동하는 코드가 다른 특정 웹 브라우저에서는 실행이 안되거나 성능이 저하되는 이슈가 발생할 수 있다.</li>
</ul>
<p><img src="https://images.velog.io/images/aaron_93/post/436cae18-526d-41dd-96de-7bdb0e15bd50/image.png" alt=""></p>
<p>DOM은 아래와 같은 방식으로 렌더링 된다. 우선 브라우저는 html 태그를 파싱하여 DOM tree를 구성하고 동시에 stylesheet에서 css를 파싱하여 스타일 규칙을 만들어낸다. 그 후 DOM 트리와 스타일 규칙을 결합하여 렌더 트리를 만들어낸다.</p>
<p>-Virtual DOM
문제는 위의 DOM의 렌더링 과정은 DOM 트리가 수정되 때 마다 전체 렌더 트리를 실시간으로 갱신하다보니 수정사항이 많이 발생한다면 불필요하게 많은 렌더링이 진행되어 성능이 저하될 수 있다는 것이다. React에서는 이를 해결하기 위해 가상 DOM (virtual DOM)을 이용하는데 이 가상 DOM을 이용하는 방식은 실시간으로 전체 DOM 트리를 수정하는 것이 아니라 변경사항이 모두 반영된 가상의 DOM을 만들어낸 후 이 가상 DOM에서 모든 변경사항을 담은 후에 단 한번의 DOM 수정으로 불필요한 렌더링 수를 줄일 수 있다는 장점이 있다.</p>
<p><img src="https://images.velog.io/images/aaron_93/post/cc4a0d62-0d89-4a03-8977-b9629f6904a2/image.png" alt=""></p>
<hr>
<h3 id="05시-생존기록">05시 생존기록</h3>
<blockquote>
<p>05:00 체력상태</p>
</blockquote>
<p><img src="https://images.velog.io/images/aaron_93/post/eac6e01b-e1a1-4893-b9bf-b123b5efc80e/200.gif" alt=""></p>
<p>나는 살아있다.</p>
<hr>
<h3 id="05시-공부기록">05시 공부기록</h3>
<ul>
<li><p>Life Cycle
생명주기 매서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드이다. 생명주기 메서드는 클래스형 컴포넌트에서만 사용 가능한데 함수형 컴포넌트는 hook을 통해 대체가 가능하다. </p>
</li>
<li><p>mount 될 때 발생하는 생명주기 메서드</p>
</li>
</ul>
<ol>
<li>constructor</li>
<li>getDerivedStateFromProps : props로 받아온 것을 state에 넣어주고 싶을 때 사용</li>
<li>render : 컴포넌트를 렌더링 하는 메서드</li>
<li>componentDidMount : 컴포넌트의 첫번째 렌더링이 마치고 나면 호출되는 메서드로서, 호출되는 시점에는 만들어진 컴포넌트가 화면에 나타난 상태이다. 이 때 DOM을 사용해야하는 외부 라이브러리를 연동하거나 해당 컴포넌트에서 필요로 하는 데이터를 요청하기 위해 axios, fetch 등을 통해 ajax 요청을 하거나, DOM의 속성을 일거나 직접 변경하는 작업을 진행해야 한다.</li>
</ol>
<ul>
<li>update 될 때 발생하는 생명주기 메서드</li>
</ul>
<ol>
<li>getDerivedStateFromProps</li>
<li>shouldComponentUpdate : 컴포넌트가 리렌더링 될지 말지를 결정하는 메서드(최적화 시 사용)</li>
<li>render</li>
<li>getSnapshotBeforeUpdate : 컴포넌트에 변화가 일어나기 직전 DOM 상태를 가져와서 특정값을 반환하면 다음에 발생하는 componentDidUpdate 함수에서 반아와서 사용할 수 있다.</li>
<li>componentDidUpdate</li>
</ol>
<ul>
<li>unmount 될 때 발생하는 생명주기 메서드</li>
</ul>
<ol>
<li>componentWillUnmount : 컴포넌트가 화면에서 사라지기 직전에 호출되는데 DOM에 직접 등록했던 이벤트를 제거한다. 외부 라이브러리를 사용한 것이 있고 해당 라이브러리에 dispose 기능이 있다면 이 부분에서 호출한다.</li>
</ol>
<pre><code class="language-jsx">import React from &quot;react&quot;;

// 클래스형 컴포넌트는 이렇게 생겼습니다!
class LifecycleEx extends React.Component {

// 생성자 함수 : 컴포넌트의 생성자 메서드로서 컴포넌트가 만들어지면 가장 먼저 실행되는 메서드
  constructor(props) {
    super(props);

    this.state = {
      cat_name: &#39;나비&#39;,
    };

    console.log(&#39;in constructor!&#39;);
  }

  changeCatName = () =&gt; {
    // 다음 강의에서 배울, state 업데이트 하는 방법입니다!
    // 지금은 componentDidUpdate()를 보기 위해 쓰는 거니까, 처음보는 거라고 당황하지 말기!
      this.setState({cat_name: &#39;바둑이&#39;});

      console.log(&#39;고양이 이름을 바꾼다!&#39;);
  }

  componentDidMount(){
    console.log(&#39;in componentDidMount!&#39;);
  }

  componentDidUpdate(prevProps, prevState){
      console.log(prevProps, prevState);
      console.log(&#39;in componentDidUpdate!&#39;);
  }

  componentWillUnmount(){
      console.log(&#39;in componentWillUnmount!&#39;);
  }

  // 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
  render() {

    console.log(&#39;in render!&#39;);

    return (
      &lt;div&gt;
          {/* render 안에서 컴포넌트의 데이터 state를 참조할 수 있습니다. */}
        &lt;h1&gt;제 고양이 이름은 {this.state.cat_name}입니다.&lt;/h1&gt;
        &lt;button onClick={this.changeCatName}&gt;고양이 이름 바꾸기&lt;/button&gt;
      &lt;/div&gt;
    );
  }
}

export default LifecycleEx;</code></pre>
<hr>
<h3 id="06시-생존기록">06시 생존기록</h3>
<blockquote>
<p>06:00 체력상태</p>
</blockquote>
<p><img src="https://images.velog.io/images/aaron_93/post/34cd0b10-8301-437f-83aa-fdf1cade3cbd/image.png" alt=""></p>
<p>살아남았다</p>
<hr>
<h3 id="후-기">후 기</h3>
<p>원래의 오늘 목표는 완강이었는데 강의를 보다보니 의외로 빵꾸 뚫려있던 부분들이 많이 거슬렸고 그 구멍들을 메우려고 하다보니 의외로 시간이 많이 걸렸다. 공부할 때 깊이있게 하려다보니 찾아봐야 할 자료도 많고 읽어볼것도 많다보니 진도가 잘 나가질 않았다. 그래서 중간에 강의를 빨리 보고 복습은 다시 하는것으로 방향을 틀었는데... 민영갓... 그녀는 도덕책... 압도적인 강의시간 덕분에 진도 빼는게 그렇게 녹록치 않았고 어쩌다보니 6시가 다 되었다.(까비)</p>
<p>그래도 좋은 점이 있었다면 은근히 내가 잘못 알고 있었다거나 완벽하게 이해하지 못했다던가 하는 부분을 캐치해 낼 수 있었다. </p>
<p>끝으로 같이 고생하신 우리 1조 404팀 팀원들 덕분에 정말 재미있었고 덕분에 밤샘 코딩이 지루하지 않았던 것 같다. 그리고 같이 밤샘해주신 스파르타 매니저 분들께도 깊은 감사의 말씀을 전하고싶다</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[TIL] 스코프 & 클로저]]></title>
            <link>https://velog.io/@aaron_93/TIL-%ED%81%B4%EB%A1%9C%EC%A0%80</link>
            <guid>https://velog.io/@aaron_93/TIL-%ED%81%B4%EB%A1%9C%EC%A0%80</guid>
            <pubDate>Fri, 28 May 2021 15:42:35 GMT</pubDate>
            <description><![CDATA[<h2 id="1-스코프--클로저">1. 스코프 &amp; 클로저</h2>
<h3 id="11-scope-범위"><strong>1.1. Scope (범위)</strong></h3>
<br>

<p><strong>1.1.1. 전역 변수</strong></p>
<ul>
<li>자바스크립트에서 제일 바깥 범위에 변수를 만드는 것 (window 객체에 변수를 만드는 것)</li>
</ul>
<blockquote>
<pre><code class="language-javascript">let scopr = &quot;global scope&quot; // 전역변수 할당</code></pre>
</blockquote>
<pre><code>
**1.1.2. 지역 변수**
  - 함수 내부에 선언된 변수

&gt;```javascript
function checkScope() {
    let scope = &quot;local scope&quot; // checkScope 함수 내에 지역변수 할당
}</code></pre><p><strong>1.1.3. 스코프</strong></p>
<ul>
<li>프로그램에서 어떤 변수가 정의도어 있는 영역</li>
<li>같은 이름을 같는 변수일 경우 지역 변수는 전역 변수에 우선</li>
</ul>
<blockquote>
<pre><code class="language-javascript">let scope = &quot;global&quot;;
function checkScope(){
  let scope = &quot;local&quot;;
  return scope;
}
checkScope()</code></pre>
</blockquote>
<pre><code>
&lt;br&gt;

### **1.2. 클로저 **
&lt;br&gt;

**1.2.1. 정의**

&gt; 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

-    함수가 정의된 시점의 변수 유효범위를 사용하여 함수가 실행
-    자신을 정의한 바깥쪽 함수에 바인딩된 지역 변수, 매개변수를 포착

&gt;```javascript
let scope = &quot;global&quot;;
function checkScope(){
  let scope = &quot;local scope&quot;;
  function f() { return scope;}
  return f();
}
checkScope()</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[자바스크립트] 변수와 타입 개괄]]></title>
            <link>https://velog.io/@aaron_93/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B3%80%EC%88%98%EC%99%80-%ED%83%80%EC%9E%85</link>
            <guid>https://velog.io/@aaron_93/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B3%80%EC%88%98%EC%99%80-%ED%83%80%EC%9E%85</guid>
            <pubDate>Tue, 11 May 2021 13:04:46 GMT</pubDate>
            <description><![CDATA[<h2 id="i-변수">I. 변수</h2>
<p><strong>1.  변수</strong></p>
<ul>
<li>데이터를 담기 위한 메모리 공간   </li>
</ul>
<p><strong>2. 변수의 선언</strong></p>
<p>A.  var</p>
<blockquote>
<p>var <em>varname</em> <em>value</em></p>
</blockquote>
<ul>
<li>초기 값을 지정하지 않는다면 변수는 값이 설정될 때까지 undifined 값을 갖게 된다.</li>
<li>한번에 여러개의 변수 선언 가능</li>
</ul>
<p>B.  let</p>
<blockquote>
<p>let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];</p>
</blockquote>
<ul>
<li>변수가 선언된 블록, 하위블록, 구문 또는 표현식 내에서만 유효</li>
</ul>
<p>C. 상수</p>
<blockquote>
<p>const <em>name value</em></p>
</blockquote>
<ul>
<li>스크립트가 실행 중인 동안 대입을 통해 값을 바꾸거나 재 선언될 수 없음</li>
<li>상수는 같은 범위에 있는 함수나 변수와 동일한 이름으로 선언할 수 없음</li>
<li>상수에 할당된 객체의 속성(property), 배열의 내용은 보호되지 않음</li>
</ul>
<h2 id="ii-타입">II. 타입</h2>
<p>** 1. 원시 타입 **</p>
<p>A. <strong>Boolean</strong> : 참/거짓
B. <strong>Null</strong> :  존재하지 않거나 유효하지 않은 객체 또는 주소를 의도적으로 가리키는 참조
C. <strong>undefined</strong> : 값이 할당되지 않은 속성
D. <strong>Number</strong> : 정수 or 실수형 숫자
E. <strong>String</strong> : 문자열
F. <strong>Symbol</strong> : 인스턴스가 고유하고 불변인 데이터 형</p>
<p>** 2. 참조 타입 **</p>
<p>원시타입을 제외한 모든 객체</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[그래프] 백준 9466 - 텀 프로젝트]]></title>
            <link>https://velog.io/@aaron_93/%EA%B7%B8%EB%9E%98%ED%94%84-%EB%B0%B1%EC%A4%80-9466-%ED%85%80-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8</link>
            <guid>https://velog.io/@aaron_93/%EA%B7%B8%EB%9E%98%ED%94%84-%EB%B0%B1%EC%A4%80-9466-%ED%85%80-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8</guid>
            <pubDate>Sun, 14 Feb 2021 01:11:54 GMT</pubDate>
            <description><![CDATA[<p>문제 주소 : <a href="https://www.acmicpc.net/problem/9466">https://www.acmicpc.net/problem/9466</a></p>
<blockquote>
<h3 id="디브리핑">디브리핑</h3>
</blockquote>
<ol>
<li>문제풀이 시간
 [] 20분 내로 풀이 완료
 [] 40분 내로 풀이 완료
 [] 1시간 내로 풀이 완료
 [] 2시간 내로 풀이 완료
 [] <strong>풀이 실패</strong></li>
</ol>
<blockquote>
<ol start="2">
<li>부족한 부분
 [] <strong>구현력</strong>
 [] 문제해결능력
 [] 배경지식</li>
</ol>
</blockquote>
<p><strong>[문제설명]</strong></p>
<p>이 문제는 간단하게 보자면 연결된 그래프가 몇개가 만들어지는가에 관한 문제이다. 
문제의 조건으로</p>
<ul>
<li>첫재줄에는 테스트 케이스의 갯수 T</li>
<li>둘째 줄에는 학생의 수 (2 &lt;= n &lt;= 100,000)</li>
<li>셋째 줄에는 선택된 학생들의 번호( 1 &lt; number &lt; 100,00)</li>
<li>이후로는 2,3 반복</li>
</ul>
<p>이렇게 주어진다.</p>
<p> <strong>[의사코드]</strong> </p>
<p> 처음 접근 방식은 학생들의 수 만큼의 선택된 학생들의 번호 리스트와 visited 리스트를 만든 후 처음 학생부터 끝까지 학생의 인덱스만큼 순회하여 해당 학생이 선택한 학생의 번호가 하나의 연결된 그래프가 형성되는지 알아보는 식을 구상하였으나 어떻게 구현해야할지 잘 감이 오지 않아서 다른 사람의 소스코드를 보고 분석하였다.</p>
<p> <strong>[소스코드]</strong></p>
<blockquote>
<p>원본 소스코드 주소 : <a href="https://suri78.tistory.com/128">https://suri78.tistory.com/128</a></p>
</blockquote>
<pre><code class="language-python">import sys

#  테스트 케이스 갯수
testcase = int(sys.stdin.readline())

#  테스트 케이스 갯수만큼 데이터 입력받음
for _ in range(testcase):            
    #  n = 총 학생의 수
    n = int(sys.stdin.readline())            
    # 선택된 학생의 리스트 choice와 방문여부를 저장하는 visited 리스트
    choice = [0] + list(map(int, sys.stdin.readline().split()))
    visited = [0] * (n + 1)

    # 연결된 그래프의 갯수
    group = 1
    # 총 학생의 수 만큼 순회
    for i in range(1, n + 1):
        # 만약 i번 학생의 선택지에 방문하지 않았다면(visited[i]가 0이라면)
        if visited[i] == 0:
            # visited[i]가 0일 때까지
            while visited[i] == 0:
                # i번쨰 학생 방문여부에 group변수의 값을 대입하고 
                visited[i] = group
                # i 를 i번쨰 학생이 선택한 학생의 번호로 바꾼다.
                i = choice[i]
               #만약 visited[i]가 group 변수와 같다면
            while visited[i] == group:
                # visited[i]를 -1로 바꿔주고
                visited[i] = -1
                # i를 i번째 학생이 선택한 학생의 번호로 바꾼다.
                i = choice[i]
            #그리고 group 변수의 값에 1을 추가한다.
            group += 1

    # 총 이어진 그래프의 갯수를 담을 count 변수
    count = 0
    #방문 리스트를 모두 돌아
    for v in visited:
        # 만약 리스트 값이 0보다 크다면 (즉 이어진 그래프가 되었다면)
        if v &gt; 0:
           # count 변수에 1을 추가
            count += 1
   # 카운트 변수 출력
    print(count)</code></pre>
<p>이번 문제는 연결된 그래프의 갯수를 세는 것이 주된 풀이 방법이다. 위의 코드에서 group변수와 visited리스트를 통해 해당 인덱스 번째의 학생이 고른 학생과 골라진 학생이 고른 또다른 학생 ... 그리고 제일 마지막 학생이 고른 학생의 번호가 제일 첫번쨰 고른 학생의 번호라면, (간단히 말해서 순회를 다 돌았는데 처음 시작점으로 돌아왔다면) 해당 연결들은 하나의 연결된 그래프를 이루게 되기 때문에 같은 group  변수값을 대입받고, 만약 이어지지 않는다면 해당 연결들은 연결된 그래프를 형성하지 않기 때문에 group 변수의 값에 1을 추가해서 다음 그래프를 찾을 때 혼선을 줄이는 것이다. 또한 이어진 그래프들은 전부 0보다 큰  group 변수 값을 대입받았기 떄문에 -1을 대입받은 이어지지 않은 그래프들의 숫자만 구해준다면 이 문제의 정답을 도출할 수 있다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[CS50 - 코칭스터디 2주차]]></title>
            <link>https://velog.io/@aaron_93/CS50-%EC%BD%94%EC%B9%AD%EC%8A%A4%ED%84%B0%EB%94%94-2%EC%A3%BC%EC%B0%A8</link>
            <guid>https://velog.io/@aaron_93/CS50-%EC%BD%94%EC%B9%AD%EC%8A%A4%ED%84%B0%EB%94%94-2%EC%A3%BC%EC%B0%A8</guid>
            <pubDate>Fri, 22 Jan 2021 07:45:08 GMT</pubDate>
            <description><![CDATA[<p>수강기간 2021.01.18. ~ 01.22.</p>
<blockquote>
<p><strong>2주차. C언어</strong></p>
</blockquote>
<h3 id="i-c-기초">I. C 기초</h3>
<pre><code>1. C언어
    - 순수 텍스트 기반 언어</code></pre><pre><code class="language-c">    - int main(void) {} // 메인함수, 
                 // 작성할 코드를 중괄호 안에 작성</code></pre>
<pre><code class="language-c">    - prinf(&quot;hello world\n&quot;); // 프린트 함수, \n : 줄바꿈
                  // 문장이 끝나면 세미콜론</code></pre>
<pre><code class="language-c">    - #include &lt;stdio.h&gt; // 헤더파일, 표준입출력 라이브러리</code></pre>
<pre><code>2. 컴파일러

    - 우리가 작성한 소스 코드를 2진수로 작성된 머신코드로 바꿔주는 프로그램
    - 커맨드 : clang 파일명.c
    - 컴파일된 파일 실행 커맨드 : ./파일명 (맨 앞 .은 현재 폴더를 의미)</code></pre><h3 id="ii-문자열">II. 문자열</h3>
<pre><code>1. 문자열

    - 문자들의 집합
    - get_string (cs50 샌드박스)
    - char : 1바이트 문자
    - %s = 문자열 형식의 형식지정자</code></pre><h3 id="iii-조건문과-루프">III. 조건문과 루프</h3>
<pre><code>1.  조건문

    - 특정 코드가 특정 상황에서만 실행되도록 의사결정 하는 코드
    - bool 연산식
    - 조건분기 (if문, switch, 3항 연산자 등)</code></pre><h3 id="iv-자료형-형식-지정자-연산자">IV. 자료형, 형식 지정자, 연산자</h3>
<pre><code>1. 데이터 타입

    - bool : True/False, Yes/No, 1/0
    - Char : 문자 하나 (1바이트)
    - string : 문자열
    - int : 특정 크기 또는 특정 비트까지의 정수 (eg. 5, 28, -3 등)
    - float : 부동소수점을 갖는 실수(eg. 3.14, 0.0 등)
    - double : 부동소수점을 포함한 더 큰 실수

2. 형식 지정자

    - %c : char
    - %f : float, double
    - %i : int
    - %li : long
    - %s : string

3. 논리 연산자
       + : 더하기
       - : 빼기
       * : 곱하기
       / : 나누기
       % : 나머지
       &amp;&amp; : and
      \\ : or
      // : 주석</code></pre><h3 id="v-사용자-정의-함수">V. 사용자 정의 함수</h3>
<pre><code>1. 함수 만들기</code></pre><pre><code class="language-c">     void cough(void)        // void 함수명(void) : 기침 함수 만들기
     {
     printf(&quot;cough\n&quot;)
     }                </code></pre>
<pre><code>- 주의 : 새로운 함수를 만들고 나서 항상 제일 처음에 함수이름을 써 두어야
나중에 실행할 떄 오류가 나지 않음</code></pre><pre><code class="language-c">#include &lt;stdio.h&gt;

void cough(void);  //  미리 함수를 언급해야 나중에 해당 함수가 나와도 실행할 수 있음

int main(void)
{
    for (int i = 0; i &lt; 3; i++)
    {
        cough();
    }
}

void cough(void)
{
    printf(&quot;cough\n&quot;);
}</code></pre>
<pre><code>- 함수의 기본 형식(c언어) : 출력형식 함수이름(입력형식){}


2. 중첩 루프
    - do while 문</code></pre><h3 id="vi-하드웨어의-한계">VI. 하드웨어의 한계</h3>
<pre><code>RAM에는 유한한 크기의 비트만 저장할 수 있기 때문에 떄때로 부정확한 결과 나옴

    1. 부동소수점 부정확성
        2. 정수 오버플로우 

따라서 다루고자 하는 데이터 값의 범위를 유의하여 프로그램을 작성하여야 함</code></pre><blockquote>
<p><strong>디브리핑</strong></p>
</blockquote>
<p>파이썬으로도 문제를 풀 때 항상 얼마나 많은 메모리를 쓰는지, 얼마나 효율적인지 잘 생각하지 않고 문제를 풀곤 하였다. 이번 기회를 통해 내가 작성한 코드가 얼마나 메모리를 잡아먹는지 얼마나 효율적인지 생각해 봐야겠다는 생각이 들었다. </p>
]]></description>
        </item>
        <item>
            <title><![CDATA[CS50 - 코칭스터디 1주차]]></title>
            <link>https://velog.io/@aaron_93/CS50-%EC%BD%94%EC%B9%AD%EC%8A%A4%ED%84%B0%EB%94%94-1%EC%A3%BC%EC%B0%A8</link>
            <guid>https://velog.io/@aaron_93/CS50-%EC%BD%94%EC%B9%AD%EC%8A%A4%ED%84%B0%EB%94%94-1%EC%A3%BC%EC%B0%A8</guid>
            <pubDate>Fri, 22 Jan 2021 06:44:04 GMT</pubDate>
            <description><![CDATA[<p>수강기간 2021.01.11. ~ 01.15.</p>
<blockquote>
<p><strong>1주차. 컴퓨팅사고</strong></p>
</blockquote>
<h4 id="i-2진법">I. 2진법</h4>
<pre><code>1. 컴퓨터 과학

    - 문제 해결에 대한 학문
    - 문제 해결 = 입력을 전달받아 출력을 만들어내는 과정

2. 2진법

    - 0과 1로만 데이터를 표현하는 방법
    - 트렌지스터를 통해 on/off (0/1)을 표현

3. 비트
        - 측정 단위
        - 0,1 두 가지 값만 가질 수 있음
        - 8 비트 = 1 바이트</code></pre><h4 id="ii-정보의-표현">II. 정보의 표현</h4>
<pre><code>1. 문자의 표현

        - ASCII 코드
        - Unicode

2. 그림, 영상, 음악의 표현

        - RGB : 픽셀을 통해 표현(각 픽셀마다 RGB 색상의 비율을 달리하여 색을 표현)
        - 영상 : 그림을 빠르게 연속적으로 이어 붙여놓은 것
        - 음악 : 아날로그 신호 -&gt; 디지털로 표본, 양자, 부호화를 거쳐 숫자로 표현</code></pre><h4 id="iii-알고리즘">III. 알고리즘</h4>
<pre><code>1.  알고리즘

        - 입력에서 받은 자료를 출력형태로 만드는 처리과정
        - 규칙들의 순서적 나열
        - 정확성, 효율성

2. 의사코드

        - 필요한 행동이나 조건을 설정하여 컴퓨터가 수행해야 하는 일을 절차적으로
        파악할 수 있게 도와줌</code></pre><blockquote>
<p><strong>디브리핑</strong></p>
</blockquote>
<p>   기본적인 컴퓨터공학(?) 의 내용을 짚어볼 수 있어서 아주 좋았던 강의. 처음 파이썬을 배웠을 때에는 그저 코드 따라치고 형식 외우기에 급급했었던지라 가장 기본적인 자료구조, 알고리즘 등에 대한 지식이 부족했는데 아주 조금은 기반을 쌓을 수 있었다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[파이썬 알고리즘]]></title>
            <link>https://velog.io/@aaron_93/%ED%8C%8C%EC%9D%B4%EC%8D%AC-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98</link>
            <guid>https://velog.io/@aaron_93/%ED%8C%8C%EC%9D%B4%EC%8D%AC-%EC%95%8C%EA%B3%A0%EB%A6%AC%EC%A6%98</guid>
            <pubDate>Fri, 22 Jan 2021 05:42:03 GMT</pubDate>
            <description><![CDATA[<p>코딩 테스트를 준비하며 풀어본 알고리즘 문제들을 정리한 시리즈</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[CS50 - Preamble]]></title>
            <link>https://velog.io/@aaron_93/%EC%B4%88%EB%B3%B4%EC%9D%98-%EC%B4%88%EB%B3%B4%EC%97%90-%EC%9D%98%ED%95%9C-%EC%B4%88%EB%B3%B4%EB%A5%BC-%EC%9C%84%ED%95%9C-CS50</link>
            <guid>https://velog.io/@aaron_93/%EC%B4%88%EB%B3%B4%EC%9D%98-%EC%B4%88%EB%B3%B4%EC%97%90-%EC%9D%98%ED%95%9C-%EC%B4%88%EB%B3%B4%EB%A5%BC-%EC%9C%84%ED%95%9C-CS50</guid>
            <pubDate>Fri, 22 Jan 2021 05:33:55 GMT</pubDate>
            <description><![CDATA[<p>부스트코스 2기 활동을 하면서 배운 내용을 정리해둔 시리즈</p>
]]></description>
        </item>
    </channel>
</rss>