CodeWithOutput 컴포넌트 데모
CodeWithOutput 컴포넌트가 지원하는 모든 사용 패턴 — 단일/다중 STDIN·STDOUT, 다중 언어 변형, 라벨/타이틀, 반응형, 엣지 케이스까지 한 번에 확인할 수 있도록 모아둔 데모 페이지.
이 글은 <CodeWithOutput> 컴포넌트의 모든 표현 가능한 형태를 한 화면에서 확인하기 위한 데모입니다.
<CodeWithOutput /> 는 astro-auto-import 로 글로벌 등록되어 있어 글마다 import 문을 추가할 필요가 없습니다.
새 케이스가 추가될 때마다 이 페이지에 예시를 같이 추가하면 미리보기·실제 빌드·반응형 동작을 한 번에 점검할 수 있습니다.
1. 기본 — 코드 + 결과
가장 단순한 형태입니다. 코드 한 덩어리 + 결과 한 덩어리.
print("hello world")hello world2. STDIN + STDOUT 한 쌍
input 을 함께 넘기면 결과 패널 위에 stdin 섹션이 추가됩니다.
head -n 10 file.txt | tail -n 11
2
3
4
5
6
7
8
9
10
11
12103. 여러 테스트 케이스 (cases)
알고리즘 문제처럼 입력·출력 쌍이 여러 개 필요한 경우 cases 배열을 사용합니다.
모든 케이스가 한 번에 보이도록 세로로 쌓이고, 케이스 사이는 굵은 경계선으로 구분합니다.
라벨을 생략하면 예제 N 으로 자동 부여됩니다.
n = int(input())
print(n * n)394. 사용자 지정 케이스 라벨
각 케이스에 label 을 명시하면 자동 번호 대신 사용자 라벨이 보입니다.
a, b = map(int, input().split())
print(a + b)1 235. 다중 언어 코드 (variants)
같은 문제를 여러 언어로 풀이할 때 variants 로 코드 패널에 탭을 만들 수 있습니다.
오른쪽 패널의 결과는 모든 변형이 공유합니다.
print("hello")hello6. 다중 언어 + 다중 케이스
variants 와 cases 는 함께 쓸 수 있습니다. 코드는 탭으로, 케이스는 세로 stack 으로.
s = input()
print(s[::-1])helloolleh7. 케이스마다 입력 유무가 섞여 있을 때
cases 안에서 어떤 케이스는 입력이 있고 어떤 케이스는 없는 경우. 각 케이스는 독립적으로 stdin 섹션을 표시/숨김.
if [ -z "$1" ]; then
echo "no input"
else
cat
fihello
worldhello
world8. 타이틀과 커스텀 라벨
title, outputLabel, 케이스별 inputLabel / outputLabel 까지 모두 지정한 풀 옵션 예시.
const data = JSON.parse(stdin);
console.log(JSON.stringify({
user: data.name,
age: data.age + 1,
}, null, 2));{"name": "Alice", "age": 30}{
"user": "Alice",
"age": 31
}9. 좌우 비율 조절 (codeWidth)
codeWidth prop 으로 초기 좌측 코드 패널 너비를 조절할 수 있습니다 (사용자가 splitter 를 드래그하면 localStorage 에 저장됨).
print(sum(range(100)))4950for i in range(10):
print(f"{i:02d}: {'*' * i}")00:
01: *
02: **
03: ***
04: ****
05: *****
06: ******
07: *******
08: ********
09: *********10. 긴 코드 / 긴 출력 (스크롤 확인)
코드와 출력이 패널 높이를 넘으면 각 패널 내부에서 독립 스크롤됩니다.
# Fibonacci 100
a, b = 0, 1
for _ in range(100):
print(a)
a, b = b, a + b0
1
1
2
3
5
8
13
21
34
55
89
144
233
377
610
987
1597
2584
4181
6765
10946
17711
28657
46368
75025
121393
196418
317811
514229
832040
1346269
2178309
3524578
5702887
9227465
14930352
24157817
39088169
63245986
102334155
165580141
267914296
433494437
701408733
1134903170
1836311903
2971215073
480752697611. 긴 한 줄 (가로 스크롤 확인)
긴 단일 라인은 패널 안에서 가로 스크롤이 동작해야 합니다.
echo "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation."Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.12. 다양한 언어 하이라이팅
shiki 가 인식 가능한 언어라면 자동으로 색상이 적용됩니다.
fn main() {
let v: Vec<i32> = (1..=5).collect();
let sum: i32 = v.iter().sum();
println!("sum = {}", sum);
}sum = 15SELECT user_id, COUNT(*) AS posts
FROM articles
GROUP BY user_id
ORDER BY posts DESC
LIMIT 3;user_id posts
------- -----
42 128
7 95
113 72확인 포인트
- 좌우 splitter 드래그로 비율 조절이 동작하는가
- 더블클릭 시 50% 로 리셋되는가
- 화살표 키로 미세 조정되는가
- 모바일 폭 (640px 이하) 에서 splitter 가 사라지고 세로 stack 으로 전환되는가
- 다크/라이트 모드 전환 시 코드 색상이 따라가는가
- 다중 케이스에서 케이스 간 경계선이 명확한가
- 미리보기 (에디터) 와 실제 렌더링이 시각적으로 동일한가
💬 댓글