투자/ETF

[국내 ETF] 정말 쉽게 미국 우량 기술주에 분산투자하는 방법 - KODEX 미국 FANG 플러스(H)

한국에서 미국 주식에 투자를 하려고 한다면 번거로운 점이 정말 많습니다. 가뜩이나 변동성이 많은 시장인데 시차도 있고 등락이 발생할 때 제대로 대응할 수도 없고 쉽지 않습니다. 제가 가장 귀찮았던 점은 바로 환전을 해야 된다는 점이었습니다. 그래서 국내 시장에서 미국 우량 기술주를 모아놓은 ETF는 없을까 고민했고, 찾아낸 국내 ETF가 TIGER 나스닥100도 있겠지만 제가 소개해드릴 ETF는 바로 KODEX 미국 FANG 플러스(H)입니다. KODEX 미국 FANG 플러스(H)란? KODEX 미국 FANG 플러스(H)(코덱스 미국 FANG 플러스, 코덱스 미국팡플러스)는 미국의 대표 기술주에 투자하는 국내 ETF입니다. 페이스북, 아마존, 넷플릭스, 구글 등 최고의 혁신 기업으로 평가받는 차세대 기술..

개발/Vue

Vue watch에 lodash debounce 적용하는 방법

Vue에서 watch에 lodash debounce를 사용하는 방법은 매우 간단합니다. watch로 감지할 데이터 프로퍼티로 값을 지정하는 함수를 debounce로 감싸면 해결됩니다. 예시

강의/Framer

