개발/Vue

Vue.js v-model 한글 사용 문제 초간단 해결 방법

ue.js를 사용하다보면, input 태그에 v-model 디렉티브를 사용해야될 경우가 굉장히 많습니다. 하지만, Vue에서 v-model 디렉티브를 활용할 때 한글과 같이 사용하면 조금 문제가 생기는데요. 영어를 사용할 때는 발생하지 않았지만, 한글에서는 왜 이러한 문제가 발생하는 것일까요? 현상 Vue에서 v-model 디렉티브를 사용할 때 일반적으로 아래와 같이 사용합니다. 영어와 같은 경우 정상적으로 양방향 바인딩이 되어 있음을 확인할 수 있습니다. 하지만 한글일 경우 어떻게 될까요? 한글을 타이핑하면 조금 문제가 발생하는데요. 발생하는 이슈는 아래와 같습니다. 한글을 입력할 때 키워드 데이터가 즉시 바인딩이 되는 것이 아닌 글자가 조합이 되어야 그제서야 바인딩이 되는 모습입니다. 왜 이러한 이슈..

개발/Nuxt.js

Nuxt.js에서 웹폰트 제대로 사용하는 방법

Nuxt.js로 프로젝트를 진행할 때 여느 때와 같이 main.css 내부에 @import로 webfont를 가져와서 사용하고 있는데, 어느 날 무언가 이상한 점을 발견했습니다. 개발환경에서는 웹폰트가 잘 적용되었기 때문에 "웹폰트가 잘 가져와졌구나"라고 생각했고, 프로젝트 배포를 위해 빌드 후 웹 서버에 올라간 Nuxt.js 프로젝트를 살펴보는데 뭔가 개발버전에서 맞춰놓은 간격과 위치가 미묘하게 다른 점을 발견하게 되었습니다. 폰트에 문제가 있음을 인지하게 되었고, 그 원인을 찾게 되었는데 @import 구문으로 가져오고 있던 웹폰트에 문제가 있었습니다. 프로젝트에서 사용하고 있었던 방법이 Nuxt.js 프로덕션(production) 모드에서 제대로 동작하고 있지 않음을 확인하고 다른 방법으로 변경함으..

투자/삼성전자우 모으기

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

삼전우 모으기 포스팅을 굉장히 오랜만에 작성하는 것 같다. 원래 삼성전자우 모으기 포스팅의 취지는 꾸준히 하루에 1 ~ 2주 정도 매수하면서 하루에 1개씩 모아나가는 과정에 대해서 꾸준히 포스팅할 예정이었는데, 그렇게 글을 작성하다보면 포스팅의 퀄리티가 낮아져서 보는 사람도 쓰는 사람도 별로 좋지 않을꺼라는 판단에 20주를 더 모아나간 이 시점에 삼전우 모으기 포스팅을 올리기로 마음먹었다. 제 블로그를 한번씩 보시는 지인들이 최근에 한번씩 물어보는 것이 "요즘 삼전우 모으기 포스팅이 안올라오는데, 이제 안모아??"라는 질문이다. 결론만 말씀드리면, 아직도 정말 개미처럼 열심히 모아가고 있다고 답을 드릴 수 있을 것 같다. 물론, 최근에 삼성전자, 삼성전자우 주가가 말도 안되게 뛰고 있어서 추가매수를 못하..

블로그/티스토리 팁

티스토리 블로그 다음 저품질 해결방법 (하루만에 탈출한 후기)

며칠 전에 티스토리 블로그에 방문자 수를 늘려보기 위해 여러가지 실험적인 방법으로 블로그에 포스팅하면서 방문자 증가 추이를 지켜봤는데요. 이 과정 중에 제 티스토리 블로그가 다음 저품질 정책으로 인해 다음 검색에 누락이 되는 현상이 발생되었습니다. 키워드 기반의 포스팅을 진행하다보니 글을 박리다매(?)식으로 작성하고 포스팅하게 되었는데 역시나 아니나 다를까 다음에서 기가막히게 바로 저품질을 때려버렸습니다. 이번 포스팅에서는 티스토리 블로그가 다음 저품질에 걸려서 다음 검색에 누락이 되었을 때 탈출하는 방법에 대해서 소개해드리겠습니다. 필자는 약 하루만에 다음 누락에서 탈출하게 되었습니다. 다음 저품질 확인하는 방법 다음 저품질로 인해 다음 검색 누락 이슈를 해결하기 전에 자신의 블로그가 실제 다음 저품질..

