Beyond the Laziness

기존 포스팅에서 vue.js 개발을 위해 필요한 개발환경 구성을 위한 "node.js 설치 / Visual Studio Code 설치 / Build 환경 구성 / 서버 기동" 등에 대해서 알아보았습니다. 그럼, 이번에는 실제 vue.js 프로그램 개발을 위해 수정해야 하는 메인 파일인 App.vue 파일의 내용을 수정하고 이를 build 해 정상적으로 개발한 내용이 적용되는지 확인해 볼게요. 지난 포스팅에서 생성한 C:\vue_test 프로젝트 폴더를 열어줍니다. 그러면 아래와 같이 팝업이 뜨는데요. 선택한 폴더의 파일과 제작자에 대해서 신뢰를 하는지 물어봅니다. 해당 경로에 있는 프로그램은 자동적으로 수행될 수 있으므로 신뢰여부를 물어보는데요. 당연히, "Yes, I trust the athors"를 ..

Vue.js를 통해 애플리케이션을 코딩해 프로그램을 만들기​ 위해서는 프로그래밍할 수 있는 코딩 개발툴을 설치해야 하는데요. 많이 사용되는 것이 바로 Microsoft 사의 Visual Studio Code 입니다. 비주얼 스튜디오 코드는 가벼워 쾌적한 개발환경을 제공하고 다양한 프로그래밍 언어를 사용할 수 있어 많은 사람들이 사용하고 있습니다. 그럼 실제 설치해보면서 과정을 남겨볼게요. 먼저 아래 사이트를 방문해 설치파일은 다운로드 받습니다. Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and ..

지난 포스팅 과정에서 node.js 설치와 Visual Studio Code를 설치해봤는데요. 이제 본격적으로 Vue.js 실습을 진행해 보려고 합니다. 1. 프로젝트 생성 먼저 샘플 코드 작성을 하기 위해서는, vue 프로젝트를 생성해야 합니다. 프로젝트를 생성하기 위해서는 프로젝트가 위치할 경로를 결정해야 하는데요. 이번에는 찾기 쉽게 C:\ 아래에 바로 프로젝트를 생성해보려고 합니다. 비주얼 스튜디오 코드에서 터미널 탭으로 이동하면 콘솔창에서 명령어를 수행 할 수 있는데요. 먼저 c:\ 이동하기 위해 아래 "cd c:\" 명령을 쳐줍니다. 그 다음 "npm create vue@latest" 를 쳐주면 아래와 같은 입력항목들이 나오는데요. 여기서 Project name은 "vue_test"로 작성하고..

최근 Vue.js를 통해 개발을 해보려고 공부를 하고 있습니다. 그러기 위해서는 환경을 구성해야 하는데요. 먼저 개발된 Vue.js 스크립트를 테스트하기 위한 서버와 빌드환경을 구성해야합니다. 그러기 위해서는 Node.js를 설치해야 합니다. Node.js 설치하기 아래 링크를 통해 Node.js를 다운로드 받아 설치를 진행해야 하는데요. Node.js — Download Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 본인 PC의 OS에 맞는 파일을 다운로드 해야하는데요. 현재 가장 최신의 LTS 버전은 20.11.1 입니다. 커다랗게 표시된 LTS란 Long Term Support 의 약어로 장기 지..

저는 고양 스타필드를 자주 가는데요. 특히 올해 8살이 된 아들과 놀거리가 많기 때문에 함께 자주 갑니다. 이번에는 토이킹덤에 있는 레고를 구매를 하려고 갔는데요. 건담베이스가 새로 생겨서 방문해봤습니다. 들어가는 입구부터 멋지게 꾸며 놓았더라고요. 겉으로 보기엔 들어가는 입구가 좁아 보였지만 안쪽으로 들어가면 공간이 쭉 이어져서 꽤나 큰 매장 사이즈를 가지고 있습니다. 입구부터 구매를 유혹하는 손짓이 가득합니다. 입구쪽에는 새로나온 재품이라던지 한정판 같은 모델들을 위주로 배치해 놓았더라구요. 아이들이 좋아하는 포켓몬 시리즈들도 많이 전시가 되어 있어 나이가 어린 친구들에게도 좋을 것 같아요. HTML 삽입 미리보기할 수 없는 소스 이제 제가 좋아하는 로봇들이 슬슬 나옵니다. 몰랐는데 조립을 한 후 아..

