<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>dev_.log</title>
        <link>https://velog.io/</link>
        <description>매일, 꾸준히</description>
        <lastBuildDate>Sat, 13 Apr 2024 14:27:19 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <copyright>Copyright (C) 2019. dev_.log. All rights reserved.</copyright>
        <atom:link href="https://v2.velog.io/rss/dev_" rel="self" type="application/rss+xml"/>
        <item>
            <title><![CDATA[가상화폐 단타의 정석]]></title>
            <link>https://velog.io/@dev_/%EA%B0%80%EC%83%81%ED%99%94%ED%8F%90-%EB%8B%A8%ED%83%80%EC%9D%98-%EC%A0%95%EC%84%9D</link>
            <guid>https://velog.io/@dev_/%EA%B0%80%EC%83%81%ED%99%94%ED%8F%90-%EB%8B%A8%ED%83%80%EC%9D%98-%EC%A0%95%EC%84%9D</guid>
            <pubDate>Sat, 13 Apr 2024 14:27:19 GMT</pubDate>
            <description><![CDATA[<p>첫 공부 4월 13일 토요일 
다시 바이낸스에 입금 </p>
<p>워뇨띠 <a href="https://www.youtube.com/watch?v=EiDXQmOQ6_o">https://www.youtube.com/watch?v=EiDXQmOQ6_o</a>
원뇨띠 매매법을 먼저 체화할 것 </p>
<ol>
<li>차트위주로 매매하라 호재매매 x 순수하게 차트위주로 거래함 </li>
</ol>
<ul>
<li>왜냐면 호재매매는 정보 싸움이기 때문 </li>
<li>차트 위주만 참고하고 다른 정보는 신경 쓰지 않음 (롱숏 비율, 청산액, 미체결, 펀딩피 등) </li>
<li>차트분석을 통해 시장 분위기 파악 주력 </li>
</ul>
<ol start="2">
<li>시장 상황에 따른 유연한 트레이딩 
코인 상황에 영향을 끼칠 수 있는 갑작스러운 뉴스가 나왔을 때, 시장 분위기가 좋다면 어떤 악재가 나와도 영향력이 크지 않고 악재 해소로 받아들임 =&gt; 시장 상승으로 예측, 시장 분위기가 안좋다면 어떤 호재가 뜨더라도 호재에 영향이 없기 때문에 시장 하락쪽으로 대응 (그때 그때 시장 상황에 맞게 대응) </li>
</ol>
<ul>
<li>3000 이하 시드일 경우, 시드의 20프로 10배 레버리지 추천 </li>
</ul>
<blockquote>
<p>항상 주의 할 것은 모든 투자가 그렇듯 희망찬 미래만 있는 것은 아니다. 
다른 사람이 망한 것도 보면서 안전 장치들을 마련하자. </p>
</blockquote>
<h3 id="국내-거래소">국내 거래소</h3>
<ul>
<li>업비트 빗썸 (현물 거래만, 원화)<h3 id="해외-거래소">해외 거래소</h3>
</li>
<li>바이낸스 바이비트 <h3 id="테터-코인usdt-사용">&gt; 테터 코인(USDT) 사용</h3>
<blockquote>
<p>USDT 는 대표적 스테이블 코인 
1코인이 1달러 가치
가격 변동성 최소화되도록 설계된 화폐 </p>
</blockquote>
</li>
</ul>
<h3 id="코인마켓캡">코인마켓캡</h3>
<p>세계 거래소 거래량 순위</p>
<h3 id="선물거래와-현물거래의-차이점">선물거래와 현물거래의 차이점</h3>
<ul>
<li>선물거래가 만기일, 레버리지(배수) 있음, 청산여부 있음, 숏 포지션이 있음 </li>
</ul>
<h3 id="코리안-프리미엄-국내외-시세차이">코리안 프리미엄 (국내외 시세차이)</h3>
<blockquote>
<p>거래소간 국가간 차이 존재 (수요 공급 불균형)
코프 심할 때, 50프로 차이 가능 (과매수일 수 있기에 투자 주의) 
KIMPGA 에서 코프를 한눈에 볼 수 있다. </p>
</blockquote>
<h3 id="해외-거래소-입금">해외 거래소 입금</h3>
<ul>
<li>국내 코인 구매 후 거래소의 해당 코인의 현물 지갑에 전송 (주소, tag) </li>
<li>리플 등 수수료 저렴한 코인 사용 (tag 를 안넣으면 안들어갈 수도 있음)</li>
</ul>
<h3 id="코인의-특성">코인의 특성</h3>
<p>가치 책정 어려움</p>
<ul>
<li>코인은 재무제표와 같이 내재가치를 확인할 기준이 없음 </li>
<li>외부 요인보다는 세력들이 만들어내는 유동성과 변동성에 큰 영향<blockquote>
<p>따라서 코인은 아래의 4가지만 잘하면 단타로 충분함 </p>
</blockquote>
</li>
<li>단기 바닥 잡는 법</li>
<li>단기 바닥 잘못 잡았을 때 탈출하는 법 (물타기)</li>
<li>상승할 코인 고르는 법</li>
<li>리스크 관리법 </li>
</ul>
<p>대폭락장 이후로 오버나이트(물량을 들고 자는 것)을 하지 않고 장투보다는 단타 위주로 한다고 함 </p>
<p>효율 극대화를 위해 <code>저점 매수 고점 매도</code> 기술을 익히기로 함 
<code>캔들 모양, 캔들 움직임, 차트 형태, 호가창</code>을 계속 봄 
퇴근 후 무작정 매수 매도 하며 트레이딩 경험 
대폭락으로 250갔던 원금을 하루만에 단타로 500만원까지 복구 
DGB 코인으로 인해 거래량이 많지 않은 코인에 몰빵하는 건 위험</p>
<p>원금 손실이 주는 정신적 충격은 크기 때문에 안전 단타 추구 시작.
500으로 50벌면 빼고, 몇달간 수익률은 8배가 됨
그치만 다를ㄴ 사람이 올린 수익 인증글을 보고 큰 충격
나와 비슷한 금액과 나보다 늦게 시작했는데 수익금은 나와 굉장히 차이가 많이 남 
매매 패턴을 돌아봄 
&#39;수익금의 재투자&#39; =&gt; 복리의 효과 </p>
<p>이론을 몰라도 차트를 볼 수 있다 
현재 추세를 가늠해 진입할 시점을 찾는다 
이론은 복잡해 보이지만 결국 과거 데이터를 모아 유사성을 찾아 하나의 공식으로 만들어둔 것이기 때문에, 과거의 패턴들을 눈에 익히고 그것을 현재 상황에 대입할 수 있는 정도면 차트를 볼 수 있다고 말할 수 있다 </p>
<h3 id="어떤-식으로-차트를-공부해야-할까">어떤 식으로 차트를 공부해야 할까</h3>
<p>잦은 매매를 통해 내 머리가 기억하게 하면 된다 </p>
<p>첫번째 방법 : 차트의 패턴을 보는 것 </p>
<ul>
<li>캔들의 형태와 움직임</li>
<li>어떤 패턴이 나왔을 때, 평균적으로 상승할 확률이 높다. 확률이 낮다를 파악 </li>
<li>결론적으로 매일같이 수십 가지의 코인 차트를 보면서 그 차트 속에 나오는 패턴들을 자연스럽게 기억에 남도록 하는 것이 중요하다</li>
</ul>
<p>두번째 방법 : 변화하는 패턴을 빠르게 파악하는 것 
24시간 열려 있음
가치를 객관적 판단 어려움
투자 심리에 의해 가격 결정되는 경우가 많음 
=&gt; 그들의 생각을 읽기 위해 노력해야 한다 
차트는 무조건 암기는 권장하지 않는다 같은 패턴을 보이더라도, 그 장세의 분위기에 따라 달라지기 때문에, 단순히 차트의 패턴만 봐선 안된다. 
=&gt; 상황에 따라 변화하는 차트에 대응하는 능력, 즉 빠르게 장세를 캐치하고 장세에 맞는 차트를 적용하는 능력을 기르는 데 포인트를 주고 공부해야 한다 </p>
<h3 id="단타를-칠-때-단기-방향을-예측하는-법">단타를 칠 때 단기 방향을 예측하는 법</h3>
<p>보통 머릿속에 익혀둔 차트 패턴으로 차트 방향 예측 + 차트의 단기 방향을 예측하는 방법 </p>
<p>핵심은
포위망을 좁혀 나가듯이 숲에서 나무를 보는 것 
일봉 -&gt; 4시간봉 -&gt; 1시간봉 -&gt; 30분봉 -&gt; 15분봉 -&gt; 5분봉 
순으로 포위망을 좁히듯이 차트를 보는 것이다 
예시 중요 (중요! 나중에 다시 볼 것)</p>
<h1 id="5분봉-3틱-룰이란-전체적인-장세가-상승-혹은-횡보할-때-조정이-오는-코인의-단기-바닥을-찾는-스킬-분할-매수">5분봉 3틱 룰이란? (전체적인 장세가 상승 혹은 횡보할 때 조정이 오는 코인의 단기 바닥을 찾는 스킬, 분할 매수)</h1>
<p>상승 온 뒤, 조정 후, 반등 지점을 찾는 방법 </p>
<ul>
<li>단타에서 가장 안정적 수익을 내는 방법 : 상승 -&gt; 하락 -&gt; 반등 
자칫 너무 빨리 진입했다가는 큰 손해 볼 우려 있기때문에
5분봉 3틱룰은 진입 시점을 강제적으로 늦춰, 고점에 물리는 것을 방지 
주로 5분봉, 15분봉을 사용하지만 30분 봉까지도 사용할 수 있음 <blockquote>
<p>5분봉 3틱룰의 기본규칙
규칙1) 양봉에서 음봉으로 전환할 때 카운팅하지 않는다. 
규칙2) 1의 상황에서 음봉이 이전 봉들의 평균보다 월등히 클 경우 1틱으로 인정한다. 
규칙3) 음봉 이후, 이전 음봉 대비 일정 크기 이상 차이가 나게 되면 1틱으로 인정해준다. 
단, 이전 봉 마감가보다 높거나 큰 차이가 없으면 같이 묶어주고 틱으로 치지 않는다. 
규칙4) 조금 더 안전하게 하고 싶다면, 해당 분봉이 끝나고 다음 분봉이 갱신된 후, 움직이는 방향을 보고 매수에 들어가도 좋다. 
규칙5) 1차 매수 이후, 규칙 3의 조건에 맞는 음봉이 나오면 분봉이 끝나가기 직전에 2차 매수에 들어간다. </p>
</blockquote>
</li>
</ul>
<p>이 룰을 사용할 때, 같은 3틱에 매수를 하더라도, 캔들 안에서 어느 시점에 매수를 하느냐에 따라 수익률이나 안정성 측면에서 차이가 난다. 
그러므로, 초보자는 3틱째 캔들이 생성되고 마감될때까지 기다렸다가 &#39;마감 시점에 캔들 모양&#39;을 보고 진입하거나, 4틱 캔들이 생기는 것을 보고 진입하라고 권한다. </p>
<p>아래의 꼬리를 길게 그리다가 돌아오는 경우도 많다. 그러므로 충분히 하락되었다는 판단이 들면 5분이 다 끝나지 않더라도 매수해도 되지만 이런 공격적인 방법은 상승장 혹은 &#39;단기 거래량이 폭발하는 지점에서만 사용하는 것&#39;을 권한다. 
보통은 다음 봉이 갱신되는 것을 보면서 들어가는 것이 안전하다. </p>
<h3 id="언제-5분봉-15분봉을-써야할까">언제 5분봉, 15분봉을 써야할까?</h3>
<p>5분봉 </p>
<ul>
<li>비트코인이 단기간에 큰 폭으로 하락하거나, </li>
<li>특정 코인만 별다른 이유 없이 갑자기 많이 빠진 경우에 사용</li>
</ul>
<p>15분봉, 30분봉 </p>
<ul>
<li>비트코인을 비롯한 모든 코인의 매수 심리가 죽어있고 (거래량과 변동성이 없는 장)</li>
<li>가격이 천천히 흐르는 장</li>
</ul>
<h4 id="상황에-맞는-분봉-사용">상황에 맞는 분봉 사용</h4>
<p>!! 상황에 맞는 분봉 사용을 위해서, [그 날의 장세]를 읽는 능력이 매우 중요하다. 
많은 매매 경험을 통해 얻을 수 있다. 
소액이라도 매매를 해보면서 경험을 쌓는 것이 중요하다 
본봉에 따라 진입 시점이 크게 달라지며, 평단도 큰 차이를 보인다. </p>
<h3 id="음봉-사이에-양봉이-뜨는-경우는-언제일까">음봉 사이에 양봉이 뜨는 경우는 언제일까?</h3>
<p>흐름을 깨지않으면 양봉이어도 (앞의 캔들과 묶어) 하나의 봉으로 본다. 
흐름을 깰 정도의 상승이 나온다면, 틱을 초기화해서 다시 시작한다. 
흐름이 깨졌음을 확인 방법 : 하락 대비 현재 상승폭 
하락 포인트 대비 20~30프로 이상 올라갔다면 흐름이 깨졌다고 보고 관망하는 편 </p>
<p>음봉을 깨는 양봉이 나왔을 때, 판단하기 애매하다면 진입하지 말고 상상 매매를 할 것 
어정쩡하게 진입하여 물릴 바에는 차라리 진입을 안하는 것이 낫다. </p>
<h3 id="이전-봉-대비-긴-음봉을-1틱으로-보는-경우는-언제일까">이전 봉 대비 긴 음봉을 1틱으로 보는 경우는 언제일까?</h3>
<p>이전 양봉보다 굉장히 큰 차이가 나는 음봉이 발생했기 때문에 바로 1틱으로 계산 
위 아래로 크게 움직인 양봉이후 음봉 (단기 조정의 압박을 받았을 가능성) 첫 음봉부터 1틱</p>
<h3 id="3틱-진입-후-지속적인-하락이-오면-어떻게-해야할까">3틱 진입 후, 지속적인 하락이 오면 어떻게 해야할까?</h3>
<p>코인의 흐름에 따라, 5,15,30분봉을 유기적으로 사용해야 한다.
하지만 평범하던 장세가 갑자기 급변하는 경우도 종종있다. 
진입 후 갑자기 장세가 변하여 반등이 오지 않고 지속적인 하락 혹은 급격한 하락이 발생한다면 </p>
<p>이럴때는 15분봉으로 전환하여 15분이 지날때마다 1틱을 계산 </p>
<h1 id="찐바닥-잡기--보수적-스킬">찐바닥 잡기 !!!!! (보수적 스킬)</h1>
<p>하락이 오면 반등이 온다는 전제 
찐 바닥이라고 생각이 되면 평소보다 많은 수량을 매수하여 이익을 극대화 
하락세가 약해지면서 바닥을 지지하는 구간 
기다리다가 상승으로 전환하려는 시점에 매수 (주로 5분봉, 상황에 따라 1,3분봉을 보며 바닥을 찾음) </p>
<p>규칙1) 단타 도중에 반등 없이 하락세가 길게 이어지면 더 이상 매수하지 않고 관망한다. 
규칙2) 매도세가 약해지는 지점을 찾는다. (판단 기준)</p>
<p>1) 캔들의 길이가 점점 짧아지면서 매도세가 약해진다. 
2) 이전 캔들의 종가와 현재 캔들의 종가가 거의 차이가 나지 않거나 높아진다 
3) 캔들이 아래꼬리를 그리면서 마감하기 시작한다. 
규칙3) 5분봉을 통해 매도세가 약해지는 것을 판단했다면 1분봉과 3분봉을 통해 교차 검증에 들어간다.
규칙4) 바닥이라고 확인했다면 평소보다 더 많은 수량으로 매수에 들어간다. 
규칙5) 바닥을 지지 하지 못하고 다시 아래로 내려간다면 재빠르게 손절하고 다시 바닥을 잡는다. 
위로 꼬리를 그리면서 상승에 실패하면 추가하락 올 수 있음 </p>
<p>결론 
단기 바닥이라고 생각했던 지점보다 아래로 더 빠질 경우,
이상함을 감지 후 추가 매수하지 않고 관망
매도세가 약해짐을 감지 후 바닥을 지지한다는 판단이 서면, 
평소 매수량 보다 더 많은 (최소 2배이상) 수량을 매수
평단(평균 단가)을 크기 낮춰 반등이 왔을 때, 낮아진 평단으로 쉽게 탈출 </p>
<h3 id="매수-금액은-어느-정도가-적당할까">매수 금액은 어느 정도가 적당할까?</h3>
<ol>
<li>이미 시드가 들어가 있을 때, 
매수 총금액과 유사하게 2배 이상을 넣어 평단을 최대한 낮추고 반등이 왔을 때 빠르게 탈출한다. </li>
<li>무포지션에서 장세가 좋지 않은 상황 
처음부터 찐바닥이 올 때까지 기다렸다가 찐 바닥이라고 생각하는 지점에서 매수 (평소 분할 매수 진입보다 2~3배 많은 수량으로 진입) </li>
</ol>
<h3 id="찐-바닥이라고-생각했는데-아니었다면-어떻게-해야-할까">찐 바닥이라고 생각했는데, 아니었다면 어떻게 해야 할까?</h3>
<ul>
<li>찐바닥 잡기 : 기존보다 매수 수량을 많이 하여 이익을 극대화 하는 전략 </li>
<li>재빠르게 매수한 수량 만큼 손절하고 다시 찐바닥을 잡는 것이 중요 </li>
<li>상승에 실패하는 경우, 혹은 바닥을 너무 오래 다지면 못 올라가는 경우에 재차 하락이 발생할 확률이 높다. </li>
</ul>
<blockquote>
<p>바닥을 잘 잡아서 수익을 극대화 
5분봉 3틱룰
찐바닥 잡기 </p>
</blockquote>
<h3 id="순환매수매도란-일명-순환매">순환매수매도란? 일명 순환매</h3>
<p>바닥을 잘못 잡았을 때 혹은 갑자기 가격 조정이 왔을 때 대응하는 기법 
물타기 기법을 응용한 것 
단기 파동을 먹으면서 평단을 빠르게 낮추고 중간중간 시드를 정리해주면서 시드가 묶이는 것을 방지하는 것이 포인트이다. </p>
<p>하락장에서 오는 단기 반등 구간에서 수익을 발생 
이 수익을 이용하여 평단을 기존 물타기보다 낮춰 탈출 </p>
<h1 id="수익-매매법">수익 매매법</h1>
<h1 id="리스크-관리법">리스크 관리법</h1>
<p>reference 
캔들(시가, 종가, 세력 등) : <a href="https://kr.tradingview.com/chart/BTCUSDT/GCu59ill/">https://kr.tradingview.com/chart/BTCUSDT/GCu59ill/</a></p>
<p><a href="https://m.blog.naver.com/norisknoreturn/222790533139">https://m.blog.naver.com/norisknoreturn/222790533139</a></p>
<p>워뇨띠의 투자법 정리 유튜브 
<a href="https://www.youtube.com/watch?v=EiDXQmOQ6_o">https://www.youtube.com/watch?v=EiDXQmOQ6_o</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[다이어트 2째주 ]]></title>
            <link>https://velog.io/@dev_/%EB%8B%A4%EC%9D%B4%EC%96%B4%ED%8A%B8-2%EC%A7%B8%EC%A3%BC</link>
            <guid>https://velog.io/@dev_/%EB%8B%A4%EC%9D%B4%EC%96%B4%ED%8A%B8-2%EC%A7%B8%EC%A3%BC</guid>
            <pubDate>Wed, 03 Apr 2024 01:23:53 GMT</pubDate>
            <description><![CDATA[<h2 id="월요일">월요일</h2>
<ul>
<li>점심 : 케이준 샐러드 + 건강샌드위치 </li>
<li>저녁 : 라벨라치타 청사포점</li>
<li>운동 : 해운대 1시간 걸음 ... 죽는줄 
<img src="https://velog.velcdn.com/images/dev_/post/a7e98245-d768-42e2-9f21-6587a6dc2417/image.jpeg" alt="">
<img src="https://velog.velcdn.com/images/dev_/post/5eaa1858-f4d6-4a8a-85e3-0a1535048131/image.jpeg" alt="">
<img src="https://velog.velcdn.com/images/dev_/post/ea03bc48-d00d-4094-babf-b674fb81c5bf/image.jpeg" alt="">
<img src="https://velog.velcdn.com/images/dev_/post/79df763c-3ad2-45f1-803a-1552f86f8009/image.jpeg" alt="">
<img src="https://velog.velcdn.com/images/dev_/post/952f8d8e-575e-4e1b-bb0f-eb89b057f8ed/image.jpeg" alt="">
그래도 열심히 걸었다. 
<img src="https://velog.velcdn.com/images/dev_/post/7d0373a5-1b36-4f1a-bd5a-4a20926d6237/image.jpeg" alt="">
<img src="https://velog.velcdn.com/images/dev_/post/dbd82604-2753-4509-ae55-5e1f8d0d7545/image.jpeg" alt=""></li>
</ul>
<h2 id="화요일">화요일</h2>
<ul>
<li>점심 : 햄버거 (500kcal)</li>
<li>저녁 : 케이준 샐러드 + 현미밥 + 일본식 고로케 </li>
<li>운동 : 점심시간 산책 </li>
</ul>
<p>수요일 </p>
<ul>
<li>아침 : (1층에서 나눠준) 감자빵 </li>
<li>점심 : 케이준 샐러드 + 현미밥 + 닭가슴살 </li>
</ul>
]]></description>
        </item>
        <item>
            <title><![CDATA[다이어트 1일차]]></title>
            <link>https://velog.io/@dev_/%EB%8B%A4%EC%9D%B4%EC%96%B4%ED%8A%B8-1%EC%9D%BC%EC%B0%A8</link>
            <guid>https://velog.io/@dev_/%EB%8B%A4%EC%9D%B4%EC%96%B4%ED%8A%B8-1%EC%9D%BC%EC%B0%A8</guid>
            <pubDate>Mon, 25 Mar 2024 13:18:39 GMT</pubDate>
            <description><![CDATA[<p>아침 : 을 안먹었네..?</p>
<p>점심 : 닭가슴살2개 + 현미밥 210g</p>
<p>저녁 : 잡곡밥 + 김치찌개 (조금)</p>
<p>운동 : 코어운동 10분…
물 1L (돼지감자차) 
커피 한잔도 안마심 </p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[flutter] web 개발 준비]]></title>
            <link>https://velog.io/@dev_/flutter-web-%EA%B0%9C%EB%B0%9C-%EC%A4%80%EB%B9%84</link>
            <guid>https://velog.io/@dev_/flutter-web-%EA%B0%9C%EB%B0%9C-%EC%A4%80%EB%B9%84</guid>
            <pubDate>Thu, 20 Jul 2023 02:25:34 GMT</pubDate>
            <description><![CDATA[<h1 id="flutter-web-개발-시-주의사항">flutter web 개발 시 주의사항</h1>
<p>flutter로 web 개발을 해보려고 한다.
그동안 app만 개발했기 때문에 다른 주의할 사항이 있는지 찾아보았다.</p>
<ul>
<li>네비게이션: 주소창, 뒤로가기, 앞으로가기 등</li>
<li>SEO 최적화: 웹 앱의 검색 엔진 최적화(SEO)를 고려 Flutter로 개발한 웹 앱은 JavaScript로 변환되므로, 검색 엔진이 해당 콘텐츠를 인덱싱하고 검색 결과에 표시할 수 있도록 최적화해야 합니다. 페이지 제목, 메타 데이터, URL 구조 등을 적절하게 설정</li>
<li>퍼포먼스: 웹 앱의 성능은 중요합니다. Flutter는 UI를 렌더링하기 위해 Canvas를 사용 =&gt; 효율적 코드를 작성해야 함. </li>
<li>라이브러리 지원: Flutter 웹은 모든 플러그인과 라이브러리가 웹에 대해 완벽하게 지원되지 않을 수 있습니다.</li>
<li>크로스 브라우징: 여러 브라우저 체크 </li>
<li>반응형 디자인: 웹 앱 반응형 </li>
</ul>
<p>=&gt; 주소를 한 곳에서 관리할 수 있는 파일을 하나 만들기 
=&gt; Flutter css 묶음 체계 - UI(반응형) 만 별도 관리할 수 있도록 </p>
<p>reference
<a href="https://booiljung.github.io/technical_articles/flutter/flutter_for_web_create_and_deploy_a_website_from_scratch.html">https://booiljung.github.io/technical_articles/flutter/flutter_for_web_create_and_deploy_a_website_from_scratch.html</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[flutter] 언어팩 개발 ]]></title>
            <link>https://velog.io/@dev_/flutter-%EC%96%B8%EC%96%B4%ED%8C%A9</link>
            <guid>https://velog.io/@dev_/flutter-%EC%96%B8%EC%96%B4%ED%8C%A9</guid>
            <pubDate>Thu, 13 Jul 2023 05:41:43 GMT</pubDate>
            <description><![CDATA[<h2 id="import-library">import library</h2>
<pre><code>  easy_localization: ^3.0.0 #언어팩</code></pre><h2 id="설정">설정</h2>
<h4 id="runapp-전-main-함수-실행-시-모드-초기화">runApp 전 main 함수 실행 시, 모드 초기화</h4>
<pre><code> // 언어 모드 초기화
  await EasyLocalization.ensureInitialized();</code></pre><h4 id="runapp-안에-materialapp-감싸기">runApp 안에 MaterialApp 감싸기</h4>
<pre><code>   runApp(EasyLocalization(
    path: &#39;translations&#39;, // 언어 파일 경로
    supportedLocales: [Locale(&#39;en&#39;, &#39;US&#39;), Locale(&#39;ko&#39;, &#39;KR&#39;)], // 지원 언어
    fallbackLocale: Locale(&#39;en&#39;, &#39;US&#39;), // 설정한 언어가 없는 경우 기본값
    // startLocale: Locale(&#39;ko&#39;, &#39;KR&#39;) // 초기 값 설정 // 초기값 설정 안될 경우, os 따라 감
    child: MyApp(),
  ));</code></pre><h2 id="json-파일">json 파일</h2>
<h4 id="ko-krjson">ko-KR.json</h4>
<pre><code>  {
    &quot;hello&quot;: &quot;안녕&quot;,
    &quot;name&quot;: &quot;이름&quot;,
    &quot;clear&quot;: &quot;청소&quot;,
    &quot;english&quot;: &quot;English&quot;,
    &quot;korean&quot;: &quot;한국어&quot;,
    &quot;chandongi&quot;: &quot;천동이&quot;,
    &quot;myNameIs&quot;: &quot;내 이름은 {}&quot;,
    &quot;namedArgs&quot;: &quot;namedArgs {name}&quot;,
    &quot;argsWithNamedArgs&quot;: &quot;args: {}, {}, Named Args {name}&quot;,
    &quot;mode&quot;:{
        &quot;mode1&quot;:&quot;{}과 함께한다.&quot;,
        &quot;mode2&quot;:&quot;{}와 이별한다.&quot;,
        &quot;mode3&quot;:&quot;{}를 응원한다.&quot;
    }
    &quot;bottom&quot;:{
    &quot;Home&quot;: &quot;Home&quot;,
    &quot;Map&quot;: &quot;Map&quot;,
    &quot;Garage&quot;: &quot;Garage&quot;,
    &quot;Market&quot;: &quot;Market&quot;,
    &quot;Community&quot;: &quot;Community&quot;
  },
}</code></pre><h4 id="en-usjson">en-US.json</h4>
<pre><code>{
    &quot;hello&quot;: &quot;hello&quot;,
    &quot;name&quot;: &quot;name&quot;,
    &quot;clear&quot;: &quot;clear&quot;,
    &quot;english&quot;: &quot;English&quot;,
    &quot;korean&quot;: &quot;한국어&quot;,
    &quot;chandongi&quot;: &quot;chandongi&quot;,
    &quot;myNameIs&quot;: &quot;My Name is {}&quot;,
    &quot;namedArgs&quot;: &quot;Named Args {name}&quot;,
    &quot;argsWithNamedArgs&quot;: &quot;args: {}, {}, Named Args {name}&quot;,
    &quot;mode&quot;:{
        &quot;mode1&quot;:&quot;With {}.&quot;,
        &quot;mode2&quot;:&quot;leave with a {}.&quot;,
        &quot;mode3&quot;:&quot;cheer for {}.&quot;
    }
}</code></pre><h2 id="실행">실행</h2>
<h4 id="버튼을-사용하여-언어-변경-적용해보기">버튼을 사용하여 언어 변경 적용해보기</h4>
<p>context.setLocale(Locale(&#39;ko&#39;, &#39;KR&#39;));</p>
<h4 id="context를-사용하여-text-호출">context를 사용하여 text 호출</h4>
<pre><code>context.tr(&#39;myNameIs&#39;);
context.tr(&#39;myNameIs&#39;, args: [name])
item(&#39;bottom&#39;.tr(gender: &#39;Home&#39;)</code></pre><p>  reference 
  <a href="https://blog.naver.com/chandong83/222422479689">https://blog.naver.com/chandong83/222422479689</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[window10, android emulator 실행안되는 오류 ]]></title>
            <link>https://velog.io/@dev_/34</link>
            <guid>https://velog.io/@dev_/34</guid>
            <pubDate>Tue, 30 May 2023 06:55:59 GMT</pubDate>
            <description><![CDATA[<p>오랜만에 윈도우로 개발을 하는데 android studio 에서 android emulator가 실행되지 않았다.
Android emulator driver도 잘 설치되어 있는데 </p>
<pre><code>android emulator hypervisor driver is not installed</code></pre><p>라고 떴고 확인해보았더니, </p>
<p><img src="https://velog.velcdn.com/images/dev_/post/cfa414a8-484c-4ba3-9211-203ba1260660/image.png" alt=""></p>
<p>지금은 사용이라고 되어있지만, 비활성화 되어있었다.</p>
<p>BIOS를 실행시켜서 SVM Mode 설정을 활성화로 변경해주었다
<img src="https://velog.velcdn.com/images/dev_/post/341a95eb-67c5-46a1-882c-1adbb3b6c499/image.png" alt="">
<img src="https://velog.velcdn.com/images/dev_/post/e130166f-bc33-4973-92e0-317546950c08/image.png" alt=""></p>
<p>F10을 누르고 저장해서 나왔더니, 에뮬레이터가 잘 실행되는 것을 확인할 수 있었다. </p>
<p>REFERENCE
<a href="https://jeunna.tistory.com/139">https://jeunna.tistory.com/139</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[필요 데이터베이스]]></title>
            <link>https://velog.io/@dev_/32</link>
            <guid>https://velog.io/@dev_/32</guid>
            <pubDate>Thu, 25 May 2023 01:07:20 GMT</pubDate>
            <description><![CDATA[<blockquote>
</blockquote>
<ul>
<li>디자인 및 기획서에 <strong>지금까지 나와있는 내용 반영</strong> 추후 변경 가능성 높음 </li>
<li><strong>코인 및 네비게이션</strong> 메인 기능 <strong>변경될 것 같아서 제외</strong> </li>
</ul>
<h3 id="1-member">1. MEMBER</h3>
<ul>
<li>INDEX</li>
<li>SNS_KIND : EMAIL, KAKAO, GOOGLE, TWITTER, FACEBOOK</li>
<li>SNS_IDX : SNS에서 넘겨주는 고유 값</li>
<li>MEM_ID</li>
<li>MEM_PW</li>
<li>NICKNAME </li>
<li>PUSH_TOKEN</li>
<li>이름 등의 고유 정보들 </li>
</ul>
<h3 id="2-car">2. CAR</h3>
<ul>
<li>MEM TABLE INDEX</li>
<li>차량별 레벨 단계 </li>
<li>차량별 총 주행거리</li>
<li>차량별 오늘의 주행거리 값 </li>
<li>나뭇잎, 배터리, 상자 등의 설정들은 변경 가능성 유</li>
</ul>
<h3 id="3-driving_record-주행-기록">3. DRIVING_RECORD (주행 기록)</h3>
<ul>
<li>MEM INDEX</li>
<li>CAR INDEX</li>
<li>TIME</li>
<li>DISTANCE</li>
<li>주행 시작점</li>
<li>주행 종료점</li>
<li>주행 모형</li>
<li>과속 </li>
<li>핸드폰 사용</li>
<li>급제동</li>
<li>급가속</li>
<li>안전운전 점수 </li>
</ul>
<h3 id="4-랭킹">4. 랭킹</h3>
<ul>
<li>랭킹 화면을 띄울 때마다 (회원 테이블, 차량 테이블, 주행테이블)을 조인해서 쿼리하는 것보다 랭킹테이블을 별도로 생성하여 실시간 데이터를 반영하여 해당 테이블을 쿼리해오는게 효율적일 것 같음 </li>
</ul>
<h3 id="5-notice-공지사항">5. NOTICE (공지사항)</h3>
<ul>
<li>INDEX</li>
<li>SHOW COUNT</li>
<li>제목</li>
<li>내용 - 이미지들이 자유롭게 들어갈 HTML 코드 예상</li>
<li>기타 공지사항에 노출될 요소들 </li>
</ul>
<h3 id="6-notice_comment-공지사항-댓글-및-대댓글">6. NOTICE_COMMENT (공지사항 댓글 및 대댓글)</h3>
<ul>
<li>INDEX</li>
<li>NOTICE TABLE INDEX</li>
</ul>
<h3 id="7-community-커뮤니티">7. COMMUNITY (커뮤니티)</h3>
<ul>
<li>INDEX</li>
<li>기타 속성값 </li>
</ul>
<h3 id="8-community_comment-커뮤니티-댓글-및-대댓글">8. COMMUNITY_COMMENT (커뮤니티 댓글 및 대댓글)</h3>
<ul>
<li>INDEX</li>
<li>NOTICE TABLE INDEX</li>
</ul>
<h3 id="8-free_board-자유게시판">8. FREE_BOARD (자유게시판)</h3>
<h3 id="9-advertisement-광고-관리">9. ADVERTISEMENT (광고 관리)</h3>
]]></description>
        </item>
        <item>
            <title><![CDATA[네비게이션 어플리케이션 개발]]></title>
            <link>https://velog.io/@dev_/31</link>
            <guid>https://velog.io/@dev_/31</guid>
            <pubDate>Wed, 24 May 2023 05:43:25 GMT</pubDate>
            <description><![CDATA[<h1 id="들어가기">들어가기</h1>
<p><strong>지도 기능 위주로 서비스를 파악</strong>하기 위해 
아래의 몇가지를 중점적인 목표로 잡고 아래의 글들을 작성하였다.</p>
<ul>
<li>Beta 버전, Map 위주 소스 분석 (완료)</li>
<li>구글 맵 국가별 제공 기능 분석 (완료)</li>
<li>기타 다른 지도 API 제공 기능 분석 (완료)</li>
<li>전체 프로젝트 개발 방향 제안 (완료)</li>
<li>앞으로 사용할 Map 패키지 제안 (완료)</li>
</ul>
<h4 id="간단한-서비스-분석">간단한 서비스 분석</h4>
<ul>
<li>국내뿐아니라 세계적으로 제공할 서비스이기 때문에 서버와 어플리케이션에서 <strong>다국어 지원, 날짜, 시간, 통화, 네트워크 상태 등</strong> 고려해서 개발해야 함</li>
<li>사용자의 <strong>안전주행</strong>이 필수인 서비스이기 때문에 속도, 이동거리, 정확도, 변위값, <strong>국내·외의 도로교통 정보</strong> 형식을 통일하는 등의 효율적으로 개발 및 관리하는 것 중요 </li>
<li>코인 거래도 가능한 서비스이기 때문에 비동기 처리 주의</li>
<li>신규 서비스이기 때문에 앞으로 운영 사항들이 많이 수정될 가능성이 높음 </li>
<li>8월 출시 예정이라고 함 </li>
</ul>
<h4 id="네비게이션-기능-포지셔닝">네비게이션 기능 포지셔닝</h4>
<p>현재 기획된 네비게이션 서비스 수준으로는 주행기록밖에 남기지 않기 때문에, 사용자들은 <strong>타 네비게이션 어플리케이션과 공존해서 사용할 수 밖에 없다고 생각</strong>한다. 
기획상으로는 주행 중 타 어플리케이션(타 네비게이션 어플 포함)을 열면 안전 운전점수가 감소된다. 이 부분에 대한 구체적인 기획이 추가되어야 할 것 같다. 
예상되는 필요 기능들은, 도로 정보 확인, 주행 기록, 타 어플리케이션 실행 확인, 주행 목록 확인, 백그라운드 실행 등의 기능이 필요하다.</p>
<h1 id="beta-version-에서-사용한-map-package-분석">Beta version 에서 사용한 Map package 분석</h1>
<p>기존에 개발된 프로젝트에서 사용한 지도 관련 패키지 목록이다. 
권한 등의 간단한 패키지들은 생략했다.</p>
<p>1) <code>flutter_map</code></p>
<ul>
<li>Open Street Map 패키지이다.</li>
<li>국내, 국외 타일 url 분기 되어 있음 </li>
<li>군사시설로 인해 우리나라는 교통 데이터를 제공 받기 힘듦</li>
<li>간단하게 위경도, 마커, 폴리라인, 원 등 지도 위 표시 용도로 사용</li>
<li>지도에 대해 처리할 수 있는 권한이 굉장히 많다</li>
<li>사용자의 목적에 맞게 다양하게 처리할 수 있다</li>
</ul>
<p>2) <code>flutter_background_geolocation</code> <a href="https://pub.dev/packages/flutter_background_geolocation">pub.dev</a></p>
<ul>
<li>위치 기록 라이브러리</li>
<li>배터리 절약, 동작 감지 센서 탑재, 백그라운드 위치 추적, 지오펜싱 기능 </li>
</ul>
<blockquote>
<h4 id="기존-패키지들을-사용하는-것이-best-인가">기존 패키지들을 사용하는 것이 BEST 인가?</h4>
<p>네비게이션 어플리케이션 개발을 위한 <a href="https://fluttergems.dev/geolocation-maps/"><strong>flutter 커뮤니티 추천 지도 패키지</strong></a>와 <strong>Native단에서 사용할 수 있는 인기 네비게이션 API</strong>글들을 참조하여 정리해보았다.</p>
</blockquote>
<h1 id="google-map-api">Google Map API</h1>
<p>세계 지도를 동일한 사용 환경으로 제공하면서 많은 지도 기능들을 제공받으려면 GOOGLE MAP이 베스트이다.
flutter에서도 패키지로 제공해주는 구글 API부터 안전운행에서 필요한 정보들을 얼만큼 제공해주는지 위주로 분석해보았다. </p>
<h3 id="1-국가별-제공-서비스">1. 국가별 제공 서비스</h3>
<ul>
<li><a href="https://developers.google.com/maps/coverage?hl=ko"><strong>각 국가별 제공되는 위치 기능표</strong></a>를 보면 미국을 포함한 몇몇 국가들은 전체 기능을 제공하지만 대한민국의 경우 극소수의 기능만 제공해준다. (아래 캡처 이미지 참조)</li>
</ul>
<p><img src="https://velog.velcdn.com/images/dev_/post/5ac65ce8-1b54-4ed5-8b0c-2d4cfb410d82/image.png" alt="">
...
<img src="https://velog.velcdn.com/images/dev_/post/63475bec-4c90-4a4f-b4fa-516d1b6f0ff8/image.png" alt=""></p>
<h3 id="2-구글의-대한민국-제공-서비스-굉장히-열악함">2. 구글의 대한민국 제공 서비스 (굉장히 열악함)</h3>
<p>위키에서 <a href="https://namu.wiki/w/%EA%B5%AC%EA%B8%80%20%EC%A7%80%EB%8F%84/%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD">현시점 대한민국 구글 지도에서 제공하는 상세 기능 현황</a>에 대해서 확인할 수 있다.
링크를 보면 확인할 수 있듯이, 국내에서는 많은 서비스들이 미지원되고 있다. 
나중에 기능 추가 시에, 여기에 들어가서 지원 여부를 확인하면 될 것 같다. </p>
<h3 id="3-구글맵의-도로별-속도제한-api">3. 구글맵의 도로별 속도제한 API</h3>
<p>우리가 가장 중요하게 필요하는 기능인 <a 
href="https://developers.google.com/maps/documentation/roads/speed-limits?hl=ko">가장 가까운 도로의 제한 속도 API 사용법 </a>에 대해서 확인할 수 있다. 제공되는 국가이기만 하면 간단하다. 해당 문서를 참조하여 추후 <strong>미제공 국가와 위치정보 제공 형식을 최대한 통일</strong>하려고 한다. 
<img src="https://velog.velcdn.com/images/dev_/post/2e2fb067-276c-424f-9694-8c7aaad156a4/image.png" alt=""></p>
<h1 id="국내-도로교통정보-처리-방안">국내 도로교통정보 처리 방안</h1>
<h2 id="1-google-map-위에-국내-노드링크-별도-처리">1. Google Map 위에 국내 노드링크 별도 처리</h2>
<p>어떤 지도 API를 쓰더라도 국내 맵 API 가 아닌 이상, 국내 도로교통 정보를 받아올 수 없기 때문에 국토교통부가 제공하는 도로 정보를 데이터베이스화 시켜서 작업하는 방법에 대해 정리해보았다. </p>
<h3 id="1-내부-데이터베이스화">1) 내부 데이터베이스화</h3>
<p>내부 데이터베이스는 그 어떤 것보다 속도가 빠르며, 서버 트래픽도 발생하지 않는다는 장점이 있지만, 주기적으로 정보를 업데이트 해줘야하는 단점이 존재한다. 
개발 순서는 아래와 같다.</p>
<h4 id="1-국토교통부가-제공하는-노드링크-데이터-다운로드">1. 국토교통부가 제공하는 노드링크 데이터 다운로드</h4>
<p><A HREF="https://its.go.kr/nodelink/nodelinkRef">한국 도로교통정보</A>에 한국의 도로 정보(노드 : 교차로 정보, 링크 : 도로 정보)를 지리데이터 형식인 SHAPEFILE 파일 형식과 api 형식으로 제공한다.</p>
<blockquote>
<h4 id="shapefile-파일-형식이란">SHAPEFILE 파일 형식이란?</h4>
<p>국토교통부에서 제공해주는 파일을 다운받아서 열어보면 같은 이름의 여러 확장자 형식들의 파일들이 나열되어 있는데 <A HREF="https://gis.stackexchange.com/questions/28105/how-do-i-load-a-dbf-file-into-qgis">관련문서</A>를 찾아서 읽어보니, <strong>여러 확장자 파일이 하나로 합쳐져서 돌아가는 공간데이터</strong>라고 한다. 처음 알았다.</p>
</blockquote>
<h4 id="2-sqlite-데이터베이스에서-좌표값으로-가장-가까운-도로정보-쿼리하기">2. sqlite 데이터베이스에서 좌표값으로 <del>가장 가까운 도로정보 쿼리</del>하기</h4>
<p>어플리케이션 내부 데이터베이스를 생성하고 사용하기 위해 SQLite 패키지를 사용할 예정이다. 우선 컴퓨터에서 데이터베이스를 만들고 테스트해보기 위해, PC SQLite 무료 프로그램인 <a href="https://ddolcat.tistory.com/707#google_vignette">DB Browser</a>을 설치하여 테스트를 진행했다. </p>
<h4 id="3-서버-및-모바일에-최신-지리정보-관리-필요">3. 서버 및 모바일에 최신 지리정보 관리 필요</h4>
<p>대략 1~2달 단위로 지리 정보가 갱신된다. 주기적으로 서버에 데이터베이스화 후, 단말기 내부 SQLite 데이터베이스에 정보를 업데이트 하는 작업이 필요하다. 
사용자가 어플리케이션 실행 시, 서버 정보과 휴대폰 정보 비교 후, 다를 경우 최신 정보로 업데이트 하도록 SQLite 버전 관리 작업이 필요하다. </p>
<h3 id="2-국토교통부에서-제공하는-api-사용">2) 국토교통부에서 제공하는 API 사용</h3>
<p>노드 
<a href="https://www.data.go.kr/data/15057463/openapi.do?recommendDataYn=Y">https://www.data.go.kr/data/15057463/openapi.do?recommendDataYn=Y</a>
링크
<a href="https://www.data.go.kr/data/15056674/openapi.do?recommendDataYn=Y">https://www.data.go.kr/data/15056674/openapi.do?recommendDataYn=Y</a></p>
<h2 id="2-국내-지도-api-사용">2. 국내 지도 API 사용</h2>
<p>국내 API의 장점은 구글 맵에서 제공하지 않는 많은 데이터들을 사용자에게 제공해줄 수 있다. 제한 속도를 포함한 기본적인 국내 도로 교통 정보 뿐 아니라 빠른 길 추천 및 현재 길 막히는지 여부까지, 한번 개발해두면 쉽게 관리 및 확인할 수 있다. </p>
<h4 id="1-카카오-맵-특징">1) 카카오 맵 특징</h4>
<ul>
<li>카카오에서 직접 flutter 패키지 제공하여 빠른 시간 안에 안정적인 국내 서비스 개발 가능 </li>
<li><a href="https://developers.kakao.com/docs/latest/ko/kakaonavi/flutter">https://developers.kakao.com/docs/latest/ko/kakaonavi/flutter</a></li>
<li><a href="https://developers.kakaomobility.com/docs/android-ui-ref-kotlin/class-KNSafety_Camera/">https://developers.kakaomobility.com/docs/android-ui-ref-kotlin/class-KNSafety_Camera/</a></li>
<li><a href="https://developers.kakaomobility.com/product/sdk">https://developers.kakaomobility.com/product/sdk</a></li>
</ul>
<blockquote>
<p><strong>flutter <code>kakao_flutter_sdk</code> 패키지</strong></p>
</blockquote>
<ul>
<li>카카오에서 직접 제공하는 flutter 패키지 이지만, 네비게이션의 모든 기능을 포함한 sdk 형태가 아닌 <strong>네비게이션 앱을 실행시키는 단순한 API</strong>이다.</li>
<li>내 어플리케이션 내에서 Kakao 지도와 가까운 도로의 제한속도를 제공받고 싶은 경우, Kakao Navi sdk with UI를 사용하여 <strong>각 네이티브별로 개발을 진행</strong>해야 한다. 
<a href="https://developers.kakaomobility.com/docs/android-ui/safe-driving/"><strong>Android docs</strong></a> || <a href="https://developers.kakaomobility.com/docs/ios-ui/safe-driving/"><strong>iOS docs</strong></a> </li>
</ul>
<blockquote>
<p><strong>TMAP API 연동 고려</strong></p>
</blockquote>
<ul>
<li><a href="https://tmapapi.sktelecom.com/main.html#webservice/docs/roadApi">Road API</a>를 사용하면 가까운 도로의 제한속도를 던져줌. 가능한 경우, Google MAP API와 연동해서 개발하거나(네이티브별 TMAP SDK 내장할 필요 없음/폴리라인 등의 기능은 구글맵 제공 사용), 각 네이티브별로 TMAP NAVI를 사용하여 개발해야 함. </li>
</ul>
<h4 id="2-티맵-특징">2) 티맵 특징</h4>
<ul>
<li>여러 도로 교통정보뿐 아니라 측위문제들을 개선하여 정확한 GPS 정보를 제공  </li>
<li>터널 측위 문제를 개선 문서 : <a href="https://brunch.co.kr/@tmapmobility/2">https://brunch.co.kr/@tmapmobility/2</a></li>
<li><a href="https://skopenapi.readme.io/reference/%EC%86%8C%EA%B0%9C">https://skopenapi.readme.io/reference/%EC%86%8C%EA%B0%9C</a></li>
</ul>
<h4 id="3-기타-네이버-아이나비">3) 기타 (네이버, 아이나비..)</h4>
<ul>
<li>카카오나 티맵에 비해 우리 서비스에 적용하기 위한 큰 메리트를 찾지 못함 </li>
</ul>
<h1 id="결론">결론</h1>
<h3 id="flutter-커뮤니티-추천-지도-패키지">flutter 커뮤니티 추천 지도 패키지</h3>
<ul>
<li><code>flutter_map</code> : 사용자 최적화하여 다양한 기능을 제공할 수 있도록 권한을 많이 주지만 그만큼 직접 구현해야할 내용이 많음 </li>
<li><code>google_maps_flutter</code> : 해당 라이브러리는 google map을 사용하여 사용자에게 다양한 기능을 제공할 수 있음. 지도 에니메이션 구축 등
추후 본격화된 네비게이션 기능 개발 시, 조금 더 편하게 구현가능하며 유용하게 사용될 수 있음.</li>
<li><code>geolocator</code> : 위치 정보를 받아오는 가장 많이 사용하는 패키지 </li>
<li><code>flutter_background_geolocation</code> : 꽤 많은 기능들이 추가된 위치정보 사용 패키지 </li>
</ul>
<blockquote>
<p>현재 개발하는데 걸리는 시간과 비용을 고려할 때, 가장 베스트는 flutter 에서 <code>google_maps_flutter</code>와 <code>flutter_background_geolocation</code>를 사용하며, 국내 도로교통정보는 <code>국내 노드링크 API</code>를 사용하여 실시간 도로별 제한속도를 받아와서 처리하는 것이다. </p>
</blockquote>
<h1 id="마치며">마치며..</h1>
<h3 id="native에서-저렴하게-사용가능한-꽤-괜찮은-지도-api">Native에서 저렴하게 사용가능한 꽤 괜찮은 지도 API</h3>
<p>비용이 부담스러울 때, Native에서 저렴하게 사용가능한 나름 괜찮은 지도 API들이 있다. 간단하게 홈페이지에서 둘러보았는데 카카오나 구글 맵보다 기본 제공 기능들은 당연히 부족하기 때문에 당연히 개발하는데 시간이 많이 걸리겠지만, 퀄리티가 나쁘지 않아서 기록으로 남겨둔다.</p>
<ul>
<li>맵박스 : <a href="https://www.mapbox.com/">https://www.mapbox.com/</a></li>
<li>오픈레이어 : <a href="https://openlayers.org/">https://openlayers.org/</a></li>
<li>톰톰 : <a href="https://developer.tomtom.com/">https://developer.tomtom.com/</a></li>
<li>히얼 : <a href="https://www.here.com/platform">https://www.here.com/platform</a></li>
<li>Leaflet : <a href="https://leafletjs.com/index.html">https://leafletjs.com/index.html</a></li>
<li>오픈스트리트맵 : <a href="https://www.openstreetmap.org/about">https://www.openstreetmap.org/about</a></li>
</ul>
<h3 id="기타-필요한-기능들">기타 필요한 기능들</h3>
<ul>
<li>신규 버전 스토어 업로드 시, 어플리케이션 업데이트</li>
<li>타 어플리케이션 실행여부 체크</li>
<li>백그라운드 타이머</li>
<li>백그라운드 강제종료 리스너 </li>
<li>PIP 기능 개발</li>
<li>4가지 SNS(카카오, 구글, 트위터, 페이스북) 로그인 기능 개발 </li>
<li>화면 캡처 및 공유를 위한 이미지 엑세스 기능 </li>
<li>다국어 지원을 위한 (국가, 언어)기능 등 </li>
<li>터널과 같은 <strong>GPS 신호 약한 곳의 정확도 향상</strong> </li>
</ul>
<p>시간이 될 때, GPS 신호 정확도에 대한 글을 써보려고 한다. </p>
<h1 id="-추가-결정사항">+ 추가 결정사항</h1>
<blockquote>
<p>지도 : 해외 Google map / 국내 kakao map<br>센서 : <code>geolocator</code> or <code>flutter_background_geolocation</code> 둘 다 써보고 최종으로 어떤 걸 사용할지 결정하기 
서버 : <code>postgreSQL</code> 서버 사용 예정 </p>
</blockquote>
<h1 id="geolocation-패키지-선택">geolocation 패키지 선택</h1>
<h4 id="1-flutter-geolocator">1. Flutter Geolocator</h4>
<ul>
<li><strong>주로 단순한 위치 정보를 가져오는 데 사용되는 패키지</strong>입니다.</li>
<li>GPS 또는 네트워크 기반 위치 정보를 제공</li>
<li>주기적인 위치 정보를 제공하는 함수는 없기 때문에 timer 와 같은 것을 사용하여 호출해야 함. </li>
<li>단순히 위치 정보를 가져오는 기능에 중점. 추가적인 고급 기능은 제공하지 않음.</li>
</ul>
<h4 id="2-flutter-background-geolocation">2. Flutter Background Geolocation</h4>
<ul>
<li>이동 감지, 주기적인 위치 업데이트, 지오펜싱, 이벤트 및 알림 등과 같은 기능을 사용하여 특정 상황에 따른 위치 기반 작업을 수행.</li>
<li>백그라운드에서 실행되는 동안 정확한 위치 정보를 가져올 수 있으며, 이를 사용하여 위치 추적, 경로 기록, 지오펜싱 등과 같은 기능을 구현할 수 있다.</li>
<li>Flutter Background Geolocation은 <strong>사용자가 앱을 종료하거나 재부팅한 경우에도 위치 추적을 유지할 수 있</strong>다.</li>
</ul>
<blockquote>
<h4 id="결론-1">결론</h4>
<p>앱이 백그라운드에서 실행 중일 때 지속적인 위치 추적이 필요하거나 정기적인 위치 업데이트를 수신해야하기 때문에 <strong>Flutter Background Geolocation 패키지를 사용</strong>하기로 함.</p>
</blockquote>
<h1 id="reference">REFERENCE</h1>
<p>각 국가별 제공되는 위치 기능표 
<a href="https://developers.google.com/maps/coverage?hl=ko">https://developers.google.com/maps/coverage?hl=ko</a>
현시점 대한민국 구글 지도에서 제공하는 상세 기능 현황 
<a href="https://namu.wiki/w/%EA%B5%AC%EA%B8%80%20%EC%A7%80%EB%8F%84/%EB%8C%80%ED%95%9C%EB%AF%BC%EA%B5%AD">https://namu.wiki/w/구글%20지도/대한민국</a>
구글을 대체할만한 저렴하나 Native 지도 API
<a href="https://nordicapis.com/5-powerful-alternatives-to-google-maps-api">https://nordicapis.com/5-powerful-alternatives-to-google-maps-api</a>
<a href="https://www.mappr.co/google-places-api-alternatives">https://www.mappr.co/google-places-api-alternatives</a>
viewt <a href="https://viewt.ktdb.go.kr/cong/map/page.do">https://viewt.ktdb.go.kr/cong/map/page.do</a>
국가교통DB센터 <a href="https://www.ktdb.go.kr/www/index.do">https://www.ktdb.go.kr/www/index.do</a>
vworld api 레퍼런스 <a href="https://www.vworld.kr/dev/v4dv_2ddataguide2_s003.do?svcIde=moctlink">https://www.vworld.kr/dev/v4dv_2ddataguide2_s003.do?svcIde=moctlink</a>
네이버 지도 공식문서 <a href="https://api.ncloud-docs.com/docs/ai-naver-mapsdirections15-driving">https://api.ncloud-docs.com/docs/ai-naver-mapsdirections15-driving</a></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[flutter] 비동기 작업 화면 만들기, 나만의  CustomFutureBuilder 위젯 만들기]]></title>
            <link>https://velog.io/@dev_/%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%9E%91%EC%97%85</link>
            <guid>https://velog.io/@dev_/%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%9E%91%EC%97%85</guid>
            <pubDate>Wed, 18 May 2022 11:38:39 GMT</pubDate>
            <description><![CDATA[<h1 id="들어가기">들어가기</h1>
<p>사용자로 하여금, 같은 어플리케이션 내에서 같은 UX를 경험하게 하는 것은 매우 중요하다고 생각한다. 그래서 화면마다 FutureBuilder 위젯을 그대로 사용하지 않고 별도의 CustomFutureBuilder 클래스를 생성하여 한번에 관리할 수 있도록 하는 것이 이번글의 목표이다.</p>
<p>지난 포스팅에서는 flutter 에서 모델 클래스를 만들고 http 패키지를 사용하여 통신하여 받은 결과 JSON을 객체화 하는 내용을 기록했다. 
오늘은 지난글에 이어서 비동기에 대해서 자세히 다루고 화면에 어떻게 나타내는지 보여주려고 한다.</p>
<h1 id="동기-vs-비동기">동기 vs 비동기</h1>
<ul>
<li>동기 : 요청을 한 후 응답이 올 때까지 코드를 진행하지 않고 기다렸다가 응답을 받으면 다음 코드를 순차적으로 진행한다.</li>
<li>비동기 : 요청하고 나서 응답 받지 않았는데도 대기하지 않고 다음 코드를 진행한다. 언제든 응답이 오면 그때 응답을 처리한다. </li>
</ul>
<p>서버 요청과 같이 시간이 오래 걸리는 작업을 기다리는 동안 그 작업이 끝날 때까지 사용자 이벤트나 화면을 처리할 수 없게 되면 성능이 떨어져 보이는 문제가 발생한다. 이럴 때, 비동기적으로 작업을 진행하면 좋다.</p>
<h1 id="future-와-futurebuilder">Future 와 FutureBuilder</h1>
<h2 id="future">Future</h2>
<p>Future는 미래에 받아올 값을 뜻한다. </p>
<pre><code>Future&lt;int&gt; id;
Future&lt;String&gt; name;</code></pre><p>5초 뒤에 숫자를 받아서 result 변수에 저장하는 함수 </p>
<pre><code>Future&lt;int&gt; function() {
    return Future.delayed(
      const Duration(seconds: 5),
      () =&gt; 10,
    );
}</code></pre><h2 id="futurebuilder">FutureBuilder</h2>
<p>Future는 미래의 데이터임으로 바로 화면에 출력할 수 없다.
결과가 나올 때까지 대기했다가 화면에 출력해주는 위젯이 필요한데 FutureBuilder를 사용하면 가능하다.</p>
<p>아래는 <code>FutureBuilder</code>의 가장 기본적인 예제이다.</p>
<pre><code>FutureBuilder(
  future: futureFunction(),
  builder: (context, snapshot) {
    if(snapshot.hasData) {
    return Text(&#39;${snapshot.data}&#39;);
    }
      return CircularProgressIndicator();
})</code></pre><p><code>futureFunction()</code> 함수를 통해 받아온 결과값을 <code>snapshot.data</code>를 통해서 화면에 출력할 수 있다. </p>
<h1 id="await와-async">await와 async</h1>
<p>작업의 처리가 끝날 때까지 대기하고 싶은 비동기 함수가 있을 수 있다. 
혹은 비동기 작업이 끝난 후에 뒤에 작업들이 진행해야 하는 경우가 있다.
이럴 때, then 과 같은 역할이자, 함수 앞에 붙일 수 있는 await 이 있다.</p>
<p><code>await</code> 은 실행 영역에 붙이고, <code>async</code>는 선언 영역에 작성한다.</p>
<pre><code>Future&lt;int&gt; futureFunction() async {
    int a = await funA();
    int b = await funB(a);
    return b;
}</code></pre><h1 id="then-catcherror">then, catchError</h1>
<h3 id="예문">예문</h3>
<p>합을 더해서 3초 뒤에 return하는 함수를 구현했다고 가정해보자.</p>
<pre><code>Future&lt;int&gt; future = sum(1,2);
future.then((value) =&gt; print(&#39;result : $value&#39;));
future.catchError((error) =&gt; print(&#39;error : $error&#39;));</code></pre><h3 id="then과-whencomplete의-차이">then과 whenComplete의 차이</h3>
<p><code>WhenComplete</code>는 Future가 끝나면 무조건 실행된다.
Error 발생 유무에 관계가 없다.</p>
<p>그치만 <code>then</code>은 Error가 Return 되면 출력이 되지 않는다. 
에러없이 결괏값을 Return 받을 때 실행한다.</p>
<p>그때 그때 필요에 따라서 사용하면 될 것 같다.</p>
<h1 id="stream">Stream</h1>
<p>Future가 한번 결과값을 리턴 받는 것에 사용한다면 Stream은 여러번 결과값을 리턴받는데 사용한다. 예전에 한 프로젝트에서 사용한 적이 있는데 다음에 기회가 되면 자세히 포스팅할 예정이다. </p>
<h1 id="나만의-futurebuilder-위젯-만들기">나만의 FutureBuilder 위젯 만들기</h1>
<p>같은 어플리케이션 내에서 같은 UX를 경험하게 하는 것은 중요하다고 생각한다. 그래서 화면마다 FutureBuilder를 그대로 사용하지 않고 별도의 각 화면에서 comlete 화면과 future에 대해서만 정의하면 구현할 수 있도록 CustomFutureBuilder 클래스를 생성하여 같이 관리할 수 있도록 하였다.</p>
<pre><code>class CustomFutureBuilder&lt;T&gt; extends StatelessWidget {
  final Future&lt;T&gt; future;
  final T? initialData;
  final Function(BuildContext context, Object error)? onError;
  final Function(BuildContext context)? onLoading;
  final Function(BuildContext context, T data) onComplete;
  final Function(BuildContext context)? onEmpty;

  const CustomFutureBuilder(
      {Key? key,
      required this.future,
      this.initialData,
      this.onError,
      this.onLoading,
      required this.onComplete,
      this.onEmpty})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    double deviceWidth = MediaQuery.of(context).size.width;
    double deviceHeight = MediaQuery.of(context).size.height;

    return FutureBuilder&lt;T&gt;(
      future: future,
      initialData: initialData,
      builder: (context, snapshot) {
        final status = snapshot.connectionState;

        if (snapshot.hasError) {
          if (onError != null) {
            return onError!(context, snapshot.hasError);
          }
        }

        if (status == ConnectionState.waiting) {
          if (onLoading != null) {
            return onLoading!(context);
          } else {
            return Container(
              width: deviceWidth,
              height: deviceHeight,
              color: BG_COLOR,
              child: const Center(
                child: CircularProgressIndicator(color: PRIME_COLOR),
              ),
            );
          }
        }

        if (status == ConnectionState.done) {
          if (snapshot.hasData) {
            return onComplete(context, snapshot.data!);
          } else {
            if (onEmpty != null) {
              return onEmpty!(context);
            }
          }
        }

        return Container();
      },
    );
  }
}
</code></pre><h1 id="여러종류의-파싱-예제">여러종류의 파싱 예제</h1>
<ul>
<li>List, string, 객체, 여러 종류 리스트 혼합형, CustomScrollView 예제 등 다음에 추가로 작업하도록 하겠다. </li>
</ul>
]]></description>
        </item>
        <item>
            <title><![CDATA[[flutter] 네트워크 통신 REST API]]></title>
            <link>https://velog.io/@dev_/Flutter-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC%ED%86%B5%EC%8B%A0</link>
            <guid>https://velog.io/@dev_/Flutter-%EB%84%A4%ED%8A%B8%EC%9B%8C%ED%81%AC%ED%86%B5%EC%8B%A0</guid>
            <pubDate>Wed, 18 May 2022 11:26:16 GMT</pubDate>
            <description><![CDATA[<h1 id="들어가며">들어가며</h1>
<p>앱이 동작하면서 많은 데이터들을 서버와 주고 받는다.
데이터들을 쉽게 전달하기 위하여, 서로 연관된 데이터들을 구조화 하여 하나의 객체로 형태로 주고 받게 된다. </p>
<p>예를 들어, 한 고객의 {이름, 성별, 생년월일}을 하나의 객체로 표현하며, 한 고객의 관련 데이터들은 곧 하나의 객체로 표현하면 된다.</p>
<h3 id="json">JSON</h3>
<p>JSON은 대표적인 구조화된 데이터 표현 방식이다. 
앱에서 네트워크로 서버와 데이터들을 주고 받기 위해 JSON을 사용하며,
앱에서 서버와 JSON 데이터를 주고 받으려면 인코딩과 디코딩 작업이 필요하다.</p>
<h3 id="json-encode">JSON Encode</h3>
<ul>
<li>Map 형식의 데이터를 문자열로 변환하는 작업</li>
<li>데이터를 서버에 전송할 때 필요<h4 id="jsonencode-함수-사용">jsonEncode() 함수 사용</h4>
</li>
</ul>
<pre><code>String jsonStr = &#39;{&#39;id&#39;:1,&#39;name&#39;:&#39;test&#39;,&#39;age&#39;:10}&#39;;
Map&lt;String, dynamic&gt; map = jsonDecode(jsonStr);</code></pre><h3 id="json-decode">JSON Decode</h3>
<ul>
<li>Json 문자열을 Map 타입으로 변환하는 작업</li>
<li>서버에서 전송된 문자열을 앱에서 사용할 때 필요<h4 id="jsondecode-함수-사용">jsonDecode() 함수 사용</h4>
</li>
</ul>
<pre><code>jsonEncode(map);</code></pre><h1 id="모델-클래스-만들기">모델 클래스 만들기</h1>
<p>문자열로 데이터를 주고 받기 보다는 객체에 대입해서 사용하면 정확한 타입과 변수명이 지정 됨으로 오타나 실수를 예방할 수 있다. 
정교한 프로그래밍을 위해 모델 클래스를 만들어보자.</p>
<pre><code>class User {
  int id;
  String name;

  User({
    required this.id,
    required this.name,
  });
}</code></pre><h3 id="fromjson">fromJson</h3>
<pre><code>  User.fromJson(Map&lt;String, dynamic&gt; json)
      : id = json[&#39;id&#39;],
        name = json[&#39;name&#39;];</code></pre><pre><code>factory User.fromJson(dynamic json) {
  return User(
    id: json[&#39;idx&#39;] as int,
    name: json[&#39;type&#39;] as String,
  );
}</code></pre><h3 id="tojson">toJson</h3>
<p>toJson() 함수는 jsonEncode() 함수 내부에서 자동으로 호출한다.</p>
<pre><code>  Map&lt;String, dynamic&gt; toJson() =&gt; {
    &#39;id&#39; : id,
    &#39;name&#39; : name
  };</code></pre><h3 id="꿀팁-json_serializable-자동-매핑-패키지">꿀팁 json_serializable (자동 매핑 패키지)</h3>
<p>앞으로 많은 양의 모델 클래스를 만들게 될텐데 상당히 귀찮은 작업이다. 
JSON 매핑 코드를 자동으로 만들어주는 패키지가 있으니 참고.</p>
<h1 id="http-패키지로-응답-구현">http 패키지로 응답 구현</h1>
<p>post 통신하는 예제를 구현해보았다.
http.post 함수를 통해 post 통신을 할 수 있고, statusCode가 200일 때, 성공적으로 응답받음을 확인할 수 있다. </p>
<pre><code>import &#39;dart:convert&#39;;
import &#39;package:http/http.dart&#39; as http;

Future&lt;User&gt; fetchUser(String text) async {
  String url = URL을 입력하세요&#39;;

  final Map&lt;String, dynamic&gt; params = {
    &#39;id&#39;: id,
    &#39;name&#39;: name,
  };

  final Map&lt;String, String&gt; headers = {
    &#39;Content-Type&#39;: &#39;application/json; charset=UTF-8&#39;,
    &#39;Authorization&#39;: &#39;Bearer $ApiKey&#39;,
  };

  http.Response response = await http.post(Uri.parse(url),
      body: params, headers: headers);

  // success
  if (response.statusCode == 200) {
    var json = jsonDecode(response.body);
    User user = User.fromJson(json);
    return user;
  }

  // fail
  else {
    throw Exception(&#39;Failed to load data $runtimeType&#39;);
  }
}
</code></pre><p>dio 패키지
파일 전송, 동시 요청, 타임 아웃, 요청 및 응답 가로채기 등 
다양한 함수를 지원하는 패키지이다.
많이 사용한다는데 시간이 될 때, 추가 포스팅하면서 익혀야겠다. </p>
<h1 id="rest-api란">REST API란?</h1>
<h3 id="http-요청에서-제공하는-메서드-종류">HTTP 요청에서 제공하는 메서드 종류</h3>
<h4 id="get-메서드">GET 메서드</h4>
<ul>
<li>서버로부터 데이터를 가져옴</li>
<li>쿼리 매개변수를 사용</li>
</ul>
<h4 id="post-메서드">POST 메서드</h4>
<ul>
<li>데이터를 서버에 저장</li>
<li>body</li>
</ul>
<h4 id="put-메서드">PUT 메서드</h4>
<ul>
<li>데이터를 업데이트</li>
<li>매개변수, body</li>
</ul>
<p>DELETE 메서드</p>
<ul>
<li>데이터를 삭제</li>
<li>매개변수, body </li>
</ul>
<blockquote>
<p>특정 URL이 있을 때, 아무 메서드나 마음대로 지정해서 요청을 보낼 수 있는 건 아닙니다. 서버에 설계된 메서드만 사용할 수 있습니다.</p>
</blockquote>
<h3 id="rest-api--restful-api">REST API &amp; RESTful API</h3>
<p>HTTP의 GET, POST, PUT, DELETE 등의 메서드를 사용해서 통신하는 가장 대중적인 API 입니다.
HTTP를 이용해서 자원을 명시하고 해당 자원에 대한 CRUD(Create, Read, Update, Delete) 연산을 실시합니다. 
균일한 인터페이스, 무상태, 계층화, 캐시 등의 규칙을 맞춘 웹 API 입니다.</p>
<p>기타 자세한 정보는 아래의 블로그에 설명이 잘되어있어서 첨부
<a href="https://velog.io/@somfist/REST%EB%9E%80-REST-API-RESTful-API%EC%B0%A8%EC%9D%B4%EC%A0%90">https://velog.io/@somfist/REST%EB%9E%80-REST-API-RESTful-API%EC%B0%A8%EC%9D%B4%EC%A0%90</a></p>
<h3 id="http-패키지-적용-방법">http 패키지 적용 방법</h3>
<p>위의 소스를 활용하여 http 함수를 아래와 같이 변경하여 호출할 수 있습니다. 
http.get(), 
http.post(), 
http.put(), 
http.delete() </p>
<p>다음 글에서는 FutureBuilder를 사용하여 화면에 나타내는 걸 작성해보도록 하겠습니다. </p>
]]></description>
        </item>
    </channel>
</rss>