TriplexLab 블로그 SKIN

TriplexLab SKIN

Blog Repository

TriplexLab Git Repository

프론트 개발자 기술 블로그

Front Developer Blog

• 방문자수
• BEST STORY

ALL

전체 방문자

290,350

TODAY

오늘 방문자

13

YESTERDAY

어제 방문자

4

MacOS 터미널에서 YouTube 영상 다운로드하기(youtube-dl)

MacOS 터미널에서 유튜브 동영상 및 유튜브 음악 무료 다운로드 받기 안녕하세요 TriplexLab입니다. 오늘은 MacOS 터미널만으로 (무료) YouTube 4K 영상 다운로드할 수 있는 방법에 대해서 소개해드리겠습니다. 👉참고사이트 GitHub - ytdl-org/youtube-dl: Command-line program to download videos from YouTube.com and other video sites Command-line program to download videos from YouTube.com and other video sites - GitHub - ytdl-org/youtube-dl: Command-line program to download videos fro..

CreayerFix SKIN(v1.2)

서비스 종료합니다.(2024 / 03 / 10)그동안에 저의 스킨에 많은 관심과, 사랑을 보내주셔서 감사합니다.사유: 정상적으로 스킨이 적용이 되어야 하는데 알 수 없는 이 유로 인해 스킨이 적용이 안 되는 이유와,평소 티스토리 서버의 불안함(잔 버그) 등등의 이유로 인해 저의 스킨에서 문제가 있는가해서 많은 오해를 받았습니다.이로 인해서 더 이상 유지보수하지 않기로 결정했습니다.추후에는 다른 플렛폼에서 더 좋은 템플릿을 제작해서 공유하도록 하겠습니다. 😃😃다시 한번 그동안에 저의 스킨에 많은 관심과, 사랑을 보내주셔서 감사합니다.CreayerFix SKIN(v1.2)TriplexLab 블로그는 2021.10.02(토)에 최초로 리뉴얼 작업이 진행되었고 현재 지금까지 운영해가고 있습니다.Triplex..

CSS Animated Hamburger Icon ( 햄버거 아이콘 애니메이션)

CSS Animated Hamburger Icon 모바일 메뉴 버튼 호버 및 클릭시 변형되는 애니메이션 효과 입니다. 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 CSS animated hamburger icon ... codepen.io 👉🏻다운로드 CSS animated hamburger icon ... codepen.io

Latest Story

• 💡 실수 줄이기 위해 도입한 Stylelint 자동화 – 삼성 AI 구독 서비스 프로젝트 경험담

  최근 에이전시에서 삼성 AI 구독 서비스 관련 프로젝트에 참여하고 있습니다.규모가 크고 협업이 많은 만큼, 팀 내부에서 정한 CSS 컨벤션이 굉장히 엄격하게 구성되어 있었죠.예를 들어,클래스명은 반드시 kebab-case로 작성선택자 순서, 중첩 깊이, 단일 선언 규칙 등font-family에 generic family 필수 등...이 컨벤션을 사람이 수동으로 일일이 맞추기란… 쉽지 않았습니다 😓작업을 하다 보면 자꾸만 작고 반복적인 실수가 발생했고,이로 인해 코드 리뷰에서 지적도 자주 받게 되더라고요.❗ 그래서 결정했습니다 – 자동화 도입!이러한 문제를 해결하기 위해 도입한 것이 바로 Stylelint 자동화 설정입니다..stylelintrc.json 파일을 통해 규칙을 명시하고, VS Code 확장..

• Effect를 이용한 데이터 페칭

  안녕하세요 트리플랩입니다.오늘은 ReactJS를 사용하면서 네트워크 요청하면서 버그처럼 보였던 상황을 공유하고, 공식문서에서는 어떻게 해결하는지 살펴보겠습니다.공식문서에 있는 예시 입니다.아래 예시는 ReactJS만 사용하는 경우에 Effect를 이용한 데이터 페칭 하는 과정에서 비동기(네트워크) 요청에 버그가 생길수 있는데다음과 같이 해결할수 할수 있다라는 예시 입니다.문제(버그) 상황 See the Pen Untitled by TriplexLab (@TriplexLab) on CodePen.위에 select 박스를 연속으로 변경해서 데이터를 불러온다고 가정하면 이거 버그인데 라고 인지 할수 있을것 입니다.만약 프레임워크를 사용하고 있다면 프레임워크의 데이터 페칭 메커니즘을 이용하는 것이 Eff..

