JAVASCRIPT
웹의 핵심 언어인 JAVASCRIPT ES6+의 여러 심화 내용을 담고 있습니다.
-
👉이미지 슬리이드 JS(fade) 안녕하세요 TriplexLab 입니다 :) 오늘은 이미지 슬리이드 JS(fade)대해서 살펴보도록 하겠습니다. 이미지 페이드 효과 #banner {position: relative; width: 1200px; margin: 0 auto; text-align: center; overflow: hidden; height: 360px; } #banner img {width: 100%; display: block;} #banner h2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; background: rgba(255,255,255,0.5); border-radiu..
이미지 슬리이드 JS(fade)👉이미지 슬리이드 JS(fade) 안녕하세요 TriplexLab 입니다 :) 오늘은 이미지 슬리이드 JS(fade)대해서 살펴보도록 하겠습니다. 이미지 페이드 효과 #banner {position: relative; width: 1200px; margin: 0 auto; text-align: center; overflow: hidden; height: 360px; } #banner img {width: 100%; display: block;} #banner h2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 10; background: rgba(255,255,255,0.5); border-radiu..
2022.04.29 -
✅JavaScript로 최신순, 베스트순 만들기 안녕하세요 TriplexLab입니다. 오늘은 JavaScript로 최신순, 베스트순을 구현해 보겠습니다. 🔥Mock데이터를 화면에 출력 먼저 Mock 데이터를 fetch, async / await을 사용해서 화면에 출력하는 것부터 만들어 보겠습니다. const $ = (select) => document.querySelector(select); (() => { const getDatas = async () => { const res = await fetch("./mock.json"); const body = await res.json(); return body; } const handleLoad = async () => { await getDatas().t..
JavaScript로 최신순, 베스트순 만들기✅JavaScript로 최신순, 베스트순 만들기 안녕하세요 TriplexLab입니다. 오늘은 JavaScript로 최신순, 베스트순을 구현해 보겠습니다. 🔥Mock데이터를 화면에 출력 먼저 Mock 데이터를 fetch, async / await을 사용해서 화면에 출력하는 것부터 만들어 보겠습니다. const $ = (select) => document.querySelector(select); (() => { const getDatas = async () => { const res = await fetch("./mock.json"); const body = await res.json(); return body; } const handleLoad = async () => { await getDatas().t..
2022.04.28 -
안녕하세요 TriplexLab 입니다. 오늘은 커링에 대해서 이야기를 해보겠습니다. 🔥커링이란? 함수형 프로그래밍 고급패턴 중 하나로 함수를 재사용하는데 유용하게 쓰일 수 있는 고급패턴이다. 자바스크립트 내부에는 커링이 내장되어 있지 않지만 자바스크립트로도 구현이 가능하다. 예를 들어 우리가 배민을 예시로 들자면 어떤 스토어 안에 들어가면 메뉴 리스트가 쭉 나옵니다. 이런 개념으로 아래 코드을 보시면 이해하기 편합니다. const order = (store) => (menu) => { console.log(`${store} - ${menu}`); }; // 사용하는 쪽에서 함수를 두 번 호출이 가능합니다. order('중국집')('자장면') order('중국집')('짬뽕') order('중국집')('탕수..
[JavaScript]커링 장점안녕하세요 TriplexLab 입니다. 오늘은 커링에 대해서 이야기를 해보겠습니다. 🔥커링이란? 함수형 프로그래밍 고급패턴 중 하나로 함수를 재사용하는데 유용하게 쓰일 수 있는 고급패턴이다. 자바스크립트 내부에는 커링이 내장되어 있지 않지만 자바스크립트로도 구현이 가능하다. 예를 들어 우리가 배민을 예시로 들자면 어떤 스토어 안에 들어가면 메뉴 리스트가 쭉 나옵니다. 이런 개념으로 아래 코드을 보시면 이해하기 편합니다. const order = (store) => (menu) => { console.log(`${store} - ${menu}`); }; // 사용하는 쪽에서 함수를 두 번 호출이 가능합니다. order('중국집')('자장면') order('중국집')('짬뽕') order('중국집')('탕수..
2022.04.03 -
🙏재귀함수 뽀개기 javascript 안녕하세요 TriplexLab 입니다. 오늘은 재귀함수[재귀패턴]에 관해서 이야기를 해보도록 하겠습니다. 👉재귀함수 개념 (재귀패턴) 재귀적으로 문제를 풀기 위해서는 문제를 같은 형태의 더 작은 문제로 쪼개야 하기 때문에 패턴을 찾아야 합니다. 재귀함수를 쓸 때는 항상 두 경우가 있어야 합니다. base case: 더 이상 문제를 쪼갤 필요가 없는 종료된 경우 recursive case: 문제를 쪼개서 풀어가는 경우 아주 간단한 예시를 살펴 봅시다.🙏 function f(n) { if (n 0){ // base case console.log(n) return countdown(n - 1) // recursive case } } countdown(4) 실행하면 실제로 ..
재귀함수 뽀개기 javascript🙏재귀함수 뽀개기 javascript 안녕하세요 TriplexLab 입니다. 오늘은 재귀함수[재귀패턴]에 관해서 이야기를 해보도록 하겠습니다. 👉재귀함수 개념 (재귀패턴) 재귀적으로 문제를 풀기 위해서는 문제를 같은 형태의 더 작은 문제로 쪼개야 하기 때문에 패턴을 찾아야 합니다. 재귀함수를 쓸 때는 항상 두 경우가 있어야 합니다. base case: 더 이상 문제를 쪼갤 필요가 없는 종료된 경우 recursive case: 문제를 쪼개서 풀어가는 경우 아주 간단한 예시를 살펴 봅시다.🙏 function f(n) { if (n 0){ // base case console.log(n) return countdown(n - 1) // recursive case } } countdown(4) 실행하면 실제로 ..
2022.01.18 -
🖱자바스크립트 현재의 스크롤바 위치 가져오는 방법 안녕하세요 TriplexLab입니다. 오늘은 자바스크립트 현재의 스크롤바 위치 가져오는 방법에 관해서 살펴보도록 하겠습니다. 👉만들어볼 예제 잠깐 하단의 영상을 봐주세요 👉유튜브 영상[링크참고] 영상을 보시면 아시겠지만 브라우저 스크롤 위치에 맞게 파란 바가 같이 채워지는 모습을 확인할 수 있습니다. 이것은 생각보다 간단해요. 😃 😃 👉 소스코드 정리 (function() { const $ = (ele) => document.querySelector(ele) let maxScrollValue; const resizeHandler = () => { maxScrollValue = document.body.offsetHeight - window.innerHei..
자바스크립트 현재의 스크롤바 위치 가져오는 방법🖱자바스크립트 현재의 스크롤바 위치 가져오는 방법 안녕하세요 TriplexLab입니다. 오늘은 자바스크립트 현재의 스크롤바 위치 가져오는 방법에 관해서 살펴보도록 하겠습니다. 👉만들어볼 예제 잠깐 하단의 영상을 봐주세요 👉유튜브 영상[링크참고] 영상을 보시면 아시겠지만 브라우저 스크롤 위치에 맞게 파란 바가 같이 채워지는 모습을 확인할 수 있습니다. 이것은 생각보다 간단해요. 😃 😃 👉 소스코드 정리 (function() { const $ = (ele) => document.querySelector(ele) let maxScrollValue; const resizeHandler = () => { maxScrollValue = document.body.offsetHeight - window.innerHei..
2021.12.15 -
popup 끝나는 날짜 설정하여 자동으로 내리기 안녕하세요 TriplexLab 입니다. 오늘은 popup을 끝나는 날짜 설정에 관해서 이야기를 해보도록 하겠습니다. 먼저 제가 지난 포스트 중에서 아래와 같은 내용으로 팝업을 컨트롤 하는것에 관해서 이야기를 했었습니다. 아래 링크를 참고 하세요:) jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 ⚙️ jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 안녕하세요 TriplexLab입니다 :) 오늘은 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 에 관해서 살펴 보겠습니다.(자바스크립트 cookie) 레 triplexlab.tistory.com 이번 시간에는 popup을 등록하고, 오늘 하루 그만 보기 설정까지 했다면, 좀더 나아가서 끝나..
popup 끝나는 날짜 설정하여 자동으로 내리기popup 끝나는 날짜 설정하여 자동으로 내리기 안녕하세요 TriplexLab 입니다. 오늘은 popup을 끝나는 날짜 설정에 관해서 이야기를 해보도록 하겠습니다. 먼저 제가 지난 포스트 중에서 아래와 같은 내용으로 팝업을 컨트롤 하는것에 관해서 이야기를 했었습니다. 아래 링크를 참고 하세요:) jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 ⚙️ jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 안녕하세요 TriplexLab입니다 :) 오늘은 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 에 관해서 살펴 보겠습니다.(자바스크립트 cookie) 레 triplexlab.tistory.com 이번 시간에는 popup을 등록하고, 오늘 하루 그만 보기 설정까지 했다면, 좀더 나아가서 끝나..
2021.11.22 -
[JavaScript] 현재시간 timestamp로 Mock Data 만들기 안녕하세요 TriplexLab 입니다. 오늘은 JavaScript로 현재시간의 Mock Data를 만들어 보겠습니다. 결과 ) 👇 0: {id: 1, userID: 'triplexlab', timestamp: '2021. 11. 10. 오후 07:26'} 1: {id: 2, userID: 'younhoso', timestamp: '2021. 11. 10. 오후 07:27'} 2: {id: 3, userID: 'triplexlab', timestamp: '2021. 11. 10. 오후 07:28'} 3: {id: 4, userID: 'younhoso', timestamp: '2021. 11. 10. 오후 07:29'} 4: {id..
[JavaScript] 현재시간 timestamp로 Mock Data 만들기[JavaScript] 현재시간 timestamp로 Mock Data 만들기 안녕하세요 TriplexLab 입니다. 오늘은 JavaScript로 현재시간의 Mock Data를 만들어 보겠습니다. 결과 ) 👇 0: {id: 1, userID: 'triplexlab', timestamp: '2021. 11. 10. 오후 07:26'} 1: {id: 2, userID: 'younhoso', timestamp: '2021. 11. 10. 오후 07:27'} 2: {id: 3, userID: 'triplexlab', timestamp: '2021. 11. 10. 오후 07:28'} 3: {id: 4, userID: 'younhoso', timestamp: '2021. 11. 10. 오후 07:29'} 4: {id..
2021.11.15 -
난수 생성하기 (랜덤 숫자, Random Number) 안녕하세요 TriplexLab입니다. 오늘은 이미의 숫자를(랜덤숫자 배열)을 받아 배열에 누적 시키는 방법에 관해서 살펴 보도록 하겠습니다. 아래 코드를 보면 myHistory, otherHistory 각 배열에 랜덤의 숫자들이 클릭 할때마다 누적되는 모습을 확인 할수 있습니다. 누적 여기서 중요한 사실을 이야기 한다면 위 코드는 새로운 배열들의 원소값들이 변하는것이지, 참조하는 주소값은 변하지 않고 그대로 입니다. 테스트 코드 👇 실제로 myHistory변수값을 prev변수에 넣고, myHistory.push()다음에 console.log(prev === myHistory)를 비교해보면 결과는 true가 나옵니다. (이것은 원소들이 같다고 true..
난수 생성하기 (랜덤 숫자, Random Number)난수 생성하기 (랜덤 숫자, Random Number) 안녕하세요 TriplexLab입니다. 오늘은 이미의 숫자를(랜덤숫자 배열)을 받아 배열에 누적 시키는 방법에 관해서 살펴 보도록 하겠습니다. 아래 코드를 보면 myHistory, otherHistory 각 배열에 랜덤의 숫자들이 클릭 할때마다 누적되는 모습을 확인 할수 있습니다. 누적 여기서 중요한 사실을 이야기 한다면 위 코드는 새로운 배열들의 원소값들이 변하는것이지, 참조하는 주소값은 변하지 않고 그대로 입니다. 테스트 코드 👇 실제로 myHistory변수값을 prev변수에 넣고, myHistory.push()다음에 console.log(prev === myHistory)를 비교해보면 결과는 true가 나옵니다. (이것은 원소들이 같다고 true..
2021.11.10 -
[React] Props 2차 배열 활용하기 안녕하세요 오늘은 2차 배열을 활용하기 관점에서 이야기를 해보도록 하겠습니다. 아래 예시는 React에서 Props 처리하는 예시입니다. App.js 파일에서 Dice라는 컴포넌트에서 Props속성들을 주고 있고, Dice.js 파일에서 그 Props속성들을 받아오고 있습니다. //App.js import Dice from "./Dice"; function App() { return ( ) } export default App; 👉 2차 배열 활용하기 근데 Dice.js파일에서 각각 이미지들을 import 해와서 객체와 배열을 활용해서 'DICE_IMAGES'라는 변수에 정리를 했습니다. 자 이렇게 정리를 해두면 Props를 활용해서 함수 내부에서도 src라는..
[React] Props 2차 배열 활용하기[React] Props 2차 배열 활용하기 안녕하세요 오늘은 2차 배열을 활용하기 관점에서 이야기를 해보도록 하겠습니다. 아래 예시는 React에서 Props 처리하는 예시입니다. App.js 파일에서 Dice라는 컴포넌트에서 Props속성들을 주고 있고, Dice.js 파일에서 그 Props속성들을 받아오고 있습니다. //App.js import Dice from "./Dice"; function App() { return ( ) } export default App; 👉 2차 배열 활용하기 근데 Dice.js파일에서 각각 이미지들을 import 해와서 객체와 배열을 활용해서 'DICE_IMAGES'라는 변수에 정리를 했습니다. 자 이렇게 정리를 해두면 Props를 활용해서 함수 내부에서도 src라는..
2021.11.07 -
📌 lazy load blur 안녕하세요 TriplexLab입니다. 오늘은 lazy load blur에 관해서 이야기를 해보도록 하겠습니다. 먼저 lazy load은 지연된 로딩을 말합니다.(이미지 로더) 이것을 이용해서 Image Lazy Loading을 만들 수가 있습니다. 🖼 Image Lazy Loading 보통 클라이언트(브라우저)에서는 IntersectionObserver라는 객체를 사용해 Image Lazy Loading을 구현시킬 수 있습니다. 간단하게 설명하면 사용자가 화면에 보이는 이미지만 로딩을 하고, 화면 밖에 있는 이미지는 아직 로딩을 하지 않는 것입니다.(이로 인해 페이지 로딩 속도를 개선할 수가 있습니다.) 👨💻 Image Lazy Loading 코딩 설명 간단히 설명을 하자..
Image lazy load (Image blur)📌 lazy load blur 안녕하세요 TriplexLab입니다. 오늘은 lazy load blur에 관해서 이야기를 해보도록 하겠습니다. 먼저 lazy load은 지연된 로딩을 말합니다.(이미지 로더) 이것을 이용해서 Image Lazy Loading을 만들 수가 있습니다. 🖼 Image Lazy Loading 보통 클라이언트(브라우저)에서는 IntersectionObserver라는 객체를 사용해 Image Lazy Loading을 구현시킬 수 있습니다. 간단하게 설명하면 사용자가 화면에 보이는 이미지만 로딩을 하고, 화면 밖에 있는 이미지는 아직 로딩을 하지 않는 것입니다.(이로 인해 페이지 로딩 속도를 개선할 수가 있습니다.) 👨💻 Image Lazy Loading 코딩 설명 간단히 설명을 하자..
2021.10.21 -
📌배열 내 객체(Object) 중복 id 값 제거 3가지 방법 안녕하세요 TriplexLab입니다. 👋👋 오늘은 배열 내 객체 프로퍼티 값 중에 중복으로 들어간 것을 제거하는 작업은 필수입니다. 여러 가지 방법으로 해결해보겠습니다. // id가 중복되는 것을 제거하시오 let example = [ { id: 123, Text:'AAA' }, { id: 456, Text:'BBB' }, { id: 123, Text:'CCC' } ]; //item을 localStorage에 저장합니다. function save(name, val) { typeof(Storage) !== 'undefined' && localStorage.setItem(name, JSON.stringify(val)); }; //item을 loc..
배열 내 객체(Object) 중복 id 값 제거📌배열 내 객체(Object) 중복 id 값 제거 3가지 방법 안녕하세요 TriplexLab입니다. 👋👋 오늘은 배열 내 객체 프로퍼티 값 중에 중복으로 들어간 것을 제거하는 작업은 필수입니다. 여러 가지 방법으로 해결해보겠습니다. // id가 중복되는 것을 제거하시오 let example = [ { id: 123, Text:'AAA' }, { id: 456, Text:'BBB' }, { id: 123, Text:'CCC' } ]; //item을 localStorage에 저장합니다. function save(name, val) { typeof(Storage) !== 'undefined' && localStorage.setItem(name, JSON.stringify(val)); }; //item을 loc..
2021.10.10 -
안녕하세요 TriplexLab입니다. 오늘은 로컬 스토리지(localStorage)를 이용해서 검색어 기능을 만들어보겠습니다. 로컬 스토리지(localStorage) 로컬 스토리지에 관한 자세한 설명은 제가 작성한 글을 참고해주세요. 👇👇 [JavaScript]로컬스토리지, 세션스토리지, 쿠키 정리 🙋♂️ 로컬 스토리지, 세션 스토리지, 쿠키 차이점 안녕하세요 TriplexLab 입니다. 오늘은 로컬 스토리지, 세션 스토리지, 쿠키 차이점에 관해서 하나씩 살펴보도록 하겠습니다. 🍪 Cookie 📌 쿠 triplexlab.tistory.com 이것은 CRUD 중에서 C와 D에 해당되는 내용입니다. 음 개인적으로 간단한 이런 검색 기능 같은 경우에는 로컬 스토리지를 이용해서 만들어도 괜찮을 것 같네요. 프..
로컬스토리지 검색어 기능 만들기안녕하세요 TriplexLab입니다. 오늘은 로컬 스토리지(localStorage)를 이용해서 검색어 기능을 만들어보겠습니다. 로컬 스토리지(localStorage) 로컬 스토리지에 관한 자세한 설명은 제가 작성한 글을 참고해주세요. 👇👇 [JavaScript]로컬스토리지, 세션스토리지, 쿠키 정리 🙋♂️ 로컬 스토리지, 세션 스토리지, 쿠키 차이점 안녕하세요 TriplexLab 입니다. 오늘은 로컬 스토리지, 세션 스토리지, 쿠키 차이점에 관해서 하나씩 살펴보도록 하겠습니다. 🍪 Cookie 📌 쿠 triplexlab.tistory.com 이것은 CRUD 중에서 C와 D에 해당되는 내용입니다. 음 개인적으로 간단한 이런 검색 기능 같은 경우에는 로컬 스토리지를 이용해서 만들어도 괜찮을 것 같네요. 프..
2021.10.09