알고리즘/정렬

자바스크립트로 구현한 버블정렬 알고리즘 (Bubble sort in Javascript)

'버블정렬' 알고리즘은 코딩 테스트를 준비할 때 가장 처음 접하는 정렬 알고리즘 중 하나입니다. 코딩 테스트에도 한번씩 등장하는 '버블정렬' 알고리즘에 대해서 오늘 확실하게 개념을 잡고 이해해보도록 하겠습니다. 구현 예시의 언어는 자바스크립트로 구현되었으나 알고리즘의 기본 컨셉은 동일하기 때문에 자바스크립트 이외에 다른 언어로 구현하셔도 무방합니다. 버블 정렬이란? 거품 정렬이라고도 불리는 버블 정렬은 두 인접한 원소를 검사하여 정렬(오름차순, 내림차순)하는 방법입니다. (오름차순이라면 작은 값부터 큰 값 순으로 정렬이 될 것이고, 내림차순이라면 큰 값부터 작은 값 순으로 정렬이 되겠죠?) 버블정렬 알고리즘 예시 버블정렬 알고리즘을 좀 더 쉽게 이해하기 위해 코드를 보기 전에 해당 자료를 한번 보시면 좀..

개발/HTML5

iOS에서 input에 적용된 shadow 효과 제거하는 방법 (Remove iOS input shadow)

iOS에서 input 태그에 위와 같이 shadow 효과가 적용되는 점을 확인하게 되었습니다. iOS에서 input 태그에 기본적으로 적용된 shadow 효과를 제거하기 위해서는 CSS 속성 중에 appearance 속성을 제거함으로써 input 태그에 적용된 shadow 효과를 제거할 수 있습니다. appearance 속성 적용 예시는 아래와 같습니다. 예시코드 input[type=text] { /* Remove First */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } appearance 속성이 무엇인지 알고 싶다면 아래를 참고하세요. appearance (-moz-appearance, -webkit-appearance)..

블로그/티스토리 팁

티스토리 통계 l.facebook, lm.facebook란?

l.facebook, lm.facebook이란? 티스토리 통계를 살펴보다 보면, l.facebook, lm.facebook 같은 링크가 눈에 보이곤 합니다. l.facebook, lm.facebook로 설정되어 있는 경로로 접근하면 페이스북 웹사이트로 들어가져서 확인이 불가능한데요. 우리가 일반적으로 알고 있는 facebook.com이나 m.facebook.com은 많이 봐와서 알고 있겠지만 l.facebook, lm.facebook와 같은 url은 굉장히 낯설게 느껴집니다. 잠깐 간략하게 소개해드리면 해당 URL은 페이스북에서 사용자 보호와 사생활 보호를 위해 자동으로 생성한 링크 url입니다. Link Shim이란? 페이스북에서는 2012년도에 "LinkShim"이라는 기술을 발표했는데요. 간략하게 ..

블로그/티스토리 팁

내 티스토리 블로그 점수(지수) 확인하는 방법

티스토리 블로그를 운영하다보면 내 블로그 지수(점수)가 실제 얼마인지 그리고 어느정도 성장했는지를 확인하고 싶은 경우가 생길 것 입니다. 블로그 지수란 간단히 설명하자면 블로그에 점수가 매겨지는 것인데 내 블로그가 전체 블로그 중 어느정도에 위치하고 있는지 확인할 수 있는 척도라고 생각하면 됩니다. 블로그의 성장성을 확인해보는 방법 중 가장 쉬운 방법은 티스토리 관리자에서 보여주는 다양한 통계와 방문자수와 같은 수치들로 체크해보는 방법이 있지만 뭔가 아쉽습니다. 내 블로그 점수 확인하는 방법 내 블로그 점수를 확인하는 방법은 아래와 같습니다. 블로그차트를 활용해서 블로그 순위를 확인하는 방법 구글 서치 콘솔을 활용해서 내 블로그 키워드 노출량을 확인하는 방법 블로그 지수 분석하는 방법 블로그차트 국내에서..

투자/주식용어

[주식용어] 코스피 코스닥 차이

