feat: [academy] 서버지식 백과사전 SVG 이미지 12종 추가
- 1.svg: 서버룸 히어로 이미지 - 2.svg: SAM 5-서비스 건물 지도 - 3.svg: 요청 처리 흐름도 - 4.svg: Linux 사용자/그룹 조직도 - 5.svg: drwxrwxr-x 권한 해독 인포그래픽 - 6.svg: umask 계산법 (666 - 022 = 644) - 7.svg: 사고 타임라인 5단계 - 8.svg: Git 배포 택배 비유 - 9.svg: Hook 동작 흐름 + 권한 체크포인트 - 10.svg: 금지 작업 경고 카드 - 11.svg: 올바른 대응 절차 4단계 - 12.svg: 안전/위험 명령 비교 테이블
This commit is contained in:
김보곤
145
public/images/academy/server-knowledge/1.svg
Normal file
145
public/images/academy/server-knowledge/1.svg
Normal file
@@ -0,0 +1,145 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
|
||||
<defs>
|
||||
<linearGradient id="bg1" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#0f1f0f"/>
|
||||
<stop offset="100%" style="stop-color:#0a1a0a"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="rack" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#334155"/>
|
||||
<stop offset="100%" style="stop-color:#1e293b"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="glow" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color:#22c55e;stop-opacity:0.8"/>
|
||||
<stop offset="50%" style="stop-color:#22c55e;stop-opacity:0.2"/>
|
||||
<stop offset="100%" style="stop-color:#22c55e;stop-opacity:0.8"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<!-- Background -->
|
||||
<rect width="800" height="600" fill="url(#bg1)"/>
|
||||
<!-- Floor -->
|
||||
<rect x="0" y="470" width="800" height="130" fill="#0c1a0c" opacity="0.6"/>
|
||||
<line x1="0" y1="470" x2="800" y2="470" stroke="#22c55e" stroke-width="1" opacity="0.2"/>
|
||||
<!-- Ambient glow -->
|
||||
<circle cx="230" cy="280" r="180" fill="#22c55e" opacity="0.04"/>
|
||||
<circle cx="580" cy="300" r="150" fill="#22c55e" opacity="0.03"/>
|
||||
<!-- Server Rack Left -->
|
||||
<g transform="translate(100, 100)">
|
||||
<rect width="120" height="340" rx="6" fill="url(#rack)" stroke="#475569" stroke-width="2"/>
|
||||
<rect x="8" y="15" width="104" height="28" rx="3" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<circle cx="100" cy="29" r="4" fill="#22c55e" opacity="0.9"/>
|
||||
<circle cx="88" cy="29" r="3" fill="#16a34a" opacity="0.5"/>
|
||||
<rect x="15" y="22" width="40" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="15" y="28" width="55" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="8" y="52" width="104" height="28" rx="3" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<circle cx="100" cy="66" r="4" fill="#22c55e" opacity="0.9"/>
|
||||
<circle cx="88" cy="66" r="3" fill="#22c55e" opacity="0.3"/>
|
||||
<rect x="15" y="59" width="45" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="15" y="65" width="50" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="8" y="89" width="104" height="28" rx="3" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<circle cx="100" cy="103" r="4" fill="#22c55e" opacity="0.9"/>
|
||||
<rect x="15" y="96" width="35" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="15" y="102" width="48" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="8" y="126" width="104" height="28" rx="3" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<circle cx="100" cy="140" r="4" fill="#16a34a" opacity="0.7"/>
|
||||
<rect x="15" y="133" width="50" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="15" y="139" width="42" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="8" y="163" width="104" height="28" rx="3" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<circle cx="100" cy="177" r="4" fill="#22c55e" opacity="0.9"/>
|
||||
<rect x="15" y="170" width="38" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="15" y="176" width="52" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="8" y="200" width="104" height="28" rx="3" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<circle cx="100" cy="214" r="4" fill="#22c55e" opacity="0.6"/>
|
||||
<rect x="15" y="207" width="44" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="15" y="213" width="36" height="3" rx="1" fill="#475569"/>
|
||||
<!-- Bottom ventilation -->
|
||||
<rect x="15" y="260" width="90" height="2" rx="1" fill="#475569" opacity="0.5"/>
|
||||
<rect x="15" y="268" width="90" height="2" rx="1" fill="#475569" opacity="0.5"/>
|
||||
<rect x="15" y="276" width="90" height="2" rx="1" fill="#475569" opacity="0.5"/>
|
||||
<rect x="15" y="284" width="90" height="2" rx="1" fill="#475569" opacity="0.5"/>
|
||||
<rect x="15" y="292" width="90" height="2" rx="1" fill="#475569" opacity="0.5"/>
|
||||
<text x="60" y="325" font-family="Arial,sans-serif" font-size="10" fill="#64748b" text-anchor="middle">SERVER</text>
|
||||
</g>
|
||||
<!-- Server Rack Right -->
|
||||
<g transform="translate(260, 120)">
|
||||
<rect width="110" height="320" rx="6" fill="url(#rack)" stroke="#475569" stroke-width="2"/>
|
||||
<rect x="8" y="15" width="94" height="28" rx="3" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<circle cx="90" cy="29" r="4" fill="#22c55e" opacity="0.8"/>
|
||||
<rect x="15" y="22" width="40" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="15" y="28" width="50" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="8" y="52" width="94" height="28" rx="3" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<circle cx="90" cy="66" r="4" fill="#16a34a" opacity="0.7"/>
|
||||
<rect x="15" y="59" width="45" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="15" y="65" width="38" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="8" y="89" width="94" height="28" rx="3" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<circle cx="90" cy="103" r="4" fill="#22c55e" opacity="0.9"/>
|
||||
<rect x="15" y="96" width="42" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="15" y="102" width="55" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="8" y="126" width="94" height="28" rx="3" fill="#1e293b" stroke="#334155" stroke-width="1"/>
|
||||
<circle cx="90" cy="140" r="4" fill="#22c55e" opacity="0.9"/>
|
||||
<rect x="15" y="133" width="48" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="15" y="139" width="40" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="15" y="180" width="80" height="2" rx="1" fill="#475569" opacity="0.5"/>
|
||||
<rect x="15" y="188" width="80" height="2" rx="1" fill="#475569" opacity="0.5"/>
|
||||
<rect x="15" y="196" width="80" height="2" rx="1" fill="#475569" opacity="0.5"/>
|
||||
<text x="55" y="305" font-family="Arial,sans-serif" font-size="10" fill="#64748b" text-anchor="middle">DATABASE</text>
|
||||
</g>
|
||||
<!-- Connection lines (animated feel) -->
|
||||
<path d="M 380 280 C 420 280, 430 260, 470 250" stroke="#22c55e" stroke-width="2.5" fill="none" opacity="0.6" stroke-dasharray="6,3"/>
|
||||
<path d="M 380 300 C 430 300, 450 310, 470 320" stroke="#22c55e" stroke-width="2" fill="none" opacity="0.4" stroke-dasharray="4,4"/>
|
||||
<path d="M 380 260 C 420 240, 440 230, 470 230" stroke="#16a34a" stroke-width="1.5" fill="none" opacity="0.5" stroke-dasharray="5,3"/>
|
||||
<!-- Data packets on lines -->
|
||||
<circle cx="420" cy="268" r="4" fill="#22c55e" opacity="0.8"/>
|
||||
<circle cx="450" cy="308" r="3" fill="#22c55e" opacity="0.6"/>
|
||||
<circle cx="440" cy="238" r="3" fill="#16a34a" opacity="0.7"/>
|
||||
<!-- Connection hub -->
|
||||
<circle cx="470" cy="280" r="15" fill="#166534" stroke="#22c55e" stroke-width="2" opacity="0.8"/>
|
||||
<circle cx="470" cy="280" r="6" fill="#22c55e" opacity="0.5"/>
|
||||
<!-- Lines from hub to laptop -->
|
||||
<path d="M 485 275 C 510 260, 530 260, 550 270" stroke="#22c55e" stroke-width="2.5" fill="none" opacity="0.6" stroke-dasharray="6,3"/>
|
||||
<path d="M 485 285 C 520 300, 540 310, 555 310" stroke="#22c55e" stroke-width="2" fill="none" opacity="0.4" stroke-dasharray="4,4"/>
|
||||
<!-- Laptop / User side -->
|
||||
<g transform="translate(540, 200)">
|
||||
<!-- Laptop screen -->
|
||||
<rect x="0" y="40" width="140" height="95" rx="6" fill="#1e293b" stroke="#475569" stroke-width="2"/>
|
||||
<rect x="6" y="46" width="128" height="83" rx="3" fill="#0f172a"/>
|
||||
<!-- Screen content -->
|
||||
<rect x="14" y="55" width="50" height="10" rx="2" fill="#22c55e" opacity="0.3"/>
|
||||
<rect x="14" y="70" width="80" height="4" rx="1" fill="#334155"/>
|
||||
<rect x="14" y="78" width="65" height="4" rx="1" fill="#334155"/>
|
||||
<rect x="14" y="86" width="72" height="4" rx="1" fill="#334155"/>
|
||||
<rect x="14" y="94" width="55" height="4" rx="1" fill="#334155"/>
|
||||
<rect x="14" y="102" width="90" height="4" rx="1" fill="#22c55e" opacity="0.15"/>
|
||||
<rect x="14" y="110" width="70" height="4" rx="1" fill="#334155"/>
|
||||
<!-- Laptop base -->
|
||||
<rect x="-10" y="135" width="160" height="8" rx="3" fill="#334155"/>
|
||||
<!-- Green indicator on screen -->
|
||||
<circle cx="122" cy="58" r="4" fill="#22c55e" opacity="0.7"/>
|
||||
</g>
|
||||
<!-- User silhouette -->
|
||||
<g transform="translate(580, 120)">
|
||||
<!-- Head -->
|
||||
<circle cx="30" cy="30" r="20" fill="#475569"/>
|
||||
<!-- Body -->
|
||||
<rect x="10" y="52" width="40" height="40" rx="8" fill="#334155"/>
|
||||
<!-- Arms reaching to laptop -->
|
||||
<line x1="10" y1="65" x2="-10" y2="105" stroke="#475569" stroke-width="7" stroke-linecap="round"/>
|
||||
<line x1="50" y1="65" x2="70" y2="105" stroke="#475569" stroke-width="7" stroke-linecap="round"/>
|
||||
</g>
|
||||
<!-- Floating data indicators -->
|
||||
<g opacity="0.6">
|
||||
<rect x="430" y="180" width="35" height="16" rx="3" fill="#166534"/>
|
||||
<text x="448" y="192" font-family="monospace" font-size="8" fill="#22c55e" text-anchor="middle">GET</text>
|
||||
<rect x="390" y="340" width="45" height="16" rx="3" fill="#166534"/>
|
||||
<text x="413" y="352" font-family="monospace" font-size="8" fill="#22c55e" text-anchor="middle">POST</text>
|
||||
<rect x="500" y="350" width="35" height="16" rx="3" fill="#166534"/>
|
||||
<text x="518" y="362" font-family="monospace" font-size="8" fill="#22c55e" text-anchor="middle">200</text>
|
||||
</g>
|
||||
<!-- Title -->
|
||||
<text x="400" y="520" font-family="Arial,sans-serif" font-size="22" fill="#22c55e" text-anchor="middle" font-weight="bold">서버지식 백과사전</text>
|
||||
<text x="400" y="548" font-family="Arial,sans-serif" font-size="13" fill="#64748b" text-anchor="middle">서버와 사용자를 연결하는 네트워크의 세계</text>
|
||||
<!-- Corner decorations -->
|
||||
<rect x="20" y="20" width="40" height="2" fill="#22c55e" opacity="0.4"/>
|
||||
<rect x="20" y="20" width="2" height="40" fill="#22c55e" opacity="0.4"/>
|
||||
<rect x="740" y="20" width="40" height="2" fill="#22c55e" opacity="0.4"/>
|
||||
<rect x="778" y="20" width="2" height="40" fill="#22c55e" opacity="0.4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.5 KiB |
108
public/images/academy/server-knowledge/10.svg
Normal file
108
public/images/academy/server-knowledge/10.svg
Normal file
@@ -0,0 +1,108 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
|
||||
<defs>
|
||||
<linearGradient id="bg10" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#f0fdf4"/>
|
||||
<stop offset="100%" style="stop-color:#fef2f2"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="800" height="600" fill="url(#bg10)"/>
|
||||
<!-- Title -->
|
||||
<text x="400" y="40" font-family="Arial,sans-serif" font-size="22" fill="#dc2626" text-anchor="middle" font-weight="bold">절대 하면 안 되는 작업들</text>
|
||||
<text x="400" y="62" font-family="Arial,sans-serif" font-size="12" fill="#64748b" text-anchor="middle">서버에서 이 명령들을 실행하면 서비스 장애가 발생합니다</text>
|
||||
<!-- Warning banner -->
|
||||
<rect x="200" y="75" width="400" height="30" rx="6" fill="#dc2626"/>
|
||||
<text x="400" y="95" font-family="Arial,sans-serif" font-size="13" fill="white" text-anchor="middle" font-weight="bold">Level 3: 절대 금지 작업</text>
|
||||
<!-- Card 1: chmod 777 -->
|
||||
<g transform="translate(55, 130)">
|
||||
<rect width="160" height="200" rx="12" fill="white" stroke="#dc2626" stroke-width="2.5"/>
|
||||
<!-- Red top bar -->
|
||||
<rect x="0" y="0" width="160" height="8" rx="6" fill="#dc2626"/>
|
||||
<!-- Big X -->
|
||||
<circle cx="80" cy="55" r="28" fill="#dc2626" opacity="0.1"/>
|
||||
<line x1="62" y1="37" x2="98" y2="73" stroke="#dc2626" stroke-width="5" stroke-linecap="round"/>
|
||||
<line x1="98" y1="37" x2="62" y2="73" stroke="#dc2626" stroke-width="5" stroke-linecap="round"/>
|
||||
<!-- Command -->
|
||||
<rect x="15" y="95" width="130" height="30" rx="5" fill="#1e293b"/>
|
||||
<text x="80" y="114" font-family="monospace" font-size="12" fill="#f87171" text-anchor="middle" font-weight="bold">chmod 777</text>
|
||||
<!-- Description -->
|
||||
<text x="80" y="148" font-family="Arial,sans-serif" font-size="11" fill="#dc2626" text-anchor="middle" font-weight="bold">전체 권한 개방</text>
|
||||
<text x="80" y="166" font-family="Arial,sans-serif" font-size="9" fill="#64748b" text-anchor="middle">모든 사용자에게</text>
|
||||
<text x="80" y="180" font-family="Arial,sans-serif" font-size="9" fill="#64748b" text-anchor="middle">읽기/쓰기/실행 허용</text>
|
||||
<text x="80" y="194" font-family="Arial,sans-serif" font-size="9" fill="#dc2626" text-anchor="middle">보안 취약점 발생!</text>
|
||||
</g>
|
||||
<!-- Card 2: chown root -->
|
||||
<g transform="translate(240, 130)">
|
||||
<rect width="160" height="200" rx="12" fill="white" stroke="#dc2626" stroke-width="2.5"/>
|
||||
<rect x="0" y="0" width="160" height="8" rx="6" fill="#dc2626"/>
|
||||
<!-- Big X -->
|
||||
<circle cx="80" cy="55" r="28" fill="#dc2626" opacity="0.1"/>
|
||||
<line x1="62" y1="37" x2="98" y2="73" stroke="#dc2626" stroke-width="5" stroke-linecap="round"/>
|
||||
<line x1="98" y1="37" x2="62" y2="73" stroke="#dc2626" stroke-width="5" stroke-linecap="round"/>
|
||||
<!-- Command -->
|
||||
<rect x="15" y="95" width="130" height="30" rx="5" fill="#1e293b"/>
|
||||
<text x="80" y="114" font-family="monospace" font-size="12" fill="#f87171" text-anchor="middle" font-weight="bold">chown root</text>
|
||||
<!-- Description -->
|
||||
<text x="80" y="148" font-family="Arial,sans-serif" font-size="11" fill="#dc2626" text-anchor="middle" font-weight="bold">소유자 변경</text>
|
||||
<text x="80" y="166" font-family="Arial,sans-serif" font-size="9" fill="#64748b" text-anchor="middle">파일 소유자를</text>
|
||||
<text x="80" y="180" font-family="Arial,sans-serif" font-size="9" fill="#64748b" text-anchor="middle">root로 변경하면</text>
|
||||
<text x="80" y="194" font-family="Arial,sans-serif" font-size="9" fill="#dc2626" text-anchor="middle">웹서버 접근 불가!</text>
|
||||
</g>
|
||||
<!-- Card 3: Direct server edit -->
|
||||
<g transform="translate(425, 130)">
|
||||
<rect width="160" height="200" rx="12" fill="white" stroke="#dc2626" stroke-width="2.5"/>
|
||||
<rect x="0" y="0" width="160" height="8" rx="6" fill="#dc2626"/>
|
||||
<!-- Big X -->
|
||||
<circle cx="80" cy="55" r="28" fill="#dc2626" opacity="0.1"/>
|
||||
<line x1="62" y1="37" x2="98" y2="73" stroke="#dc2626" stroke-width="5" stroke-linecap="round"/>
|
||||
<line x1="98" y1="37" x2="62" y2="73" stroke="#dc2626" stroke-width="5" stroke-linecap="round"/>
|
||||
<!-- Command -->
|
||||
<rect x="15" y="95" width="130" height="30" rx="5" fill="#1e293b"/>
|
||||
<text x="80" y="114" font-family="monospace" font-size="10" fill="#f87171" text-anchor="middle" font-weight="bold">vi /서버파일</text>
|
||||
<!-- Description -->
|
||||
<text x="80" y="148" font-family="Arial,sans-serif" font-size="11" fill="#dc2626" text-anchor="middle" font-weight="bold">서버 직접 수정</text>
|
||||
<text x="80" y="166" font-family="Arial,sans-serif" font-size="9" fill="#64748b" text-anchor="middle">서버에서 코드를</text>
|
||||
<text x="80" y="180" font-family="Arial,sans-serif" font-size="9" fill="#64748b" text-anchor="middle">직접 수정하면</text>
|
||||
<text x="80" y="194" font-family="Arial,sans-serif" font-size="9" fill="#dc2626" text-anchor="middle">git 충돌 발생!</text>
|
||||
</g>
|
||||
<!-- Card 4: rm -rf -->
|
||||
<g transform="translate(610, 130)">
|
||||
<rect width="160" height="200" rx="12" fill="white" stroke="#dc2626" stroke-width="2.5"/>
|
||||
<rect x="0" y="0" width="160" height="8" rx="6" fill="#dc2626"/>
|
||||
<!-- Big X -->
|
||||
<circle cx="80" cy="55" r="28" fill="#dc2626" opacity="0.1"/>
|
||||
<line x1="62" y1="37" x2="98" y2="73" stroke="#dc2626" stroke-width="5" stroke-linecap="round"/>
|
||||
<line x1="98" y1="37" x2="62" y2="73" stroke="#dc2626" stroke-width="5" stroke-linecap="round"/>
|
||||
<!-- Command -->
|
||||
<rect x="15" y="95" width="130" height="30" rx="5" fill="#1e293b"/>
|
||||
<text x="80" y="114" font-family="monospace" font-size="12" fill="#f87171" text-anchor="middle" font-weight="bold">rm -rf /</text>
|
||||
<!-- Description -->
|
||||
<text x="80" y="148" font-family="Arial,sans-serif" font-size="11" fill="#dc2626" text-anchor="middle" font-weight="bold">대량 삭제</text>
|
||||
<text x="80" y="166" font-family="Arial,sans-serif" font-size="9" fill="#64748b" text-anchor="middle">파일/폴더를</text>
|
||||
<text x="80" y="180" font-family="Arial,sans-serif" font-size="9" fill="#64748b" text-anchor="middle">강제 삭제하면</text>
|
||||
<text x="80" y="194" font-family="Arial,sans-serif" font-size="9" fill="#dc2626" text-anchor="middle">복구 불가능!</text>
|
||||
</g>
|
||||
<!-- Why these are dangerous section -->
|
||||
<rect x="55" y="360" width="690" height="120" rx="12" fill="white" stroke="#e2e8f0" stroke-width="1.5"/>
|
||||
<text x="400" y="388" font-family="Arial,sans-serif" font-size="14" fill="#166534" text-anchor="middle" font-weight="bold">왜 위험한가?</text>
|
||||
<g transform="translate(80, 400)">
|
||||
<circle cx="10" cy="10" r="6" fill="#dc2626" opacity="0.2"/>
|
||||
<text x="10" y="14" font-family="Arial,sans-serif" font-size="10" fill="#dc2626" text-anchor="middle" font-weight="bold">1</text>
|
||||
<text x="30" y="14" font-family="Arial,sans-serif" font-size="11" fill="#1e293b">chmod 777 = 해커에게 문을 열어주는 것. 누구나 파일을 수정/실행할 수 있게 됨</text>
|
||||
</g>
|
||||
<g transform="translate(80, 425)">
|
||||
<circle cx="10" cy="10" r="6" fill="#dc2626" opacity="0.2"/>
|
||||
<text x="10" y="14" font-family="Arial,sans-serif" font-size="10" fill="#dc2626" text-anchor="middle" font-weight="bold">2</text>
|
||||
<text x="30" y="14" font-family="Arial,sans-serif" font-size="11" fill="#1e293b">chown root = www-data(웹서버)가 파일에 접근 못해 502 에러 발생</text>
|
||||
</g>
|
||||
<g transform="translate(80, 450)">
|
||||
<circle cx="10" cy="10" r="6" fill="#dc2626" opacity="0.2"/>
|
||||
<text x="10" y="14" font-family="Arial,sans-serif" font-size="10" fill="#dc2626" text-anchor="middle" font-weight="bold">3</text>
|
||||
<text x="30" y="14" font-family="Arial,sans-serif" font-size="11" fill="#1e293b">서버 직접 수정 = git과 충돌하여 이후 배포가 불가능해짐</text>
|
||||
</g>
|
||||
<!-- Correct approach -->
|
||||
<rect x="100" y="500" width="600" height="50" rx="10" fill="#166534" opacity="0.08" stroke="#22c55e" stroke-width="1.5"/>
|
||||
<text x="400" y="522" font-family="Arial,sans-serif" font-size="12" fill="#166534" text-anchor="middle" font-weight="bold">올바른 방법: 로컬에서 수정 >>> git push >>> 자동 배포</text>
|
||||
<text x="400" y="540" font-family="Arial,sans-serif" font-size="10" fill="#64748b" text-anchor="middle">서버 문제 발생 시 팀장에게 보고하고 안전한 절차를 따르세요</text>
|
||||
<!-- Bottom -->
|
||||
<text x="400" y="580" font-family="Arial,sans-serif" font-size="11" fill="#94a3b8" text-anchor="middle">Forbidden Actions Warning Cards — Level 3 Operations</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.4 KiB |
135
public/images/academy/server-knowledge/11.svg
Normal file
135
public/images/academy/server-knowledge/11.svg
Normal file
@@ -0,0 +1,135 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
|
||||
<defs>
|
||||
<linearGradient id="bg11" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#f0fdf4"/>
|
||||
<stop offset="100%" style="stop-color:#dcfce7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="stepGreen" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#22c55e"/>
|
||||
<stop offset="100%" style="stop-color:#16a34a"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="800" height="600" fill="url(#bg11)"/>
|
||||
<!-- Title -->
|
||||
<text x="400" y="40" font-family="Arial,sans-serif" font-size="22" fill="#166534" text-anchor="middle" font-weight="bold">서버 문제 발생 시 올바른 절차</text>
|
||||
<text x="400" y="62" font-family="Arial,sans-serif" font-size="12" fill="#64748b" text-anchor="middle">4단계 안전 대응 프로세스를 반드시 따르세요</text>
|
||||
<!-- Step 1: Identify symptoms -->
|
||||
<g transform="translate(50, 100)">
|
||||
<!-- Card -->
|
||||
<rect x="0" y="0" width="160" height="280" rx="14" fill="white" stroke="#22c55e" stroke-width="2.5"/>
|
||||
<!-- Top circle with number -->
|
||||
<circle cx="80" cy="40" r="30" fill="url(#stepGreen)"/>
|
||||
<text x="80" y="48" font-family="Arial,sans-serif" font-size="22" fill="white" text-anchor="middle" font-weight="bold">1</text>
|
||||
<!-- Title -->
|
||||
<text x="80" y="90" font-family="Arial,sans-serif" font-size="15" fill="#166534" text-anchor="middle" font-weight="bold">증상 확인</text>
|
||||
<!-- Icon: magnifying glass -->
|
||||
<circle cx="80" cy="125" r="18" fill="#f0fdf4" stroke="#22c55e" stroke-width="2"/>
|
||||
<circle cx="76" cy="122" r="10" fill="none" stroke="#22c55e" stroke-width="2"/>
|
||||
<line x1="83" y1="129" x2="92" y2="138" stroke="#22c55e" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<!-- Checklist -->
|
||||
<text x="20" y="165" font-family="Arial,sans-serif" font-size="10" fill="#16a34a" font-weight="bold">체크사항:</text>
|
||||
<text x="20" y="182" font-family="Arial,sans-serif" font-size="9" fill="#64748b">- 에러 메시지 확인</text>
|
||||
<text x="20" y="196" font-family="Arial,sans-serif" font-size="9" fill="#64748b">- 발생 시점 기록</text>
|
||||
<text x="20" y="210" font-family="Arial,sans-serif" font-size="9" fill="#64748b">- 영향 범위 파악</text>
|
||||
<text x="20" y="224" font-family="Arial,sans-serif" font-size="9" fill="#64748b">- 스크린샷 촬영</text>
|
||||
<!-- Allowed commands -->
|
||||
<rect x="15" y="238" width="130" height="30" rx="5" fill="#f0fdf4" stroke="#dcfce7" stroke-width="1"/>
|
||||
<text x="80" y="258" font-family="monospace" font-size="8" fill="#16a34a" text-anchor="middle">tail -f error.log</text>
|
||||
</g>
|
||||
<!-- Arrow 1->2 -->
|
||||
<g transform="translate(215, 230)">
|
||||
<line x1="0" y1="10" x2="30" y2="10" stroke="#22c55e" stroke-width="3"/>
|
||||
<polygon points="30,4 42,10 30,16" fill="#22c55e"/>
|
||||
<!-- Checkmark -->
|
||||
<circle cx="21" cy="-5" r="8" fill="#22c55e"/>
|
||||
<polyline points="16,-5 19,-2 26,-9" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
<!-- Step 2: Report to team lead -->
|
||||
<g transform="translate(250, 100)">
|
||||
<rect x="0" y="0" width="160" height="280" rx="14" fill="white" stroke="#22c55e" stroke-width="2.5"/>
|
||||
<circle cx="80" cy="40" r="30" fill="url(#stepGreen)"/>
|
||||
<text x="80" y="48" font-family="Arial,sans-serif" font-size="22" fill="white" text-anchor="middle" font-weight="bold">2</text>
|
||||
<text x="80" y="90" font-family="Arial,sans-serif" font-size="15" fill="#166534" text-anchor="middle" font-weight="bold">팀장 보고</text>
|
||||
<!-- Icon: speech bubble -->
|
||||
<circle cx="80" cy="125" r="18" fill="#f0fdf4" stroke="#22c55e" stroke-width="2"/>
|
||||
<rect x="65" y="112" width="30" height="22" rx="6" fill="none" stroke="#22c55e" stroke-width="2"/>
|
||||
<polygon points="75,134 78,142 82,134" fill="none" stroke="#22c55e" stroke-width="2"/>
|
||||
<text x="20" y="165" font-family="Arial,sans-serif" font-size="10" fill="#16a34a" font-weight="bold">보고 내용:</text>
|
||||
<text x="20" y="182" font-family="Arial,sans-serif" font-size="9" fill="#64748b">- 발생 증상 설명</text>
|
||||
<text x="20" y="196" font-family="Arial,sans-serif" font-size="9" fill="#64748b">- 발생 시점/상황</text>
|
||||
<text x="20" y="210" font-family="Arial,sans-serif" font-size="9" fill="#64748b">- 영향 범위</text>
|
||||
<text x="20" y="224" font-family="Arial,sans-serif" font-size="9" fill="#64748b">- 에러 로그 첨부</text>
|
||||
<rect x="15" y="238" width="130" height="30" rx="5" fill="#fef3c7" stroke="#f59e0b" stroke-width="1"/>
|
||||
<text x="80" y="258" font-family="Arial,sans-serif" font-size="9" fill="#92400e" text-anchor="middle" font-weight="bold">팀장 승인 대기</text>
|
||||
</g>
|
||||
<!-- Arrow 2->3 -->
|
||||
<g transform="translate(415, 230)">
|
||||
<line x1="0" y1="10" x2="30" y2="10" stroke="#22c55e" stroke-width="3"/>
|
||||
<polygon points="30,4 42,10 30,16" fill="#22c55e"/>
|
||||
<circle cx="21" cy="-5" r="8" fill="#22c55e"/>
|
||||
<polyline points="16,-5 19,-2 26,-9" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
<!-- Step 3: Root cause analysis -->
|
||||
<g transform="translate(450, 100)">
|
||||
<rect x="0" y="0" width="160" height="280" rx="14" fill="white" stroke="#22c55e" stroke-width="2.5"/>
|
||||
<circle cx="80" cy="40" r="30" fill="url(#stepGreen)"/>
|
||||
<text x="80" y="48" font-family="Arial,sans-serif" font-size="22" fill="white" text-anchor="middle" font-weight="bold">3</text>
|
||||
<text x="80" y="90" font-family="Arial,sans-serif" font-size="15" fill="#166534" text-anchor="middle" font-weight="bold">원인 분석</text>
|
||||
<!-- Icon: puzzle piece -->
|
||||
<circle cx="80" cy="125" r="18" fill="#f0fdf4" stroke="#22c55e" stroke-width="2"/>
|
||||
<rect x="70" y="115" width="12" height="12" rx="2" fill="none" stroke="#22c55e" stroke-width="2"/>
|
||||
<rect x="82" y="120" width="12" height="12" rx="2" fill="none" stroke="#22c55e" stroke-width="2"/>
|
||||
<text x="20" y="165" font-family="Arial,sans-serif" font-size="10" fill="#16a34a" font-weight="bold">분석 방법:</text>
|
||||
<text x="20" y="182" font-family="Arial,sans-serif" font-size="9" fill="#64748b">- 로그 분석 (Level 1)</text>
|
||||
<text x="20" y="196" font-family="Arial,sans-serif" font-size="9" fill="#64748b">- 권한 확인 (ls -la)</text>
|
||||
<text x="20" y="210" font-family="Arial,sans-serif" font-size="9" fill="#64748b">- 프로세스 확인</text>
|
||||
<text x="20" y="224" font-family="Arial,sans-serif" font-size="9" fill="#64748b">- 최근 변경 이력 조사</text>
|
||||
<rect x="15" y="238" width="130" height="30" rx="5" fill="#f0fdf4" stroke="#dcfce7" stroke-width="1"/>
|
||||
<text x="80" y="258" font-family="monospace" font-size="8" fill="#16a34a" text-anchor="middle">ls -la, git log</text>
|
||||
</g>
|
||||
<!-- Arrow 3->4 -->
|
||||
<g transform="translate(615, 230)">
|
||||
<line x1="0" y1="10" x2="30" y2="10" stroke="#22c55e" stroke-width="3"/>
|
||||
<polygon points="30,4 42,10 30,16" fill="#22c55e"/>
|
||||
<circle cx="21" cy="-5" r="8" fill="#22c55e"/>
|
||||
<polyline points="16,-5 19,-2 26,-9" fill="none" stroke="white" stroke-width="1.5" stroke-linecap="round"/>
|
||||
</g>
|
||||
<!-- Step 4: Safe action -->
|
||||
<g transform="translate(650, 100)">
|
||||
<rect x="0" y="0" width="160" height="280" rx="14" fill="white" stroke="#166534" stroke-width="2.5"/>
|
||||
<circle cx="80" cy="40" r="30" fill="#166534"/>
|
||||
<text x="80" y="48" font-family="Arial,sans-serif" font-size="22" fill="white" text-anchor="middle" font-weight="bold">4</text>
|
||||
<text x="80" y="90" font-family="Arial,sans-serif" font-size="15" fill="#166534" text-anchor="middle" font-weight="bold">안전 조치</text>
|
||||
<!-- Icon: shield with check -->
|
||||
<circle cx="80" cy="125" r="18" fill="#dcfce7" stroke="#166534" stroke-width="2"/>
|
||||
<path d="M80 112 L92 118 L92 128 Q92 136 80 140 Q68 136 68 128 L68 118 Z" fill="#166534" opacity="0.2" stroke="#166534" stroke-width="1.5"/>
|
||||
<polyline points="74,126 78,130 86,122" fill="none" stroke="#166534" stroke-width="2" stroke-linecap="round"/>
|
||||
<text x="20" y="165" font-family="Arial,sans-serif" font-size="10" fill="#16a34a" font-weight="bold">안전 조치:</text>
|
||||
<text x="20" y="182" font-family="Arial,sans-serif" font-size="9" fill="#64748b">- 캐시 클리어 (L2)</text>
|
||||
<text x="20" y="196" font-family="Arial,sans-serif" font-size="9" fill="#64748b">- config:clear (L2)</text>
|
||||
<text x="20" y="210" font-family="Arial,sans-serif" font-size="9" fill="#64748b">- 서비스 재시작 (L2)</text>
|
||||
<text x="20" y="224" font-family="Arial,sans-serif" font-size="9" fill="#64748b">- 결과 확인 및 기록</text>
|
||||
<rect x="15" y="238" width="130" height="30" rx="5" fill="#dcfce7" stroke="#22c55e" stroke-width="1"/>
|
||||
<text x="80" y="258" font-family="Arial,sans-serif" font-size="9" fill="#166534" text-anchor="middle" font-weight="bold">팀장 승인 후 실행</text>
|
||||
</g>
|
||||
<!-- Key principle box -->
|
||||
<rect x="80" y="410" width="640" height="80" rx="12" fill="white" stroke="#22c55e" stroke-width="1.5"/>
|
||||
<text x="400" y="438" font-family="Arial,sans-serif" font-size="14" fill="#166534" text-anchor="middle" font-weight="bold">핵심 원칙</text>
|
||||
<text x="400" y="460" font-family="Arial,sans-serif" font-size="11" fill="#64748b" text-anchor="middle">1. 직접 고치려 하지 말고 먼저 증상을 정확히 파악한다</text>
|
||||
<text x="400" y="478" font-family="Arial,sans-serif" font-size="11" fill="#64748b" text-anchor="middle">2. 팀장에게 보고한 후 승인 받은 작업만 수행한다 (Level 2는 승인 필수)</text>
|
||||
<!-- Level indicators -->
|
||||
<g transform="translate(130, 508)">
|
||||
<rect width="80" height="22" rx="4" fill="#22c55e" opacity="0.15" stroke="#22c55e" stroke-width="1"/>
|
||||
<text x="40" y="16" font-family="Arial,sans-serif" font-size="9" fill="#16a34a" text-anchor="middle" font-weight="bold">Level 1: 허용</text>
|
||||
</g>
|
||||
<g transform="translate(230, 508)">
|
||||
<rect width="100" height="22" rx="4" fill="#f59e0b" opacity="0.15" stroke="#f59e0b" stroke-width="1"/>
|
||||
<text x="50" y="16" font-family="Arial,sans-serif" font-size="9" fill="#d97706" text-anchor="middle" font-weight="bold">Level 2: 승인 후</text>
|
||||
</g>
|
||||
<g transform="translate(350, 508)">
|
||||
<rect width="100" height="22" rx="4" fill="#dc2626" opacity="0.15" stroke="#dc2626" stroke-width="1"/>
|
||||
<text x="50" y="16" font-family="Arial,sans-serif" font-size="9" fill="#dc2626" text-anchor="middle" font-weight="bold">Level 3: 절대 금지</text>
|
||||
</g>
|
||||
<!-- Bottom -->
|
||||
<text x="400" y="570" font-family="Arial,sans-serif" font-size="11" fill="#94a3b8" text-anchor="middle">Correct Incident Response Procedure — 4-Step Safety Flowchart</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
148
public/images/academy/server-knowledge/12.svg
Normal file
148
public/images/academy/server-knowledge/12.svg
Normal file
@@ -0,0 +1,148 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
|
||||
<defs>
|
||||
<linearGradient id="bg12" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#f0fdf4"/>
|
||||
<stop offset="100%" style="stop-color:#dcfce7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="800" height="600" fill="url(#bg12)"/>
|
||||
<!-- Title -->
|
||||
<text x="400" y="40" font-family="Arial,sans-serif" font-size="22" fill="#166534" text-anchor="middle" font-weight="bold">안전한 명령 vs 위험한 명령</text>
|
||||
<text x="400" y="62" font-family="Arial,sans-serif" font-size="12" fill="#64748b" text-anchor="middle">서버에서 실행할 수 있는 명령과 절대 하면 안 되는 명령을 구분하세요</text>
|
||||
<!-- VS divider in center -->
|
||||
<line x1="400" y1="85" x2="400" y2="530" stroke="#94a3b8" stroke-width="2" stroke-dasharray="6,4"/>
|
||||
<circle cx="400" cy="110" r="22" fill="white" stroke="#94a3b8" stroke-width="2"/>
|
||||
<text x="400" y="116" font-family="Arial,sans-serif" font-size="14" fill="#64748b" text-anchor="middle" font-weight="bold">VS</text>
|
||||
<!-- LEFT COLUMN: Safe (Green) -->
|
||||
<g transform="translate(40, 85)">
|
||||
<!-- Header -->
|
||||
<rect x="0" y="0" width="330" height="45" rx="10" fill="#22c55e"/>
|
||||
<circle cx="25" cy="23" r="14" fill="white" opacity="0.25"/>
|
||||
<polyline points="19,23 23,27 31,19" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<text x="50" y="18" font-family="Arial,sans-serif" font-size="14" fill="white" font-weight="bold">안전한 명령 (Level 1)</text>
|
||||
<text x="50" y="34" font-family="Arial,sans-serif" font-size="10" fill="#dcfce7">자유롭게 실행 가능</text>
|
||||
</g>
|
||||
<!-- Safe command rows -->
|
||||
<g transform="translate(40, 140)">
|
||||
<!-- Row 1: ls -->
|
||||
<rect x="0" y="0" width="330" height="65" rx="8" fill="white" stroke="#dcfce7" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="6" height="65" rx="3" fill="#22c55e"/>
|
||||
<rect x="18" y="10" width="90" height="28" rx="5" fill="#f0fdf4" stroke="#22c55e" stroke-width="1"/>
|
||||
<text x="63" y="28" font-family="monospace" font-size="13" fill="#16a34a" text-anchor="middle" font-weight="bold">ls -la</text>
|
||||
<text x="125" y="24" font-family="Arial,sans-serif" font-size="11" fill="#166534" font-weight="bold">파일 목록 조회</text>
|
||||
<text x="18" y="52" font-family="Arial,sans-serif" font-size="9" fill="#64748b">파일의 권한, 소유자, 크기를 확인합니다</text>
|
||||
<!-- Green check -->
|
||||
<circle cx="308" cy="33" r="12" fill="#22c55e" opacity="0.15"/>
|
||||
<polyline points="302,33 306,37 314,29" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g transform="translate(40, 212)">
|
||||
<rect x="0" y="0" width="330" height="65" rx="8" fill="white" stroke="#dcfce7" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="6" height="65" rx="3" fill="#22c55e"/>
|
||||
<rect x="18" y="10" width="90" height="28" rx="5" fill="#f0fdf4" stroke="#22c55e" stroke-width="1"/>
|
||||
<text x="63" y="28" font-family="monospace" font-size="13" fill="#16a34a" text-anchor="middle" font-weight="bold">cat</text>
|
||||
<text x="125" y="24" font-family="Arial,sans-serif" font-size="11" fill="#166534" font-weight="bold">파일 내용 확인</text>
|
||||
<text x="18" y="52" font-family="Arial,sans-serif" font-size="9" fill="#64748b">설정 파일이나 로그의 내용을 읽어봅니다</text>
|
||||
<circle cx="308" cy="33" r="12" fill="#22c55e" opacity="0.15"/>
|
||||
<polyline points="302,33 306,37 314,29" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g transform="translate(40, 284)">
|
||||
<rect x="0" y="0" width="330" height="65" rx="8" fill="white" stroke="#dcfce7" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="6" height="65" rx="3" fill="#22c55e"/>
|
||||
<rect x="18" y="10" width="90" height="28" rx="5" fill="#f0fdf4" stroke="#22c55e" stroke-width="1"/>
|
||||
<text x="63" y="28" font-family="monospace" font-size="13" fill="#16a34a" text-anchor="middle" font-weight="bold">whoami</text>
|
||||
<text x="125" y="24" font-family="Arial,sans-serif" font-size="11" fill="#166534" font-weight="bold">현재 사용자 확인</text>
|
||||
<text x="18" y="52" font-family="Arial,sans-serif" font-size="9" fill="#64748b">지금 어떤 계정으로 접속 중인지 확인합니다</text>
|
||||
<circle cx="308" cy="33" r="12" fill="#22c55e" opacity="0.15"/>
|
||||
<polyline points="302,33 306,37 314,29" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g transform="translate(40, 356)">
|
||||
<rect x="0" y="0" width="330" height="65" rx="8" fill="white" stroke="#dcfce7" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="6" height="65" rx="3" fill="#22c55e"/>
|
||||
<rect x="18" y="10" width="90" height="28" rx="5" fill="#f0fdf4" stroke="#22c55e" stroke-width="1"/>
|
||||
<text x="63" y="28" font-family="monospace" font-size="13" fill="#16a34a" text-anchor="middle" font-weight="bold">df -h</text>
|
||||
<text x="125" y="24" font-family="Arial,sans-serif" font-size="11" fill="#166534" font-weight="bold">디스크 용량 확인</text>
|
||||
<text x="18" y="52" font-family="Arial,sans-serif" font-size="9" fill="#64748b">서버의 저장 공간이 얼마나 남았는지 확인합니다</text>
|
||||
<circle cx="308" cy="33" r="12" fill="#22c55e" opacity="0.15"/>
|
||||
<polyline points="302,33 306,37 314,29" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g transform="translate(40, 428)">
|
||||
<rect x="0" y="0" width="330" height="65" rx="8" fill="white" stroke="#dcfce7" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="6" height="65" rx="3" fill="#22c55e"/>
|
||||
<rect x="18" y="10" width="90" height="28" rx="5" fill="#f0fdf4" stroke="#22c55e" stroke-width="1"/>
|
||||
<text x="63" y="28" font-family="monospace" font-size="13" fill="#16a34a" text-anchor="middle" font-weight="bold">docker ps</text>
|
||||
<text x="125" y="24" font-family="Arial,sans-serif" font-size="11" fill="#166534" font-weight="bold">컨테이너 상태 확인</text>
|
||||
<text x="18" y="52" font-family="Arial,sans-serif" font-size="9" fill="#64748b">Docker 컨테이너가 정상 실행 중인지 확인합니다</text>
|
||||
<circle cx="308" cy="33" r="12" fill="#22c55e" opacity="0.15"/>
|
||||
<polyline points="302,33 306,37 314,29" fill="none" stroke="#22c55e" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<!-- RIGHT COLUMN: Dangerous (Red) -->
|
||||
<g transform="translate(430, 85)">
|
||||
<rect x="0" y="0" width="330" height="45" rx="10" fill="#dc2626"/>
|
||||
<circle cx="25" cy="23" r="14" fill="white" opacity="0.25"/>
|
||||
<line x1="17" y1="15" x2="33" y2="31" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<line x1="33" y1="15" x2="17" y2="31" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<text x="50" y="18" font-family="Arial,sans-serif" font-size="14" fill="white" font-weight="bold">위험한 명령 (Level 3)</text>
|
||||
<text x="50" y="34" font-family="Arial,sans-serif" font-size="10" fill="#fecaca">절대 직접 실행 금지</text>
|
||||
</g>
|
||||
<!-- Dangerous command rows -->
|
||||
<g transform="translate(430, 140)">
|
||||
<rect x="0" y="0" width="330" height="65" rx="8" fill="white" stroke="#fecaca" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="6" height="65" rx="3" fill="#dc2626"/>
|
||||
<rect x="18" y="10" width="90" height="28" rx="5" fill="#fef2f2" stroke="#dc2626" stroke-width="1"/>
|
||||
<text x="63" y="28" font-family="monospace" font-size="13" fill="#dc2626" text-anchor="middle" font-weight="bold">rm -rf</text>
|
||||
<text x="125" y="24" font-family="Arial,sans-serif" font-size="11" fill="#991b1b" font-weight="bold">파일/폴더 강제 삭제</text>
|
||||
<text x="18" y="52" font-family="Arial,sans-serif" font-size="9" fill="#64748b">확인 없이 삭제하며 복구가 불가능합니다</text>
|
||||
<circle cx="308" cy="33" r="12" fill="#dc2626" opacity="0.15"/>
|
||||
<line x1="302" y1="27" x2="314" y2="39" stroke="#dc2626" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="314" y1="27" x2="302" y2="39" stroke="#dc2626" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g transform="translate(430, 212)">
|
||||
<rect x="0" y="0" width="330" height="65" rx="8" fill="white" stroke="#fecaca" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="6" height="65" rx="3" fill="#dc2626"/>
|
||||
<rect x="18" y="10" width="90" height="28" rx="5" fill="#fef2f2" stroke="#dc2626" stroke-width="1"/>
|
||||
<text x="63" y="28" font-family="monospace" font-size="13" fill="#dc2626" text-anchor="middle" font-weight="bold">chmod</text>
|
||||
<text x="125" y="24" font-family="Arial,sans-serif" font-size="11" fill="#991b1b" font-weight="bold">파일 권한 변경</text>
|
||||
<text x="18" y="52" font-family="Arial,sans-serif" font-size="9" fill="#64748b">잘못된 권한 설정은 서비스 장애를 유발합니다</text>
|
||||
<circle cx="308" cy="33" r="12" fill="#dc2626" opacity="0.15"/>
|
||||
<line x1="302" y1="27" x2="314" y2="39" stroke="#dc2626" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="314" y1="27" x2="302" y2="39" stroke="#dc2626" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g transform="translate(430, 284)">
|
||||
<rect x="0" y="0" width="330" height="65" rx="8" fill="white" stroke="#fecaca" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="6" height="65" rx="3" fill="#dc2626"/>
|
||||
<rect x="18" y="10" width="90" height="28" rx="5" fill="#fef2f2" stroke="#dc2626" stroke-width="1"/>
|
||||
<text x="63" y="28" font-family="monospace" font-size="13" fill="#dc2626" text-anchor="middle" font-weight="bold">chown</text>
|
||||
<text x="125" y="24" font-family="Arial,sans-serif" font-size="11" fill="#991b1b" font-weight="bold">파일 소유자 변경</text>
|
||||
<text x="18" y="52" font-family="Arial,sans-serif" font-size="9" fill="#64748b">소유자 변경 시 웹서버 접근이 차단됩니다</text>
|
||||
<circle cx="308" cy="33" r="12" fill="#dc2626" opacity="0.15"/>
|
||||
<line x1="302" y1="27" x2="314" y2="39" stroke="#dc2626" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="314" y1="27" x2="302" y2="39" stroke="#dc2626" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g transform="translate(430, 356)">
|
||||
<rect x="0" y="0" width="330" height="65" rx="8" fill="white" stroke="#fecaca" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="6" height="65" rx="3" fill="#dc2626"/>
|
||||
<rect x="18" y="10" width="90" height="28" rx="5" fill="#fef2f2" stroke="#dc2626" stroke-width="1"/>
|
||||
<text x="63" y="28" font-family="monospace" font-size="13" fill="#dc2626" text-anchor="middle" font-weight="bold">kill -9</text>
|
||||
<text x="125" y="24" font-family="Arial,sans-serif" font-size="11" fill="#991b1b" font-weight="bold">프로세스 강제 종료</text>
|
||||
<text x="18" y="52" font-family="Arial,sans-serif" font-size="9" fill="#64748b">서비스 프로세스를 죽이면 서비스 중단됩니다</text>
|
||||
<circle cx="308" cy="33" r="12" fill="#dc2626" opacity="0.15"/>
|
||||
<line x1="302" y1="27" x2="314" y2="39" stroke="#dc2626" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="314" y1="27" x2="302" y2="39" stroke="#dc2626" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<g transform="translate(430, 428)">
|
||||
<rect x="0" y="0" width="330" height="65" rx="8" fill="white" stroke="#fecaca" stroke-width="1.5"/>
|
||||
<rect x="0" y="0" width="6" height="65" rx="3" fill="#dc2626"/>
|
||||
<rect x="18" y="10" width="90" height="28" rx="5" fill="#fef2f2" stroke="#dc2626" stroke-width="1"/>
|
||||
<text x="63" y="28" font-family="monospace" font-size="13" fill="#dc2626" text-anchor="middle" font-weight="bold">sudo</text>
|
||||
<text x="125" y="24" font-family="Arial,sans-serif" font-size="11" fill="#991b1b" font-weight="bold">관리자 권한 실행</text>
|
||||
<text x="18" y="52" font-family="Arial,sans-serif" font-size="9" fill="#64748b">root 권한으로 실행하면 모든 보호가 무력화됩니다</text>
|
||||
<circle cx="308" cy="33" r="12" fill="#dc2626" opacity="0.15"/>
|
||||
<line x1="302" y1="27" x2="314" y2="39" stroke="#dc2626" stroke-width="2" stroke-linecap="round"/>
|
||||
<line x1="314" y1="27" x2="302" y2="39" stroke="#dc2626" stroke-width="2" stroke-linecap="round"/>
|
||||
</g>
|
||||
<!-- Summary bar -->
|
||||
<rect x="80" y="510" width="640" height="40" rx="8" fill="white" stroke="#e2e8f0" stroke-width="1.5"/>
|
||||
<text x="400" y="535" font-family="Arial,sans-serif" font-size="12" fill="#166534" text-anchor="middle" font-weight="bold">읽기/조회는 자유, 수정/삭제는 금지 --- 의심되면 팀장에게 먼저 물어보세요!</text>
|
||||
<!-- Bottom -->
|
||||
<text x="400" y="580" font-family="Arial,sans-serif" font-size="11" fill="#94a3b8" text-anchor="middle">Safe vs Dangerous Commands Comparison Table</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
114
public/images/academy/server-knowledge/2.svg
Normal file
114
public/images/academy/server-knowledge/2.svg
Normal file
@@ -0,0 +1,114 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
|
||||
<defs>
|
||||
<linearGradient id="bg2" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#f0fdf4"/>
|
||||
<stop offset="100%" style="stop-color:#dcfce7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="wall" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#f8fafc"/>
|
||||
<stop offset="100%" style="stop-color:#e2e8f0"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="800" height="600" fill="url(#bg2)"/>
|
||||
<!-- Title -->
|
||||
<text x="400" y="40" font-family="Arial,sans-serif" font-size="22" fill="#166534" text-anchor="middle" font-weight="bold">SAM 5-서비스 건물 지도</text>
|
||||
<text x="400" y="62" font-family="Arial,sans-serif" font-size="12" fill="#64748b" text-anchor="middle">각 서비스가 건물의 한 층처럼 역할을 나누어 동작합니다</text>
|
||||
<!-- Building outline -->
|
||||
<rect x="150" y="75" width="500" height="460" rx="8" fill="url(#wall)" stroke="#94a3b8" stroke-width="3"/>
|
||||
<!-- Roof -->
|
||||
<polygon points="130,75 400,30 670,75" fill="#334155" stroke="#1e293b" stroke-width="2"/>
|
||||
<text x="400" y="62" font-family="Arial,sans-serif" font-size="11" fill="white" text-anchor="middle" font-weight="bold">SAM Building</text>
|
||||
<!-- Floor 5 (Top) - Nginx -->
|
||||
<g transform="translate(150, 80)">
|
||||
<rect width="500" height="80" fill="#dcfce7" stroke="#22c55e" stroke-width="2"/>
|
||||
<rect x="0" y="0" width="8" height="80" fill="#22c55e"/>
|
||||
<text x="30" y="22" font-family="Arial,sans-serif" font-size="11" fill="#64748b">5F</text>
|
||||
<!-- Door icon -->
|
||||
<rect x="60" y="15" width="35" height="50" rx="3" fill="#22c55e" opacity="0.2" stroke="#22c55e" stroke-width="1.5"/>
|
||||
<rect x="63" y="18" width="29" height="20" rx="2" fill="#22c55e" opacity="0.15"/>
|
||||
<circle cx="88" cy="45" r="3" fill="#16a34a"/>
|
||||
<text x="130" y="30" font-family="Arial,sans-serif" font-size="16" fill="#166534" font-weight="bold">Nginx</text>
|
||||
<text x="130" y="50" font-family="Arial,sans-serif" font-size="12" fill="#16a34a">입구 안내 데스크</text>
|
||||
<text x="130" y="66" font-family="Arial,sans-serif" font-size="10" fill="#64748b">요청을 받아 올바른 곳으로 안내하는 역할</text>
|
||||
<!-- People entering -->
|
||||
<circle cx="380" cy="30" r="10" fill="#94a3b8"/>
|
||||
<rect x="374" y="42" width="12" height="16" rx="3" fill="#94a3b8"/>
|
||||
<circle cx="420" cy="35" r="8" fill="#94a3b8" opacity="0.6"/>
|
||||
<rect x="415" y="45" width="10" height="14" rx="3" fill="#94a3b8" opacity="0.6"/>
|
||||
<text x="445" y="42" font-family="Arial,sans-serif" font-size="9" fill="#94a3b8">요청 도착</text>
|
||||
</g>
|
||||
<!-- Floor 4 - PHP-FPM -->
|
||||
<g transform="translate(150, 160)">
|
||||
<rect width="500" height="80" fill="#f0fdf4" stroke="#22c55e" stroke-width="1"/>
|
||||
<rect x="0" y="0" width="8" height="80" fill="#16a34a"/>
|
||||
<text x="30" y="22" font-family="Arial,sans-serif" font-size="11" fill="#64748b">4F</text>
|
||||
<!-- Chef hat icon -->
|
||||
<ellipse cx="80" cy="30" rx="18" ry="12" fill="white" stroke="#16a34a" stroke-width="1.5"/>
|
||||
<rect x="68" y="30" width="24" height="20" rx="2" fill="white" stroke="#16a34a" stroke-width="1.5"/>
|
||||
<ellipse cx="80" cy="22" rx="10" ry="6" fill="white"/>
|
||||
<text x="130" y="30" font-family="Arial,sans-serif" font-size="16" fill="#166534" font-weight="bold">PHP-FPM</text>
|
||||
<text x="130" y="50" font-family="Arial,sans-serif" font-size="12" fill="#16a34a">요리사 (실행 엔진)</text>
|
||||
<text x="130" y="66" font-family="Arial,sans-serif" font-size="10" fill="#64748b">PHP 코드를 실행하여 결과를 만들어내는 역할</text>
|
||||
<!-- Cooking pot icon -->
|
||||
<rect x="370" y="20" width="30" height="25" rx="4" fill="#94a3b8" opacity="0.3"/>
|
||||
<path d="M370 25 Q385 15 400 25" stroke="#94a3b8" fill="none" stroke-width="1.5"/>
|
||||
<text x="430" y="38" font-family="Arial,sans-serif" font-size="9" fill="#94a3b8">코드 실행</text>
|
||||
</g>
|
||||
<!-- Floor 3 - Laravel -->
|
||||
<g transform="translate(150, 240)">
|
||||
<rect width="500" height="80" fill="#dcfce7" stroke="#22c55e" stroke-width="1"/>
|
||||
<rect x="0" y="0" width="8" height="80" fill="#22c55e"/>
|
||||
<text x="30" y="22" font-family="Arial,sans-serif" font-size="11" fill="#64748b">3F</text>
|
||||
<!-- Recipe book icon -->
|
||||
<rect x="62" y="15" width="36" height="45" rx="3" fill="#166534" opacity="0.15" stroke="#166534" stroke-width="1.5"/>
|
||||
<line x1="80" y1="15" x2="80" y2="60" stroke="#166534" stroke-width="1" opacity="0.5"/>
|
||||
<rect x="68" y="22" width="10" height="2" rx="1" fill="#166534" opacity="0.4"/>
|
||||
<rect x="68" y="28" width="8" height="2" rx="1" fill="#166534" opacity="0.4"/>
|
||||
<rect x="82" y="22" width="12" height="2" rx="1" fill="#166534" opacity="0.4"/>
|
||||
<rect x="82" y="28" width="10" height="2" rx="1" fill="#166534" opacity="0.4"/>
|
||||
<text x="130" y="30" font-family="Arial,sans-serif" font-size="16" fill="#166534" font-weight="bold">API (백엔드)</text>
|
||||
<text x="130" y="50" font-family="Arial,sans-serif" font-size="12" fill="#16a34a">레시피북 (비즈니스 로직)</text>
|
||||
<text x="130" y="66" font-family="Arial,sans-serif" font-size="10" fill="#64748b">데이터 처리 규칙과 흐름을 정의하는 역할</text>
|
||||
</g>
|
||||
<!-- Floor 2 - MNG -->
|
||||
<g transform="translate(150, 320)">
|
||||
<rect width="500" height="80" fill="#f0fdf4" stroke="#22c55e" stroke-width="1"/>
|
||||
<rect x="0" y="0" width="8" height="80" fill="#16a34a"/>
|
||||
<text x="30" y="22" font-family="Arial,sans-serif" font-size="11" fill="#64748b">2F</text>
|
||||
<!-- Monitor/dashboard icon -->
|
||||
<rect x="62" y="15" width="38" height="30" rx="3" fill="#16a34a" opacity="0.15" stroke="#16a34a" stroke-width="1.5"/>
|
||||
<rect x="66" y="19" width="30" height="22" rx="2" fill="#16a34a" opacity="0.1"/>
|
||||
<rect x="76" y="45" width="8" height="8" fill="#16a34a" opacity="0.3"/>
|
||||
<rect x="70" y="53" width="20" height="3" rx="1" fill="#16a34a" opacity="0.3"/>
|
||||
<text x="130" y="30" font-family="Arial,sans-serif" font-size="16" fill="#166534" font-weight="bold">MNG (관리자)</text>
|
||||
<text x="130" y="50" font-family="Arial,sans-serif" font-size="12" fill="#16a34a">관리 사무실 (관리자 화면)</text>
|
||||
<text x="130" y="66" font-family="Arial,sans-serif" font-size="10" fill="#64748b">관리자가 시스템을 운영하는 화면 인터페이스</text>
|
||||
</g>
|
||||
<!-- Floor 1 (Bottom) - MySQL -->
|
||||
<g transform="translate(150, 400)">
|
||||
<rect width="500" height="80" fill="#dcfce7" stroke="#22c55e" stroke-width="2"/>
|
||||
<rect x="0" y="0" width="8" height="80" fill="#166534"/>
|
||||
<text x="30" y="22" font-family="Arial,sans-serif" font-size="11" fill="#64748b">1F</text>
|
||||
<!-- Refrigerator icon -->
|
||||
<rect x="64" y="10" width="32" height="55" rx="4" fill="#475569" stroke="#334155" stroke-width="1.5"/>
|
||||
<line x1="64" y1="35" x2="96" y2="35" stroke="#334155" stroke-width="1"/>
|
||||
<circle cx="90" cy="23" r="2" fill="#94a3b8"/>
|
||||
<circle cx="90" cy="45" r="2" fill="#94a3b8"/>
|
||||
<text x="130" y="30" font-family="Arial,sans-serif" font-size="16" fill="#166534" font-weight="bold">MySQL</text>
|
||||
<text x="130" y="50" font-family="Arial,sans-serif" font-size="12" fill="#16a34a">냉장고 (데이터 저장소)</text>
|
||||
<text x="130" y="66" font-family="Arial,sans-serif" font-size="10" fill="#64748b">모든 데이터를 안전하게 보관하는 저장소</text>
|
||||
</g>
|
||||
<!-- Vertical flow arrows on the right side -->
|
||||
<g transform="translate(600, 80)">
|
||||
<line x1="20" y1="40" x2="20" y2="70" stroke="#22c55e" stroke-width="2"/>
|
||||
<polygon points="15,70 20,80 25,70" fill="#22c55e"/>
|
||||
<line x1="20" y1="120" x2="20" y2="150" stroke="#22c55e" stroke-width="2"/>
|
||||
<polygon points="15,150 20,160 25,150" fill="#22c55e"/>
|
||||
<line x1="20" y1="200" x2="20" y2="230" stroke="#22c55e" stroke-width="2"/>
|
||||
<polygon points="15,230 20,240 25,230" fill="#22c55e"/>
|
||||
<line x1="20" y1="280" x2="20" y2="310" stroke="#22c55e" stroke-width="2"/>
|
||||
<polygon points="15,310 20,320 25,310" fill="#22c55e"/>
|
||||
</g>
|
||||
<!-- Bottom label -->
|
||||
<text x="400" y="555" font-family="Arial,sans-serif" font-size="11" fill="#94a3b8" text-anchor="middle">SAM 5-Service Architecture — Building Map</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.1 KiB |
153
public/images/academy/server-knowledge/3.svg
Normal file
153
public/images/academy/server-knowledge/3.svg
Normal file
@@ -0,0 +1,153 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
|
||||
<defs>
|
||||
<linearGradient id="bg3" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#f0fdf4"/>
|
||||
<stop offset="100%" style="stop-color:#dcfce7"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="step3" x1="0%" y1="0%" x2="0%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#22c55e"/>
|
||||
<stop offset="100%" style="stop-color:#16a34a"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="800" height="600" fill="url(#bg3)"/>
|
||||
<!-- Title -->
|
||||
<text x="400" y="40" font-family="Arial,sans-serif" font-size="22" fill="#166534" text-anchor="middle" font-weight="bold">요청 처리 흐름도</text>
|
||||
<text x="400" y="62" font-family="Arial,sans-serif" font-size="12" fill="#64748b" text-anchor="middle">사용자의 클릭 한 번이 서버에서 처리되는 전체 과정</text>
|
||||
<!-- Main pipeline line -->
|
||||
<line x1="50" y1="200" x2="750" y2="200" stroke="#dcfce7" stroke-width="8" stroke-linecap="round"/>
|
||||
<!-- Arrows between steps -->
|
||||
<polygon points="155,195 168,200 155,205" fill="#22c55e"/>
|
||||
<line x1="140" y1="200" x2="160" y2="200" stroke="#22c55e" stroke-width="2.5"/>
|
||||
<polygon points="280,195 293,200 280,205" fill="#22c55e"/>
|
||||
<line x1="265" y1="200" x2="285" y2="200" stroke="#22c55e" stroke-width="2.5"/>
|
||||
<polygon points="405,195 418,200 405,205" fill="#22c55e"/>
|
||||
<line x1="390" y1="200" x2="410" y2="200" stroke="#22c55e" stroke-width="2.5"/>
|
||||
<polygon points="530,195 543,200 530,205" fill="#22c55e"/>
|
||||
<line x1="515" y1="200" x2="535" y2="200" stroke="#22c55e" stroke-width="2.5"/>
|
||||
<polygon points="655,195 668,200 655,205" fill="#22c55e"/>
|
||||
<line x1="640" y1="200" x2="660" y2="200" stroke="#22c55e" stroke-width="2.5"/>
|
||||
<!-- Step 1 - Browser -->
|
||||
<g transform="translate(50, 140)">
|
||||
<circle cx="45" cy="60" r="42" fill="url(#step3)" stroke="#166534" stroke-width="2"/>
|
||||
<!-- Browser icon -->
|
||||
<circle cx="45" cy="45" r="14" fill="white" opacity="0.25"/>
|
||||
<circle cx="45" cy="45" r="10" fill="none" stroke="white" stroke-width="1.5"/>
|
||||
<line x1="35" y1="45" x2="55" y2="45" stroke="white" stroke-width="1"/>
|
||||
<line x1="45" y1="35" x2="45" y2="55" stroke="white" stroke-width="1"/>
|
||||
<text x="45" y="72" font-family="Arial,sans-serif" font-size="11" fill="white" text-anchor="middle" font-weight="bold">Browser</text>
|
||||
<text x="45" y="85" font-family="Arial,sans-serif" font-size="8" fill="#dcfce7" text-anchor="middle">브라우저</text>
|
||||
</g>
|
||||
<!-- Step 2 - Nginx -->
|
||||
<g transform="translate(175, 140)">
|
||||
<circle cx="45" cy="60" r="42" fill="url(#step3)" stroke="#166534" stroke-width="2"/>
|
||||
<!-- Shield/gate icon -->
|
||||
<path d="M45 32 L60 40 L60 52 Q60 62 45 68 Q30 62 30 52 L30 40 Z" fill="white" opacity="0.25"/>
|
||||
<text x="45" y="56" font-family="Arial,sans-serif" font-size="9" fill="white" text-anchor="middle" font-weight="bold">N</text>
|
||||
<text x="45" y="72" font-family="Arial,sans-serif" font-size="11" fill="white" text-anchor="middle" font-weight="bold">Nginx</text>
|
||||
<text x="45" y="85" font-family="Arial,sans-serif" font-size="8" fill="#dcfce7" text-anchor="middle">웹서버</text>
|
||||
</g>
|
||||
<!-- Step 3 - PHP-FPM -->
|
||||
<g transform="translate(300, 140)">
|
||||
<circle cx="45" cy="60" r="42" fill="url(#step3)" stroke="#166534" stroke-width="2"/>
|
||||
<!-- Gear icon -->
|
||||
<circle cx="45" cy="45" r="10" fill="none" stroke="white" stroke-width="2" opacity="0.8"/>
|
||||
<circle cx="45" cy="45" r="4" fill="white" opacity="0.5"/>
|
||||
<line x1="45" y1="33" x2="45" y2="37" stroke="white" stroke-width="2"/>
|
||||
<line x1="45" y1="53" x2="45" y2="57" stroke="white" stroke-width="2"/>
|
||||
<line x1="33" y1="45" x2="37" y2="45" stroke="white" stroke-width="2"/>
|
||||
<line x1="53" y1="45" x2="57" y2="45" stroke="white" stroke-width="2"/>
|
||||
<text x="45" y="72" font-family="Arial,sans-serif" font-size="10" fill="white" text-anchor="middle" font-weight="bold">PHP-FPM</text>
|
||||
<text x="45" y="85" font-family="Arial,sans-serif" font-size="8" fill="#dcfce7" text-anchor="middle">실행 엔진</text>
|
||||
</g>
|
||||
<!-- Step 4 - Laravel -->
|
||||
<g transform="translate(425, 140)">
|
||||
<circle cx="45" cy="60" r="42" fill="url(#step3)" stroke="#166534" stroke-width="2"/>
|
||||
<!-- Code brackets icon -->
|
||||
<text x="45" y="50" font-family="monospace" font-size="16" fill="white" text-anchor="middle" opacity="0.8">{..}</text>
|
||||
<text x="45" y="72" font-family="Arial,sans-serif" font-size="10" fill="white" text-anchor="middle" font-weight="bold">Laravel</text>
|
||||
<text x="45" y="85" font-family="Arial,sans-serif" font-size="8" fill="#dcfce7" text-anchor="middle">프레임워크</text>
|
||||
</g>
|
||||
<!-- Step 5 - MySQL -->
|
||||
<g transform="translate(550, 140)">
|
||||
<circle cx="45" cy="60" r="42" fill="url(#step3)" stroke="#166534" stroke-width="2"/>
|
||||
<!-- Database icon -->
|
||||
<ellipse cx="45" cy="38" rx="14" ry="6" fill="white" opacity="0.25" stroke="white" stroke-width="1.5"/>
|
||||
<rect x="31" y="38" width="28" height="16" fill="white" opacity="0.15"/>
|
||||
<ellipse cx="45" cy="54" rx="14" ry="6" fill="none" stroke="white" stroke-width="1.5" opacity="0.8"/>
|
||||
<line x1="31" y1="38" x2="31" y2="54" stroke="white" stroke-width="1.5" opacity="0.8"/>
|
||||
<line x1="59" y1="38" x2="59" y2="54" stroke="white" stroke-width="1.5" opacity="0.8"/>
|
||||
<text x="45" y="72" font-family="Arial,sans-serif" font-size="11" fill="white" text-anchor="middle" font-weight="bold">MySQL</text>
|
||||
<text x="45" y="85" font-family="Arial,sans-serif" font-size="8" fill="#dcfce7" text-anchor="middle">데이터베이스</text>
|
||||
</g>
|
||||
<!-- Step 6 - Response -->
|
||||
<g transform="translate(675, 140)">
|
||||
<circle cx="45" cy="60" r="42" fill="#166534" stroke="#0f5323" stroke-width="2"/>
|
||||
<!-- Check icon -->
|
||||
<circle cx="45" cy="45" r="12" fill="white" opacity="0.2"/>
|
||||
<polyline points="38,45 43,50 54,39" fill="none" stroke="white" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<text x="45" y="72" font-family="Arial,sans-serif" font-size="10" fill="white" text-anchor="middle" font-weight="bold">Response</text>
|
||||
<text x="45" y="85" font-family="Arial,sans-serif" font-size="8" fill="#bbf7d0" text-anchor="middle">응답 반환</text>
|
||||
</g>
|
||||
<!-- Return arrow -->
|
||||
<path d="M 720 250 Q 730 350 400 360 Q 70 350 60 250" fill="none" stroke="#16a34a" stroke-width="2" stroke-dasharray="8,4"/>
|
||||
<polygon points="60,250 55,262 65,262" fill="#16a34a"/>
|
||||
<rect x="350" y="345" width="100" height="25" rx="6" fill="#dcfce7" stroke="#22c55e" stroke-width="1.5"/>
|
||||
<text x="400" y="362" font-family="Arial,sans-serif" font-size="10" fill="#166534" text-anchor="middle" font-weight="bold">응답 반환</text>
|
||||
<!-- Detail cards below -->
|
||||
<g transform="translate(35, 400)">
|
||||
<rect width="115" height="90" rx="8" fill="white" stroke="#dcfce7" stroke-width="1.5"/>
|
||||
<rect width="115" height="4" rx="2" fill="#22c55e"/>
|
||||
<text x="58" y="22" font-family="Arial,sans-serif" font-size="9" fill="#166534" text-anchor="middle" font-weight="bold">사용자 요청</text>
|
||||
<text x="10" y="40" font-family="Arial,sans-serif" font-size="8" fill="#64748b">URL 입력</text>
|
||||
<text x="10" y="54" font-family="Arial,sans-serif" font-size="8" fill="#64748b">버튼 클릭</text>
|
||||
<text x="10" y="68" font-family="Arial,sans-serif" font-size="8" fill="#64748b">폼 전송</text>
|
||||
<text x="10" y="82" font-family="Arial,sans-serif" font-size="8" fill="#64748b">AJAX 호출</text>
|
||||
</g>
|
||||
<g transform="translate(160, 400)">
|
||||
<rect width="115" height="90" rx="8" fill="white" stroke="#dcfce7" stroke-width="1.5"/>
|
||||
<rect width="115" height="4" rx="2" fill="#22c55e"/>
|
||||
<text x="58" y="22" font-family="Arial,sans-serif" font-size="9" fill="#166534" text-anchor="middle" font-weight="bold">요청 분배</text>
|
||||
<text x="10" y="40" font-family="Arial,sans-serif" font-size="8" fill="#64748b">포트 80/443 수신</text>
|
||||
<text x="10" y="54" font-family="Arial,sans-serif" font-size="8" fill="#64748b">정적 파일 직접 응답</text>
|
||||
<text x="10" y="68" font-family="Arial,sans-serif" font-size="8" fill="#64748b">PHP 요청 전달</text>
|
||||
<text x="10" y="82" font-family="Arial,sans-serif" font-size="8" fill="#64748b">SSL 처리</text>
|
||||
</g>
|
||||
<g transform="translate(285, 400)">
|
||||
<rect width="115" height="90" rx="8" fill="white" stroke="#dcfce7" stroke-width="1.5"/>
|
||||
<rect width="115" height="4" rx="2" fill="#22c55e"/>
|
||||
<text x="58" y="22" font-family="Arial,sans-serif" font-size="9" fill="#166534" text-anchor="middle" font-weight="bold">코드 실행</text>
|
||||
<text x="10" y="40" font-family="Arial,sans-serif" font-size="8" fill="#64748b">PHP 프로세스 관리</text>
|
||||
<text x="10" y="54" font-family="Arial,sans-serif" font-size="8" fill="#64748b">워커 풀 운영</text>
|
||||
<text x="10" y="68" font-family="Arial,sans-serif" font-size="8" fill="#64748b">메모리 관리</text>
|
||||
<text x="10" y="82" font-family="Arial,sans-serif" font-size="8" fill="#64748b">타임아웃 처리</text>
|
||||
</g>
|
||||
<g transform="translate(410, 400)">
|
||||
<rect width="115" height="90" rx="8" fill="white" stroke="#dcfce7" stroke-width="1.5"/>
|
||||
<rect width="115" height="4" rx="2" fill="#22c55e"/>
|
||||
<text x="58" y="22" font-family="Arial,sans-serif" font-size="9" fill="#166534" text-anchor="middle" font-weight="bold">비즈니스 로직</text>
|
||||
<text x="10" y="40" font-family="Arial,sans-serif" font-size="8" fill="#64748b">라우팅</text>
|
||||
<text x="10" y="54" font-family="Arial,sans-serif" font-size="8" fill="#64748b">미들웨어 처리</text>
|
||||
<text x="10" y="68" font-family="Arial,sans-serif" font-size="8" fill="#64748b">컨트롤러 실행</text>
|
||||
<text x="10" y="82" font-family="Arial,sans-serif" font-size="8" fill="#64748b">뷰 렌더링</text>
|
||||
</g>
|
||||
<g transform="translate(535, 400)">
|
||||
<rect width="115" height="90" rx="8" fill="white" stroke="#dcfce7" stroke-width="1.5"/>
|
||||
<rect width="115" height="4" rx="2" fill="#22c55e"/>
|
||||
<text x="58" y="22" font-family="Arial,sans-serif" font-size="9" fill="#166534" text-anchor="middle" font-weight="bold">데이터 처리</text>
|
||||
<text x="10" y="40" font-family="Arial,sans-serif" font-size="8" fill="#64748b">쿼리 실행</text>
|
||||
<text x="10" y="54" font-family="Arial,sans-serif" font-size="8" fill="#64748b">데이터 조회</text>
|
||||
<text x="10" y="68" font-family="Arial,sans-serif" font-size="8" fill="#64748b">데이터 저장</text>
|
||||
<text x="10" y="82" font-family="Arial,sans-serif" font-size="8" fill="#64748b">트랜잭션 관리</text>
|
||||
</g>
|
||||
<g transform="translate(660, 400)">
|
||||
<rect width="115" height="90" rx="8" fill="white" stroke="#dcfce7" stroke-width="1.5"/>
|
||||
<rect width="115" height="4" rx="2" fill="#166534"/>
|
||||
<text x="58" y="22" font-family="Arial,sans-serif" font-size="9" fill="#166534" text-anchor="middle" font-weight="bold">결과 반환</text>
|
||||
<text x="10" y="40" font-family="Arial,sans-serif" font-size="8" fill="#64748b">HTML 페이지</text>
|
||||
<text x="10" y="54" font-family="Arial,sans-serif" font-size="8" fill="#64748b">JSON 데이터</text>
|
||||
<text x="10" y="68" font-family="Arial,sans-serif" font-size="8" fill="#64748b">파일 다운로드</text>
|
||||
<text x="10" y="82" font-family="Arial,sans-serif" font-size="8" fill="#64748b">리다이렉트</text>
|
||||
</g>
|
||||
<!-- Bottom -->
|
||||
<text x="400" y="560" font-family="Arial,sans-serif" font-size="11" fill="#94a3b8" text-anchor="middle">Request-Response Lifecycle — Browser to Database and Back</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
114
public/images/academy/server-knowledge/4.svg
Normal file
114
public/images/academy/server-knowledge/4.svg
Normal file
@@ -0,0 +1,114 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
|
||||
<defs>
|
||||
<linearGradient id="bg4" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#f0fdf4"/>
|
||||
<stop offset="100%" style="stop-color:#dcfce7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="800" height="600" fill="url(#bg4)"/>
|
||||
<!-- Title -->
|
||||
<text x="400" y="40" font-family="Arial,sans-serif" font-size="22" fill="#166534" text-anchor="middle" font-weight="bold">Linux 사용자/그룹 = 회사 조직도</text>
|
||||
<text x="400" y="62" font-family="Arial,sans-serif" font-size="12" fill="#64748b" text-anchor="middle">서버의 사용자와 그룹을 회사 조직처럼 이해하기</text>
|
||||
<!-- Company building header -->
|
||||
<rect x="200" y="85" width="400" height="40" rx="8" fill="#166534"/>
|
||||
<text x="400" y="110" font-family="Arial,sans-serif" font-size="16" fill="white" text-anchor="middle" font-weight="bold">SAM 서버 조직도</text>
|
||||
<!-- Connecting line from header -->
|
||||
<line x1="400" y1="125" x2="400" y2="155" stroke="#22c55e" stroke-width="2"/>
|
||||
<line x1="150" y1="155" x2="650" y2="155" stroke="#22c55e" stroke-width="2"/>
|
||||
<line x1="150" y1="155" x2="150" y2="175" stroke="#22c55e" stroke-width="2"/>
|
||||
<line x1="400" y1="155" x2="400" y2="175" stroke="#22c55e" stroke-width="2"/>
|
||||
<line x1="650" y1="155" x2="650" y2="175" stroke="#22c55e" stroke-width="2"/>
|
||||
<!-- Group 1: root (CEO) -->
|
||||
<g transform="translate(75, 175)">
|
||||
<rect width="150" height="50" rx="8" fill="#dc2626" opacity="0.15" stroke="#dc2626" stroke-width="2"/>
|
||||
<text x="75" y="22" font-family="Arial,sans-serif" font-size="11" fill="#dc2626" text-anchor="middle" font-weight="bold">root 그룹</text>
|
||||
<text x="75" y="38" font-family="Arial,sans-serif" font-size="10" fill="#991b1b" text-anchor="middle">CEO / 최고 권한</text>
|
||||
<!-- Connect to user -->
|
||||
<line x1="75" y1="50" x2="75" y2="75" stroke="#dc2626" stroke-width="1.5"/>
|
||||
</g>
|
||||
<!-- root user card -->
|
||||
<g transform="translate(90, 255)">
|
||||
<rect width="120" height="130" rx="10" fill="white" stroke="#dc2626" stroke-width="2"/>
|
||||
<!-- Avatar -->
|
||||
<circle cx="60" cy="35" r="22" fill="#dc2626" opacity="0.15"/>
|
||||
<circle cx="60" cy="28" r="10" fill="#dc2626" opacity="0.4"/>
|
||||
<ellipse cx="60" cy="48" rx="14" ry="8" fill="#dc2626" opacity="0.3"/>
|
||||
<!-- Crown icon -->
|
||||
<text x="60" y="22" font-family="Arial,sans-serif" font-size="10" fill="#dc2626" text-anchor="middle">♕</text>
|
||||
<text x="60" y="75" font-family="Arial,sans-serif" font-size="14" fill="#dc2626" text-anchor="middle" font-weight="bold">root</text>
|
||||
<text x="60" y="92" font-family="Arial,sans-serif" font-size="9" fill="#64748b" text-anchor="middle">UID: 0</text>
|
||||
<text x="60" y="106" font-family="Arial,sans-serif" font-size="8" fill="#991b1b" text-anchor="middle">모든 권한 보유</text>
|
||||
<text x="60" y="120" font-family="Arial,sans-serif" font-size="8" fill="#64748b" text-anchor="middle">시스템 관리자</text>
|
||||
</g>
|
||||
<!-- Group 2: pro (Director) -->
|
||||
<g transform="translate(325, 175)">
|
||||
<rect width="150" height="50" rx="8" fill="#22c55e" opacity="0.15" stroke="#22c55e" stroke-width="2"/>
|
||||
<text x="75" y="22" font-family="Arial,sans-serif" font-size="11" fill="#16a34a" text-anchor="middle" font-weight="bold">pro 그룹</text>
|
||||
<text x="75" y="38" font-family="Arial,sans-serif" font-size="10" fill="#166534" text-anchor="middle">팀장 / 배포 담당</text>
|
||||
<!-- Connect to user -->
|
||||
<line x1="75" y1="50" x2="75" y2="75" stroke="#22c55e" stroke-width="1.5"/>
|
||||
</g>
|
||||
<!-- pro user card -->
|
||||
<g transform="translate(340, 255)">
|
||||
<rect width="120" height="130" rx="10" fill="white" stroke="#22c55e" stroke-width="2"/>
|
||||
<!-- Avatar -->
|
||||
<circle cx="60" cy="35" r="22" fill="#22c55e" opacity="0.15"/>
|
||||
<circle cx="60" cy="28" r="10" fill="#22c55e" opacity="0.4"/>
|
||||
<ellipse cx="60" cy="48" rx="14" ry="8" fill="#22c55e" opacity="0.3"/>
|
||||
<!-- Person icon -->
|
||||
<circle cx="60" cy="26" r="6" fill="none" stroke="#16a34a" stroke-width="1.5"/>
|
||||
<path d="M48 43 Q60 35 72 43" fill="none" stroke="#16a34a" stroke-width="1.5"/>
|
||||
<text x="60" y="75" font-family="Arial,sans-serif" font-size="14" fill="#16a34a" text-anchor="middle" font-weight="bold">pro</text>
|
||||
<text x="60" y="92" font-family="Arial,sans-serif" font-size="9" fill="#64748b" text-anchor="middle">UID: 1000</text>
|
||||
<text x="60" y="106" font-family="Arial,sans-serif" font-size="8" fill="#166534" text-anchor="middle">배포/운영 담당</text>
|
||||
<text x="60" y="120" font-family="Arial,sans-serif" font-size="8" fill="#64748b" text-anchor="middle">SSH 접속 계정</text>
|
||||
</g>
|
||||
<!-- Group 3: www-data (Staff) -->
|
||||
<g transform="translate(575, 175)">
|
||||
<rect width="150" height="50" rx="8" fill="#3b82f6" opacity="0.15" stroke="#3b82f6" stroke-width="2"/>
|
||||
<text x="75" y="22" font-family="Arial,sans-serif" font-size="11" fill="#2563eb" text-anchor="middle" font-weight="bold">www-data 그룹</text>
|
||||
<text x="75" y="38" font-family="Arial,sans-serif" font-size="10" fill="#1e40af" text-anchor="middle">실무자 / 웹 서비스</text>
|
||||
<!-- Connect to user -->
|
||||
<line x1="75" y1="50" x2="75" y2="75" stroke="#3b82f6" stroke-width="1.5"/>
|
||||
</g>
|
||||
<!-- www-data user card -->
|
||||
<g transform="translate(590, 255)">
|
||||
<rect width="120" height="130" rx="10" fill="white" stroke="#3b82f6" stroke-width="2"/>
|
||||
<!-- Avatar -->
|
||||
<circle cx="60" cy="35" r="22" fill="#3b82f6" opacity="0.15"/>
|
||||
<circle cx="60" cy="28" r="10" fill="#3b82f6" opacity="0.4"/>
|
||||
<ellipse cx="60" cy="48" rx="14" ry="8" fill="#3b82f6" opacity="0.3"/>
|
||||
<!-- Server icon -->
|
||||
<rect x="50" y="22" width="20" height="14" rx="2" fill="none" stroke="#2563eb" stroke-width="1.5"/>
|
||||
<circle cx="65" cy="29" r="2" fill="#2563eb"/>
|
||||
<text x="60" y="75" font-family="Arial,sans-serif" font-size="12" fill="#2563eb" text-anchor="middle" font-weight="bold">www-data</text>
|
||||
<text x="60" y="92" font-family="Arial,sans-serif" font-size="9" fill="#64748b" text-anchor="middle">UID: 33</text>
|
||||
<text x="60" y="106" font-family="Arial,sans-serif" font-size="8" fill="#1e40af" text-anchor="middle">Nginx/PHP 실행</text>
|
||||
<text x="60" y="120" font-family="Arial,sans-serif" font-size="8" fill="#64748b" text-anchor="middle">웹 서비스 전용</text>
|
||||
</g>
|
||||
<!-- Cross-group membership line (pro is also in www-data) -->
|
||||
<path d="M 460 320 Q 520 310 590 320" fill="none" stroke="#f59e0b" stroke-width="2" stroke-dasharray="6,3"/>
|
||||
<rect x="490" y="300" width="60" height="18" rx="4" fill="#fef3c7" stroke="#f59e0b" stroke-width="1"/>
|
||||
<text x="520" y="313" font-family="Arial,sans-serif" font-size="8" fill="#92400e" text-anchor="middle">겸직</text>
|
||||
<!-- Legend section at bottom -->
|
||||
<rect x="80" y="420" width="640" height="140" rx="10" fill="white" stroke="#e2e8f0" stroke-width="1.5"/>
|
||||
<text x="400" y="448" font-family="Arial,sans-serif" font-size="14" fill="#166534" text-anchor="middle" font-weight="bold">회사 비유로 이해하기</text>
|
||||
<!-- Legend items -->
|
||||
<g transform="translate(110, 460)">
|
||||
<circle cx="10" cy="10" r="8" fill="#dc2626" opacity="0.2" stroke="#dc2626" stroke-width="1.5"/>
|
||||
<text x="30" y="14" font-family="Arial,sans-serif" font-size="11" fill="#1e293b" font-weight="bold">root</text>
|
||||
<text x="80" y="14" font-family="Arial,sans-serif" font-size="11" fill="#64748b">= CEO. 모든 결재 권한. 함부로 사용하면 위험!</text>
|
||||
</g>
|
||||
<g transform="translate(110, 490)">
|
||||
<circle cx="10" cy="10" r="8" fill="#22c55e" opacity="0.2" stroke="#22c55e" stroke-width="1.5"/>
|
||||
<text x="30" y="14" font-family="Arial,sans-serif" font-size="11" fill="#1e293b" font-weight="bold">pro</text>
|
||||
<text x="80" y="14" font-family="Arial,sans-serif" font-size="11" fill="#64748b">= 팀장. SSH 접속하여 배포/운영을 담당</text>
|
||||
</g>
|
||||
<g transform="translate(110, 520)">
|
||||
<circle cx="10" cy="10" r="8" fill="#3b82f6" opacity="0.2" stroke="#3b82f6" stroke-width="1.5"/>
|
||||
<text x="30" y="14" font-family="Arial,sans-serif" font-size="11" fill="#1e293b" font-weight="bold">www-data</text>
|
||||
<text x="110" y="14" font-family="Arial,sans-serif" font-size="11" fill="#64748b">= 실무자. Nginx, PHP가 사용하는 서비스 계정</text>
|
||||
</g>
|
||||
<!-- Bottom -->
|
||||
<text x="400" y="585" font-family="Arial,sans-serif" font-size="11" fill="#94a3b8" text-anchor="middle">Linux Users & Groups — Organization Chart Analogy</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 8.3 KiB |
128
public/images/academy/server-knowledge/5.svg
Normal file
128
public/images/academy/server-knowledge/5.svg
Normal file
@@ -0,0 +1,128 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
|
||||
<defs>
|
||||
<linearGradient id="bg5" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#f0fdf4"/>
|
||||
<stop offset="100%" style="stop-color:#dcfce7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="800" height="600" fill="url(#bg5)"/>
|
||||
<!-- Title -->
|
||||
<text x="400" y="40" font-family="Arial,sans-serif" font-size="22" fill="#166534" text-anchor="middle" font-weight="bold">파일 권한 해독하기</text>
|
||||
<text x="400" y="62" font-family="Arial,sans-serif" font-size="12" fill="#64748b" text-anchor="middle">drwxrwxr-x 가 무슨 뜻인지 한눈에 파악하기</text>
|
||||
<!-- Main permission string display -->
|
||||
<rect x="100" y="90" width="600" height="80" rx="12" fill="white" stroke="#e2e8f0" stroke-width="2"/>
|
||||
<!-- d -->
|
||||
<rect x="115" y="100" width="50" height="60" rx="6" fill="#8b5cf6" opacity="0.15" stroke="#8b5cf6" stroke-width="2"/>
|
||||
<text x="140" y="140" font-family="monospace" font-size="36" fill="#7c3aed" text-anchor="middle" font-weight="bold">d</text>
|
||||
<!-- rwx (owner) -->
|
||||
<rect x="175" y="100" width="45" height="60" rx="6" fill="#22c55e" opacity="0.15" stroke="#22c55e" stroke-width="2"/>
|
||||
<text x="198" y="140" font-family="monospace" font-size="36" fill="#16a34a" text-anchor="middle" font-weight="bold">r</text>
|
||||
<rect x="225" y="100" width="45" height="60" rx="6" fill="#22c55e" opacity="0.15" stroke="#22c55e" stroke-width="2"/>
|
||||
<text x="248" y="140" font-family="monospace" font-size="36" fill="#16a34a" text-anchor="middle" font-weight="bold">w</text>
|
||||
<rect x="275" y="100" width="45" height="60" rx="6" fill="#22c55e" opacity="0.15" stroke="#22c55e" stroke-width="2"/>
|
||||
<text x="298" y="140" font-family="monospace" font-size="36" fill="#16a34a" text-anchor="middle" font-weight="bold">x</text>
|
||||
<!-- rwx (group) -->
|
||||
<rect x="335" y="100" width="45" height="60" rx="6" fill="#3b82f6" opacity="0.15" stroke="#3b82f6" stroke-width="2"/>
|
||||
<text x="358" y="140" font-family="monospace" font-size="36" fill="#2563eb" text-anchor="middle" font-weight="bold">r</text>
|
||||
<rect x="385" y="100" width="45" height="60" rx="6" fill="#3b82f6" opacity="0.15" stroke="#3b82f6" stroke-width="2"/>
|
||||
<text x="408" y="140" font-family="monospace" font-size="36" fill="#2563eb" text-anchor="middle" font-weight="bold">w</text>
|
||||
<rect x="435" y="100" width="45" height="60" rx="6" fill="#3b82f6" opacity="0.15" stroke="#3b82f6" stroke-width="2"/>
|
||||
<text x="458" y="140" font-family="monospace" font-size="36" fill="#2563eb" text-anchor="middle" font-weight="bold">x</text>
|
||||
<!-- r-x (others) -->
|
||||
<rect x="495" y="100" width="45" height="60" rx="6" fill="#f59e0b" opacity="0.15" stroke="#f59e0b" stroke-width="2"/>
|
||||
<text x="518" y="140" font-family="monospace" font-size="36" fill="#d97706" text-anchor="middle" font-weight="bold">r</text>
|
||||
<rect x="545" y="100" width="45" height="60" rx="6" fill="#94a3b8" opacity="0.15" stroke="#94a3b8" stroke-width="2"/>
|
||||
<text x="568" y="140" font-family="monospace" font-size="36" fill="#94a3b8" text-anchor="middle" font-weight="bold">-</text>
|
||||
<rect x="595" y="100" width="45" height="60" rx="6" fill="#f59e0b" opacity="0.15" stroke="#f59e0b" stroke-width="2"/>
|
||||
<text x="618" y="140" font-family="monospace" font-size="36" fill="#d97706" text-anchor="middle" font-weight="bold">x</text>
|
||||
<!-- Bracket labels -->
|
||||
<!-- Type bracket -->
|
||||
<line x1="115" y1="170" x2="165" y2="170" stroke="#8b5cf6" stroke-width="2"/>
|
||||
<line x1="140" y1="170" x2="140" y2="185" stroke="#8b5cf6" stroke-width="2"/>
|
||||
<text x="140" y="200" font-family="Arial,sans-serif" font-size="11" fill="#7c3aed" text-anchor="middle" font-weight="bold">타입</text>
|
||||
<text x="140" y="215" font-family="Arial,sans-serif" font-size="9" fill="#8b5cf6" text-anchor="middle">디렉토리</text>
|
||||
<!-- Owner bracket -->
|
||||
<line x1="175" y1="170" x2="320" y2="170" stroke="#22c55e" stroke-width="2"/>
|
||||
<line x1="248" y1="170" x2="248" y2="185" stroke="#22c55e" stroke-width="2"/>
|
||||
<text x="248" y="200" font-family="Arial,sans-serif" font-size="11" fill="#16a34a" text-anchor="middle" font-weight="bold">소유자 (Owner)</text>
|
||||
<text x="248" y="215" font-family="Arial,sans-serif" font-size="9" fill="#22c55e" text-anchor="middle">읽기+쓰기+실행</text>
|
||||
<!-- Group bracket -->
|
||||
<line x1="335" y1="170" x2="480" y2="170" stroke="#3b82f6" stroke-width="2"/>
|
||||
<line x1="408" y1="170" x2="408" y2="185" stroke="#3b82f6" stroke-width="2"/>
|
||||
<text x="408" y="200" font-family="Arial,sans-serif" font-size="11" fill="#2563eb" text-anchor="middle" font-weight="bold">그룹 (Group)</text>
|
||||
<text x="408" y="215" font-family="Arial,sans-serif" font-size="9" fill="#3b82f6" text-anchor="middle">읽기+쓰기+실행</text>
|
||||
<!-- Others bracket -->
|
||||
<line x1="495" y1="170" x2="640" y2="170" stroke="#f59e0b" stroke-width="2"/>
|
||||
<line x1="568" y1="170" x2="568" y2="185" stroke="#f59e0b" stroke-width="2"/>
|
||||
<text x="568" y="200" font-family="Arial,sans-serif" font-size="11" fill="#d97706" text-anchor="middle" font-weight="bold">기타 (Others)</text>
|
||||
<text x="568" y="215" font-family="Arial,sans-serif" font-size="9" fill="#f59e0b" text-anchor="middle">읽기+실행만</text>
|
||||
<!-- Detailed explanation cards -->
|
||||
<!-- Type card -->
|
||||
<g transform="translate(65, 245)">
|
||||
<rect width="140" height="140" rx="10" fill="white" stroke="#8b5cf6" stroke-width="1.5"/>
|
||||
<rect width="140" height="6" rx="3" fill="#8b5cf6"/>
|
||||
<text x="70" y="28" font-family="Arial,sans-serif" font-size="12" fill="#7c3aed" text-anchor="middle" font-weight="bold">타입 문자</text>
|
||||
<line x1="15" y1="38" x2="125" y2="38" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<text x="30" y="58" font-family="monospace" font-size="14" fill="#7c3aed" font-weight="bold">d</text>
|
||||
<text x="50" y="58" font-family="Arial,sans-serif" font-size="10" fill="#64748b">디렉토리</text>
|
||||
<text x="30" y="78" font-family="monospace" font-size="14" fill="#7c3aed" font-weight="bold">-</text>
|
||||
<text x="50" y="78" font-family="Arial,sans-serif" font-size="10" fill="#64748b">일반 파일</text>
|
||||
<text x="30" y="98" font-family="monospace" font-size="14" fill="#7c3aed" font-weight="bold">l</text>
|
||||
<text x="50" y="98" font-family="Arial,sans-serif" font-size="10" fill="#64748b">심볼릭 링크</text>
|
||||
<text x="30" y="118" font-family="monospace" font-size="14" fill="#7c3aed" font-weight="bold">b</text>
|
||||
<text x="50" y="118" font-family="Arial,sans-serif" font-size="10" fill="#64748b">블록 디바이스</text>
|
||||
</g>
|
||||
<!-- Permission meaning card -->
|
||||
<g transform="translate(230, 245)">
|
||||
<rect width="160" height="140" rx="10" fill="white" stroke="#22c55e" stroke-width="1.5"/>
|
||||
<rect width="160" height="6" rx="3" fill="#22c55e"/>
|
||||
<text x="80" y="28" font-family="Arial,sans-serif" font-size="12" fill="#16a34a" text-anchor="middle" font-weight="bold">권한 문자 의미</text>
|
||||
<line x1="15" y1="38" x2="145" y2="38" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<text x="30" y="60" font-family="monospace" font-size="16" fill="#16a34a" font-weight="bold">r</text>
|
||||
<text x="55" y="60" font-family="Arial,sans-serif" font-size="11" fill="#64748b">Read (읽기)</text>
|
||||
<text x="30" y="82" font-family="monospace" font-size="16" fill="#16a34a" font-weight="bold">w</text>
|
||||
<text x="55" y="82" font-family="Arial,sans-serif" font-size="11" fill="#64748b">Write (쓰기)</text>
|
||||
<text x="30" y="104" font-family="monospace" font-size="16" fill="#16a34a" font-weight="bold">x</text>
|
||||
<text x="55" y="104" font-family="Arial,sans-serif" font-size="11" fill="#64748b">Execute (실행)</text>
|
||||
<text x="30" y="126" font-family="monospace" font-size="16" fill="#94a3b8" font-weight="bold">-</text>
|
||||
<text x="55" y="126" font-family="Arial,sans-serif" font-size="11" fill="#64748b">권한 없음</text>
|
||||
</g>
|
||||
<!-- Numeric value card -->
|
||||
<g transform="translate(415, 245)">
|
||||
<rect width="160" height="140" rx="10" fill="white" stroke="#3b82f6" stroke-width="1.5"/>
|
||||
<rect width="160" height="6" rx="3" fill="#3b82f6"/>
|
||||
<text x="80" y="28" font-family="Arial,sans-serif" font-size="12" fill="#2563eb" text-anchor="middle" font-weight="bold">숫자 변환</text>
|
||||
<line x1="15" y1="38" x2="145" y2="38" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<text x="30" y="60" font-family="monospace" font-size="14" fill="#2563eb" font-weight="bold">r</text>
|
||||
<text x="55" y="60" font-family="Arial,sans-serif" font-size="11" fill="#64748b">= 4</text>
|
||||
<text x="30" y="82" font-family="monospace" font-size="14" fill="#2563eb" font-weight="bold">w</text>
|
||||
<text x="55" y="82" font-family="Arial,sans-serif" font-size="11" fill="#64748b">= 2</text>
|
||||
<text x="30" y="104" font-family="monospace" font-size="14" fill="#2563eb" font-weight="bold">x</text>
|
||||
<text x="55" y="104" font-family="Arial,sans-serif" font-size="11" fill="#64748b">= 1</text>
|
||||
<line x1="15" y1="112" x2="145" y2="112" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<text x="30" y="130" font-family="monospace" font-size="13" fill="#2563eb" font-weight="bold">rwx</text>
|
||||
<text x="75" y="130" font-family="Arial,sans-serif" font-size="11" fill="#64748b">= 4+2+1 = 7</text>
|
||||
</g>
|
||||
<!-- Example conversion card -->
|
||||
<g transform="translate(600, 245)">
|
||||
<rect width="140" height="140" rx="10" fill="white" stroke="#f59e0b" stroke-width="1.5"/>
|
||||
<rect width="140" height="6" rx="3" fill="#f59e0b"/>
|
||||
<text x="70" y="28" font-family="Arial,sans-serif" font-size="12" fill="#d97706" text-anchor="middle" font-weight="bold">이 예시 해석</text>
|
||||
<line x1="15" y1="38" x2="125" y2="38" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<text x="25" y="58" font-family="monospace" font-size="11" fill="#16a34a" font-weight="bold">rwx</text>
|
||||
<text x="70" y="58" font-family="Arial,sans-serif" font-size="10" fill="#64748b">= 7</text>
|
||||
<text x="25" y="78" font-family="monospace" font-size="11" fill="#2563eb" font-weight="bold">rwx</text>
|
||||
<text x="70" y="78" font-family="Arial,sans-serif" font-size="10" fill="#64748b">= 7</text>
|
||||
<text x="25" y="98" font-family="monospace" font-size="11" fill="#d97706" font-weight="bold">r-x</text>
|
||||
<text x="70" y="98" font-family="Arial,sans-serif" font-size="10" fill="#64748b">= 5</text>
|
||||
<line x1="15" y1="108" x2="125" y2="108" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<text x="70" y="130" font-family="monospace" font-size="20" fill="#166534" text-anchor="middle" font-weight="bold">775</text>
|
||||
</g>
|
||||
<!-- Bottom summary -->
|
||||
<rect x="100" y="410" width="600" height="75" rx="10" fill="#166534" opacity="0.08" stroke="#22c55e" stroke-width="1.5"/>
|
||||
<text x="400" y="435" font-family="Arial,sans-serif" font-size="13" fill="#166534" text-anchor="middle" font-weight="bold">drwxrwxr-x = 디렉토리 | 소유자:전체허용(7) | 그룹:전체허용(7) | 기타:읽기+실행(5)</text>
|
||||
<text x="400" y="458" font-family="Arial,sans-serif" font-size="11" fill="#64748b" text-anchor="middle">소유자와 그룹은 자유롭게, 외부인은 읽기/실행만 가능한 폴더</text>
|
||||
<text x="400" y="475" font-family="monospace" font-size="12" fill="#16a34a" text-anchor="middle">chmod 775 my-folder</text>
|
||||
<!-- Bottom -->
|
||||
<text x="400" y="560" font-family="Arial,sans-serif" font-size="11" fill="#94a3b8" text-anchor="middle">File Permission Decode Infographic — drwxrwxr-x</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
131
public/images/academy/server-knowledge/6.svg
Normal file
131
public/images/academy/server-knowledge/6.svg
Normal file
@@ -0,0 +1,131 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
|
||||
<defs>
|
||||
<linearGradient id="bg6" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#f0fdf4"/>
|
||||
<stop offset="100%" style="stop-color:#dcfce7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="800" height="600" fill="url(#bg6)"/>
|
||||
<!-- Title -->
|
||||
<text x="400" y="40" font-family="Arial,sans-serif" font-size="22" fill="#166534" text-anchor="middle" font-weight="bold">umask 계산법</text>
|
||||
<text x="400" y="62" font-family="Arial,sans-serif" font-size="12" fill="#64748b" text-anchor="middle">기본 권한에서 umask를 빼면 실제 파일 권한이 결정됩니다</text>
|
||||
<!-- Main calculation area -->
|
||||
<!-- 666 section -->
|
||||
<g transform="translate(80, 100)">
|
||||
<text x="100" y="20" font-family="Arial,sans-serif" font-size="14" fill="#166534" text-anchor="middle" font-weight="bold">기본 파일 권한</text>
|
||||
<rect x="0" y="30" width="200" height="100" rx="12" fill="white" stroke="#22c55e" stroke-width="2.5"/>
|
||||
<text x="100" y="85" font-family="monospace" font-size="52" fill="#16a34a" text-anchor="middle" font-weight="bold">666</text>
|
||||
<text x="100" y="120" font-family="monospace" font-size="13" fill="#64748b" text-anchor="middle">rw-rw-rw-</text>
|
||||
<!-- Individual permission boxes -->
|
||||
<g transform="translate(10, 140)">
|
||||
<rect width="55" height="35" rx="5" fill="#22c55e" opacity="0.15" stroke="#22c55e" stroke-width="1"/>
|
||||
<text x="28" y="15" font-family="monospace" font-size="11" fill="#16a34a" text-anchor="middle" font-weight="bold">rw-</text>
|
||||
<text x="28" y="28" font-family="monospace" font-size="10" fill="#64748b" text-anchor="middle">6</text>
|
||||
</g>
|
||||
<g transform="translate(72, 140)">
|
||||
<rect width="55" height="35" rx="5" fill="#22c55e" opacity="0.15" stroke="#22c55e" stroke-width="1"/>
|
||||
<text x="28" y="15" font-family="monospace" font-size="11" fill="#16a34a" text-anchor="middle" font-weight="bold">rw-</text>
|
||||
<text x="28" y="28" font-family="monospace" font-size="10" fill="#64748b" text-anchor="middle">6</text>
|
||||
</g>
|
||||
<g transform="translate(134, 140)">
|
||||
<rect width="55" height="35" rx="5" fill="#22c55e" opacity="0.15" stroke="#22c55e" stroke-width="1"/>
|
||||
<text x="28" y="15" font-family="monospace" font-size="11" fill="#16a34a" text-anchor="middle" font-weight="bold">rw-</text>
|
||||
<text x="28" y="28" font-family="monospace" font-size="10" fill="#64748b" text-anchor="middle">6</text>
|
||||
</g>
|
||||
</g>
|
||||
<!-- Minus sign -->
|
||||
<g transform="translate(305, 155)">
|
||||
<circle cx="25" cy="25" r="25" fill="#dc2626" opacity="0.15" stroke="#dc2626" stroke-width="2"/>
|
||||
<text x="25" y="35" font-family="Arial,sans-serif" font-size="36" fill="#dc2626" text-anchor="middle" font-weight="bold">-</text>
|
||||
</g>
|
||||
<!-- 022 section -->
|
||||
<g transform="translate(370, 100)">
|
||||
<text x="100" y="20" font-family="Arial,sans-serif" font-size="14" fill="#dc2626" text-anchor="middle" font-weight="bold">umask 값</text>
|
||||
<rect x="0" y="30" width="200" height="100" rx="12" fill="white" stroke="#dc2626" stroke-width="2.5"/>
|
||||
<text x="100" y="85" font-family="monospace" font-size="52" fill="#dc2626" text-anchor="middle" font-weight="bold">022</text>
|
||||
<text x="100" y="120" font-family="monospace" font-size="13" fill="#64748b" text-anchor="middle">---w--w-</text>
|
||||
<!-- Individual permission boxes -->
|
||||
<g transform="translate(10, 140)">
|
||||
<rect width="55" height="35" rx="5" fill="#dc2626" opacity="0.1" stroke="#dc2626" stroke-width="1"/>
|
||||
<text x="28" y="15" font-family="monospace" font-size="11" fill="#dc2626" text-anchor="middle" font-weight="bold">---</text>
|
||||
<text x="28" y="28" font-family="monospace" font-size="10" fill="#64748b" text-anchor="middle">0</text>
|
||||
</g>
|
||||
<g transform="translate(72, 140)">
|
||||
<rect width="55" height="35" rx="5" fill="#dc2626" opacity="0.1" stroke="#dc2626" stroke-width="1"/>
|
||||
<text x="28" y="15" font-family="monospace" font-size="11" fill="#dc2626" text-anchor="middle" font-weight="bold">-w-</text>
|
||||
<text x="28" y="28" font-family="monospace" font-size="10" fill="#64748b" text-anchor="middle">2</text>
|
||||
</g>
|
||||
<g transform="translate(134, 140)">
|
||||
<rect width="55" height="35" rx="5" fill="#dc2626" opacity="0.1" stroke="#dc2626" stroke-width="1"/>
|
||||
<text x="28" y="15" font-family="monospace" font-size="11" fill="#dc2626" text-anchor="middle" font-weight="bold">-w-</text>
|
||||
<text x="28" y="28" font-family="monospace" font-size="10" fill="#64748b" text-anchor="middle">2</text>
|
||||
</g>
|
||||
</g>
|
||||
<!-- Equals sign -->
|
||||
<g transform="translate(595, 155)">
|
||||
<circle cx="25" cy="25" r="25" fill="#166534" opacity="0.15" stroke="#166534" stroke-width="2"/>
|
||||
<text x="25" y="35" font-family="Arial,sans-serif" font-size="32" fill="#166534" text-anchor="middle" font-weight="bold">=</text>
|
||||
</g>
|
||||
<!-- 644 result -->
|
||||
<g transform="translate(645, 100)">
|
||||
<text x="75" y="20" font-family="Arial,sans-serif" font-size="14" fill="#166534" text-anchor="middle" font-weight="bold">실제 권한</text>
|
||||
<rect x="0" y="30" width="135" height="100" rx="12" fill="#166534" stroke="#0f5323" stroke-width="2.5"/>
|
||||
<text x="68" y="85" font-family="monospace" font-size="48" fill="white" text-anchor="middle" font-weight="bold">644</text>
|
||||
<text x="68" y="120" font-family="monospace" font-size="13" fill="#bbf7d0" text-anchor="middle">rw-r--r--</text>
|
||||
<!-- Individual result boxes -->
|
||||
<g transform="translate(5, 140)">
|
||||
<rect width="38" height="35" rx="5" fill="#166534" opacity="0.15" stroke="#166534" stroke-width="1"/>
|
||||
<text x="19" y="15" font-family="monospace" font-size="10" fill="#166534" text-anchor="middle" font-weight="bold">rw-</text>
|
||||
<text x="19" y="28" font-family="monospace" font-size="10" fill="#64748b" text-anchor="middle">6</text>
|
||||
</g>
|
||||
<g transform="translate(48, 140)">
|
||||
<rect width="38" height="35" rx="5" fill="#166534" opacity="0.15" stroke="#166534" stroke-width="1"/>
|
||||
<text x="19" y="15" font-family="monospace" font-size="10" fill="#166534" text-anchor="middle" font-weight="bold">r--</text>
|
||||
<text x="19" y="28" font-family="monospace" font-size="10" fill="#64748b" text-anchor="middle">4</text>
|
||||
</g>
|
||||
<g transform="translate(91, 140)">
|
||||
<rect width="38" height="35" rx="5" fill="#166534" opacity="0.15" stroke="#166534" stroke-width="1"/>
|
||||
<text x="19" y="15" font-family="monospace" font-size="10" fill="#166534" text-anchor="middle" font-weight="bold">r--</text>
|
||||
<text x="19" y="28" font-family="monospace" font-size="10" fill="#64748b" text-anchor="middle">4</text>
|
||||
</g>
|
||||
</g>
|
||||
<!-- Step-by-step calculation below -->
|
||||
<rect x="80" y="310" width="640" height="170" rx="12" fill="white" stroke="#e2e8f0" stroke-width="1.5"/>
|
||||
<text x="400" y="340" font-family="Arial,sans-serif" font-size="14" fill="#166534" text-anchor="middle" font-weight="bold">자리별 계산 과정</text>
|
||||
<!-- Owner column -->
|
||||
<g transform="translate(150, 350)">
|
||||
<text x="50" y="15" font-family="Arial,sans-serif" font-size="11" fill="#22c55e" text-anchor="middle" font-weight="bold">소유자</text>
|
||||
<rect x="10" y="22" width="80" height="28" rx="5" fill="#22c55e" opacity="0.1"/>
|
||||
<text x="50" y="42" font-family="monospace" font-size="14" fill="#16a34a" text-anchor="middle">rw- (6)</text>
|
||||
<text x="50" y="62" font-family="Arial,sans-serif" font-size="14" fill="#dc2626" text-anchor="middle">- --- (0)</text>
|
||||
<line x1="10" y1="70" x2="90" y2="70" stroke="#334155" stroke-width="1.5"/>
|
||||
<rect x="10" y="76" width="80" height="28" rx="5" fill="#166534" opacity="0.1"/>
|
||||
<text x="50" y="96" font-family="monospace" font-size="14" fill="#166534" text-anchor="middle" font-weight="bold">rw- (6)</text>
|
||||
</g>
|
||||
<!-- Group column -->
|
||||
<g transform="translate(350, 350)">
|
||||
<text x="50" y="15" font-family="Arial,sans-serif" font-size="11" fill="#3b82f6" text-anchor="middle" font-weight="bold">그룹</text>
|
||||
<rect x="10" y="22" width="80" height="28" rx="5" fill="#3b82f6" opacity="0.1"/>
|
||||
<text x="50" y="42" font-family="monospace" font-size="14" fill="#2563eb" text-anchor="middle">rw- (6)</text>
|
||||
<text x="50" y="62" font-family="Arial,sans-serif" font-size="14" fill="#dc2626" text-anchor="middle">- -w- (2)</text>
|
||||
<line x1="10" y1="70" x2="90" y2="70" stroke="#334155" stroke-width="1.5"/>
|
||||
<rect x="10" y="76" width="80" height="28" rx="5" fill="#166534" opacity="0.1"/>
|
||||
<text x="50" y="96" font-family="monospace" font-size="14" fill="#166534" text-anchor="middle" font-weight="bold">r-- (4)</text>
|
||||
</g>
|
||||
<!-- Others column -->
|
||||
<g transform="translate(550, 350)">
|
||||
<text x="50" y="15" font-family="Arial,sans-serif" font-size="11" fill="#f59e0b" text-anchor="middle" font-weight="bold">기타</text>
|
||||
<rect x="10" y="22" width="80" height="28" rx="5" fill="#f59e0b" opacity="0.1"/>
|
||||
<text x="50" y="42" font-family="monospace" font-size="14" fill="#d97706" text-anchor="middle">rw- (6)</text>
|
||||
<text x="50" y="62" font-family="Arial,sans-serif" font-size="14" fill="#dc2626" text-anchor="middle">- -w- (2)</text>
|
||||
<line x1="10" y1="70" x2="90" y2="70" stroke="#334155" stroke-width="1.5"/>
|
||||
<rect x="10" y="76" width="80" height="28" rx="5" fill="#166534" opacity="0.1"/>
|
||||
<text x="50" y="96" font-family="monospace" font-size="14" fill="#166534" text-anchor="middle" font-weight="bold">r-- (4)</text>
|
||||
</g>
|
||||
<!-- Key takeaway -->
|
||||
<rect x="120" y="500" width="560" height="50" rx="10" fill="#166534" opacity="0.08" stroke="#22c55e" stroke-width="1.5"/>
|
||||
<text x="400" y="522" font-family="Arial,sans-serif" font-size="12" fill="#166534" text-anchor="middle" font-weight="bold">umask 022 = 그룹과 기타 사용자의 쓰기(w) 권한을 제거</text>
|
||||
<text x="400" y="540" font-family="Arial,sans-serif" font-size="11" fill="#64748b" text-anchor="middle">결과: 소유자만 쓸 수 있고, 나머지는 읽기만 가능</text>
|
||||
<!-- Bottom -->
|
||||
<text x="400" y="580" font-family="Arial,sans-serif" font-size="11" fill="#94a3b8" text-anchor="middle">umask Calculation — 666 - 022 = 644</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 10 KiB |
132
public/images/academy/server-knowledge/7.svg
Normal file
132
public/images/academy/server-knowledge/7.svg
Normal file
@@ -0,0 +1,132 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
|
||||
<defs>
|
||||
<linearGradient id="bg7" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#f0fdf4"/>
|
||||
<stop offset="100%" style="stop-color:#dcfce7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="800" height="600" fill="url(#bg7)"/>
|
||||
<!-- Title -->
|
||||
<text x="400" y="40" font-family="Arial,sans-serif" font-size="22" fill="#166534" text-anchor="middle" font-weight="bold">사고 타임라인 (5단계)</text>
|
||||
<text x="400" y="62" font-family="Arial,sans-serif" font-size="12" fill="#64748b" text-anchor="middle">권한 설정 실수가 배포 실패로 이어지는 과정</text>
|
||||
<!-- Timeline base line -->
|
||||
<line x1="80" y1="220" x2="720" y2="220" stroke="#94a3b8" stroke-width="3" stroke-linecap="round"/>
|
||||
<!-- Progress overlay (green to red) -->
|
||||
<line x1="80" y1="220" x2="560" y2="220" stroke="#22c55e" stroke-width="3" stroke-linecap="round"/>
|
||||
<line x1="560" y1="220" x2="720" y2="220" stroke="#dc2626" stroke-width="3" stroke-linecap="round"/>
|
||||
<!-- Arrow connectors -->
|
||||
<polygon points="235,220 245,215 245,225" fill="#22c55e"/>
|
||||
<polygon points="395,220 405,215 405,225" fill="#22c55e"/>
|
||||
<polygon points="555,220 565,215 565,225" fill="#f59e0b"/>
|
||||
<polygon points="705,220 715,215 715,225" fill="#dc2626"/>
|
||||
<!-- Step 1 - Folder permission change -->
|
||||
<g transform="translate(50, 120)">
|
||||
<circle cx="30" cy="100" r="22" fill="#22c55e" stroke="#16a34a" stroke-width="2.5"/>
|
||||
<text x="30" y="105" font-family="Arial,sans-serif" font-size="16" fill="white" text-anchor="middle" font-weight="bold">1</text>
|
||||
<!-- Card above -->
|
||||
<rect x="-30" y="0" width="120" height="70" rx="8" fill="white" stroke="#22c55e" stroke-width="1.5"/>
|
||||
<rect x="-30" y="0" width="120" height="5" rx="3" fill="#22c55e"/>
|
||||
<!-- Folder icon -->
|
||||
<rect x="-10" y="15" width="24" height="16" rx="3" fill="#22c55e" opacity="0.3"/>
|
||||
<rect x="-10" y="12" width="12" height="6" rx="2" fill="#22c55e" opacity="0.5"/>
|
||||
<text x="30" y="28" font-family="Arial,sans-serif" font-size="9" fill="#166534" font-weight="bold">chmod</text>
|
||||
<text x="30" y="48" font-family="Arial,sans-serif" font-size="10" fill="#166534" text-anchor="middle" font-weight="bold">폴더 권한</text>
|
||||
<text x="30" y="62" font-family="Arial,sans-serif" font-size="10" fill="#166534" text-anchor="middle" font-weight="bold">변경</text>
|
||||
</g>
|
||||
<!-- Step 2 - umask applied -->
|
||||
<g transform="translate(210, 120)">
|
||||
<circle cx="30" cy="100" r="22" fill="#22c55e" stroke="#16a34a" stroke-width="2.5"/>
|
||||
<text x="30" y="105" font-family="Arial,sans-serif" font-size="16" fill="white" text-anchor="middle" font-weight="bold">2</text>
|
||||
<rect x="-30" y="0" width="120" height="70" rx="8" fill="white" stroke="#22c55e" stroke-width="1.5"/>
|
||||
<rect x="-30" y="0" width="120" height="5" rx="3" fill="#22c55e"/>
|
||||
<text x="30" y="22" font-family="monospace" font-size="10" fill="#16a34a" text-anchor="middle">umask 022</text>
|
||||
<text x="30" y="48" font-family="Arial,sans-serif" font-size="10" fill="#166534" text-anchor="middle" font-weight="bold">umask</text>
|
||||
<text x="30" y="62" font-family="Arial,sans-serif" font-size="10" fill="#166534" text-anchor="middle" font-weight="bold">적용</text>
|
||||
</g>
|
||||
<!-- Step 3 - git pull -->
|
||||
<g transform="translate(370, 120)">
|
||||
<circle cx="30" cy="100" r="22" fill="#f59e0b" stroke="#d97706" stroke-width="2.5"/>
|
||||
<text x="30" y="105" font-family="Arial,sans-serif" font-size="16" fill="white" text-anchor="middle" font-weight="bold">3</text>
|
||||
<rect x="-30" y="0" width="120" height="70" rx="8" fill="white" stroke="#f59e0b" stroke-width="1.5"/>
|
||||
<rect x="-30" y="0" width="120" height="5" rx="3" fill="#f59e0b"/>
|
||||
<text x="30" y="22" font-family="monospace" font-size="10" fill="#d97706" text-anchor="middle">git pull</text>
|
||||
<text x="30" y="48" font-family="Arial,sans-serif" font-size="10" fill="#92400e" text-anchor="middle" font-weight="bold">git pull</text>
|
||||
<text x="30" y="62" font-family="Arial,sans-serif" font-size="10" fill="#92400e" text-anchor="middle" font-weight="bold">실행</text>
|
||||
</g>
|
||||
<!-- Step 4 - Files created with 644 -->
|
||||
<g transform="translate(530, 120)">
|
||||
<circle cx="30" cy="100" r="22" fill="#f59e0b" stroke="#d97706" stroke-width="2.5"/>
|
||||
<text x="30" y="105" font-family="Arial,sans-serif" font-size="16" fill="white" text-anchor="middle" font-weight="bold">4</text>
|
||||
<rect x="-30" y="0" width="120" height="70" rx="8" fill="white" stroke="#f59e0b" stroke-width="1.5"/>
|
||||
<rect x="-30" y="0" width="120" height="5" rx="3" fill="#f59e0b"/>
|
||||
<text x="30" y="22" font-family="monospace" font-size="10" fill="#d97706" text-anchor="middle">-rw-r--r--</text>
|
||||
<text x="30" y="48" font-family="Arial,sans-serif" font-size="10" fill="#92400e" text-anchor="middle" font-weight="bold">파일 644</text>
|
||||
<text x="30" y="62" font-family="Arial,sans-serif" font-size="10" fill="#92400e" text-anchor="middle" font-weight="bold">생성</text>
|
||||
</g>
|
||||
<!-- Step 5 - Deploy failure -->
|
||||
<g transform="translate(690, 120)">
|
||||
<circle cx="30" cy="100" r="22" fill="#dc2626" stroke="#991b1b" stroke-width="2.5"/>
|
||||
<text x="30" y="105" font-family="Arial,sans-serif" font-size="16" fill="white" text-anchor="middle" font-weight="bold">5</text>
|
||||
<rect x="-30" y="0" width="120" height="70" rx="8" fill="white" stroke="#dc2626" stroke-width="2"/>
|
||||
<rect x="-30" y="0" width="120" height="5" rx="3" fill="#dc2626"/>
|
||||
<!-- X mark -->
|
||||
<line x1="10" y1="15" x2="22" y2="27" stroke="#dc2626" stroke-width="2.5"/>
|
||||
<line x1="22" y1="15" x2="10" y2="27" stroke="#dc2626" stroke-width="2.5"/>
|
||||
<text x="45" y="25" font-family="Arial,sans-serif" font-size="9" fill="#dc2626" font-weight="bold">502!</text>
|
||||
<text x="30" y="48" font-family="Arial,sans-serif" font-size="10" fill="#dc2626" text-anchor="middle" font-weight="bold">배포</text>
|
||||
<text x="30" y="62" font-family="Arial,sans-serif" font-size="10" fill="#dc2626" text-anchor="middle" font-weight="bold">실패!</text>
|
||||
</g>
|
||||
<!-- Detail explanation cards below timeline -->
|
||||
<g transform="translate(40, 280)">
|
||||
<rect width="135" height="110" rx="8" fill="white" stroke="#dcfce7" stroke-width="1.5"/>
|
||||
<text x="68" y="22" font-family="Arial,sans-serif" font-size="10" fill="#166534" text-anchor="middle" font-weight="bold">원인</text>
|
||||
<line x1="10" y1="30" x2="125" y2="30" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<text x="10" y="48" font-family="Arial,sans-serif" font-size="9" fill="#64748b">Claude가 서버에서</text>
|
||||
<text x="10" y="62" font-family="monospace" font-size="9" fill="#dc2626">chmod 775 폴더</text>
|
||||
<text x="10" y="76" font-family="Arial,sans-serif" font-size="9" fill="#64748b">명령을 실행하여</text>
|
||||
<text x="10" y="90" font-family="Arial,sans-serif" font-size="9" fill="#64748b">소유자가 변경됨</text>
|
||||
</g>
|
||||
<g transform="translate(190, 280)">
|
||||
<rect width="135" height="110" rx="8" fill="white" stroke="#dcfce7" stroke-width="1.5"/>
|
||||
<text x="68" y="22" font-family="Arial,sans-serif" font-size="10" fill="#166534" text-anchor="middle" font-weight="bold">숨은 규칙</text>
|
||||
<line x1="10" y1="30" x2="125" y2="30" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<text x="10" y="48" font-family="Arial,sans-serif" font-size="9" fill="#64748b">pro 계정의</text>
|
||||
<text x="10" y="62" font-family="monospace" font-size="9" fill="#d97706">umask = 022</text>
|
||||
<text x="10" y="76" font-family="Arial,sans-serif" font-size="9" fill="#64748b">그룹 쓰기 권한이</text>
|
||||
<text x="10" y="90" font-family="Arial,sans-serif" font-size="9" fill="#64748b">자동으로 제거됨</text>
|
||||
</g>
|
||||
<g transform="translate(340, 280)">
|
||||
<rect width="135" height="110" rx="8" fill="white" stroke="#dcfce7" stroke-width="1.5"/>
|
||||
<text x="68" y="22" font-family="Arial,sans-serif" font-size="10" fill="#166534" text-anchor="middle" font-weight="bold">트리거</text>
|
||||
<line x1="10" y1="30" x2="125" y2="30" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<text x="10" y="48" font-family="Arial,sans-serif" font-size="9" fill="#64748b">새 파일이 생성될 때</text>
|
||||
<text x="10" y="62" font-family="Arial,sans-serif" font-size="9" fill="#64748b">umask가 적용되어</text>
|
||||
<text x="10" y="76" font-family="monospace" font-size="9" fill="#d97706">644 (rw-r--r--)</text>
|
||||
<text x="10" y="90" font-family="Arial,sans-serif" font-size="9" fill="#64748b">로 파일 생성</text>
|
||||
</g>
|
||||
<g transform="translate(490, 280)">
|
||||
<rect width="135" height="110" rx="8" fill="white" stroke="#dcfce7" stroke-width="1.5"/>
|
||||
<text x="68" y="22" font-family="Arial,sans-serif" font-size="10" fill="#166534" text-anchor="middle" font-weight="bold">문제</text>
|
||||
<line x1="10" y1="30" x2="125" y2="30" stroke="#e2e8f0" stroke-width="1"/>
|
||||
<text x="10" y="48" font-family="Arial,sans-serif" font-size="9" fill="#64748b">www-data(웹서버)가</text>
|
||||
<text x="10" y="62" font-family="Arial,sans-serif" font-size="9" fill="#64748b">파일을 쓸 수 없음</text>
|
||||
<text x="10" y="76" font-family="Arial,sans-serif" font-size="9" fill="#64748b">그룹 권한: r--</text>
|
||||
<text x="10" y="90" font-family="Arial,sans-serif" font-size="9" fill="#dc2626">쓰기 불가!</text>
|
||||
</g>
|
||||
<g transform="translate(640, 280)">
|
||||
<rect width="135" height="110" rx="8" fill="#fef2f2" stroke="#dc2626" stroke-width="1.5"/>
|
||||
<text x="68" y="22" font-family="Arial,sans-serif" font-size="10" fill="#dc2626" text-anchor="middle" font-weight="bold">결과</text>
|
||||
<line x1="10" y1="30" x2="125" y2="30" stroke="#fecaca" stroke-width="1"/>
|
||||
<text x="10" y="48" font-family="Arial,sans-serif" font-size="9" fill="#991b1b">Laravel이 로그,</text>
|
||||
<text x="10" y="62" font-family="Arial,sans-serif" font-size="9" fill="#991b1b">캐시 파일을 못 씀</text>
|
||||
<text x="10" y="76" font-family="Arial,sans-serif" font-size="10" fill="#dc2626" font-weight="bold">502 Bad Gateway</text>
|
||||
<text x="10" y="90" font-family="Arial,sans-serif" font-size="9" fill="#991b1b">서비스 중단 발생</text>
|
||||
</g>
|
||||
<!-- Lesson learned box -->
|
||||
<rect x="100" y="420" width="600" height="70" rx="10" fill="#166534" opacity="0.08" stroke="#22c55e" stroke-width="1.5"/>
|
||||
<text x="400" y="448" font-family="Arial,sans-serif" font-size="14" fill="#166534" text-anchor="middle" font-weight="bold">교훈: 서버 권한 변경은 반드시 팀장 승인 후 진행!</text>
|
||||
<text x="400" y="468" font-family="Arial,sans-serif" font-size="11" fill="#64748b" text-anchor="middle">umask, 소유자, 그룹 관계를 이해하지 못하면 사고로 이어진다</text>
|
||||
<text x="400" y="482" font-family="monospace" font-size="10" fill="#dc2626" text-anchor="middle">chmod, chown 명령은 Level 3 (금지) 작업</text>
|
||||
<!-- Bottom -->
|
||||
<text x="400" y="560" font-family="Arial,sans-serif" font-size="11" fill="#94a3b8" text-anchor="middle">Incident Timeline — Permission Change to Deploy Failure</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
128
public/images/academy/server-knowledge/8.svg
Normal file
128
public/images/academy/server-knowledge/8.svg
Normal file
@@ -0,0 +1,128 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
|
||||
<defs>
|
||||
<linearGradient id="bg8" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#f0fdf4"/>
|
||||
<stop offset="100%" style="stop-color:#dcfce7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="800" height="600" fill="url(#bg8)"/>
|
||||
<!-- Title -->
|
||||
<text x="400" y="40" font-family="Arial,sans-serif" font-size="22" fill="#166534" text-anchor="middle" font-weight="bold">Git 배포 = 택배 배송</text>
|
||||
<text x="400" y="62" font-family="Arial,sans-serif" font-size="12" fill="#64748b" text-anchor="middle">개발자가 코드를 보내면 Gitea(택배사)가 서버로 배달합니다</text>
|
||||
<!-- Road/path -->
|
||||
<path d="M 50 380 L 750 380" stroke="#94a3b8" stroke-width="4" stroke-dasharray="20,10"/>
|
||||
<!-- Developer section (left) -->
|
||||
<g transform="translate(40, 140)">
|
||||
<!-- Developer desk -->
|
||||
<rect x="0" y="160" width="160" height="8" rx="3" fill="#475569"/>
|
||||
<rect x="5" y="168" width="6" height="52" rx="2" fill="#334155"/>
|
||||
<rect x="149" y="168" width="6" height="52" rx="2" fill="#334155"/>
|
||||
<!-- Monitor -->
|
||||
<rect x="25" y="95" width="110" height="70" rx="5" fill="#1e293b" stroke="#475569" stroke-width="2"/>
|
||||
<rect x="31" y="101" width="98" height="58" rx="3" fill="#0f172a"/>
|
||||
<!-- Code on screen -->
|
||||
<rect x="38" y="108" width="40" height="6" rx="1" fill="#22c55e" opacity="0.4"/>
|
||||
<rect x="38" y="118" width="60" height="4" rx="1" fill="#334155"/>
|
||||
<rect x="38" y="126" width="50" height="4" rx="1" fill="#334155"/>
|
||||
<rect x="38" y="134" width="65" height="4" rx="1" fill="#22c55e" opacity="0.2"/>
|
||||
<rect x="38" y="142" width="45" height="4" rx="1" fill="#334155"/>
|
||||
<!-- Monitor stand -->
|
||||
<rect x="70" y="165" width="20" height="5" fill="#475569"/>
|
||||
<!-- Developer person -->
|
||||
<circle cx="80" cy="50" r="22" fill="#fbbf24"/>
|
||||
<circle cx="72" cy="45" r="2.5" fill="#1e293b"/>
|
||||
<circle cx="88" cy="45" r="2.5" fill="#1e293b"/>
|
||||
<path d="M72 56 Q80 62 88 56" stroke="#1e293b" stroke-width="1.5" fill="none"/>
|
||||
<!-- Hair -->
|
||||
<path d="M58 42 Q60 28 80 32 Q100 28 102 42" fill="#374151"/>
|
||||
<!-- Body -->
|
||||
<rect x="62" y="72" width="36" height="40" rx="6" fill="#22c55e"/>
|
||||
<!-- Arms -->
|
||||
<line x1="62" y1="82" x2="38" y2="110" stroke="#fbbf24" stroke-width="7" stroke-linecap="round"/>
|
||||
<line x1="98" y1="82" x2="120" y2="110" stroke="#fbbf24" stroke-width="7" stroke-linecap="round"/>
|
||||
<!-- Label -->
|
||||
<text x="80" y="240" font-family="Arial,sans-serif" font-size="14" fill="#166534" text-anchor="middle" font-weight="bold">개발자</text>
|
||||
<text x="80" y="256" font-family="monospace" font-size="10" fill="#64748b" text-anchor="middle">git push</text>
|
||||
</g>
|
||||
<!-- Arrow: Developer to Gitea -->
|
||||
<g transform="translate(200, 280)">
|
||||
<line x1="0" y1="30" x2="80" y2="30" stroke="#22c55e" stroke-width="3"/>
|
||||
<polygon points="80,24 95,30 80,36" fill="#22c55e"/>
|
||||
<!-- Package icon on the arrow -->
|
||||
<rect x="30" y="15" width="28" height="22" rx="3" fill="#fbbf24" stroke="#d97706" stroke-width="1.5"/>
|
||||
<line x1="30" y1="26" x2="58" y2="26" stroke="#d97706" stroke-width="1"/>
|
||||
<line x1="44" y1="15" x2="44" y2="26" stroke="#d97706" stroke-width="1"/>
|
||||
<text x="44" y="8" font-family="Arial,sans-serif" font-size="8" fill="#64748b" text-anchor="middle">코드 패키지</text>
|
||||
</g>
|
||||
<!-- Gitea (courier service) in center -->
|
||||
<g transform="translate(290, 130)">
|
||||
<!-- Delivery truck / building -->
|
||||
<rect x="0" y="40" width="180" height="150" rx="10" fill="white" stroke="#22c55e" stroke-width="2.5"/>
|
||||
<!-- Roof -->
|
||||
<polygon points="0,40 90,5 180,40" fill="#22c55e" stroke="#16a34a" stroke-width="1.5"/>
|
||||
<text x="90" y="32" font-family="Arial,sans-serif" font-size="11" fill="white" text-anchor="middle" font-weight="bold">GITEA</text>
|
||||
<!-- Building windows/sections -->
|
||||
<rect x="15" y="60" width="65" height="40" rx="4" fill="#f0fdf4" stroke="#dcfce7" stroke-width="1"/>
|
||||
<text x="48" y="78" font-family="Arial,sans-serif" font-size="9" fill="#166534" text-anchor="middle">코드 저장소</text>
|
||||
<text x="48" y="92" font-family="Arial,sans-serif" font-size="8" fill="#64748b" text-anchor="middle">Repository</text>
|
||||
<rect x="100" y="60" width="65" height="40" rx="4" fill="#f0fdf4" stroke="#dcfce7" stroke-width="1"/>
|
||||
<text x="133" y="78" font-family="Arial,sans-serif" font-size="9" fill="#166534" text-anchor="middle">버전 관리</text>
|
||||
<text x="133" y="92" font-family="Arial,sans-serif" font-size="8" fill="#64748b" text-anchor="middle">Versions</text>
|
||||
<!-- Hook section -->
|
||||
<rect x="15" y="115" width="150" height="35" rx="4" fill="#dcfce7" stroke="#22c55e" stroke-width="1"/>
|
||||
<text x="90" y="132" font-family="Arial,sans-serif" font-size="10" fill="#166534" text-anchor="middle" font-weight="bold">Webhook (자동 알림)</text>
|
||||
<text x="90" y="145" font-family="Arial,sans-serif" font-size="8" fill="#64748b" text-anchor="middle">push 되면 서버에 알려줌</text>
|
||||
<!-- Delivery truck at bottom -->
|
||||
<rect x="50" y="160" width="80" height="35" rx="5" fill="#22c55e"/>
|
||||
<rect x="53" y="163" width="35" height="28" rx="3" fill="white" opacity="0.3"/>
|
||||
<circle cx="65" cy="198" r="8" fill="#334155" stroke="#475569" stroke-width="2"/>
|
||||
<circle cx="115" cy="198" r="8" fill="#334155" stroke="#475569" stroke-width="2"/>
|
||||
<rect x="88" y="165" width="38" height="25" rx="3" fill="#166534"/>
|
||||
<text x="107" y="181" font-family="Arial,sans-serif" font-size="8" fill="white" text-anchor="middle">GIT</text>
|
||||
<!-- Label -->
|
||||
<text x="90" y="225" font-family="Arial,sans-serif" font-size="14" fill="#166534" text-anchor="middle" font-weight="bold">Gitea (택배사)</text>
|
||||
<text x="90" y="241" font-family="Arial,sans-serif" font-size="10" fill="#64748b" text-anchor="middle">코드를 안전하게 보관/전달</text>
|
||||
</g>
|
||||
<!-- Arrow: Gitea to Server -->
|
||||
<g transform="translate(490, 280)">
|
||||
<line x1="0" y1="30" x2="80" y2="30" stroke="#22c55e" stroke-width="3"/>
|
||||
<polygon points="80,24 95,30 80,36" fill="#22c55e"/>
|
||||
<!-- Package icon -->
|
||||
<rect x="30" y="15" width="28" height="22" rx="3" fill="#22c55e" stroke="#16a34a" stroke-width="1.5"/>
|
||||
<polyline points="36,26 44,20 52,26" fill="none" stroke="#16a34a" stroke-width="1.5"/>
|
||||
<text x="44" y="8" font-family="Arial,sans-serif" font-size="8" fill="#64748b" text-anchor="middle">git pull</text>
|
||||
</g>
|
||||
<!-- Server building (right) -->
|
||||
<g transform="translate(580, 130)">
|
||||
<!-- Server building -->
|
||||
<rect x="0" y="20" width="160" height="180" rx="8" fill="#334155" stroke="#475569" stroke-width="2"/>
|
||||
<!-- Building top -->
|
||||
<rect x="0" y="20" width="160" height="30" rx="8" fill="#475569"/>
|
||||
<text x="80" y="40" font-family="Arial,sans-serif" font-size="12" fill="white" text-anchor="middle" font-weight="bold">SAM Server</text>
|
||||
<!-- Server racks -->
|
||||
<rect x="15" y="65" width="130" height="22" rx="3" fill="#1e293b" stroke="#475569" stroke-width="1"/>
|
||||
<circle cx="130" cy="76" r="4" fill="#22c55e" opacity="0.8"/>
|
||||
<rect x="25" y="70" width="40" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="25" y="76" width="55" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="15" y="95" width="130" height="22" rx="3" fill="#1e293b" stroke="#475569" stroke-width="1"/>
|
||||
<circle cx="130" cy="106" r="4" fill="#22c55e" opacity="0.8"/>
|
||||
<rect x="25" y="100" width="45" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="25" y="106" width="50" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="15" y="125" width="130" height="22" rx="3" fill="#1e293b" stroke="#475569" stroke-width="1"/>
|
||||
<circle cx="130" cy="136" r="4" fill="#16a34a" opacity="0.6"/>
|
||||
<rect x="25" y="130" width="38" height="3" rx="1" fill="#475569"/>
|
||||
<rect x="25" y="136" width="48" height="3" rx="1" fill="#475569"/>
|
||||
<!-- Bottom section -->
|
||||
<rect x="15" y="160" width="130" height="30" rx="4" fill="#166534" opacity="0.3"/>
|
||||
<text x="80" y="178" font-family="monospace" font-size="9" fill="#22c55e" text-anchor="middle">pull_mng.sh 실행</text>
|
||||
<!-- Label -->
|
||||
<text x="80" y="225" font-family="Arial,sans-serif" font-size="14" fill="#166534" text-anchor="middle" font-weight="bold">운영 서버</text>
|
||||
<text x="80" y="241" font-family="Arial,sans-serif" font-size="10" fill="#64748b" text-anchor="middle">코드를 받아 서비스 운영</text>
|
||||
</g>
|
||||
<!-- Flow summary at bottom -->
|
||||
<rect x="100" y="430" width="600" height="70" rx="10" fill="white" stroke="#dcfce7" stroke-width="1.5"/>
|
||||
<text x="400" y="455" font-family="Arial,sans-serif" font-size="13" fill="#166534" text-anchor="middle" font-weight="bold">배포 흐름: 개발자 git push >>> Gitea 저장 >>> Webhook 알림 >>> 서버 git pull</text>
|
||||
<text x="400" y="478" font-family="Arial,sans-serif" font-size="11" fill="#64748b" text-anchor="middle">택배로 비유: 물건 발송 >>> 택배 회사 >>> 배송 알림 >>> 수령</text>
|
||||
<!-- Bottom -->
|
||||
<text x="400" y="560" font-family="Arial,sans-serif" font-size="11" fill="#94a3b8" text-anchor="middle">Git Deployment Flow — Courier/Delivery Metaphor</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 9.0 KiB |
147
public/images/academy/server-knowledge/9.svg
Normal file
147
public/images/academy/server-knowledge/9.svg
Normal file
@@ -0,0 +1,147 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
|
||||
<defs>
|
||||
<linearGradient id="bg9" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#f0fdf4"/>
|
||||
<stop offset="100%" style="stop-color:#dcfce7"/>
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<rect width="800" height="600" fill="url(#bg9)"/>
|
||||
<!-- Title -->
|
||||
<text x="400" y="40" font-family="Arial,sans-serif" font-size="22" fill="#166534" text-anchor="middle" font-weight="bold">Hook 동작 흐름 + 권한 체크포인트</text>
|
||||
<text x="400" y="62" font-family="Arial,sans-serif" font-size="12" fill="#64748b" text-anchor="middle">git push 후 서버에 자동 배포되는 전체 과정과 권한 검증 지점</text>
|
||||
<!-- Main flow line -->
|
||||
<line x1="50" y1="180" x2="750" y2="180" stroke="#dcfce7" stroke-width="6" stroke-linecap="round"/>
|
||||
<!-- Step 1: git push -->
|
||||
<g transform="translate(30, 110)">
|
||||
<rect x="0" y="20" width="100" height="90" rx="10" fill="white" stroke="#22c55e" stroke-width="2"/>
|
||||
<rect x="0" y="20" width="100" height="6" rx="3" fill="#22c55e"/>
|
||||
<!-- Terminal icon -->
|
||||
<rect x="25" y="35" width="50" height="30" rx="4" fill="#1e293b"/>
|
||||
<text x="50" y="53" font-family="monospace" font-size="8" fill="#22c55e" text-anchor="middle">$ git push</text>
|
||||
<text x="50" y="85" font-family="Arial,sans-serif" font-size="10" fill="#166534" text-anchor="middle" font-weight="bold">git push</text>
|
||||
<text x="50" y="100" font-family="Arial,sans-serif" font-size="8" fill="#64748b" text-anchor="middle">코드 전송</text>
|
||||
<!-- Circle on timeline -->
|
||||
<circle cx="50" cy="70" r="0" fill="none"/>
|
||||
</g>
|
||||
<circle cx="80" cy="180" r="8" fill="#22c55e" stroke="white" stroke-width="2"/>
|
||||
<!-- Arrow 1->2 -->
|
||||
<line x1="135" y1="180" x2="165" y2="180" stroke="#22c55e" stroke-width="2.5"/>
|
||||
<polygon points="165,175 175,180 165,185" fill="#22c55e"/>
|
||||
<!-- Step 2: Gitea receives -->
|
||||
<g transform="translate(165, 110)">
|
||||
<rect x="0" y="20" width="100" height="90" rx="10" fill="white" stroke="#22c55e" stroke-width="2"/>
|
||||
<rect x="0" y="20" width="100" height="6" rx="3" fill="#22c55e"/>
|
||||
<!-- Gitea logo placeholder -->
|
||||
<circle cx="50" cy="50" r="15" fill="#22c55e" opacity="0.15"/>
|
||||
<text x="50" y="55" font-family="Arial,sans-serif" font-size="14" fill="#22c55e" text-anchor="middle" font-weight="bold">G</text>
|
||||
<text x="50" y="85" font-family="Arial,sans-serif" font-size="10" fill="#166534" text-anchor="middle" font-weight="bold">Gitea</text>
|
||||
<text x="50" y="100" font-family="Arial,sans-serif" font-size="8" fill="#64748b" text-anchor="middle">코드 수신/저장</text>
|
||||
</g>
|
||||
<circle cx="215" cy="180" r="8" fill="#22c55e" stroke="white" stroke-width="2"/>
|
||||
<!-- Arrow 2->3 -->
|
||||
<line x1="270" y1="180" x2="300" y2="180" stroke="#22c55e" stroke-width="2.5"/>
|
||||
<polygon points="300,175 310,180 300,185" fill="#22c55e"/>
|
||||
<!-- Step 3: post-update hook -->
|
||||
<g transform="translate(300, 100)">
|
||||
<rect x="0" y="20" width="115" height="100" rx="10" fill="white" stroke="#f59e0b" stroke-width="2"/>
|
||||
<rect x="0" y="20" width="115" height="6" rx="3" fill="#f59e0b"/>
|
||||
<!-- Hook icon -->
|
||||
<path d="M50 40 Q50 50 58 50 Q66 50 66 60 Q66 68 58 68" fill="none" stroke="#f59e0b" stroke-width="2.5" stroke-linecap="round"/>
|
||||
<circle cx="55" cy="68" r="3" fill="#f59e0b"/>
|
||||
<text x="58" y="88" font-family="Arial,sans-serif" font-size="9" fill="#92400e" text-anchor="middle" font-weight="bold">post-update</text>
|
||||
<text x="58" y="100" font-family="Arial,sans-serif" font-size="9" fill="#92400e" text-anchor="middle" font-weight="bold">hook</text>
|
||||
<text x="58" y="114" font-family="Arial,sans-serif" font-size="8" fill="#64748b" text-anchor="middle">자동 트리거</text>
|
||||
</g>
|
||||
<circle cx="358" cy="180" r="8" fill="#f59e0b" stroke="white" stroke-width="2"/>
|
||||
<!-- Arrow 3->4 -->
|
||||
<line x1="420" y1="180" x2="445" y2="180" stroke="#22c55e" stroke-width="2.5"/>
|
||||
<polygon points="445,175 455,180 445,185" fill="#22c55e"/>
|
||||
<!-- Step 4: pull_mng.sh -->
|
||||
<g transform="translate(445, 110)">
|
||||
<rect x="0" y="20" width="110" height="90" rx="10" fill="white" stroke="#22c55e" stroke-width="2"/>
|
||||
<rect x="0" y="20" width="110" height="6" rx="3" fill="#22c55e"/>
|
||||
<!-- Script icon -->
|
||||
<rect x="30" y="35" width="50" height="30" rx="4" fill="#f0fdf4" stroke="#22c55e" stroke-width="1"/>
|
||||
<text x="55" y="48" font-family="monospace" font-size="7" fill="#16a34a" text-anchor="middle">#!/bin/bash</text>
|
||||
<text x="55" y="58" font-family="monospace" font-size="7" fill="#64748b" text-anchor="middle">git pull...</text>
|
||||
<text x="55" y="85" font-family="Arial,sans-serif" font-size="9" fill="#166534" text-anchor="middle" font-weight="bold">pull_mng.sh</text>
|
||||
<text x="55" y="100" font-family="Arial,sans-serif" font-size="8" fill="#64748b" text-anchor="middle">배포 스크립트</text>
|
||||
</g>
|
||||
<circle cx="500" cy="180" r="8" fill="#22c55e" stroke="white" stroke-width="2"/>
|
||||
<!-- Arrow 4->5 (PERMISSION CHECK - highlighted) -->
|
||||
<line x1="560" y1="180" x2="590" y2="180" stroke="#dc2626" stroke-width="2.5"/>
|
||||
<polygon points="590,175 600,180 590,185" fill="#dc2626"/>
|
||||
<!-- Step 5: Permission Check (HIGHLIGHTED) -->
|
||||
<g transform="translate(590, 95)">
|
||||
<!-- Glow effect -->
|
||||
<rect x="-5" y="15" width="130" height="115" rx="12" fill="#dc2626" opacity="0.05"/>
|
||||
<rect x="0" y="20" width="120" height="105" rx="10" fill="white" stroke="#dc2626" stroke-width="3"/>
|
||||
<rect x="0" y="20" width="120" height="6" rx="3" fill="#dc2626"/>
|
||||
<!-- Shield with check -->
|
||||
<circle cx="60" cy="52" r="18" fill="#dc2626" opacity="0.1"/>
|
||||
<path d="M60 38 L72 44 L72 54 Q72 62 60 68 Q48 62 48 54 L48 44 Z" fill="#dc2626" opacity="0.2" stroke="#dc2626" stroke-width="1.5"/>
|
||||
<polyline points="54,53 58,57 66,49" fill="none" stroke="#dc2626" stroke-width="2" stroke-linecap="round"/>
|
||||
<text x="60" y="86" font-family="Arial,sans-serif" font-size="9" fill="#dc2626" text-anchor="middle" font-weight="bold">권한 체크</text>
|
||||
<text x="60" y="100" font-family="Arial,sans-serif" font-size="8" fill="#991b1b" text-anchor="middle">Permission</text>
|
||||
<text x="60" y="114" font-family="Arial,sans-serif" font-size="8" fill="#991b1b" text-anchor="middle">Check Point</text>
|
||||
<!-- Warning badge -->
|
||||
<circle cx="110" cy="25" r="10" fill="#dc2626"/>
|
||||
<text x="110" y="29" font-family="Arial,sans-serif" font-size="12" fill="white" text-anchor="middle" font-weight="bold">!</text>
|
||||
</g>
|
||||
<circle cx="650" cy="180" r="8" fill="#dc2626" stroke="white" stroke-width="2"/>
|
||||
<!-- Arrow 5->6 -->
|
||||
<line x1="715" y1="180" x2="735" y2="180" stroke="#22c55e" stroke-width="2.5"/>
|
||||
<polygon points="730,175 740,180 730,185" fill="#22c55e"/>
|
||||
<!-- Step 6: Deploy complete -->
|
||||
<g transform="translate(725, 120)">
|
||||
<circle cx="25" cy="60" r="30" fill="#166534" stroke="#0f5323" stroke-width="2"/>
|
||||
<polyline points="14,60 22,68 38,52" fill="none" stroke="white" stroke-width="3" stroke-linecap="round"/>
|
||||
<text x="25" y="106" font-family="Arial,sans-serif" font-size="9" fill="#166534" text-anchor="middle" font-weight="bold">배포 완료</text>
|
||||
</g>
|
||||
<!-- Permission check detail box below -->
|
||||
<rect x="60" y="290" width="680" height="200" rx="12" fill="white" stroke="#dc2626" stroke-width="2"/>
|
||||
<rect x="60" y="290" width="680" height="8" rx="4" fill="#dc2626"/>
|
||||
<text x="400" y="320" font-family="Arial,sans-serif" font-size="14" fill="#dc2626" text-anchor="middle" font-weight="bold">권한 체크포인트에서 확인하는 항목</text>
|
||||
<!-- Check items -->
|
||||
<g transform="translate(90, 340)">
|
||||
<rect width="145" height="55" rx="6" fill="#f0fdf4" stroke="#22c55e" stroke-width="1"/>
|
||||
<circle cx="15" cy="20" r="8" fill="#22c55e" opacity="0.2"/>
|
||||
<text x="15" y="24" font-family="Arial,sans-serif" font-size="10" fill="#16a34a" text-anchor="middle">1</text>
|
||||
<text x="40" y="20" font-family="Arial,sans-serif" font-size="10" fill="#166534" font-weight="bold">파일 소유자</text>
|
||||
<text x="15" y="42" font-family="monospace" font-size="9" fill="#64748b">pro:www-data</text>
|
||||
</g>
|
||||
<g transform="translate(250, 340)">
|
||||
<rect width="145" height="55" rx="6" fill="#f0fdf4" stroke="#22c55e" stroke-width="1"/>
|
||||
<circle cx="15" cy="20" r="8" fill="#22c55e" opacity="0.2"/>
|
||||
<text x="15" y="24" font-family="Arial,sans-serif" font-size="10" fill="#16a34a" text-anchor="middle">2</text>
|
||||
<text x="40" y="20" font-family="Arial,sans-serif" font-size="10" fill="#166534" font-weight="bold">디렉토리 권한</text>
|
||||
<text x="15" y="42" font-family="monospace" font-size="9" fill="#64748b">drwxrwxr-x (775)</text>
|
||||
</g>
|
||||
<g transform="translate(410, 340)">
|
||||
<rect width="145" height="55" rx="6" fill="#f0fdf4" stroke="#22c55e" stroke-width="1"/>
|
||||
<circle cx="15" cy="20" r="8" fill="#22c55e" opacity="0.2"/>
|
||||
<text x="15" y="24" font-family="Arial,sans-serif" font-size="10" fill="#16a34a" text-anchor="middle">3</text>
|
||||
<text x="40" y="20" font-family="Arial,sans-serif" font-size="10" fill="#166534" font-weight="bold">파일 권한</text>
|
||||
<text x="15" y="42" font-family="monospace" font-size="9" fill="#64748b">-rw-rw-r-- (664)</text>
|
||||
</g>
|
||||
<g transform="translate(570, 340)">
|
||||
<rect width="145" height="55" rx="6" fill="#f0fdf4" stroke="#22c55e" stroke-width="1"/>
|
||||
<circle cx="15" cy="20" r="8" fill="#22c55e" opacity="0.2"/>
|
||||
<text x="15" y="24" font-family="Arial,sans-serif" font-size="10" fill="#16a34a" text-anchor="middle">4</text>
|
||||
<text x="40" y="20" font-family="Arial,sans-serif" font-size="10" fill="#166534" font-weight="bold">실행 권한</text>
|
||||
<text x="15" y="42" font-family="monospace" font-size="9" fill="#64748b">storage/ 쓰기 가능</text>
|
||||
</g>
|
||||
<!-- Warning text -->
|
||||
<text x="400" y="425" font-family="Arial,sans-serif" font-size="11" fill="#dc2626" text-anchor="middle" font-weight="bold">이 체크포인트에서 문제가 발생하면 502 Bad Gateway!</text>
|
||||
<text x="400" y="445" font-family="Arial,sans-serif" font-size="10" fill="#64748b" text-anchor="middle">www-data가 파일을 읽고 쓸 수 있는지 반드시 확인</text>
|
||||
<!-- Key -->
|
||||
<rect x="100" y="470" width="600" height="35" rx="8" fill="#166534" opacity="0.06"/>
|
||||
<circle cx="160" cy="488" r="6" fill="#22c55e"/>
|
||||
<text x="175" y="492" font-family="Arial,sans-serif" font-size="10" fill="#64748b">정상 단계</text>
|
||||
<circle cx="300" cy="488" r="6" fill="#f59e0b"/>
|
||||
<text x="315" y="492" font-family="Arial,sans-serif" font-size="10" fill="#64748b">자동 트리거</text>
|
||||
<circle cx="440" cy="488" r="6" fill="#dc2626"/>
|
||||
<text x="455" y="492" font-family="Arial,sans-serif" font-size="10" fill="#64748b">권한 체크포인트 (위험 지점)</text>
|
||||
<!-- Bottom -->
|
||||
<text x="400" y="560" font-family="Arial,sans-serif" font-size="11" fill="#94a3b8" text-anchor="middle">Hook Operation Flow + Permission Checkpoints</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 11 KiB |
Reference in New Issue
Block a user