안녕하세요 TriplexLab입니다. 오늘은 로컬 스토리지(localStorage)를 이용해서 검색어 기능을 만들어보겠습니다. 로컬 스토리지(localStorage) 로컬 스토리지에 관한 자세한 설명은 제가 작성한 글을 참고해주세요. 👇👇 [JavaScript]로컬스토리지, 세션스토리지, 쿠키 정리 🙋‍♂️ 로컬 스토리지, 세션 스토리지, 쿠키 차이점 안녕하세요 TriplexLab 입니다. 오늘은 로컬 스토리지, 세션 스토리지, 쿠키 차이점에 관해서 하나씩 살펴보도록 하겠습니다. 🍪 Cookie 📌 쿠 triplexlab.tistory.com 이것은 CRUD 중에서 C와 D에 해당되는 내용입니다. 음 개인적으로 간단한 이런 검색 기능 같은 경우에는 로컬 스토리지를 이용해서 만들어도 괜찮을 것 같네요. 프..

📲 자바스크립트 모바일 기기 확인(javascript mobile detect) 안녕하세요 오늘은 자바스크립트로 모바일 기기를 체크하여 리다리랙트 시키는 방법에 대해서 소계 해드릴게요 이것은 하나의 웹 사이트에서 PC 도메인, mobile 도메인이 각각 다를때 사용하는것이 좋습니다. 아래 코드는 인터넷에 떠돌고 있는 흔하고, 좋지 않은 코드입니다. 이 코드를 좀 더 짧게 작성해보겠습니다. // 💩 자바스크립트의 화살표 함수, 삼항 연사자를 이용해서 3줄로 만들었습니다. // ✅

✅ IP(아이피) 주소 체크하기 안녕하세요 TriplexLab 입니다. 오늘은 내 사이트에 접속한 IP 번호 체크하는 부분에 대해서 살펴보도록 하겠습니다. 내 사이트가 특정 컴퓨터만(IP만) 접속이 가능하게 하고 싶으시다면 아래코드를 참고하세요! 👇👇 실제 프로젝트 할때는 아래 코드를 사용하서도 되지만 현재 접속한 컴퓨터 IP번호 조회하는것은 백앤드 개발자 분과 협업할때 문의하시면 될것 같습니다. (여기서는 이미로 하드코드으로 IP번호 넣었습니다.) 🔍 등록할 IP 여러게 일경우 만약 등록 IP 내역이 : 115.32.141.0 ~ 115.32.141.202 까지 있다고 한다면 다음과같이 등록 하시면 됩니다. const ipStart = [ {'company':'115.32.141.0'}, // 회사에서..

🙋‍♂️ 로컬 스토리지, 세션 스토리지, 쿠키 차이점 안녕하세요 TriplexLab 입니다. 오늘은 로컬 스토리지, 세션 스토리지, 쿠키 차이점에 관해서 하나씩 살펴보도록 하겠습니다. 🍪 Cookie 📌 쿠키는 만료 기한이 있는 Key, Value 형태의 저장소 function setCookie(name, value, day) { var date = new Date(); date.setTime(date.getTime() + day * 60 * 60 * 24 * 1000); document.cookie = name + '=' + value + ';expires=' + date.toUTCString() + ';path=/'; }; function getCookie(name) { var value = docu..

✨ slider custom 안녕하세요 TriplexLab 입니다. 오늘은 제가 slider를 응용해서 만든 slider custom에 관해서 살펴보도록 하겠습니다 :) 저도 이 슬라이스 애니메이션은 웹써칭을 하다가 우연히 발견한 애니메이션 입니다. ✍️ slider custom 코드 TriplexLab Front Developer Blog * { margin: 0; padding: 0; list-style: none; } @keyframes slidein { 0% {left: 45%;opacity: 0;} 100% {left: 50%;opacity: 1;} } @keyframes slidein2 { 0% {right: 45%;opacity: 0;} 100% {right: 50%;opacity: 1;} ..

✨ 자바스크립트 스마트하게 쓰기 안녕하세요 TriplexLab 입니다. 이번시간에는 자바스크립트를 스마트하게 사용할수 있는 팁을 정리 하도록 하겠습니다. 1) 삼항연산자 (Ternary Operator) // 삼항연산자 ❌Bad Code function getResult(score){ let result; if(score > 5){ result = '👍'; } else if(score 5 ? '👍' : '👎' } 2) 널 병합 연산자(Nullish Coalescing Operator ) // Nullish coalescing operator ❌Bad Code function printMessage(text) { let message = text; if(text === null || text === und..

👨‍💻 자주쓰는 명령어 .zshrc에 단축명령어 등록하기 안녕하세요 TriplexLab 입니다. 오늘은 macOS 터미널에서 자주 쓰는 긴 명령어를 단축명령어로 설정하여 간편하게 사용하는 방법에 관한서 알아보겠습니다. (밑에 처럼 유튜브에 있는 영상의 배경음악을 mp3의 파일일로 다운로드 할수 있습니다.) 단축 명령어로 유튜브 뮤직에 음악을 다운로드함. 자 이렇게 쉽게 음악 파일을 다운 받기 위해서는 다음과 같이 설정이 필요 합니다. 저 같은 경우에는 vim을 사용할것 입니다. (nano, vi, vim은 다 비슷한 텍스트 에디터입니다. 자신이 편한것으로 사용해도 무방합니다.) 🎯 alias (단축키) 설정하기 아래 방법은 zsh를 사용할 때입니다. 1. 터미널을 켜고, 아래 명령어를 입력합니다. vim..

💩 인터넷 익스플로러 엣지(edge) 자동전환 안녕하세요 TriplexLab입니다. :) 인터넷에 떠 돌고 있는 인터넷 익스플로러에서 자동으로 엣지로 리다이렉트 되는 코드를 가지고 커스터마이징 했습니다. 필요하신 분은 사용하세요! 요즘 인터넷 익스프로러 창을 열러고할때 마이크로소프트 익스플로러 엣지(edge)로 자동전환되서 화면이 열리는 현상이 일어나고 있습니다. 2022년 6월에 마이크로소프트는 인터넷 익스프로러 서비스를 완전히 종료한다고 발표했습니다. 그래서 미리미리 준비했습니다. 조금 이라도 빨리 엣지 브라우저에 적응 하시라고 (이왕이면 크롬브라우저 사용하시면 좋겠네요! 이글을 보고 있는 개발자 분들은 크롬을 쓰시겠지만...) 물론 엣지 브라우저에서 아래와 같이 설정을 변경해서 IE11를 계속 사용..