코스피와 코스닥은 주식을 하는 투자자들이라면 굉장히 익숙한 용어입니다. 오늘은 한국 주식시장을 대표하는 코스피와 코스닥에 대해서 알아보도록 하겠습니다. 코스피(KOSPI)란? 코스피 지수(KOrea Composite Stock Price Index, 약어 :KOSPI) 또는 한국종합주가지수는 한국거래소의 유가증권시장에 상장된 회사들의 주식에 대한 총합인 시가총액의 기준시점과 비교시점을 비교하여 나타낸 지표입니다. 원래 명칭은 종합주가지수(綜合株價指數)였으나, 2005년 11월 1일부터 현재 이름으로 바뀌어 사용되고 있습니다. 코스피(KOSPI) 시장 상장 조건 필수조건 코스피의 기업 규모는 자기자본 300억원 이상 영업활동 기간 3년 이상 매출액 최근 1천억원 이상 3년 평균 매출액 700억 이상 다음 ..

투자/재테크

IRP란, 개인형퇴직연금이란? 장단점 제대로 알고 가입하자!

절세를 하기 위해서 다양한 금융상품을 찾다보면 IRP라는 상품을 심심치않게 볼 수 있는데요. 도대체 IRP 금융상품은 어떤 상품이고, 어떠한 장단점을 가지고 있을까요? IRP란? IRP는 Individual Retirement Pension의 약어로써 개인형 퇴직연금입니다. 퇴직금을 IRP계좌로 이전시키고 은퇴할 때 일시금이나 연금으로 수령할 수 있는 상품을 의미하죠. 과거에는 퇴직연금 (DB, DC, 기업형IRP)에 가입해야만 IRP를 가입할 수 있었으나 2017년 7월 26일부터 자영업자, 공무원 등 소득이 있는 사람들은 모두 IRP 가입이 가능하게 바뀌었습니다. 퇴직연금 미가입자의 경우 퇴직금을 받아서 IRP에 가입할 수 있고, 퇴직연금 가입자라면 재직 중에도 IRP를 가입하여 여유자금을 추가로 납..

투자/미국 ETF

미국 SPYG ETF 제대로 알고 투자하자 (SPYG, SPDR Portfolio S&P 500 Growth ETF)

미국 ETF에서 정말 유명하고 인기있는 ETF인 SPY는 자주 들어보셨을겁니다. SPY ETF는 미국에서 굉장히 유명한 지수 S&P500 지수를 추종하고 있는데, S&P500 중에서 성장성이 높은 기업들을 추려서 만든 지수가 S&P500 Growth고 이 지수를 추종하는 ETF가 바로 SPYG입니다. S&P 500 Growth 지수를 추종하는 ETF는 SPYG만 있는 것이 아니고 IVW와 VOOG ETF도 있습니다. 추후에 S&P 500 Growth 지수를 추종하는 모든 ETF(IVW vs VOOG vs SPYG)를 비교해보도록 하고, 이번 포스팅에서는 SPYG ETF에 대해서 상세하게 다뤄보도록 하겠습니다. SPYG 기본정보 운용사 - State Street Global Advisors 운용규모 - 1..

투자/주식용어

[주식용어] 데드캣 바운스란?

주식을 하다보면 종목토론방이나 리딩방에서 데드 캣 바운스라는 주식 용어를 한번씩 들어본 경험이 있을 것입니다. 이번 포스팅에서는 실제로 많은 투자자들이 사용하고 있는 주식 용어인 데드 캣 바운스에 대해서 알아보도록 하겠습니다. 데드 캣 바운스(Dead cat bounce)란 데드 캣 바운스(Dead cat bounce), 줄여서 데드캣은 죽은 고양이도 높은 곳에서 떨어지면 잠깐이나마 튀어 오른다라는 의미로, 주가가 급격히 하락하다가 소폭 반등할 때의 모습을 비유한 용어입니다. 주가가 초단기 반등에 힘입어 '일시적으로 회복하는 것처럼' 보이는 상태를 뜻한다. 당연히 전체적인 흐름은 하락장이므로, 여기에 속아 주식을 사게 되면 손해를 보게 됩니다. 유례 급락하는 주식이 아주 잠깐 동안 흐름을 거슬러 상승하는..

일상/생활팁

카카오 키워드광고 다이렉트 검색량 확인하는 방법

