<div id="readability-page-1" class="page"><div id="kakaoContent">

                
                <p><time>2021. 9. 11. 11:52</time>
                    <span>
                        
                                                    <a href="#comment" onclick="Utils.smoothScroll(this);return false">
                                
                            </a>
                        
                                                    <span id="title_daumlike">
                                
                                <span id="mobile-reaction"></span>
                                
                            </span>
                                            </span>
                </p>

                                    
                
                <div>
                    <h4 data-ke-size="size20"><b><span># Meme Site (초급)</span></b></h4>
<div data-ke-type="moreLess" data-text-more="더보기" data-text-less="닫기"><p><a>더보기</a></p><div>

<figure data-origin-width="600" data-origin-height="328" data-ke-mobilestyle="widthContent"><span data-url="https://blog.kakaocdn.net/dn/KW0od/btqS1WdbgWL/F0h23kxra8FAOPqKNYLzpK/img.gif" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/KW0od/btqS1WdbgWL/F0h23kxra8FAOPqKNYLzpK/img.gif" data-origin-width="600" data-origin-height="328" data-ke-mobilestyle="widthContent"></span></figure>

<p data-ke-size="size16"><span>- <span>React.js + <span>Redux + </span>Express </span></span></p>
<p data-ke-size="size16"><span>- Masony layout</span></p>
<p data-ke-size="size16">- <span>Image Resizing + upload in AWS S3</span></p>
<p data-ke-size="size16">- swipe to load를 위한 infinite scroll</p>
<p data-ke-size="size16">- jwt 인증 기반 로그인</p>
<p data-ke-size="size16">- Clipboard API</p>
<p data-ke-size="size16">- BackTop</p>

</div>
</div>
<h4 data-ke-size="size20"># <b>Video Site (초급)</b></h4>
<div data-ke-type="moreLess" data-text-more="더보기" data-text-less="닫기"><p><a>더보기</a></p><div>
<p data-ke-size="size16">- Express + Pug template</p>
<p data-ke-size="size16">- Video, Audio tag</p>
<p data-ke-size="size16">- pm2 deploy<span></span></p>
<p data-ke-size="size16">- frerenom을 이용한 무료<span> </span>도메인 주소 (현재 서버 비용 문제로 down되었습니다)</p>
</div>
</div>
<h4 data-ke-size="size20"><b># Movie Web (초급)</b></h4>
<div data-ke-type="moreLess" data-text-more="더보기" data-text-less="닫기"><p><a>더보기</a></p><div><figure><p><span data-url="https://blog.kakaocdn.net/dn/o28Td/btqS1WxBzZp/6Q4SeQRnDi1lVSDZLofRRk/img.png" data-lightbox="lightbox" data-origin-width="397" data-origin-height="298"><img src="https://blog.kakaocdn.net/dn/o28Td/btqS1WxBzZp/6Q4SeQRnDi1lVSDZLofRRk/img.png"></span><span data-url="https://blog.kakaocdn.net/dn/qRQal/btqSSdHB5ep/HJvPOeXYaedqT2Xhe37S7K/img.png" data-lightbox="lightbox" data-origin-width="404" data-origin-height="313"><img src="https://blog.kakaocdn.net/dn/qRQal/btqSSdHB5ep/HJvPOeXYaedqT2Xhe37S7K/img.png"></span></p></figure>

<p data-ke-size="size16">- <span>React +</span><span> Netlify</span></p>
<p data-ke-size="size16"><span>- Nested Routing</span></p>
</div>
</div>
<h4 data-ke-size="size20"><b># Awesome form (초급)</b></h4>
<div data-ke-type="moreLess" data-text-more="더보기" data-text-less="닫기"><p><a>더보기</a></p><div><figure><p><span data-url="https://blog.kakaocdn.net/dn/babl3h/btqSSdU7AXX/wwq0iCjdvo39yaZhbQFIR1/img.png" data-lightbox="lightbox" data-origin-width="1224" data-origin-height="1390"><img src="https://blog.kakaocdn.net/dn/babl3h/btqSSdU7AXX/wwq0iCjdvo39yaZhbQFIR1/img.png"></span><span data-url="https://blog.kakaocdn.net/dn/M4Xb9/btqSXkzaLGh/RFISqpJuxOblriuiw2vLT1/img.png" data-lightbox="lightbox" data-origin-width="991" data-origin-height="330"><img src="https://blog.kakaocdn.net/dn/M4Xb9/btqSXkzaLGh/RFISqpJuxOblriuiw2vLT1/img.png"></span></p></figure>

