👨‍💻 VIM 명령모드 텍스트 치환하기 안녕하세요 TriplexLab 입니다. 최근에 유닉스 커맨드 라인을 공부하고 있는데 좀 신기하고, 재미 있는 것을 찾아서 정리 할려고 합니다. VIM란 VIM은 CLI환경에서 텍스트 에디터 처럼 사용할수 있는 프로그램 입니다. 실습 시작 👇 메모장 파일에 다음과 같은 텍스트를 미리 작성했습니다. // test파일명 I love Javascript I like Java I want to learn deep learning! I like triplexlab! I like programiing! I am a programmer. Data science is important! I like computer science! 해당 파일있는 곳으로 접근하기 터미널에서 메모장 파..

😸 TypeScript 설치및 환경설정 안녕하세요 TriplexLab 입니다. 오늘은 TypeScript 설치관한 이야기를 해보도록 하겠습니다. 😀 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 공식 사이트에 들어가서 보면 다음과 같은 2가지 버전을 선택하여 다운로드 할수 있습니다. 왼쪽에 있는 LTS는 'Long Term Support'의 줄임말로 'Node.js 커뮤니티에 의해 장기간 지원받을 수 있는 버전'이라는 뜻입니다. LTS 버전이 되면, 그 뒤로 30개월 동안은 해당 버전에서 발견되는 각종 버그 등에 대한 패치(수정)를 Node.js 커뮤니티로부터 보장받을 수 있습니다. LT..

🍵 brew로 git 설치하기 안녕하세요 TriplexLab 입니다. 오늘은 brew로 git 설치하는 방법에관해서 설펴보도록 하겠습니다. Homebrew 설치가 안된분들은 지난 글을 보고 오시면 됩니다. 🏡 Homebrew와 Cask, 설치및 기본 사용법 Homebrew와 Cask, 설치 및 기본 사용법 안녕하세요 TriplexLab입니다. 먼저 항상 저의 블로그를 찾아주시는 분들에게 감사의 인사를 드립니다🙇🏼‍♂️​ 오늘은 Homebrew 이라는 괜찮은 '패키지 관리 triplexlab.tistory.com brew로 설치 하셨다고 보고 바로 git 설치를 해보겠습니다. 1) brew로 git을 설치하려면 brew install git이라고 쓰고 실행하면 됩니다. 2) 조금 기다리면 아래와 같은 화면..

instagram API [인스타그램 피드를 웹사이트에 출력하기] 안녕하세요 TriplexLab 입니다. 오늘은 인스타그램 API를 사용해서 웹사이트에 출력하는 과정을 알려 드리겠습니다. 3단계로 나눠서 진행 할것 입니다. 잘 따라 오세요:) 1. Facebook App - instagram API 설정 👇 준비물 1) 인스타그램 계정 2) 페이스북 개발자 사이트의 계정 3) 노출시킬 웹 사이트(페이지) 시작합시다. 1) 앱 만들기 버튼 클릭 2) 개인 계정거를 사용할것이기에 소비자를 체크 3) 본인이 알기 편한 앱 이름를 작성합니다. 그리고 비즈니스 관리자 계정 선택되지 않음. 앱 만들기 버튼 클릭하고 진행 합니다. 4) instagram 기본 표시에 있는 '설정' 버튼을 클릭 합니다. 5) 하단에 '..

[ScrollMagic] 스크롤매직 라이브러리 안녕하세요 TriplexLab 입니다. 오늘은 스크롤매직 라이브러리 관해서 간단한 인터렉션을 만들어 봤습니다. 바로 스크롤에 반응하는 애니메에션 동작 입니다. #start { height: 100vh; } .content { width: 170px; position: absolute; top: 50%; left: 10%; transform: translate(-50%, -50%); } .content img {width: 100%;} .info { height: 100vh; background-color:cornflowerblue; } .footer { height: 100vh; background-color:yellowgreen; } (function(){..

Chart.js 플러그인 소개[Plugins | Chart.js] 안녕하세요 TriplexLab입니다. 오늘은 Chart.js 라고 하는 플러그인을 사용해서 데이터 시각화에 대해서 살펴보도록 하겠습니다. 👇 공식 사이트입니다. 한번 들어가셔서 설명서 보면 좋을것 같습니다. Chart.js | Chart.js Chart.js (opens new window) Installation You can get the latest version of Chart.js from npm (opens new window), the GitHub releases (opens new window), or use a Chart.js CDN (opens new window). Detailed installation instruct..

