1. Vite 프로젝트 초기화
    npm create vite@latest my_project
    cd my_project

  2. tailwindcss 설치
    npm install -D tailwindcss postcss autoprefixer
    npx tailwindcss init -p

  3. tialwindcss 설정 파일 변경
    => tailwind.config.js
    module.exports = {
    content: ["./index.html", "./src/*/.{js,ts,jsx,tsx}"],
    theme: {

     extend: {},

    },
    plugins: [],
    }

  4. src/index.css tailwind 지시어 추가
    @tailwindcss base;
    @tailwindcss components;
    @tailwindcss utilites;

'프로그래밍 > react' 카테고리의 다른 글

리엑트 tailwindcss 프로젝트 설정  (0) 2025.08.14
React 모듈 설치 여부 확  (0) 2025.06.29
리액트 프로젝트 생성  (0) 2025.04.06

react 프로젝트 생성 실행 순서

  1. npm create-react-app projectName --template typescript

  2. chance luxon @fontsource/material-icons 설치
    npm i chance luxon

  3. 개발 의존성
    npm i -D @types/chance @types/luxon

  4. tailwindcss 설치
    postcss, autoprefixer도 함꼐 설치 해 준다.
    npm i -D postcss autoprefixer tailwindcss@3

  5. tailwindcss 구성
    npx tailwindcss init -p

  6. daisyui 설치
    tailwindcss는 저수준 CSS 컴포넌트를 지원하지 않으므로, daisyui를 설치
    npm i -D daisyui@3

  7. @tailwindcss/line-clamp 설치
    npm i -D @tailwindcss/line-clamp

  8. tailwind.config.js 설정

    1) content 설정
    content:["./src/*/.{js.jsx,ts,tsx}"]

    2) safelist, plugins 설정
    /*
    line-clamp로 시작하는 클래스 이름을 동적으로 조합하더라도
    정상으로 동작하도록 트리 쉐이킹 대상에서 제거하는 코드
    */
    safelist : [{pattern:/^line-clamp-(\d+)$/}]
    3) line-clamp, daisyui 플러그인 등록
    plugins : [require('@tailwindcss/line-clamp'), require('daisyui')]

    /* @type {import('tailwindcss').Config} _/
    module.exports = {
    content: ["./src/*
    /_.{js.jsx,ts,tsx}"],
    theme: {
    extend: {},
    },
    safelist:[{pattern:/^line-clamp-(\d+)$/}]
    plugins: [require('@tailwindcss/line-clamp'), require('daisyui')],
    }

  9. index.css에 tailwindcss 기능 반영
    index.css 상단에 base, components, utilities 추가
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

  10. 타입 스크립트 코드 작성

'프로그래밍 > react' 카테고리의 다른 글

Vite에서 TailWindCss 설치하기  (0) 2025.08.20
React 모듈 설치 여부 확  (0) 2025.06.29
리액트 프로젝트 생성  (0) 2025.04.06
  1. 터미널 열기: 프로젝트 디렉토리에서 터미널을 열거나 VS Code와 같은 IDE에서 터미널을 사용합니다.
  2. npm list 명령어 실행: 터미널에 npm list를 입력하고 엔터 키를 누릅니다.
  3. 결과 확인: 명령어 실행 결과로 설치된 모듈 목록이 표시됩니다. 만약 특정 모듈이 목록에 없다면, 해당 모듈은 설치되지 않은 것입니다.

참고사항

  • npm list --depth=0: 최상위 레벨의 모듈만 표시합니다.
  • npm list --depth=1: 한 단계 아래의 모듈까지 표시합니다.
  • npm list --depth=2: 두 단계 아래의 모듈까지 표시합니다.

'프로그래밍 > react' 카테고리의 다른 글

Vite에서 TailWindCss 설치하기  (0) 2025.08.20
리엑트 tailwindcss 프로젝트 설정  (0) 2025.08.14
리액트 프로젝트 생성  (0) 2025.04.06
  1. ES6 코드를 ES5 코드로 변환 해 주는 사이트
    https://babeljs.io/repl
  2. ES6_TEST directory 생성
    npm init 실행
  3. babel 요소 설치
    npm install --save-dev @babel/core @babel/cli @babel/preset-env core-js
  4. npm 명령어
    1) npm init : 프로젝트 초기화
    2) npm install : package.json의 패키지 설치
    3) npm install --save [패키지명] : 패키지를 프로젝트 의존성으로 추가
    4) npm install --save-dev [패키지명] : 패키지를 프로젝트 개발 의존성 수준으로 추가
    5) npm install --global [패키지명] : 패키지를 전역 수준으로 추가
    6) npm update --save : 프로젝트 패키지 업데이트
    7) npm run [스크립트명] : package.json의 스크립트 명령 실행
    8) npm uninstall --save [패키지명] : 패키지 삭제
    9) npm cache clean : 캐시 삭제
  1. 호스트명 확인
    mycomputer:~$hostname
    mycomputer

  2. 호스트명 변경
    mycomputer:~$sudo hostnamectl set-hostname ubuntudev
    [sudo] mycomputer 암호 :

  3. 터미널 종료 혹은 시스템 재부팅 후

  4. 호스트명 확인
    호스트명이 변경 된 것을 확인 할 수 있다.
    ubuntudev:~$hostname
    ubuntudev

'프로그래밍 > 우분투' 카테고리의 다른 글

우분투 설치 후 root 비밀번호 변경  (0) 2025.05.31
mysql 백업 및 복원 방법  (0) 2022.07.13
jenkins 셋팅  (0) 2022.07.06

mycomputer:~바탕화면$sudo password root
[sudo]mycomputer 암호:
새 암호 :
새 암호 재입력 :

mycomputer:~바탕화면$su
암호 :
root@mycomputer:/home/mycomputer/바탕화면#

루트로 변경 되면 $ 표시가 #으로 변경 됨.

'프로그래밍 > 우분투' 카테고리의 다른 글

우분투 호스트명 변경  (0) 2025.05.31
mysql 백업 및 복원 방법  (0) 2022.07.13
jenkins 셋팅  (0) 2022.07.06
  1. 리액트 프로젝트 생성
    npx create-react-app [생성할 리액트명]

  2. VSCode 설치
    https://code.visualstudio.com/Download

  3. 프로젝트 내에서 vscode 실행
    d:\work\frontend\testapp>code .

  4. VSCode 터미널에서 리액트 프로젝트 실행
    npm start

  5. tailwind CSS 설치
    npm install -D tailwindcss@3.4.17 postcss autoprefixer

npx tailwindcss init -P

'프로그래밍 > react' 카테고리의 다른 글

Vite에서 TailWindCss 설치하기  (0) 2025.08.20
리엑트 tailwindcss 프로젝트 설정  (0) 2025.08.14
React 모듈 설치 여부 확  (0) 2025.06.29

1. 윈도 터미널을 실행 할 때 관리자 권한으로 실행한다.

2. 터미널(관리자) 실행 후 커맨드 창에 ExecutionPolicy 를 입력한다.

Restricted로 출력 되면 기본 실행 정책으로 개별 명령을 허용하지만 스크립트를 실행하지 않는다는 의미이다.

3. 커맨드 창에 Set-ExecutionPolicy Unrestricted 혹은 Set-ExecutionPolicy RemoteSigned를 입력 한다.

4. 커맨드 창에 ExecutionPolicy를 입력 한다. 

1) Unrestricted 

가. 서명되지 않은 스크립트를 실행할 수 있음

나. 악의적인 스크립트를 실행할 위험이 있음

2) RemoteSigned

가. 스크립트를 실행 가능

나. 이미 실행한 스크립트와 로컬 컴퓨터에 작성한 스크립트에는 디지털 서명이 필요 없음

 

'프로그래밍 > 정보보안' 카테고리의 다른 글

Apache Log4j 보안 업데이트 권고  (0) 2022.09.01
HTTP trace 제거  (0) 2019.04.10
개인정보보호 보안 가이드 - 행정자치부  (0) 2015.04.23

+ Recent posts