개발/Nuxt.js

Nuxt.js asyncData, fetch 차이점 및 사용법 | 간단 예제를 통한 비교 (Data Fetching Hook)

라이프사이클 다이어그램 (Nuxt.js Lifecycle Hooks) Nuxt.js asyncData, fetch 동작 방식을 이해하기 전에 해당 메서드가 어디서 실행되는지 Nuxt.js 라이프사이클 다이어그램을 이해하는 것이 필요합니다. Nuxt.js 개발자는 아래 다이어그램을 꼭 인지하고 계실 필요가 있습니다. asyncData 서버사이드(Server)에서 데이터를 가져와서 랜더링을 하고싶은 경우가 있습니다. Nuxt.js는 컴포넌트 데이터를 세팅하기 전에 비동기 처리를 할 수 있도록 하기 위해서 asyncData 메소드를 제공합니다. asyncData는 페이지 컴포넌트가 로드되기 전(route가 변경될 때)에 항상 호출되는 메소드입니다. asyncData에서는 서버측에서 비동기 데이터를 처리할 수 ..

개발/Vue

Vue.js mounted created 차이 | 예제를 통해 쉽게 이해하자 (Difference between the created and mounted lifecycle)

Vue.js를 처음 접하면 Vue의 라이프사이클이 생소하기 때문에 created, mounted가 무엇인지 구별이 안될 수 있습니다. 각 라이프사이클 훅에서 어떤 일이 일어나고, 우리가 어떻게 사용하는지에 대해서 다뤄보도록 하겠습니다. 그리고 Vue.js를 통해 개발하는 개발자라면 아래 첨부한 라이프사이클 다이어그램은 꼭 인지하고 있을 필요가 있습니다. 라이프사이클 훅(Lifecycle hooks)이란? 각 컴포넌트는 생성될 때 일련의 초기화 단계를 거칩니다. 예를들어 데이터 관찰, 템플릿 컴파일, 인스턴스를 DOM에 마운트, 데이터 변경 시 DOM을 업데이트해야합니다. 그 과정에서 라이프사이클 훅이라 불리우는 함수도 실행하여, 사용자가 특정 단계에서 자신의 코드를 추가할 수 있는 기회를 제공합니다. 라..

개발/React

[React] 부모-자식 컴포넌트 간 데이터 전달 방법 (Passing Data Between a Parent and Child in React)

React에서 부모 컴포넌트와 자식 컴포넌트 사이에 데이터가 전달되는 방식에 대해 알아보겠습니다. 데이터가 갈 수 있는 방향은 두 가지이며 다음과 같습니다. 부모 -> 자식 자식 -> 부모 부모에서 자식으로 데이터 보내기 (Passing Data From Parent to Child) 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해야되는 경우 props를 사용하면 쉽게 해결할 수 있습니다. 예를 들어 부모와 자식이라는 두 개의 컴포넌트가 있고 부모의 상태를 자식에게 전달하려고 한다고 가정해 보겠습니다. 다음과 같이 할 수 있습니다. // Parent Component import Child from "./components/Child"; export default function App() { retu..

개발/Vue

Vue 슬롯(slot) 사용법 및 예제 (Understanding Slot in Vue.js)

Vue.js에서 컴포넌트를 활용해서 코드를 재사용함으로써 업무 효율성 및 생산성을 향상시킬 수 있습니다. 추가적으로 컴포넌트에 슬롯(Slots)을 활용하면 훨씬 재사용하기 용이하게 만들 수 있습니다. 이번 포스팅은 이미 컴포넌트 기초를 이해하고 있다 가정하고 작성한 내용이기 때문에 혹시 컴포넌트라는 개념을 아직 모르신다면 오늘 소개할 슬롯(Slots) 패턴을 이해하기 조금 까다로울 수 있습니다. 🤔 슬롯(Slots)이란? 일반적으로 슬롯이라고 하면 1) (무엇을 집어넣도록 만든 가느다란) 구멍, 2) (가느다란 구멍·자리에) 넣다 라는 뜻을 가지고 있는데 Vue 개발팀도 작명하는데 꽤 고심했다는 것이 이런 부분에서 느껴집니다. 정말 간단하게 표현하자면, 슬롯이란 컴포넌트에 콘텐츠나 다른 컴포넌트를 또 다..

개발/Vue

