Node.js와 npm을 윈도우에 설치하신 후의 과정

Node.js와 npm을 윈도우에 설치하신 후의 과정

Node.js와 npm을 윈도우에 설치하신 후의 과정을 안내해 드립니다. Node.js 설치 프로그램을 실행하셨다면, npm도 함께 설치되었을 것입니다. 이제 다음 단계를 따라 진행합니다.:

1. 설치 확인:
   • 명령 프롬프트(CMD)를 실행합니다.
   • 다음 명령어를 입력하여 설치가 제대로 되었는지 확인합니다: 
   • Copy
     node --version npm --version
   각 명령어 실행 후 버전 번호가 표시되면 설치가 성공적으로 완료된 것입니다.
2. 프로젝트 디렉토리 생성:
   • 원하는 위치에 새 폴더를 만듭니다 (예: C:\Projects\favicon-generator).
   • CMD에서 해당 폴더로 이동합니다:
     Copy

     cd C:\Projects\favicon-generator
3. React 프로젝트 생성:
   • 다음 명령어를 실행하여 새 React 프로젝트를 생성합니다:
     Copy

     npx create-react-app favicon-generator
   • 프로젝트 생성이 완료되면 해당 폴더로 이동합니다:
     Copy

     cd favicon-generator
4. 필요한 추가 패키지 설치:
   • Tailwind CSS를 사용하고 있으므로 이를 설치합니다:
     Copy

     npm install tailwindcss postcss autoprefixer npx tailwindcss init -p
5. Tailwind CSS 설정:
   • tailwind.config.js 파일을 열고 다음과 같이 수정합니다:
     javascript

     Copy

     module.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [], }
6. FaviconGenerator 컴포넌트 추가:
   • src 폴더에 FaviconGenerator.js 파일을 생성하고 이전에 제공된 코드를 붙여넣습니다.
7. App.js 수정:
   • src/App.js 파일을 열고 다음과 같이 수정합니다:
     javascript

     Copy

     import React from 'react'; import FaviconGenerator from './FaviconGenerator'; function App() { return ( <div className="App"> <FaviconGenerator /> </div> ); } export default App;
8. 개발 서버 실행:
   • 다음 명령어로 개발 서버를 시작합니다:
     Copy

     npm start

이 과정을 완료하면 브라우저에서 http://localhost:3000으로 접속하여 파비콘 생성기를 사용할 수 있습니다.

이 방법은 로컬에서 React 앱을 개발하고 실행하는 방법입니다. 블로그에 직접 통합하려면 추가적인 단계가 필요할 수 있습니다. 블로그 플랫폼에 따라 적절한 통합 방법을 선택해야 합니다.