Javascript Typing Animation 안녕하세요 TriplexLab 입니다. Typing Animation 오늘은 Javascript Typing Animation에 관해서 살펴보도록 하겠습니다. 프론트개발자분들이 응근히 자주 사용하는 Typing Animation 코드를 소개합니다. Typing Animation 코드 @keyframes cursor { to { border-color: transparent; } } .txt { display: table-cell; vertical-align: middle; border-right: 0.05em solid #F81857; animation: cursor 0.5s ease infinite; } const content = 'javascript..

jQuery rateYo 별점 안녕하세요 TriplexLab입니다 :) 오늘은 별점 매기는 플러그인 jQuery rateYo에 대해서 간단하게 소개하겠습니다. rateYo 별점 설명 rateYo은 이것 jQuery 기반의 플러그인입니다. jQuery가 먼저 로딩한 후에 rateYo가 로딩되어야 합니다. RateYo!, A jQuery Star Rating Plugin Hacks - The Radioactive Options You need to be extra careful with these options. If not used properly, the plugin may not function as expected starSvg: String, default: Star SVG This option c..

카카오 링크 api 사용하기 안녕하세요 TriplexLab입니다 :) 오늘은 JavaScript로 카카오 메세지 보내는 모습을 보여 드리겠습니다. 카카오 개발자 사이트에서 템플릿을 설정 카카오 개발자 사이트에서 템플릿을 설정할수도 있습니다. 카카오링크 > 메시지 템플릿라는 영역에서 '메시지 템플릿 빌더 바로가기' 버튼을 클릭하면 됩니다. 왼쪽 상단에 '+템플릿 만들기' 버튼을 클릭하시면 FEED버전, LIST버전, COMMERCE버전을 선택할수 있습니다. 또 이미지, 프로필, 제목/설명, 소셜...등등 다양하게 정보를 입력할수도 있습니다. 코드로 템플릿을 설정 저는 참고로 하단에 공식문서 예제를 참고 하였습니다. Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. ..

👨‍💻카카오톡 로그인 API 사용하기 안녕하세요 TriplexLab입니다 :) 오늘은 JavaScript로 카카오 로그인하는 모습을 보여 드리겠습니다. 🎯카카오톡 로그인 API 실행 결과 카카오톡 로그인 API 실행 결과 먼저 하단에 카카오 개발자 사이트를 방문하셔서 로그인을 해줍니다. Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 로그인 후 > 내 애플리케이션 탭을 클릭합니다. 그리고 애플리케이션 추가하기 버튼을 클릭합니다. 그럼 다음과 같은 팝업이 나옵니다. 만들고자 하는 앱 이름을 작성해 줍니다. 그럼 다음과 같은 페이지로 이동합니다. 요..

lodash 라이브러리 정리 안녕하세요 TriplexLab입니다 :) 오늘은 lodash 라이브러리에 대해서 정리해보겠습니다.(lodash 사용법) lodash 같은 경우에는 FE개발자들이 정말 자주 하는 작업들을 쉽고, 단순하게 작업을 도와주는 역할을 합니다. 예를 들어서 JSON형태의 데이터들을 받아서 화면에 뿌려주는데, 그냥 뿌려주는 것이 아니라, 필요한 데이터만 필터링한다던가, 혹은 다른 연산을 하고, 뿌려준다던가 작업 등등을 할때 유요한 라이브러리입니다. 이 라이브러리를 몰랐을 때는 제가 필요한 함수(기능)를 직접 만들어서 사용했는데... 이제 그럴 필요가 없어졌네요ㅠ 제가 만든 거보다 그 이상으로 많은 함수들을 재공해 주니깐요ㅎㅎ Array _.findIndex (function() { con..

네이버로 로그인하기 API 안녕하세요 TriplexLab 입니다 :) 오늘은 자바스크립트로 네이버 로그인하는 방법에 대해서 살펴보도록 하겠습니다. NAVER Developers 네이버 오픈 API들을 활용해 개발자들이 다양한 애플리케이션을 개발할 수 있도록 API 가이드와 SDK를 제공합니다. 제공중인 오픈 API에는 네이버 로그인, 검색, 단축URL, 캡차를 비롯 기계번역, 음 developers.naver.com 네이버 아이디로 로그인 클릭 오픈 API 이용 신청 클릭 처음 네이버 개발사이트에 접속하면 위와 같은 화면이 보입니다. 약관동의, 계정 정보 등록, 애플리케이션 등록 3단계 진행을 해주세요 애플리케이션 단계에서 서비스 URL 이라는 항목이 있는데 이곳에 실제 운영하고 있는 사이트 주소를 입력..