• Tab Slider 기능

  안녕하세요 트리플랩입니다.오늘은 평소에 자주 보시는 네이버 Tab Slider기능에 관해서 살펴보겠습니다.아래 GIF를 보시면 사용자가 탭을 클릭할때마다 메뉴들이 좌우로 슬라이드가 되는 것을 확인 할수 있습니다.이것을 리액트기반으로 만들어서 공유할려고 합니다.!!코드 공유import { useRef, useState } from 'react';import clsx from 'clsx';import { TabSliderPageStyled } from '@/styles/pageStyled/TabSliderPageStyled';const items = [ '쇼핑라이브', '징보기', '원뿔딜', '책방', '선물샵', '도착보장', '패션뷰티', '쇼핑', '홈', '뉴스', '스포츠', ..

• 마우스 오버 효과

  안녕하세요 트리플랩입니다.오늘은 마우스 호버중에 재미 효과를 가지고 왔습니다!GSAP 사용GSAP는 자바스크립트 애니메이션 라이브러리 입니다.아래 코드에서 JS가 마우스 움직임의 감지하는 엔진입니다.참고하시면 될것 같습니다.👍👍 See the Pen 마우스 오버 효과 by TriplexLab (@TriplexLab) on CodePen.코드 공유위에 코드를 파일로 제공합니다. 필요하신분들은 다운받아가세요 👇👇👇

• 타입스크립트 live Countdown Timer

  👉타입스크립트 live Countdown Timer기능 만들기 타입스크립트를 사용해서 live Countdown Timer기능을 만들어 보겠습니다.! 타입스크립트에서 DOM에 접근할때 짧은 '$'로 접근하기위해서 함수를 만들었습니다.(제이쿼리 처럼 사용) const $ = (select: string): Element[] => { return Array.from(document.querySelectorAll(select)); }; 👉전체코드 공유 여기서 주의깊에 봐야한것은 template라는 기본 템플릿 변수에서 {{__countdown__}}라는 특수문자?를 썼는데 이 부분에서 특정 템플릿을 넣을수가 있습니다. template = template.replace('{{__countdown__}}', ti..

• Middleware & NextAuth.js(로그인 구현)(next - v14.1.0)

  안녕하세요 트리플랩입니다. 👉 NextAuth.js? 개발자들이 복잡한 인증 로직을 구현하지 않고도 빠르고 안전하게 사용자 인증을 구현할 수 있도록 도와준다. 👉 src/app/api/auth/[...nextauth]/route.ts에 초기화 세팅 Options providers: 공급자에는 다음과 같은 기본 옵션 세트가 제공됩니다. pages: 사용자 정의 로그인, 로그아웃 및 오류 페이지를 생성하려는 경우 사용할 URL을 지정합니다. 지정된 페이지는 해당 내장 페이지를 재정의합니다. callbacks: 콜백은 작업이 수행될 때 발생하는 작업을 제어하는 데 사용할 수 있는 비동기 함수입니다. 콜백은 데이터베이스 없이 액세스 제어를 구현하고 외부 데이터베이스 또는 API와 통합할 수 있으므로 특히 JSO..

• React Query 커스텀하기

  안녕하세요 트리플랩입니다. 정말 오래간만에 글을 쓰는것 같네요~ 부지런히 작성해야 하는데ㅠ 회사일이 바쁘다 보니.. 이렇게 설명절 연휴에 작성하게 되네요ㅎㅎ 이번 포스트는 React Query 커스텀에 대해서 이야기를 해볼까 합니다. 참고로 우리팀은 react-query: v5를 사용합니다. useCustomQuery를 만들어서 사용하는 이유를 간단히 설명하면 shopby라는 이커머스 쇼핑몰 오픈 API를 사용합니다.(헤드레스 기반) 이곳 API를 사용해 보신 분들은 아시겠지만 Parameters로 정말 많은 옵션값들을 서버에 보낼수가 있습니다. 그런데 이것을 useQuery로 서버에 요청을 하다보면 다음과 같이 Parameters의 길이가 보기 힘들게 길어질것 입니다. const { data: mult..

• Framer Slider part

  안녕하세요 트리플랩(TriplexLab) 입니다. [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map 사실 React에서 key가 변경 하면 위와 같은 코드로 순회하는 로직은 필요가 없어 집니다. 👉 수정 전 코드 {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => i === visible ? ( {i} ) : null )} 여기서 주의 깊게 봐야할것은 React js는 key를 바꾸면 component를 re-render를 해준다 입니다! 새로운 component가 생겼다고 생각하는 것 입니다. 그래서 React js는 이전 것을 없에버리고 새 것을 보여주는것이죠! 👉 수정 후 코드 {visible} 👉 전체 코드 공유 import styled from "styl..

• Framer motion Variants

  Framer 간단한 소개 Framer는 팀이 제품 경험의 모든 부분을 디자인하는 데 도움이 되는 올인원 도구입니다. 프론트개발자 관점에서 Framer의 motion API는 정말 짱입니다.! 👍👍 너무 쉽게 모션, 애니메이션을 컨트롤할수 있습니다. 그리고 무엇 보다 React.JS 기반입니다.!! Documentation | Framer for Developers An open source, production-ready motion library for React on the web. www.framer.com Variants 예제코드 Variants은 컴포넌트가 가질 수 있는 미리 정의된 시각적 state입니다. const variants = { visible: { opacity: 1 }, hidde..

• JavaScript Functional Programming

  안녕하세요 triplexlab(트리플랩)입니다. 오늘은 함수 합성의 기초 컨셉을 이해해 봅시다. 중첩된 고차 함수 예시 const title = "Learning Function Composition 1"; const starToArr = str => str.split(" "); const toLower = arr => arr.map(w => w.toLowerCase()); const joinWithDash = arr => arr.join("-"); const slug = joinWithDash(toLower(starToArr(title))) //중첩된 고차 함수 (가독성 문제, 유지보수 문제) console.log(slug); 결과) 👉 learning-function-composition-1 이렇게 ..

• Free Tech Store Template for Figma

  Free Tech Store Template for Figma 라이선스 FREE(프리): 개인 및 상업적으로 사용 가능 👉🏻다운로드 E-Commerce UI Kit | Figma Community ⚙️ Components Based 🎨 Color Styles -- Autolayouts 📱 Responsive Elevate your e-commerce design projects to new heights with our meticulously crafted Figma E-Commerce UI Kit. This comprehensive kit is a must-have for designers and developers look www.figma.com

• React 컴포넌트 - Tabs

  안녕하세요 트리플랩(TriplexLab) 입니다. 이번 포스터에서는 React 컴포넌트 - Star글이어서 Tabs에 관해서 이야기를 해보겠습니다.Tabs라고 하면 FE(프론트 개발자)가 흔히 많이 작업하는 기능중에 하나 입니다.보통은 이렇게 생겨습니다.그럼 바로 React 컴포넌트 - Tabs에 코드를 공유하겠습니다.Tabs 코드커스텀 훅으로 빼서 별도로 관리할 의도 입니다.// useTabs.tsximport { useState } from "react";import { useNavigate } from "react-router-dom";type TabProps = { queryKey: string; queryValue: string;};export default function useTabs({..

• 네트워크 통신 및 캐싱 구현

  ✨네트워크 통신 및 캐싱 구현 안녕하세요 TriplexLab 입니다. 오늘은 최근에 과제를 진행하면서 경험했던 거를 말씀드리고자 합니다. 👉🏻네트워크 통신 먼저 네트워크 통신은 하단에 영상 처럼 입력란에 특정 텍스트를 입력하는 시점에 네트워크(서버랑)통신하는것를 말합니다. 👉🏻문제인식 근데 여기서 문제가 있습니다. 매번 텍스트를 입력할때 마다 네트워크 통신을 하면 서버에 불필요한 요청을 여러번 하게 되는것이고, 서버입장에서는 부담되는 일을 하는것입니다. 👉🏻문제해결 캐싱처리를 해서 브라우저 메모리에 입시로 저장해놓고 같은 텍스트가 있다면 네트워크 통신을 하지 않는것이 목표였습니다. 처음에는 이것을 저는 localStorage에 저장할때 생각을 했지만 여기서는 new Map()을 사용했습니다. 하단 영상을..

• React 무한 스크롤(Offset-based)

  React 무한 스크롤(Offset-based) 안녕하세요 TriplexLab 입니다. 오늘은 Intersection Observer API를 활용해서 React 무한 스크롤(Offset-based)에 관해서 이야기를 하겠습니다. (다음 내용은 프론트 입장에서 무한 스크롤기능을 구현하는데 초점을 둔 내용입니다.) 코드를 보기 앞서 무한 스크롤에는 크게 2가지 방법이 있습니다. Offset-based, Cursor-based 입니다. 👉🏻 Offset-based 📌 장점 offset, limit 을 사용한 쿼리 이용 (MySQL 기준) 페이지 단위로 구분 직관적이고 구현도 간단합니다. 📌 단점 데이터 중복 문제(사용자가 동시에 컨텐츠를 생성 또는 삭제을 할경우에 중복) 성능 저하 문제 성능 저하 문제는 둘..

• 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..

• Free Financial Website Design Template

  Free Financial Website Design Template 라이선스 FREE(프리): 개인 및 상업적으로 사용 가능 👉🏻다운로드 Banking Company Website UI Template Design in Dark Theme ( FREE Editable ) | Figma Community YourBank - Bank Website Template YourBank is your ultimate bank website template, designed to provide a secure, informative, and user-friendly online experience for your customers. It's the key to elevating your bank's online p..

• React 컴포넌트 - Star

  안녕하세요 트리플랩 입니다. 오늘은 별 모양 React component를 만들어서 공유해 보겠습니다. 보통 서비스를 만들다 보면 리뷰 컴포넌트 같은 곳에서 별점등 많이 구현하시잖아요? 해당 컴포넌트를 공유합니다. // useStarRating.tsx import React, { useState } from "react"; import star_active from "../assets/images/star_active.svg"; import star_default from "../assets/images/star_default.svg"; export interface StarRatingProps { totalStars: number; activeStars: number; size?: number; } c..

• 무한스크롤 (Infinity Scroll) UI 구현하기

  🏃‍♀️무한스크롤 (Infinity Scroll) UI 구현하기 안녕하세요 TriplexLab 입니다 :) 오늘은 무한스크롤 UI에 관해서 살펴 보도록 하겠습니다. 스크롤이 화면의 끝에 닿기전에 콘텐츠를 추가로 노출시켜 계속 스크롤하게 만드것이 무한스크롤 UI입니다. 보통은 ajax와 같은 서버통신 API를 사용해서 추가로 노출되는 콘텐츠를 로드하지만 본 예제에서는 특정 콘텐츠를 변수에 담고 있다가 데이터가 추가되는 시점에 노출시키는 방식으로 표현해볼 생각입니다. 모바일에서만 국한된 내용으로 오해할 수 있지만 점점 PC웹과 모바일웹의 경계가 모호해지고 있어 PC웹에서도 유용하게 사용 가능합니다. ✨ createDocumentFragment() 메소드 template를 만들어서 뿌리는 과장에서 create..

• lazy load blur effect

  👉🏻lazy load blur effec See the Pen lazy load blur effect by Jasmin Mehmedovic (@To_rn4D0) on CodePen. blur효과를 주어서 흐릿하게 보이다가 점점 선명해지게 보이는 효과🎉🎉 이것을 활용해서 Image Lazy라는 웹 성능 최적화 기술로도 같이 쓰일수 있습니다.

• 유튜브 영상 렌덤으로 보이기

  👉🏻유튜브 영상 렌덤으로 보이기 안녕하세요 트리플랩(TriplexLab) 입니다. 이번에는 흔하게 많이들 작업하시는 유튜브 영상을 렌덤으로 보이기 기능에 대해서 살펴보겠습니다. 👉🏻HTML 코드 유튜브 영상 렌덤으로 보이기 👉🏻CSS 코드 html,body {margin: 0; padding: 0;} .global.active::before { display: inline-block; content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); position: absolute; } .close-btn { width: 30px; position: absolute; right: 0px; top: -50px; } .center {..

Free・Resources

• Free Tech Store Template for Figma

  Free Tech Store Template for Figma 라이선스 FREE(프리): 개인 및 상업적으로 사용 가능 👉🏻다운로드 E-Commerce UI Kit | Figma Community ⚙️ Components Based 🎨 Color Styles -- Autolayouts 📱 Responsive Elevate your e-commerce design projects to new heights with our meticulously crafted Figma E-Commerce UI Kit. This comprehensive kit is a must-have for designers and developers look www.figma.com

• Free Financial Website Design Template

  Free Financial Website Design Template 라이선스 FREE(프리): 개인 및 상업적으로 사용 가능 👉🏻다운로드 Banking Company Website UI Template Design in Dark Theme ( FREE Editable ) | Figma Community YourBank - Bank Website Template YourBank is your ultimate bank website template, designed to provide a secure, informative, and user-friendly online experience for your customers. It's the key to elevating your bank's online p..

• Roxo: Free HTML Template for Design Agencies

  Roxo: Free HTML Template for Design Agencies 라이선스 FREE(프리): 개인 및 상업적으로 사용 가능 👉🏻다운로드 Roxo - Agency Template for Startups Roxo makes it easier to get a perfect technology website off the ground for your agency. staticmania.com

• Real Estate Landing Page Design

  Real Estate Landing Page Design 라이선스 FREE(프리): 개인 및 상업적으로 사용 가능 자세히보기 👉🏻다운로드 Real estate Landing page UI Kit | Figma Community Clean and very detailed Web UI kit. We created it for busy designers and Digital Design Agency. unique and amazing designed illustrations and components are included. We are using a 12-column Bootstrap grid with 1920px width. All symbols are organized and www.figma.com

• Image Layer Animations with Clip-Path

  Image Layer Animations with Clip-Path 라이선스 FREE(프리): 개인 및 상업적으로 사용 가능 자세히보기 👉🏻다운로드 GitHub - codrops/LayersAnimation: Some ideas for speedy page transition animations with layered images using clip-path. Some ideas for speedy page transition animations with layered images using clip-path. - GitHub - codrops/LayersAnimation: Some ideas for speedy page transition animations with layered images usin..

• Ideas for Image Motion Trail Animations

  Ideas for Image Motion Trail Animations 👉🏻라이센스 FREE(프리): 개인 및 상업적으로 사용 가능 👉🏻다운로드 GitHub - codrops/MotionTrailAnimations: Some ideas for mouse/touch responsive image animations. Some ideas for mouse/touch responsive image animations. - GitHub - codrops/MotionTrailAnimations: Some ideas for mouse/touch responsive image animations. github.com

• Blogge-Blog Template

  Blogge-Blog Template 👉🏻라이센스 FREE(프리): 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Blogge | Personal Blog Site Articles View the latest news on Blogger By Mary Astor October 19, 2020 - 2 min Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy. read more By Mary Astor October 19, 2020 - 2 min Lorem ipsum dolor sit amet, consetetur sadipscing eli blogge.staticmania.com 👉🏻다운로드 Blogge | Personal ..

• Animating Multi-Page Navigations with Browser View Transitions and Astro

  Animating Multi-Page Navigations with Browser View Transitions and Astro 👉🏻라이센스 MIT 라이선스: 저작자 표시 없이 개인 및 상업적으로 사용 가능 👉🏻데모 미리보기 Shop A simple Shop built in Astro using View Transitions and TailwindCSS astro-shop-ten.vercel.app 👉🏻다운로드 Animating Multi-Page Navigations with Browser View Transitions and Astro | Codrops A beginner-friendly guide that walks you through the use of the Browser View Trans..

• Wemeet-Free Meetup Website

  Wemeet-Free Meetup Website 회의, 이벤트, 포럼 및 모임을위한 무료 모임 웹 사이트 템플릿입니다.전체 화면 배너, 카운트 다운 타이머, 고정 탐색 표시 줄, 모임 일정 및 자주 묻는 질문에 대한 아코디언이 포함됩니다. 👉🏻라이센스 저작권표시 [CC BY]: 저작자를 표시하고 영리목적으로 사용할 수 있습니다. 👉🏻데모 미리보기 Colorlib | Free Bootstrap Website Template preview.colorlib.com 👉🏻다운로드 https://colorlib.com/wp/template/wemeet/

• 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..

• 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..

• 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)

  styled components

  2023.11.03 10:42
• HTML+SCSS(CSS3)

  일반 HTML 파일에 include/imports 하는 방법

  2023.10.18 21:16
• HTML+SCSS(CSS3)

  Icon Font 정리

  2023.08.19 07:56
• HTML+SCSS(CSS3)

  text 줄간격 표현하기

  2023.06.24 09:43
• HTML+SCSS(CSS3)

  모바일 웹 앱에서 100vh이 가진 세로 사이즈 문제

  2022.12.01 12:01
• HTML+SCSS(CSS3)

  반응형 이미지 비율 유지하기

  2022.11.28 11:57
• HTML+SCSS(CSS3)

  서서히 변하는 애니메이션 keyframes

  2022.05.27 22:32
• HTML+SCSS(CSS3)

  Live Sass 컴파일하기

  2021.12.09 15:17
• HTML+SCSS(CSS3)

  wave keyframes로 만들기

  2021.08.12 12:59
• HTML+SCSS(CSS3)

  데이터 속성 사용하기

  2021.08.05 08:36
• HTML+SCSS(CSS3)

  css 꿀팁 웹서비스 5가지

  2021.07.31 22:57
• HTML+SCSS(CSS3)

  CSS 선택자 :nth-child

  2021.07.22 21:36
• HTML+SCSS(CSS3)

  미디어 쿼리 (Media Query) 와 Viewport

  2021.05.23 16:49
• HTML+SCSS(CSS3)

  유튜브(Youtube) 영상 비율에 마쳐 반응형으로 만들기

  2021.05.15 16:09
• HTML+SCSS(CSS3)

  이미지 슬라이드 (Carousel)

  2021.03.20 12:57
• HTML+SCSS(CSS3)

  퍼포먼스 사이드 메뉴 html+scss

  2021.02.10 09:55
• HTML+SCSS(CSS3)

  CSS 아이콘 라이브러리 fontello 사용하기

  2020.12.27 22:15
• HTML+SCSS(CSS3)

  반응형일 작업할때 유지할수 있는 수직 정렬

  2020.12.09 09:45
• HTML+SCSS(CSS3)

  inline-block과 float 중 어떤 것을 써야 할까?

  2020.12.08 11:49
• HTML+SCSS(CSS3)

  📦 css3 Boxsizing 정리

  2020.11.29 23:05

ECMAScript 2015+

• JavaScript Functional Programming

  안녕하세요 triplexlab(트리플랩)입니다. 오늘은 함수 합성의 기초 컨셉을 이해해 봅시다. 중첩된 고차 함수 예시 const title = "Learning Function Composition 1"; const starToArr = str => str.split(" "); const toLower = arr => arr.map(w => w.toLowerCase()); const joinWithDash = arr => arr.join("-"); const slug = joinWithDash(toLower(starToArr(title))) //중첩된 고차 함수 (가독성 문제, 유지보수 문제) console.log(slug); 결과) 👉 learning-function-composition-1 이렇게 ..

• 무한스크롤 (Infinity Scroll) UI 구현하기

  🏃‍♀️무한스크롤 (Infinity Scroll) UI 구현하기 안녕하세요 TriplexLab 입니다 :) 오늘은 무한스크롤 UI에 관해서 살펴 보도록 하겠습니다. 스크롤이 화면의 끝에 닿기전에 콘텐츠를 추가로 노출시켜 계속 스크롤하게 만드것이 무한스크롤 UI입니다. 보통은 ajax와 같은 서버통신 API를 사용해서 추가로 노출되는 콘텐츠를 로드하지만 본 예제에서는 특정 콘텐츠를 변수에 담고 있다가 데이터가 추가되는 시점에 노출시키는 방식으로 표현해볼 생각입니다. 모바일에서만 국한된 내용으로 오해할 수 있지만 점점 PC웹과 모바일웹의 경계가 모호해지고 있어 PC웹에서도 유용하게 사용 가능합니다. ✨ createDocumentFragment() 메소드 template를 만들어서 뿌리는 과장에서 create..

• 유튜브 영상 렌덤으로 보이기

  👉🏻유튜브 영상 렌덤으로 보이기 안녕하세요 트리플랩(TriplexLab) 입니다. 이번에는 흔하게 많이들 작업하시는 유튜브 영상을 렌덤으로 보이기 기능에 대해서 살펴보겠습니다. 👉🏻HTML 코드 유튜브 영상 렌덤으로 보이기 👉🏻CSS 코드 html,body {margin: 0; padding: 0;} .global.active::before { display: inline-block; content: ''; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); position: absolute; } .close-btn { width: 30px; position: absolute; right: 0px; top: -50px; } .center {..

• 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) ..