Vue $nextTick 이란? | 사용법 및 간단 예제 (Understanding $nextTick in Vue.js)

Vue는 DOM 업데이트를 비동기(asynchronously)로 합니다. 데이터 변경이 발견 될 때마다 큐를 열고 같은 이벤트 루프(event loop)에서 발생하는 모든 데이터 변경을 버퍼에 담습니다. 같은 Watcher가 여러 번 발생하면 대기열에서 한 번만 푸시됩니다. 이 버퍼링된 중복의 제거는 불필요한 계산과 DOM 조작을 피하는 데 있어 중요합니다. 그 다음, 이벤트 루프 "tick"에서 Vue는 대기열을 비우고 실제 (이미 중복 제거 된) 작업을 수행합니다. 해당 포스팅에서 이벤트 루프에 대한 개념까지 다루기엔 조금 무리가 있기 때문에 추후에 따로 설명드리고, 지금은 Vue.js에서는 데이터를 통해 업데이트된 DOM에 바로 접근하기 위해선 nextTick을 활용해야 된다고 이해하시면 됩니다. ..

투자/주식용어

주식 선물투자란? 선물과 현물 차이 | 주식 선물 위험성에 대해서

'오징어게임'에서 조상우가 선물(futures contract) 투자를 하다가 빚을 지게 되어서 오징어게임에 참가하게 된 장면 보셨을 겁니다. 투자를 안하는 사람들도 선물 거래의 위험성은 얼핏 어디서 들었을 만큼 그 리스크는 어느정도 다들 알고 있을텐데요. 왜 주식에서 선물거래가 전 재산을 탕진하고 파산할 정도로 위험한 상품인 것일까요? 현물거래와 선물거래란? 우리가 필요한 물건이 있을 때 현재 물건 값을 지불하고 물건을 구매하는 것을 '현물거래'라고 합니다. 이것과는 다르게 현재 물건을 구매하지 않지만 특정 기간(6개월, 1년 후)이 지난 후에 물건이 필요할 경우가 있습니다. 이 때 현재 시점에 물건 값과 받을 날짜 등을 확정해 계약을 하고 계약한 날짜에 물건과 대금을 교환하는 방식이 바로 '선물 거래..

개발

패키지 잠금 파일(package-lock.json, yarn.lock)이 도대체 무엇일까?

자바스크립트 프로젝트에서 개발을 하는 개발자분들은 package-lock.json 또는 yarn.lock 파일이 굉장히 익숙할 것입니다. 직접 생성한 파일은 아니기 때문에 무심코 그냥 지나갈 수 있는 부분이지만 프로젝트 관리 및 협업을 위해서 굉장히 중요한 부분이기 때문에 제대로 이해해야되는 부분입니다. 이번 포스팅에서는 패키지 잠금 파일은 무엇인지, 왜 패키지 잠금 파일이 중요한지에 대해서 다뤄보도록 하겠습니다. 자바스크립트 패키지 매니저 자바스크립트로 개발하는 개발자라면 npm과 yarn 두 가지 패키지 매니저가 굉장히 익숙할 것입니다. yarn과 npm은 자바스크립트에서 사용하는 패키지들을 관리하는 도구입니다. 패키지라고 하면 프론트엔드 개발에서 활용하는 React, Vue 같은 라이브러리와 ant..

투자/국내주식

맥쿼리인프라 현재 투자할만한 가치가 있을까? 배당금과 배당일은?

최근 신한은행에서 판매한 아름드리펀드가 사기 판정이 확정 나면서 전액 손실이 나버린 일이 있었죠? 수익률 3.71%를 내려다가 전액 손실이 나면 기분이 어떨까요. 정말 암담하다고 생각합니다. 하지만 수익률 6%로 아주 준수하게 배당금을 지급하는 주식이 있다면 어떨까요? 그 주식이 청산되면 어느 정도 하방도 존재한다면? 오늘 소개할 주식은 국내 고배당주 중 하나인 맥쿼리인프라입니다. 맥쿼리인프라가 무엇인지, 배당금과 배당일 그리고 맥쿼리인프라의 앞으로의 전망에 대해서 상세히 다뤄보도록 하겠습니다. 맥쿼리인프라는 어떤 회사인가? 맥쿼리한국인프라투융자회사(Macquarie Korea Infrastructure Fund, MKIF) 또는 약칭 맥쿼리인프라는 2002년 12월에 설립된 아시아 최대 상장 인프라 펀..