안녕하세요? 최근 영상편집을 위해 맥북 프로 M3 pro를 구입해 어도비 프리미어 프로로 아주 영상편집에 잘 활용하고 있습니다. 이제는 기본 폰트 외 다른 폰트로 영상편집을 하기 위해 폰트를 설치해보았습니다. 그 과정을 공유해 드릴게요. 먼저 폰트를 다운로드 받습니다. 제가 자주 사용하는 지마켓 Sans 폰트입니다. 아래 그림에도 나와 있지만 누구나 제약없이 자유롭게 수정하고 재패포 할 수 있는 무료 폰트입니다. 위에서 보면 옵션이 TTF / OTF 2가지가 있는데요. 저는 이번에 TTF를 다운로드 받아서 설치를 진행했습니다. 만약 무료 폰트인 지마켓 산스를 설치 하시려면 아래 링크로 들어가시면 됩니다. G마켓 - 쇼핑을 바꾸는 쇼핑 Gmarket Sans corp.gmarket.com HTML 삽입 미..

최근에 레고를 주제로 유튜브 채널을 개설하고 운영하고 있습니다. 아무래도 레고라는 주제가 한국에서 그렇게 인기 있는 주제는 아니기 때문에, 현재 영어를 기반으로 글로벌 시청자들을 대상으로 영상을 업로드 하고 있습니다. 그렇다고 한국의 시청자를 놓칠수는 없겠죠? 유튜브 영상을 업로드하면 가장 기본으로 "제목"과 "상세설명"을 등록할 수 있는데요. 현재는 영어로만 등록되어 있지만 한국 시청자들을 위해 한국어로 등록해야합니다. 유튜브에서는 해당 컨텐츠를 글로벌하게 다양한 시청자들을 대상으로 하기 때문에, 다국어에 대한 지원을 해주는데요. 오늘은 제목, 상세설명, 자막에 대해서 다국어로 등록하는 방법에 대해 알아보려고 합니다. 먼저 유튜브 스튜디오로 들어가는데요. App이 아닌 웹페이지로 접속을 하고 반드시 P..

최근 레고 유튜브 동영상을 촬영하고 업로드를 하고 있는데요. 항공샷으로 찍다보니 핸드폰이 위아래를 인식하지 못해 화면이 돌아가서 프리미어 프로에 올라가는 현상이 발생했습니다. 한개의 동영상 클립을 회전할 때에는 "효과컨트롤" 탭으로 이동해 "회전" 항목에 90도나 -90도를 입력해서 영상을 회전시키면 되는데요. 이게 수십개의 동영상을 다 돌려야 하는거라 일일히 이런 작업을 진행하기에는 너무 비효율적입니다. 그럴 때 일괄적으로 세로에서 가로로 전환하는 방법에 대해 간단하게 설명해 보려고합니다. 먼저 위에서 설명한 것 처럼 촬영한 유튜브 영상을 시퀀스에 올려놓고, "효과 컨트롤" 탭에 있는 "회전" 항목의 값을 변경해 정상적인 방향으로 돌려줍니다. 제 영상의 경우는 회전에 90도를 입력하면 정상적으로 돌아갔..

최근에 다른 채널을 한개 더 생성을 해서 운영을 하고 있습니다. 유튜브의 경우 수익창출에 대한 환경설정을 해야 하는데요. 유튜브 채널을 생성한 후 유튜브 스튜디오에 로그인을 하고 하단에 있는 "수익" 탭으로 가면 아래와 같은 화면이 기본적으로 나타나게 됩니다. 아무래도 유튜브는 글로벌 플랫폼이기 때문에 각 나라의 방송 송출의 규제와 수익에 대한 지급의 문제들이 엮여있기 때문에 위와 같이 본인이 어디에 거주를하고 유튜브를 하는지를 설정해줘야 하는 것이죠. 아직 수익을 창출하려면 한참은 멀었지만, 그래도 환경은 미리미리 설정해두어야 나중에 당황하는 일이 없겠죠? 위에서 "자세히 알아보기"를 클릭하고 넘어가면 아래와 같은 YouTube 고객센터의 도움말이 나타나는데요. 간단하게 설명하자면 유튜브스튜디오로 들어..

최근 아들 동영상을 촬영하면서 새로운 시도를 했던 부분이 핸드폰 2대로 촬영을 했다는 것입니다. 촬영을 하고 난 후 아래와 같이 영상을 올려놓고 각 부분을 자르면서 편집하면 되겠지만 그러면 상당히 불편하겠죠? 그래도 명색이 어도비 프리미어 프로인데, 아주 편집을 스마트하게 할 수 있는 방법이 있을거라 생각하고 검색을 했습니다. 역시나 프리미어 프로에서 제공하는 기능 중 멀티카메라 편집이라는 아주 좋은 기능이 있더군요. 그럼 어떻게 멀티카메라 편집을 할 수 있는지 알아볼까요? 먼저 카메라 2대로 촬영한 영상을 프로젝트로 드래그 & 드롭으로 가져옵니다. 2대 이상이라도 별로 달라질 필요는 없겠죠. 동시에 촬영한 영상이니 아래와 같이 레이어를 쌓듯이 영상을 트랙별로 얹어 줍니다. 여기서 문제는 아무리 동시에 ..