React_ npm module @types 의 의미

보통 무의식적으로 npm i ~  이렇게 필요한 모듈을 설치할때가 많았다.

근데 구글링 해서 찾아보면 npm i --save , npm i --save -dev 이렇게 사용해서 설치하는 경우를 보았는데 뭐가 다른건지 궁금해졌다.

그래서 한번 찾아보았다.

밑의 사이트에서 설명을 잘 해놓은듯 하다.

 

npm init 하여 설치할때 npm 설치를 관리를 해주는 역할이기 때문에 새로운 프로젝트를 시작하더라도 쉽게 다운받았던 모듈들을 npm install 로 받을 수 있는걸 처음 안것 같다.

이렇게 좋은 시스템이였구나 ..!

 

다시한번 공부하는 계기가 되었다.

 

그렇다면 React 의 NPM 에 대해 한번 알아보자 !!!

 

1. React에서 npm 사용법

✅ npm이란?

**npm(Node Package Manager)**은 JavaScript 패키지(라이브러리, 모듈)를 관리하는 도구입니다.
React 프로젝트에서 다양한 라이브러리를 쉽게 설치하고 사용할 수 있습니다.

✅ npm 사용법

(1) npm 설치 확인

터미널에서 npm이 설치되었는지 확인합니다.

npm -v

 

(2) React 프로젝트 생성

React 프로젝트를 생성하려면 다음 명령어를 사용합니다.

npx create-react-app my-app cd my-app npm start

 

📌 설명

• npx create-react-app my-app → React 프로젝트 생성
• cd my-app → 프로젝트 폴더로 이동
• npm start → 개발 서버 실행

(3) npm 패키지 설치

예를 들어, axios(HTTP 요청 라이브러리)를 설치하려면:

npm install axios

 

설치 후 package.json 파일에 자동으로 추가됩니다.

(4) npm 패키지 삭제

npm uninstall axios

(5) npm 패키지 전체 업데이트

npm update

 

(6) 개발 환경에서만 사용할 패키지 설치 (--save-dev)

개발 도구(ex: ESLint)를 설치할 때 사용합니다.

npm install eslint --save-dev

 

 

그렇다면 @Types 의 의미에 대해 알아보도록 하자!!

 

 

2. module @types 의 의미 및 사용법

✅ @types란?

• @types는 TypeScript에서 사용할 수 있도록 제공되는 타입 정의 파일입니다.
• JavaScript 라이브러리에는 원래 타입 정보가 없지만, @types를 설치하면 TypeScript에서도 타입을 사용할 수 있습니다.

✅ @types 사용 예제

(1) @types/react 설치

React를 TypeScript에서 사용하려면 @types/react를 설치해야 합니다.

npm install --save-dev @types/react

 

📌 설명

• --save-dev → 개발용 패키지로 설치
• React 관련 타입이 자동으로 추가됨

(2) @types/node 설치

Node.js 관련 타입을 사용하려면

npm install --save-dev @types/node

 

예를 들어, Node.js의 fs 모듈을 TypeScript에서 사용하면 자동으로 타입 지원을 받을 수 있습니다.

(3) @types/express 설치 (Express.js 타입 지원)

npm install --save-dev @types/express

 

TypeScript에서 express를 사용할 때 타입 오류를 방지할 수 있습니다.

 

요약해보자면,

3. 정리

개념설명예제

npm	JavaScript 패키지 관리자	npm install axios
@types	TypeScript에서 라이브러리의 타입 정보를 제공	npm install --save-dev @types/react

✅ npm을 사용하면 React 및 다양한 라이브러리를 쉽게 설치/관리 가능
✅ TypeScript 사용 시, @types 패키지를 설치하면 타입 지원이 가능

🚀 즉, React에서 npm을 활용하면 개발 속도가 빨라지고, TypeScript와 함께 사용하면 타입 안정성이 향상됩니다!

 

 

 

그럼, 내가 겪은 styled-components 에 대한 에러 문제를 한번 해결해보자 !

 

styled-components 에러

Could not find a declaration file for module 'styled-components'.
👉 'styled-components' 모듈에 대한 선언 파일을 찾을 수 없습니다.

 

💊 에러 해결

왜 이런 문제가 발생하나 했더니 TypeScript가 styled-components와 연관된 모듈에 대한 선언 파일을 찾이 못하면 이런 문제가 발생하는 듯하다. 아마 전에 한 번도 TypeScript를 써본 적이 없어서 처음 보는 것이었나보다.

npm i --save-dev @types/styled-components

 

