나디아 성장 일기

📌 collection(컬렉션): 특정 라이브러리/데이터베이스에서 데이터를 저장 & 관리하는 컨테이너 객체보통 데이터베이스 클라이언트 라이브러리에서 사용되며, 컬렉션(데이터베이스 테이블과 유사한 개념)과 상호작용할 수 있는 인터페이스를 제공한다.동일한 구조의 문서(Document)들을 저장하는 컨테이너 역할특정 라이브러리에서는 collection 객체를 사용하여 데이터를 생성, 조회, 업데이트, 삭제 등의 작업을 수행할 수 있다. 각 문서는 일반적으로 JSON 형식으로 저장되며, 고유의 ID를 가진다. 예시PocketBase: pb.collection('users') 같은 구문에서 collection은 PocketBase에서 특정 컬렉션을 참조MongoDB: db.collection('users') 같..

📌 react-hot-toast: React에서 사용하는 토스트 메시지 라이브러리  react-hot-toast - The Best React Notifications in Town - react-hot-toastAdd beautiful notifications to your React app with react-hot-toast. Lightweight. Smoking hot by default.react-hot-toast.com   ✨ 토스트 메시지(Toast Message): 사용자에게 간단한 정보를 잠깐 보여주는 UI 요소토스트처럼 화면의 특정 위치에서 떠오르고, 일정 시간이 지나면 자동으로 사라진다. 보통 정보나 작업 결과를 사용자에게 간단하게 알려줄 때 사용한다.    ⏩ 설치pnpm add ..

📌 Thunder Client: REST API 요청을 테스트하고 디버깅할 수 있는 VS Code 확장 프로그램 Thunder Client - Rest API Client Extension for VS CodeThunder Client is a hand-crafted lightweight Rest API Client extension for Visual Studio Codewww.thunderclient.com  ⏩ 주요 기능REST API 요청 테스트GET, POST, PUT, DELETE 등 다양한 HTTP 요청을 쉽게 만들고 테스트할 수 있다.응답 검사API 응답을 JSON, XML 등 다양한 형식으로 확인하고, 응답 시간, 상태 코드 등을 확인할 수 있다.환경 변수환경 변수를 설정하여 개발, 테..

SVG 압축하기  SVGOMG : SVG 파일을 최적화하는 도구 SVGOMG - Optimize and minify SVG imagesOptimize and minify SVG imagessvgomg.net    SVGO : SVG 파일을 최적화하는 오픈 소스 도구 GitHub - svg/svgo: ⚙️ Node.js tool for optimizing SVG files⚙️ Node.js tool for optimizing SVG files. Contribute to svg/svgo development by creating an account on GitHub.github.com  설치 npm install -g svgo사용 svgo input.svg -o output.svg input.svg: 최적화..

Quokka: 자바스크립트 코드 결과를 바로 확인할 수 있는 VS Code 확장 플러그인 코드의 동작을 실시간으로 볼 수 있어서 매우 유용 디버깅에 좋음 Quokka - JavaScript and TypeScript playground in your editorQuokka runs your JavaScript and TypeScript code and displays results inline in VS Code, WebStorm, and Sublime Text.quokkajs.com   설치vs code 마켓 플레이스에서 설치 Quokka.js - Visual Studio MarketplaceExtension for Visual Studio Code - JavaScript and TypeScript..

자바스크립트 슬라이드(slide) 라이브러리  Swiper: 유연하고 사용하기 쉬운 자바스크립트 슬라이드 라이브러리  Swiper - The Most Modern Mobile Touch SliderSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com   설치 CDN 방식   npm 방식1. npm 설치npm install swiper 2. JS 파일에서 가져오기import Swiper from 'swiper';import 'swiper/swiper-bundle.css';   HTML 구조 swiper > swiper-wrappe..

GSAP (The GreenSock Animation Platform): 애니메이션 자바스크립트 라이브러리  Homepage | GSAPGSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.gsap.com    📌 라이브러리 가져오기CDN 방식  Installation | GSAP | Docs & LearningGSAP is "framework agnostic", this means it can be used in React, Webflow, Wordpress, or any other..

변수명 변환 ctrl + shift + t translator - Visual Studio MarketplaceExtension for Visual Studio Code - translate for Koreanmarketplace.visualstudio.com 주석  단을 나누는 주석 ctrl + y Comment Divider - Visual Studio MarketplaceExtension for Visual Studio Code - Divide your code by sections with styled separators.marketplace.visualstudio.com    중첩 주석 ctrl + alt + / Nested Comments - Visual Studio MarketplaceExt..

Font Awesome : 웹에서 아이콘이 필요할 때 사용하는 라이브러리 Font AwesomeThe internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.fontawesome.com    1. html 파일의 태그 안에 태그로 CDN 서비스의 URL 지정버전마다 다름    2. Font Awesome에서 사용할 아이콘의 코드 복사, 붙여넣기오른쪽 상단 코드 모양 => 코드 복사 오른쪽 상단 다운로드 모양 => SVG 파일로 다운로드 태그 변경 가능 (ex. 등)   * 아이콘 제어하기 아이콘 코드에 class ..

스크린 리더가 읽는 순서 확인하기taba11y taba11yVisualise tab order with easechromewebstore.google.com     기본 마크업 보기Web DeveloperCSS ➡ Disable All Styles Web DeveloperDownload the Web Developer extension for Chrome and Firefox.chrispederick.com     페이지의 제목(heading) 구조 확인하기HeadingsMap HeadingsMapTo show, browse and audit (for accessibility and SEO) the headings structurechromewebstore.google.com