📲 자바스크립트 모바일 기기 확인(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..

♻️ for의 break, forEach의 return false 차이점 안녕하세요 TriplexLab 입니다. 오늘은 for문에 break문과 forEach문에 return false문의 차이점을 설명 하다고 히겠습니다. 📝 배경설명 for문과, forEach문 둘다. 동일한 sceneInfo라는 배열 객체를 돌고 있습니다. 그리고 sceneInfo에 있는 scrollHeight값을 더해서 totalScrollHeight라는 변수에 갱신을 해주고 있는 상황 입니다. 💡 차이점 for문에 break문인 경우 : 특정 조건에 바로 break가 됩니다. forEach문에 return false문인 경우 : 특정 조건에 return false가 되긴 하는데 배열요소를 한번 쭉 돌고 빠져 나옵니다. const ..

🥘 점심 메뉴를 내 맘대로 정렬하기 안녕하세요 TriplexLab입니다. 오늘은 2가지에 관해서 살펴보도록 하겠습니다. 1) 오늘은 점심 메뉴의 data를 내 맘대로 정렬해서 조회하기 (배열의 요소를 유용하게 활용하는 방법) 2) fetch함수를 사용해서 서버와 비동기 통신 하기 new Promise객체와 fetch함수를 같이 사용되는 경우는 흔하지 않습니다. 그래서 이번에 정리했습니다 :) Promisify 검색하면 관한 정보를 찾을수 있습니다. 자바스크립트 코드를 보시면 아시겠지만, 정렬하는 규칙? 대로 함수 별로 묶어놨습니다.(data정렬 규칙) 서버와 비동기 통신 같은 경우에는 Promise 객체는 항상 결과를 줄 수 있는 공급자(Provider)이고, 그것의 then 메소드는 그 결과를 소비하는..

⏰ 사용자 시간 지정(예약 기능) 안녕하세요 TriplexLab 입니다. 오늘은 사용자 시간 지정 기능에 관해서 살펴보도록 하겠습니다 :) 이게 무슨 기능인지 감이 안오시는 분들을 위해서 캡처 사진 공유합니다. 위와 같이 사용자가 직접 원하는 시간을 설정할수 있는 기능 입니다. 위에 캡처본은 비록 라이트모드, 다크모드를 변경하는 것만 할수 있지만 코딩을 다루는 저희로써는 이것을 활용해서 할수 있는 것이 많습니다 :) ✨ 사용자 시간 지정(예약 기능) 활용 예시 적절한 예시는 아니지만 비슷한 응용 예시는 다른 링크를 참고해주세요 👇👇 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 안녕하세요 TriplexLab입니다 :) 오늘은 jquery 레..

👩‍💻 자바스크립트 fetch, then, catch [Promise] 응용하고 안녕하세요 TriplexLab입니다. 오늘은 지난 시간에 했던 fetch함수 관해서 응용해보도록 하겠습니다 :) 하단에 지난시간에 다루었던 fetch함수 관한 글 링크 남겨 보겠습니다. 관심 있는 분들은 보세요~ 🙋‍♂️ 자바스크립트 fetch, then, catch [Promise] 이해하기 자바스크립트 fetch, then, catch [Promise] 이해하기 안녕하세요 TriplexLab입니다. 오늘은 Promise관해서 살펴보도록 하겠습니다. fetch함수의 동작 흐름 해석하기 fetch함수는 Promise객체를 리턴합니다. 나중. triplexlab.tistory.com 위에에 작성한 코드는 렌덤으로 메뉴를 선택하..

🙋‍♂️ 자바스크립트 fetch, then, catch [Promise] 이해하기(Promise 동작원리) 안녕하세요 TriplexLab입니다. 오늘은 Promise관해서 살펴보도록 하겠습니다. ♻️ fetch함수의 동작 흐름 해석하기 fetch함수는 Promise객체를 리턴합니다. 나중에 Promise객체 상태가 -> fulfilled 상태가 되었을 때 then함수에다가 콜백을 등록할 수 있습니다. 그리고 실제로 Promise객체 상태가 -> fulfilled 상태가 되면 등록한 콜백이 실행이 되는 것이고, 그 작업 성공 결과가 콜백의 파라미터(response)로 넘어오는 것입니다. 🙋🏽‍♀️ Promise 객체는 왜 등장했을까? 사실 Promise 객체가 등장하기 전에도 비동기적인 처리를 할 수 있는..

이벤트 위임 (Event Delegation) 안녕하세요 TriplexLab입니다 :) 오늘은 이벤트 위임에 관해서 살펴보도록 하겠습니다. ✍️ 이벤트 위임 코드 다음 코드는 이벤트를 핸들러를 등록하고, 클래스를 토글 하는 코드입니다. 근데 아래 코드는 한 가지 문제가 있습니다. //이벤트 위임 (Event Delegation) (function() { const list = document.querySelector('#list'); for (let item of list.children) { item.addEventListener('click', function(e) { e.target.classList.toggle('done'); }); } })(); 다음과 같이 엘리먼트를 새로 추가하게 되면 이벤트..

Javascript의 prototype 정리 안녕하세요 TriplexLab입니다. 오늘은 Javascript의 prototype 관해서 살펴보도록 하겠습니다. 🎯 OOP 계념 Javascript가 2015부터 class문법이 추가되면서 class문법 관해서 많은 공부를 하다가, 계념이 어느 정도 잡폈을때즘 Javascript의 prototype라는 문법도 있다라는 사실을 뒤늦게 알게 되었습니다. (햔 3년전즘인가 Javascript는 prototype 기반의 언어다 라고 들은 기억이 있긴 하는데... 그땐 필요성은 못 느끼고, 이해하기 힘들어서 그냥 넘어간 것 같네요...) 그래서 최근에 class(객체)기반의 패러다임이 이해가 어느 정도 되니깐, 저절로 prototype 쪽도 이해가 되는 것 같습니다...