<p data-ke-size="size16">- CRA를 사용하지 않았습니다. Custom React Build (Webpack 4.42.0 활용)</p>
<p data-ke-size="size16"><span>- Context API</span></p>
<p data-ke-size="size16"><span>- Design System using </span><span>styled-components theming</span></p>
<p data-ke-size="size16"><span><span>- mobile-first</span></span></p>
<p data-ke-size="size16"><span><span><span>- atomic design</span></span></span></p>
</div>
</div>

<h4 data-ke-size="size20"><b><b><b># Next-Cineps</b></b></b></h4>
<p data-ke-size="size18">🏆 해당 프로젝트를 기반으로 한 사업 계획서가 벤처기업협회에서 주관하는 PSWC합격을 받았습니다.<br>🚨 아쉬운 점으론, 인프라에 대한 이해가 전혀 없어서 직접 EC2를 썼다는 점 + CloudFront를 제거하여 S3 본 주소가 노출되다는 점입니다. 다음 프로젝트에서는 컨테이너 기반 배포, OAI를 활용하여 오리진 S3에 직접 접근을 막아 볼 예정입니다.</p>
<figure><p><span data-url="https://blog.kakaocdn.net/dn/X9Ya2/btqWc8WLN6T/IQao8Uhx2GwIKrz73rUMl0/img.png" data-lightbox="lightbox" data-origin-width="960" data-origin-height="720"><img src="https://blog.kakaocdn.net/dn/X9Ya2/btqWc8WLN6T/IQao8Uhx2GwIKrz73rUMl0/img.png"></span><span data-url="https://blog.kakaocdn.net/dn/vAkH9/btqTowZxlzj/4WsUBFWHRv4ZnbgXgk9Hl1/img.png" data-lightbox="lightbox" data-origin-width="1091" data-origin-height="506"><img src="https://blog.kakaocdn.net/dn/vAkH9/btqTowZxlzj/4WsUBFWHRv4ZnbgXgk9Hl1/img.png"></span></p></figure>


<p data-ke-size="size16"><br><span><a href="https://cineps.net/" target="_blank" rel="noopener"><span>https://cineps.net</span></a><span> </span></span></p>
<figure data-ke-type="opengraph" data-og-title="Cineps" data-ke-align="alignCenter" data-og-description="영화를 통해 연결을 꿈꾸는 예술 비평, 창작 커뮤니티 Cineps" data-og-host="www.cineps.net" data-og-source-url="https://cineps.net" data-og-image="https://scrap.kakaocdn.net/dn/cOaK2o/hyI1fMb9Xi/hEffSLZo7rZC7nRSjjIH7K/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/bJ0uB1/hyIZSryB3Y/KXTAQ2K2ByduhIKDK7d1H1/img.png?width=1500&amp;height=750&amp;face=789_39_1246_538,https://scrap.kakaocdn.net/dn/C0cpY/hyI1rToM58/Xq5l5ltFrRVJ2p7yrtQHZ1/img.png?width=2000&amp;height=200&amp;face=0_0_2000_200" data-og-url="https://www.cineps.net"><a href="https://www.cineps.net/" target="_blank" rel="noopener" data-source-url="https://cineps.net">

