🦿 Webpack library build 안녕하세요 TriplexLab입니다. 오늘은 webpack으로 library를 직접 만들 수 있는 환경 세팅에 관해서 이야기를 해보겠습니다. 본격적인 이야기를 들어가기 앞서 먼저 배경 이야기를 해보자면 npm에 있는 수많은 플러그인, 또는 라이브러리가 있는데... 그런 것들을 가져다가 사용할 때는 몰랐습니다... 정말 좋은 시대에서 우리가 개발을 하고 있구나라는 사실을... 어떻게 생각지도 못했던 라이브러기들을 미리 만들어 놓고 무료로 배포까지 해주셨다니... 정말 외국에 개발자들의 마인드를 보고 배우고 싶다...라는 생각이 듭니다. 그래서 저도 대단한 플러그인은 아니지만, 서비스를 만드는 과정에서 자주 쓰는 기능들을 나만의 플러그인(모듈)을 만들고 싶어졌습니다..

난수 생성하기 (랜덤 숫자, Random Number) 안녕하세요 TriplexLab입니다. 오늘은 이미의 숫자를(랜덤숫자 배열)을 받아 배열에 누적 시키는 방법에 관해서 살펴 보도록 하겠습니다. 아래 코드를 보면 myHistory, otherHistory 각 배열에 랜덤의 숫자들이 클릭 할때마다 누적되는 모습을 확인 할수 있습니다. 누적 여기서 중요한 사실을 이야기 한다면 위 코드는 새로운 배열들의 원소값들이 변하는것이지, 참조하는 주소값은 변하지 않고 그대로 입니다. 테스트 코드 👇 실제로 myHistory변수값을 prev변수에 넣고, myHistory.push()다음에 console.log(prev === myHistory)를 비교해보면 결과는 true가 나옵니다. (이것은 원소들이 같다고 true..

Promise Chaining 프로미스 체인 쓰는 이유(Promise 동작원리) 안녕하세요 TriplexLab 입니다. 오늘은 Promise Chaining을 왜 사용하는지 주제로 이야기를 해보도록 하겠습니다. 🎯 then 메소드 뒤에는 계속해서 then 메소드를 연달아 붙일수 있는 사황 아래코드를 자세히 보면 console.log('Start!'); fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .then((result) => { const users = JSON.parse(result); return users[0]; }) .then((user) => { console.log(user); ..

[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라는..

🚉 ngrok 사용법 안녕하세요 TriplexLab입니다. 오늘은 ngrok에 관해서 이야기해보도록 하겠습니다. 먼저 ngrok은 로컬에서 작업 중인 것을 안전한 터널을 통해 외부에 공유하려고 할 때 쓰면 유용한 도구입니다. 요즘 재택근무가 잦아지면서 현재 로컬에서 작업하던 것을 외부에 공유해줘야 하는 상황이 많이 있습니다. 이런 상황일 때 사용하면 정말 좋습니다. 👉 ngrok 설치 해당 사이트에 방문해서 회원가입 및 로그인을 해주세요. 아래 링크에 들어가서 보시면 운영 체제별로 zip으로 압축한 패키지를 제공하므로 다운로드하여서 압축을 해제하고 PATH에 걸린 폴더에 넣은 후에 사용하면 됩니다. ngrok - secure introspectable tunnels to localhost dashboar..

🙌fetch 함수는 Promise 객체를 리턴합니다(Promise 동작원리)​ 안녕하세요 TriplexLab입니다. 오늘은 fetch 함수에 관해서 자세히 알아봅시다. fetch 함수는 promise 객체를 리턴합니다. (fetch함수는 서버에 리퀘스트를 보내고 리스폰스를 받는 하나의 작업을 수행합니다.) console.log('Start!'); fetch('https://jsonplaceholder.typicode.com/users') //(fetch함수는 서버에 리퀘스트를 보내고 리스폰스를 받는 하나의 작업을 수행 합니다.) .then((response) => response.text()) .then((result) => {console.log(result)}); console.log('End'); ..

🔥 git commit id 보기 설정 안녕하세요 TriplexLab 입니다. 오늘은 터미널에서 git log를 볼때 commit id를 보고 치고 싶은 상황을 설정해보겠습니다. (Git은 log나 diff같은 명령의 메시지를 출력할 때 페이지로 나누어 보여줍니다. 기본으로 사용하는 명령은 less입니다.) 👉 commit id 한눈에 보기 제 터미널의 상황👇 다음 명령어를 통해서 git log를 한줄로 보여지고 있습니다. 깔끔하게 commit id를 볼수 있는것은 좋은데 불편한것은 마지막에 (END)라고 나옵니다. git log --prettey=oneline 이럴때는 다음 명령어를 작성하기 위해서는 저장하고 빠져나와야만 한다. 다음 명령어를 작성하면 된다. :wq 나는 한눈에 깔끔하게 commit i..

비동기 실행 함수들#2 안녕하세요 TriplexLab 입니다. 오늘은 자바스크립트에는 비동기 실행되는 함수들이 존재합니다. 그 예시들을 하나씩 살펴보겠습니다. 🎯 1. setTimeout 함수 setTimeout 함수는, 특정 함수의 실행을 원하는 시간만큼 뒤로 미루기 위해 사용하는 함수입니다. console.log('a'); setTimeout(() => { console.log('b'); }, 2000); console.log('c'); 예를 들어 이런 코드가 있을 때, 지금 가운데에 있는 setTimeout 함수는 첫 번째 파라미터에 있는 () ⇒ { console.log('b'); }, 이 콜백의 실행을, 두 번째 파라미터에 적힌 2000 밀리세컨즈(=2초) 뒤로 미룹니다. 그래서 이 코드를 실행..

🌐 fetch 함수와 비동기 실행#1 안녕하세요 TriplexLab 입니다. 비동기실행의 주제로 fetch 함수 관해서 살펴보도록 하겠습니다. console.log('Start!'); fetch('https://www.google.com') .then((response) => response.text()) .then((result) => { console.log(result); }); console.log('End'); 지금 이 코드에는 다음과 같은 2개의 콜백이 있습니다. (1) (response) ⇒ response.text() (2) (result) ⇒ { console.log(result); } fetch 함수가 리퀘스트를 보내고, 서버의 리스폰스를 받게 되면 그때서야 이 콜백들이 순서대로 실행되..

📌 lazy load blur 안녕하세요 TriplexLab입니다. 오늘은 lazy load blur에 관해서 이야기를 해보도록 하겠습니다. 먼저 lazy load은 지연된 로딩을 말합니다.(이미지 로더) 이것을 이용해서 Image Lazy Loading을 만들 수가 있습니다. 🖼 Image Lazy Loading 보통 클라이언트(브라우저)에서는 IntersectionObserver라는 객체를 사용해 Image Lazy Loading을 구현시킬 수 있습니다. 간단하게 설명하면 사용자가 화면에 보이는 이미지만 로딩을 하고, 화면 밖에 있는 이미지는 아직 로딩을 하지 않는 것입니다.(이로 인해 페이지 로딩 속도를 개선할 수가 있습니다.) 👨‍💻 Image Lazy Loading 코딩 설명 간단히 설명을 하자..

🗜 squoosh 이미지 압축 서비스 안녕하세요 TriplexLab입니다. 오늘은 구글에서 만든 'Squoosh'라는 이미지를 최적화 서비스에 관해서 살펴보도록 하겠습니다. 해당 사이트 주소입니다.👇 Squoosh Simple Open your image, inspect the differences, then save instantly. Feeling adventurous? Adjust the settings for even smaller files. squoosh.app 단순한 이미지 압축 사이트가 아닙니다. (단순한 이미지 압축 사이트는 검색하면 많이 나옵니다. 그것들 참고해서 사용하시면 됩니다.) 제가 이 사이트를 소계 하는 이유는 이런 경우에 사용하면 좋을 것 같습니다. 회사 사이트나, 개인 사이..

📌배열 내 객체(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..