npm(Node Package Manager) 사용 시 자주 쓰는 명령어

Node.js는 자바스크립트를 서버에서도 실행할 수 있도록 도와주는 런타임 환경입니다. npm은 Node.js의 패키지 관리자 도구로, 필요한 라이브러리나 프레임워크를 쉽게 설치하고 관리할 수 있도록 도와줍니다. 이 둘은 웹 개발에 필수적인 도구이며, 다양한 명령어를 통해 프로젝트를 체계적으로 구성할 수 있습니다. 📁 프로젝트 초기화 및 설정 명령어 설명 npm init package.json 파일을 생성합니다. 프로젝트 이름, 버전, 설명 등을 입력받아 … Read more

PM2 설치부터 기본 사용 방법

PM2란? PM2(Process Manager 2)는 Node.js 애플리케이션을 운영환경에서 관리해주는 프로세스 관리자입니다.주요 기능: PM2 설치 npm install pm2 -g -g 옵션은 글로벌 설치를 의미합니다. 이제 어느 디렉토리에서든 pm2 명령어를 사용할 수 있습니다. PM2 기본 명령어 명령어 설명 예시 pm2 start <파일명> 애플리케이션 실행 pm2 start app.js pm2 start <파일명> –name <앱이름> 앱 이름 지정하여 실행 pm2 start … Read more

타입스크립트 null undefined 체크 방법

TypeScript에서는 값이 존재하지 않음을 나타내는 null과 undefined가 자주 사용됩니다. 그러나 이러한 값들을 적절히 처리하지 않으면 런타임 오류로 이어질 수 있으므로, 사전에 철저한 방어 로직과 문법적 장치를 통해 안정성을 확보하는 것이 중요합니다. 본 문서에서는 이러한 값을 안전하게 다루는 다양한 방법을 전문가 수준에서 체계적으로 정리합니다. 옵셔널 체이닝 (?.) 개요 옵셔널 체이닝은 객체의 프로퍼티에 접근할 때 해당 객체가 … Read more

React19 forwardRef 사용 중단

Deprecated React 19에서는 forwardRef가 더 이상 필요하지 않습니다. 대신 ref를 프로퍼티로 전달하세요. forwardRef는 향후 릴리스에서 더 이상 사용되지 않습니다. 여기에서 자세히 알아보세요. https://react.dev/reference/react/forwardRef 사용 방법 React 19부터 함수 컴포넌트에 대한 프로퍼티로 ref를 사용할 수 있습니다 새로운 함수 컴포넌트에는 더 이상 forwardRef가 필요하지 않으며, 새로운 참조 프로퍼티를 사용하도록 컴포넌트를 자동으로 업데이트하는 코드모드를 게시할 예정입니다. 향후 버전에서는 … Read more

React에서 useReducer를 사용하는 이유

🧠 React에서 useReducer를 사용하는 이유와 TypeScript로 구현하는 방법 현대적인 리액트(React) 애플리케이션에서는 컴포넌트의 상태(state)를 관리할 때 useState 훅을 가장 많이 사용하지만, 상태가 복잡해지거나 여러 상태 값들이 서로 연관되어 있을 경우에는 useReducer 훅을 사용하는 것이 더 적합하며, 이러한 패턴은 Redux와 유사한 액션 기반 상태 관리 방식으로도 확장 가능하다는 점에서 큰 장점을 가집니다. 특히 타입 안정성을 확보하고, 유지보수 … Read more

Git Prune 관련 명령어 정리

Git에서 사용되는 prune 관련 명령어들은 주로 참조되지 않는 객체나 브랜치를 정리하는 데 사용됩니다. 명령어 설명 사용 예시 git prune 로컬 저장소에서 참조되지 않는 객체를 제거합니다. 주로 git gc의 일부분으로 사용됩니다. git prune git remote prune 원격 저장소에서 삭제된 브랜치에 대한 로컬 참조를 제거합니다. git remote prune origin git fetch –prune 원격 저장소에서 데이터를 가져오는 동시에 삭제된 … Read more

CSS에서 위치 지정하는 방법

📌 CSS 위치 지정 방법 (position 속성 완벽 정리) CSS에서 요소의 위치를 지정하는 방법에는 여러 가지 옵션이 있습니다. position 속성은 요소를 문서의 흐름(Flow)에서 어떻게 배치할지를 결정합니다. 이 글에서는 static, relative, absolute, fixed, sticky의 차이점을 설명하고, 각 옵션별로 예제를 제공합니다. 📌 1. position: static (기본값) 👉 문서의 기본 흐름을 따르며, 위치 조정이 불가능한 상태 ✅ static은 … Read more

CSS !important 개념

CSS !important 개념 정리 CSS에서 !important는 특정 스타일 규칙의 우선순위를 최대로 높여, 다른 어떤 스타일 규칙보다 먼저 적용되도록 합니다.이것은 기본적인 스타일 우선순위를 무시하고, 더 높은 우선순위를 가집니다. 🔹 !important의 동작 방식 !important가 적용된 CSS 속성은 다른 모든 스타일 규칙을 무시하고 강제로 적용됩니다.특히 다음을 덮어씁니다: 📌 예제: ✅ 결과적으로

태그의 색상은 파란색(blue)이 됩니다. 🔹 CSS … Read more

HTTP 버전 정리

📌 HTTP/0.9 (1991년) – 최초의 HTTP 📌 HTTP/1.0 (1996년, RFC 1945) – 최초의 공식 표준 📌 HTTP/1.1 (1997년, RFC 2616) – 현재까지 널리 사용 📌 HTTP/2 (2015년, RFC 7540) – 성능 대폭 개선 📌 HTTP/3 (2022년, RFC 9114) – 최신 버전, QUIC 기반 📌 HTTP 버전별 상세 비교표 버전 출시 연도 주요 특징 연결 방식 … Read more

React 18 vs React 19 비교

React 19는 React 18에서 중요한 성능 개선과 새로운 기능이 추가된 버전입니다. 두 버전 간의 주요 차이점을 기능별로 비교해 보겠습니다. 핵심 차이점 기능 React 18 React 19 Concurrent Rendering (동시성 렌더링) useTransition, useDeferredValue 도입 자동 최적화된 동시성 처리 (별도 설정 없이 가능) 비동기 상태 관리 기존 useState, useReducer로 직접 관리 useActionState, useOptimistic 도입 비동기 데이터 가져오기 … Read more