나디아 성장 일기

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

파일 시스템 모듈(fs 모듈, FileSystem)Node.js 환경에서 사용할 수 있는 파일 관련 라이브러리Node.js 내장 모듈 (fs, path, os, stream 등)파일을 읽고 쓰거나, 경로를 다루는 작업을 할 때 사용서드파티 라이브러리 (glob, rimraf, mkdirp, fs-extra 등)파일 경로 검색이나 패턴 매칭 같은 고급 작업을 지원하는 라이브러리들npm이나 pnpm을 통해 설치하여 사용할 수 있다. fs 모듈: 파일과 디렉터리를 읽고 쓰고 관리하는 기본적인 Node.js 모듈glob 모듈: 파일 경로를 와일드카드 패턴으로 검색하는 도구fs-extra 모듈: fs 모듈을 확장해 더 편리하게 파일 시스템 작업을 처리하는 라이브러리 fs 모듈: Node.js에서 파일/디렉터리를 ..

Children vs Context API vs 상태 관리 라이브러리 모두 상태나 데이터를 컴포넌트들 간에 전달할 수 있는 기능을 제공한다. 구현하는 방식과 적합한 사용 범위는 다르다.  1. children: 부모 컴포넌트에서 자식 컴포넌트로 UI 요소를 전달하기 위해 사용되는 방식  사용 방식부모 컴포넌트가 자식 요소를 전달하면, 자식 컴포넌트에서 props.children을 통해 해당 요소를 렌더링한다. 적합한 경우주로 동적으로 구성 요소를 전달하거나, 컴포넌트의 내용을 정의할 때 사용된다.// Parent는 요소를 Child로 전달function Parent() { return ( 자식 컴포넌트의 내용 );}// Child는 이를 렌더링function Child(pr..

useMemo(): 계산된 값 메모이제이션값을 다룰 때 사용비싼 계산을 다시 하지 않도록 최적화리렌더링 중에도 이전에 계산된 값을 재사용import React, { useState, useMemo } from 'react';function ExpensiveCalculationExample() { const [count, setCount] = useState(0); const [list, setList] = useState([1, 2, 3, 4, 5]); // 값 메모이제이션 const expensiveResult = useMemo(() => { console.log("Expensive calculation..."); return list.reduce((sum, num) => su..

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. 대시보드 및 보고서   팀의 작업 진행 상황을 한눈에 볼 수 있도록 대시보드를 커스터마이즈할 수 있다...

Heroicons: Tailwind Labs에서 만든 SVG 기반 아이콘 세트 라이브러리깔끔하고 미니멀한 디자인이 특징이며, 주로 React와 Tailwind CSS를 사용하는 프로젝트에서 많이 사용된다.Heroicons는 React 컴포넌트 형태로 아이콘을 제공하여, JavaScript/TypeScript 기반 프레임워크와 쉽게 통합할 수 있다. Heroicons React-icons Tailwind CSS를 사용하는 경우다양한 아이콘 세트와 스타일이 필요한 경우모던하고 심플한 아이콘이 필요할 때기존의 FontAwesome 또는 Material Icons를 사용하던 프로젝트가벼운 패키지가 필요한 경우Tailwind와 무관하게 다양한 아이콘 라이브러리가 필요한 경우   설치 React 프로젝트npm i..

Styled-components: JS 파일 내에서 CSS를 작성하고, React 또는 JavaScript 프레임워크와 통합할 수 있도록 해주는 CSS-in-JS 라이브러리컴포넌트 기반 개발에 적합하며, 스타일을 컴포넌트 단위로 캡슐화하여 관리할 수 있다. 장점CSS와 JavaScript의 통합: CSS를 JavaScript 파일 내에 작성하여 스타일과 로직을 한 곳에서 관리할 수 있다.Scoped 스타일: 스타일이 해당 컴포넌트에만 적용되도록 자동으로 범위가 설정되어 클래스 이름 충돌이 발생하지 않는다.동적 스타일링: props나 상태(state)에 따라 동적으로 스타일을 변경할 수 있다.재사용성: 스타일이 적용된 컴포넌트를 다른 곳에서 재사용할 수 있으며, 상속(Extending Styles)을 통해..

Tailwind CSS 지시어(Directives): CSS 안에서 Tailwind 스타일을 설정하거나 커스터마이징할 수 있는 명령어 기본 스타일 추가(@tailwind), 클래스 재활용(@apply), 스타일 확장(@layer)을 쉽게 구현할 수 있게 도와준다.   @tailwind: Tailwind의 기본 스타일(base), 컴포넌트(components), 유틸리티(utilities) 등을 CSS에 추가한다. /* globals.css */@tailwind base; /* tailwind의 기본적인 리셋 및 기본 스타일 */@tailwind components; /* 클래스 이름을 컴포넌트로 묶음 */@tailwind utilities; /* 모든 유틸리티 클래스 가져옴 */   @apply: Tai..