투자/ETF

ETF 수수료 숨은 '기타비용'을 꼭 살펴보자, 양아치니?

ETF 장기투자를 하시는 분들에게 중요한 부분 중 하나가 바로 '수수료'인데요. 장기적 투자에서 복리식으로 자산 증식이 되는 만큼 복리식으로 비용도 증가된다는 점도 고려해야 되기 때문입니다. 존 보글(뱅가드그룹의 창립자)은 '보이지 않는 비용(수수료)의 위력'을 조심해야된다고 이야기 하는데 장기간의 투자로 먼 훗날 굴리는 금액이 가령 10억원이라면 연 1%의 수수료는 무려 1,000만원입니다. 이처럼 자산운용사에서 가져가는 비용(수수료)은 별 영향력이 없어보이는 것처럼 보이지만, 실제로는 투자하는데 있어서 굉장히 중요한 포인트입니다. 이런 부분들을 이해하고 나면 아래처럼 판매하고 있는 펀드 판매수수료가 얼마나 어마어마하게 높은 비용인지 인지할 수 있게 됩니다. ETF와 펀드와 결이 다르긴 하지만 ETF ..

개발/Javascript

자바스크립트 스크롤 맨 위로/맨 아래로 올리기/내리기

자바스크립트로 스크롤 최상단, 최하단으로 이동시키기 위해 전역객체(window) scrollTo 메서드를 활용하면 굉장히 간단하게 해결할 수 있습니다. window.scrollTo(x-좌표, y-좌표) x-좌표는 문서의 왼쪽상단부터 시작하는 픽셀단위의 가로축입니다. y-좌표는 문서의 왼쪽상단부터 시작하는 픽셀단위의 세로축입니다. 맨 아래로 스크롤 이동 방법 window.scrollTo(0, document.body.scrollHeight); 맨 위로 스크롤 이동 방법 window.scrollTo(0, 0);

Computer science/알고리즘

[백준: 9093번] 단어 뒤집기 문제 | 자바스크립트(Javascript(JS), Node)

✍️ 문제 9093번: 단어 뒤집기 첫째 줄에 테스트 케이스의 개수 T가 주어진다. 각 테스트 케이스는 한 줄로 이루어져 있으며, 문장이 하나 주어진다. 단어의 길이는 최대 20, 문장의 길이는 최대 1000이다. 단어와 단어 사이에는 www.acmicpc.net 문장이 주어졌을 때, 단어를 모두 뒤집어서 출력하는 프로그램을 작성하시오. 단, 단어의 순서는 바꿀 수 없다. 단어는 영어 알파벳으로만 이루어져 있다. 입력 첫째 줄에 테스트 케이스의 개수 T가 주어진다. 각 테스트 케이스는 한 줄로 이루어져 있으며, 문장이 하나 주어진다. 단어의 길이는 최대 20, 문장의 길이는 최대 1000이다. 단어와 단어 사이에는 공백이 하나 있다. 출력 각 테스트 케이스에 대해서, 입력으로 주어진 문장의 단어를 모두 ..

개발/Next.js

[Next.js@^11] Typescript, Prettier, ESLint 통합하기 with VSCode

들어가기 전에 버전정보 VSCode@1.60.2 Next.js@^11 prettier@^2.4.1 eslint@8.0.1 typescript@4.4.4 VSCode에서 Next.js Typescript, Prettier, ESLint 통합하는 과정은 아래와 같습니다. VSCode 기본 설정 Next.js 설치 ESLint 기본구조 개선 Prettier 플러그인 설치 및 ESLint 연동, 자동 포맷팅 적용 ESLint + Typescript 연동 VSCode 기본 설정 세팅을 위해 비주얼 스튜디오 코드(VSCode, Visual Studio Code) 기본 설정을 진행하시기 바랍니다. VSCode용 ESLint 플러그인 설치 VSCode 설정에 아래 구성 추가 "editor.formatOnSave": f..

투자/ETF

ETF가 상장폐지되거나 자산운용사가 망한다면 어떻게 될까?