이 부분은 typescript 를 사용하는 프로젝트에 모듈을 설치 @types 을 붙이는 이유는 내부 코드에 대한 type 이 정의되어 있지 않아 해당 라이브러리를 들고 와서 사용할 때 TypeScript에서 type 추론이 불가능하기 때문이다

 

 

그럼 왜 --save-dev 이 부분을 사용하는 이유는 무엇인가 ??

 

--save-dev의 의미

npm i --save-dev @types/styled-components

 

위 명령어에서 **--save-dev**는 해당 패키지를 개발 의존성(Development Dependency)으로 설치하겠다는 의미입니다.

 

 

1. --save-dev vs --save 차이점

옵션의미설치된 패키지 위치

--save-dev	개발 중에만 필요한 패키지	devDependencies (개발 환경 전용)
--save (기본값)	프로덕션(실제 서비스)에서도 필요한 패키지	dependencies (운영 환경 포함)

 

2. 예제: @types/styled-components의 --save-dev 사용 이유

• styled-components는 React에서 스타일을 적용하는 라이브러리
• @types/styled-components는 TypeScript에서 사용될 타입 정보 제공
• 런타임이 아니라 개발 중에만 필요하므로 --save-dev로 설치

npm install styled-components  # 운영 환경에서 사용 (dependencies)
npm install --save-dev @types/styled-components  # 개발 환경에서만 사용 (devDependencies)

 

 

3. package.json에서 확인

설치 후, package.json 파일을 열어보면 다음과 같이 기록됩니다.

 

{
  "dependencies": {
    "styled-components": "^5.3.10"
  },
  "devDependencies": {
    "@types/styled-components": "^5.1.26"
  }
}

 

📌 dependencies → 실제 실행되는 앱에서 사용
📌 devDependencies → 개발 중에만 필요 (빌드 과정에서만 사용)

 

4. --save-dev가 필요한 패키지 종류

📌 개발 중에만 필요한 도구들

• TypeScript 타입 정의 (@types/react, @types/node, @types/express 등)
• ESLint, Prettier 같은 코드 스타일 도구
• Jest, Cypress 같은 테스트 도구
• Webpack, Babel 같은 번들러

📌 운영 환경에서도 필요한 패키지들

• React, Express, styled-components 같은 실제 실행되는 라이브러리

---

5. 결론

🚀 --save-dev는 개발 중에만 필요한 패키지를 설치할 때 사용
🚀 dependencies는 실제 운영 환경에서도 사용되는 패키지
🚀 @types/styled-components는 런타임이 아니라 개발 시 타입 지원을 위해 필요하므로 --save-dev로 설치

 

 

별책부록

 

그래서 npm은 모듈의 추가, 삭제 뿐만아니라 프로젝트의 관리도 해준다.

$npm init

 

을 하면 프로젝트를 관리하기 위한 package.json 파일이 생성된다.

 

그 다음에

$npm install --save [모듈이름]

 

으로 모듈을 설치하면 package.json에는 설치한 모듈과 버전이 기록된다.

dependencies라는 항목이 바로 그녀석인데요. 이 프로젝트에 연관된 모듈들의 목록이 들어있죠.

나중에 다른 곳에 해당 프로젝트를 가져오더라도 모든 모듈을 일일이 설치할 필요없이

$npm install만 입력하면 dependencies 항목을 기반으로 필요한 모듈을 모두 자동으로 설치합니다. 

$npm install --save-dev [모듈이름]

 

으로 설치하는것은 모듈을 설치할 때 package.json 내의 devDependencies 항목에 설치한 모듈과 버전을 넣는 것을 뜻하는데

dev로 시작되는 이름에서 볼 수 있듯이 개발용으로 쓸 경우 devDependencies에 기록한다. 

 

가령 이런 경우겠죠. 제품의 릴리즈나 구동시 꼭 필요한 모듈의 경우 --save 옵션으로 dependencies 항목에 기록하고

제품의 개발시에 테스트를 위해서 필요한 모듈이긴 한데 실제 릴리즈시에는 필요없는 모듈의 경우 --save-dev로 devDependencies 항목에 넣는게 맞겠네요.

자. 마지막으로 이렇게 기록된 모듈 항목들을 설치할 때는 어떻게 쓸까? 

그냥 $npm install 이라 하면 될까?

$npm install이라고 쓰면 dependencies, devDependencies 모든 모듈을 설치한다. 그래서 dependencies만 설치하려면 

$npm install --only=prod[uction]

devDependencies만 설치하려면 

$npm install --only=dev[elopment]

 

로 쓴다.