- 방문자수
- BEST STORY
ALL
TODAY
YESTERDAY
전체 방문자
오늘 방문자
어제 방문자
Latest Story
-
letters effect (텍스트 열리는 효과)
letters effect (텍스트 열리는 효과) 스크롤컨트롤에따라 텍스트가 열리고 닫히는 효과입니다. 👉🏻라이선스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻다운로드 letters effect ... codepen.io
-
image hover effect (이미지 호버 효과)
image hover effect (이미지 호버 효과) 이미지 호버시 이미지 사이즈가 커지는 효과입니다. 슬라이드에 적용할 수 있습니다. 👉🏻라이선스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻다운로드 image hover effect — week 10/52 image hover effect — week 10/52... codepen.io
-
Layout with Reveal Animations
Layout with Reveal Animations 버튼 클릭 메뉴 및 반응형 웹 입니다. 오른쪽 상단에 메뉴 버튼 클릭시 추가 슬라이드 효과 있습니다. 지원 브라우저는 Microsoft Edge 이상부터 가능합니다. 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Content Preview and Menu Animation | Codrops Projectiles Incredible as this seems to our ordinary ideas, it is undoubtedly an understatement rather than an exaggeration of the true proportion as observed in the case of ko..
-
anime.js (애니메이션 플러그인)
anime.js (애니메이션 플러그인) anime.js는 단순하면서도 강력한 API를 갖춘 경량 JavaScript 애니메이션 라이브러리입니다. CSS 속성, SVG, DOM 속성 및 JavaScript 객체와 함께 작동합니다. 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 anime.js - a Collection by Julian Garnier on CodePen Demos and examples for anime.js - https://animejs.com codepen.io 👉🏻다운로드 anime.js Javascript animation engine animejs.com
-
Horizontal Smooth Scroll Layouts
Horizontal Smooth Scroll Layouts 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Horizontal Smooth Scroll Layout | Demo 1 | Codrops Illywhacker 07 #water #bottle #hand explore tympanus.net 👉🏻다운로드 Horizontal Smooth Scroll Layouts | Codrops If you use Locomotive Scroll, you might have heard about the new update that includes support for horizontal layouts. I' tympanus.net
-
CSS Animated Hamburger Icon ( 햄버거 아이콘 애니메이션)
CSS Animated Hamburger Icon 모바일 메뉴 버튼 호버 및 클릭시 변형되는 애니메이션 효과 입니다. 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 CSS animated hamburger icon ... codepen.io 👉🏻다운로드 CSS animated hamburger icon ... codepen.io
-
Slice Revealer
Slice Revealer Tympanus 에서 가져온 무료 리소스 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Slice Revealer | Demo 1 | Codrops 300+ pre-built websites with a 1 click installation Be Theme has more than 300 pre-built websites. You can select a pre-built website that will work for you in minutes, and install it with a single click in less than a second. Check out the theme → tympanus.net 👉🏻다운로드 Sl..
-
Rapid Image Layers Animation
Rapid Image Layers Animation Tympanus 에서 가져온 무료 리소스 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Rapid Image Layers Animation | Codrops Rapid image layers animation Click the middle menu item to see the effect. tympanus.net 👉🏻다운로드 Rapid Image Layers Animation | Codrops A while back, I came across this tweet by Twitter Marketing, which shows a video with a really nice intro animation. So..
-
Brook: Free minimal HTML template for blogs
Brook: Free minimal HTML template for blogs Freebiesbug 에서 가져온 무료 리소스 👉🏻라이센스 FREE(프리): 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Brook HTML Template - Frontpage one brooks-html-template.netlify.app 👉🏻다운로드 TemplateDeck - Free and commercial Bootstrap 5 templates Welcome to TemplateDeck! My tiny little corner of the internet where you can get handcrafted, premium & free Bootstrap 5 HTML templates! templatedeck.com
-
Crafting a Scrollable and Draggable Parallax Slider
Crafting a Scrollable and Draggable Parallax Slider Tympanus 에서 가져온 무료 리소스 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Parallax Slider with Hover Reveal Animation | Codrops Indigo tympanus.net 👉🏻다운로드 Crafting a Scrollable and Draggable Parallax Slider | Codrops In this article, I’ll show you how to build a parallax slider with a fun reveal animation. I’ll be using GSAP, CSS Grid tympan..
-
Next JS에서 Node.js API 사용
안녕하세요 TripexLab 입니다. 오늘은 Next JS에서 Node의 API를 사용하는 방법에 대해서 살펴보겠습니다. NextJS는 React 기반(문법)의 프레임워크로 유명합니다. React기반의 함수형 컴포넌트를 사용해서 웹앱서비스를 만들수 있죠. 그리고 NextJS는 app 폴더 하위에 있는 모든 컴포넌트들은 기본적으로 서버컴포넌트 이므로(서버에서 동작함) 서버에 있는 파일을 읽고, 쓰고를 할수 있고 서버에 있는 경로도 접근이 가능합니다. 👉🏻NextJS 컴포넌트는 기본적으로 서버 사이드 렌더링(SSR) 합니다. 예를들어서 다음과 같이 비즈니스 로직을 보면 "path"와 "fs/promises"에 접근해서 가져올수가 있습니다. // src/service/posts.ts import { readF..
-
함수 합성(Function Composition)
1. 함수 합성(Function Composition)이란? 함수 합성은 함수들을 조합하여 새로운 함수를 만드는 것입니다. 함수 합성(Function Composition)을 사용해서 함수를 만들어 보겠습니다. 1) compose()의 특징은 함수 호출들을 오른쪽에서 왼쪽 방향으로 볼수 있습니다. const compose = function(functions){ if(!functions.length){ return function(x){ return x; } } return function(x){ let val = x; for(let i = functions.length - 1; i >= 0; i--){ val = functions[i](val) } return val; } } const fn = com..
-
Macrotask 와 Microtask의 두 Queue 제어 비교
function getData(){ fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(({title}) => console.log(`음답: ${title}`)) } function handleHeavyTask(bFetch){ if(bFetch) getData(); //fetch 비동기 요청 else console.log('지연없이실행') //코드의 실행 순서 보장 못함. } (function(){ console.log('안녕하세요'); handleHeavyTask(false); console.log('무거운 작업이 시작됐어요.'); })(); 결과) 👇🏻 이것은 동기와, 비동기 코드가 ..
-
URLSearchParams 유틸리티 메서드에 관해서
안녕하세요 TriplexLab 입니다. 오늘은 URLSearchParams 유틸리티 메서드에 관해서 이야기를 해보도록 하겠습니다. URLSearchParams은 URL의 쿼리 문자열 받아서 처리하는 고마운 메소드 입니다. 바로 사용예시 확인해 봅시다. 😃😃 예시코드)👇🏻 // api/request.js const apiFetchHandler = async (url) => { try { const response = await fetch(url); if (!response.ok) { throw new Error('데이터를 불러오는데 실패했습니다.'); } const body = await response.json(); console.log(body); return body; } catch (e) { con..
-
Icon Font 정리
🤟 Icon Font 정리 안녕하세요 TriplexLab입니다. 오늘은 벡터 이미지를 Icon Font로 만들어보는 것을 정리해 보겠습니다. figma, Illustrator, sketch 등등의 벡터 이미지를 추출할 수 있는 디자인 툴을 사용하다 보면 벡터로 이미지를 SVG 파일로 뽑긴 뽑았는데... 코드를 그대로 html 파일에 넣으면 너무 길어져서 코드 깊이가 길어지면 길어질수록 감당할 수가 없어지는 경험을 해본 적 있으신가요?? 그래서 Icon Font로 만들어서 class로 불러와 사용해보겠습니다. 먼저 다음 사이트를 방문하시면 IcoMoon App - Icon Font, SVG, PDF & PNG Generator icomoon.io 다음과 같은 화면이 나옵니다. 뭐 사용하고 싶은 아이콘 있으..
-
03. 단축 평가 논리 계산법(논리 연산자)
👉 단축 평가 (short-circuit evaluation) 논리 계산법 이번에는 논리 연산자를 조금 더 유용하게 사용하는 방법에 대해서 배워보겠습니다. 우리가 이전에 연산자를 배울때, 다음과 사항을 잘 숙지하셨을겁니다. true && true // true true && false // false true || false // true false || true // true 논리 연산자를 사용 할 때에는 무조건 우리가 true 혹은 false 값을 사용해야 되는 것은 아닙니다. 문자열이나 숫자, 객체를 사용 할 수도 있고, 해당 값이 Truthy 하냐 Falsy 하냐에 따라 결과가 달라집니다. const dog = { name: '멍멍이' }; var getName = function(animal) ..
-
네트워크 통신 및 캐싱 구현
✨네트워크 통신 및 캐싱 구현 안녕하세요 TriplexLab 입니다. 오늘은 최근에 과제를 진행하면서 경험했던 거를 말씀드리고자 합니다. 👉🏻네트워크 통신 먼저 네트워크 통신은 하단에 영상 처럼 입력란에 특정 텍스트를 입력하는 시점에 네트워크(서버랑)통신하는것를 말합니다. 👉🏻문제인식 근데 여기서 문제가 있습니다. 매번 텍스트를 입력할때 마다 네트워크 통신을 하면 서버에 불필요한 요청을 여러번 하게 되는것이고, 서버입장에서는 부담되는 일을 하는것입니다. 👉🏻문제해결 캐싱처리를 해서 브라우저 메모리에 입시로 저장해놓고 같은 텍스트가 있다면 네트워크 통신을 하지 않는것이 목표였습니다. 처음에는 이것을 저는 localStorage에 저장할때 생각을 했지만 여기서는 new Map()을 사용했습니다. 하단 영상을..
-
JavaScript slider-loop
좌,우 버튼으로 Y축으로 슬라이드되면서 무한 반복(롤링)되는 방식입니다. html에서 아이템 모두 개수마다 노출되는것이 아니라, 비례해서 상대적으로 노출됩니다. See the Pen slider-loop by 소윤호 (@younhoso) on CodePen.
-
무한 롤링 기능 구현
🎯무한 롤링 기능 안녕하세요 TriplexLab입니다. 오늘은 무한롤링 기능에 대해서 이야기를 해보겠습니다. 저 같은 경우에는 Swiper(v8.4.7)을 커스텀해서 기능을 완성할 수 있었습니다. 그리고 반응형으로 제작을 해야해서 마크업 상에서 PC, 모바일 둘 다 만들어 놓고 css 미디어쿼리를 사용해서 해상도가 PC일 때 PC버전 보여주고, 해상도가 모바일일 때 모바일 버전을 보여주는 방식을 택했습니다. 그렇다 보니 JS에서 Swiper인스턴스를 다음과 같이 두 번 호출했습니다. /** HISTORY 모바일 영역 */ new Swiper(".history-swiper.mo", { //... } /** HISTORY PC 영역 */ const historySwiperPc = new Swiper(".hi..
-
Next.js(렌더링 차이점)
최근에 Next.js 학습을 시작했습니다. 오늘은 학습하면서 정리했던 내용을 공유해보려고 합니다. 렌더링의 종류는 크게 4가지가 있습니다. CSR, SSG, ISR, SSR 4가지의 특징과 장단점을 이야기 해보겠습니다. 👉🏻CSR 특징 클라이언트(브라우저) 측에서 렌더링합니다. 1. 사용자가 Website 요청을 보냄 2. 브라우저는 HTML을 다운로드 합니다. 3. 이어서 브라우저가 JS파일과, React.JS파일를 다운로드합니다. 1. React.JS 소스코드 로드해서 메모리에 탑재하면서 리액트가 실행이되고, 2. HTML페이지에 있는 div root요소에 JS파일에 있는 root 컴포넌트를 연결시켜줘서 JS 소스코드를 하나씩 해석한 다음에 컴포넌트를 DOM요소로 변환을 하고, DOM트리 변환된것을 ..
Free・Resources
-
letters effect (텍스트 열리는 효과)
letters effect (텍스트 열리는 효과) 스크롤컨트롤에따라 텍스트가 열리고 닫히는 효과입니다. 👉🏻라이선스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻다운로드 letters effect ... codepen.io
-
image hover effect (이미지 호버 효과)
image hover effect (이미지 호버 효과) 이미지 호버시 이미지 사이즈가 커지는 효과입니다. 슬라이드에 적용할 수 있습니다. 👉🏻라이선스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻다운로드 image hover effect — week 10/52 image hover effect — week 10/52... codepen.io
-
Layout with Reveal Animations
Layout with Reveal Animations 버튼 클릭 메뉴 및 반응형 웹 입니다. 오른쪽 상단에 메뉴 버튼 클릭시 추가 슬라이드 효과 있습니다. 지원 브라우저는 Microsoft Edge 이상부터 가능합니다. 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Content Preview and Menu Animation | Codrops Projectiles Incredible as this seems to our ordinary ideas, it is undoubtedly an understatement rather than an exaggeration of the true proportion as observed in the case of ko..
-
anime.js (애니메이션 플러그인)
anime.js (애니메이션 플러그인) anime.js는 단순하면서도 강력한 API를 갖춘 경량 JavaScript 애니메이션 라이브러리입니다. CSS 속성, SVG, DOM 속성 및 JavaScript 객체와 함께 작동합니다. 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 anime.js - a Collection by Julian Garnier on CodePen Demos and examples for anime.js - https://animejs.com codepen.io 👉🏻다운로드 anime.js Javascript animation engine animejs.com
-
Horizontal Smooth Scroll Layouts
Horizontal Smooth Scroll Layouts 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Horizontal Smooth Scroll Layout | Demo 1 | Codrops Illywhacker 07 #water #bottle #hand explore tympanus.net 👉🏻다운로드 Horizontal Smooth Scroll Layouts | Codrops If you use Locomotive Scroll, you might have heard about the new update that includes support for horizontal layouts. I' tympanus.net
-
CSS Animated Hamburger Icon ( 햄버거 아이콘 애니메이션)
CSS Animated Hamburger Icon 모바일 메뉴 버튼 호버 및 클릭시 변형되는 애니메이션 효과 입니다. 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 CSS animated hamburger icon ... codepen.io 👉🏻다운로드 CSS animated hamburger icon ... codepen.io
-
Slice Revealer
Slice Revealer Tympanus 에서 가져온 무료 리소스 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Slice Revealer | Demo 1 | Codrops 300+ pre-built websites with a 1 click installation Be Theme has more than 300 pre-built websites. You can select a pre-built website that will work for you in minutes, and install it with a single click in less than a second. Check out the theme → tympanus.net 👉🏻다운로드 Sl..
-
Rapid Image Layers Animation
Rapid Image Layers Animation Tympanus 에서 가져온 무료 리소스 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Rapid Image Layers Animation | Codrops Rapid image layers animation Click the middle menu item to see the effect. tympanus.net 👉🏻다운로드 Rapid Image Layers Animation | Codrops A while back, I came across this tweet by Twitter Marketing, which shows a video with a really nice intro animation. So..
-
Brook: Free minimal HTML template for blogs
Brook: Free minimal HTML template for blogs Freebiesbug 에서 가져온 무료 리소스 👉🏻라이센스 FREE(프리): 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Brook HTML Template - Frontpage one brooks-html-template.netlify.app 👉🏻다운로드 TemplateDeck - Free and commercial Bootstrap 5 templates Welcome to TemplateDeck! My tiny little corner of the internet where you can get handcrafted, premium & free Bootstrap 5 HTML templates! templatedeck.com
-
Crafting a Scrollable and Draggable Parallax Slider
Crafting a Scrollable and Draggable Parallax Slider Tympanus 에서 가져온 무료 리소스 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Parallax Slider with Hover Reveal Animation | Codrops Indigo tympanus.net 👉🏻다운로드 Crafting a Scrollable and Draggable Parallax Slider | Codrops In this article, I’ll show you how to build a parallax slider with a fun reveal animation. I’ll be using GSAP, CSS Grid tympan..
웹 코딩 입문 이야기
-
HTML+SCSS(CSS3)
Icon Font 정리
-
HTML+SCSS(CSS3)
text 줄간격 표현하기
-
HTML+SCSS(CSS3)
모바일 웹 앱에서 100vh이 가진 세로 사이즈 문제
-
HTML+SCSS(CSS3)
반응형 이미지 비율 유지하기
-
HTML+SCSS(CSS3)
서서히 변하는 애니메이션 keyframes
-
HTML+SCSS(CSS3)
styled components
-
HTML+SCSS(CSS3)
Live Sass 컴파일하기
-
HTML+SCSS(CSS3)
Include HTML file
-
HTML+SCSS(CSS3)
wave keyframes로 만들기
-
HTML+SCSS(CSS3)
데이터 속성 사용하기
-
HTML+SCSS(CSS3)
css 꿀팁 웹서비스 5가지
-
HTML+SCSS(CSS3)
CSS 선택자 :nth-child
-
HTML+SCSS(CSS3)
미디어 쿼리 (Media Query) 와 Viewport
-
HTML+SCSS(CSS3)
유튜브(Youtube) 영상 비율에 마쳐 반응형으로 만들기
-
HTML+SCSS(CSS3)
이미지 슬라이드 (Carousel)
-
HTML+SCSS(CSS3)
퍼포먼스 사이드 메뉴 html+scss
-
HTML+SCSS(CSS3)
CSS 아이콘 라이브러리 fontello 사용하기
-
HTML+SCSS(CSS3)
반응형일 작업할때 유지할수 있는 수직 정렬
-
HTML+SCSS(CSS3)
inline-block과 float 중 어떤 것을 써야 할까?
-
HTML+SCSS(CSS3)
📦 css3 Boxsizing 정리
ECMAScript 2015+
-
03. 단축 평가 논리 계산법(논리 연산자)
👉 단축 평가 (short-circuit evaluation) 논리 계산법 이번에는 논리 연산자를 조금 더 유용하게 사용하는 방법에 대해서 배워보겠습니다. 우리가 이전에 연산자를 배울때, 다음과 사항을 잘 숙지하셨을겁니다. true && true // true true && false // false true || false // true false || true // true 논리 연산자를 사용 할 때에는 무조건 우리가 true 혹은 false 값을 사용해야 되는 것은 아닙니다. 문자열이나 숫자, 객체를 사용 할 수도 있고, 해당 값이 Truthy 하냐 Falsy 하냐에 따라 결과가 달라집니다. const dog = { name: '멍멍이' }; var getName = function(animal) ..
-
02.JavaScript 유용한 모음집
👉 Truthy and Falsy 이것은 자바스크립트 문법까지는 아니지만, 알아둬야 하는 개념입니다. Truthy: true 같은거... Falsy: false 같은거... 라고 이해를 하면 되는데요, 예를 들어서 다음과 같은 함수가 있다고 가정해봅시다. function print(person) { console.log(person.name); } const person = { name: 'John' }; print(person); 만약에 이러한 상황에서, 만약 print 함수가 다음과 같이 파라미터가 비어진 채로 실행됐다고 가정해봅시다. function print(person) { console.log(person.name); } const person = { name: 'John' }; print()..
-
01.JavaScript 유용한 모음집
안녕하세요 TriplexLab 입니다. 이번 시간부터 JavaScript에서 유용한 Tip정보를 예시와 함께 알려드리고자 합니다. 오늘은 삼항연산자에 대해서 먼저 이야기를 해보겠습니다. 👉🏻삼항연산자 첫번째로 배울 문법은, 삼항 연산자입니다. 이 문법은 ES6 문법은 아닙니다. 조건 ? true일때 : false일때 라인의 길이가 너무 길어진다면 다음과 같이 작성하기도 합니다. const array = []; let text = array.length === 0 ? '배열이 비어있습니다' : '배열이 비어있지 않습니다.'; console.log(text); 예시)👇🏻👇🏻 삭제 라인의 길이가 너무 길어진다면 다음과 같이 작성하기도 합니다. 버튼 클릭 엘리먼트에 토글 클래스를 핸들링한다. const $btn..
-
비디오 갤러리 활성화(Video Gallery)
🎦 Video Gallery Easy Tutorials 안녕하세요 TriplexLab 입니다. 이번 시간에는 Video Gallery의 간단한 쉬운 예제를 가져왔습니다. 섬네일을 클릭하면 해당 영상이 활성화되어서 나오는것 입니다. How To Make A Video Gallery Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta maiores, accusamus eum voluptatem ipsam tempora Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta maiores, accusamus eum voluptatem ipsam tempora Lorem ipsum dolor..
-
스크롤 메뉴(Scroll Menu) 구현해보기 JavaScript ES6
👉🏻스크롤 메뉴(Scroll Menu) 구현해보기 안녕하세요 TriplexLab 입니다. 이번에는 흔하게 많이들 작업하시는 스크롤 메뉴에관해서 살펴보도록 하겠습니다. 👉🏻참고링크 먼저 내 글중에서 마우스 이벤트 위치 관한글이 있는데 이것 보시고 이이서 글 보시면 이해하는데 도움이 될것 같습니다. MouseEvent 위치프로퍼티 정리 🖱 Event 위치프로퍼티 정리 안녕하세요 TriplexLab 입니다. 마우스 이벤트(MouseEvent) 객체에는 마우스 포인터의 위치와 관련된 다양한 프로퍼티들이 있는데요. 주로 아래와 같은 프로퍼티들이 자주 triplexblog.kr // scrollMenu.js class ScrollMenu { constructor(el) { this.el = el; this.$$ =..
-
Drag & Drop Vanilla Javascript(JS 드래그 앤 드롭)
Drag & Drop Vanilla Javascript(JS 드래그 앤 드롭) 안녕하세요 TriplexLab 입니다. 🧑🎄🧑🎄 오늘은 다음과 같이 Vanilla Javascript로 Drag & Drop기능에 관해서 살펴보도록 하겠습니다. Drag & Drop Vanilla Javascript 👉HTML HTML CSS JavaScript React Vue Next JS 👉CSS body, div { margin: 0; } .container { background-color: #f3f5f7; padding: 2rem; border-collapse: collapse; } .container:nth-child(n+2){ margin-top: 1rem; } .draggable { height: 82px;..
-
MouseEvent 위치프로퍼티 정리
🖱 Event 위치프로퍼티 정리 안녕하세요 TriplexLab 입니다. 마우스 이벤트(MouseEvent) 객체에는 마우스 포인터의 위치와 관련된 다양한 프로퍼티들이 있는데요. 주로 아래와 같은 프로퍼티들이 자주 사용됩니다. 프로퍼티 설명 clientX, clientY 마우스 포인터의 브라우저 표시 영역에서의 위치 pageX, pageY 마우스 커서의 문서 영역에서의 위치 offsetX, offsetY 마우스 포인터의 이벤트 발생한 요소에서의 위치 screenX, screenY 마우스 포인터의 모니터 화면 영역에서의 위치 1️⃣ clientX, clientY client 프로퍼티는 말 그대로 클라이언트 영역 내에서 마우스의 좌표 정보를 담고있는데요. 클라이언트 영역이란 이벤트가 발생한 순간에 브라우저가 ..
-
[JavaScript] 배열을 유용하게 활용하는 10가지 방법
👨💻 [JavaScript] 배열을 유용하게 활용하는 10가지 방법 안녕하세요 TriplexLab 입니다. 이번 시간에는 객체 배열에서(key-value)에서 유용하게 활용하는 10가지 방법에 관해서 정리해보겠습니다. 이번 포스트는 다음 링크를 참고 했습니다. [Javascript] 15가지 유용한 map, reduce, filter 아래 글을 번역 및 요약한 글. dongmin-jang.medium.com 다음과 같은 데이터가 있다고 가정해봅시다. const datas = [ { id: 1, type: "ko", name: '비빔밥', price : '8,000' }, { id: 2, type: "ko", name: "삼계탕", price : "12,000" }, { id: 3, typ..
-
이미지 슬리이드 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..
-
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..
-
[JavaScript]커링 장점
안녕하세요 TriplexLab 입니다. 오늘은 커링에 대해서 이야기를 해보겠습니다. 🔥커링이란? 함수형 프로그래밍 고급패턴 중 하나로 함수를 재사용하는데 유용하게 쓰일 수 있는 고급패턴이다. 자바스크립트 내부에는 커링이 내장되어 있지 않지만 자바스크립트로도 구현이 가능하다. 예를 들어 우리가 배민을 예시로 들자면 어떤 스토어 안에 들어가면 메뉴 리스트가 쭉 나옵니다. 이런 개념으로 아래 코드을 보시면 이해하기 편합니다. const order = (store) => (menu) => { console.log(`${store} - ${menu}`); }; // 사용하는 쪽에서 함수를 두 번 호출이 가능합니다. order('중국집')('자장면') order('중국집')('짬뽕') order('중국집')('탕수..
-
재귀함수 뽀개기 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) 실행하면 실제로 ..
-
자바스크립트 현재의 스크롤바 위치 가져오는 방법
🖱자바스크립트 현재의 스크롤바 위치 가져오는 방법 안녕하세요 TriplexLab입니다. 오늘은 자바스크립트 현재의 스크롤바 위치 가져오는 방법에 관해서 살펴보도록 하겠습니다. 👉만들어볼 예제 잠깐 하단의 영상을 봐주세요 👉유튜브 영상[링크참고] 영상을 보시면 아시겠지만 브라우저 스크롤 위치에 맞게 파란 바가 같이 채워지는 모습을 확인할 수 있습니다. 이것은 생각보다 간단해요. 😃 😃 👉 소스코드 정리 (function() { const $ = (ele) => document.querySelector(ele) let maxScrollValue; const resizeHandler = () => { maxScrollValue = document.body.offsetHeight - window.innerHei..
-
popup 끝나는 날짜 설정하여 자동으로 내리기
popup 끝나는 날짜 설정하여 자동으로 내리기 안녕하세요 TriplexLab 입니다. 오늘은 popup을 끝나는 날짜 설정에 관해서 이야기를 해보도록 하겠습니다. 먼저 제가 지난 포스트 중에서 아래와 같은 내용으로 팝업을 컨트롤 하는것에 관해서 이야기를 했었습니다. 아래 링크를 참고 하세요:) jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 ⚙️ jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 안녕하세요 TriplexLab입니다 :) 오늘은 jquery 레이어 팝업 오늘 하루 그만 보기 쿠키설정 에 관해서 살펴 보겠습니다.(자바스크립트 cookie) 레 triplexlab.tistory.com 이번 시간에는 popup을 등록하고, 오늘 하루 그만 보기 설정까지 했다면, 좀더 나아가서 끝나..
-
[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..
-
난수 생성하기 (랜덤 숫자, Random Number)
난수 생성하기 (랜덤 숫자, Random Number) 안녕하세요 TriplexLab입니다. 오늘은 이미의 숫자를(랜덤숫자 배열)을 받아 배열에 누적 시키는 방법에 관해서 살펴 보도록 하겠습니다. 아래 코드를 보면 myHistory, otherHistory 각 배열에 랜덤의 숫자들이 클릭 할때마다 누적되는 모습을 확인 할수 있습니다. 누적 여기서 중요한 사실을 이야기 한다면 위 코드는 새로운 배열들의 원소값들이 변하는것이지, 참조하는 주소값은 변하지 않고 그대로 입니다. 테스트 코드 👇 실제로 myHistory변수값을 prev변수에 넣고, myHistory.push()다음에 console.log(prev === myHistory)를 비교해보면 결과는 true가 나옵니다. (이것은 원소들이 같다고 true..
-
[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라는..
-
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 코딩 설명 간단히 설명을 하자..
-
배열 내 객체(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..
-
로컬스토리지 검색어 기능 만들기
안녕하세요 TriplexLab입니다. 오늘은 로컬 스토리지(localStorage)를 이용해서 검색어 기능을 만들어보겠습니다. 로컬 스토리지(localStorage) 로컬 스토리지에 관한 자세한 설명은 제가 작성한 글을 참고해주세요. 👇👇 [JavaScript]로컬스토리지, 세션스토리지, 쿠키 정리 🙋♂️ 로컬 스토리지, 세션 스토리지, 쿠키 차이점 안녕하세요 TriplexLab 입니다. 오늘은 로컬 스토리지, 세션 스토리지, 쿠키 차이점에 관해서 하나씩 살펴보도록 하겠습니다. 🍪 Cookie 📌 쿠 triplexlab.tistory.com 이것은 CRUD 중에서 C와 D에 해당되는 내용입니다. 음 개인적으로 간단한 이런 검색 기능 같은 경우에는 로컬 스토리지를 이용해서 만들어도 괜찮을 것 같네요. 프..
Web・API
-
URLSearchParams 유틸리티 메서드에 관해서
안녕하세요 TriplexLab 입니다. 오늘은 URLSearchParams 유틸리티 메서드에 관해서 이야기를 해보도록 하겠습니다. URLSearchParams은 URL의 쿼리 문자열 받아서 처리하는 고마운 메소드 입니다. 바로 사용예시 확인해 봅시다. 😃😃 예시코드)👇🏻 // api/request.js const apiFetchHandler = async (url) => { try { const response = await fetch(url); if (!response.ok) { throw new Error('데이터를 불러오는데 실패했습니다.'); } const body = await response.json(); console.log(body); return body; } catch (e) { con..
-
네트워크 통신 및 캐싱 구현
✨네트워크 통신 및 캐싱 구현 안녕하세요 TriplexLab 입니다. 오늘은 최근에 과제를 진행하면서 경험했던 거를 말씀드리고자 합니다. 👉🏻네트워크 통신 먼저 네트워크 통신은 하단에 영상 처럼 입력란에 특정 텍스트를 입력하는 시점에 네트워크(서버랑)통신하는것를 말합니다. 👉🏻문제인식 근데 여기서 문제가 있습니다. 매번 텍스트를 입력할때 마다 네트워크 통신을 하면 서버에 불필요한 요청을 여러번 하게 되는것이고, 서버입장에서는 부담되는 일을 하는것입니다. 👉🏻문제해결 캐싱처리를 해서 브라우저 메모리에 입시로 저장해놓고 같은 텍스트가 있다면 네트워크 통신을 하지 않는것이 목표였습니다. 처음에는 이것을 저는 localStorage에 저장할때 생각을 했지만 여기서는 new Map()을 사용했습니다. 하단 영상을..
-
async/await 구문의 실행 원리#18
👉async/await 구문의 실행 원리 이번 시간에는 async 함수가 다른 코드랑 섰여서 실행될때 모습을 살펴보겠습니다. 일단 그전에 알아야 하는 중요한 사실이 있습니다. 그건 바로 await 키워드는 async함수 안에서 사용할수 있다는 사실 입니다. 정말 그런지 한번 살펴 볼게요. 함수 앞에 붙은 async를 지우고 코드를 실행하면 다음과 같이 에러가 납니다. (await함수는 async 안에서만 실행 할수 있다고 써 있네요) 그러니깐 await 키워드는 async함수 안에서 사용할수 있다는 사실 이점 꼭 기억 해주세요. 이제 코드를 본격적으로 수정했습니다. console.log를 넣었고, 1~7까지 숫자를 넣었습니다. 여기써 있는 순서대로 각 console.log 실행 됩니다. 왜 그렇게 실행 ..
-
async/await이란?#17
👉async/await이란? 안녕하세요 TriplexLab 입니다. 이번 시간부터 async/await관해서 이야기를 해보겠습니다. (async/await이란 fetch함수말고, Promise객체를 좀더 간단하게 다룰수 있는 방법 입니다. 😃😃👏👏👍) 자 이제 위에 있는 이미지에서 강조한 부분들을 설명하도록 하겠습니다. Promise객체가 등장하므로써 콜백핼 문제를 해결하고, 비동기 실행 코드를 조금더 보기좋게 작성하는것이 가능해 졌습니다. Promise객체가 등장한 이후에도 더 발전했습니다. async/await의 구분 입니다. async는 비동기라는 의미 입니다. async는 함수안에 비동기적으로 실행 될 부분이 있다는것을 의미합니다. asynchronous의 줄임말로 우리가 배운 비동기를 의미합니다..
-
Axios란? / Axios & fetch 비교 #16
⚡️Axios란 우리는 이때까지 fetch 함수를 사용해서 Promise 공부를 했습니다. 저는 앞에서 fetch 함수가 Ajax 통신을 하는 함수라고 했는데요. 그런데 오늘날 개발 실무에서는 이 fetch 함수 말고도 Ajax 통신을 할 수 있는 방법이 존재한다고 했죠? 그것은 바로 axios 라고 하는 외부 패키지를 사용하는 것입니다. 잠깐 간단하게 axios 패키지를 사용한 코드를 보겠습니다. axios .get('https://jsonplaceholder.typicode.com/users') .then((response) => { console.log(response); }) .catch((error) => { console.log(error); }); 이 코드는 axios 패키지에서 제공하는 a..
-
여러 Promise 객체를 다루는 방법(심화)#15
✅여러 Promise 객체를 다루는 방법(심화) 이때까지 우리는 하나의 Promise 객체를 다루기 위해 알아야 하는 지식들을 배웠습니다. 하지만 실무 개발에서는 여러 개의 Promise 객체를 동시에 다뤄야 하는 경우 도 있는데요. 이번 노트에서는 여러 개의 Promise 객체를 다뤄야 할 때 사용되는 Promise의 메소드들을 배워보겠습니다. 1. all 메소드 설명을 하기에 앞서 바로 코드를 보겠습니다. // 1번 직원 정보 const p1 = fetch('https://learn.codeit.kr/api/members/1').then((res) => res.json()); // 2번 직원 정보 const p2 = fetch('https://learn.codeit.kr/api/members/2')...
-
이미 상태가 결정된 Promise 객체#14
🎯이미 상태가 결정된 Promise 객체 이전까지우리는 pending 상태에 있다가 fulfilled 상태 또는 rejected 상태가 되는 Promise 객체를 직접 만드는 법을 배웠습니다. 그런데 아예 처음부터 바로 fulfilled 상태이거나 rejected 상태인 Promise 객체를 만드는 것도 가능한데요. 어떻게 할 수 있는지 살펴봅시다. 1. 이미 상태가 결정된 Promise 객체 만들기 (1) fulfilled 상태의 Promise 객체 만들기 const p = Promise.resolve('success'); Promise의 resolve라는 메소드를 사용하면 바로 fulfilled 상태의 Promise 객체를 만들 수 있습니다. 위와 같이 쓰면 fulfilled 상태이면서, 작업 성공 ..
-
Promisify(프로미스화)#13
🔥Promisify(프로미스화)(Promise 동작원리) 이전 노트에서는 직접 Promise 객체를 만드는 방법을 배웠습니다. 그럼 언제 이런 식으로 Promise 객체를 직접 만들게 되는 걸까요? 다양한 경우들이 있지만, 전통적인 형식의 비동기 실행 함수를 사용하는 코드를, Promise 기반의 코드로 변환하기 위해 Promise 객체를 직접 만드는 경우가 많습니다. 각각의 예시를 통해 이게 무슨 말인지 이해해봅시다. 👉setTimeout 함수 예시 예를 들어 이런 wait이라는 함수가 있다고 합시다. function wait(text, milliseconds) { setTimeout(() => text, milliseconds); } wait 함수는 특정 밀리세컨즈만큼 시간이 지난 후에 text 파..
-
직접 만들어보는 Promise 객체#12
🏆직접 만들어보는 Promise 객체(Promise 동작원리) 이때까지 우리는 예시코드에서 fetch함수에서 리턴하는 promise객체를 사용했습니다. 그런데 사실 이렇게 어떤 함수가 리턴하는 promise객체를 가져다 쓰는게 아니라 직접 promise객체를 생성하는것도 가능합니다. 이번 시간에는 직접 promise객체를 만드는 방법을 배워 보겠습니다. 이 코드가 바로 promise객체를 직접 생성하는 코드 입니다. const p = new Promise((resolve, reject) => { }); new Promise 이 부분이 promise객체를 생성 하는 코드 인데요 이렇게 new를 붙이면 자바스크립트에서는 새로운 객체를 생성할수 있습니다. 여기서 중요한것은 파라미터로 들어간 콜백 함수 입니다...
-
Promise 객체는 왜 등장했을까?#11
📔Promise 객체는 왜 등장했을까?(Promise 동작원리) 안녕하세요 TriplexLab 입니다. 오늘은 Promise 객체는 왜 등장했을까? 라는 주제로 이야기를 해보겠습니다. 이때까지 우리는 Promise Chaining, then/catch/finally 메소드 등 Promise 객체에 관한 많은 것들을 배웠습니다. 그런데 여기서 궁금한 점이 하나 있습니다. Promise 객체는 왜 등장한 걸까요? 사실 Promise 객체가 등장하기 전에도 비동기적인 처리를 할 수 있는 방법은 있었습니다. setTimeout 함수나, addEventListener 메소드처럼요. setTimeout(callback, milliseconds); addEventListener(eventname, callback);..
-
finally 메소드#10
🤟finally 메소드(Promise 동작원리) 안녕하세요 TriplexLab 입니다. 이때까지 우리는 Promise객체의 then메소드와 catch메소드에 대해서 배웠습니다. 하지만 알아야 할 메소드가 하나더 남았습니다. 바로 finally 메소드 입니다. 만약 어떤 비동기 작업이 성공하든, 실패하든 상관 없이 그렇니깐 Promise 객체가 fulfilled 상태가 되든 , rejected 상태가 되든 상관 없이 항상 실행하고 싶은 콜백이 있을때는 어떻게 해야 할까요? 그런 콜백을 finally 메소드로 등록하면 됩니다. 일단 현재 코드에 finally 메소드를 추가해볼게요 fetch('https://jsonplaceholder.typicode.com/users') .then((response) => ..
-
catch 메소드를 여러 개 쓰는 경우#9
✅catch 메소드를 여러 개 쓰는 경우#9 안녕하세요 TriplexLab 입니다. 이번시간에는 catch 메소드를 여러 개 쓰는 경우에 대해서 살펴보겠습니다.🔥🔥 우리는 이제 catch 메소드를 Promise Chain 가장 마지막에 붙임으로써, 중간에 에러가 발생해서 어느 Promise 객체가 rejected 상태가 되더라도 항상 대처할 수 있도록 해야 한다는 걸 배웠습니다. 하지만 catch 메소드를 마지막뿐만 아니라 Promise Chain 중간중간에 쓰는 경우도 존재합니다. 만약 중간에 에러가 발생해도 catch 메소드가 그 대안을 뒤로 넘겨줄 수 있으면 catch 메소드를 중간에 써도 되는데요. 아래 코드를 잠깐 봅시다. fetch('https://friendbook.com/my/newsfee..
-
catch 메소드는 마지막에 씁니다#8
😃 catch 메소드는 마지막에 씁니다#8 안녕하세요 TriplexLab 입니다. 이번 시간에는 catch 메소드를 실무에서 보통 어떻게 사용하는지 보겠습니다. 일단 다음 코드를 보면 지금 fetch함수 작업이 실패하더라도 catch메소드에서 대비를 하고 있기 때문에 괜찮습니다. 그런데 만약 catch 메소드 뒤에 있는 then 메소드 콜백에서 에러를 발생하면 어떻게 될까요?? fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .catch((error) => { console.log(error) }) .then((result) => { console.log(result) }); 제가 여기서 이니적..
-
catch 메소드 이해하기#7
🏋️catch 메소드 이해하기#7 안녕하세요. 이번시간에는 catch 메소드에 대해서 이야기를 해보도록 하겠습니다. // Internet Disconnected fetch('https://jsonplaceholder.typicode.com/users') .then((response) => response.text()) .catch((error) => { console.log(error); }) .then((result) => { console.log(result); }); fetch 함수에서 발생한 에러가 catch 메소드 안의 콜백에까지 전달될 수 있는 걸까요? 사실 이 내용은 이전의 'then 메소드 완벽하게 이해하기' 노트를 잘 읽었다면 바로 이해할 수 있는 내용인데요. 지금 이 코드를 이렇게 수정..
-
then 메소드 완벽하게 이해하기#6
🧑🏻💻then 메소드 완벽하게 이해하기#6 Promise 객체를 배울 때는 then 메소드에 관해서만 확실히 알면 딱히 어려운 내용이 없습니다. 이번 노트에서는 Promise의 then 메소드에 관한 규칙을 제대로 깊이있게 배워봅시다. 잠깐 아래 코드를 보세요. 👇👇 const successCallback = function () { }; const errorCallback = function () { }; fetch('https://jsonplaceholder.typicode.com/users') // Promise-A .then(successCallback, errorCallback); // Promise-B 이 코드를 해석해봅시다. 일단, 이 코드에서 (1) fetch 메소드가 리턴하는 Promi..
-
rejected 상태가 되면 실행할 콜백#5
💻rejected 상태가 되면 실행할 콜백#5 지금까지는 Promise 객체 fulfilled 상태인 경우만 생각했는데요. 사실 하나의 Promise 객체가 가질수 있는 상태는 총 3가지가 있다고 했습니다. 아직 작업중인 상태를 나타내는 pending 상태 작업이 성공적으로 완료 되었음을 나타내는 fulfilled 상태 작업이 실패 되었음을 나타내는 rejected 상태 이렇게 3가지 라고 했는데요. 이 중에서 fulfilled 상태는 작업 성공 결과를 갖게 되고, rejected 상태는 작업 실패 정보를 갖게 됩니다. 여기서 첫번째 then메소드를 보면 이때까지와 달리 총 두개의 콜백이 들어가 있습니다. 일단 첫번째 콜백은 우리가 이때까지 배웠던것 처럼 Promise 객체가 fulfilled 상태가 될..
-
Promise Chaining 프로미스 체인 쓰는 이유#4
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); ..
-
fetch 함수는 Promise 객체를 리턴합니다#3
🙌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'); ..
-
비동기 실행 함수들#2
비동기 실행 함수들#2 안녕하세요 TriplexLab 입니다. 오늘은 자바스크립트에는 비동기 실행되는 함수들이 존재합니다. 그 예시들을 하나씩 살펴보겠습니다. 🎯 1. setTimeout 함수 setTimeout 함수는, 특정 함수의 실행을 원하는 시간만큼 뒤로 미루기 위해 사용하는 함수입니다. console.log('a'); setTimeout(() => { console.log('b'); }, 2000); console.log('c'); 예를 들어 이런 코드가 있을 때, 지금 가운데에 있는 setTimeout 함수는 첫 번째 파라미터에 있는 () ⇒ { console.log('b'); }, 이 콜백의 실행을, 두 번째 파라미터에 적힌 2000 밀리세컨즈(=2초) 뒤로 미룹니다. 그래서 이 코드를 실행..
-
fetch 함수와 비동기 실행#1
🌐 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 함수가 리퀘스트를 보내고, 서버의 리스폰스를 받게 되면 그때서야 이 콜백들이 순서대로 실행되..
ETC
-
Next JS에서 Node.js API 사용
안녕하세요 TripexLab 입니다. 오늘은 Next JS에서 Node의 API를 사용하는 방법에 대해서 살펴보겠습니다. NextJS는 React 기반(문법)의 프레임워크로 유명합니다. React기반의 함수형 컴포넌트를 사용해서 웹앱서비스를 만들수 있죠. 그리고 NextJS는 app 폴더 하위에 있는 모든 컴포넌트들은 기본적으로 서버컴포넌트 이므로(서버에서 동작함) 서버에 있는 파일을 읽고, 쓰고를 할수 있고 서버에 있는 경로도 접근이 가능합니다. 👉🏻NextJS 컴포넌트는 기본적으로 서버 사이드 렌더링(SSR) 합니다. 예를들어서 다음과 같이 비즈니스 로직을 보면 "path"와 "fs/promises"에 접근해서 가져올수가 있습니다. // src/service/posts.ts import { readF..
-
함수 합성(Function Composition)
1. 함수 합성(Function Composition)이란? 함수 합성은 함수들을 조합하여 새로운 함수를 만드는 것입니다. 함수 합성(Function Composition)을 사용해서 함수를 만들어 보겠습니다. 1) compose()의 특징은 함수 호출들을 오른쪽에서 왼쪽 방향으로 볼수 있습니다. const compose = function(functions){ if(!functions.length){ return function(x){ return x; } } return function(x){ let val = x; for(let i = functions.length - 1; i >= 0; i--){ val = functions[i](val) } return val; } } const fn = com..
-
Macrotask 와 Microtask의 두 Queue 제어 비교
function getData(){ fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(({title}) => console.log(`음답: ${title}`)) } function handleHeavyTask(bFetch){ if(bFetch) getData(); //fetch 비동기 요청 else console.log('지연없이실행') //코드의 실행 순서 보장 못함. } (function(){ console.log('안녕하세요'); handleHeavyTask(false); console.log('무거운 작업이 시작됐어요.'); })(); 결과) 👇🏻 이것은 동기와, 비동기 코드가 ..
-
무한 롤링 기능 구현
🎯무한 롤링 기능 안녕하세요 TriplexLab입니다. 오늘은 무한롤링 기능에 대해서 이야기를 해보겠습니다. 저 같은 경우에는 Swiper(v8.4.7)을 커스텀해서 기능을 완성할 수 있었습니다. 그리고 반응형으로 제작을 해야해서 마크업 상에서 PC, 모바일 둘 다 만들어 놓고 css 미디어쿼리를 사용해서 해상도가 PC일 때 PC버전 보여주고, 해상도가 모바일일 때 모바일 버전을 보여주는 방식을 택했습니다. 그렇다 보니 JS에서 Swiper인스턴스를 다음과 같이 두 번 호출했습니다. /** HISTORY 모바일 영역 */ new Swiper(".history-swiper.mo", { //... } /** HISTORY PC 영역 */ const historySwiperPc = new Swiper(".hi..
-
Next.js(렌더링 차이점)
최근에 Next.js 학습을 시작했습니다. 오늘은 학습하면서 정리했던 내용을 공유해보려고 합니다. 렌더링의 종류는 크게 4가지가 있습니다. CSR, SSG, ISR, SSR 4가지의 특징과 장단점을 이야기 해보겠습니다. 👉🏻CSR 특징 클라이언트(브라우저) 측에서 렌더링합니다. 1. 사용자가 Website 요청을 보냄 2. 브라우저는 HTML을 다운로드 합니다. 3. 이어서 브라우저가 JS파일과, React.JS파일를 다운로드합니다. 1. React.JS 소스코드 로드해서 메모리에 탑재하면서 리액트가 실행이되고, 2. HTML페이지에 있는 div root요소에 JS파일에 있는 root 컴포넌트를 연결시켜줘서 JS 소스코드를 하나씩 해석한 다음에 컴포넌트를 DOM요소로 변환을 하고, DOM트리 변환된것을 ..
-
macOS Apache 설치하기
안녕하세요 TriplexLab 입니다. 오늘은 macOS에 Homebrew로 Apache 설치하는 방법을 살펴보겠습니다. 👉🏻 1. macOS 11.4 Big Sur 개발환경 세팅 1. Big Sur 필수 라이브러리 설치를 위해 아래 명령어를 수행합니다. > brew install openssl 2. 내장 Apache가 이미 실행 중인 경우 먼저 종료하고 자동 로드 스크립트를 제거해야 합니다. > sudo apachectl stop > sudo launchctl unload -w /System/Library/LaunchDaemons/org.apache.httpd.plist 2>/dev/null 3. Brew에서 제공하는 Apache HTTPD (오픈 소스 기반 웹 서버)의 새 버전을 설치해야 합니다. >..
-
캔버스 사이즈 제대로 이해하기
안녕하세요 오늘은 캔버스 사이즈에 대해서 살펴보겠습니다. 👉🏻고해상도 이미지 표현하기 요즘에는 디스플레이 자체가 워낙 고해상도이다. 픽셀 집적도가 거의 기존의 2배 이상이 디폴트이기 때문에, 이미지 작업을 할 때도 300px짜리 이미지를 만든다고 하면, 300px로 만들지 않고, 600px로 만든 다음, CSS등으로 절반을 줄여서 표현해준다! 선명하게 표현해주기 위해서! 캔버스도 동일합니다. 위에 처럼 디스플레이의 해상도 dpr이 1 일때는 왼쪽과 같고, dpr이 2일때는 오른쪽과 같습니다.(하나의 1픽셀을 4등분으로 나눠서 표현) 따라서 dpr이 높을수로 더 선명한 그래픽을 보여주는 겁니다. 맥을 쓰고 있는 분들은 dpr이 2로 나올것이기 때문에 1픽셀을 실제로 그리는데 4개의 픽셀을 쓰고 있다고 보시..
-
slider를 직접 구현해보기
안녕하세요 triplexlab 입니다. 오늘은 Vanilla JS로 직접한번 구현 해봤습니다. 👉🏻slider를 직접 한번 구현하기 마우스 휠 가로스크롤를 하셔도 slider가 적용됩니다. See the Pen 좌, 우slider영역의 스크롤 by 소윤호 (@younhoso) on CodePen.
-
Lit-setting-webpack5
안녕하세요 TriplexLab입니다. 오늘은 webpack5으로 Lit.js을 세팅하는 방법에 대해서 살펴보도록 하겠습니다. 먼저 Web Component에 대해서 궁금하신다면 아래 글을 참고하시고👇🏻👇🏻 이어서 글을 보시면 이해하는데 더 도움이 됩니다. Web Component 정리 Web Component 는 복잡해진 마크업 요소들을 코드의 충돌없이 재사용 가능하고, 캡슐 화 시키기 위한 목적으로 만들어 졌습니다. WebComponent 의 장점으로는 아무래도 웹표준을 따르는 만큼 어떤 FE 프 triplexblog.kr 👉🏻Lit.js 소개 여러분 혹시 lit.js 라고 아시나요?? Playground – Lit Simple. Fast. Web Components. lit.dev React, Vue..
-
스티커 메모 앱(Sticky Notes App)
👉🏻스티커 메모 앱(Sticky Notes App) 안녕하세요 TriplexLab 입니다. 이번에는 브라우저에서 스티커 메모장을 만들어 보겠습니다. 이번 포스트는 dcode라는 외국 유튜버를 보고 참고 했습니다. 👉🏻로직의 차이점 위에 외국인 dcode 유튜브의 코드와 저의 코드에는 약간의 차이점이 있습니다. main.js에서 그 차이점을 볼수 있습니다. 1. javascript의 class 문법을 사용해서 구조화 시킴.(외국인 유튜브는 함수형으로 만듬) 2. Template literals를 사용 (외국인 유튜브는 document.createElement를 사용) 3. UI 측면으로 삭제 휴지통 버튼을 제공(외국인 유튜브는 더블클릭을 해야지 삭제 가능) 👉🏻소스코드 공유 👉🏻파일 공유 작업한것 파일 공..
-
이미지 파일 미리보기[JavaScript ES6]
👉🏻image를 Blob 객체 url로 바꾸어 img 띄우기 오늘은 Blob 객체를 local window에서만 사용하는 url로 바꾸어 html의 img 태그의 src 속성에 사용해보는 시간을 가져보겠습니다! 👉🏻createObjectURL Blob 객체를 url로 만들때는 URL.createObjectURL() 이 메소드를 사용합니다. URL.createObjectURL() 메소드는 주어진 객체를 가리키는 URL을 DOMString으로 변환하는 기능을 합니다. 해당 URL은 자신을 생성한 창의 document가 사라지면 함께 사라집니다. 👉🏻revokeObjectURL createObjectURL를 통해 만들어진 url는 해당 브라우저가 존재한 상태에서 revokeObjectURL 메소드로 url을 ..
-
Web Component 정리
Web Component 는 복잡해진 마크업 요소들을 코드의 충돌없이 재사용 가능하고, 캡슐 화 시키기 위한 목적으로 만들어 졌습니다. WebComponent 의 장점으로는 아무래도 웹표준을 따르는 만큼 어떤 FE 프레임워크나 라이브러리를 사용하더라도 공유, 조합이 가능하다는 것 입니다. 캡슐화 되어있는 Web Component 는 현재 사용중인 테마, 프레임워크로 부터컨텐츠를 보호 할 수 있으며, 잘 만들어진 디자인 시스템으로 무장된 Web Component 는 재사용 할 기회가 굉장히 많아 집니다. 단점으로는 현재 나와있는 수 많은 프레임워크와 라이브러리의 데이터 관련 API 작성과 비교해서 Web Component 를 순수하게 만들때는조금 장황하고 복잡할 수 있습니다. 그런 부분을 해결하기 위해 l..
-
데이터베이스 MySQL세팅하기 Sequelize
Sequelize MySQL 작업을 쉽게 할 수 있도록 도와주는 라이브러리가 있는데, 바로 시퀄라이즈(Sequelize)이다. Sequelize를 사용하는 이유 시퀄라이즈를 쓰는 이유는 자바스크립트 구문을 알아서 SQL로 바꿔주기 때문이다. 따라서 SQL 언어를 직접 사용하지 않아도 자바스크립트만으로 MySQL을 조작할 수 있고, SQL을 몰라도 MySQL을 다룰 수 있게 된다. sequelize 설치 👉🏻Sequelize를 사용하기 위해 필요한 패키지들 설치 npm install mysql2 sequelize sequelize-cli sequelize-cli는 Sequelize로 데이터베이스 작업을 하기 위한 필수 요건은 아니지만 이 패키지가 제공하는 다양한 명령어를 사용해서 프로젝트를 세팅하는 것이 ..
-
Cafe24 API 인증받고 API 호출까지
Cafe24 restAPI docs 참고하기 Cafe24를 활용해야 할 상황이 왔다. 정보가 아무것도 없기에 Cafe24 API를 익히는 것이 우선이라고 판단하여 천천히 API 호출 테스트를 시도해보려고 한다. 문서를 살펴보면, 대부분 api를 호출하는데 "Authorization"이라는 헤더정보가 필수적이다. 앱 생성 부터 Authorization인증, API 호출까지 진행해보자. 👉🏻앱 생성 https://www.cafe24.com/ 대표운영자 회원가입 https://developers.cafe24.com/ 로그인 앱 관리 - 앱 등록 4. 정보 입력 App URL과 code를 확인할 Redirect URI를 넣어주고, 확인할 API의 권한을 선택해준다. 5. 하단에 인증정보탭에 있는 Client I..
-
localStorage에 5분동안 caching캐싱 처리히기
👉🏻 환경: vue2 + axios 👉🏻 API : jsonplaceholder[참고링크] 간단한 TEST를 위해서 jsonplaceholder API를 사용하겠습니다. 다음과 같은 컴포넌트가 있고 /posts에 get 요청을 하고 있습니다. // src/components/home.vue {{ item.title }} 👉🏻로컬스토리지에 5분동안 캐싱하기 이렇게 API 호출해서 받아온 데이터를 로컬스토리지에 저장하고 5분동안 캐싱해보도록 하겠습니다. {{ item.title }} 로컬스토리지에 caching하기위해서 정의한 함수들 // src/lib/storageCaching.js import http from '@/api/index'; // apis호출 메소드 모음. const apis = { post..
-
JavaScript - 배열의 하위 배열 까지 합치는 방법 flatMap()
JavaScript - 배열의 하위 배열 까지 합치는 방법 flatMap() flatMap는 배열 내부의 하위 배열을 쉽게 합칠 수 있는 유용한 메서드입니다. 이것은 API연결시 데이터가 2중배열, 3중배열으로 값들이 들어올때 유용하게 가공할수 있는 메소드 입니다. 👉🏻예시1) const alphabets = ['a', 'b', 'c']; const fruits = ['apple', 'banana', 'cherry']; const flatMappedWord = alphabets.flatMap((alphabet, index) => [alphabet, fruits[index]]); console.log(flatMappedWord) // [ 'a', 'apple', 'b', 'banana', 'c', 'che..
-
vue3 composition API
안녕하세요 TriplexLab입니다. vue3에서 추가된 setup function을 이용한 composition API에 대해서 살펴 보겠습니다. [링크참고] 바로 아래 예시를 보면 될것 같습니다. vue3에서 추가되었다고 하지만 vue2(^2.6.14)에서도 사용가능 합니다. 👉🏻setup() 먼저 composition API본격적으로 알아보기 전에 setup에 대해서 살펴보도록 하겠습니다. setup함수 인자로는 props로 상위 컴포넌트에서 데이터를 받을수 있습니다. 그리고setup함수안에서 가공된 데이터를 리턴하면, 다른 함수(메소드)에서 접근이 가능합니다. {{ collectionName }}: {{ readersNumber }} {{ book.title }} incresement 중요한 차이..
-
2022년 회고
2022년 회고 안녕하세요 TriplexLab입니다. 오늘 2022년 제게 특별한 1년이었습니다. 2021년 12월 경에 잘 다니던 회사를 퇴사하고 항해 99의 부트캠프를 다니겠다는 다짐과, 그 외에 다른 커뮤니티 들도 참여해서 다양한 프로젝트를 경험했던 한해였습니다. 그리고 약 4개월간의 취업준비도 하면서 면접에서 여러 번 탈락을 맛보아서 낙심한 경험도 했고요🤣🤣 지금은 웃으면서 이야기할 수 있지만 그 당시에는 정말 힘들었습니다. 사람이 좋아하는 일이 있다는 게 참 감사한 일 같습니다. 그리고 나이 먹어도 내가 좋아하는 일을 지속가능하게 할 수 있는 것은 지루한 루틴에서 작은 성취감들을 느끼는 것. 그리고 그 작은 성취감을 느끼려고 끊임없이 노력하는 것. 이것이 내가 좋아하는 일을 포기하지 않게 하는 ..
-
네이버 OPEN API 사용
✅네이버 OPEN API 사용 안녕하세요 TriplexLab 입니다. 이번시간에는 네이버 OPEN API를 사용하는 예시를 살펴보도록 하겠습니다. 그리고 CORS에 관한것도 해결해보도록 하겠습니다. 👉🏻쇼핑인사이트 분야별 트렌드 조회 저는 쇼핑인사이트 분야별 트렌드 조회를 해보도록 하겠습니다. 👉🏻환경 Front: vite, react, typescript, axios back: express, body-parser 👉🏻그림으로 이해하기 그림으로 설명하면 다음과 같습니다. 브라우저 서버, Node 서버, naver 서버 3개가 있다면 처음에 브라우저 서버에서 → Node 서버에게 요청을 보내고 → naver 서버에 요청을 또 보내어서 DB에서 데이터를 가지고 naver 서버에 응답하고 → Node 서버에..
-
사이드 프로젝트 React.tsx
✅사이드 프로젝트 React.tsx 안녕하세요 TriplexLab입니다. 지금 저는 항해 99 7기를 끝내고 팀원 4분과 함께 사이트 프로젝트를 진행하고 있습니다. tsx으로 사이드 프로젝트를 진행하고 있는데 TS를 프젝트를 진행하는 것은 이번이 처음입니다. 지금까지 진행하면서 시행착오를 겼었는데요. 좀 정리를 해볼까 합니다. 👉🏻 tsx와 styled-components interface로 타입을 정의할 때 "옵션널한 값" 또는 "필수 값"으로 정의 할수 있습니다. 그래서 다음 같이 "옵션널한 값"으로 변경을 해줬더니, isCose 값만 props로 넘길 수 있게 되었습니다. 타입 스크립트 인강을 볼 때는 아 저런 것이 있구나 정도만 알고 있었는데, 직접 해보니 이렇게 쓰이는구나를 깨닫는 순간이었다. ..