💫 CS

📌 프로세스

• 실행 중인 프로그램의 인스턴스.
• 프로그램이 실행되면 메모리와 자원을 할당받아 프로세스가 됨.

🔍 프로그램 vs 프로세스

항목	프로그램	프로세스
상태	정적	동적
위치	저장장치	메모리
개수	하나	여러 개 가능

🔍 프로세스 vs 스레드

항목	프로세스	스레드
메모리	독립적	공유
통신	IPC 필요	공유 메모리
안정성	오류 격리 가능	오류 전파 가능
예시	브라우저 창	탭들

✅ 프로세스 상태

• New: 생성 중
• Ready: 실행 준비
• Running: 실행 중
• Waiting: I/O 대기
• Terminated: 종료

📎 전이 흐름

New → Ready → Running → Waiting → Ready → Running → Terminated

✅ PCB (Process Control Block)

• 운영체제가 프로세스를 추적하는 데 사용하는 구조체

📎 주요 항목

• PID, 상태, 프로그램 카운터, 레지스터, 메모리, 파일 정보, 스케줄링 정보 등

✅ 프로세스 생성과 소멸

📎 주요 시스템 호출

호출	설명
fork()	부모 복제
exec()	새로운 프로그램 실행
wait()	자식 종료 대기
exit()	종료
kill(pid, sig)	시그널 전송 (종료 등)

📎 생성 흐름

fork() → exec() → exit() → wait()

✅ 상태 전이 다이어그램

stateDiagram-v2
  [*] --> New
  New --> Ready : 생성 완료
  Ready --> Running : CPU 할당
  Running --> Terminated : 종료
  Running --> Ready : 타임슬라이스 종료
  Running --> Waiting : I/O 요청
  Waiting --> Ready : I/O 완료

🔁 요약

1. 프로세스는 실행 중인 프로그램
2. 상태는 New, Ready, Running, Waiting, Terminated
3. PCB는 프로세스의 모든 정보 저장
4. 시스템 호출로 생성/제어/종료
5. 전이와 흐름은 OS가 자동 관리

---

💫 Vercel

1. 로그인

홈페이지에 접속해 github로 로그인한다

2. github에 업로드

vscode 에서 git add commit push gui로 제공해준다.

3. deploy - vercel

---

💫 Tailwind

1. 설치

이 페이지를 따라하면 된다

2. 설치명령어

⚙️ shell - npm (vite ver.)

npm create vite@latest my-project
cd my-project

npm install
npm install tailwindcss @tailwindcss/vite

📝 vite.config.js

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

📝 index.css

@import "tailwindcss";

📝 main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

📝 app.jsx

const App = () => {
  return <div className="bg-amber-300 text-2xl">App</div>;
};

export default App;

⚙️ shell - npm

npm run dev

---

💫 React

🏁 Calendar App with tailwind

📦src
 ┣ 📂assets
 ┣ 📂components
 ┃ ┣ 📜Calendar.jsx
 ┃ ┗ 📜DateCard.jsx
 ┣ 📜App.jsx
 ┣ 📜index.css
 ┣ 📜main.jsx
 ┗ 📜scheduleList.json

📜App.jsx

import Calendar from "./components/Calendar";

const App = () => {
  return (
    <div className="bg-red-100 min-h-screen flex justify-center items-center">
      <Calendar />
    </div>
  );
};

export default App;

📜Calendar.jsx

import DateCard from "./DateCard";
import scheduleList from "../scheduleList.json"

const Calendar = () => {
  return (
    <div className="bg-blue-200 min-w-7xl rounded-2xl shadow p-20">
      <h1 className="bg-white mb-6 text-right font-bold text-4xl p-4 rounded-2xl">
        August, 2025
      </h1>
      <div className="grid grid-cols-7 justify-items-center gap-4">
        {scheduleList.map((value) => (
          <DateCard 
            key={value.date} 
            date={value.date}
            todos={value.todos}
          />
        ))}
      </div>
    </div>
  );
}

export default Calendar;

📜DateCard.jsx

const DateCard = ({ date, todos }) => {
  return (
    <div className="bg-white w-40 h-60 rounded-2xl">
      <div className="bg-red-400 text-2xl font-semibold text-right px-2 rounded-t-2xl">{date}</div>
      <div className="text-lg p-2"></div>
      <div className="text-lg p-2 flex-col gap-2">
        <div>{todos.map((value, idx) => (
          <p key={idx}>{value}</p>
        ))}</div>
      </div>
    </div>
  );
}

export default DateCard;

📜scheduleList.json

[
  {
    "date": 1,
    "todos": [],
    "isSat": false,
    "isHoliday": false
  },
  ...
]

📜main.jsx

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.jsx'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
)