<div>
<p data-ke-size="size16">Cineps</p>
<p data-ke-size="size16">영화를 통해 연결을 꿈꾸는 예술 비평, 창작 커뮤니티 Cineps</p>
<p data-ke-size="size16">www.cineps.net</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/cOaK2o/hyI1fMb9Xi/hEffSLZo7rZC7nRSjjIH7K/img.png?width=800&amp;height=800&amp;face=0_0_800_800,https://scrap.kakaocdn.net/dn/bJ0uB1/hyIZSryB3Y/KXTAQ2K2ByduhIKDK7d1H1/img.png?width=1500&amp;height=750&amp;face=789_39_1246_538,https://scrap.kakaocdn.net/dn/C0cpY/hyI1rToM58/Xq5l5ltFrRVJ2p7yrtQHZ1/img.png?width=2000&amp;height=200&amp;face=0_0_2000_200"></figure>
<div data-ke-size="size16"><p><b><span>3-</span></b><span><b>tier</b> <b>architecture</b> : </span>web(nginx, next)-was(express)-db(mongoDB atlas)<br><span>Next.js(SSR + CSR) + Redux + MongoDB + Express + AWS</span></p><p>- AWS ACM SSL 인증서 + route53<br>- nginx 리버스 프록시<br><span>- svg로 직접 그린 FullPageLoader<br>- MongoDB projection + index를 통한 DB 튜닝 + <span>Pagination</span></span><br>- Cloudflare <br>- Social Login (Google Auth)<br>- 대댓글 및 좋아요<br>- Quill 텍스트 에디터<br>- webpack-bundle-analyzer<br>- Treeshaking, <span>gzip 압축</span><br><span><span>- styled-compoment theme을 통한 디자인 시스템 + 애니메이션 관리</span></span><br><span><span>- Log rotate (<span>pm2 logrotate)</span></span></span></p><s><span>- Redis caching server</span></s></div>

<h4 data-ke-size="size20"><b>Fuze</b></h4>
<div data-ke-size="size16"><br><u>구현은 전부 완료</u><p>되었으나 50명 가량의 심층적인 베타테스트 결과, 오프라인에서 진행하는 것이 고객 segment에 더 적합하다고 판단하여 정지되었습니다.</p><p><a href="https://fuzekorea.com/" target="_blank" rel="noopener"><span>https://fuzekorea.com</span></a></p></div>
<figure data-ke-type="opengraph" data-og-title="나만을 위한 원어민 파트너를 만나다" data-ke-align="alignCenter" data-og-description="Fuze는 원어민 회화 과외를 주선해주는 프리미엄 매칭 플랫폼입니다" data-og-host="www.fuzekorea.com" data-og-source-url="https://fuzekorea.com" data-og-image="https://scrap.kakaocdn.net/dn/bfuvv1/hyJ0CfOnCj/eM1coVrnGITnnvPmDDJEKK/img.png?width=800&amp;height=400&amp;face=0_0_800_400,https://scrap.kakaocdn.net/dn/lQp8a/hyJ0vOwRE8/bmGAqXpKv61IWGLyZOnfw0/img.jpg?width=623&amp;height=943&amp;face=244_296_297_354,https://scrap.kakaocdn.net/dn/boITU5/hyJ0ELtZ7H/Ez8GQJ2l66VYOZEEPs7Cfk/img.jpg?width=623&amp;height=943&amp;face=41_17_342_288" data-og-url="https://www.fuzekorea.com"><a href="https://www.fuzekorea.com/" target="_blank" rel="noopener" data-source-url="https://fuzekorea.com">

<div>
<p data-ke-size="size16">나만을 위한 원어민 파트너를 만나다</p>
<p data-ke-size="size16">Fuze는 원어민 회화 과외를 주선해주는 프리미엄 매칭 플랫폼입니다</p>
<p data-ke-size="size16">www.fuzekorea.com</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/bfuvv1/hyJ0CfOnCj/eM1coVrnGITnnvPmDDJEKK/img.png?width=800&amp;height=400&amp;face=0_0_800_400,https://scrap.kakaocdn.net/dn/lQp8a/hyJ0vOwRE8/bmGAqXpKv61IWGLyZOnfw0/img.jpg?width=623&amp;height=943&amp;face=244_296_297_354,https://scrap.kakaocdn.net/dn/boITU5/hyJ0ELtZ7H/Ez8GQJ2l66VYOZEEPs7Cfk/img.jpg?width=623&amp;height=943&amp;face=41_17_342_288"></figure>
<figure><p><span data-url="https://blog.kakaocdn.net/dn/nfHGA/btqXRwHwR4g/nf7zZiIzUzn4Cc18BuNFEK/img.png" data-lightbox="lightbox" data-origin-width="1258" data-origin-height="554"><img src="https://blog.kakaocdn.net/dn/nfHGA/btqXRwHwR4g/nf7zZiIzUzn4Cc18BuNFEK/img.png"></span><span data-url="https://blog.kakaocdn.net/dn/bDnF4C/btq4bPaMS9u/veBWYnyxvCZYaSYVWbKEek/img.png" data-lightbox="lightbox" data-origin-width="807" data-origin-height="778"><img src="https://blog.kakaocdn.net/dn/bDnF4C/btq4bPaMS9u/veBWYnyxvCZYaSYVWbKEek/img.png"></span></p></figure><figure><p><span data-url="https://blog.kakaocdn.net/dn/C0KZ4/btq4cvJDavm/QluphTK8kZeKCFZTiBiLok/img.png" data-lightbox="lightbox" data-origin-width="1710" data-origin-height="862"><img src="https://blog.kakaocdn.net/dn/C0KZ4/btq4cvJDavm/QluphTK8kZeKCFZTiBiLok/img.png"></span><span data-url="https://blog.kakaocdn.net/dn/erd3km/btq4boklDeV/lWv2MZKkv4MLozMUvUPwkK/img.png" data-lightbox="lightbox" data-origin-width="1061" data-origin-height="662"><img src="https://blog.kakaocdn.net/dn/erd3km/btq4boklDeV/lWv2MZKkv4MLozMUvUPwkK/img.png"></span></p></figure>
<div data-ke-size="size16"><p><span>Next + Node.ts + MariaDB</span><br><span>web(nginx)-was(Node)-db(AWS RDS <span>Maria DB</span>)</span></p><p>- typescript<br>- 커스텀 달력과 glide.js를 활용한 타임라인 구현<br>- intersection Observer<br><span>- nginx web server =&gt; 리버스 프록시, let's encrypt</span><br><span>- react-spring</span><br><span><span>- kakao 비즈니스 채널, 비즈메세지</span></span><br>- custom hook 제작(DetectOutsideDomEvent, SetIntervalWrapper, useScrollFadeIn)</p></div>
<h4 data-ke-size="size20"><b>autoFuzzy</b></h4>

