나디아 성장 일기

소프트웨어 개발 방법론: 소프트웨어 개발을 효과적으로 진행하기 위한 계획, 관리, 실행 방법을 정의하는 접근 방식  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..

tailwind.config.ts 파일 항목 content: Tailwind 스타일을 적용할 파일들의 경로를 지정한다. 지정된 파일들에서 사용된 클래스만 찾아서 최적화된 CSS를 생성한다. theme: Tailwind의 기본 스타일을 설정하거나 확장할 수 있다. extend를 사용하면 새로운 스타일을 추가할 수 있다. plugins: Tailwind CSS의 기능을 확장하는 플러그인을 추가할 수 있다. 폼 스타일링 등을 위한 플러그인 등을 추가할 수 있다.import type { Config } from "tailwindcss";const config: Config = { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{..

group-{modifier:class}: 부모 요소의 상태(state)에 따라 자식 요소의 스타일을 동적으로 변경한다.부모 요소가 hover, focus와 같은 상태일 때, 그 상태를 기반으로 자식 요소의 스타일을 변경한다.사용: 인터랙티브 UI(버튼, 카드, 메뉴) 등에서 자식 요소에 동적 스타일링이 필요할 때 사용 group-hover부모 요소에 마우스를 올릴 때 적용group-hover:bg-blue-500group-focus부모 요소가 포커스될 때 적용group-focus:text-green-500group-active부모 요소가 활성화(클릭 등)될 때 적용group-active:scale-105group-disabled부모 요소가 비활성화될 때 적용group-disabled:opacity-50..

리스트 선택자는 map() 함수로 반복 렌더링하는 컴포넌트에 유용하다.짝수/홀수 행 요소, 첫/마지막 요소, 빈 상태의 요소의 스타일을 쉽게 설정할 수 있다.  odd:: 홀수 요소 선택CSS의 nth-child(odd)과 동일하다. 사용: 목록의 홀수 요소에 개별 스타일 적용 첫 번째 두 번째 세 번째  even:: 짝수 요소 선택CSS의 nth-child(even)과 동일하다.사용: 목록의 짝수 요소에 개별 스타일 적용 첫 번째 두 번째 세 번째  first:: 첫 번째 요소 선택사용: 첫 번째 요소에만 다른 스타일 적용 첫 번째 두 번째 세 번째  last:: 마지막 요소 선택사용: 테이블이나 리스트에서 마지막 요소에 특정 스타일 제거 또는 적용 첫 번째 두 번째 마지막 요소 ..

1. animate-bounce: 요소가 위아래로 튀는 애니메이션버튼이나 아이콘에 주목을 끌고 싶을 때 사용Bounce Animation  2. animate-spin: 요소를 회전시키는 애니메이션로딩 스피너 구현 시 사용Spin Animation  3. animate-pulse: 요소가 점차적으로 어두워졌다가 밝아지는 애니메이션 로딩 상태를 표현하거나 데이터가 업데이트되고 있음을 나타낼 때 사용Pulse Animation  4. animate-ping: 중앙에서 원이 확산되는 애니메이션 사용중앙의 고정된 원과 가장자리가 터지는 원 두 개로 구성가장자리가 터지는 원에 해당 클래스를 적용 알림(Notification) 효과처럼 시각적으로 주의를 끌 때 유용      Animation - Tai..

bg-gradient-to-방향 from-색상 (via-중간 색상) to-색상 : 그라데이션 배경 설정 3색 그라데이션   bg-gradient-to-방향: 그라데이션의 방향 설정to-r  →  오른쪽으로 그라데이션to-l  →  왼쪽으로 그라데이션to-t  →  위쪽으로 그라데이션to-b  →  아래쪽으로 그라데이션to-tr  →  오른쪽 위 대각선으로 그라데이션to-bl  →  왼쪽 아래 대각선으로 그라데이션 from-색상: 그라데이션의 시작 색상 설정  via-색상 (선택 사항): 그라데이션의 중간 색상 설정  to-색상: 그라데이션의 끝 색상 설정 2색 그라데이션    Gradient Color Stops - Tailwind CSSUtilities for controlling the col..