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

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

👨‍💻 스크롤 방향 감지하기(마우스 스크롤 위아래) 안녕하세요 TriplexLab입니다 :) 오늘은 javascript 스크롤 방향 감지하기에 관해서 간단하게 정리하겠습니다. ✍️ 스크롤 방향 감지하기 코드 * { margin: 0; padding: 0; box-sizing: border-box; } .clearfix::after { content: ''; clear: both; display: block;} .navInner {width: 100%; position: fixed; top: 0; background-color: #fff; padding: 20px; box-sizing: border-box; transition: top 0.4s ease-in-out;} .logo {float: left;}..

👍이미지 슬라이드 (Carousel) 안녕하세요 TriplexLab입니다. 오늘은 HTML + CSS3 만 가지고 이미지 슬라이드를 만들어 보겠습니다. 이번에 구현하는 이미지 슬라이드는 IE 버전은 지원되지 않습니다. 참고하세요 1 2 3 * { box-sizing: border-box; } .slider { width: 600px; text-align: center; border-radius: 10px; overflow: hidden; } .slides { display: flex; overflow-x: auto; /* overflow: hidden; */ scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling..

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

Pagination.js 커스터마이징2 안녕하세요. TriplexLab입니다. 오늘은 지난 시간에 이어서 Pagination.js 커스텀 마이징에 관해서 작성 해보겠습니다. 지난번에 작성한 글입니다. 참고로 보시면 좋습니다. Pagination.js 커스터마이징 안녕하세요. TriplexLab입니다. 즐거운 주말 보내고 있으신가요?ㅎ 오늘은 jQuery 플러그인중에 Pagination.js 커스텀 마이징을 간단하게 해보왔습니다. 모두 개시판 만들 때 기본적으로 pagination을 많 triplexlab.tistory.com 이번에는 Pagination.js를 가지고 Tab기능을 만들어 봤습니다. Tab 기능은 어느 홈페이지든 간에 정말 자주 사용하는 기능중에 하나 입니다. 보통 퍼블리셔라면 마크업 만들..

Pagination.js 커스터마이징 안녕하세요. TriplexLab입니다. 즐거운 주말 보내고 있으신가요?ㅎ 오늘은 jQuery 플러그인중에 Pagination.js 커스텀 마이징을 간단하게 해보왔습니다. 모두 개시판 만들 때 기본적으로 pagination을 많이 쓰실 겁니다. 이것을 응용해서 more(더 보기) 기능으로 튜닝해 봤습니다. @-webkit-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity: 1;} } @-moz-keyframes fadeInFromNone { 0% { display: none; opacity: 0; } 100% { display: block; opacity:..

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

npm 패키지 배포하기 안녕하세요 TriplexLab 입니다 :) 오늘은 자신이 직접 개발한 자바스크립트 패키지를 npm에 배포하는 방법에 대해서 알아보겠습니다. npm 로그인 npm 계정을 만드셨다면 터미널에서 npm login 커맨드를 입력하고 npm 사이트에서 계정을 만들 때 입력했던 개인 정보들을 입력합니다. $ npm login (...) Logged in as daleseo on https://registry.npmjs.org/. 제대로 로그인이 되었다면 npm whoami 커맨드를 입력했을 때, 본인의 username이 출력될 것입니다. $ npm whoami triplexlab 패키지 생성 npm init -y package.json 파일은 모든 npm 패키지에 반드시 있어야 하는 파일입니..

🌐 Postman으로 API서버 통신하기 안녕하세요 TriplexLab입니다 :) 오늘은 Postman에 관해서 정리 해보겠습니다. 보통 실무에서 프론트 개발자와, 백엔드 개발자와 협업해서 같이 서버스(웹사이트)를 만들어 갑니다. 보통은 백앤드 개발자는 서버(API 서버)를 만들고, 프론트 개발자는 그것을 받아서 화면에 그려주는 역할을 합니다. 하지만 실무에서 일하다보면 백앤드 개발자분이 API 서버를 다 만들어 줄 때까지 프론트 개발자는 마냥 기다릴 수는 없는 상황이 됩니다. 그런 상황일때 Postman에서 재공 하는 mock server(가짜 서버)를 이용하면 유용할 것 같습니다. Postman 로그인 하시고 들어가면 첫화면이 보입니다. mock server 만들기 다음과 깉은 순서로 화면을 클릭하면..

ECMAScript [ES6-11] 최신 문법 정리 안녕하세요 TriplexLab입니다. 오늘은 javascript ECMAScript [ES6-11] 최신 문법에 대해서 정리해보겠습니다. 👉Shorthand Property Names( 객체 초기자 ) /** * Shorthand Property Names * https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer */ { const TripexLab1 = { name: 'Ellie', age: '18', }; const name = 'Ellie'; const age = '18'; // 💩옛날 옛적에 사용했던 방법 const TripexLab2 ..

VScode Prettier 안녕하세요 TriplexLab 입니다 :) 오늘은 코드 품질를 좀더 효율적으로 관리하기 위해서 prettier라는 확장 프로그램을 사용해 봅시다. VS code 에디터에서 prettier를 설치해 주세요. 그리고 단축키 command + ,를 눌러서 설정 파일에 들어가주세요. settings.json 파일로 들어가시면 됩니다. 저는 하단에 있는 옵션들을 추가 했습니다. 옵션들을 공식문서에서 검색해서 무슨 의미인지 보시고, 자신의 프로젝트에 추가 하는것을 추천 합니다. 참고로 editor.defaultFormatter 같은 경우에는 VScode(에디터) 기본적으로 Formatter기능을 가지고 있습니다. 뿐만 아니라, Beautify등 Formatter기능을 하는 다른 확장프로..