<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>dev__sana.log</title>
        <link>https://velog.io/</link>
        <description>Delicious :)</description>
        <lastBuildDate>Wed, 17 Feb 2021 04:39:14 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <image>
            <title>dev__sana.log</title>
            <url>https://images.velog.io/images/dev__sana/profile/33e1aca1-3e2a-4f3e-b0ec-d620a2d2fb5e/이산하.jpg</url>
            <link>https://velog.io/</link>
        </image>
        <copyright>Copyright (C) 2019. dev__sana.log. All rights reserved.</copyright>
        <atom:link href="https://v2.velog.io/rss/dev__sana" rel="self" type="application/rss+xml"/>
        <item>
            <title><![CDATA[Environment variable]]></title>
            <link>https://velog.io/@dev__sana/node-environment</link>
            <guid>https://velog.io/@dev__sana/node-environment</guid>
            <pubDate>Wed, 17 Feb 2021 04:39:14 GMT</pubDate>
            <description><![CDATA[<h3 id="introduction">Introduction</h3>
<p>환경변수는 노드 자체의 Process에 저장해 두는 형식으로 중요 데이터를 담아두는 방법입니다.
Library로 지정할 것들(결제모듈, AWS, etc......)등등의 access key와  secret key, 기타 설정등을 저장할 때 사용할 수 있습니다.
기존에는 /config/... 방식으로 .json이나 .js파일등을 지정해 .json 파일의 경우는 fs모듈을 사용하여 읽어오고, js파일은 import(ES5방식은 require)을 통해 읽어들여서 사용했습니다.
하지만 노드는 훨씬 강력한 변수 저장 기능인 env를 제공합니다!</p>
<p>그 전에, 필요 모듈이 두가지 정도 있습니다.
바로 <code>dotenv</code> 와 <code>cross-env</code> 입니다.</p>
<h3 id="installation">Installation</h3>
<pre><code>npm i dotenv cross-env</code></pre><h3 id="usage">Usage</h3>
<h4 id="1-dotenv">1) dotenv</h4>
<pre><code>// Environment.js

import dotenv from &#39;dotenv&#39;;

switch (process.env.NODE_ENV) {
  case &#39;development&#39;:
    dotenv.config({ path: path.resolve().concat(&#39;/.env.development&#39;) });
    return;
  case &#39;production&#39;:
    dotenv.config({ path: path.resolve().concat(&#39;/.env.production&#39;) });
    return;
  default:
    dotenv.config({ path: path.resolve().concat(&#39;/.env.local&#39;) });
    return;
}
</code></pre><p>노드 프로젝트 시작 지점에 해당 파일을 import 받아서 실행해주면 알아서 .env파일을 읽어들여서 개발 환경 (위와 같은 경우는 development, production, local의 3가지로 나뉨)에 따라 process에 변수를 세팅합니다.</p>
<h4 id="2-cross-env">2) cross-env</h4>
<p>위의 dotenv와 함께 사용하기면 좋은 모듈입니다. 노드 실행 명령어에 NODE_ENV라는 변수를 세팅할 수 있습니다.</p>
<pre><code>// package.json
{
  ...,
  scripts: {
    ...,
    start: &#39;cross-env NODE_ENV=development node ./src/www
    ...
  },
  ...
}</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[NVM]]></title>
            <link>https://velog.io/@dev__sana/nvm</link>
            <guid>https://velog.io/@dev__sana/nvm</guid>
            <pubDate>Wed, 17 Feb 2021 04:26:15 GMT</pubDate>
            <description><![CDATA[<h3 id="1-introduction">1. Introduction</h3>
<p>Node.js를 통해 개발을 하는 경우 보통 LTS 버전을 통해 진행하지만, 종종 개발 환경에 따라 버전을 바꿔야 하는 경우도 존재합니다.
예를 들어 사용되는 ES문법이 달라지는 경우가 있겠죠? 지원되는 문법과 내가 사용하는 언어의 버전이 맞지않는다면 오류가 발생합니다. 이 경우에 버전관리를 도와주는 게 바로 NVM(Node Version Manager)입니다.</p>
<h3 id="2-install">2. Install</h3>
<p>NVM Github에 가보시면, 설치 방법이 나와있으니 참고하시고 아래의 경우는 본인이 Mac을 사용한다고 가정했을 때의 설치 방법입니다.</p>
<pre><code>$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.4/install.sh | bash</code></pre><p>NVM Github address
<a href="https://github.com/nvm-sh/nvm#install-script">https://github.com/nvm-sh/nvm#install-script</a></p>
<h3 id="3-usage">3. Usage</h3>
<p>기본적인 사용법은 명령어 + Node 버전의 구조를 따릅니다.</p>
<h5 id="1-lts-version-install">1) LTS version install</h5>
<pre><code>nvm install node</code></pre><h5 id="2-install-with-version-example-with-v8">2) Install with version (example with v8)</h5>
<pre><code>nvm install v8</code></pre><h5 id="3-show-list-of-available-node-versions">3) Show list of available node versions</h5>
<pre><code>nvm ls-remote</code></pre><h5 id="4-show-list-of-installed-node-versions">4) Show list of installed node versions</h5>
<pre><code>nvm ls</code></pre><h5 id="5-switching-selected-node-version-example-with-v8">5) Switching selected node version (example with v8)</h5>
<pre><code>nvm use v8</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[Koa.js]]></title>
            <link>https://velog.io/@dev__sana/koajs</link>
            <guid>https://velog.io/@dev__sana/koajs</guid>
            <pubDate>Sat, 09 Jan 2021 02:15:55 GMT</pubDate>
            <description><![CDATA[<h3 id="introduction">Introduction</h3>
<p>  제가 개발을 하기로 마음먹고 처음으로 프로젝트를 진행한 곳은 SOPT라는 대외활동 동아리입니다. 당시에는 express라는 노드 기반 프레임웍을 사용해서 배웠고, 이후에도 Node.js기반의 백엔드 서버 개발을 진행함에 있어서 다른 프레임웍들은 제 개발에서 배제되었습니다. 다행히도 최근에 회사에서 Koa.js기반의 백엔드를 추가개발 할 일이 생겨서 학습하게 되었습니다.</p>
<p>  Koa.js의 간단한 설명을 보면 다음과 같습니다. (Koa.js 홈페이지 중 스크린샷)</p>
<p>  <img src="https://images.velog.io/images/dev__sana/post/ce3e8654-a348-4892-8568-3066ef999bfb/image.png" alt=""></p>
<p>  네, express팀에서 만들었고 훨씬 경량화되었고 더 강화된 기능들을 제공한다는 건데요, koa를 시작함에 있어서 express의 구조와 유사한 부분이 많아서 뭐지...? 싶었는데 이런 이유가 있더군요.</p>
<h3 id="installation">Installation</h3>
<p>At CMD</p>
<pre><code>npm install koa</code></pre><p>or</p>
<pre><code>npm i koa</code></pre><h3 id="setting">Setting</h3>
<pre><code>import Koa from &#39;koa&#39;;
import KoaRouter from &#39;koa-router&#39;;
import KoaBody from &#39;koa-body&#39;;
import KoaCors from &#39;koa-cors&#39;;
import KoaStatic from &#39;koa-static&#39;;
import KoaRange from &#39;koa-range&#39;;
import KoaLogger from &#39;koa-logger&#39;;</code></pre><p>koa에 관련된 대부분의 모듈들을 가져온 코드입니다.</p>
<h4 id="koa">koa</h4>
<p>koa.js를 사용 가능하도록 하는 통합 모듈.</p>
<h4 id="koa-router">koa-router</h4>
<p>express의 Router를 koa식으로 구현한 모듈.</p>
<h4 id="koa-body">koa-body</h4>
<p>express의 body-parser를 생각하시면 될 것 같습니다. 
request의 body에 데이터를 전달할 때 body에 담아주는 역할을 합니다.</p>
<h4 id="koa-cors">koa-cors</h4>
<p>cors를 허용해주도록 설정하는 모듈입니다. 제 기억으로 express상에서는 따로 cors라는 모듈이 있어서 적용하는 것으로 기억했는데, koa에서는 아예 자체 모듈이 있네요.</p>
<h4 id="koa-static">koa-static</h4>
<p>image등의 static한 resource들을 사용하게 해주는 모듈입니다.</p>
<h4 id="koa-range">koa-range</h4>
<p>request의 파라미터에 담을 수 있는 값은 길이제한이 있는거 아시죠? 길이제한을 늘려주는 모듈입니다.</p>
<h4 id="koa-logger">koa-logger</h4>
<p>서버 로깅을 도와주는 모듈입니다.</p>
<h3 id="usage">Usage</h3>
<h4 id="srcindexjs">/src/index.js</h4>
<pre><code>import Koa from &#39;koa&#39;;
import KoaRouter from &#39;koa-router&#39;;
import KoaBody from &#39;koa-body&#39;;
import KoaCors from &#39;koa-cors&#39;;
import KoaStatic from &#39;koa-static&#39;;
import KoaRange from &#39;koa-range&#39;;
import KoaLogger from &#39;koa-logger&#39;;

import api from &#39;./api/index.js&#39;;
import environment from &#39;../utils/envoriment.js&#39;;

console.log(`Current enviromnet is ${process.env.NODE_ENV}`)

environment();

const app = new Koa();
const router = new KoaRouter();

const PORT_NUMBER = process.env.SERVER__PORT;
const HOST_ADDRESS = process.env.SERVER__HOST;

router.use(&#39;/api&#39;, api.routes());

app.use(KoaRange);
app.use(KoaLogger());
app.use(KoaCors());
app.use(KoaBody({ multipart: true }));
app.use(KoaStatic(&#39;public&#39;));
app.use(router.routes()).use(router.allowedMethods());

app.listen(PORT_NUMBER, HOST_ADDRESS, () =&gt; {
    console.log(`::: Server start :::\nTest server is listening to port ${PORT_NUMBER}\n`);
});</code></pre><h4 id="srcapiindexjs">/src/api/index.js</h4>
<pre><code>import KoaRouter from &#39;koa-router&#39;;

import v1 from &#39;./v1/index.js&#39;;

const api = new KoaRouter();

api.use(&#39;/v1&#39;, v1.routes());
api.get(&#39;/check&#39;, (ctx, next) =&gt; {
  ctx.status = 200;
  ctx.body = {
    message: &#39;Success&#39;,
    data: undefined,
  };

  return;
});

export default api;</code></pre><p>코드를 실제로 적용한다면, 위와 같이 사용하시면 됩니다. express-generator로 생성된 express 프로젝트를 사용하셨거나, 혹은 express만을 사용하여 프레임웍을 구축하셨던 분들이라면 매우 익숙한 구조일 것이라고 생각됩니다.</p>
<p>다만 기존에 (req, res, next) 를 콜백함수 형식으로 받았던 express와 달리, ctx라는 통합 변수 하나와 next로 받아 작업을 이어가게 되는점이 차이점입니다.</p>
<p>혹시나 처음이여서 해당 코드를 복사하여 사용하시려는 분들은 그대로 하시면 에러가 발생할 것입니다. 제 포스팅 중 이후에 출간할 &#39;환경변수&#39;부분을 참고해 주시면 잘 사용하실 수 있을 것 같습니다.</p>
<p>해당 방식을 사용한 코드들은 제 Github에 방문에 주시면 찾아볼 수 있으며, 댓글로도 질문하셔도 괜찮습니다.</p>
<h4 id="typescript-es6와-class-기반의-koajs-프로젝트">Typescript, ES6와 Class 기반의 koa.js 프로젝트</h4>
<h4 id="httpsgithubcomhasa-06structure-server"><a href="https://github.com/HASA-06/structure-server">https://github.com/HASA-06/structure-server</a></h4>
]]></description>
        </item>
    </channel>
</rss>