주식 투자할 때 가장 큰 리스크를 뽑자면 바로 '상장폐지'입니다. 보유한 지분 가치가 0에 수렴하게 되어 쓰레기가 된다는 의미니까요. 집에 있는 휴지만도 못한 쓰레기가 되는 것입니다. 개별 주식에 투자할 때 가장 큰 리스크인 '상장폐지', ETF에도 이러한 상장폐지 리스크는 없을까요? 과거에 ETF 상품이 상장폐지되는 사례가 생각보다 많았는데 과연 어떤 리스크가 있을까요? KBSTAR KQ모멘텀밸류 등 소규모 ETF 3종, 내달 상장폐지 KBSTAR KQ모멘텀밸류 등 소규모 ETF 3종, 내달 상장폐지 www.newspim.com 결론부터 말씀드리면 ETF에도 상장폐지가 있습니다. 하지만 주식의 상장폐지와는 굉장히 많이 다릅니다. 그리고 주식과는 다르게 순자산가치는 보존되기 때문에 ETF가 상장폐지되더라..

Computer science/알고리즘

[백준: 9012번] 괄호 문자열(Parenthesis String, PS) 문제 | 자바스크립트(Javascript(JS), Node)

문제 9012번: 괄호 괄호 문자열(Parenthesis String, PS)은 두 개의 괄호 기호인 ‘(’ 와 ‘)’ 만으로 구성되어 있는 문자열이다. 그 중에서 괄호의 모양이 바르게 구성된 문자열을 올바른 괄호 문자열(Valid PS, VPS)이라고 www.acmicpc.net 괄호 문자열(Parenthesis String, PS)은 두 개의 괄호 기호인 ‘(’ 와 ‘)’ 만으로 구성되어 있는 문자열이다. 그 중에서 괄호의 모양이 바르게 구성된 문자열을 올바른 괄호 문자열(Valid PS, VPS)이라고 부른다. 한 쌍의 괄호 기호로 된 “( )” 문자열은 기본 VPS 이라고 부른다. 만일 x 가 VPS 라면 이것을 하나의 괄호에 넣은 새로운 문자열 “(x)”도 VPS 가 된다. 그리고 두 VPS x..

개발/Javascript

자바스크립트 encodeURI encodeURIComponent 차이 | URL 한글 인코딩 디코딩 방법과 예시

자바스크립트에서 인코딩 처리를 할 때 자주 사용하는 encodeURI, encodeURIComponent 함수가 있는데요. 똑같은 문자열 인코딩 처리를 하는 것처럼 보이지만 문자열 인코딩 처리 방식이 조금 다릅니다. 상황에 따라서 제대로 활용하기 위해 이번 포스팅에서 해당 구문을 정리해보도록 하겠습니다. encodeURI / decodeURI encodeURI() 함수는 URI에서 특별한 뜻을 가진 문자(예약 문자)는 인코딩 하지 않습니다. 이스케이프 하지 않는 문자: A-Z a-z 0-9 ; , / ? : @ & = + $ - _ . ! ~ * ' ( ) # 예시) // http://webruden.tistory.com/path/to/file.php?foo=123&bar=this has spaces e..

투자/국내주식

ETF에서 'TR'은 어떤 의미를 가지고 있을까? | TR ETF란 feat. 코스피 200TR

ETF에 관심을 가지게 되었다면, 정말 다양한 ETF 상품들을 살펴보게 되는데요. 이때 ETF 상품명 맨 뒤에 "TR"이라고 적힌 ETF가 간혹 보이는 것을 알 수 있습니다. 이번 포스팅에서는 TR ETF가 무엇인지, 어떤 장단점을 가지고 있는지에 대해서 살펴보도록 하겠습니다. TR ETF란? ‘TR ETF’란 총수익지수(TR, Total Return Index)를 추종하는 ETF 상품으로 분배금(ETF의 배당금을 말함)의 자동 재투자가 가능한 것이 특징입니다. 기존의 ETF는 상장주식의 가격지수(PR, Price Index)를 추종하는 상품이었으나 TR ETF는 총수익지수(주가변동뿐만 아니라 배당수익(분배금)을 재투자해 얻게 되는 수익까지 반영한)를 추종 상품으로 배당금의 자동 재투자가 가능합니다. 장..

투자/미국 ETF

전세계 주식 투자 VT ETF | ETF 적립식 장기투자 수익률 계산 (백테스트)

