투자/삼성전자우 모으기

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

👏 오늘도 어김없이 삼전우를 매수하다 오늘은 삼전우 2주를 47,600원에 매수했다. 어제 회사에서 저가 매수를 노리다가 오후에 갑자기 뜬금 업무가 쏟아지는 바람에 타이밍을 놓쳐서 매수하지 못했다. 1일 1주 매수가 목표였는데 어제 목표를 못지키고 말았다. 30주까지 매수하는 동안 한번도 매수 못한적이 없었는데 너무 아쉽다. 오늘도 조금 비싼 가격에 매수하게 되어서 아쉬움이 많이 남는다. 💵 보유현황 현재 삼성전자우(삼전우) 주식 총 32주를 보유하게 되었다. 금액으로는 현재 총 1,526,400원 정도 되고, 손익률 2.21% 그리고 평가손익은 33,050원이다. 꾸준히 매수하다보니 어느덧 100만원이 넘어가고 이제는 150만원을 넘기고 있다. 🏦 시장현황 (삼전우 주가 차트) 오늘 삼성전자우 종가는 ..

개발/기타

스토리북(Storybook) v5.3 시작하기 - Vue에서 사용하는 방법

스토리북의 기본 정의나 사용법에 대해서는 여기에서 상세히 설명 되어 있으니 참고하시면 됩니다. 스토리북(Storybook)은 굉장히 많은 프론트엔드 view 라이브러리를 지원하고 있습니다. 스토리북은 현재 React, Vue, Angular, Mithril, Marko, HTML, Svelte, Meteor, Ember, Riot, Preact를 지원하고 있습니다. 그 중 Vue.js에서 스토리북을 사용하는 방법을 소개하도록 하겠습니다. 패키지 버전(dependencies) { "dependencies": { "vue": "^2.6.11" }, "devDependencies": { "@babel/core": "^7.10.5", "@storybook/addon-actions": "^5.3.19", "@st..

개발/기타

스토리북(Storybook) v5.3 시작하기 - 기본적인 사용법

스토리북이란 스토리북(Storybook)은 UI 컴포넌트를 위한 유저 인터페이스 개발 환경 및 자유롭게 컴포넌트를 테스트할 수 있는 도구입니다. 스토리북을 활용하면 개발자는 독립적인 환경에서 컴포넌트를 개발할 수 있고, 개발환경에서 컴포넌트들을 인터랙티브하게 보여줄 수 있습니다. 스토리북(Storybook)은 기본적으로 애플리케이션 외부(독립적인 개발환경)에서 실행되므로 사용자는 애플리케이션별 종속성 및 요구 사항에 대해서 걱정할 필요 없이 UI 컴포넌트를 독립적으로 개발할 수 있습니다. 스토리북은 다양한 부가기능(addons)를 지원하며 커스터마이징하기 쉽게 굉장히 유연한 API를 제공합니다. 스토리북의 정적 버전(a Static version of Storybook)은 빌드하여 HTTP 서버에 배포할..

개발/UI개발

[SEO] target="_blank" 좀 더 알고 사용하자 (noopener, noreferrer, nofollow 차이점에 대해서)

웹사이트를 개발할 때 종종 외부링크로 보내기 위한 마크업을 할 때가 있습니다. 그때 사용하는 속성이 target="_blank"인데, 이 속성을 사용할 때 같이 사용해야되는 속성이 있습니다. noopener, noreferrer 그리고 nofollow 입니다. noopener는 무엇인가? target = "_blank"값을 사용하면 재밌는 증상이 나타납니다. 아래 이미지를 한번 볼까요? 네이버 웹사이트로 이동 target = "_blank" 속성값을 noopener 속성을 사용하지 않고 사용한다면 연결중인 페이지는 연결 페이지에 부분적으로 액세스 할 수 있습니다. window.opener 객체가 존재하는 모습을 확인할 수 있습니다. 해당 부분은 연결 페이지에서 이전 페이지를 제어할 수 있는 권한이 있다는..

강의/Framer

[개발자가 알려주는 프레이머(Framer) #2] Stack 컴포넌트 완벽정리

1강에서는 프레임(Frame) 컴포넌트에 대해서 다뤄봤습니다. 프레임 컴포넌트 자체로도 제공하고 있는 기능들이 정말 많고, 다양한 곳에서 활용할 수 있음을 확인했습니다. 이번 포스팅에서 소개드릴 스택(Stack) 컴포넌트도 정말 유용하게 사용할 수 있습니다. 스택(Stack) ? 스택 컴포넌트를 활용하면 프레임을 사용하여 매우 유연하고 자동으로 분산된 레이아웃을 쉽게 만들 수 있습니다. 설명으로는 잘 이해가 안되시죠. CSS의 flex 속성을 활용해서 자동으로 간격이나 위치를 조정해줍니다. 스택 컴포넌트는 프레임을 기반으로하므로 모든 프레임 속성을 지원합니다! 좀 더 쉽게 이해하시려면 "프레임을 좀 더 간편하게 레이아웃을 구성하기 위해서 스택이 존재하는 구나" 라고 생각하시면 될 것 같습니다. 스택에 프..

투자/미국 ETF

미국 DIA ETF 제대로 알고 투자하자 (SPDR Dow Jones Industrial Average ETF Trust)

미국 주식 시장을 확인하는 3가지의 대표지수가 있습니다. S&P500 지수, 나스닥 100 지수, 그리고 다우지수입니다. 다우지수를 잠깐 소개해드리면, 다우존스 산업평균지수로써 월스트리트 저널 편집자이자 다우존스앤컴퍼니의 공동창립자 찰스 다우가 창안한 주가 지수로서 DJIA, Dow 30 또는 비공식적으로 다우지수 등으로도 불립니다. 다우지수는 미국 시장가치의 1/5를 차지하는 미국 대표 초우량기업 30개로 구성되어 있습니다. 이런 다우지수를 추종하고 매월 배당까지 주는 ETF가 있는데 그게 바로 DIA ETF입니다. DIA ETF는 운용규모 $22.75B로 개인이 거래하기에 전혀 걱정없는 규모이고, 운용 수수료 역시 0.16%로 굉장히 매력적인 ETF입니다. 장기투자를 하는 관점에서도 꽤 괜찮은 ETF..

개발/유틸리티

온라인 코드 에디터를 활용해서 소스코드를 공유하는 방법 - CodeSandbox

블로그를 돌아다니다 보면 온라인 코드 에디터를 활용해서 소스코드를 공유하는 모습을 종종 보신 적이 있을 것입니다. 사람들에게 정말 많이 알려진 JSFiddle, CodePen이 있지만, 오늘 제가 소개해드릴 온라인 코드 에디터는 위에 두 서비스는 아니고 제가 요즘 애용하고 있는 서비스인 CodeSandbox입니다! CodeSandbox에 대해서 간단히 알아보고 사용법까지 알아보겠습니다. 코드샌드박스(CodeSandbox) ? CodeSandbox는 빠른 웹 개발을 위한 프로토타이핑 툴입니다. 웹 개발에서 사용되는 정말 다양한 기술 스택들을 제공하고 있습니다. 프론트엔드 사이드에서 굉장히 많이 사용되고 있는 React, Vue도 CodeSandbox에서 간단하게 구동 가능합니다. 설정에 대한 번거로움 단 ..

일상/생활팁

적색, 황색 점멸등 차이점, 점멸등에도 우선순위가 있다

일상생활을 하면서 낮에는 일반 신호등이었는데, 밤이나 새벽에 황색, 적색 점멸등으로 바뀌어 있는 신호등을 많이 접해보셨을 겁니다. 각 점멸등에 따라서 지나가는 방법도 다른데 어떻게 지나가야 되는지 다뤄보도록 하겠습니다! 점멸 신호등은 왜 존재하는 걸까? 우선 점멸 신호등이 왜 존재하는지부터 알 필요가 있습니다. 점멸 신호등은 휴일이나 심야같이 교통량이 아주 적은 시간대에 교통의 효용성을 위해서 시행되고 있습니다. 사람과 차가 거의 없는 심야시간에 평소와 동일한 신호가 적용된다면, 신호등이 있는 구간에서 계속 정차를 해가면서 주행해야되기 때문에 조금 비효율적이겠죠? 불필요한 신호대기 시간을 줄임으로써 교통흐름을 좀 더 탄력적으로 제어할 수 있습니다. 황색과 적색 차이가 무엇일까? 점멸 신호등은 황색과 적색..

강의/Framer

[개발자가 알려주는 프레이머(Framer) #1-3] Frame 컴포넌트 완벽정리 (Tap, Hover, Pan, Drag)

개발자가 알려주는 프레이머 프레임(Frame) 컴포넌트를 다루는 마지막 포스팅입니다. 첫 번째 강의에서는 컴포넌트의 위치나 크기 그리고 시각적 요소를 다루는 Layout과 Visual에 대해서 다뤄봤고, 두 번째 강의에서는 프레임을 동적으로 변환시켜주는 Transform, Animation, Transition, Variants 속성들에 대해서 알아봤었습니다. 해당 부분을 안 보셨다면 한번 보고 오시는 걸 추천드릴게요! [개발자가 알려주는 프레이머(Framer) #1-1] Frame 컴포넌트 완벽정리 (Frame 정의, Layout, Visual) [개발자가 알려주는 프레이머(Framer) #1-2] Frame 컴포넌트 완벽정리 (Transform, Animation, Transition, Variant..

투자/삼성전자우 모으기

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

👏 오늘도 어김없이 삼전우를 매수하다 오늘은 삼성전자우를 47,150원에 매수했다. 46,750원까지 떨어졌는데 그 때 사지 못한게 아쉽다. 그리고 오늘 삼전우 1주를 매수함으로써 드디어 삼성전자우 주식 30주를 보유하게 되었다! 꾸준히 1달 조금 넘게 매수했는데 하루에 1주씩 매수하는 재미가 있는 것 같다. 시세에 큰 영향을 받지 않고 하루 중에 가장 싼 가격에 삼성전자우 주식을 매수해보려고 노력하는게 꽤나 재밌고 웃기다. 💵 보유현황 드디어 단기 목표인 "삼성전자우 주식 30주 보유하기"를 달성했다! 이제 초단기 목표 60주를 목표로 달려가면 될 것 같다. 올해 200주를 달성 할 수 있겠지? 200주면 배당금으로 삼성전자우 주식을 5주는 살 수 있는 금액이다. 배당금을 다시 삼전우에 투자함으로써 복..

투자/ETF

[국내 ETF] 국내에서 가장 쉽게 미국채권에 투자하는 방법 - TIGER 미국채10년선물

투자 포트폴리오를 구성할 때 일반적으로 주식과 채권을 본인의 투자 성향에 따라서 5:5 또는 6:4 이렇게 구성해서 리스크를 관리하곤 합니다. 이전에 KODEX 미국 FANG 플러스(H) ETF를 소개를 했는데 기억하시나요? 한번도 못보셨거나 기억이 안나시면 다시 한번 참고하시면 좋을 것 같습니다. 국내에서 간접적으로 정말 쉽게 미국 초우량 기술주들에 투자하는 방법도 있으니, 정말 쉽게 미국 국채에 투자하는 방법도 있겠죠? 그게 바로 오늘 소개해 드릴 TIGER 미국채10년선물 ETF 입니다. 우리나라에서 현재 미국채를 운용하는 ETF 중에 규모가 가장크고 거래를 하는데 있어서 전혀 무리가 없습니다. 기본정보 TIGER미국채10년선물은 미래에셋자산운용에서 운용하는 ETF입니다. S&P의 10-Year U..

강의/Framer

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

사이드 메뉴(Side Menu)? Overlay Effect를 활용한 UI 구현 마지막 포스팅입니다! 이번에 다룰 예제는 사이드 메뉴입니다. 사이드 메뉴 UI는 앱 뿐만 아니라 웹에서도 정말 많이 사용되는 UI 요소 중 하나 입니다. 아래처럼 버튼을 눌렀을 때 특정 박스가 화면에 모션과 함께 좌에서 우, 우에서 좌로 열리는 방식입니다. 프레이머(Framer)는 사이드 메뉴에서 사용되고 있는 모션(Motion)을 굉장히 쉽게 구현할 수 있게 제공하고 있습니다. 사이드 메뉴는 대부분 모바일 애플리케이션에 기본적으로 다 들어있을거라 생각합니다. 제 블로그에도 기본적으로 좌측에 탑재되어 있죠. 오늘은 대부분의 애플리케이션에 존재하고 있는 이 사이드 메뉴를 다뤄보도록 하겠습니다. ❗️ 시작하기 전에 혹시 아직 F..

개발/Bootstrap

부트스트랩 5(Bootstrap 5) 알파버전(Alpha) 출시! 남들보다 빠르게 공부해보자!

🎉 Bootstrap 5 Alpha 드디어 부트스트랩 5 알파버전이 나왔습니다. 제가 학부시절에 부트스트랩 관련 글을 썼던게 엊그제 같은데 벌써 부트스트랩 5 알파가 나오다니.. 정말 세월이 빠른 것 같습니다. [Bootstrap] 부트스트랩의 그리드 시스템을 쉽게 사용하는 방법 (bootstrap - grid system) 부트스트랩 (Bootstrap) 부트스트랩은 트위터의 웹 디자이너와 개발자가 만든 오픈형 UI 플러그인이라고 할 수 있습니다. 전 세계의 웹제작자들에게 편리성을 주고자 만들어졌으며 보다 편리하고 � webruden.tistory.com 무려 16년도에 쓴 글이네요...; 사실 그동안 프론트엔드 개발자로서 회사생활을 하면서 부트스트랩은 사용하지 않고 몇 번씩 앤트디자인을 사용했던 기억..

투자/삼성전자우 모으기

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

👏 오늘도 어김없이 삼전우를 매수하다 오늘의 삼전우 매수 가격은 47,100원. 오늘은 삼성전자우 주가가 하락세로 이어져서 조금 싼 가격에 매수할 수 있게 되었다. 오늘 종가가 47,050원임을 감안하면 나쁘지 않은 매수 금액이다. 내일이면 삼성전자우 주식 30주를 보유하게 된다. 야금야금 모으다 보니 벌써 30주가 되었다. 💵 보유현황 삼성전자우 주식을 오늘까지 29주를 모았다. 내일이면 초단기 목표 30주를 달성하게 되는 것이고 이제 그다음 목표는 100주로 잡아야지. 저의 올해 염원은 블로그 월 수익으로 삼성전자우를 조금이라도 더 매수할 수 있는 각이 나왔으면 좋겠다는 것이다. 블로그 수익으로 삼성전자우를 추가적으로 매수하게 되면 개수를 늘리는데 꽤나 도움이 될 것 같다. 하지만 아직까지 애드센스 ..

강의/Framer

[개발자가 알려주는 프레이머(Framer) #1-2] Frame 컴포넌트 완벽정리 (Transform, Animation, Transition, Variants)

이전 포스팅에서는 Frame 정의, Layout 그리고 Visual API에 관련해서 다뤄봤습니다. 아직 해당 포스팅을 읽지 않으셨다면 프레임 컴포넌트 완벽정리 1편부터 보고 오시는 것을 추천드립니다. [개발자가 알려주는 Framer #1-1] Frame 컴포넌트 완벽정리 (Frame 정의, Layout, Visual) ✍️ Frame이란? 레이아웃, 스타일, 애니메이션 및 이벤트를 위한 기본 컨테이너입니다. 프레임 컴포넌트는 작업을보다 빠르게 수행 할 수 있도록 다양한 옵션과 기본값을 가진 div입니다. 프레임 webruden.tistory.com 그럼 1편에 이어서 프레임 컴포넌트의 동작과 관련된 Transform, Animation, Transition, Variants 속성들을 살펴보도록 하겠습니..

개발/유틸리티

맥북에서 화면 녹화한 후 바로 GIF로 다운받는 방법

맥북에서 화면을 녹화할 수 있는 방법은 굉장히 많습니다. 가장 간단한 방법으로는 맥북 자체 기능을 활용하면 됩니다. 맥북에서 shift-command-5 키를 사용하는 방법이 있고 또 다른 방법으로는 QuickTime Player를 사용하여 화면을 녹화할 수도 있습니다. 해당 방법은 맥북 공식 홈페이지에서 굉장히 상세히 설명하고 있으니 참고하시면 됩니다. 해당 기능도 굉장히 강력하고 좋지만, 제가 원했던 기능은 화면을 녹화한 후 동영상으로 export 받는 게 아닌 GIF 형식으로 바로 받는 것이었습니다. 그래서 여러 유틸리티 프로그램을 찾는 와중에 괜찮은 맥북 화면 녹화 어플이 있어서 소개하도록 하겠습니다. (심지어 저는 유료로 구매까지 마쳤습니다. 제 돈주고 삿으니 걱정 마시...) Gifox 제가 ..

강의/Framer

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

Modal Box? Modal Box는 앱 뿐만 아니라 웹에서도 정말 많이 사용되는 UI 요소 중 하나 입니다. 아래처럼 버튼을 눌렀을 때 특정 박스가 화면에 모션과 함께 노출되는게 바로 Modal Box입니다. 프레이머(Framer)는 Modal에서 사용되고 있는 모션(Motion)을 굉장히 쉽게 구현할 수 있게 제공하고 있습니다. Modal Box는 각종 프레임워크에서 모두 사용하고 있는 UI 요소입니다. Bootstrap이나 Ant Design 모두 엄청 유명한 웹 개발 프레임워크인데 모두 구현되어 있죠. 물론 이외에 Material Design 등 정말 각종 프레임워크에서 모두 사용하고 있다고 생각하셔도 무방합니다. Modal Use Bootstrap’s JavaScript modal plugin..

투자/미국 ETF

[미국 ETF] 안전하게 미국 최고의 기업들에 투자하는 방법 - Invesco QQQ

최근에 미국 ETF중에서 가장 핫하고, 믿을만하고, 성과가 좋은 ETF는 무엇일까요? 제가 생각하기에는 나스닥 시장 전체에 투자하고 있는 QQQ ETF라고 생각합니다. 미국 주식시장 3대 지수 중 하나인 나스닥지수는 글로벌 테크 기업들이 대거 포진해있기 때문에 굉장히 투자자들에게 매력적이죠. 투자자들이 굉장히 매력적으로 느끼고 있는 나스닥지수를 추종하는 ETF를 소개하겠습니다. 소개 Invesco QQQ는 나스닥 100지수(Nasdaq-100 Index®)을 추종하는 ETF입니다. 지수는 시가 총액을 기준으로 나스닥 주식 시장에 상장된 비금융 기업 중 100개를 포함합니다. 종목 구성은 분기별로 재조정되고 매년 재구성됩니다. 기본정보 이름 : Invesco QQQ 티커 : QQQ 출시일 : 1999.03..

투자/후기

토스 부동산 소액투자 실제 투자 후기, 수익금 그리고 손실금 모두 공개!

바야흐로 2018년 초 저는 직장인이 된 지 이제 만 1년이 되던 해 '이대로는 안 되겠다 이렇게 살면 큰일 난다! 이제 재테크!!! 투자를 해야겠다!'는 마음을 먹었습니다. 가진 월급은 쥐꼬리지만, 그 쥐꼬리를 떼어서 꾸준히 이 돈을 굴리면 지금보다 나은 삶을 살 수 있지 않을까?라는 안일한 생각으로 투자를 하기 시작했죠. 사실 지금 생각하면 뭐 그 정도 생각으로 투자를 한 것 치고는 선방한 투자라고 생각합니다. (비트코인에 투자를 하거나 주식에 몰빵해서 잃는 것보다는 나으니까요...) 그래서 투자를 마음 먹은 곳이 바로 토스 부동산 소액투자(p2p 투자)! 제가 토스 부동산 소액투자를 결정한 이유는 두 가지 였습니다. 첫째는 적금 개념으로 꾸준히 적은 돈으로 투자를 할 수 있다는 점이었고, 둘째는 제..

투자/삼성전자우 모으기

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

👏 오늘도 어김없이 삼전우를 매수하다 오늘 매수금액은 47,700원. 오늘 12시부터 오후 6시까지 운전을 해야 되기 때문에 그냥 시장이 열리자마자 1주를 매수해버렸다. 그리고 집에 돌아왔는데 오늘 장은 47,450원으로 마무리가 되었더라. 조금 아쉬웠다. 하지만 주식을 하면서 운전할 수는 없으니까. 💵 보유현황 삼전우를 28주 보유하게 되었다. 손익률은 1.89%, 평가손익은 24,700원 총 1,328,600원 가량의 주식을 보유하게 되었다. 휴가 기념 3주 구매해서 30주 맞출껄 아쉽다. 🏦 시장현황 장 마감 상황을 보니 내가 구매한 삼전우 가격이 최고가다..ㅋ 역시 생각을 하면서 매매를 해야지 이렇게 대충 매매하면 최고가에 구매하게 된다. 오늘도 좋은 배움이었다. ✨ 마무리 요즘 다양한 ETF를 ..