📌 Github SSH public Key란 안녕하세요 TriplexLab입니다. 오늘은 Github SSH public Key 2개 이상 등록하는 방법에 관해서 살펴보도록 하겠습니다. 먼저 Github에서 SSH public Key를 사용하는 이유는 보다 안전하게 암호화된 원격에 접속하기 위해서입니다. 즉 컴퓨터와 컴퓨터가 인터넷과 같은 Public Network를 통해 서로 통신을 할 때 보안적으로 안전하게 통신을 하기 위해 사용하는 접속 프로토콜입니다. 📌 STEP 1 - Git Hub용 SSH Key 생성 🎯다음 명령어를 입력한다. (메일 계정은 본인 git계정에 등록한 이메일 주소를 써주도록 하자.) ssh-keygen -t rsa -b 4096 -C "yourEmail@example.com" ..

🔒 GitHub 토큰 인증 로그인 안녕하세요 TriplexLab입니다. 오늘은 GitHub에서 ID/PW기반의 Basic Authentication 인증을 금지하고, ID/Personal Access Token 방식의 Token Authentication 인증을 요구하고 있어서 문제점: GitHub에서 ID/PW기반의 Basic Authentication 인증을 금지함. 해결 방법 요약: 토큰을 발급받아서 내 로컬 키체인에 저장합니다. 오늘 한번 push를 해보니 정말로 에러 메시지가 뜬다. 👇👇 에러 메세지: remote: Support for password authentication was removed on August 13, 2021. Please use a personal access toke..

🌊 wave keyframes로 만들기 안녕하세요 TriplexLab입니다. 오늘은 css에서 animation사용해서 wave를 직접 만드는 것을 소개하겠습니다. ✍️ wave_custom 코드 @keyframes wave{0%{margin-left:0}100%{margin-left:-3056px}} @keyframes swell{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-30px,0)}} .inner .tit { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .ocean { width: 100%; position: fixed; botto..

🔑 티스토리 Access Token 발급받기 안녕하세요 TriplexLab입니다. 오늘은 티스토리 API Access Token 발급받기 방법에 대해서 살펴보도록 하겠습니다. 먼저 티스토리 API를 이용하기 위해서는 아래 사이트에서 API를 사용할 수 있는 권한을 얻어야 합니다. 📌 API 발급 절차와 안내받기 티스토리 open_api사이트에 방문하여 앱을 등록해 주셔야 합니다.! 👇👇 TISTORY 나를 표현하는 블로그를 만들어보세요. www.tistory.com 이렇게 내용을 채우고 등록을 눌러주면 바로 아래처럼 앱 아이디와, 시크릿 키를 발급받을 수 있습니다. 이제 오픈 API 가이드에 들어가면, api 발급 절차와 안내를 볼 수 있습니다. 소개 · GitBook No results matching..