<figure data-ke-type="opengraph" data-og-title="DarrenKwonDev/autoFuzzy" data-ke-align="alignCenter" data-og-description="🇰🇷 한국어 특성을 반영한 자동 완성, 일치 검색, 퍼지 검색. auto complete, korean consonant matching, and fuzzy search. - DarrenKwonDev/autoFuzzy" data-og-host="github.com" data-og-source-url="https://github.com/DarrenKwonDev/autoFuzzy" data-og-image="https://scrap.kakaocdn.net/dn/eAtBI/hyKrGahypu/tEfAZCRkD9QyEnLkW7b79K/img.png?width=1200&amp;height=600&amp;face=0_0_1200_600" data-og-url="https://github.com/DarrenKwonDev/autoFuzzy"><a href="https://github.com/DarrenKwonDev/autoFuzzy" target="_blank" rel="noopener" data-source-url="https://github.com/DarrenKwonDev/autoFuzzy">

<div>
<p data-ke-size="size16">DarrenKwonDev/autoFuzzy</p>
<p data-ke-size="size16">🇰🇷 한국어 특성을 반영한 자동 완성, 일치 검색, 퍼지 검색. auto complete, korean consonant matching, and fuzzy search. - DarrenKwonDev/autoFuzzy</p>
<p data-ke-size="size16">github.com</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/eAtBI/hyKrGahypu/tEfAZCRkD9QyEnLkW7b79K/img.png?width=1200&amp;height=600&amp;face=0_0_1200_600"></figure>
<div data-ke-size="size16"><p>- typescript<br>- git hook (husky)</p></div>

<h4 data-ke-size="size20"><b>DarrenyTalk (제작중)</b></h4>

<p data-ke-size="size16">웹 사이드프로젝트에서 유저의 의견을 수집할 수 있는 간단한 형태의 챗봇 (intercom이나 channeltalk와 비슷한 형태)</p>

<p data-ke-size="size16">- React</p>
<p data-ke-size="size16">- socket.io</p>
<p data-ke-size="size16">- 간단한 챗봇 구현</p>



<h3 data-ke-size="size23"><span>⏱ </span>중단된 프로젝트들</h3>
<h4 data-ke-size="size20"><b>PopKorn</b></h4>
<div data-ke-size="size16"><p><span><span>👋 </span>(구) 비즈니스캔버스의 사업 지도를 받아 만든 제품입니다.</span><br>👋 다양한 국적의 개발자들과 함께 하였습니다.</p><p>Django + Flutter</p><p>한국어 교육 모바일 어플리케이션, MVP</p><p>- Django<br>- Flutter<br>- Youtube API</p></div>
<figure data-origin-width="1506" data-origin-height="624" data-ke-mobilestyle="widthContent"><span data-url="https://blog.kakaocdn.net/dn/cK8wyg/btqY7nXkEgF/GAFegj7ucFCqFE9lwkzZMK/img.png" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/cK8wyg/btqY7nXkEgF/GAFegj7ucFCqFE9lwkzZMK/img.png" data-origin-width="1506" data-origin-height="624" data-ke-mobilestyle="widthContent"></span></figure>

                                                            
                    
					
                    
                    
                </div>

                                    
                
                
                                    
                
                


                

                                    
                
                
            </div></div>