블로그 포스팅을 할 때 가장 유념해야될 부분이 뭔지 아시나요? 그건 바로 "키워드" 입니다. 우리가 어떤 정보를 얻고자 할 때 검색사이트에서 특정 키워드를 검색해서 나오는 정보들 중에 관심이 가는 블로그 글을 선택해서 정보를 습득하곤 하죠. 정보를 얻고자 하는 사람은 내가 검색한 키워드와 일치하는 확실한 정보를 얻고자합니다. 그러면 반대로 블로그 포스팅을 하는 블로거 입장에서는 이러한 사람들이 검색하는 키워드의 글 상위에 노출해서 선택을 받게 해야되는 것이 가장 중요한 점이겠죠? 각 검색엔진에 따라서 키워드 검색 및 검색엔진에서 사용하고 있는 알고리즘을 활용해서 키워드에 따른 블로그 포스팅의 순위를 매기곤합니다. 우리가 포스팅을 작성할 때 어떻게 키워드를 선별해서 사용해야되는지 카카오 키워드 광고 검색량..

개발/AWS

AWS S3 정적 웹사이트 호스팅하는 방법 (Hosting a static website on Amazon S3)

정적 웹 사이트를 호스팅하기 위한 방법에는 다양한 방법이 있습니다. Netlify를 활용하거나 Github를 활용해서 제한적이긴 하지만 무료 웹 사이트 호스팅이 가능합니다. 이외에도 GCP(구글 클라우드 플랫폼, Google Cloud Platform)이나 마이크로소프트 애저 그리고 AWS(Amazon Web Service)에서도 정적 웹사이트를 호스팅하는 환경을 제공하고 있습니다. 이번 포스팅에서는 Amazon S3 버킷에 정적 웹 사이트를 호스팅하는 방법에 대해서 소개하도록 하겠습니다. 서버 측 처리에 의존하지 않는다면 S3 버킷에 정적 웹 사이트를 호스팅하는 방법도 여러 방법 중 선택할 수 있는 좋은 대안 중 하나입니다. Amazon S3 버킷에 정적 웹사이트 호스팅하는 방법 Amazon S3 버킷..

투자/주식용어

[주식용어] 서킷브레이커란? 사이드카란? 서킷브레이커와 사이드카 차이

주식투자를 하다 보면 서킷브레이커와 사이드카라는 단어를 들어본 적 있으실 텐데요. 2020년 3월 13일 코스닥지수와 코스피지수에 서킷브레이커와 사이드카가 무더기로 발동되었던 것 기억하시나요?. 폭락 원인은 코로나 19 감염증 대유행으로 인한 미국을 비롯한 글로벌 증시에 도미노 하락이 꼽혔는데요. 이 때 증권시장에서 투자자를 보호하기 위해서 서킷브레이커와 사이드카를 발동시켜 시장을 안정화(진정)시키기곤 합니다.. 서킷브레이커와 사이드카는 투자자들이 급등락하는 주식시장에서 대중심리에 휘말리지 않고 냉정을 찾게끔 투자 심리를 다소 진정시켜주는 효과를 가져다줍니다. 이번 포스팅에서는 과열된 시장을 안정화시키는 서킷브레이커와 사이드카의 개념과 차이점에 대해서 다뤄보도록 하겠습니다. 서킷브레이커란? 서킷브레이커는..

일상/생활팁

아이폰(iPhone)에서 화면 녹화하는 방법 (초간단, 100%성공)

아이폰을 사용하다보면 사용하고 있는 스크린 화면을 녹화하고 싶을 때가 있습니다. 설정 방법 아이폰(iPhone)에서 간단하게 화면을 녹화하는 방법에 대한 절차는 아래와 같습니다. 설정 > 제어 센터로 이동합니다. 제어 센터 페이지 하단에 제어 항목 추가 란에 있는 화면 기록 앱 옆에 있는 + 아이콘을 클릭합니다. 아이폰 사용 중 화면 녹화가 필요한 순간에 화면의 우측 상단 가장자리에서 쓸어올립니다. 화면 기록 아이콘을 누르면 3초 뒤 녹화가 시작됩니다. 우측 상단에 빨간색 점등표시는 녹화 중임을 나타내고 있는 상태 표시등입니다. 녹화 중지를 원할 시 우측 상단의 빨간 점등 아이콘을 클릭 그리고 중단을 클릭하면 화면 기록을 중지할 수 있습니다. 설정 > 제어 센터로 이동 화면 녹화 기능을 추가하기 위해 설..

