<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>Hey_Jude.log</title>
        <link>https://velog.io/</link>
        <description>이제 막 개발을 시작한 프로그래밍 입문자</description>
        <lastBuildDate>Fri, 13 Aug 2021 06:40:14 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <copyright>Copyright (C) 2019. Hey_Jude.log. All rights reserved.</copyright>
        <atom:link href="https://v2.velog.io/rss/hey_jude" rel="self" type="application/rss+xml"/>
        <item>
            <title><![CDATA[클라우드 서버]]></title>
            <link>https://velog.io/@hey_jude/%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C-%EC%84%9C%EB%B2%84</link>
            <guid>https://velog.io/@hey_jude/%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C-%EC%84%9C%EB%B2%84</guid>
            <pubDate>Fri, 13 Aug 2021 06:40:14 GMT</pubDate>
            <description><![CDATA[<p>서버개발을 함에 있어 서버구성은 클라우드서버와 하드웨어적인 물리서버로 나눌 수 있다.</p>
<p><strong>클라우드</strong>
클라우드 서버란 하나의 무리적 서버를 나누어 여러개의 가상서버로 사용하는 가상화 방법의 한 형태이다.
즉, 하나의 물리적 장치를 소프트웨어적인 방법으로 나누어 사용자에게 할당하는 방법을 말한다.</p>
<p><strong>클라우드의 장단점</strong></p>
<ul>
<li><p>샌드박스
<a href="https://www.itworld.co.kr/news/90280">https://www.itworld.co.kr/news/90280</a></p>
</li>
<li><p>정량적, 정성적 장점
<a href="https://www.samsungsds.com/kr/story/cloud_210226.html">https://www.samsungsds.com/kr/story/cloud_210226.html</a></p>
</li>
<li><p>기타 등등</p>
</li>
<li><p><em>클라우드 단점*</em></p>
</li>
<li><p>블랙박스
<a href="https://www.samsungsds.com/kr/story/cloud_210226.html">https://www.samsungsds.com/kr/story/cloud_210226.html</a></p>
</li>
<li><p>트러블 발생시 트러블 슈팅이 어렵다.</p>
<blockquote>
<p>트러블 슈팅이란?
시스템이나 장치 등에서 발생한 장애의 원인과 문제원인 등을 찾아내는 것을 말한다.
시스템에서 발생하는 복잡한 문제들을 종합적으로 진단해 처리하는 것을 뜻한다.
출처: <a href="https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&amp;blogId=sung_mk1919&amp;logNo=221171218141">https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&amp;blogId=sung_mk1919&amp;logNo=221171218141</a></p>
</blockquote>
</li>
</ul>
<hr>
<p><strong>온프레미스 장점</strong></p>
<ul>
<li>스스로 설비를 보유하여 시스템을 운용관리</li>
<li>원하는 방식으로 구성 가능</li>
<li>트러블 발생시 원인파악 용이</li>
</ul>
<p><strong>온프레미스 단점</strong></p>
<ul>
<li>설비 및 구축과 조달에 많은 시간이 든다</li>
<li>운영 및 인프라 관리에 비용이 많이 든다</li>
<li>끊임없는 데이터 보호를 위한 모니터링이 필요</li>
</ul>
<hr>
<h2 id="참조">참조</h2>
<p>1.<a href="https://ryufree.tistory.com/175">https://ryufree.tistory.com/175</a>
2.<a href="https://www.itworld.co.kr/news/90280">https://www.itworld.co.kr/news/90280</a>
3.<a href="https://library.gabia.com/contents/infrahosting/3864/">https://library.gabia.com/contents/infrahosting/3864/</a>
4.<a href="https://qmffor09.tistory.com/54">https://qmffor09.tistory.com/54</a>
5.<a href="https://velog.io/@minidoo/%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C-%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9CCloud%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C">https://velog.io/@minidoo/%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9C-%ED%81%B4%EB%9D%BC%EC%9A%B0%EB%93%9CCloud%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%BC%EA%B9%8C</a>
6.<a href="samsungsds.com/kr/story/cloud_210226.html">samsungsds.com/kr/story/cloud_210226.html</a>
7.<a href="https://www.vmware.com/kr/topics/glossary/content/cloud-server.html">https://www.vmware.com/kr/topics/glossary/content/cloud-server.html</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[TypeScript의 장점]]></title>
            <link>https://velog.io/@hey_jude/TypeScript%EC%9D%98-%EC%9E%A5%EC%A0%90</link>
            <guid>https://velog.io/@hey_jude/TypeScript%EC%9D%98-%EC%9E%A5%EC%A0%90</guid>
            <pubDate>Fri, 13 Aug 2021 05:20:19 GMT</pubDate>
            <description><![CDATA[<h2 id="1-자바스크립트의-역사">1. 자바스크립트의 역사</h2>
<p>1995년 넷스케이프사의 브랜던 아이크(Brendan Eich)가 자사의 웹브라우저인 Navigator 2에 탑재하기 위해서 개발한 스크립트 언어이다.
웹페이지의 보조적인 기능 수행을 위한 한정적인 용도로 사용되었으며, 이 시기에 대부분 로직은 주로 웹서버에서 실행되었고 브라우저(클라이언트)는 서버로부터 전달받은 HTML과 CSS를 렌더링하는 수준이였다.</p>
<p>HTML5가 나오기 이전에는 플러그인에 의존하는 인터랙티브한 웹페이지를 구축해왔지만 HTML5가 나오고 난 이후에 플러그인에 의존하는 방식은 자바스크립트로 대체되었다.
또한 AJAX의 활성화로 인한 SPA가 대세가 되었고, 과거 서버 측이 담당하던 업무의 많은 부분이 클라이언트 측으로 이동하게 되어 자바스크립트는 웹의 어셈블리 언어로 불릴 만큼 중요한 언어가 되었다.</p>
<hr>
<h2 id="2-자바스크립트와-c나-java같은-c-family언어와의-구별점">2. 자바스크립트와 C나 Java같은 C-family언어와의 구별점</h2>
<ul>
<li>Prototype-based Object Oriented Language</li>
<li>Scope와 this</li>
<li>동적 타입(dynamic typed)언어 혹은 느슨한 타입(loosely typed)언어</li>
</ul>
<hr>
<h2 id="3typescript">3.TypeScript</h2>
<p>위와 같은 특성으로 디버그와 테스트 공수가 증가하는 등의 문제를 일으킬 수 있어 특히 규모가 큰 프로젝트에서는 주의해야하기 때문에 태생적 문제를 극복하고자 C#의 창시자인 덴마크 출신 소프트웨어 엔지니어 <code>Anders Hejlsber(아네르스 하일스베르)</code>가 개발을 주도한 TypeScript는 Microsoft에서 2012년 발표한 오픈소스로 정적 타이핑을 지원하며 EX6(ECMAScript 2015)의 클래스, 모듈 등과 ES7의 Decorator 등을 지원한다.</p>
<p><img src="https://poiemaweb.com/img/typescript-superset.png" alt="TypeScript 그림"></p>
<p>출처: <a href="https://poiemaweb.com/typescript-introduction">https://poiemaweb.com/typescript-introduction</a></p>
<hr>
<h2 id="4typescript의-장점">4.TypeScript의 장점</h2>
<ul>
<li>기존 자바스크립트(ES5)문법을 그대로 사용가능</li>
<li>ES6의 새로운 기능들을 사용하기 위한 Babel과 같은 별도 트랜스파일러를 사용하지 않아도 실행가능</li>
<li>정적인 타입</li>
<li>자바스크립트는 런타임에 동적으로 검사하기에 프로그램 실행전에는 타입에러를 잡을 수 없지만 타입스크립트는 이런 문제를 만들기 전에(런타임 이전에)타입을 검사할 수 있게 만들어졌다.</li>
<li>도구의 지원<blockquote>
<p>IDE(통합개발환경)를 포함한 다양한 도구의 지원을 받을 수 있다. IDE와 같은 도구에 타입 정보를 제공함으로써 높은 수준의 인텔리센스, 코드 어시스트, 타입체크, 리팩토링 등을 지원받을 수 있으며 도구의 지원은 대규모 프로젝트를 위한 필수 요소이기도 하다.</p>
</blockquote>
</li>
<li>강력한 객체지향 프로그래밍 지원<blockquote>
<p>인터페이스, 제너릭 등과 같은 강력한 객체지향 프로그래밍 자원은 크고 복잡한 프로켁트의 코드 기반을 쉽게 구성할 수 있도록 도우며 클래스기반 객체지향 언어에 익숙한 개발자의 진입장벽을 낮추는 효과가 있다.</p>
</blockquote>
</li>
<li>ES6 / ES Next지원<blockquote>
<p>ES6를 완전히 지원하지 않는 브라우저를 고려할 때 다른 트랜스파일러를 사용하지 않고 개발환경을 구축할 수 있다는 장점이 있다.
또한 TypeScript는 아직 ECMAScript 표준에 포함되지는 않았지만 표준화가 유력한 스펙을 선제적으로 도입하므로 새로운 스펙의 유용한 기능을 안전하게 도입하기에 유리하다.</p>
</blockquote>
</li>
<li>Angular<blockquote>
<p>TypeScript 뿐만 아니라 자바스크립트, Dart로도 작성가능하지만 Angualr 문서, 커뮤니티 활동에서 가장 많이 사용되고 있는 것은 TypeScript이다.</p>
</blockquote>
</li>
</ul>
<p><strong>정적인 타입의 예</strong></p>
<pre><code class="language-javascript">function sum(a, b) {
return a + b;
}

sum(&#39;x&#39;, &#39;y&#39;) //&#39;xy&#39;</code></pre>
<p>위와 같이 자바스크립트의 경우 코드상으로 어떤 타입의 인수를 전달하여야 하는지, 어떤 타입의 반환값을 리턴해야 하는지 명확하지 않다.
자바스크립트의 문법에서는 어떠한 문제가 없으므로 위 코드가 실행될 것이다.
이러한 상황이 발생한 이유는 변수나 반환값으미 타입을 사전에 지정하지 않는 자바스크립트의 동적 타이핑(Dynamic Typing)에 의한 것이다.</p>
<pre><code class="language-typescript">function sum(a: number, b: number) {
return a + b;
}

sum(&#39;x&#39;, &#39;y&#39;);
// error TS2345: Argument of type &#39;&quot;x&quot;&#39; is not assignable to parameter of type &#39;number&#39;.</code></pre>
<p>TypeScript는 정적 타입을 지원하므로 컴파일 단계에서 오류를 포착할 수 있다는 장점이 있다. 명시적인 정적 타입 지정은 개발자의 의도를 명확하게 코드로 기술할 수 있다. 이는 코드의 가독성을 높이고 예측할 수 있게 하며 디버깅을 쉽게 한다.</p>
<p>출처: <a href="https://poiemaweb.com/typescript-introduction">https://poiemaweb.com/typescript-introduction</a></p>
<p><strong>타입 선언</strong></p>
<pre><code class="language-javascript">function CheckNumberIsZero(par){
return par == 0;
}

checkNumberIsZero(0); //true
checkNumberIsZero([]); //true
checkNumberIsZero(&quot;&quot;); // true
checkNumberIsZero(false); //true
checkNumberIsZero(this); //? (this에 따라 달라진다.)</code></pre>
<p>위와 같이 자바스크립트에서 <code>checkNumberIsZero()</code>함수는 인자의 타입을 제한하지 않아 아무 타입이나 인자로 쓸 수 있고, 비교 부분에서는 강제 형변환을 해서 예기치 않았던 동작이 발생한다.</p>
<pre><code class="language-typescript">function checkNumberIsZero(par: number): boolean {
return par === 0;
}

checkNumberIsZero(0); //true
checkNumberIsZero([]); // error
checkNumberIsZero(&quot;&quot;); // error
checkNumberIsZero(false); // error
checkNumberIsZero(this); // error</code></pre>
<p>이와 같이 타입스크립트로 작성이 가능하다.</p>
<p>출처: <a href="https://medium.com/humanscape-tech/typescript%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-9aa69737212a">휴먼스케이프 기술 블로그</a></p>
<hr>
<h2 id="출처">출처</h2>
<p>1.<a href="https://poiemaweb.com/typescript-introduction">https://poiemaweb.com/typescript-introduction</a>
2.<a href="https://medium.com/humanscape-tech/typescript%EB%A5%BC-%EC%82%AC%EC%9A%A9%ED%95%98%EB%8A%94-%EC%9D%B4%EC%9C%A0-9aa69737212a">휴먼스케이프 기술 블로그</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[Express, Koa, fastify 각각의 특징]]></title>
            <link>https://velog.io/@hey_jude/Express-Koa-fastify-%EA%B0%81%EA%B0%81%EC%9D%98-%ED%8A%B9%EC%A7%95</link>
            <guid>https://velog.io/@hey_jude/Express-Koa-fastify-%EA%B0%81%EA%B0%81%EC%9D%98-%ED%8A%B9%EC%A7%95</guid>
            <pubDate>Thu, 12 Aug 2021 16:39:00 GMT</pubDate>
            <description><![CDATA[<h2 id="1-express">1. Express</h2>
<ul>
<li>프레임워크 점유율 1위</li>
<li>정보가 많고 이용자도 많다</li>
<li>속도가 느려 고성능(하이 퍼포먼스)을 요구하는 개발에 부적합</li>
<li><code>Js의 비동기 처리 기능</code>, <code>제너레이터(Generator)함수</code>, <code>async/await</code>에 대응하지 않아 수정이 필요
<a href="https://codingcoding.tistory.com/1318">코딩기록</a></li>
</ul>
<blockquote>
<p>제너레이터 함수란?
ES6에 도입된 제너레이터(Generator)함수는 이터러블을 생성하는 함수이다. 제너레이터 함수를 사용하면 이터레이션 프로토콜을 준수해 이터러블을 생성하는 방식보다 간편하게 이터러블을 구현하 ㄹ수 있다. 또한 제너레이터 함수는 비동기 처리에 유용하게 사용한다.
<a href="https://poiemaweb.com/es6-generator">https://poiemaweb.com/es6-generator</a></p>
</blockquote>
<blockquote>
<p>이터러블 및 이터러블 프로토콜이란?
이터러블 프로토콜을 준수한 객체를 이터러블이라 한다. 이터러블은 Symble.iterator 메소들르 구현하거나 프로토타입 체인에 의해 상속한 객체를 말한다.
Symbol.iterator 메소드는 이터레이터를 반환한다. 이터러블은 for...of문에서 순회할 수 있으며 Spread 문법의 대상으로 사용할 수 있다.
배열은 Symbol.iterator 메소드를 소유한다. 따라서 배열은 이터러블 프로토콜을 준수한 이터러블이다.
<a href="https://poiemaweb.com/es6-iteration-for-of">https://poiemaweb.com/es6-iteration-for-of</a></p>
</blockquote>
<hr>
<h2 id="2-koa">2. Koa</h2>
<ul>
<li>Node.js에서 가장 인기있던 웹 프레임워크인 Express.js의 개발팀이 만든 웹프레임워크이다.</li>
<li>Express와의 큰 차이는 Koa는 훨씬 가볍고(속도가 빠르다) Node.js v7의 <code>async/await</code>기능을 아주 편하게 사용할 수 있다.</li>
<li>Fastify보다 점유율이 높다.</li>
<li>v1에서 <code>제너레이터 함수</code>, v2에서 <code>async/await</code>를 지원하고 Express보다 모던(현대적인)한 개발 환경을 지원.
<a href="https://codingcoding.tistory.com/1318">코딩기록</a>
<a href="https://backend-intro.vlpt.us/1/">velopert</a></li>
</ul>
<hr>
<h2 id="3-fastify">3. Fastify</h2>
<ul>
<li>프레임워크 중 성능이 가장 높음</li>
<li>점유율이 낮고 정보가 적다.</li>
<li><code>async/await</code>기능 대응</li>
<li><code>JSON Schema</code>에 의한 검증 기능이 있다.</li>
<li>퍼포먼스(성능)를 강조하다보니 비교적 세밀한 기능이 있다.
<a href="https://codingcoding.tistory.com/1318">코딩기록</a></li>
</ul>
<hr>
<h2 id="이-이외에-각-프레임워크의-자세한-비교">이 이외에 각 프레임워크의 자세한 비교</h2>
<p>프레임워크의 각 성능에 대한 비교는 아래의 주소에 자세히 정리되어 있음으로 가보면 도움이 될 것 같다.
<a href="https://codingcoding.tistory.com/1318">코딩기록</a></p>
<hr>
<h2 id="참조">참조</h2>
<p>1.<a href="https://codingcoding.tistory.com/1318">코딩기록</a>
2.<a href="https://poiemaweb.com/es6-generator">https://poiemaweb.com/es6-generator</a>
3.<a href="https://poiemaweb.com/es6-iteration-for-of">https://poiemaweb.com/es6-iteration-for-of</a>
4.<a href="https://backend-intro.vlpt.us/1/">velopert</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[관계형 데이터와 NoSQL]]></title>
            <link>https://velog.io/@hey_jude/%EA%B4%80%EA%B3%84%ED%98%95-%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%99%80-NoSQL</link>
            <guid>https://velog.io/@hey_jude/%EA%B4%80%EA%B3%84%ED%98%95-%EB%8D%B0%EC%9D%B4%ED%84%B0%EC%99%80-NoSQL</guid>
            <pubDate>Thu, 12 Aug 2021 16:05:29 GMT</pubDate>
            <description><![CDATA[<h2 id="database-dbms-sql-nosql">Database, DBMS, SQL, NoSQL</h2>
<ul>
<li><p>Database(데이터베이스 및 DB): 여러 사람이 공유하여 사용할 목적으로 체계화해 통합, 관리하는 데이터의 집합. 작성된 목록으로써 여러 응용 시스템들의 통합된 정보들을 저장하여 운영할 수 있는 공용 데이터들의 묶음이다.
<a href="https://ko.wikipedia.org/wiki/%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4">Database</a></p>
</li>
<li><p>DBMS(데이터베이스 관리 시스템 및 Database Management System): 다수의 사용자들이 데이터베이스 내의 데이터를 접근할 수 있도록 해주는 소프트웨어 도구의 집합이다. DBMS는 사용자 또는 다른 프로그램의 요구를 처리하고 적절히 응답하여 데이터를 사용할 수 있도록 해준다.
<a href="https://ko.wikipedia.org/wiki/%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4_%EA%B4%80%EB%A6%AC_%EC%8B%9C%EC%8A%A4%ED%85%9C">DBMS</a></p>
</li>
<li><p>SQL(구조화 질의어 및 Structured Query Language): 관계형 데이터베이스 관리시스템(RDBMS)의 데이터를 관리하기 위해 설계된 특수 목적의 프로그래밍 언어이다.
관계형 데이터 베이스 관리 시스템에서 1. 자료의 검색과 관리, 2. 데이터베이스 스키마 생성과 수정, 3.데이터베이스 객체 접근 조정 관리를 위해 고안되었다. 
<a href="https://ko.wikipedia.org/wiki/SQL">SQL</a></p>
</li>
<li><p>RDBMS(관계형 데이터베이스)
관계형 데이터베이스에 대해서는 아래의 글을 통해서 볼 수 있다.
<a href="https://velog.io/@hey_jude/ORM">ORM</a></p>
</li>
<li><p>NoSQL(Not Only SQL)
NoSQL는 관계형 데이터베이스가 아닌 다른 형태의 데이터 저장 기술을 의미한다. 
NoSQL의 특성</p>
<ul>
<li>RDBMS와 달리 테이블 간 관계를 정의하지 않는다.</li>
<li>테이블 간의 관계를 정의하지 않기 때문에 일반적으로 테이블 간 Join도 불가능하다.</li>
<li>빅데이터의 등장으로 인한 데이터와 트래픽의 기하급수적인 증가에 따라서 RDBMS의 단점인 성능향상을 위해 장비가 좋아야 하는 Scale-Up의 특징이 비용을 기하급수적으로 증가시키기 때문에 데이터 일관성을 포기하되 비용을 고려하여 여러 대의 데이터에 분산하여 저장하는 Scale-Out을 목표로 등장</li>
<li>다양한 형태의 저장기술로 RDBMS 스키마에 맞추어 데이터를 관리해야 된다는 한계를 극복하고 수평적 확장성(Scale-Out)을 쉽게 할 수 있다는 장점을 가지고 있다.</li>
</ul>
</li>
</ul>
<hr>
<h2 id="rdbms와-nosql의-장단점">RDBMS와 NoSQL의 장단점</h2>
<p><strong>RDBMS</strong>
장점</p>
<ul>
<li>RDBMS는 정해진 스키마에 따라 데이터를 저장해야 하기 때문에 명확한 데이터 구조를 보장한다.</li>
<li>관계는 각 데이터를 중복없이 한 번만 저장할 수 있다.</li>
</ul>
<p>단점</p>
<ul>
<li>테이블과 테이블 간 관계를 맺고 있어 시스템이 커질 경우 Join문이 많은 복잡한 쿼리가 만들어질 수 있다.</li>
<li>성능 향상을 위해서는 서버의 성능 향상을 시켜줘야하는 Scale-Up만을 지원하고, 이에 따른 비용이 기하급수적으로 늘어날 수 있다.</li>
<li>스키마로 인해 데이터가 유연하지 못하기에 후에 스키마가 변경될 경우 복잡해질 수 있다.</li>
</ul>
<p><strong>NoSQL</strong>
장점</p>
<ul>
<li>NoSQL에서는 스키마가 없기 때문에 유연하며 자유로운 데이터 구조를 가질 수 있다. 언제든 저장된 데이터를 조정하고 새로운 필드를 추가할 수 있다.</li>
<li>데이터 분산이 용이하며 성능 향상을 위한 Scale-Up뿐만 아니라 Scale-Out도 가능하다.</li>
</ul>
<p>단점</p>
<ul>
<li>데이터 중복이 발생할 수 있으며 중복된 데이터가 변경될 경우 모든 컬렉션에서 수정해야 한다.</li>
<li>스키마가 존재하지 않기 때문에 명확한 데이터 구조를 보장하지 않으며 데이터 구조 결정이 어려울 수 있다.
<a href="https://khj93.tistory.com/entry/Database-RDBMS%EC%99%80-NOSQL-%EC%B0%A8%EC%9D%B4%EC%A0%90">허진쓰의 서버사이드 기술 블로그</a></li>
</ul>
<hr>
<h2 id="스키마">스키마</h2>
<p>데이터베이스 스키마
컴퓨터 과학에서 데이터베이스 스키마(database schema)는 데이터베이스에서 자료의 구조, 자료의 표현 방법, 자료 간의 관계를 형식 언어로 정의한 구조이다. 데이터베이스 관리 시스템(DBMS)이 주어진 설정에 따라 데이터베이스 스키마를 생성하며, 데이터베이스 사용자가 자료를 저장, 조회, 삭제, 변경할 때 DBMS는 자신이 생성한 데이터베이스 스키마를 참조하여 명령을 수행한다.</p>
<blockquote>
<p>스키마는 3층 구조로 되어있다.</p>
</blockquote>
<ul>
<li>외부 스키마(External Schema): 프로그래머나 사용자의 입장에서 데이터베이스의 모습으로 조직의 일부분을 정의한 것</li>
<li>개념 스키마(Conceptual Schema): 모든 응용 시스템과 사용자들이 필요로하는 데이터를 통합한 조직 전체의 데이터베이스 구조를 논리적으로 정의한 것</li>
<li>내부 스키마(Internal Schema): 전체 데이터베이스의 물리적 저장 형태를 기술한 것
<a href="https://ko.wikipedia.org/wiki/%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4_%EC%8A%A4%ED%82%A4%EB%A7%88">스키마</a></li>
</ul>
<hr>
<h2 id="출처">출처</h2>
<p>1.<a href="https://ko.wikipedia.org/wiki/%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4">Database</a>
2.<a href="https://ko.wikipedia.org/wiki/%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4_%EA%B4%80%EB%A6%AC_%EC%8B%9C%EC%8A%A4%ED%85%9C">DBMS</a>
3.<a href="https://ko.wikipedia.org/wiki/SQL">SQL</a>
4.<a href="https://khj93.tistory.com/entry/Database-RDBMS%EC%99%80-NOSQL-%EC%B0%A8%EC%9D%B4%EC%A0%90">허진쓰의 서버사이드 기술 블로그</a>
5.<a href="https://ko.wikipedia.org/wiki/%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4_%EC%8A%A4%ED%82%A4%EB%A7%88">스키마</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[ORM]]></title>
            <link>https://velog.io/@hey_jude/ORM</link>
            <guid>https://velog.io/@hey_jude/ORM</guid>
            <pubDate>Thu, 12 Aug 2021 06:16:33 GMT</pubDate>
            <description><![CDATA[<h1 id="1orm이란">1.ORM이란?</h1>
<ul>
<li>ORM(object Relational Mappping)</li>
<li>영속성</li>
<li>연관성</li>
</ul>
<hr>
<p><strong>ORM이란 무엇인가?</strong></p>
<p>ORM은 <code>Object Relational Mapping</code> 객체-관계 매핑으로 데이터베이스와 객체 지향 프로그래밍 언어 간의 호환되지 않는 데이터를 변환하는 프로그래밍 기법이다.
<a href="https://ko.wikipedia.org/wiki/%EA%B0%9D%EC%B2%B4_%EA%B4%80%EA%B3%84_%EB%A7%A4%ED%95%91">위키백과</a></p>
<p>단순하게 표현하자면, 객체와 관계와의 설정이라고 할 수 있는다. 여기서 ORM의 객체(Object)란 의미는 우리가 알고 있는 OPP(Object_Oriented Programming)의 그 객체를 의미한다는 것을 알 수 있고, 여기서 관계라는 것은 개발자가 흔히 사용하고 있는 관계형 데이터 베이스를 의미한다는 것이다.</p>
<blockquote>
<p>관계형 데이터 베이스(RDBMS)란?
<code>관계형 데이터</code>란 현재 가장 많이 사용하고 있는 방식의 데이터베이스의 형태로, 키(key)와 값(value)들의 간단한 관계를 테이블화 시킨 매우 간단한 원칙의 전산정보 데이터이다.
아래는 관계형 데이터베이스를 이해시키기 위한 이미지이다.</p>
</blockquote>
<p><img src="http://tcpschool.com/lectures/img_mysql_table.png" alt="관계형 데이터베이스의 그림"></p>
<p><a href="http://tcpschool.com/mysql/mysql_intro_relationalDB">출처: TCPschool.com</a></p>
<p><strong>ORM관련 대표용어</strong></p>
<ul>
<li>여기서 일부만 발췌했으며 나머지는 TCPschool.com 참조 홈페이지를 가보면 더 자세히 알 수 있습니다.</li>
</ul>
<ol>
<li><p>관계(relation)
테이블 간의 관계는 관계를 맺는 테이블의 수에 따라서 다음과 같이 나눌 수 있다.</p>
<ul>
<li>일대일 관계(one-to-one)</li>
<li>일대다 관계(one-to-many)</li>
<li>다대다 관계(many-to-many)</li>
</ul>
<p><img src="http://tcpschool.com/lectures/img_mysql_relationship.png" alt="관계에 대한 이미지">
<a href="http://tcpschool.com/mysql/mysql_intro_relationalDB">출처: TCPschool.com</a></p>
<p>관계형 데이터베이스에서는 앞서 설명한 관계를 나타내기 위해 외래 키(foreign key)라는 것을 사용한다.
외래 키는 한 테이블의 키 중에서 다른 테이블의 행(row)을 식별할 수 있는 키를 의미한다.</p>
<ol start="2">
<li>스키마(schema)
스키마는 테이블을 디자인하기 위한 청사진이라고 할 수 있다.
이러한 스키마는 테이블의 각 열에 대한 항목과 타입뿐만 아니라 기본 키와 외래 키도 나타내야 한다.</li>
</ol>
</li>
</ol>
<hr>
<p> <strong>ORM사용 이유와 장점 및 단점</strong></p>
<p> <strong>ORM사용이유</strong>
  어떤 문제로 인해서 <code>객체와 관계형 데이터 베이스</code>간의 매핑을 지원해주는 framework나 Tool들이 나오는 것일까에 대한 질문에 대해서 ORM framework나 도구가 없던 시절에도 OPP를 하면서 객체와 관계형 데이터베이스를 잘 사용하고 있었지만 &quot;Back to basics(기본에 충실하자)&quot;을 지키기 위해서이며 보다 OPP다운 프로그래밍을 하자는데부터 출발한 것이다.</p>
<p>  여기서 문제점은 관련된 정보들을 객체에 담아 보관하게 되며, 추가적으로 저장될 객체들이 연결될 것이다. 이렇게 생성한 객체를 영구적으로 저장하기 위해 파일이나 데이터베이스에 입력한다는 것은 객체와 그와 연결된 객체들을 데이터베이스의 테이블에 저장한다는 것을 의미한다. 즉, 테이블(table)에 객체가 가지고 있던 정보를 입력하고, 이테이블들을 SQL질의어를 통해 관계 설정을 해주게 된다. 여기서 테이블과 객체간의 이질성이 발생하게 된다는 것이다.</p>
<p> <strong>장점</strong>
 1.객체 지향적인 코드로 인해 더 직관적이다.</p>
<ul>
<li>선언문, 할당, 종료 같은 부수적인 코드가 없거나 급격히 줄어든다.</li>
<li>각종 객체에 대한 코드를 별도로 작성하기 때문에 코드의 가독성을 올려준다.</li>
<li>SQL의 절차적이고 순차적인 접근이 아닌 객체 지향적인 접근으로 인해 생산성이 증가한다.</li>
</ul>
<p> 2.재사용 및 유지보수의 편리성이 증가한다.</p>
<ul>
<li>ORM은 독립적으로 작성되고 있고, 해당 객체들을 재활용 할 수 있다.</li>
<li>때문에 모델에서 가공된 데이터를 컨트롤러에 의해 뷰와 합쳐지는 형태로 디자인 패턴을 견고하게 다지는데 유리하다.</li>
<li>매핑정보가 명확하여, ERD를 보는 것에 대한 의존도를 낮출 수 있다.<blockquote>
<p>ERD(Entity Relation Diagram)란?
ERD는 말로 되어있는 요구분석사항을 그림으로 그려내어 그 관계를 도출하는 것이다.
데이터 모델링 분야에서 &quot;개체-관계 모델(Entity Relationship Model)&quot;이란 구조화된 데이터에 대한 일련의 표현이다.
&quot;구조&quot;화된 데이터를 저장하기 위해 데이터베이스를 사용하고 이 데이터의 &quot;구조&quot; 및 그에 수반한 제약 조건들을 다양한 기법에 의해 설계될 수 있다.
그 기법 중 하나가 &quot;개체-관계 모델링(Entity Relationship Model)&quot;이다.
ERM 프로세스의 산출물을 가리켜 &quot;개체-관계 다이어그램(ERD: Entity-Relationship Diagram)&quot;이라 한다.</p>
</blockquote>
</li>
</ul>
<p> 3.DBMS에 대한 종속성이 줄어든다.</p>
<ul>
<li><p>대부분 ORM 솔루션은 DB에 종속적이지 않다.</p>
</li>
<li><p>종속적이지 않다는 것은 구현 방법뿐만 아니라 많은 솔루션에서 자료형 타입까지 유효하다.</p>
</li>
<li><p>프로그래머는 Object에 집중함으로 극단적으로 DBMS를 교체하는 거대한 작업에도 비교적 적은 리스크와 시간이 소요된다.</p>
</li>
<li><p>또한 자바에서 가공할 경우 equals, hashCode의 오버라이드 같은 자바의 기능을 이용할 수 있고, 간결하고 빠른 가공이 가능하다.</p>
</li>
<li><p><em>단점*</em></p>
</li>
</ul>
<p> 1.완벽한 ORM으로만 서비스를 구현하기 어렵다.</p>
<ul>
<li>사용하기는 편하지만 설계는 매우 신중하게 해야한다.</li>
<li>프로젝트의 복잡성이 커질경우 난이도 또한 올라갈 수 있다.</li>
<li>잘못 구현된 경우에 속도 저하 및 심각할 경우 일관성이 무너지는 문제점이 생길 수 있다.</li>
<li>일부 자주 사용되는 대형 쿼리는 속도를 위해 2.SP를 쓰는 등 별도의 튜닝이 필요한 경우가 있다.</li>
<li>1.DBMS의 고유 기능을 이용하기 어렵다.(하지만 이건 단점으로만 볼 수 없다. 특정 DBMS의 고유 기능을 이용하면 이식성이 저하된다.)</li>
</ul>
<p> 2.프로시저가 많은 시스템에선 ORM의 객체 지향적인 장점을 활용하기 어렵다.</p>
<ul>
<li><p>이미 3.프로시저가 많은 시스템에선 다시 객체로 바꿔야하며, 그 과정에서 생산성 저하나 리스크가 많이 발생할 수 있다.</p>
<blockquote>
<p>1.DBMS(Database Management System)란?
다수의 사용자들이 데이터베이스 내의 데이터를 접근하 ㄹ수 있도록 해주는 소프트웨어 도구의 집합이다. DBMS은 사용자 또는 다른 프로그램의 요구를 처리하고 적절히 응답하여 데이터를 사용할 수 있도록 해준다.</p>
</blockquote>
<blockquote>
<p>DBMS의 기능</p>
</blockquote>
<ul>
<li>정의: 데이터에 대한 형식, 구조, 제약조건들을 명세하는 기능이다. 이때 데이터베이스에 대한 정의 및 설명은 카탈로그나 사전의 형태로 저장된다.</li>
<li>구축: DBMS가 관리하는 기억 장치에 데이터를 저장하는 기능이다.</li>
<li>조작: 특정한 데이터를 검색하기 위한 질의, 데이터베이스에 동시에 접근하도록 하는 기능이다.</li>
<li>공유: 여러 사용자와 프로그램이 데이터베이스에 동시에 접근하도록 하는 기능이다.</li>
<li>보호: 하드웨어나 소프트웨어의 오동작 또는 권한이 없는 악의적인 접근으로부터 시스템을 보호한다.</li>
<li>유지보수: 시간이 지남에 따라 변화하는 요구사항을 반영할 수 있도록 하는 기능이다.</li>
</ul>
<blockquote>
<p>DBMS의 장점</p>
</blockquote>
<ul>
<li>DBMS는 자료의 통합성을 증진시킨다.
DBMS는 자료와의 관계성을 정의하기 때문에 자료 통합이 증진된다.</li>
<li>DBMS는 데이터의 접근성이 용이하다.</li>
<li>데이터 통제가 강화된다.</li>
<li>애플리케이션 프로그램들을 쉽게 개발하고 관리할 수 있다.</li>
<li>보안이 강화된다.</li>
</ul>
<blockquote>
<p>종류</p>
</blockquote>
</li>
<li><p>IMS, CODASYL DB, DB2, ORACLE, INFORMIX, SYBASE, INGRES, MS-SQL, Objectivity, O2, Versant, Ontos, Gemstone, Unisql, Object Store, StarBurst, Postgres, Tibero, MySQL, MS-access
<a href="https://ko.wikipedia.org/wiki/%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4_%EA%B4%80%EB%A6%AC_%EC%8B%9C%EC%8A%A4%ED%85%9C">DBMS 출처 위키백과</a>
<a href="http://www.incodom.kr/ORM">ORM에 대한 정리</a></p>
<blockquote>
<p>PL/프로시저(procedure)
아래를 참조하거나 검색으로
<a href="https://gdtbgl93.tistory.com/149">PL/프로시저(procedure)정리</a></p>
</blockquote>
</li>
</ul>
<hr>
<p><strong>영속성과 연관성</strong></p>
<ol>
<li>영속성(Persistence)</li>
</ol>
<ul>
<li>데이터를 생성한 프로그램이 종료되더라도 사라지지 않는 데이터의 특성을 말한다.</li>
<li>영속성을 갖지 않는 데이터는 단지 메모리에서만 존재하기 때문에 프로그램을 종료하면 모두 잃어버리게 된다.</li>
<li>Object Persistence(영구적인 객체)<ul>
<li>메모리 상의 데이터를 파일 시스템, 관계형 데이터베이스 혹은 객체 데이터베이스 등을 활용하여 영구적으로 저장하여 영속성을 부여한다.</li>
<li>데이터를 데이터베이스에 저장하는 3가지 방법<ul>
<li>JDBC(Java)</li>
<li>SpringJDBC(Ex. JdbcTemplate)</li>
<li>Persistence Framework(Ex.Hibernate, Mybatis 등)</li>
</ul>
</li>
</ul>
</li>
<li>Persistence Layer<ul>
<li>프로그램의 아키텍처에서, 데이터에 영속성을 부여해주는 계층을 말한다.</li>
<li>JDBC를 이용하여 직접 구현할 수 있지만 Persistence framework를 이용한 개발이 많이 이루어진다.</li>
</ul>
</li>
<li>Persistence Framework<ul>
<li>JDBC 프로그래밍의 복잡함이나 번거로움 없이 간단한 작업만으로 데이터베이스와 연동되는 시스템을 빠르게 개발할 수 있으며 안정적인 구동을 보장한다.</li>
<li>Persistence Framework는 SQL Mapper와 ORM으로 나눌 수 있다.<ul>
<li>Ex)JPA, Hibernate, Mybatis 등</li>
</ul>
</li>
</ul>
</li>
</ul>
<blockquote>
<p>JDBC(Java Database Connectivity)는 자바에서 데이터베이스에 접속할 수 있도록 하는 자바 API이다.
JDBC는 데이터베이스에서 자료를 쿼리하거나 업데이트 하는 방법을 제공한다.
<a href="https://ko.wikipedia.org/wiki/JDBC">위키백과 JDBC</a></p>
</blockquote>
<p>2.연관성(Association)</p>
<ul>
<li>Java에서의 객체 참조(Object References)<ul>
<li>방향성이 있다.(Directional)</li>
<li>Java에서 양방향 관계가 필요한 경우 연관을 두 번 정의해야 한다.<ul>
<li>즉, 서로 Reference를 가지고 있어야 한다.</li>
</ul>
</li>
<li>RDBMS의 외래 키(Foreign Key)<ul>
<li>FK와 테이블 Join은 관계형 데이터베이스 연결을 자연스럽게 만든다.</li>
<li><img src="https://gmlwjd9405.github.io/images/database/db-join-example.png" alt="예시"></li>
<li>방향성이 없다.(Direction-Less)
<a href="https://gmlwjd9405.github.io/2019/02/01/orm.html">영속성 및 연관성 참조</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<hr>
<p><strong>JDBC, JPA/Hibernate, Mybatis의 차이점에 대한 참고자료</strong>
<a href="https://gmlwjd9405.github.io/2018/12/25/difference-jdbc-jpa-mybatis.html">JDBC, JPA/Hibernate, Mybatis의 차이 참고</a></p>
<hr>
<p><strong>ORM의 종류</strong></p>
<ul>
<li><p>ORM 프레임워크의 종류 </p>
<ul>
<li>JAVA : JPA, Hibernate, EclipseLink, DataNucleus, Ebean 등</li>
<li>C++ : ODB, QxOrm 등</li>
<li>Python: Django, SQLAlchemy, Storm 등</li>
<li>iOS: DatabaseObjects, Core Data 등</li>
<li>.net: NHibernate, DatabaseObject, Dapper 등</li>
<li>PHP: Doctrine, Propel,RedBean</li>
<li>node.js<ul>
<li>typeORM: MySQL, MariaDB, Postgres, CockroachDB, SQLite, Microsoft SQL Server, Oracle, sql.js, Mongo DB, NoSQL</li>
<li>Sequelize: Postgres, MySQL, MariaDB, SQLite and Microsoft SQL Server</li>
<li>Knex: PostgreSQL, MySQL and SQLite 3</li>
</ul>
</li>
</ul>
<p><a href="https://www.kyungyeon.dev/posts/3">Node.js ORM</a> 여기서 자세한 내용을 볼 수 있다.
<a href="https://lipcoder.tistory.com/entry/3-4-6%EC%9E%A5-ORMObject-Relational-Mapping">Java, C++, Python, ios, .net, PHP 종류</a></p>
<hr>
<h1 id="참조">참조</h1>
<p>1.<a href="https://ko.wikipedia.org/wiki/%EA%B0%9D%EC%B2%B4_%EA%B4%80%EA%B3%84_%EB%A7%A4%ED%95%91">위키백과</a>
2.<a href="http://tcpschool.com/mysql/mysql_intro_relationalDB">출처: TCPschool.com</a>
3.<a href="https://ko.wikipedia.org/wiki/%EB%8D%B0%EC%9D%B4%ED%84%B0%EB%B2%A0%EC%9D%B4%EC%8A%A4_%EA%B4%80%EB%A6%AC_%EC%8B%9C%EC%8A%A4%ED%85%9C">DBMS 출처 위키백과</a>
4.<a href="http://www.incodom.kr/ORM">ORM에 대한 정리</a>
5.<a href="https://gmlwjd9405.github.io/2019/02/01/orm.html">ORM에 대한 정리</a></p>
<ol start="6">
<li><a href="https://gdtbgl93.tistory.com/149">PL/프로시저(procedure)정리</a></li>
<li><a href="https://gmlwjd9405.github.io/2019/02/01/orm.html">영속성 및 연관성 참조</a></li>
<li><a href="https://www.kyungyeon.dev/posts/3">Node.js ORM</a></li>
<li><a href="https://lipcoder.tistory.com/entry/3-4-6%EC%9E%A5-ORMObject-Relational-Mapping">Java, C++, Python, ios, .net, PHP 종류</a></li>
<li><a href="https://www.youtube.com/watch?v=mezbxKGu68Y">ORM에 대해 우아한Tech의 10분테크톡 설명</a></li>
</ol>
</li>
</ul>
]]></description>
        </item>
        <item>
            <title><![CDATA[[네트워크] OSI 7계층]]></title>
            <link>https://velog.io/@hey_jude/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-OSI-7%EA%B3%84%EC%B8%B5</link>
            <guid>https://velog.io/@hey_jude/%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC-OSI-7%EA%B3%84%EC%B8%B5</guid>
            <pubDate>Mon, 28 Jun 2021 12:26:09 GMT</pubDate>
            <description><![CDATA[<h2 id="osi-7계층">OSI 7계층</h2>
<blockquote>
<p>OSI 모형(Open Systems Interconnection Reference Model)은 국제표준화기구(ISO)에서 개발한 모델로, 컴퓨터 네트워크 프로토콜 디자인과 통신을 계층으로 나누어 설명한 것이다. 일반적으로 OSI 7 계층이라고 한다. <a href="https://ko.wikipedia.org/wiki/%EC%84%9C%EB%B2%84">위키피디아</a></p>
</blockquote>
<h2 id="osi-7계층-종류">OSI 7계층 종류</h2>
<ul>
<li><p>1계층 : Physical Layer(물리계층)
  물리계층은 네트워크의 기본 네트워크 하드웨어 전송 기술을 이룬다. </p>
</li>
<li><p>2계층 : Data Link Layer(데이터 링크 계층) 
  포인트 투 포인트간 신뢰성 있는 전송을 보장하기 위한 계층이다.</p>
</li>
<li><p>3계층 : Network Layer(네트워크 계층)
  여러 개의 노드를 거칠때마다 경로를 찾아주는 역할을 한다.
  또한 목적지까지 안전하고 빠르게 데이터를 보내는 기능인 라우팅을 담당한다.
  해당 층의 데이터 단위는 Packet이다.</p>
</li>
<li><p>4계층 : Transport Layer(전송 계층)
  양 끝단의 사용자들이 신뢰성 있는 데이터를 주고 받을 수 있도록 해준다.
  가장 잘 알려진 전송 계층의 예는 TCP이다.
  (TCP, UDP등등)</p>
</li>
<li><p>5계층 : Session Layer(세션 계층)
  양 끝단의 응용 프로세스가 통신을 관리하기 위한 방법을 제공한다. 
  통신을 하기 위한 세션을 확립/유지/중단을 관리하는 기능을 담당한다.</p>
</li>
<li><p>6계층 : Presentation Layer(표현 계층)
  코드 간의 번역을 담당하여 사용자 시스템에서 데이터의 형식상 차이를 다루는 부담을 응용 계층으로부터 덜어 준다.
  다양한 데이터의 포맷을 일관되게 상호 변환, 압축 및 암호화, 복호화 기능을 수행합니다. 
  (ASCII 등등)</p>
</li>
<li><p>7계층 : Application Layer(응용 계층)
   사용자 인터페이스를 담당하는 계층으로 사용자가 이용하는 네트워크의 응용프로그램입니다. 사용자와 가까운 프로토콜인 HTTP, FTP 등이 있다.</p>
</li>
</ul>
]]></description>
        </item>
        <item>
            <title><![CDATA[.env(dotenv) / .gitignore]]></title>
            <link>https://velog.io/@hey_jude/.envdotenv-.gitignore</link>
            <guid>https://velog.io/@hey_jude/.envdotenv-.gitignore</guid>
            <pubDate>Sun, 27 Jun 2021 15:20:39 GMT</pubDate>
            <description><![CDATA[<blockquote>
<p>안녕하세요. 이번에 저는 개인 프로젝트를 만드는 과정에서 .env와 .gitignore에 대해서 모르는 상태로 친구로 부터 .env와 .gitignore이 무엇인지 알아보고 고쳐보라는 이야기를 듣고 .env(dotenv)와 .gitignore에 대해서 알아보았습니다.</p>
</blockquote>
<h2 id="envdotenv란">.env(dotenv)란?</h2>
<blockquote>
<p>Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env. Storing configuration in the environment separate from code is based on The Twelve-Factor App methodology.
<a href="https://www.npmjs.com/package/dotenv">npm공식문서</a></p>
</blockquote>
<ul>
<li><code>dotenv</code>를 사용하는 이유는 우리가 개발하는 과정에서 서버주소, 고유API KEY 값 등 필요한 정보들을 저장하게 된다. 이런 정보는 민감한 정보가 들어있는 경우가 많기 때문에 보안이 이뤄져야 한다.</li>
</ul>
<h2 id="환경변수란">환경변수란?</h2>
<blockquote>
<p>환경변수는 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는, 동적인 값들의 모임이다. <a href="https://ko.wikipedia.org/wiki/%ED%99%98%EA%B2%BD_%EB%B3%80%EC%88%98">위키피디아</a></p>
</blockquote>
<ul>
<li><p>os에서 자식 프로세스들을 생성할때 참조하는 &#39;변수들&#39; 이라고 생각하면 좋다.</p>
</li>
<li><p>우리가 아는 모든 작업창(게임, 인터넷, 제어판 등등)을 실행할 때 사용하는 프로그램을 사용하기 위해서 프로세스들을 사용하게 된다. 다시 말해서 프로세스들은 전부 os라는 프로그램에 의해 실행되는 자식 프로세스들이다.
바로 이때 os입장에서 해당 프로세스를 실행시키기 위해 참조하는 변수가 바로 이 &#39;환경변수&#39;이다.</p>
</li>
<li><p>참조 <a href="https://m.blog.naver.com/zxwnstn/221521038431">환경변수</a></p>
</li>
</ul>
<h2 id="gitinore">.gitinore</h2>
<p><strong>.gitignore이란?</strong></p>
<blockquote>
<ul>
<li>로컬 환경의 정보나 빌드 정보 등 보안이 이루어져야 하는 정보를 원격 저장소에 올라가지 않도록 관리하는 파일이다.</li>
</ul>
</blockquote>
<ul>
<li>설정한 정보에 대한 파일들에 대해 git track하지 않도록 설정하는 역할을 한다.</li>
</ul>
<p>위와 같은 이유로 .gitigore 원격저장소 관리가 필요없는 파일에 대해서 git에서 추적하지 않게 제외시키는 것이다.</p>
<p><strong>.gitignore</strong></p>
<ul>
<li>.gitignore파일은 최상위에 존재해야 한다.</li>
</ul>
<p><strong>.gitignore 패턴</strong>
작성 패턴은 아래의 규칙을 따른다.</p>
<blockquote>
<ul>
<li>&#39;#&#39;로 시작하는 라인은 무시한다.</li>
</ul>
</blockquote>
<ul>
<li>표준 Glob패턴을 사용한다.</li>
<li>슬래시<code>/</code>로 시작하면 하위 디렉토리에 적용되지 않는다.</li>
<li>디렉토리는 슬래시<code>/</code>를 끝에 사용하는 것으로 표현한다.</li>
<li>느낌표<code>!</code>로 시작하는 패턴의 파일은 무시하지 않는다.</li>
</ul>
<p>아래와 같은 표현을 통해서 작성한 후 원격저장소에 push해주면 된다.
<a href="https://velog.io/@psk84/.gitignore-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0">psk84.log</a></p>
<h2 id="참조">참조</h2>
<blockquote>
<ul>
<li><a href="https://www.npmjs.com/package/dotenv">npm공식문서</a></li>
</ul>
</blockquote>
<ul>
<li><a href="https://ko.wikipedia.org/wiki/%ED%99%98%EA%B2%BD_%EB%B3%80%EC%88%98">위키피디아</a></li>
<li><a href="https://m.blog.naver.com/zxwnstn/221521038431">환경변수</a></li>
<li><a href="https://velog.io/@psk84/.gitignore-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0">psk84.log</a></li>
</ul>
]]></description>
        </item>
        <item>
            <title><![CDATA[운영체제 - 프로세스와 스레드]]></title>
            <link>https://velog.io/@hey_jude/%EC%9A%B4%EC%98%81%EC%B2%B4%EC%A0%9C-%ED%94%84%EB%A1%9C%EC%84%B8%EC%8A%A4%EC%99%80-%EC%8A%A4%EB%A0%88%EB%93%9C</link>
            <guid>https://velog.io/@hey_jude/%EC%9A%B4%EC%98%81%EC%B2%B4%EC%A0%9C-%ED%94%84%EB%A1%9C%EC%84%B8%EC%8A%A4%EC%99%80-%EC%8A%A4%EB%A0%88%EB%93%9C</guid>
            <pubDate>Fri, 18 Jun 2021 05:30:34 GMT</pubDate>
            <description><![CDATA[<h2 id="프로세스와-운영체제">프로세스와 운영체제</h2>
<p><strong>1. 프로세스</strong>
프로세스는 실행 중인 프로그램으로 디스크로부터 메모리에 적재되어 CPU의 할당을 받을 수 있는 것으로, 운영체제로부터 주소 공간, 파일, 메모리 등을 할당받으며 이것들을 총칭하여 프로세스라고 합니다.</p>
<p><strong>2. 스레드</strong>
스레드는 프로세스의 실행 단위입니다. 한 프로세스 내에서 동작되는 여러 실행 흐름으로 프로세스 내의 주소 공간이나 자원을 공유합니다. 다만 스레드는 독립적인 작업을 수행해야 하기 때문에 독립적인 스택과 PC 레지스터 값을 갖고 있습니다.</p>
<h2 id="참조">참조</h2>
<p><a href="https://jhnyang.tistory.com/368?category=815411">양햄찌가 만드는 세상</a>
<a href="https://k39335.tistory.com/30">어제보다 한걸음 더</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[자바스크립트의 역사와 배경 ]]></title>
            <link>https://velog.io/@hey_jude/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EC%97%AD%EC%82%AC%EC%99%80-%EB%B0%B0%EA%B2%BD</link>
            <guid>https://velog.io/@hey_jude/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%EC%97%AD%EC%82%AC%EC%99%80-%EB%B0%B0%EA%B2%BD</guid>
            <pubDate>Mon, 17 May 2021 10:57:52 GMT</pubDate>
            <description><![CDATA[<p><strong>자바스크립트의 역사</strong></p>
<p>&quot;넷스케이프 커뮤니케이션스&quot;는 웹이 더 동적으로 변화할 필요가 있음을 느끼고 HTML에 코드를 웹 페이지 마크업으로 직접 작성하면서 웹디자이너들과 파트타입 프로그래머들이 이미지, 플러그인 등의 요소를 쉽게 조합할 수 있는 글루언어(glue laguage)가 필요하다고 믿었다.</p>
<p>그 이후 브랜던 아이크를 영입하여 10일만에 언어를 만들어 냈고, 첫 이름은 &#39;모카&#39;라는 이름으로 만들어졌지만 9월 &#39;라이브스크립트&#39;라는 이름으로 불렸으며 네스케이프와 썬은 &#39;자바스크립트&#39;라고 최종 이름을 결정했다.</p>
<hr>
<p><strong>자바스크립트, J Script, 자바</strong></p>
<p>자바와 자바스크립트는 이름에서 혼란을 야기시켰다. 구문이 유사하다는 점(두 언어 모두 C언어에 두었기 때문에)외에 실제 관련성이 없었기 때문이다. 두 언어는 의미론 적으로 매우 다르고, 특히 각각의 객체 모델은 관련성이 없는데다가 상당 부부분이 호환되지 않았다.</p>
<p>J스크립트는 자바스크립트의 성공에 자극받은 마이크로소프트에서 호환 언어를 개발하게 되었고, 1996년 8월에 출시된 인터넷익스플로러 브라우저 3.0부터 지원되기 시작했다.</p>
<p>IE브라우저에서 자바스크립트의 사용은 실제로 J스크립트의 사용을 의미했고, 이에 표준화 요구는 ECMA스크립트에 대한 ECMA-262 표준의 기반이 되었다.</p>
<hr>
<p><strong>자바스크립트는 프로토타입 기반 언어이다?</strong>
자바스크립트는 클래스라는 개념이 없다. 그래서 기존의 객체를 복사하여 새로운 객체를 생성하는 프로토타입 기반의 언어이다.</p>
<hr>
<p><strong>프로토타입 기반의 언어란?</strong>
프로토타입 기반 프로그래밍은 객체지향 프로그래밍의 한 형태의 갈래로 클래스가 없고, 클래스 기반 언어에서 상속을 사용하는 것과 다르게, 객체를 원형(프로토타입)으로 하여 복제의 과정을 통하여 객체의 동작 방식을 다시 사용할 수 있다.
프로토타입기반 프로그래밍은 &#39;클래스리스&#39;, &#39;프로토타입 지향&#39; 혹은 &#39;인스턴스 기반&#39; 프로그래밍이라고도 한다.</p>
<hr>
<p><strong>Reference</strong></p>
<ul>
<li><a href="https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8">자바스크립트</a></li>
<li><a href="https://ko.wikipedia.org/wiki/%ED%94%84%EB%A1%9C%ED%86%A0%ED%83%80%EC%9E%85_%EA%B8%B0%EB%B0%98_%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D">프로토타입 기반 프로그래밍</a></li>
</ul>
]]></description>
        </item>
        <item>
            <title><![CDATA[TypeScript - Parcel과 모듈]]></title>
            <link>https://velog.io/@hey_jude/TypeScript-Parcel%EA%B3%BC-%EB%AA%A8%EB%93%88</link>
            <guid>https://velog.io/@hey_jude/TypeScript-Parcel%EA%B3%BC-%EB%AA%A8%EB%93%88</guid>
            <pubDate>Mon, 10 May 2021 07:29:39 GMT</pubDate>
            <description><![CDATA[<p><strong>1. parcel(파슬)</strong></p>
<p> 1)npm으로 파슬 만들기
<code>npm install -g parcel-bundler</code></p>
<p> 2)package.json 파일을 프로젝트 디렉토리에 만들기
 <code>npm init -y</code></p>
<p> 3) package.json 파일에서 스크립트 태그에 파슬 번들러 할 수 있게 해준다.</p>
<pre><code class="language-typescript"> // package.json
&quot;script&quot;: {
  &quot;dev&quot;: &quot;parcel index.html&quot; //설정해줘서 사용가능하게 해줘야 한다.
  &quot;test&quot;: &quot;echo/&quot;Error:no test specified/&quot; &amp;&amp; exit1&quot;
}</code></pre>
<p> 4)script 루트가 되는 파일을 html파일에서 설정해줘야 한다.</p>
<pre><code class="language-html"> &lt;!DOCTYPE html&gt;
 &lt;html lang=&quot;en&quot;&gt;
 &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;Document&lt;/title&gt;
 &lt;/head&gt;
 &lt;body&gt;
    &lt;script src=&quot;src/app.ts&quot;&gt;&lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;</code></pre>
<p> 5) 작업을 종료하고 그 후에 다시 실행시킬 때
 <code>npm run dev</code></p>
<p> 6) 파셀을 사용하는 이유
 Parcel은 zero configuration을 지향해 설정 파일이 필요 없다. 또한 플러그인을 사용하지 않 
 아도 된다. 이런 장점 때문에 Parcel을 선택했다. &#39;불꽃처럼 빠른(Blazing fast)&#39; 빌드 속도라
 고 홍보할 정도로 빌드 시간이 짧다는 것도 Parcel을 도입하는 데 영향을 준 요인이다.</p>
<p> <a href="https://d2.naver.com/helloworld/2838729">naverD2</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[TypeScript - 인덱스타입]]></title>
            <link>https://velog.io/@hey_jude/TypeScript-%EC%9D%B8%EB%8D%B1%EC%8A%A4%ED%83%80%EC%9E%85</link>
            <guid>https://velog.io/@hey_jude/TypeScript-%EC%9D%B8%EB%8D%B1%EC%8A%A4%ED%83%80%EC%9E%85</guid>
            <pubDate>Fri, 07 May 2021 19:18:12 GMT</pubDate>
            <description><![CDATA[<p><strong>1.인덱스타입은 속성이름이 정해져있지 않고 동적으로 처리해야 할 때 사용할 수 있다.</strong></p>
<pre><code class="language-typescript">interface Props {
  [key: string] : string;
}

const p: Props = {
  a: &#39;d&#39;,
  b: &#39;e&#39;,
  c: 3 //여기서 숫자를 주면 문제가 된다.key는 문자열이고 키에 해당하는 값 또한 문자열이라고 설정했기 때문이다.
  0: &#39;d&#39;;,
  1: &#39;b&#39;
}

p[&quot;a&quot;] //or p[3]
//여기서 p[0]을 하면 &#39;d&#39;라는 값이 나온다.</code></pre>
<p><strong>2. props의 키를 문자열로 받을 수 있게 해놨지만 특정한 이름으로 고정할 수 있다.</strong></p>
<pre><code class="language-typescript">interface Props {
  name: string;
  [key: string]: string;
}

const p: Props = {
  name: &#39;hello&#39;,
  a: &#39;d&#39;,
  b: &#39;e&#39;,
  c: &#39;3&#39;,
  0: &#39;d&#39;,
  1: &#39;b&#39;
} 
//p는 value타입이 문자열인 어떠한 프로퍼티든 가질 수 있지만 이름이 꼭 있어야 한다.

p.name//name은 꼭 보장받고,&#39;key:string&#39;이기 때문에 key값으로 모든 문자열이 올 수 있고, Props는 인덱스 타입이여서 모든 문자열이든 접근할 수 있다.</code></pre>
<p><strong>3. 인덱스 타입에서 keyof 연산자를 이용하면 Props의 key들에 대한 타입을 가져올 수 있다.</strong></p>
<pre><code class="language-typescript">interface Props {
  name: string,
  [key: string]: string;
}

let keys: keyof Props; //keys라는 타입에 keyof라는 연산자를 이용해서 Props라는 타입을 전달하게 되면 &#39;string | number&#39; 타입이 된다. 왜냐하면 key의 string은 인덱스타입에서 시그니처 파라미터 값으로 들어온 것은 숫자또는 문자열로 접근할 수 있어서다.</code></pre>
<p><strong>4. 인덱스 시그니처가 아닌 일반적인 interface에 keyof 연산자를 사용하면</strong></p>
<pre><code class="language-typescript">interface User {
  name: string;
  age: number;
  hello(msg: string): void;
}

let keysOfUSer: keyof User;
//keyOfUser의 변수에는 User의 키들이 유니온타입으로 &#39;let keyOfUser: &quot;number&quot; | &quot;age&quot; | &quot;hello&quot;&#39;처럼 보이게 된다.keysOfUser에는 키들만 할당할 수 있게 된다.
keyOfUser = &quot;age&quot;</code></pre>
<p><strong>5. User타입에 특정한 타입들을 key이름으로 가져올 수 있다.</strong></p>
<pre><code class="language-typescript">interface User {
  name: string;
  age: number;
  hello(msg: string): void;
}

let keysOfUSer: keyof User;
keyOfUser = &quot;age&quot;

let helloMethod: User[&quot;hello&quot;];
helloMethod = function(msg: string) {

}
//hello라는 이름으로 helloMethod를 정의하면 helloMethod는 User의 hello키에 해당하는 값만 할당할 수 있다.</code></pre>
<p>💡알아둬야 할 것들</p>
<ol>
<li>인덱스 시그니처 매개변수 형식은 &#39;string&#39; 또는 &#39;number&#39;이여야 한다.</li>
<li>자바스크립트이 객체는 이름으로 접근할 수 있다. 하지만 타입스크립트는 숫자로도 접근할 수 있다.</li>
</ol>
]]></description>
        </item>
        <item>
            <title><![CDATA[TypeScript - 타입 별칭]]></title>
            <link>https://velog.io/@hey_jude/TypeScript-%ED%83%80%EC%9E%85-%EB%B3%84%EC%B9%AD</link>
            <guid>https://velog.io/@hey_jude/TypeScript-%ED%83%80%EC%9E%85-%EB%B3%84%EC%B9%AD</guid>
            <pubDate>Fri, 07 May 2021 18:48:33 GMT</pubDate>
            <description><![CDATA[<p><strong>typealias</strong></p>
<p><strong>1. 인터페이스와 비슷하지만 우리가 직접 작성한 타입에 이름을 붙일 수 있다.</strong></p>
<pre><code class="language-typescript">interface User {
  name: string;
}
interface Action {
  do(): void
}

type UserAction = User &amp; Action;
function createUserAction () : UserAction {
  return do() {
    do() {},
    name: &#39;&#39;
  }
}
type StringOrNumber = string | number;</code></pre>
<hr>
<p><strong>2. 타입별칭은 Generic도 사용가능하다</strong></p>
<pre><code class="language-typescript">type Arr&lt;T&gt; = T[];
// 제너릭을 이용해서 Arr이라는 타입은 타입파라미터 T를 받아서 T에 해당하는 배열의 타입을 가르키게 된다.
type P&lt;T&gt; = Promise&lt;T&gt;;
//기존에 만들었던 타입들을 유니온이나 intersection타입이나 다양한 타입들로 구성한 것들에 이름을 부여할 수 도 있고,원시형 타입도 가능하고 기존에 있는 타입을 이름만 바꾸거나 단축시켜서 표현할 수 있다.</code></pre>
<hr>
<p><strong>3. 이름뿐만 아니라 interface처럼 심지어 특정 타입을 정의할 수도 있다.</strong></p>
<pre><code class="language-typescript">type User2 = {
  name: string;
  login(): boolean;
}

class UserImpl implements User2 {
  name: string;

  login(): boolean {
  throw new Error(&quot;Method not implemented.&quot;);
  }
}
//interface가 아님에도 불구하고 implements가 가능하다.</code></pre>
<p><strong>4.문자열리터럴 타입과 같이 활용하게 되면 유용하게 사용할 수 있다.</strong></p>
<pre><code class="language-typescript">type User2 = {
  name: string;
  login(): boolean;
}

class UserImpl implements User2 {
  name: string;

  login(): boolean {
  throw new Error(&quot;Method not implemented.&quot;);
  }
}

type UserState = &quot;PENDING&quot; | &quot;APPROVED&quot; | &quot;REJECTED&quot;;
//상태에 대한 문자열들에 대해서 유니온타입으로 가져간다.

function checkUser(user: User2): UserState {
  if(user.login()) {
    return &quot;APPROVED&quot;;
  } else {
    return &quot;REJECTED&quot;;
  }
}
//예를 들면 유저를 검사를 하는데 유저를 검사하면서 나온 상태를 반환해야 한다면 유저의 상태중 하나가 리턴되게 할 수 있다.</code></pre>
]]></description>
        </item>
        <item>
            <title><![CDATA[TypeScript - Intersection&Union]]></title>
            <link>https://velog.io/@hey_jude/TypeScript-IntersectionUnion</link>
            <guid>https://velog.io/@hey_jude/TypeScript-IntersectionUnion</guid>
            <pubDate>Fri, 07 May 2021 10:07:46 GMT</pubDate>
            <description><![CDATA[<pre><code class="language-typescript">interface User {
  name: string;
}
interface Action {
  do(): void;
}</code></pre>
<p>intersection타입은 여러 타입을 합쳐진 타입을 말한다.
위의 interface를 intersection 타입으로 만들어 보자.</p>
<pre><code class="language-typescript">interface User {
  name: string;
}
interface Action {
  do(): void;
}

function createUserAction(u: User, a: Action): User &amp; Action {
  return {...u, ...a};
}

const u = createUserAction ({ name: &#39;jay&#39; }, { do() {} });
u. //intersection을 통해서 두 타입이 합쳐지고 &#39;u.&#39;을 통해서 두 타입을 이용할 수 있다</code></pre>
<p><strong>union type</strong></p>
<pre><code class="language-typescript">function compare(x: string | number, y: srting | number) {
//x.을 입력해보면 string과 number 두 타입에서 같이 존재하는 멤버들만 나오게 된다.
  if (typeof x === &#39;number&#39; &amp;&amp; typeof y === &#39;number&#39;) {
   //x. 을 입력해보면 x가 number타입으로 인식하게 된다. 왜냐하면 typeof연산자로 타입에 대해서 검증해줬기 때문이다.
    return x === y ? 0 : x &gt; y ? 1 : -1; 
  }
  if (typeof x === &#39;string&#39; &amp;&amp; typeof y === &#39;string&#39;) {
    return x.localCompare(y);
  }
  throw Error (&#39;not support type&#39;);
}
const v = compare(1, 2);
console.log([3, 2, 1].sort(compare))
console.log([&#39;c&#39;, &#39;b&#39;, &#39;a&#39;].sort(compare))</code></pre>
<p>compile to</p>
<pre><code class="language-typescript">[1 ,2 ,3]
[&#39;a&#39;, &#39;b&#39;, &#39;c&#39;]</code></pre>
<p>or기호를 사용해서 표현하는 것이 union타입이다.</p>
<p><strong>interface를 만약 union타입을 했을 경우 어떤 일이 일어나는지 보자</strong></p>
<pre><code class="language-typescript">function compare(x: string | number, y: srting | number) {
  if (typeof x === &#39;number&#39; &amp;&amp; typeof y === &#39;number&#39;) {
    return x === y ? 0 : x &gt; y ? 1 : -1; 
  }
  if (typeof x === &#39;string&#39; &amp;&amp; typeof y === &#39;string&#39;) {
    return x.localCompare(y);
  }
  throw Error (&#39;not support type&#39;);
}
const v = compare(1, 2);
console.log([3, 2, 1].sort(compare))

function process(v: User | Action) {
  if(v.do) //멤버가 있는지 체크하면 되는데, v라는 값에 do가 있는지 보려고 하면 v는 union타입이기 때문에 do타입의 공통된 멤버에만 접근할 수 있다. 공통된 멤버가 아니기 때문에 do라는 속성이 없다고 나온다.
   //이렇게 assertion하면 된다.
  if((&lt;Action&gt;v).do) {
    v.do//여기서도 아직 타입 가드가 된 것이 아니다 assertion한 것이기 때문에 여기서도 type assertion을 해야 한다.
    //이렇게 assertion하면 된다.
        (&lt;Action&gt;v).do()
  }
}

//우리가 매번 typeassertion을 할 수 없기 때문에 타입가드를 만들어보자
function isAction(v: User | Action): v is Action//v라는 타입가드를 is를 통해서 설정할 수 있다. {
  return (&lt;Action&gt;v).do !== undefined;
}

function process(v: User | Action) {
  if(isAction(v)) {
    v.do() // Action이라고 인지한다.
  } else {
    console.log(v.name);
  }
}</code></pre>
<p>위에서 사용자 정의 타입가드를 확인할 수 있다</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[TypeScript - Generic3]]></title>
            <link>https://velog.io/@hey_jude/TypeScript-Generic3</link>
            <guid>https://velog.io/@hey_jude/TypeScript-Generic3</guid>
            <pubDate>Fri, 07 May 2021 09:18:50 GMT</pubDate>
            <description><![CDATA[<pre><code class="language-typescript">interface DB&lt;T&gt; {
  add(v: T): void;
  get(): T;
}

class D&lt;T&gt; implements DB&lt;T&gt; {
  add(v: T): void{
    throw new Error(&quot;Method not implemented.&quot;)
  }
  get(): T{
    throw new Error(&quot;Method not implemented.&quot;)
  }
}

class LocalDB&lt;T&gt; implements DB&lt;T&gt;{
  constructor(private localStorageKey: string) {
    add(v: T) {
    localStorage.setItem(this.localStorageKey, JSON.stringify(v));
  }
  get(): T {
    const v = localStorage.getItem(this.localStorageKey);
    return (v) ? JSON.parse(v) : null;
  }
 }
}

interface User { name: string }

const userDb = new LocalDB&lt;User&gt;(&#39;user&#39;);
userDb.add({ name: &#39;jay&#39; });
const userA = userDb.get(); 
userA.name;</code></pre>
<p>generic은 마찬가지로 클래스 뿐만 아니라 인터페이스에서도 사용할 수 있다.</p>
<p><strong>Type파라미터에 있는 type의 범위를 특정한 타입의 하이타입으로 고정할 수 있다.</strong></p>
<pre><code class="language-typescript">interfcae JSONSerialier {
  serialize(): string;
}

class LocalDB&lt;T extends JSONSerialier&gt; implements DB&lt;T&gt; {
   constructor(private localStorageKey: string) {
     add(v: T) {
       v.serialize();// 여기서 v로 serialize를 쓸 수 있는 것이다.
    localStorage.setItem(this.localStorageKey, JSON.stringify(v));
  }
  get(): T {
    const v = localStorage.getItem(this.localStorageKey);
    return (v) ? JSON.parse(v) : null;
  }
 }
}</code></pre>
<p><strong>조건부 타입</strong></p>
<pre><code class="language-typescript">interface Vegitable {
  v: string;
}
interface Meat {
  m: string;
}

interface Cart&lt;T&gt; {
  getItem(): T extends Vegitable ? Vegitable : Meat 
}

const cart2: cart&lt;Vegitable&gt; = {
  getItem() {
    return {
      v: &#39;&#39;
    }
  }
}

cart2.getItem()</code></pre>
]]></description>
        </item>
        <item>
            <title><![CDATA[TypeScript - Generic 2]]></title>
            <link>https://velog.io/@hey_jude/TypeScript-Generic-2</link>
            <guid>https://velog.io/@hey_jude/TypeScript-Generic-2</guid>
            <pubDate>Fri, 07 May 2021 09:18:20 GMT</pubDate>
            <description><![CDATA[<ol>
<li><p>Generic은 클래스를 정의할 때에도 사용할 수 있다.</p>
<pre><code class="language-typescript">class LocalDB {
constructor(private localStorageKey: string) {

}
add(v: User) {
 localStorage.setItem(this.localStorageKey, JSON.stringify(v));
}
get(): User {
 const v = localStorage.getItem(this.localStorageKey);
 return (v) ? JSON.parse(v) : null;
}
}
</code></pre>
</li>
</ol>
<p>//1.
interface User { name: string }</p>
<p>const userDb = new LocalDB(&#39;user&#39;);
userDb.add({ name: &#39;jay&#39; });
const userA = userDb.get(); // userA은 타입이 any로 있다.
userA.name; // userA에 대해서 타입을 고정해 보자 =&gt; 1.</p>
<pre><code>
LocalDB를 유저 하나의 하나의 타입만 넣고 빼고 싶은 것이 아니라 여러 타입에 대해서 처리하고 싶다면
~~~typescript
class LocalDB&lt;T&gt; {
  constructor(private localStorageKey: string) {

  }
  add(v: T) {
    localStorage.setItem(this.localStorageKey, JSON.stringify(v));
  }
  get(): T {
    const v = localStorage.getItem(this.localStorageKey);
    return (v) ? JSON.parse(v) : null;
  }
}

//1.
interface User { name: string }

const userDb = new LocalDB&lt;User&gt;(&#39;user&#39;);
userDb.add({ name: &#39;jay&#39; });
const userA = userDb.get(); 
userA.name;</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[TypeScript - Generic]]></title>
            <link>https://velog.io/@hey_jude/TypeScript-Generic</link>
            <guid>https://velog.io/@hey_jude/TypeScript-Generic</guid>
            <pubDate>Fri, 07 May 2021 09:02:55 GMT</pubDate>
            <description><![CDATA[<pre><code class="language-typescript">function createPromise&lt;T&gt;(x: T, timeoute: number) {
 return new Promise&lt;T&gt;(resolve, reject) =&gt; {
   setTimeout(() =&gt; {
     resolve(x);
   }, timeoute)
 });
}
createPromise(1, 100)
.then(v =&gt; console.log(v)); </code></pre>
<p>타입파라미터를 두 개 이상을 사용할 수 있다.</p>
<pre><code class="language-typescript">function createPromise&lt;T&gt;(x: T, timeoute: number) {
 return new Promise&lt;T&gt;(resolve, reject) =&gt; {
   setTimeout(() =&gt; {
     resolve(x);
   }, timeoute)
 });
}
createPromise(1, 100)
.then(v =&gt; console.log(v)); 

function createTuple2&lt;T, U&gt;(v: T, v2: U): [T, U]{
  return [v, v2];
}

const t1 = createTuple2(&quot;user1&quot;, 1000);</code></pre>
<p>튜플을 만들 때에도 여러개의 파라미터화 할 수 있게 된다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[TypeScript - 클래스2]]></title>
            <link>https://velog.io/@hey_jude/TypeScript-%ED%81%B4%EB%9E%98%EC%8A%A42</link>
            <guid>https://velog.io/@hey_jude/TypeScript-%ED%81%B4%EB%9E%98%EC%8A%A42</guid>
            <pubDate>Fri, 07 May 2021 08:49:45 GMT</pubDate>
            <description><![CDATA[<ol>
<li>상속과 인터페이스와의 관계<pre><code class="language-typescript">interface Person {
name: string;
say(message: string): void;
}
interface Programmer {
writeCoder(requirement: string): string;
}
</code></pre>
</li>
</ol>
<p>class KoreanProgrammer implements Person, Programmer {
  constructor(public name: string) {</p>
<p>  }
  say(message: string): void {
    console.log(message);
  }
  wrtieCode(requirement: string):string {
    console.log(requirement);
    return requirement + &#39;...&#39;;
  }
  loveKimchi() {
    console.log(&#39;love<del>kimchi</del>&#39;);
  }
}</p>
<p>cnost jay = new KoreanProgrammer(&#39;jay&#39;);</p>
<pre><code>
2. abstract 키워드를 통해 클래스를 정의하는 방법
abstract는 이 클래스가 아직 완성되지 않은 클래스라는 것을 말한다.
이 클래스를 꼭 인스턴스를 바로 만들수는 없지만 이 클래스를 통해서 다른 상속 받은 클래스를 통해서 다른 상속을 받은 클래스를 통해서 인스턴스를 만들 수 있다.


~~~typescript

interface Person {
  name: string;
  say(message: string): void;
}

abstract class Korean implements Person {

  public abstract jumin: number;

  constructor(public name: string) {

  }

  say(msg: string) {
    console.log(msg);
  }

  abstract loveKimchi(): void;
}


class KoreanProgrammer extends  Korean implements Programmer {
  constructor(public name: string, public jumin: number) {
    super(name); //컨스트럭트를 주게 되면 부모클래스의 생성자를 호출해줘야 한다.
  }
  say(message: string): void {
    console.log(message);
  }
  wrtieCode(requirement: string):string {
    console.log(requirement);
    return requirement + &#39;...&#39;;
  }
  loveKimchi(): void {
    throw new Error(&quot;Method not implemeted.&quot;);
  }
}

const jay = new KoreanProgrammer(&#39;jay&#39;, 2222);
const jay2 = new Korean(&#39;jay&#39;);// 추상클래스의 인스턴스는 만들수 없다고 에러가 뜬다.
// 상속을 받아서 하이타입에서 추상클래스를 구성해야 하며, 그 결과로 하이타입을 인스턴스화 할 수 있다.</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[TypeScript - 클래스1]]></title>
            <link>https://velog.io/@hey_jude/TypeScript-%ED%81%B4%EB%9E%98%EC%8A%A41</link>
            <guid>https://velog.io/@hey_jude/TypeScript-%ED%81%B4%EB%9E%98%EC%8A%A41</guid>
            <pubDate>Fri, 07 May 2021 08:26:42 GMT</pubDate>
            <description><![CDATA[<pre><code class="language-typescript">interface User {
  name: string;
}
interface Product {
  id: string;
  price: number;
}

class Cart {
  user: User;
  store: Object;
  constructor(user: User) {
    this.user = user;
    this.store = {};
  }
  put (id: string, product: Product) {
    this.store[id] = product;
  }
  get(id: string) {
    return this.store[id];
  }
}
const cartJohn = new Cart({ name: &#39;john&#39;});
const cartJay = new Cart({ name: &#39;jay&#39;});</code></pre>
<p>이전에는 함수를 통해서 새로운 타입을 만들었다면 클래스가 나온 후에는 클래스를 통해서 특정타입의 객체를 생성할 수 있게 되었다.</p>
<hr>
<p><strong>2. 타입스크립트에서는 속성과 메서드에 접근제한자를 갖을 수 있다.</strong>
es6에는 없는 것인데, 위의 코드를 예로 cart라는 클래스의 store라는 속성은 cart클래스 몸통에서만 접근할 수 있게 접근을 제한할 수 있다.</p>
<p>접근제한자에는 <code>public</code>, <code>private</code>, <code>protected</code></p>
<pre><code class="language-typescript">interface User {
  name: string;
}
interface Product {
  id: string;
  price: number;
}

class Cart {
  user: User;
  private store: Object;
  constructor(user: User) {
    this.user = user;
    this.store = {};
  }
  put (id: string, product: Product) {
    this.store[id] = product;
  }
  get(id: string) {
    return this.store[id];
  }
}
const cartJohn = new Cart({ name: &#39;john&#39;});
const cartJay = new Cart({ name: &#39;jay&#39;});</code></pre>
<p>위에서 store속성 앞에 <code>private</code>키워드를 붙여서 클래스 내부에서만 접근할 수 있게 만들 수 있으며, 밑에 cartJohn이라는 cart클래스로부터 만들어진 인스턴스는 store에 접근할 수 없는 것을 확인할 수 있다.</p>
<p>💡cartJohn.을 입력해보면 자동완성에 store속성이 없어진 것을 확인할 수 있다.</p>
<p>💡private와 protected로 키워드를 이용하면 인스턴스 레벨에서 접근을 할 수 없게 되는데, 이 둘의 차이는 cart라는 클래스를 상속할 수 있는데 상속을 한 하이타입에서도 private는 접근이 안되지만 protected는 접근이 가능하다.</p>
<hr>
<p>타입스크립트에서 추가된 한 가지의 기능 중 하나는 생성자를 정의할 때 매개변수를 정의를 하는데, 매개변수에 속성을 정의하고 접근제한자를 같이 쓰게 되면 속성을 정의를 하고 동시에 전달받은 인자를 해당 속성에 할당하는 코드를 한번에 처리할 수 있게 된다.</p>
<pre><code class="language-typescript">class Cart {

  private store: object;

  constructor(protected user: User) {
    // this.user = user;
    this.store = {}
  }

  public put (id: string, product: Product) {
    this.user //이처럼 this.에서 user속성에 접근이 가능하게 된다.
    this.store[id] = product;
  }
  get(id: string) {
    return this.store[id];
  }
}</code></pre>
]]></description>
        </item>
        <item>
            <title><![CDATA[TypeScript - enum타입]]></title>
            <link>https://velog.io/@hey_jude/TypeScript-enum%ED%83%80%EC%9E%85</link>
            <guid>https://velog.io/@hey_jude/TypeScript-enum%ED%83%80%EC%9E%85</guid>
            <pubDate>Fri, 07 May 2021 08:01:51 GMT</pubDate>
            <description><![CDATA[<p><strong>enum</strong>
열거형 enum은 열거형은 상수들의 집합을 정의할 때 사용할 수 있다.
회원의 등급 등 상수에 대한 집합에 의미를 부여하게 된다.</p>
<p>Ex) 스타벅스의 회원등급에 대한 enum을 알아보자면</p>
<pre><code class="language-typescript">enum StarbuksGrade {
  WELCOM,
  GREEN,
  GOLD
}

function getDiscount(v: StarbukGrade): number{
  switch (v){
    case StarbuksGrade.WELCOME:
      return 0;
    case StarbuksGrade.GREEN:
      return 5;
    case StarbuksGrade.GOLD:
      return 10;
  }
}
console.log(getDiscount(StarbuksGrade.GREEN));
console.log(StarbuksGrade.GREEN);</code></pre>
<p>compile to</p>
<pre><code class="language-typescript">5
1 //여기서 1인 이유는 enum에 의해서 나열된 등급에서 GREEN이 1인 것이다.</code></pre>
<p>즉 위에서 enum은 <code>console.log(StarbuksGrade)</code>라고 하게 되면 객체의 형태로 표현이 되어 컴파일 되는 것을 볼 수 있기 때문이다.</p>
<p>따라서</p>
<pre><code class="language-typescript">console.log(StarbuksGrade[&quot;0&quot;]);</code></pre>
<p>compile to</p>
<pre><code class="language-typescript">WELCOME</code></pre>
<p>이라고 결과가 나오게 된다.</p>
<p>💡만약에 enum에 다른 값을 추가하게 된다면 보기에는 안좋더라도 초기값을 할당하면 안전하게 사용할 수 있다.</p>
<pre><code class="language-typescript">enum StarbuksGrade {
WEELCOME = 0,
DDDD = 3,
GREEN = 1,
GOLD = 2
}</code></pre>
<p>또한 enum의 초기값으로 문자열로 멤버로써 정의할 수 있다.</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[TypeScript - 함수형 타입]]></title>
            <link>https://velog.io/@hey_jude/TypeScript-%ED%95%A8%EC%88%98%ED%98%95-%ED%83%80%EC%9E%85</link>
            <guid>https://velog.io/@hey_jude/TypeScript-%ED%95%A8%EC%88%98%ED%98%95-%ED%83%80%EC%9E%85</guid>
            <pubDate>Fri, 07 May 2021 07:32:46 GMT</pubDate>
            <description><![CDATA[<p><strong>1. 타입스크립트는 함수의 매개변수에 타입어노테이션(annotation)기능이 있고, 이것을 작성해줘야 한다.</strong></p>
<pre><code class="language-typescript">function add (x:number , y:number): number/*여기에 반환되는 값의 타입을 미리 정해줄 수 있다.*/ {
  return x + y;
}
add(1, 2); 

const result = add(1, 2);
//위와 같이 작성하게 되면 &#39;result&#39;는 number형 타입을 갖게 되는 것을 알 수 있다.</code></pre>
<p>여기서 &#39;add(1, 2)&#39;에서 숫자가 아니라 문자형을 작성하게 되면 오류가 나게 되는 것이다.</p>
<hr>
<p><strong>2. 매개변수의 optional한 처리와 기본값</strong></p>
<pre><code class="language-typescript">function buildUserInfo(name:string, email: string) {
  return {name: name, email}
}

//아무런 인자를 전달하지 않아도 함수가 사용되어져야 한다고 가정한다면
function buildUserInfo(name: string, email: string){
  return{name = &#39;-&#39;, email = &#39;-&#39;}
} // es6에서 default parmeter이라고 매개변수에 아무런 값을 주지 않고 기본값을 줄 수 있다. 또한 문자열을 기본값으로 해줬기 때문에 &#39;string&#39;이라는 타입값이 필요가 없다.
const user = buildUserInfo();

//화살표 함수형에서의 annotation
const add = (a: number, b: number): number/*여기서 반환되어야 하는 값의 타입을 정해줄 수 있다.*/ =&gt; a + b;</code></pre>
<p><code>return{name: name, email}</code>부분을 보자면 name이라는 속성 키와 참조하는 매개변수명인 name은 scope에서 같은 이름으로 존재할 때 지워 줄 수 있다.
<code>return{name, email}</code></p>
<hr>
<p><strong>3. 함수의 오버로딩</strong></p>
<pre><code class="language-typescript">interface Storage {

}
interface ColdStorage {

}
function store (type: &quot;통조림&quot;): Storage
function store (type: &quot;아이스크림&quot;): ColdStorage </code></pre>
<p>일반적으로 자바와 같은 정적타입에서는 함수를 선언하게 되면 매개변수와 반환되는 값의 타입을 정하게 된다. </p>
<p>타입스크립트에서는 오버로드 시그니처를 정할 수 있게 해줘서 정적인 언어로 안정적이게 이용할 수 있게 해준다.</p>
<p>여기서 아래와 같이 함수와 함수명, 그리고 type과 반환값만 있고 바디가 없는 함수를 시그니쳐라고 한다.</p>
<pre><code class="language-typescript">interface Storage {
  a: string;
}
interface ColdStorage {
  b: string;
}

function store (type: &quot;통조림&quot;): Storage
function store (type: &quot;아이스크림&quot;): ColdStorage 

function store(type: &quot;통조림&quot; | &quot;아이스크림&quot;) {
  if(type === &quot;통조림&quot;) {
    return {a: &quot;통조림&quot; }
  }else if (type === &quot;아이스크림&quot;) {
    return {b: &quot;아이스크림&quot;} 
  }else {
    throw new Error(&#39;Unsupported Type&#39;);
  }
}

const s = store(&#39;통조림&#39;);
s.a </code></pre>
<p>함수시그니쳐를 여러가지 이름으로 정리하는 것을 &#39;오버로드 시그니쳐&#39;라고 한다.</p>
]]></description>
        </item>
    </channel>
</rss>