HotHandCoding

DarrenKwon

# Meme Site (초급)
더보기
 
 
- React.js + Redux + Express 
- Masony layout
- Image Resizing + upload in AWS S3
- swipe to load를 위한 infinite scroll
- jwt 인증 기반 로그인
- Clipboard API
- BackTop
 
# Video Site (초급)
더보기
- Express + Pug template
- Video, Audio tag
- pm2 deploy
- frerenom을 이용한 무료 도메인 주소 (현재 서버 비용 문제로 down되었습니다)
# Movie Web (초급)
더보기
 
- React + Netlify
- Nested Routing
# Awesome form (초급)
더보기
 
- CRA를 사용하지 않았습니다. Custom React Build (Webpack 4.42.0 활용)
- Context API
- Design System using styled-components theming
- mobile-first
- atomic design
 
# Next-Cineps
  해당 프로젝트를 기반으로 한 사업 계획서가 벤처기업협회에서 주관하는 PSWC합격을 받았습니다.
  아쉬운 점으론, 인프라에 대한 이해가 전혀 없어서 직접 EC2를 썼다는 점 + CloudFront를 제거하여 S3 본 주소가 노출되다는 점입니다. 다음 프로젝트에서는 컨테이너 기반 배포, OAI를 활용하여 오리진 S3에 직접 접근을 막아 볼 예정입니다.
 
더보기
 
 
https://cineps.net 
3-tier architecture : web(nginx, next)-was(express)-db(mongoDB atlas)
Next.js(SSR + CSR) + Redux + MongoDB + Express + AWS
- AWS ACM SSL 인증서 + route53
- nginx 리버스 프록시
- svg로 직접 그린 FullPageLoader
- MongoDB projection + index를 통한 DB 튜닝 + Pagination
- Cloudflare 
- Social Login (Google Auth)
- 대댓글 및 좋아요
- Quill 텍스트 에디터
- webpack-bundle-analyzer
- Treeshaking, gzip 압축
- styled-compoment theme을 통한 디자인 시스템 + 애니메이션 관리
- Log rotate (pm2 logrotate)
- Redis caching server
 
Fuze
구현은 전부 완료되었으나 50명 가량의 심층적인 베타테스트 결과, 오프라인에서 진행하는 것이 고객 segment에 더 적합하다고 판단하여 정지되었습니다.
https://fuzekorea.com
Next + Node.ts + MariaDB
web(nginx)-was(Node)-db(AWS RDS Maria DB)
- typescript
- 커스텀 달력과 glide.js를 활용한 타임라인 구현
- intersection Observer
- nginx web server => 리버스 프록시, let's encrypt
- react-spring
- kakao 비즈니스 채널, 비즈메세지
- custom hook 제작(DetectOutsideDomEvent, SetIntervalWrapper, useScrollFadeIn)
autoFuzzy
한국어 특성을 고려한 일치 검색, 초성 검색, 정규식을 활용한 간단한 fuzzy 검색.
벤처창업론 수업 중 poc의 개념으로 제작.
https://github.com/DarrenKwonDev/autoFuzzy
- typescript
- git hook (husky)
 
DarrenyTalk (제작중)
 
웹 사이드프로젝트에서 유저의 의견을 수집할 수 있는 간단한 형태의 챗봇 (intercom이나 channeltalk와 비슷한 형태)
 
- React
- socket.io
- 간단한 챗봇 구현
 
 
 
⏱ 중단된 프로젝트들
PopKorn
  (구) 비즈니스캔버스의 사업 지도를 받아 만든 제품입니다.
  다양한 국적의 개발자들과 함께 하였습니다.
Django + Flutter
한국어 교육 모바일 어플리케이션, MVP
- Django
- Flutter
- Youtube API

Portfolio

댓글