나디아 성장 일기

"한빛미디어 서평단 활동을 위해서 책을 협찬 받아 작성된 서평입니다."    들어가며리액트를 어느정도 사용해보니까 단순히 기능을 사용하는 데에서 그치는게 아니라 리액트가 어떻게 작동하는 지 제대로 알아야겠다는 생각이 들었습니다. 특히 최적화가 필요할 때, 무작정 useMemo, useCallback을 사용하기보단 리액트의 렌더링 과정과 성능 개선 원리를 이해하는 것이 더 중요하다는 생각이 들었습니다. 이 책은 리액트의 기본적인 사용법을 넘어서, 리액트의 철학, 렌더링 메커니즘, 최적화 방법, 실전에서의 활용법까지 폭넓게 다룹니다. 단순한 튜토리얼이 아니라 "왜 이런 방식으로 동작하는가?" 에 대한 깊이 있는 설명이 많아 리액트를 제대로 이해하고 싶은 개발자들에게 유용한 책이었습니다.     목차 및 주..

Threadly: 채팅 기반 협업 플랫폼  프로젝트 회고 목차프로젝트 개요진행 과정어려웠던 점 & 해결 과정아쉬운 점 & 개선점배운 점 & 성장한 부분다짐 1. 프로젝트 개요프로젝트명: Threadly프로젝트 소개: 팀 프로젝트 관리를 위한 채팅 기반 협업 플랫폼팀 구성: FE 2인, BE 3인프로젝트 기간: 2025.01.07 ~ 2025.02.05기술 스택(FE)언어/라이브러리TypeScript, React상태 관리Zustand (클라이언트 상태), React-Query (서버 상태)빌드Vite배포GCP VM or AWS S3 + CloudFront스타일링shadcn/ui, Tailwind테스트Jest, MSW (API 모킹)패키지 매니저npm 프로젝트 GitLab Sign in엘리스 트랙에 오신 것..

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