주식 투자를 하면서 전세계 주식에 한번에 분산 투자하고 싶다는 생각을 해보신적 있지 않나요? 오늘 소개할 ETF는 '인덱스 펀드'의 창시자이자 세계적인 자산운용사 뱅가드그룹을 설립한 존 보글(John Bogle)의 투자 철학과 일맥상통하는 ETF로 "건초더미에서 바늘을 찾으려 하지 말고 건초더미를 통째로 사라"는 이야기와 딱 들어맞는 투자 상품입니다. VT ETF란? VT는 "Vanguard Total World Stock ETF"의 이름에서 알 수 있듯이 뱅가드 자산운용사에서 운용하고 있는 전세계 주식을 대상으로 투자하고 있는 ETF입니다. 기본정보 운용사(Issuer) Vanguard 상장일(Inception Date) 2008년 6월 24일 운용 수수료(Expense Ratio) 0.08% 운용규모..

투자/ETF

국내 ETF 추천 코스피(KOSPI) 200 지수 추종 ETF | KBSTAR 200

연말정산 혜택을 받기 위해 운용중인 연금저축계좌에서 TIGER 유로스탁스 배당 30, KODEX 미국FANG 플러스를 매도했습니다. 연금저축계좌에 월 34만원씩 연 400만원을 맞춰서 납입하시면 연말정산 때 혜택을 받을 수 있으니 꼭 연금저축계좌를 개설하시고 혜택을 받길 추천드립니다. 연금저축계좌 + 퇴직연금(IRP)는 최대 700만원 한도까지 납입금에 대해 세제혜택을 받을 수 있다는 것! 아무튼 개인적으로 최근 유럽 투자에 대한 매력이 떨어진다고 판단했고, 굳이 유럽 기업들을 모아놓은 유로스탁스를 모아나갈 필요성이 없는 것 같아 수익실현했습니다. KODEX 미국FANG 플러스는 ETF 기업 구성은 굉장히 매력적이나 분산투자라고 하기엔 기업수가 15개 내외로 굉장히 적었고, 운용 수수료도 0.45%로 높..

투자

미국 주식 백테스트하는 방법 | 백테스트 예제 및 사이트 추천

백테스트란? 백테스트란 현재 결정한 투자전략을 과거에 사용했다면 어느 정도 수익을 낼 수 있었는지 검증하는 작업입니다. 현재의 아이디어와 전략이 타당한지, 이를 통해 향후 수익을 창출할 수 있는지 알아볼 수 있습니다. 백테스팅의 기본 전제는 과거에 효과가 있었던 방법론이 미래에도 효과가 있을 수 있다는 것입니다. 그렇기 때문에 이런 판단은 시장 상황이나 여러 다양한 변수로 인해 전혀 들어맞지 않는 판단이 될 수 있습니다. 백테스트 방법 해외 주식과 같은 경우 포트폴리오 비주얼라이저(PortFolio Visualizer)를 통해 무료로 백테스트를 할 수 있습니다. 백테스트 메뉴로 이동하기 위해 메인 메뉴의 백테스트 포트폴리오(Backtest Portfolio) 항목에서 Backtest Portfolio를 ..

투자/재테크

VTI ETF 적립식 투자로 노후자금 준비하기 | 궁핍한 노후를 보내기 싫다면...

요즘 증시는 헝다, 테이퍼링, 금리인상과 같은 각종 악재속에서 혼란의 시기를 겪고 있습니다. 코로나19 부양책으로 각국은 양적완화 카드를 꺼내들었고 그에 따라 시장에는 유동성이 쏟아져 들어왔습니다. 게다가 제로금리에 가까운 저금리 대출이 가능했기에 "영끌", "빚투"로 주식시장에 참여하는 투자자들도 대거 유입되었죠. "현금을 들고 있으면 바보", "주식안하면 바보"라는 말이 유행어처럼 번졌고, 너도나도 삼성전자 주식을 매수하고 "십만전자"를 외치기 시작합니다. 엄청난 유동성이 주입된 결과 실물경제와 자산시장의 괴리는 점점 더 커져만 가고 있습니다. 고용률이 줄어들고, 실업률은 상승하고 폐업하는 자영업자들이 많아지는 와중에 주식, 부동산, 비트코인 등 각종 자산 가격은 미치도록 폭등합니다. 예상했던 것보다..