• JavaScript slider-loop

  좌,우 버튼으로 Y축으로 슬라이드되면서 무한 반복(롤링)되는 방식입니다. html에서 아이템 모두 개수마다 노출되는것이 아니라, 비례해서 상대적으로 노출됩니다. See the Pen slider-loop by 소윤호 (@younhoso) on CodePen.

• 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..

Web・API

• 네트워크 통신 및 캐싱 구현

  ✨네트워크 통신 및 캐싱 구현 안녕하세요 TriplexLab 입니다. 오늘은 최근에 과제를 진행하면서 경험했던 거를 말씀드리고자 합니다. 👉🏻네트워크 통신 먼저 네트워크 통신은 하단에 영상 처럼 입력란에 특정 텍스트를 입력하는 시점에 네트워크(서버랑)통신하는것를 말합니다. 👉🏻문제인식 근데 여기서 문제가 있습니다. 매번 텍스트를 입력할때 마다 네트워크 통신을 하면 서버에 불필요한 요청을 여러번 하게 되는것이고, 서버입장에서는 부담되는 일을 하는것입니다. 👉🏻문제해결 캐싱처리를 해서 브라우저 메모리에 입시로 저장해놓고 같은 텍스트가 있다면 네트워크 통신을 하지 않는것이 목표였습니다. 처음에는 이것을 저는 localStorage에 저장할때 생각을 했지만 여기서는 new Map()을 사용했습니다. 하단 영상을..

