사랑하기 위해 필요한 것들

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 프로젝트 생성 실행 순서

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. 타입 스크립트 코드 작성

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

참고사항

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

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

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

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

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

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

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

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

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

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

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

1) Unrestricted 

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

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

2) RemoteSigned

가. 스크립트를 실행 가능

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