<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>juju_.log</title>
        <link>https://velog.io/</link>
        <description>코린이</description>
        <lastBuildDate>Sun, 24 Dec 2023 05:38:05 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <image>
            <title>juju_.log</title>
            <url>https://images.velog.io/images/juju_/profile/735ec3a1-788e-42b8-abe4-0bc99b670c0e/IMG_8411.jpg</url>
            <link>https://velog.io/</link>
        </image>
        <copyright>Copyright (C) 2019. juju_.log. All rights reserved.</copyright>
        <atom:link href="https://v2.velog.io/rss/juju_" rel="self" type="application/rss+xml"/>
        <item>
            <title><![CDATA[내돈내산 리뷰만 걸러 보는 Safari extension 개발 후기 | 사이드 프로젝트]]></title>
            <link>https://velog.io/@juju_/%EB%82%B4%EB%8F%88%EB%82%B4%EC%82%B0-%EB%A6%AC%EB%B7%B0-%EA%B1%B8%EB%9F%AC-%EB%B3%B4%EB%8A%94-Safari-extension-%EA%B0%9C%EB%B0%9C-%ED%9B%84%EA%B8%B0-%EC%82%AC%EC%9D%B4%EB%93%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8</link>
            <guid>https://velog.io/@juju_/%EB%82%B4%EB%8F%88%EB%82%B4%EC%82%B0-%EB%A6%AC%EB%B7%B0-%EA%B1%B8%EB%9F%AC-%EB%B3%B4%EB%8A%94-Safari-extension-%EA%B0%9C%EB%B0%9C-%ED%9B%84%EA%B8%B0-%EC%82%AC%EC%9D%B4%EB%93%9C-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8</guid>
            <pubDate>Sun, 24 Dec 2023 05:38:05 GMT</pubDate>
            <description><![CDATA[<p><img src="https://velog.velcdn.com/images/juju_/post/95883d2a-4ede-4e86-997a-2e2b3f8abe74/image.gif" alt=""></p>
<p>안녕하세용!
오랜만에 돌아왔습니다 ㅎㅎ,,</p>
<p>사실상 사이드 프로젝트 진행하고 나서만 돌아오는 것 같지만,, 암튼,,,</p>
<p>이번에 또 사이드 프로젝트를 진행했고, 나름 홍보 겸 회고 겸.. 해서 .... 글을 씁니다,, ㅎ,,,</p>
<h1 id="ndns---내돈내산-탐지기">NDNS - 내돈내산 탐지기</h1>
<h2 id="🔍-overview">🔍 OVERVIEW</h2>
<blockquote>
<p><strong>프로젝트명</strong>: NDNS - 내돈내산 탐지기(유료) / NDNS lite - 내돈내산 탐지기 lite(무료)
<strong>기획 &amp; 개발 &amp; 디자인</strong>: me
<strong>개발 시작 ~ 앱스토어 출시 기간</strong>: 2023.03.06 - 2023.08.16
<strong>주요 기능</strong>: 네이버 검색 화면 및 플레이스에서 블로그 후기들의 대가성 컨텐츠 여부를 미리 볼 수 있어요!
<strong>기술 스택 및 라이브러리</strong>: React, vite, Typescript, Tesseract.js, emoji-mart, tailwind css, sentry, firebase</p>
</blockquote>
<blockquote>
<p>🫶 다운로드는 여기서! (<a href="https://apps.apple.com/kr/app/ndns-lite-%EB%82%B4%EB%8F%88%EB%82%B4%EC%82%B0-%ED%83%90%EC%A7%80%EA%B8%B0-lite/id6474062471">무료 버전</a> / <a href="https://apps.apple.com/kr/app/ndns-%EB%82%B4%EB%8F%88%EB%82%B4%EC%82%B0-%ED%83%90%EC%A7%80%EA%B8%B0/id6461213251">유료 버전</a>)</p>
</blockquote>
<h2 id="❓-왜-만들었나요">❓ 왜 만들었나요?</h2>
<blockquote>
<p><strong>TL;DR</strong> : 대가성 컨텐츠 열받아서요 🤬</p>
</blockquote>
<p>저는 아무리 생각해도 사이드프로젝트는 <code>내가 쓰고 싶은 거 driven development</code>만 하는 거 같아요 ㅋㅋㅋㅋ
그래서 이것도 <strong>제가 쓰려고 만든 앱</strong>이긴 합니다..</p>
<p>저는.. 물건을 사기 전에 <strong>네이버 검색</strong>을 많이 하고, <strong>블로그 리뷰</strong>들을 주로 참고하는 편이에요. 
그래서 블로그 리뷰를 읽으면서 구매 욕구가 샘솟다가도, </p>
<p><strong>글 맨 밑에 대가성 컨텐츠</strong> (체험단, 원고료) 안내가 나오면 진짜 너무 너무 너무 너무 열받더라구요..
<img src="https://velog.velcdn.com/images/juju_/post/f766d7ad-c09c-4a9b-92eb-8b550efe1134/image.gif" alt=""></p>
<p>왜냐면 제가 알고 싶은 건, 칭찬 일색의 후기가 아니라 <strong>장단점을 고루 알 수 있는 후기</strong> 였거든요..!</p>
<p>그래서 <strong>글을 끝까지 다 읽지 않더라도, 내돈내산 후기인 걸 &quot;미리&quot; 알 수 있는 방법은 없을까?🧐</strong> 라는 생각을 하게 됐고, 앱 개발을 뚝딱뚝딱 해서 출시했습니다!</p>
<h2 id="🤩-그래서-어떻게-동작하나요">🤩 그래서 어떻게 동작하나요?</h2>
<img src="https://velog.velcdn.com/images/juju_/post/b8e49b33-ab67-4461-9bb5-d5995791722a/image.png"  width="50%" height="50%">


<p>이런 식으로 블로그 글 <strong>바로 옆</strong>에 <strong>내돈내산 지수</strong>를 확인하실 수 있어요!</p>
<table>
<thead>
<tr>
<th align="center"><img src="https://velog.velcdn.com/images/juju_/post/938d4cec-0898-4223-9472-06daaaa2e96d/image.JPG" alt=""></th>
<th align="center"><img src="https://velog.velcdn.com/images/juju_/post/7685b1e4-acb3-4003-8f74-eae1320e1262/image.JPG" alt=""></th>
<th align="center"><img src="https://velog.velcdn.com/images/juju_/post/5a5f5894-9c81-4e1c-b340-a64ddd99fb04/image.JPG" alt=""></th>
</tr>
</thead>
<tbody><tr>
<td align="center">VIEW 검색에서도</td>
<td align="center">스마트 검색에서도</td>
<td align="center">플레이스 블로그 리뷰에서도</td>
</tr>
</tbody></table>
<p>내돈내산 지수를 확인하실 수 있어요!</p>
<p>사실... <strong>기술 자체는 너무 간단</strong>한 거라서... 뭐라 설명 적기가 애매하네요 🤭</p>
<h2 id="💻-개발하면서-참고한-것">💻 개발하면서 참고한 것</h2>
<p>익스텐션 개발은 처음이라... 처음에는 플레인하게 html/css/js 파일로만 구현을 하려고 했는데.. 이미 <strong>리액트</strong>에 절여져있는 사람이라 너무 어렵더라구요 ㅠㅠ</p>
<p>그래서 검색을 하다가 발견한 엄청난 <a href="https://github.com/Jonghakseo/chrome-extension-boilerplate-react-vite">보일러플레이트</a>!
이 보일러 플레이트를 사용해서 훅들 알차게 잘 썼습니다.. ㅎㅎ..</p>
<p>그리고 확장 프로그램 공식 도큐멘트 (<a href="https://developer.chrome.com/docs/extensions?hl=ko">크롬</a> / <a href="https://developer.apple.com/documentation/safariservices/safari_web_extensions">사파리</a>) 모두 참고했어요!</p>
<p>또한,,, 빼놓을 수 없는 <strong>갓-GPT</strong>... 이거 없었으면 완성 못했습니다...</p>
<p><del>나름 벨로그 글인데 기술 얘기는 너무 없어서 조금 머쓱하네요.... 제성함다.. 진짜 특별한 기술이 없어서 그래요...</del></p>
<h2 id="❗️-disclaimer">❗️ DISCLAIMER</h2>
<ul>
<li>글을 적다보니 대가성 컨텐츠가 <strong>나쁜 것처럼</strong> 적은 거 같긴 한데, 대가성 컨텐츠가 나쁘다고 생각하진 않아요! 다만 리뷰를 읽기 전에 <strong>기대치 조정</strong>이 어느 정도 필요하다고 생각했어요!</li>
<li><strong>아직 필터링이 완벽하진 않아요!</strong> 버그 제보를 받으면서 더 완벽한 필터링을 하려고 하고 있습니다 ㅎㅎ</li>
<li><strong>네이버 블로그</strong> 글을 <strong>Safari</strong>에서 검색할 때에만 적용이 가능해요!</li>
</ul>
<h2 id="💚-배운-것--느낀점">💚 배운 것 &amp; 느낀점</h2>
<ul>
<li><strong>브라우저 확장 프로그램에 대한 학습!</strong> : 확장 프로그램의 구조에 대해 파악할 수 있었고 learn by doing 제대로 했던 거 같습니당</li>
<li><strong>유료 앱 출시 경험</strong> : 유료 앱 출시하려면 개인 사업자 등록을 해야한다는 거.. 알고 계셨나요? ㅋㅋㅋㅋ 정말... 생소한 경험이었고... 재밌네요..!</li>
<li><strong>네이버 검색화면 구조 학습</strong> : 의도치 않게 학습해버렸습니다... 앱 출시 후에 한 번 네이버 검색화면 리뉴얼이 돼서... 업데이트를 강제로 하기도 했네용 ㅎㅎ,,,</li>
<li><strong>진짜 &quot;사이드&quot; 프로젝트</strong> : 이전에 진행했던 <strong>사이드 프로젝트</strong>들은 사실상 대학생 때.. 시간 많을 때... 진행했던 거라서 &quot;사이드&quot;라고 명명하기 부끄러운... <strong><em>메인</em></strong> 프로젝트였던 거 같은데 이번에는 일하면서 틈틈이 개발을 해서 진짜 <strong><em>사이드</em></strong> 프로젝트를 진행한 거 같아 너무 뿌듯했어요!</li>
<li><strong>나는 역시 재미 위주로 개발하는 게 맞다</strong> : 역시 제가 흥미를 가지고, 재미있어 하는 분야를 개발하는 게 제일 생산성 높다고 느꼈어요. 그리고 다른 분들도 써보면서 긍정적인 피드백 주시면 더 힘나고 그러더라구요 ㅎㅎ</li>
</ul>
<h2 id="🔚-글을-마치며">🔚 글을 마치며...</h2>
<p>이 앱은 제 개인적인 만족을 위해 출시한 거라.. 판매에는 크게 연연하진 않아요! 
그래도 저처럼 <strong>대가성 컨텐츠에 질려버리신 분들</strong>은 <strong><a href="https://apps.apple.com/kr/app/ndns-lite-%EB%82%B4%EB%8F%88%EB%82%B4%EC%82%B0-%ED%83%90%EC%A7%80%EA%B8%B0-lite/id6474062471">무료 버전</a></strong> 이라도 한 번 받아보시길 추천드립니다 ㅎㅎ (무료 버전은 체험단 배너만 필터링해요! 이것만으로도 충분히 유용하긴 할 거예여!)</p>
<p>그러면 글 읽어주셔서 감사합니다!</p>
<p>다음에 또 사이드 프로젝트하면 다시 찾아올게요~~
<img src="https://velog.velcdn.com/images/juju_/post/1b427f50-820a-4d79-9159-bdde1ead3565/image.gif" alt=""></p>
]]></description>
        </item>
        <item>
            <title><![CDATA[[토이 프로젝트] 버츄얼 꽃다발 만들기, 추카헤(Chukahe)]]></title>
            <link>https://velog.io/@juju_/%ED%86%A0%EC%9D%B4-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%B2%84%EC%B8%84%EC%96%BC-%EA%BD%83%EB%8B%A4%EB%B0%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%B6%94%EC%B9%B4%ED%97%A4Chukahe</link>
            <guid>https://velog.io/@juju_/%ED%86%A0%EC%9D%B4-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EB%B2%84%EC%B8%84%EC%96%BC-%EA%BD%83%EB%8B%A4%EB%B0%9C-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%B6%94%EC%B9%B4%ED%97%A4Chukahe</guid>
            <pubDate>Wed, 19 Jan 2022 03:13:39 GMT</pubDate>
            <description><![CDATA[<h1 id="✨-intro">✨ Intro</h1>
<p>안녕하세요! 프로젝트 <strong>간단 소개</strong>를 해보자면
<img src="https://images.velog.io/images/juju_/post/c42eaa57-919f-4a8c-b667-cb0de4c132b9/7A85404F-DEF5-466A-ADAF-573F7DCEC021.gif" alt="">
이렇게 꽃다발을 꾸미고,
<img src="https://images.velog.io/images/juju_/post/2a497f3c-4e17-41f3-914c-7983e2467643/25387C3A-DE5F-4E21-87A6-361AC99D365C.gif" alt="">
이렇게 꽃다발을 들고 사진을 찍을 수 있는… 고런 사이트입니다!</p>
<p>재미있어… 보이나요…? 하핫</p>
<h1 id="🌎-프로젝트-소개">🌎 프로젝트 소개</h1>
<h2 id="👤-만든-사람부터-소개">👤 만든 사람부터 소개</h2>
<p>우선 제 소개부터 드리자면, <a href="https://my-personality.me">내가 보는 나, 남이 보는 나</a>라는 웹사이트를 만들어서 운영하고 있는 문과 대학생입니당!
국비 지원 프로그램으로 6개월간 수업을 들었고, 이젠 끝난 상황이라 뭘 해야할까 방황하던 차에 만들게 되었습니다 ㅎㅎ</p>
<h2 id="💼-기술-스택-및-소요-기간">💼 기술 스택 및 소요 기간</h2>
<ul>
<li><strong>기술 스택</strong>: HTML, JS, React, Styled-components, Recoil, Mediapipe, Firebase (어느정도까지 입력해야 하는지 모루것네유)</li>
<li><strong>소요 기간</strong>: 21/01/01(기획 시작) - 21/01/16(개발 완료)</li>
</ul>
<h2 id="👥-역할분담">👥 역할분담</h2>
<ul>
<li><strong>개발</strong> me</li>
<li><strong>PM</strong> me</li>
<li><strong>디자인</strong> me</li>
<li><strong>꽃다발 그리기</strong> me</li>
<li><strong>잡무</strong> me</li>
</ul>
<p>혁신적인 역할분담..!</p>
<h2 id="💁♀️-기획-배경">💁‍♀️ 기획 배경</h2>
<p>우선 앞서 언급했듯이, 큰 팀플을 하나 마치고 나니 뭘 해야할지 잘 모르겠더라구요..! 그리고 진로 또한 프론트엔드를 하고 싶은지, 아니면 PM 쪽이 더 좋은지도 잘 모르겠어서 그냥 <strong>에라 모르겠다 둘 다 해보자!</strong>라는 생각으로 진행했어요 ㅎㅎ
<img src="https://images.velog.io/images/juju_/post/6014e840-2971-49eb-9495-06aefc2ca1d7/IMG_5995.jpg" alt="">
저는 국비로 코딩을 배우기 직전에 국비로 꽃학원에 등록해서 꽃다발 만들기, 꽃바구니 만들기 같은 걸 배운 적이 있었어요. 그리고 친구랑 같이 고터 꽃시장에도 가서 꽃 사서 같이 꽃 가지고 놀아볼 정도로 꽃을 좋아한…? 사람이었답니다!
그래서 뭔가 프로젝트를 하고는 싶은데.. 뭘 해야할까 고민을 하다 보니, <strong>꽃과 관련된</strong> 프로젝트를 진행하고 싶었어요.
아, 그리고 <strong>산타파이브</strong> 프로젝트를 보니까, 서로 마음을 전하는게 너무 따숩더라구요! 그래서 그런 쪽으로 더 생각을 해봤어요.
사실 꽃다발은  주로 축하할만한 날, 기쁜 날에 주지만, 그 예쁜 꽃을 오랫동안 보기 어렵다는 생각을 했어요. 그리고 코로나가 장기화되면서 사람들을 직접 만나서 축하해주기 어려워졌으니, <strong>가상 꽃다발로 축하하는 그 마음을 전달하고 같이 사진 찍을 수 있게</strong> 하고 싶었어요!</p>
<h2 id="🎯-기능">🎯 기능</h2>
<p>헤헤 기능은 <a href="https://chukahe.com">직접 써보세요</a>!… 라고 하고 싶지만 그래도 알려드려야겠죠?</p>
<h3 id="구글-로그인">구글 로그인</h3>
<p><img src="https://images.velog.io/images/juju_/post/e7239391-aa36-4b52-8366-17db7b36ce9c/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202022-01-19%20%EC%98%A4%EC%A0%84%2011.48.29.png" alt=""></p>
<p>갓갓 파이어베이스,, 하지만 인앱에서는 안되는게 너무 치명적이에요..</p>
<h3 id="꽃다발-만들기">꽃다발 만들기</h3>
<p>포장지와 리본과 꽃들을 고르고 배치한 후 마음을 담은 카드를 남길 수 있어요!
<img src="https://images.velog.io/images/juju_/post/e5d46a62-b38a-45c2-a679-616fdc56a481/bouquet.gif" alt="">
👆 이렇게 다양하게 만들 수 있어요!</p>
<h3 id="꽃다발-부탁하기">꽃다발 부탁하기</h3>
<p>닉네임을 설정하시면 다른 사람들이 나에게 꽃다발을 보내줄 수 있는 링크가 생겨요! 링크를 공유해서 꽃다발을 받아보세용
<a href="https://chukahe.com/makeflowerto/L6FPTV4RZGQdFLyRrvK75R7Be5C3">저에게 꽃다발을 만들어주세요!</a></p>
<h3 id="꽃다발-들고-사진찍기">꽃다발 들고 사진찍기</h3>
<p>이건 Mediapipe에서 제공하는 Hands… 라이브러리..? 를 사용해서 만들었어요! 손 모양을 인식한답니다! 
제가 테스트해본 결과, 맥 사파리, 삼성 인터넷에서는 정상작동하지 않습니다 ㅜㅜ
<img src="https://images.velog.io/images/juju_/post/531274f3-8671-422e-878f-dd4876e751af/flower%2036.png" alt=""></p>
<h1 id="💡-trial--error">💡 Trial &amp; Error</h1>
<p>하하,, 아주 많은 삽질이 존재했습니다,,, 한도 끝도 없지만 그래도 정리해볼까 합니다,,</p>
<h2 id="🖼-그림-그리기">🖼 그림 그리기</h2>
<p><img src="https://images.velog.io/images/juju_/post/9ab80629-a097-48c6-b2a1-93a0deded30d/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202022-01-18%20%EC%98%A4%ED%9B%84%2010.10.17.png" alt=""><img src="https://images.velog.io/images/juju_/post/2e53c5a1-89f3-45a5-ab13-d82c86aa0e70/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202022-01-18%20%EC%98%A4%ED%9B%84%2010.10.25.png" alt="">
사실 <a href="https://my-personality.me">내가 보는 나, 남이 보는 나</a>는 이미지 파일이 거의 없었기 때문에 용량 걱정은 크게 안 했던 거 같아요. 그래서 바이럴해졌을 때도 비용이 아아주 크게 나오진 않았던 거 같아요.
그런데 이번에는 대부분이 이미지 파일이다보니까 용량이 좀 부담되더라구요 ㅜㅜ 그래서 이미지 파일 크기를 얼마나 해야되는지 잘 모르는 채로 일단 그리고 있답니다 ㅎㅎ,,,
그리고 포장지, 리본, 꽃 등은 일정한 순서로 쌓여야 하는 거다 보니까 <strong>일관된 스타일</strong>이 중요하더라구요! 그래서 나름의 틀을 만들어놓기도 했습니당. 
이러케,,, 프로크리에이트의 기능들을 배우게 되었답니다,, ㅎㅎ,,,</p>
<h2 id="🔥-firebase">🔥 Firebase</h2>
<p>지난 프로젝트 때는 무료 기능만 사용하다가 할당량을 넘길 거 같아서 Blaze 요금제로 업데이트 했었는데, 이번에는 아예 Blaze 요금제로 시작해서 functions 기능과 다른 익스텐션 기능들을 사용하고 있어요!
CORS 관련해서 설정하고… 그래서 html2canvas에서 저장이 되도록 했답니다..</p>
<h2 id="📱-페이지-디자인">📱 페이지 디자인</h2>
<p><img src="https://images.velog.io/images/juju_/post/c2b77e3d-117f-4193-8168-dd7ce10ea0fd/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202022-01-18%20%EC%98%A4%ED%9B%84%2010.12.10.png" alt="">
Mobile First로 구현을 하고자 했습니당. 처음엔 그냥 단색으로만 하려고 했는데, 갑자기 글래스모피즘에 빠져서 아주 불투명한 유리 스타일로 했답니다 ㅎㅎ </p>
<h2 id="📸-대망의-꽃다발-들고-사진-찍기">📸 대망의 꽃다발 들고 사진 찍기</h2>
<p>허허….. 참…. 많은 고난이 있었습니다….
처음에는 AR로 하려고 했어용. 근데 AR이 주로 마커 기반, 아니면 위치 기반으로만 작동을 하더라구요. 그래서 마커를 만들었쥬!
<img src="https://images.velog.io/images/juju_/post/c956acfe-bc57-4007-acd9-ff92917905ad/IMG_0410.PNG" alt="">
👆 이런 마커를 아이패드에 띄워서 👇 이렇게 보이게 할 수 있었어요!
<img src="https://images.velog.io/images/juju_/post/970d7cdd-4265-4120-b63f-17ba1a00379e/IMG_0189.jpg" alt=""></p>
<p>그런데, 유저 입장에서 사용성을 생각해보면 이런 마커를 휴대하고 다닌다는게 너무 번거로울 거 같더라구요. 그래서 이걸 어떻게 해야 고칠 수 있을까 생각해보니, 꽃다발은 손에 쥐는 거고, 손을 인식하면 어떨까?라고 생각을 했습니다!
유명한 라이브러리들은 대충 이정도 있더라구요</p>
<ul>
<li><a href="https://github.com/victordibia/handtrack.js/">handtrack.js</a>: 손을 바운딩박스로 잡아서 기각</li>
<li><a href="https://handsfree.js.org/">handsfree.js</a>: 아주 좋았지만 혼자서 무언가를 해보려다가 잘 안돼서 기각 + 모바일 사파리에서 잘 안됨</li>
<li>⭐️<a href="https://google.github.io/mediapipe/solutions/hands#javascript-solution-api">Mediapipe-Hands</a>: <a href="https://codepen.io/mediapipe/pen/RwGWYJw">CodePen</a>에도 예시가 아주 잘 나와있어서 개발하기 아아주 편했슴당 ㅎㅎ </li>
</ul>
<p>넴… 이렇게 미디어파이프를 이용하게 되었습니다……
이번에 이 프로젝트를 진행하면서 Canvas에 대해 아주 많이 찾아보고 배울 수 있었답니다…. 캔버스.. 그 어려운 세계… ㅜㅜ</p>
<p>그래도…. 어려운 기능 끝내고 나니 아주 뿌듯하더라구요.</p>
<h1 id="💌-마친-소감">💌 마친 소감</h1>
<h2 id="아직-홍보는-안-했지만">아직 홍보는 안 했지만…</h2>
<p>이번 프로젝트는 지난 프로젝트(내보나 남보나)를 너무 서둘러서 개발하고 출시했던 점이 아쉬웠어서 조금 시간적 여유를 갖고, 충분히 테스트를 진행한 후 출시를 하려고 해요.
몇몇 찾은 오류들이 존재하기는 하지만 그냥 수용하고 있습니다,, 하핫,,! <del>모두를 만족시킬 순 없죠</del></p>
<h2 id="잘했던-점">잘했던 점</h2>
<ul>
<li>PM의 역할도 해보고 싶어서 백로그들을 관리해서 혼자여도 나름 체계적으로 작업했던 점</li>
<li>제가 잘 모르던, 새로운 기술들을 많이 도입해보려고 한 점(firebase functions, canvas, webRTC 등)</li>
<li>시간을 가지고 테스팅을 충분히 해보면서 오류들을 수정한 점! 닥쳐서 하는 것보다는 좋더만유</li>
</ul>
<h2 id="아쉬운-점">아쉬운 점</h2>
<ul>
<li>그림 그리랴, 라이브러리 찾아보랴, 코딩하랴, 글 쓰랴.... 한 가지에 집중할 수 없어서 그냥 모든 분야의 기본..? 정도만 한 느낌?</li>
<li>이번엔 애드핏 심사가 꽤나 빡세더라구요...? 미리 달아두고 개발을 진행할 걸 그랬습니다,,</li>
</ul>
<h2 id="앞으로는">앞으로는..?</h2>
<ul>
<li>일단은 운영을 해보고, 진로 고민을 더 해볼 거 같습니다 ㅎㅎ...</li>
<li>아니면 약 한 달 반 남은 방학을 만끽해볼까 싶어요..</li>
<li>졸업식 때 <a href="https://chukahe.com">추카헤</a>가 많이 쓰이면 좋겠네유!</li>
</ul>
<p><br /><br />
글 읽어주셔서 감사합니다!
피드백 있으시면 마구마구 주세요! 감사히 듣겠습니당!</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[리액트에 애드센스 달기 성공기]]></title>
            <link>https://velog.io/@juju_/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90-%EC%95%A0%EB%93%9C%EC%84%BC%EC%8A%A4-%EB%8B%AC%EA%B8%B0-%EC%84%B1%EA%B3%B5%EA%B8%B0</link>
            <guid>https://velog.io/@juju_/%EB%A6%AC%EC%95%A1%ED%8A%B8%EC%97%90-%EC%95%A0%EB%93%9C%EC%84%BC%EC%8A%A4-%EB%8B%AC%EA%B8%B0-%EC%84%B1%EA%B3%B5%EA%B8%B0</guid>
            <pubDate>Tue, 09 Nov 2021 13:18:47 GMT</pubDate>
            <description><![CDATA[<h1 id="👋">👋</h1>
<p>안녕하세요! 지난번에 <a href="https://velog.io/@juju_/%EC%BD%94%EB%A6%B0%EC%9D%B4%EC%9D%98-%ED%86%A0%EC%9D%B4%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%A7%84%ED%96%89-%ED%9B%84-%EB%8A%90%EB%82%80-%EC%A0%90-%EB%82%B4%EA%B0%80%EB%B3%B4%EB%8A%94%EB%82%98-%EB%82%A8%EC%9D%B4%EB%B3%B4%EB%8A%94%EB%82%98">토이프로젝트 글</a>을 읽으신 분들이 계실진 모르겠지만.... 그거에 대한 후속편을 준비해 봤습니다 ㅎㅎ,,</p>
<p>바로바로바로....</p>
<h1 id="리액트-페이지에-애드센스-달기">리액트 페이지에 애드센스 달기!</h1>
<p>저는 정말 어렵게 애드센스를 달았던 편이라 꼭 승인 받으면 무조건 후기를 남겨야겠다고 생각을 해왔답니다,, ㅎ,,,
그러면 시작하게씀다..</p>
<h2 id="애드센스-달기-전에는">애드센스 달기 전에는?</h2>
<p>제가 토이프로젝트를 하면서, 돈이 벌리든 안 벌리든 간에 <strong>광고</strong>를 한 번 달아보고 싶다는 생각이 있었습니다!
그래서 비교적 승인이 쉬운 카카오 애드핏을 먼저 달아보기도 하고... 그랬어요.
하지만 약소한 트래픽과 약소한 CPC로 큰 재미는 못 봤답니다,, ㅎㅎ
그러다가 갑자기 확 바이럴해져서..? 트래픽이 몰려서 애드핏도 어느정도 수익이 나오니까 애드센스 욕심이 슬슬 생기더라구요..!
그 전에도 계속 애드센스 승인을 향해 도전을 했지만 계속 거절 당했답니다...</p>
<h2 id="도전">도전</h2>
<p><img src="https://images.velog.io/images/juju_/post/465abd3f-ce77-464b-a4e9-9716976e3b14/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202021-11-09%20%EC%98%A4%ED%9B%84%209.20.50.png" alt="">
보이시나요... 여기에는 총 11번 거절 당한 걸로 나오는데, 제가 메일함에는 전체 14개의 거절 메일이 있답니다,,, 껄껄 😥</p>
<p>이렇게 거절당할 동안, 아무 것도 안 한 건 아니에요!
이때 해봤지만 효과가 있었는지 없었는지 모르는 목록들은 다음과 같습니다.</p>
<ul>
<li>SEO 작업 (react helmet)</li>
<li>구글 서치 콘솔 등록 및 네이버 서치 어드바이저 등록</li>
<li>sitemap 구성</li>
<li>react lazy load 추가</li>
</ul>
<p>이렇게 했지만... 승인이 되진 않더라구요..!
그러다가 여러 유튜브 영상들을 찾아보고, 거기서 흔히 말하는 <code>꼼수</code>가 있다고 해서 열심히 찾고 결국 승인까지 받아냈습니다..!</p>
<h2 id="성공-14전-15기">성공 (14전 15기...)</h2>
<p><img src="https://images.velog.io/images/juju_/post/ad2c696a-9ae1-46d0-8487-07d0819de260/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202021-11-09%20%EC%98%A4%ED%9B%84%209.38.37.png" alt="">
이 언니 너무 만나보고 싶었어요 ㅋㅋ,,,</p>
<p>아무튼 이렇게 결국 성공했답니다..</p>
<h2 id="성공-이유">성공 이유?</h2>
<p>사실 성공한 이유는 정확하게는 모르겠어요.. 하지만 예상할 수 있는 몇 개의 이유들이 있어요!</p>
<ul>
<li>도메인을 구매하고 서치콘솔에서 나온 dns txt를 잘 옮겨놔서..? 암튼 서치콘솔에 도메인 변경 내역이 잘 반영돼서?</li>
<li>트래픽이 잘 터져서?</li>
</ul>
<p>위 두 개도 나름의 이유가 될 거 같긴한데, 가장 큰 원인은 아래일 거 같아요! 아래가 바로 그 &#39;꼼수&#39;입니다 ㅎㅎ,,,,</p>
<ul>
<li>루트에 <code>/blog</code>를 추가하고 500자 이상의 글을 10개 써서.... 입니다.</li>
</ul>
<p>이거를 바로 하고 승인 메일이 오더라구요..! 
진짜 글들을 영끌해서 쓰긴 했는데... 그래도 이게 제일 효과가 있었던 거 같습니다. css는 크게 안 해도 되고, 저는 대역폭 문제도 조금 있어서 최소한으로 하려고 했어요 ㅋㅋㅋㅋ
이렇게 쉬운 일일 줄 알았더라면....... 진작에 했어야 했는데 ㅜㅜ </p>
<p>그리고 제 웹페이지에 광고를 달 때는 <a href="https://satisfactoryplace.tistory.com/151">이 링크</a> 댓글에 있는 코드를 갖고 달았습니다.. 체고체고👍</p>
<h2 id="수익은">수익은?</h2>
<p>수익은.. 토이 프로젝트 치고 매우 만족스럽습니다 후후,,, 🤑
일단 <code>애드핏 vs 애드센스</code>는.... 의미 없죠.. 네... 비슷한 클릭수 나온 금액으로 비교하니까 1:2.5정도 되는 거 같아요 ㅋㅋㅋㅋㅋ 이러니..... 최고 트래픽 터졌을 때 애드센스를 달지 못 했던 게 너무 한이 남네요... ㅜㅜ 
근데 제가 이 웹페이지 배포를 netlify로 해서... 트래픽이 터지면 너무 감사한데,,, 대역폭 감당이 힘들더라구요 ㅜㅜ 아직 정산받은 수익은 없지만 지출한 내역은 존재하는..... 요런 상황스... </p>
<h2 id="애드센스-수익-정산-과정">애드센스 수익 정산 과정</h2>
<p>예상 수입이 $10를 넘기는 순간이 오면 구글측에서 주소 인증하라고 <code>우편</code>(ㄹㅇ 종이 우편)을 발송해줍니당. 도착하는데 2-4주가 걸리고, 그 우편에 있는 핀번호를 애드센스 페이지에 인증하고 계좌 정보를 등록하면 돈 받을 준비는 다 됩니다! 그리고 $100 이상부터 출금이 가능해용~ 저는 이 과정은 다 마쳤고, 빨리 외화통장에 돈이 들어왔으면 합니다 후후
달러로 들어온 건 미국주식 살 때 쓰려구요,, ㅎㅎㅎㅎ</p>
<h2 id="그런데-지금은">그런데 지금은?</h2>
<p><img src="https://images.velog.io/images/juju_/post/0a8b64fd-61c4-421a-afb4-e4c463cefa65/%EC%8A%A4%ED%81%AC%EB%A6%B0%EC%83%B7%202021-11-09%20%EC%98%A4%ED%9B%84%2010.01.22.png" alt="">
ㅠㅠ
<strong>게재 제한</strong>....... 이거는 애드센스 단지 일주일만에 발생했어요....
원인은 <strong>무효트래픽</strong>이라던데.... 음 제가 제 광고를 누르진 않았고, 아마 다른 분들이 몇번 눌렀나보더라구요...... 그래서 지금은 애드센스를 내린 상황이에요 ㅜㅜ
그래도 재발 방지를 위해서.. 구글 애널리틱스에서 광고 누른 IP 추적하는 것도 작업해뒀어요.. 제한 풀리기만 해라...... 무효 클릭한 사람들 다 구글에 신고하려구요..!</p>
<h2 id="글-마침">글 마침</h2>
<p>아무튼 리액트로 작업하시는 분들... 모두 애드센스 다세요....
이렇게 돈을 벌 수 있다는 게 너무 신기하기도 하고, 다음에는 더 좋은 컨텐츠를 만들고 싶다는 생각이 드네용 ㅎㅎ
그러면 글 진짜 마칠게용<del>~</del> <strong>바이</strong>👋</p>
]]></description>
        </item>
        <item>
            <title><![CDATA[코린이의 토이프로젝트 진행 후 느낀 점 - 내가보는나, 남이보는나]]></title>
            <link>https://velog.io/@juju_/%EC%BD%94%EB%A6%B0%EC%9D%B4%EC%9D%98-%ED%86%A0%EC%9D%B4%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%A7%84%ED%96%89-%ED%9B%84-%EB%8A%90%EB%82%80-%EC%A0%90-%EB%82%B4%EA%B0%80%EB%B3%B4%EB%8A%94%EB%82%98-%EB%82%A8%EC%9D%B4%EB%B3%B4%EB%8A%94%EB%82%98</link>
            <guid>https://velog.io/@juju_/%EC%BD%94%EB%A6%B0%EC%9D%B4%EC%9D%98-%ED%86%A0%EC%9D%B4%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%A7%84%ED%96%89-%ED%9B%84-%EB%8A%90%EB%82%80-%EC%A0%90-%EB%82%B4%EA%B0%80%EB%B3%B4%EB%8A%94%EB%82%98-%EB%82%A8%EC%9D%B4%EB%B3%B4%EB%8A%94%EB%82%98</guid>
            <pubDate>Thu, 15 Jul 2021 03:35:36 GMT</pubDate>
            <description><![CDATA[<h1 id="안녕하세요-👋">안녕하세요 👋</h1>
<p>velog에는 처음 글을 남겨봅니다...! 잘 부탁드립니다...?</p>
<br />

<h1 id="우선-제-소개를-드리자면">우선 제 소개를 드리자면...</h1>
<p>저는 아직 대학을 졸업하지 못한.... 문과 학생입니다... 😳</p>
<p>코딩을 처음 접한 것은.. 작년 9월, 학교 수업에서였습니다.. 
사실 쭉 관심은 있어왔지만 너무 어려울 것 같아서 시도할 엄두를 못 냈는데, 학교에서 <strong>3학점짜리 S/U 수업</strong>이 새로 생겼길래 (<del>개꿀!</del>) 호다닥 신청하고, 파이썬과 웹, 크롤링에 대해서 찍먹하는 시간을 가져봤어요 ㅎㅎ
<img src="https://images.velog.io/images/juju_/post/86a6fe2d-b701-4b1c-809e-33d4db9189ff/image.png" width=70%>
이런거 하고 뿌듯해했답니다...</p>
<p>그리고 다음 학기(올해 3월)가 되고 나서는 클론 코딩같은 걸 하면서 <code>react</code>에 대해서 조금 더 공부해보는 시간을 가졌고.. 웹프로그래밍 관련 수업을 들으면서 <code>javascript</code>를 더 배워봤답니다.
그래도 아직 모르는게 훨씬 많지만... 이 수업을 통해서 깃 관련해서도 협업(?)을 조금 배웠고.. firebase 쓰는 방법 등을 배웠어용..</p>
<p>그리고 <strong>지금</strong>은! 국비로 수업을 듣고 있는데, 뭔가 제가 지금까지 알고 있는 걸 바탕으로 무언갈 만들어보고 <strong>서비스</strong>해보고 싶다는 생각이 들었어요!</p>
<h1 id="그래서-만들었습니다">그래서 만들었습니다!</h1>
<p><a href="https://my-personality.netlify.app">&#39;내가보는나, 남이보는나&#39;가 궁금하시다면?</a></p>
<p>설문을 다 하시고 나면
<img src="https://images.velog.io/images/juju_/post/e75f239b-dd49-4d00-9587-0896d489a911/KakaoTalk_20210707_213419330.jpg" width=50%>
이런 식으로 결과를 볼 수 있어요</p>
<br />


<h2 id="만들게-된-계기">만들게 된 계기</h2>
<p>한창 면접을 보러 다니곤 하면, 늘 준비해야 되는 질문들이 있잖아요?
뭐, 성장과정, 역경을 어떻게 이겨냈고, 내 성격의 장단점은 무엇이고.... 등... 이런 걸 준비하다가 <strong>내 진짜 성격은 무엇일까?</strong> 라는 생각이 들었던 것 같아요.</p>
<p>사실 <strong>내 성격</strong>이라는게, <strong>내가 보는 나의 성격</strong>, <strong>친구가 보는 나의 성격</strong>, <strong>가족이 보는 나의 성격</strong>, <strong>지인이 보는 나의 성격</strong> 모두 다 다를 것 같다는 생각이 들었어요!</p>
<blockquote>
<p>그래서 <strong>내가 내 성격을 먼저 평가</strong>하고 <strong>주변 사람들이 각자 나의 성격에 대해 평가</strong>하게 한 후, <strong>약간의 계산</strong>을 통해 <strong>내 진짜 성격</strong>을 찾을 수 있도록 하면 좋겠다!는 생각이 들었어요 ㅎㅎ</p>
</blockquote>
<br/>


<h2 id="원래-하고-싶었던-건-더-많았지만">원래 하고 싶었던 건 더 많았지만...</h2>
<p>사실 제가 개인정보를 잘 처리하지 못할 거라는 확신(?)이 있었기 때문에 <strong>개인정보 수집을 최소화하자!</strong> 가 목표였습니다. 원래는 설문 결과 링크를 이메일로 보내려고 했습니다만... 저의 능력 부족으로.. 무산......
로직을 더 체계적이게 바꿔야 하지만 그건... 나중에 하는 걸로 하고..</p>
<p>시간을 일부러 <strong>일주일</strong>만 잡은 건 아니었지만, 그래도 빨리 출시하고 사람들이 써봤으면 좋겠다는 생각에 무리해서 일주일만에 맞췄답니다...</p>
<br />

<h2 id="제작하면서-힘들었던-점과-배운-점">제작하면서 힘들었던 점과 배운 점</h2>
<h3 id="😎-react-beautiful-dnd">😎 react-beautiful-dnd</h3>
<ol>
<li>draggable에는 inline style 주지 말자. 
 <em>드래그 해도 튕겨나는 오류가 발생한다....</em></li>
<li><code>align-items</code>/ <code>justify-contents</code>: center도 하지말자.
 <em>스택오버플로우에서 하지 말란다</em>
 <em>중앙 정렬을 하고 싶었는데 계속 오류가 나서 찾아보다 보니 <code>&lt;center&gt;</code>이라는 태그가 있어서 호다닥 사용함</em></li>
<li><code>width</code>는 그냥 100%로 주는게 마음이 편하고, <code>margin</code>도 margin-bottom 하나만 주자</li>
<li>props 넘기고 받고 하는게 잘 이해는 안 갔지만... 그래도 툴을 만들어주신 분들께 <strong>무한한 감사</strong>를,,</li>
<li>(공식문서에 있는) 인강이 최고다
 <em>가려운 부분 다 긁어줌</em></li>
</ol>
<h3 id="🔥-firebase">🔥 firebase</h3>
<ol>
<li>내가 console에서 firebase를 확인해보는 것도 할당량에서 카운트가 된다.
 <em>개발할 때 말고는 확인하지 말자 ㅠㅠ</em></li>
<li>실행할 때 왠지 모를 오류가 뜬다면 firebase를 다시 깔자</li>
<li>firebase의 키값들은 <code>.env</code>파일에 꼭 꼭 넣고 <code>.gitignore</code>에 추가하기</li>
<li>다음에 토이프로젝트 만들 땐 통계를 제대로 잡을 수 있도록 만들고 싶다</li>
</ol>
<h3 id="🧷-기능-구현">🧷 기능 구현</h3>
<ol>
<li>다음에는 <strong>데이터베이스</strong>까지 제대로 배워서 조금 더 체계적인 서비스를 만들어보고 싶다.</li>
<li>구글과 스택오버플로우는 나의 친구</li>
<li>netlify로 처음 배포할 때 너무 힘들었는데... 오류가 하도 많았어서 정리도 못함.. 그래도 github에 올릴 때마다 자동으로 다시 배포되는거 너무 너무 좋고 편하다...</li>
<li>리액트는 그 meta 관련 정보가 잘 안뜨는 것 같다..??</li>
<li>능력의 부족으로 뭔가 <code>alert()</code>, <code>prompt()</code>를 좀 많이 쓴 거 같은데.. 나중에는 더 멋진 방식으로 바꿔야지..</li>
<li>원래는 내 성격 10개 고정, 남이 골라준 성격 삭제 불가였지만, 내가 봐도 이 기능들은 수정돼야 할 것 같아서 배포하고 한 이틀동안 열심히 수정함... 아 성격 고르는건 modal 창으로 해결했는데 이것도... 고난의 연속이었다..</li>
</ol>
<h3 id="📢-홍보">📢 홍보</h3>
<ol>
<li>진짜 생각보다 너무 힘들었던 부분..</li>
<li>학교 에타 홍보 + 친구 에타 홍보 + 인스타 홍보를 진행했지만.. 화력은 충분하지 않았다..
 SNS로 <strong>바이럴</strong>해지길 기대했지만, 애초에 이 서비스 자체가 한번 해서 <strong>띡</strong> 결과가 나오는 건 아니기 때문에 무리였던듯...</li>
<li>아무래도 익명성이 있긴 하지만 크지 않다보니 아는 사람들을 위주로 공유해야 하고.. &#39;나도 궁금하다&#39;라는 생각이 크게 들지는 않나보다..</li>
</ol>
<h3 id="🤬-화났던-점">🤬 화났던 점</h3>
<ul>
<li>사람들은 텍스트(설명)을 읽지 않는다... 다 설명에 써있는 내용이지만, 나중에 와서 &#39;어 이거 잘 안되네요&#39; 이런 말을 하는데... 후.. <del>근데 사실 생각해보면 나였어도 그랬을 거 같아서 ㅋㅋㅋ...</del> 아무튼 다음에 서비스를 만들 때 사람들이 <strong>찰떡</strong>같이 알아들을 수 있도록 설명을 써놔야 겠다는 생각이 들었다..</li>
</ul>
<br />

<h1 id="느낀점">느낀점</h1>
<h2 id="더-많이-배워야겠다">더 많이 배워야겠다!</h2>
<p>진짜 비둘기가 목으로 날아다니는 것처럼 어떻게 어떻게 엮고 엮어서 서비스를 하나 만들어내긴 했는데, 만들면서도 느꼈고 만들고 난 후에도 느낀거지만 <strong>아직 많이 부족하다 ㅠㅠ</strong></p>
<h2 id="서비스를-이용해주신-분들에겐-압도적-감사를">서비스를 이용해주신 분들에겐 압도적 감사를..!</h2>
<p>지금 서비스를 이용해주신 분들이 약 800분을 넘겼습니다..
사실 그으렇게 큰 수는 아니지만,, 그래도 저의 보잘것 없는 첫 토이프로젝트에 이렇게나 많은 분들이 참여해주신 것은 정말 너무 감사한 일인 것 같아요🥰
몇몇 분들이 잘 쓰겠다고, 감사하다고 남겨주신 댓글들에 오히려 제가 더 감사해져버리는... 고런 뿌듯한 모먼트도 있었답니당 후후</p>
<h2 id="피드백은-언제나-환영">피드백은 언제나 환영!</h2>
<p>사실 이 프로젝트는 남자친구의 피드백이 한 62.45%정도 반영돼서 나온 것이랍니다! 그런 피드백을 하나만 받았을 때는 &#39;그런가?&#39; 싶었지만, 여러 개 받고 나니 &#39;고쳐야겠다&#39;는 생각이 들더라구요!
그런 의미에서 이 글을 보실...? 보시려나...? 아무튼 보시는 분들은 한 번 들어가셔서 <a href="https://my-personality.netlify.app">체험</a>해보시고 피드백 남겨주시면 정말 정말 감사드리겠습니다! 🙇‍♀️</p>
<br />


<h1 id="끝">끝!</h1>
]]></description>
        </item>
    </channel>
</rss>