• 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..

• 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

• 💡 실수 줄이기 위해 도입한 Stylelint 자동화 – 삼성 AI 구독 서비스 프로젝트 경험담

  최근 에이전시에서 삼성 AI 구독 서비스 관련 프로젝트에 참여하고 있습니다.규모가 크고 협업이 많은 만큼, 팀 내부에서 정한 CSS 컨벤션이 굉장히 엄격하게 구성되어 있었죠.예를 들어,클래스명은 반드시 kebab-case로 작성선택자 순서, 중첩 깊이, 단일 선언 규칙 등font-family에 generic family 필수 등...이 컨벤션을 사람이 수동으로 일일이 맞추기란… 쉽지 않았습니다 😓작업을 하다 보면 자꾸만 작고 반복적인 실수가 발생했고,이로 인해 코드 리뷰에서 지적도 자주 받게 되더라고요.❗ 그래서 결정했습니다 – 자동화 도입!이러한 문제를 해결하기 위해 도입한 것이 바로 Stylelint 자동화 설정입니다..stylelintrc.json 파일을 통해 규칙을 명시하고, VS Code 확장..

• Effect를 이용한 데이터 페칭

  안녕하세요 트리플랩입니다.오늘은 ReactJS를 사용하면서 네트워크 요청하면서 버그처럼 보였던 상황을 공유하고, 공식문서에서는 어떻게 해결하는지 살펴보겠습니다.공식문서에 있는 예시 입니다.아래 예시는 ReactJS만 사용하는 경우에 Effect를 이용한 데이터 페칭 하는 과정에서 비동기(네트워크) 요청에 버그가 생길수 있는데다음과 같이 해결할수 할수 있다라는 예시 입니다.문제(버그) 상황 See the Pen Untitled by TriplexLab (@TriplexLab) on CodePen.위에 select 박스를 연속으로 변경해서 데이터를 불러온다고 가정하면 이거 버그인데 라고 인지 할수 있을것 입니다.만약 프레임워크를 사용하고 있다면 프레임워크의 데이터 페칭 메커니즘을 이용하는 것이 Eff..