[예제를 통해 학습하는 프레이머(Framer) #3-2] Overlay Effect를 활용한 Draggable Sheet UI 구현

Draggable Sheet? 애플리케이션을 사용하면서 위에서 아래로 끌어내리거나 아래에서 위로 끌어올리는 UI를 접해본 적이 있을 텐데요. 정말 대부분 애플리케이션에서 이 모션을 사용한다고 해도 무방할 정도로 굉장히 많이 사용되는 기능 중 하나입니다. 프레이머를 활용하면 정말 간단하게 Draggable Sheet UI를 구현할 수 있습니다. ❗️ 시작하기 전에 혹시 아직 Framer 계정을 가입하지 않으셨거나 프레이머 사용방법을 모르시는 분은 아래를 참고해서 계정 등록을 하고 Framer 프로젝트 생성까지 하시기 바랍니다. [개발자가 알려주는 Framer X #0] 프레이머 쉽게 시작해보자. 📑 프레이머란? 프레이머는 애니메이션, 터치 기반 제스처 및 스크롤, 페이징 및 인터페이스 흐름을 위한 여러 재..

투자/삼성전자우 모으기

[투자일지 #17] 하루에 1~2주씩 개미처럼 삼성전자우(삼전우) 모으기 [27/2000]

👏 오늘도 어김없이 삼전우를 매수하다 오늘의 삼성전자우 매수 가격은 47,150원 초반에 47,000원 아래에 가격이 형성되어 있을 때 구매할걸 그랬다. 아쉬움이 많이 남는다. 거의 30개 가까이 모아가면서 삼전우 가격은 폭등, 폭락 없이 꾸준하게 4만 원대를 횡보하고 있다. 안정적이라 마음이 놓인다. 💵 보유현황 오늘까지 삼전우 총 27주를 보유하게 됐다. 평가손익은 12,271원 평균단가 47,526원 손익률은 0.98%로 나름 선방하고 있다. 이번주에 목표하고 있는 30주를 달성할 수 있을 것 같다. 하루에 1주씩 매수하다 보니 어느덧 30주가 눈앞에 있다. 내일은 조금 더 싼 가격에 매수할 수 있는 기회가 있길 바라며.. 🏦 시장현황 차트를 보듯이 오늘 매수 가는 거의 최고가로 매수했다. 46,8..

개발/Framer

Framer와 Framer X의 차이점 (Differences between Framer and Framer X)

Framer X? Framer Web은 Framer X의 후속 버전이 아니라 브라우저에서 편하게 사용할 수 있는 또 다른 브라우저 기반 웹 애플리케이션입니다. macOS 데스크탑 애플리케이션인 Framer X는 Framer Web과 같이 공존하고 있으며 Pro 또는 Enterprise 요금제에서 사용할 수 있습니다. 📣 Framer X에서 Framer로 이름만 변경되었을 뿐 모든 부분은 기존과 동일합니다. Framer Web and Framer Desktop App 그러므로 기존 Framer X는 Framer로 이름이 바뀌었고, 이제 브라우저 기반 웹 애플리케이션 Framer Web과 데스크탑 애플리케이션 Framer App (기존 Framer X)으로 구성되어 있다고 보시면 됩니다. Framer 데스크..

투자/삼성전자우 모으기

[투자일지 #16] 하루에 1~2주씩 개미처럼 삼성전자우(삼전우) 모으기 [26/2000]

👏 오늘도 어김없이 삼전우를 매수하다 어제 삼성전자우 매수 가격은 47,200원. 시간외종가로 매수했다. 47,000원 아래로 매수해야 기분이 좋은데 비싼 가격에 매수해서 많이 아쉽다. 💵 보유현황 어제 매수한 삼전우까지 합해서 총 26주를 모았다. 평가손익은 15,032원 손익률 1.25%로 기분 좋은 흐름으로 가져가고 있다. 평균단가는 많이 아쉽다. 46,502원.. 수량을 모으려면 조금 더 싼 가격까지 와야지 2주씩 매수해서 개수를 더 늘릴텐데.. 🏦 시장현황 ✨ 마무리 조금 기분좋은 상황이라면 연금계좌로 매수한 KODEX 미국FANG플러스 ETF가 손익률이 11.63%가 넘었다. 10만원 언저리만 매수했는데 벌써 1만원을 벌어다주다니.. 연금계좌는 월 34만원씩 납입 중이고 주식 50% 채권 50..

강의/Framer

[개발자가 알려주는 프레이머(Framer) #1-1] Frame 컴포넌트 완벽정리 (Frame 정의, Layout, Visual)

✍️ Frame이란? 레이아웃, 스타일, 애니메이션 및 이벤트를 위한 기본 컨테이너입니다. 프레임 컴포넌트는 작업을보다 빠르게 수행 할 수 있도록 다양한 옵션과 기본값을 가진 div입니다. 프레임 컴포넌트를 사용하면 아래의 특성을 이용할 수 있습니다. - 크기와 레이아웃을 설정할 수 있습니다. - 수평, 수직 중앙정렬을 설정할 수 있습니다. - 색상이나 배경 이미지를 변경할 수 있습니다. - 상태에 따른 애니메이션을 추가할 수 있습니다. - 데스크톱 및 모바일에서 작동하는 탭 이벤트를 추가할 수 있습니다. - 드래그와 같은 제스처를 구현할 수 있습니다. - 팬과 같은 고급 제스처에 반응하도록 할 수 있습니다. ⚙️ 특징 Performance 애니메이션에서 최고의 성능을 얻으려면 GPU 가속을 활용하세요...

강의/Framer

[예제를 통해 학습하는 프레이머(Framer) #3-1] Overlay Effect를 활용한 UI 구현(Bottom Sheet, Draggable Sheet, Modal Box, Side Menu)

이번 포스팅에서는 프레이머에서 제공하는 Overlay Effect를 활용해서 아래의 UI 요소들을 구현해보겠습니다. 개인적으로 일상에서 가장 많이 접할 수 있는 UI 요소들인데 바로 Bottom Sheet, Draggable Sheet, Modal Box, Side Menu입니다. 단어로 설명드려서 어떤 건지 감이 안 오실 수도 있으니 아래 예시를 같이 볼까요? 📑 Overlay Effect 예시 이처럼 애플리케이션에서 거의 필수적인 UI 요소라고 봐도 무방한 기능들입니다. Bottom Sheet UI 요소부터 차근 차근 다뤄보도록 하겠습니다. Bottom Sheet 머테리얼 디자인에도 기본 요소로 가지고 있을 만큼 대중적인 UI 요소입니다. Material Design Build beautiful, u..

강의/Framer

[예제를 통해 학습하는 프레이머(Framer) #2] Magic Motion을 활용한 탭메뉴 구현 (Animated Tabs)

🔮 매직모션(Magic Motion)이란? 매직모션은 한 상태에서 다른 상태로 레이어에 애니메이션을 적용할 수 있는 전환 유형입니다. 한 레이어에서 다음 레이어로 이동하면 Framer가 변경된 부분을 찾아내고 애니메이션을 적용합니다. 💝 목표 결과물 강의를 끝까지 따라오시면 아래의 매직 모션이 적용된 탭메뉴를 구현할 수 있습니다. ❗️ 시작하기 전에 혹시 아직 Framer 계정을 가입하지 않으셨거나 프레이머 사용방법을 모르시는 분은 아래를 참고해서 계정 등록을 하고 Framer 프로젝트 생성까지 하시기 바랍니다. [개발자가 알려주는 Framer X #0] 프레이머 쉽게 시작해보자. 📑 프레이머란? 프레이머는 애니메이션, 터치 기반 제스처 및 스크롤, 페이징 및 인터페이스 흐름을 위한 여러 재사용 컴포넌트..

블로그/티스토리 팁

티스토리 블로그에 이모지(Emoji)를 활용하는 방법

✍️ 이모지란? '이모지'라는 말의 어원은 일본어 絵文字이고 이것을 한글로 옮기면 '에모지'가 되겠으나, 한국어에서는 emoji의 영어식 발음을 한글로 옮긴 '이모지'가 더 보편적으로 사용됩니다. 주짓수나 유클리드와 비슷한 경우라고 보면 됩니다. 언론에서도 '이모지'를 '에모지'보다 더 많이 사용하고, 구글에 '에모지'를 검색하면 '이모지'의 검색 결과를 대신 보여 줄 정도라고 합니다. emoji의 e나 emo가 emoticon에서 왔다고 생각하는 사람도 있다고 합니다. 🧐 이모지를 굳이 왜 사용해? 이모지를 굳이 사용할 필요는 없습니다😁 하지만 글들 사이에 이모지로 내 감정들을 표현하면 좀 더 표현이 잘 전달되는 느낌이 들어서 요즘 많이 사용하게 되더라고요🤗 그리고 좀 더 글에 생동감이 있지 않나요??..

블로그/티스토리 팁

티스토리 초간단 사이트맵 제출 방법! Google Search Console(구글 서치 콘솔) 등록 방법

✍️ Sitemap이란? Sitemap은 웹마스터가 크롤링에 사용할 수 있는 사이트의 페이지에 대한 정보를 검색 엔진에 알리는 손쉬운 방법입니다. Sitemap의 가장 간단한 형식은 검색 엔진에서 사이트를 보다 지능적으로 크롤링할 수 있도록 각 URL에 대한 추가 메타데이터(마지막 업데이트된 날짜, 변경 빈도, 사이트의 다른 URL에 상대적인 중요도)와 함께 사이트에 대한 URL을 나열하는 XML 파일입니다. 웹크롤러는 보통 해당 사이트 및 기타 사이트의 링크에서 페이지를 검색합니다. Sitemap은 해당 데이터를 보완하여 Sitemap을 지원하는 크롤러가 해당 Sitemap에 있는 모든 URL을 선택하고 관련 메타데이터를 사용하여 이들 URL에 대해 파악할 수 있도록 합니다. Sitemap 프로토콜을 ..

강의/Framer

[예제를 통해 학습하는 프레이머(Framer) #1] 페이지 툴을 활용한 스와이프 기능 구현 (Page Interactions)

✍️ 페이지 툴이란? 페이지 툴이란 Framer에서 제공하는 기능 중 하나로 웹서비스에서 사용되는 스와이프 기능을 구현할 수 있게 도와주는 도구입니다. 페이지 툴을 사용하면 스와이프 기능을 굉장히 손쉽게 추가할 수 있습니다. 💝 목표 결과물 강의를 끝까지 따라오시면 아래의 결과물을 구현할 수 있습니다. 그것도 정말 간단하게요! ❗️ 시작하기 전에 혹시 아직 Framer 계정을 가입하지 않으셨거나 프레이머 사용방법을 모르시는 분은 아래를 참고해서 계정등록을 하고 Framer 프로젝트 생성까지 하시기 바랍니다. [개발자가 알려주는 Framer X #0] 프레이머 쉽게 시작해보자. 📑 프레이머란? 프레이머는 애니메이션, 터치 기반 제스처 및 스크롤, 페이징 및 인터페이스 흐름을 위한 여러 재사용 컴포넌트를 제..

투자/삼성전자우 모으기

[투자일지 #15] 하루에 1~2주씩 개미처럼 삼성전자우(삼전우) 모으기 [25/2000]

👏 오늘도 어김없이 삼전우를 매수하다 오늘의 매수금액은 46,750원. 가격이 46,000 아래로 떨어질 줄 알았는데 떨어지지 않았다. 기다리다가 결국 시간외종가로 46,750원에 매수하게 되었다. 💵 보유현황 드디어 삼성전자 우선주 25주를 보유하게 되었다. 단기 목표 50주를 달성하기 위해 앞으로도 꾸준히 매수해야겠다. 🏦 시장현황 ✨ 마무리 오늘 기업은행이 많이 떨어져서 3주를 매수했다. 더 많이 떨어지면 장기적으로 물타기 형식으로 추가 매수를 진행할 예정이다. 그리고 맥쿼리인프라 매수를 시작했다. 맥쿼리인프라는 고배당주로 장기투자 개념으로 월 20만원 투자할 예정이다. 다음주에 ISA 계좌를 계설해서 꾸준히 맥쿼리인프라 주식을 매수할 예정이다.

강의/Framer

[개발자가 알려주는 프레이머(Framer) #0] Framer 쉽게 시작해보자.

📑 Framer란? Framer는 애니메이션, 터치 기반 제스처 및 스크롤, 페이징 및 인터페이스 흐름을 위한 여러 재사용 컴포넌트를 제공하는 라이브러리입니다. 처음 접하시는 분들도 어려움 없이 서비스 아이디어들을 구현할 수 있도록 설계되어 있습니다. Framer는 아래의 기술 스택으로 구성되어 있습니다. 💻 기술 스택 React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. Jsx JavaScript에서 HTML과 같은 구문을 직접 사용하여 친숙한 방식으로 문서 구조를 표현할 수 있는 방법입니다. Typescript TypeScript는 Javascript의 상위 확장 개념 언어입니다. 그래서 ES5의 문법을 그대로 사용할 수 있고, ES6에서 새롭게 추가된 기능들을 기존의 자바..

개발/Vue

[Vue] vue.js Mixin을 활용해서 재사용성을 늘리자! (Understanding Mixins in Vue JS)

소프트웨어 개발 원칙에는 여러 가지가 있는데 그중 하나 DRY(Do not Repeat Yourself) 원칙이 있습니다. "같은 동작을 하는 코드를 반복적으로 작성하지 마라" 라는 뜻을 가지고 있는데 Vue에서는 중복 코드를 제거하기 위해 여러 재사용 테크닉이 존재합니다. 믹스인, 사용자 지정 디렉티브, 플러그인, 필터가 그 기술에 속해있죠. 이번 포스팅에서는 믹스인을 활용해서 기능을 재사용하여 중복 코드를 제거해보도록 하겠습니다. ✍️ Mixin(믹스인) 이란? Mixin은 기능을 따로 정의해두고 필요할 때 마다 해당 믹스인 파일을 Vue 컴포넌트에 결합해서 사용하는 방법을 말합니다. 일반적으로 Vue 컴포넌트에 기능을 추가하기 위해 필요할 때마다 재사용할 수 있습니다. SASS라는 CSS 전처리기를..

투자/삼성전자우 모으기

[투자일지 #14] 하루에 1~2주씩 개미처럼 삼성전자우(삼전우) 모으기 [24/2000]

👏 오늘도 어김없이 삼전우를 매수하다 오늘 삼전우 매수 금액은 46,500원. 종가가 46,500임을 감안하면 굉장히 구매를 잘한 것 같다. 다른 우선주들은 시세가 들쭉날쭉한데 역시 삼성전자 우선주는 규모가 굉장히 커서 시세가 폭등하거나 폭락하지 않고 안정적으로 가져갈 수 있어서 굉장히 믿음이 간다. 💵 보유현황 오늘까지 총 24주를 확보했다. 하루도 빠짐없이 꾸준히 매수하고 있다. 이제는 습관처럼 구매한다^^; 🏦 시장현황 폭락도 폭등도 아닌 굉장히 안정적인 가격. 오늘도 무난하게 흘러갔다. ✨ 마무리 연금저축계좌에 현재 10만원정도 투자할 수 있는 금액이 존재하는데 어떤 곳에 투자를 할지 굉장히 고민된다. 내일 ISA(Individual Savings Account ::개인종합자산관리계좌)를 발급 받..

투자/삼성전자우 모으기

[투자일지 #13] 하루에 1~2주씩 개미처럼 삼성전자우(삼전우) 모으기 [23/2000]

👏 오늘도 어김없이 삼전우를 매수하다 오늘의 매수가는 46,650원. 오늘 종가가 46,500원임을 감안하면 나쁘지 않은 매수 금액이라고 생각된다. 💵 보유현황 현재 보유 주식 수는 23주. 평균단가는 46,461원이다. 배당락일까지 삼성전자우 주식을 100주까지는 확보하는 게 단기적인 목표다. 현재 배당금은 354원이니 100주면 약 3만원 정도의 배당금을 확보할 수 있다. 이 금액으로 치킨 사 먹을 돈 아껴서 삼전우 1주를 더 매수할 예정이다. 배당받은 금액을 바로 재투자함으로써 복리의 효과를 누리기 위함이다. 🏦 시장현황 삼성전자가 7일 공시한 실적 발표에 따르면 올해 2분기 연결기준 잠정실적은 매출 52조 원, 영업이익 8조 1천억 원이다. 지난 1분기 대비 매출은 6.02% 감소, 영업이익은 2..

투자/삼성전자우 모으기

[투자일지 #12] 하루에 1~2주씩 개미처럼 삼성전자우(삼전우) 모으기 [22/2000]

오늘도 어김없이 삼전우를 매수하다 오늘은 오전에 47,400원에 삼전우 1주를 매수했다. 오전 시장 내 최저가로 매수해서 굉장히 기분이 좋다. 하루 중에 가장 좋은 가격에 매수했다는 것은 굉장히 기분 좋은 일이다. 보유현황 총 22주에 평균단가 46,452원. 늘어가는 삼전우 개수를 보면 굉장히 뿌듯하다. 연금저축계좌로 TIGER 미국채10년선물을 매수하다 어제 개설한 연금저축계좌를 통해 TIGER 미국채10년선물 ETF 13주를 매수했다. 연금저축계좌에 월 34만원 납입할 예정이고 34만원으로 주식 50% + 채권 50% 수준으로 포트폴리오를 구성해서 관리할 생각이다. 주식 구성은 현재 고민하고 있지만 현재 방향으로는 미국 주식 관련 ETF + 국내 주식 관련 ETF(35% + 15%)로 운용 계획 중..

개발/기타

소스코드를 깔끔하게 이미지로 추출하는 방법 (Create images of your source code)

🖼️ 소스코드를 깔끔하게 이미지로 추출하는 방법 웹사이트를 돌아다니다 보면 아래와 같이 소스코드를 깔끔하게 이미지화시켜서 보여주는 글들을 본 적이 있을 겁니다. 바로 Carbon이라는 사이트에서 소스코드를 이미지화시켜서 export를 해서 생성한 것입니다. Carbon Carbon is the easiest way to create and share beautiful images of your source code. carbon.now.sh 해당 사이트로 들어가면 아래 화면을 확인할 수 있습니다. ✍️ 사용방법 좌측부터 원하는 에디터 테마, 사용하는 언어 그리고 마지막으로 Export에는 파일 이름과 사이즈 그리고 다운로드 형식을 설정할 수 있는 영역이 존재합니다. 저는 Dracula 테마를 선호하고 V..

블로그/애드센스 수익

[티스토리 애드센스 수익공개 #1] 티스토리 블로그 월 방문자 1만명 달성! 애드센스 수익 전격 공개

✨ 티스토리 블로그 월 방문자 수 1만 명 달성하다 정확히는 월간 방문수 10,093을 달성했습니다. 19년 후반기부터 방치해둔 블로그를 올해에는 조금 키우고 싶다는 생각에 2월부터 개발 관련 콘텐츠로 블로그 포스팅을 하기 시작했습니다. 아래 표를 보시면 확인할 수 있듯이 그 이후 방문자수가 눈에 띄게 느는 점을 확인할 수 있습니다. 👨 방문자의 성향은 어떠할까? 방문자의 성향을 봤을 때는 거의 95%가 구글 검색에서 이뤄지네요. (역시 개발자는 구글로 검색해야죠... 흑..) 개인적으로 네이버 검색률을 늘리고 싶은데 개발 블로그라서 어느정도 한계가 있겠죠..? 카카오톡 공유도 28건 정도 있었습니다. (공유해주신 천사님들 감사합니다 :)) 대부분의 유입은 PC에서 이뤄졌네요. 91%.. 🔖 그러면, 어..