개발/HTML5

HTML 모바일에서 전화걸기 예제(초간단) (How to Create a Click to Call Link Using HTML)

핸드폰에서 웹사이트를 이용할 때 아래와 같이 전화번호를 누르면 바로 핸드폰 기본 전화걸기 창이 뜨는 것을 본적이 있을 것입니다. 이번 포스팅에서는 HTML a 태그를 활용해서 전화걸기 기능을 간단히 구현하는 방법에 대해서 소개하도록 하겠습니다. HTML a태그를 활용해서 전화거는 방법 HTML a태그를 활용해서 전화거는 기능을 구현하는 방법은 굉장히 간단합니다. 코드는 아래와 같습니다. href 속성값에 url을 넣는 대신 tel:전화번호 형식으로 넣으면 끝! // 예제 전화번호: 123-1234-1234 // 실제 사용 예시 전화번호: 123-1234-1234 전화번호: 123-1234-1234 동작 예시 위에서 예시로 기입한 코드의 동작 원리는 아래와 같습니다. PC에서 href에 tel:전화번호 값..

개발/Javascript

자바스크립트에서 replaceAll 사용하는 방법

예전에는 자바스크립트(Javascript)에서 특정 문자를 모두 바꾸기(치환) 위해서 자바스크립트 문자열 객체의 replace 메서드와 정규표현식 조합으로 사용하곤 했습니다. 구현 예시 replace + 정규표현식 replace + 정규표현식 조합으로 구현하는 예는 아래와 같습니다. 정규표현식에서 gi는 g(모든 값에 대한 검사), i(대/소문자 구분 안함)을 뜻합니다. const str = 'dog dog test dog hello hi'; str.replace(/dog/gi, 'monkey'); // "monkey monkey test monkey hello hi" 하지만 최근에 ecma262 공식문서를 보면 자바스크립트(Javascript)에서 공식적으로 replaceAll 메서드를 제공해주는 것을..

투자/주식용어

[주식용어] 자본이란? 자본금이란? 자본과 자본금 차이점

타이틀을 주식용어라고 적었지만 사실 자본과 자본금의 개념은 경제용어라고 표현하는게 맞지만, 주식이라고 해야 좀 더 친근(?)해 보이기 때문에 주식용어라고 표현해봤습니다. 이번 포스팅에서는 재무제표를 파악할 때 필수적으로 알아야될 내용인 자본과 자본금에 대해서 다뤄보도록 하겠습니다. 자본이란? 자본(資本, capital)은 한자를 그대로 풀이하면 자금의 근본을 뜻합니다. 일반적으로 자본이란 자산총액에서 부채총액을 차감한 나머지를 의미합니다. 자본 = 자산 - 부채 회사가 지속적으로 적자를 내다보면 결손금이 발생하게 되는데 이 때 자본이 자본금보다 줄어드는 일이 발생합니다. 이러한 상황을 자본잠식이라고 합니다. 자본잠식에는 부분자본잠식과 완전자본잠식이 존재하는데 해당 개념을 자세히 알아보고 싶다면 아래를 참..

일상/생활팁

맥에서 예약 종료(셧다운) 명령어 사용하는 방법 (How to set a shutdown timer for your Mac)

맥을 사용하다보면 특정 시간에 컴퓨터를 종료하고 싶은 경우가 생깁니다. 맥(macOS)에서 해당 기능을 커맨드에 명령어를 입력해서 사용할 수 있습니다. 맥에서는 아래와 같이 명령어 한줄을 입력함으로써 예약 종료를 시킬 수 있습니다. 아래와 같이 등록된 예약 종료를 취소할수도 있습니다. 명령어 참고 아래는 맥(MacOS)에서 사용할 수 있는 명령어 목록입니다. 원하는 명령어를 커맨드에 입력하고 실행하면 해당 기능을 바로 사용할 수 있습니다. (해당 기능들은 sudo를 사용함으로 명령어 사용 후 초기에 암호를 입력해야 사용할 수 있습니다.) 예약 종료 (오후 7시) sudo shutdown -h 19:00 예약 종료 (n분 후) // 10분 후 sudo shutdown -h +10 // 20분 후 sudo ..