• Tab Slider 기능

  안녕하세요 트리플랩입니다.오늘은 평소에 자주 보시는 네이버 Tab Slider기능에 관해서 살펴보겠습니다.아래 GIF를 보시면 사용자가 탭을 클릭할때마다 메뉴들이 좌우로 슬라이드가 되는 것을 확인 할수 있습니다.이것을 리액트기반으로 만들어서 공유할려고 합니다.!!코드 공유import { useRef, useState } from 'react';import clsx from 'clsx';import { TabSliderPageStyled } from '@/styles/pageStyled/TabSliderPageStyled';const items = [ '쇼핑라이브', '징보기', '원뿔딜', '책방', '선물샵', '도착보장', '패션뷰티', '쇼핑', '홈', '뉴스', '스포츠', ..

• 마우스 오버 효과

  안녕하세요 트리플랩입니다.오늘은 마우스 호버중에 재미 효과를 가지고 왔습니다!GSAP 사용GSAP는 자바스크립트 애니메이션 라이브러리 입니다.아래 코드에서 JS가 마우스 움직임의 감지하는 엔진입니다.참고하시면 될것 같습니다.👍👍 See the Pen 마우스 오버 효과 by TriplexLab (@TriplexLab) on CodePen.코드 공유위에 코드를 파일로 제공합니다. 필요하신분들은 다운받아가세요 👇👇👇

• 타입스크립트 live Countdown Timer

  👉타입스크립트 live Countdown Timer기능 만들기 타입스크립트를 사용해서 live Countdown Timer기능을 만들어 보겠습니다.! 타입스크립트에서 DOM에 접근할때 짧은 '$'로 접근하기위해서 함수를 만들었습니다.(제이쿼리 처럼 사용) const $ = (select: string): Element[] => { return Array.from(document.querySelectorAll(select)); }; 👉전체코드 공유 여기서 주의깊에 봐야한것은 template라는 기본 템플릿 변수에서 {{__countdown__}}라는 특수문자?를 썼는데 이 부분에서 특정 템플릿을 넣을수가 있습니다. template = template.replace('{{__countdown__}}', ti..

• Middleware & NextAuth.js(로그인 구현)(next - v14.1.0)

  안녕하세요 트리플랩입니다. 👉 NextAuth.js? 개발자들이 복잡한 인증 로직을 구현하지 않고도 빠르고 안전하게 사용자 인증을 구현할 수 있도록 도와준다. 👉 src/app/api/auth/[...nextauth]/route.ts에 초기화 세팅 Options providers: 공급자에는 다음과 같은 기본 옵션 세트가 제공됩니다. pages: 사용자 정의 로그인, 로그아웃 및 오류 페이지를 생성하려는 경우 사용할 URL을 지정합니다. 지정된 페이지는 해당 내장 페이지를 재정의합니다. callbacks: 콜백은 작업이 수행될 때 발생하는 작업을 제어하는 데 사용할 수 있는 비동기 함수입니다. 콜백은 데이터베이스 없이 액세스 제어를 구현하고 외부 데이터베이스 또는 API와 통합할 수 있으므로 특히 JSO..

• React Query 커스텀하기

  안녕하세요 트리플랩입니다. 정말 오래간만에 글을 쓰는것 같네요~ 부지런히 작성해야 하는데ㅠ 회사일이 바쁘다 보니.. 이렇게 설명절 연휴에 작성하게 되네요ㅎㅎ 이번 포스트는 React Query 커스텀에 대해서 이야기를 해볼까 합니다. 참고로 우리팀은 react-query: v5를 사용합니다. useCustomQuery를 만들어서 사용하는 이유를 간단히 설명하면 shopby라는 이커머스 쇼핑몰 오픈 API를 사용합니다.(헤드레스 기반) 이곳 API를 사용해 보신 분들은 아시겠지만 Parameters로 정말 많은 옵션값들을 서버에 보낼수가 있습니다. 그런데 이것을 useQuery로 서버에 요청을 하다보면 다음과 같이 Parameters의 길이가 보기 힘들게 길어질것 입니다. const { data: mult..

• Framer Slider part

  안녕하세요 트리플랩(TriplexLab) 입니다. [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map 사실 React에서 key가 변경 하면 위와 같은 코드로 순회하는 로직은 필요가 없어 집니다. 👉 수정 전 코드 {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => i === visible ? ( {i} ) : null )} 여기서 주의 깊게 봐야할것은 React js는 key를 바꾸면 component를 re-render를 해준다 입니다! 새로운 component가 생겼다고 생각하는 것 입니다. 그래서 React js는 이전 것을 없에버리고 새 것을 보여주는것이죠! 👉 수정 후 코드 {visible} 👉 전체 코드 공유 import styled from "styl..

• Framer motion Variants

  Framer 간단한 소개 Framer는 팀이 제품 경험의 모든 부분을 디자인하는 데 도움이 되는 올인원 도구입니다. 프론트개발자 관점에서 Framer의 motion API는 정말 짱입니다.! 👍👍 너무 쉽게 모션, 애니메이션을 컨트롤할수 있습니다. 그리고 무엇 보다 React.JS 기반입니다.!! Documentation | Framer for Developers An open source, production-ready motion library for React on the web. www.framer.com Variants 예제코드 Variants은 컴포넌트가 가질 수 있는 미리 정의된 시각적 state입니다. const variants = { visible: { opacity: 1 }, hidde..

• React 컴포넌트 - Tabs

  안녕하세요 트리플랩(TriplexLab) 입니다. 이번 포스터에서는 React 컴포넌트 - Star글이어서 Tabs에 관해서 이야기를 해보겠습니다.Tabs라고 하면 FE(프론트 개발자)가 흔히 많이 작업하는 기능중에 하나 입니다.보통은 이렇게 생겨습니다.그럼 바로 React 컴포넌트 - Tabs에 코드를 공유하겠습니다.Tabs 코드커스텀 훅으로 빼서 별도로 관리할 의도 입니다.// useTabs.tsximport { useState } from "react";import { useNavigate } from "react-router-dom";type TabProps = { queryKey: string; queryValue: string;};export default function useTabs({..

• React 무한 스크롤(Offset-based)

  React 무한 스크롤(Offset-based) 안녕하세요 TriplexLab 입니다. 오늘은 Intersection Observer API를 활용해서 React 무한 스크롤(Offset-based)에 관해서 이야기를 하겠습니다. (다음 내용은 프론트 입장에서 무한 스크롤기능을 구현하는데 초점을 둔 내용입니다.) 코드를 보기 앞서 무한 스크롤에는 크게 2가지 방법이 있습니다. Offset-based, Cursor-based 입니다. 👉🏻 Offset-based 📌 장점 offset, limit 을 사용한 쿼리 이용 (MySQL 기준) 페이지 단위로 구분 직관적이고 구현도 간단합니다. 📌 단점 데이터 중복 문제(사용자가 동시에 컨텐츠를 생성 또는 삭제을 할경우에 중복) 성능 저하 문제 성능 저하 문제는 둘..

• React 컴포넌트 - Star

  안녕하세요 트리플랩 입니다. 오늘은 별 모양 React component를 만들어서 공유해 보겠습니다. 보통 서비스를 만들다 보면 리뷰 컴포넌트 같은 곳에서 별점등 많이 구현하시잖아요? 해당 컴포넌트를 공유합니다. // useStarRating.tsx import React, { useState } from "react"; import star_active from "../assets/images/star_active.svg"; import star_default from "../assets/images/star_default.svg"; export interface StarRatingProps { totalStars: number; activeStars: number; size?: number; } c..

• Nextjs device-check useContext

  안녕하세요 tripexlab(트리플랩)입니다. 오늘은 Nextjs App Router환경에서 사용자 device-check를 체크헤서 useContext로 컴포넌트 전역으로 사용하는 방법에대해서 이야기를 해보겠습니다. Nextjs App Router 참고: App Router 는 v13.4 버전부터 안정화가 되었습니다. // src/context/DeviceType.tsx 'use client'; import React, { createContext, useState, useEffect, useContext, ReactNode } from 'react'; // DeviceType를 생성합니다. const DeviceTypeContext = createContext(undefined); // DeviceT..

• Next.js의 CORS 문제 해결

  Next.js CORS 문제 해결 Next.js 공식문서에서 CORS 문제 해결 방법을 살펴보면 다음과 같습니다. next.config.js설정파일에서 rewrites메소드를 사용하라고 예시가 있습니다. //next.config.js /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, async rewrites() { return [ { source: '/api/:path*', destination: `API주소/:path*`, }, ]; }, }; module.exports = nextConfig; 실무에서 썼던 코드 공유 그럼 위에 예시 코드를 참고로 해서 바로 실무에서 썼던 코드 공유해 드립니다. 참..

• NextJS 13.5v 에서 GlobalStyle 및 theme style 적용하기

  👉🏻Next 13.5v 에서 GlobalStyle 및 theme style 적용하기 안녕하세요 트리플랩입니다 :) 오늘은 NextJS 13에서 GlobalStyle 및 theme style 적용하는 방법에 대해서 이야기를 해보겠습니다. 일단 공식문에서 styled-components.tsx을 설정하는 방법을 참고했습니다.(하단 링크 참고) // src/lib/styled-components.tsx 'use client' import React, { useState } from 'react' import { useServerInsertedHTML } from 'next/navigation' import { ServerStyleSheet, StyleSheetManager } from 'styled-compo..

• 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트리 변환된것을 ..