나디아 성장 일기

PWA(Progressive Web App): 사용자가 모바일 앱처럼 사용할 수 있는 웹 사이트 웹 기술(HTML, CSS, Javascript)로 모바일 네이티브 앱과 비슷하게 만들 수 있는 기술    PWA의 주요 특징진보적(Progressive)브라우저에 기능에 따라 작동하며, 최신 브라우저에서는 추가 기능을 제공반응형(Responsive)모든 디바이스(모바일, 태블릿, 데스크톱 등)에서 적절히 작동앱 같은 사용자 경험(App-like Experience)네이티브 애플리케이션과 유사한 UI/UX 제공 앱스토어 없이 홈 화면에 설치 가능오프라인 기능(Offline Functionality)Service Worker를 사용해 네트워크 상태와 관계없이 작동 가능캐싱된 데이터를 통해 오프라인에서도 콘텐츠를..

TDD (Test Driven Development): 테스트 코드를 먼저 작성하고, 그 테스트를 통과하는 실제 코드를 작성하는 개발 방법론짧은 개발 주기의 반복에 의존하는 개발 프로세스로, 애자일 방법론 중 하나인 eXtream Programming(XP)의 'Test-First' 개념에 기반을 둔 단순한 설계를 중요시한다.소프트웨어의 품질, 성능, 신뢰성을 평가하는 과정프로그램 실행을 통해 오류를 발견하고 수정하는 활동예상 결과와 실제 결과를 비교 및 검증eXtream Programming(XP) 미래에 대한 예측을 최대한 하지 않고, 지속적으로 프로토타입을 완성하는 애자일 방법론 중 하나이다. 이 방법론은 추가 요구사항이 생기더라도, 실시간으로 반영할 수 있다.    TDD의 기본 원칙아래 과정은 ..

소프트웨어 개발 방법론: 소프트웨어 개발을 효과적으로 진행하기 위한 계획, 관리, 실행 방법을 정의하는 접근 방식  1. 구조적 방법론 (Structured Development): 시스템을 기능별로 나누어 개발하고, 이를 통합하는 방법론분할과 정복 접근 방식을 사용한다.프로세스 중심의 하향식 방법론으로, Nassi-Shneiderman 차트를 사용하여 구조적 프로그래밍을 표현한다.복잡한 조건을 시각적으로 명확히 식별할 수 있어 논리의 기술에 중점을 둔다.  2. 정보공학 방법론 (Information Engineering Development): 대형 정보 시스템을 체계적으로 개발하는 방법론관리 절차와 작업 기법을 체계화하여 개발 주기를 활용한다.대형 프로젝트를 수행하는 데 유용하며, 시스템의 개발 및..

Jira: 작업 추적 및 관리하는데 사용하는 소프트웨어 개발 도구 애자일(Agile) 방법론을 기반으로 하는 팀에게 적합하며, 스크럼(Scrum)과 칸반(Kanban) 등 다양한 프레임워크를 지원한다.   Jira의 주요 특징 1. 이슈 추적 및 관리   Jira는 이슈(Tasks, Bugs, Features 등)를 생성하고, 우선순위를 설정하며, 상태를 추적할 수 있다.   이슈는 특정 프로젝트 내에서 팀원 간 할당되고 관리된다.    2. 프로젝트 보드   스크럼 보드: 스프린트 계획 및 진행 상황을 시각화할 수 있다.   칸반 보드: 워크플로우와 작업 상태를 실시간으로 추적할 수 있다.    3. 대시보드 및 보고서   팀의 작업 진행 상황을 한눈에 볼 수 있도록 대시보드를 커스터마이즈할 수 있다...

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