[로데시] 개발

[정처기 실기] JAVA - P p = new C(); 상속 예제 문제

로데시 — Sun, 29 Mar 2026 12:04:29 +0900

(5) P p = new C(); 형태의 상속 예제 문제

https://youtu.be/GS9Cr--ymVE

흥달쌤 유튜브

생성자

class P { // 부모 클래스 (#line 1)
  P() System.out.print("A"); // 인자 없는 생성자

  P(int a) System.out.print("B");
}

class C extends P { // 자식 클래스 (#line 7)
  C() System.out.print("C"); // 인자 없는 생성자

  C(int a) System.out.print("D");

  C(int a, int b) { // 인자 2개인 생성자
    System.out.print("E");
  }
}

P p1 = new C(); //AC
// [1] 일단 인자 없는 자식 생성자(#line 8)로 가서 부모 클래스를 명시적으로 호출한 게 있나 확인
// [2] super가 없으면 묵시적으로 부모의 인자 없는 생성자가 자동 호출(#line 2), 명령문 수행
// >> "A" 출력
// [3] 그리고 다시 인자 없는 자식 생성자로 와서 (#line 8) 명령문 수행
// >> "C" 출력

P p2 = new C(1); //AD
// [1] 일단 인자 1개인 자식 생성자(#line 10)로 가서 부모 클래스를 명시적(super)으로 호출한 게 있나 확인
// [2] super가 없으면 묵시적으로 부모의 인자 없는 생성자가 자동 호출(#line 2), 명령문 수행
// >> "A" 출력
// [3] 그리고 다시 인자 1개인 자식 생성자로 와서 (#line 10) 명령문 수행
// >> "D" 출력

P p3 = new C(1, 2); //BE
// [1] 일단 인자 2개인 자식 생성자(#line 11)로 가서 부모 클래스를 명시적(super)으로 호출한 게 있나 확인
// [2] super가 있으면 해당하는 생성자를 호출(#line 4), 명령문 수행
// >> "B" 출력
// [3] 그리고 다시 인자 2개인 자식 생성자로 와서 (#line 11) 명령문 수행
// >> "E" 출력

ㆍP p = new C(); 뿐만 아니라 C c = new C(); 형태도 똑같이 작용

오버라이딩(메서드)

class P { // 부모 클래스 (#line 1)
  public void func1() {
    System.out.print("A");
  }

  public void func2() {
    System.out.print("B");
  }
}

class C extends P { // 자식 클래스 (#line 11)
  public void func1() {
    System.out.print("C");
  }

  public void func3() {
    System.out.print("D");
  }
}

P p = new C();

p.func1();
// 부모와 자식한테 모두 func1() 있음
// -> 자식 메서드를 출력 (#line 12)
// >> "C" 출력

p.func2();
// 부모한테만 func2() 있음
// -> 부모 메서드를 출력 (#line 6)
// >> "B" 출력

p.func3();
// 자식한테만 func3() 있음
// >> 오류 출력
// ∵ new C()를 했지만 형태는 부모 형태 P p =

ㆍ부모 자식한테 메서드가 모두 있으면 자식 메서드를 출력

하이딩

class P { // 부모 클래스 (#line 1)
  public static void func1() {
    System.out.print("A");
  }
}

class C extends P { // 자식 클래스 (#line 7)
  public static void func1() {
    System.out.print("C");
  }
}

P p = new C();
p.func1();
// static 일 때는 hiding이 되어서 부모 형태일 때는 자식 메서드가 아닌
// -> 부모 메서드를 출력 (line 2)
// >> "A" 출력

C c = new C();
p.func1();
// 자식 형태일 때는 
// -> 자식 메서드를 출력 (line 8)
// >> "C" 출력

ㆍstatic 키워드
ㆍ오버라이딩과는 다름

멤버변수

class P { // 부모 클래스 (#line 1)

  int a = 10;

  public void func1() {
    System.out.print(a);
  }

  public void func2() {
    System.out.print(a);
  }
}

class C extends P { // 자식 클래스 (#line 14)

  int a = 10;

  public void func1() {
    System.out.print(a);
  }
}


P p = new C();

p.a = 20;
// [1] p 인스턴스는 P의 a도 C의 a도 갖고 있음
// [2] '나'랑 가까이 있는 것
// [3] -> 부모와 가까움
// ∴ 부모의 a에 20이 들어감

p.func1();
// 오버라이딩이므로
// -> 자식 메서드 출력 (line 18)
// >> "10" 출력

p.func2();
// 부모만 해당 메서드가 있으므로 
// -> 부모 메서드를 출력 (line 5)
// >> "20" 출력

ㆍ'나'와 가까운 것

생성자 & 변수

class P { // 부모 클래스 (#line 1)

  int a = 10;

  public P() System.out.print("가");

  public P(int x) System.out.print("나");
}

class C extends P { // 자식 클래스 (#line 10)

  int a = 20;

  public C() System.out.print("다");

  public C(int x) System.out.print("라");
}

C c = new C()
// [1] 자식 생성자(line 14)에서 super 있나 check
// [2] super가 없으니 부모 인자 없는 생성자(line 5) 호출
// >> '가' 출력
// [3] 다시 자식 생성자(line 14)로 ㄱㄱ
// >> '다' 출력

P p = new C(1);
// [1] 자식 생성자(line 16)에서 super 있나 check
// [2] super가 없으니 부모 인자 없는 생성자(line 5) 호출
// >> '가' 출력
// [3] 다시 자식 생성자(line 16)로 ㄱㄱ
// >> '라' 출력

c.a + p.a
// [1] c 인스턴스는 P의 a도 C의 a도 갖고 있음
// [2] c는 자식의 a와 가까움
// >> 20
// [3] p 인스턴스는 P의 a도 C의 a도 갖고 있음
// [4] p는 부모의 a와 가까움
// >> 10
// ∴ 20 + 10 = 30

ㆍ'나'와 가까운 것

메서드 & 변수

class P { // 부모 클래스 (#line 1)

  int a = 3;

  public void addValue(int i) {
    a = a + i;
    System.out.print("P: " + a);
  }

  public void addFive() {
    a = a + 5;
    System.out.print("P: " + a);
  }
}

class C extends P { // 자식 클래스 (#line 16)

  int a = 8;

  public void addValue(double i) {
    a = a + (int)i;
    System.out.print("C: " + a);
  }

  public void addFive() {
    a = a + 5;
    System.out.print("C: " + a);
  }
}

P p = new C()

p.addValue(1);
// [1] 인자가 정수이므로 부모 메서드 호출 (line 5)
// [2] a는 부모의 a와 더 가까움 (line 3)
// >> 'P: 4' 출력

p.addFive();
// [1] 오버라이딩이므로 자식 메서드 호출 (line 25)
// [2] a는 자식의 a와 더 가까움 (line 18)
// >> 'C: 13' 출력

생성자 변수의 유효범위

class P { // 부모 클래스 (#line 1)

  int a;

  public P (int a) this.a = a;

  public int get() return a;
}

class C extends P { // 자식 클래스 (#line 10)

  int a;

  public C (int a) {
    super(2*a);
    this.a = a;
  }

  public int get() return a;
}

P p = new C(7);
// [1] super 키워드 확인을 위해 자식 생성자로 ㄱㄱ (line 14)
// [2] super가 있으므로 super(14)에 해당하는 생성자로 ㄱㄱ (line 5)
// 부모의 a 값은 14
// [3] 다시 자식 생성자로 와서 이후 코드 실행 (line 16)
// 자식의 a 값은 7

p.a;
// [1] p 인스턴스는 부모의 a도 자식의 a도 갖고 있음
// [2] a는 부모의 a와 더 가까움 (line 3)
// >> '14' 출력

p.get();
// [1] 오버라이딩이므로 자식 메서드 호출 (line 25)
// [2] a는 자식의 a와 더 가까움 (line 12)
// >> '7' 출력

[정처기 실기] 6. 프로그래밍 언어 활용 요약 - JAVA1

로데시 — Fri, 27 Mar 2026 15:10:35 +0900

☰ 정보처리기사 실기

Ⅵ. 프로그래밍 언어 활용

03. JAVA

0️⃣ 자바 기본 구조

ㆍ클래스 단위
ㆍ프로그램은 public static void main부터 시작

1️⃣ 자료형(Data Type)

(1) 자료형 유형

ㆍ문자형 - char
ㆍ문자열형 - String
ㆍ정수형 - byte, short, int, lond (순서대로 1, 2, 4, 8 byte 크기)
ㆍ부동 소수점형 - float, double
ㆍ논리형 - boolean

2️⃣ 변수(Variable)

(1) 변수 개념

ㆍ어떠한 값을 주기억 장치에 기억하기 위한 공간

(2) 변수 유효범위

전역 변수(Global Variable)

ㆍ클래스 블록에 선언
ㆍ생성 - 클래스 시작
ㆍ종료 - 클래스 종료
ㆍ초기화 안 할 시 -> 정수 = 0, 실수 = 0.0, 문자 = NULL 로 자동 초기화

지역 변수(Local Variable)

ㆍ블록 내에서 선언
ㆍ선언 - 블록이 시작하는 부분
ㆍ종료 - 중괄호가 닫히는 시점
ㆍ해당 블록 내에서만 사용 가능

static 변수(Static Variable)

ㆍstatic 키워드와 선언
ㆍ생성 - 프로그램 시작
ㆍ종료 - 프로그램 종료
ㆍstatic int count = 0; // 초기화 한 번만 실행
ㆍ객체 생성 없이도 메서드 사용 가능

3️⃣ 배열(Array)

(1) 배열 개념

ㆍ같은 타입 변수들의 집합

(2) 배열 선언

1차원 배열 선언

ㆍ초기값 X - 정수 0, 실수 0.0, 문자열 NULL로 저장

자료형 []배열명 = new 자료형[요소개수];
자료형 배열명[] = new 자료형[요소개수];

ㆍ초기값 O

자료형 []배열명 = new 자료형[요소개수];
자료형 배열명[] = { 초기값1, 초기값2, ... };

2차원 배열

ㆍ초기값 X - 정수 0, 실수 0.0, 문자열 NULL로 저장

자료형 [][]배열명 = new 자료형[행][열];
자료형 배열명[][] = new 자료형[행][열];

ㆍ초기값 O

자료형 []배열명 = new 자료형[요소개수];
자료형 [][]배열명 = { {초기값1, 초기값2, ...}, {초기값a, 초기값b, ...}, {초기값ㄱ, 초기값ㄴ, ...} };

4️⃣ 표준 입출력 함수

(1) 표준 출력 함수

System.out	.print();	// 개행(enter, next line)을 하지 않음
	.println();	// 개행을 함
	.printf();	// 변수 출력 가능 (like C언어)

(2) 표준 입력 함수

System.in.readLine(); // BufferReader와 함께 사용

5️⃣ 연산자(Operator)

ㆍ문자열 + 문자열/정수/실수 = 문자열

"5 + 2 = " + 3 + 4  // 3, 4가 모두 문자열이 되어서 5 + 2 = 34가 출력
5 + 2 + "= 3 + 4"  // 5, 2는 연산을 하고 문자열이 출력되어 7 = 3 + 4가 출력

(1) 연산자 종류

ㆍ증감 연산자 ++ --
ㆍ산술 + - * / %
ㆍ시프트 << >>
ㆍ관계 > < >= <= == !=
ㆍ비트 & | ^(XOR) ~
ㆍ논리 && || !
ㆍ삼항 (조건식) ? (참) : (거짓)
ㆍ대입 = += -= *= /= %=

(2) 연산자 우선순위

증감 산술 시프트 관계 비트 논리 삼항 대입
1. x++ x--
2. ++x --x
!
~
3. * / %
4. + -
5. << >>
6. < <= > >=
7. == !=
8. &
9. ^
10. |
11. &&
12. ||
13. (조건식) ? (참) : (거짓)
14. = += -= *= /= %=

(3) 연산자 상세

증감 연산자 (Incremenmt & Decrement Operator)

x++ vs. ++x 차이점
ㆍx++ / x-- : 변수 값 사용 -> 값을 1 증가/감소
ㆍ++x / --x : 값을 1 증가/감소 -> 변수 값 사용

산술 연산자

/ (나누기 연산)
ㆍ정수 / 정수 = 정수
ㆍ정수 / 실수 = 실수
ㆍ실수 / 정수 = 실수
ㆍ실수 / 실수 = 실수

% (나머지 연산)
ㆍ정수끼리만 사용

시프트 연산자 (Shift Operator)

ㆍa << b: a * 2^b
ㆍa >> b: a / 2^b

비트 연산자 (Bit Operator)

ㆍ& : AND 연산자. 모두 1이면 1, 하나라도 0이면 0
ㆍ| : OR 연산자. 하나라도 1이면 1, 모두 0이면 0
ㆍ^ : XOR 연산자. 서로 다르면 1, 같으면 0
ㆍ~ : NOT 연산자. 0 ↔ 1. 0이면 1, 1이면 0

논리 연산자 (Logic Operator)

ㆍ&& : AND 연산자. 모두 True면 True, 하나라도 Fasle면 False
ㆍ|| : OR 연산자. 하나라도 True면 True, 모두 Fasle면 Fasle
ㆍ! : NOT 연산자. False ↔ True. False면 True, True면 False
ㆍcf : 참이면 1, 거짓이면 0을 반환

6️⃣ 조건문

(1) if 문

ㆍ조건의 참 거짓 여부에 따라 경로 선택
ㆍ코드 한 줄일 경우, 중괄호 생략 가능

(2) switch 문

ㆍ여러 개의 경로 중 하나의 경로 선택
ㆍ경우와 일치하는 case 문 실행
ㆍ경우와 일치하는 case 없으면 default 실행
ㆍbreak 만날 때 까지 계속 실행 (break 없으면 모든 case, default 까지 실행됨)

7️⃣ 반복문

(1) while 문

while(조건문){
  명령문;
}

ㆍ조건문이 참일 동안 명령문 반복 수행

(2) do while 문

do{
  명령문;
} while(조건문)

ㆍ조건문의 참 거짓 여부에 관련 없이 무조건 반복문 한 번 수행
ㆍ이후 조건문이 참일 동안 명령문 반복 수행

(3) for 문

for(초기식; 조건식; 증감식){
  명령문;
}

ㆍ조건식이 참일 경우 명령문 수행
ㆍ증감식으로 값 변경, 조건식 참일 경우 명령문 수행 과정을 반복

(4) for each 문

for( 제어변수 : 배열 ) {
  명령문;
}

String[] grade = { A, B, C };
for( String g : grade ) {
  System.out.print(g); // 결과: ABC
}

ㆍ배열, 리스트 크기만큼 반복
ㆍ배열, 리스트 항목을 순차적으로 변수에 대입

8️⃣ 메서드

(1) 사용자 정의 함수(메서드)

ㆍ사용자가 직접 새로운 함수 정의
ㆍ매개변수, 생성된 변수 -> 사용자 정의 함수 종료되면 없어짐

(2) static 메서드

ㆍ클래스가 메모리에 올라갈 때 -> 자동으로 생성됨
ㆍ인스턴스 생성 X -> 메서드 호출 가능

[정처기 실기] 6. 프로그래밍 언어 활용 요약 - C언어2

로데시 — Wed, 25 Mar 2026 11:08:33 +0900

☰ 정보처리기사 실기

Ⅵ. 프로그래밍 언어 활용

02. C언어

1️⃣ 배열

(1) 배열 종류

1차원 배열

int a[3] = {1,2} // a[2]는 0으로 초기화
float b[3] = {1.1, 1.2} // b[2]은 0.0으로 초기화
char c[8] = "Hello"; // 나머지는 NULL 로 초기화

2차원 배열

int a[2][3] = {1,2,3,4} // a[2]는 0으로 초기화

1	2	3
4	0	0

char b[2][8] = {"Hello", "computer"}; // 나머지는 NULL 로 초기화

H	e	l	l	o	NULL	NULL	NULL
c	o	m	p	u	t	e	r

2️⃣ 문자열

(1) 1차원 배열과 문자열

ㆍchar 형 배열로 표현
ㆍ초기화 할 때 마지막에 NULL 문자 삽입
ㆍprintf("%s")시 NULL 직전까지 읽어서 출력

cf) 문자열과 주소

int a[5]
ㆍ&a[0] <=> a <=> a의 0번째 주소
ㆍ&a[3] <=> a + 3 <=> a의 3번째 주소

(2) 2차원 배열과 문자열

ㆍchar 형 2차원 배열을 사용
ㆍ&a[0][0] <=> a[0] <=> a의 0번째 행, 0번째 열의 주소
ㆍ&a[1][2] <=> a[1] + 2 <=> a의 1번째 행, 2번째 열의 주소

3️⃣ 구조체(Structure Type)

(1) 구조체 개념

ㆍ기본 자료형으로 새롭게 정의할 수 있는 사용자 정의 자료형
ㆍ초기화 할 때 마지막에 NULL 문자 삽입
ㆍprintf("%s")시 NULL 직전까지 읽어서 출력

(2) 구조체 선언

ㆍ구조체 정의

struct 구조체명{
  자료형 변수명;
  char gender;
  int age;
}

ㆍ구조체 변수 선언 및 초기화

struct 구조체명 변수명 = {'F', 21};

ㆍ구조체 멤버 접근

ㆍp.gender = 'M', p.age = 25; // 일반 변수
ㆍp->gender = 'M', p->age = 25; // 포인터 변수

4️⃣ 함수

(1) main 함수

ㆍ모든 프로그램의 시작
ㆍvoid main() 일 경우, return; or ~~return~~ 자체를 사용 안 함
ㆍint main() 일 경우, return 반환값; 명시

(2) 사용자 정의 함수(User-Defined Function)

ㆍ매개변수, 생성된 변수 -> 사용자 정의 함수 종료되면 없어짐
ㆍmain 함수에서 fn() 호출 시 ->
1) main 함수 위에 fn() 작성
2) fn()이 함수라고 명시

① 매개변수 전달 방법(Parameter Passing Mechanism)

구성요소

ㆍ매개변수(parameter) - 호출하는 쪽에서 전달받는 변수의 값/주솟값

int fn(int x, int y){ // 매개변수
  ...
}

ㆍ전달인자(argument) - 호출하는 쪽에서 전달하는 변수의 값/주솟값

void main(){
  int i, j;
  ...
  fn(i, j); // 전달인자
}

종류

ㆍCall by Value
- 새로운 공간에 할당
- 실 매개변수에 영향 X

int fn(int x, int y){
  ...
}

void main(){
  int i, j;
  ...
  fn(i, j);
}

ㆍCall by Reference
- 메모리 공간의 주소 전달
- 실 매개변수의 주소를 형식 매개변수로 보냄

int fn(int* x, int* y){ // * 는 간접 연산자
  ...
}

void main(){
  int i, j;
  ...
  fn(&i, &j); // & 는 주소 연산자
}

② 재귀함수(Recursive Function)

ㆍ함수 자신이 자신을 부르는 함수
ㆍ계산이 끝나면 main으로 return

(3) 표준 함수

문자열 함수 ㅡ string.h 헤더 추가

ㆍstrcat (Concatenate - 문자열끼리 연결)

strcat("Hello", "Clan"); // HelloClan
strncat("Hello", "Clan", 2); // HelloCl

ㆍstrcpy (Copy - 문자열 복사)

strcpy("Hello", "Clan"); // Clan
strncpy("Hello", "Clan", 2); // Clllo - Hello 중 앞 2글자(Cl)만 복사됨

ㆍstrcmp (Compare - 문자열 비교)
strcmp(s1,s2); 일 때, s1 > s2면 1, s1 = s2면 0, s1 < s2면 -1을 반환 (아스키 코드를 비교)

strcmp("Hello", "Clan"); // -1
strncmp("Hello", "Help", 2); // 0

ㆍstrlen (Length - 문자열 길이)

strlen("Hello"); // 5

ㆍstrrev (Reverse - 문자열 뒤집음)

strrev("Hello"); // olleH

ㆍstrchr (Char - 일치하는 문자 있는지 검사)

strchr("Hello", "H"); // Hello - 일치하는 문자부터 NULL 전까지 출력
strchr("Hello", "l"); // llo

수학 함수 ㅡ math.h 헤더 추가

ㆍsqrt(n) - 양의 제곱근 계산, 소수 확인할 때 사용
ㆍceil(n) - 소수점 올림
ㆍfloor(n) - 소수점 내림

유틸리티 함수 ㅡ stdlib.h, time.h 헤더 추가

ㆍrand() - 임의의 값 생성 (0~32767(=2¹⁵-1))
ㆍsrand(seed) - seed 값에 따른 임의의 값 생성
ㆍtime() - 현재 시간 가져옴

ㆍatoi(str) - 문자열(str) -> 정수형(int) 변환
ㆍatof(str) - 문자열(str) -> 실수형(float, double) 변환
ㆍitoa(value, str, radix) - value 를 변환하여 str에 radix 진수로 저장

5️⃣ 포인터

포인터 - 변수의 주솟값 저장

(1) 포인터 선언

자료형* 포인터변수명 = & 변수명
* : 자료형과 쓰임 - 주솟값을 저장하는 변수 선언
포인터 변수명/주솟값을 의미하는 변수와 함께 쓰임 - 그 주소의 값
& : 변수명 앞에 붙음 - 해당 변수명의 주솟값

ex)

int a = 10;
int *b = &a; // b는 a의 주솟값을 갖는다
printf("%d %d %d", a, *b, *(&a)); // a는 10, b가 가리키는 곳의 값 = 10, a의 주소가 가리키는 곳의 값 = 10

char *p = "KOREA";
printf("%c", *p+2); // *p 계산 후 + 2 를 연산. *p의 값은 K, K+2를 문자로 출력하면 M (∵아스키코드)
printf("%c", *(p+2)); // p+2 계산 후 * 를 연산. p+2의 값은 R의 주솟값. *(R의 주솟값)을 연산하면 R

(2) 배열과 포인터

ㆍ포인터와 배열 -> 둘 다 주소 갖고 있다.

1차원 배열과 포인터

int a[3] = {1, 2, 3}
int *p = a;

ㆍa[]의 주솟값을 각각 100, 101, 102 로 가정
ㆍp는 a의 주솟값인 100을 갖고 있음
ㆍ이를 표로 나타내면 다음과 같다

	a	a[0]	a[1]	a[2]
주솟값	100	100	101	102
값		1	2	3

100

ㆍ그림을 꼭 그려서 포인터에 익숙해지길 바랍니다
ㆍp*는 '그 곳의 값'임을 명심

예제)

printf("%d", *p); // 100번지의 값 = 1 

printf("%d", *(p+1));
// p+1 먼저 계산; 100+1=101
// 그 다음 *(101) 계산; 101번지의 값 = 2

*p++ = 10;
// 연산이 2가지. *p = 10 & p++
// *p = 10 먼저 계산; p가 가리키는 곳의 값을 10으로 만들어라 -> a[0]의 값이 1에서 10으로 대입됨
// 그 다음 p++ 연산; p가 가리키는 곳인 100에서 ++ 해줘라. -> p가 가리키는 값이 100에서 101이 됨

*++p = 20;
// 연산이 2가지. *p = 20 & p++
// p++ 먼저 연산; p가 가리키는 곳인 101에서 ++ 해줘라. -> p가 가리키는 값이 101에서 102가 됨
// 그 다음 *p = 10 계산; p가 가리키는 곳의 값을 20으로 만들어라. -> a[3]의 값이 3에서 20으로 대입됨

2차원 배열과 포인터

int a[3][2] = { {1, 2}, {3, 4}, {5, 6} };
int *p = a[1];

ㆍa[][]의 주솟값을 각각 100, 101, 102, 103, 104, 105 로 가정
ㆍp*는 '그 곳의 값'임을 명심
ㆍa는 100번지임을 명심
ㆍ*a도 100번지임을 명심. 왜냐하면 a가 가리키는 곳의 값은 대표행 a[0]의 주소를 의미
ㆍ**a는 '그 곳의 값의 값'임을 명심. 즉, 100번지의 값이므로 1

a

100

대표행주소	대표행	값
100	a[0]	1	2
102	a[1]	3	4
104	a[2]	5	6

102

예제)

printf("%d", *p); // p는 102, *(102)는 102번지의 값을 의미. ∴ *p = 3

printf("%d", *(p+2)); // p는 102, p+2는 104, *(104)는 104번지의 값을 의미. ∴ *(p+2) = 5

printf("%d", *(*a+1)); // *a는 100, *a+1은 100+1, *(101)은 101번지의 값을 의미. ∴ *(*a+1) = 2

printf("%d", *a[1]); // a[1]는 102, *(102)는 102번지의 값을 의미. ∴ *a[1] = 3

2차원 배열과 포인터 배열

ㆍ포인터 배열: 포인터 변수의 배열화, 배열 요소에 주솟값이 있다

char *student[3] = { "kim", "lee", "han" };

ㆍstudent[]에는 주솟값이 들어감
ㆍstudent[]의 주솟값을 100번지 로 가정
ㆍkim, lee, han가 들어간 주솟값을 각각 20번지, 30번지, 40번지 로 가정
ㆍkim에서 k 20번지, i 21번지, m 22번지로 연속해서 주솟값이 들어간다. lee, han도 동일

student	20번지	30번지	40번지
100	100	101	102

20번지	k	i	m
30번지	l	e	e
40번지	h	a	n

예제)

printf("%s", *(student+1));
  // student + 1 계산 후 -> * 를 연산
  //ㆍstudent 은 100, student + 1은 101
  //ㆍ*(101)은 101의 값을 의미, 101의 값은 30번지, %s을 만났으니 30번지부터 NULL 만날 때까지 계속 출력.
  // ∴ lee

char *array[2] = { "Good morning", "C language" };

ㆍarray[]에는 주솟값이 들어감
ㆍarray[]의 주솟값을 100번지 로 가정
ㆍGood morning, C language의 주솟값을 각각 20번지, 50번지 로 가정

array	20번지	50번지
100	100	101

20번지

50번지

예제)

printf("%s", array[0]+5);
  // array[0]의 값은 20, array[0]+5는 25, 25번지부터 NULL 만날 때까지 문자열 출력.
  // ∴ morning

printf("%c", *(array[1]+6));
  // array[1]의 값은 50, array[1]+6은 56, *(56)은 56번지의 값.
  // ∴u

001 C 언어 - 기본 구조, 자료형, 식별자, 변수, 표준 입출력 함수

로데시 — Mon, 23 Mar 2026 10:00:41 +0900

☰ C언어 개념 정리

001. C언어 - 기본구조, 자료형, 식별자, 변수, 표준 입출력 함수

1️⃣ C언어 기본

(1) C언어 기본 구조

ㆍ전처리 부분 + 본문
ㆍ헤더 - xxxx.h

(2) 전처리기(Preprocessor)

개념

전처리기 지시문(#)을 처리

종류

ㆍ#include (헤더 파일),
ㆍ#define (매크로 정의, 예약어 - 상숫값 지정)

2️⃣ 자료형(Data Type)

(1) 자료형 유형

ㆍ문자 - char
ㆍ정수 - int
ㆍ부동 소수점 - float, double

3️⃣ 식별자(Identifier)

(1) 식별자 명명 규칙

ㆍ사용 가능 - 대/소문자, 숫자, 언더바(_)
ㆍ규칙 - 처음에 숫자 사용 X ~~(1num)~~ / 중간에 공백 X / 예약어 변수로 X ~~(if)~~

(2) 식별자 표기법

ㆍ카멜(Camel) - inputFunction; 첫 단어 첫 글자 소문자, 나머지 단어 첫 글자 대문자
ㆍ파스칼(Pascal) - InputFunction; 모든 단어 첫 글자 대문자
ㆍ스네이크(Snake) - input_function; 모든 단어 사이에 언더바
ㆍ헝가리안(Hungarian) - nScore; 자료형 + 식별자
int(n), char(c), 문자열(sz)

4️⃣ 변수(Variable)

(1) 변수 개념

ㆍ어떠한 값을 주기억 장치에 기억하기 위한 공간

(2) 변수 선언

ㆍ변수나 함수가 있음을 알려주는 행위

ㆍ 자료형 변수명; // 초기화 X
ㆍ 자료형 변수명 = 초깃값; // 초기화 O

(3) 변수 유효범위

전역 변수(Global Variable)

ㆍ아무 곳에서 사용 가능
ㆍ생성 - 프로그램 시작
ㆍ종료 - 프로그램 종료
ㆍ초기화 X - 정수 = 0, 실수 = 0.0, 문자 = NULL 로 자동 초기화

지역 변수(Local Variable)

ㆍ해당 블록 내에서만 사용 가능
ㆍ선언 - 블록이 시작하는 부분
ㆍ종료 - 중괄호가 닫히는 시점

5️⃣ 표준 입출력 함수

; <stdio.h> 선언

(1) 표준 출력 함수(printf)

단순 출력

printf("문자열");

이스케이프 문자 이용

printf("\t문자열\n"); // \n(개행 문자), \t(tab 수평이동)

포맷스트링 이용

ㆍ문자 printf("%c", char);
ㆍ문자열 printf("%s", string);
ㆍ정수 printf("%u, %d, %o, %x, %X", 
unsigned_decimal, decimal, octal, hexa_decimal);
// 부호 없는 10진수 정수, 10진수 정수, 8진수 정수, 16진수 정수(영어 소문자, 대문자)
ㆍ부동소수점 printf("%e, %E, %f, %lf", 
exponent, floating_point, long_floating_point);
// 지수 표기, 부동 소수점, 부동 소수점(long)

포맷스트링 - 부동 소수점 상세

%[-][0][전체자리수].[소수점자리수]스트링

ㆍ - : - 를 붙이면 왼쪽 정렬, - 붙이지 않고 [전체자리수] 정해져 있으면 오른쪽 정렬
ㆍ 0 : 빈 공간을 0으로 채움
ㆍ 전체자리수 : 소수점(.) 포함
ㆍ 소수점자리수 : [소수점자리수]만큼 소수점 출력 (반올림)

1.234에 대해 각 포맷 스트링을 적용했을 때

%-05.lf	1	.	2
%05.lf	0	0	1	.	2
%5.lf			1	.	2
%.2f	1	.	2	3

(2) 표준 입력 함수(scanf)

ㆍ포맷 스트링으로 데이터 읽음
ㆍ포맷 스트링은 printf와 동일

scanf("%d %c", &age, &gender); // &변수 = 변수의 주솟값

[정처기 실기] 6. 프로그래밍 언어 활용 요약 - C언어1

로데시 — Fri, 20 Mar 2026 19:37:44 +0900

☰ 정보처리기사 실기

Ⅵ. 프로그래밍 언어 활용

01. 프로그래밍을 위한 기본 사항

1️⃣ 진수

(1) 진수 변환

ㆍ2 <-> 10 진수 변환

(2) 아스키 코드 (ASCII Code)

10진수	부호
0	NULL
32	' '(space)
48	0
65	A
97	a

02. C언어

1️⃣ C언어 기본

(1) C언어 기본 구조

ㆍ전처리 부분 + 본문
ㆍ헤더 - xxxx.h

(2) 전처리기(Preprocessor)
개념

전처리기 지시문(#)을 처리

종류

ㆍ#include (헤더 파일),
ㆍ#define (매크로 정의, 예약어 - 상숫값 지정)

2️⃣ 자료형(Data Type)

(1) 자료형 유형

ㆍ문자 - char
ㆍ정수 - int
ㆍ부동 소수점 - float, double

3️⃣ 식별자(Identifier)

(1) 식별자 명명 규칙

ㆍ사용 가능 - 대/소문자, 숫자, 언더바(_)
ㆍ규칙 - 처음에 숫자 사용 X ~~(1num)~~ / 중간에 공백 X / 예약어 변수로 X ~~(if)~~

(2) 식별자 표기법

4️⃣ 변수(Variable)

(1) 변수 개념

ㆍ어떠한 값을 주기억 장치에 기억하기 위한 공간

(2) 변수 선언

ㆍ변수나 함수가 있음을 알려주는 행위

ㆍ 자료형 변수명; // 초기화 X
ㆍ 자료형 변수명 = 초깃값; // 초기화 O

(3) 변수 유효범위
전역 변수(Global Variable)

ㆍ아무 곳에서 사용 가능
ㆍ생성 - 프로그램 시작
ㆍ종료 - 프로그램 종료
ㆍ초기화 X - 정수 = 0, 실수 = 0.0, 문자 = NULL 로 자동 초기화

지역 변수(Local Variable)

ㆍ해당 블록 내에서만 사용 가능
ㆍ선언 - 블록이 시작하는 부분
ㆍ종료 - 중괄호가 닫히는 시점

5️⃣ 표준 입출력 함수

; <stdio.h> 선언

(1) 표준 출력 함수(printf)
단순 출력

printf("문자열");

이스케이프 문자 이용

printf("\t문자열\n"); // \n(개행 문자), \t(tab 수평이동)

포맷스트링 이용

ㆍ문자 printf("%c", char);
ㆍ문자열 printf("%s", string);
ㆍ정수 printf("%u, %d, %o, %x, %X", 
unsigned_decimal, decimal, octal, hexa_decimal);
// 부호 없는 10진수 정수, 10진수 정수, 8진수 정수, 16진수 정수(영어 소문자, 대문자)
ㆍ부동소수점 printf("%e, %E, %f, %lf", 
exponent, floating_point, long_floating_point);
// 지수 표기, 부동 소수점, 부동 소수점(long)

포맷스트링 - 부동 소수점 상세

%[-][0][전체자리수].[소수점자리수]스트링

1.234에 대해 각 포맷 스트링을 적용했을 때

%-05.lf	1	.	2
%05.lf	0	0	1	.	2
%5.lf			1	.	2
%.2f	1	.	2	3

(2) 표준 입력 함수(scanf)

ㆍ포맷 스트링으로 데이터 읽음
ㆍ포맷 스트링은 printf와 동일

scanf("%d %c", &age, &gender); // &변수 = 변수의 주솟값

6️⃣ 연산자(Operator)

(1) 연산자 종류

ㆍ증감 연산자 ++ --
ㆍ산술 + - * / %
ㆍ시프트 << >>
ㆍ관계 > < >= <= == !=
ㆍ비트 & | ^(XOR) ~
ㆍ논리 && || !
ㆍ삼항 (조건식) ? (참) : (거짓)
ㆍ대입 = += -= *= /= %=

(2) 연산자 우선순위

(3) 연산자 상세

증감 연산자 (Incremenmt & Decrement Operator)

x++ vs. ++x 차이점
ㆍx++ / x-- : 변수 값 사용 -> 값을 1 증가/감소
ㆍ++x / --x : 값을 1 증가/감소 -> 변수 값 사용

산술 연산자

/ (나누기 연산)
ㆍ정수 / 정수 = 정수
ㆍ정수 / 실수 = 실수
ㆍ실수 / 정수 = 실수
ㆍ실수 / 실수 = 실수

% (나머지 연산)
ㆍ정수끼리만 사용

시프트 연산자 (Shift Operator)

ㆍa << b: a * 2^b
ㆍa >> b: a / 2^b

비트 연산자 (Bit Operator)

논리 연산자 (Logic Operator)

7️⃣ 조건문

(1) if 문

ㆍ조건의 참 거짓 여부에 따라 경로 선택
ㆍ코드 한 줄일 경우, 중괄호 생략 가능

(2) switch 문

8️⃣ 반복문

(1) while 문

while(조건문){
  명령문;
}

ㆍ조건문이 참일 동안 명령문 반복 수행

(2) do while 문

do{
  명령문;
} while(조건문)

ㆍ조건문의 참 거짓 여부에 관련 없이 무조건 반복문 한 번 수행
ㆍ이후 조건문이 참일 동안 명령문 반복 수행

(3) for 문

for(초기식; 조건식; 증감식){
  명령문;
}

ㆍ조건식이 참일 경우 명령문 수행
ㆍ증감식으로 값 변경, 조건식 참일 경우 명령문 수행 과정을 반복

(4) 루프 제어 명령어

ㆍbreak 문- 만나면 즉시 반복문 탈출
ㆍcontinue 문- 다음 코드를 실행하지 않고 while 문 시작 부분인 조건식으로 돌아와 이후 과정을 수행

[대학전쟁3] 양면빙고 웹 개발 09 - UI/UX 개선 및 기능 보완

로데시 — Sun, 22 Feb 2026 16:25:20 +0900

0️⃣ 지난 번까지..

지난 글에서는 2인이 play할 수 있는 기능을 구현했다.

오늘은 이어서 UI/UX 개선 및 게임 로직 보완을 중심으로 프로젝트 전반을 리팩토링할 것이다.

☰ 양면빙고 (double-sided-bingo) 개발 과정

ㆍ [대학전쟁3] 양면빙고 웹 개발 01 - list, 타일 뒤집기

ㆍ [대학전쟁3] 양면빙고 웹 개발 02 - 타일 list 내 이동

ㆍ [대학전쟁3] 양면빙고 웹 개발 03 - 타일 착수

ㆍ [대학전쟁3] 양면빙고 웹 개발 04 - 타일 뒤집기, 이동

ㆍ [대학전쟁3] 양면빙고 웹 개발 05 - 빙고 판단, player 2명

ㆍ [대학전쟁3] 양면빙고 웹 개발 06 - 직전 타일 이동, 뒤집기 제한

ㆍ [대학전쟁3] 양면빙고 웹 개발 07 - timer, highlight, restart

ㆍ [대학전쟁3] 양면빙고 웹 개발 08 - 2인 play

1️⃣ 게임 전 - 대기 및 설정 (Setup)

메인 화면 CSS 적용

메인 화면의 UI 개선을 위해 CSS 스타일을 적용했다.

초대 코드 복사

게임방 생성 후 현재 방의 초대 코드가 화면에 표시되도록 구성했다. 사용자가 코드를 클릭하면 자동 복사되며, 복사 되었음을 시각적으로 전달하기 위해 CSS의 @keyframes을 활용하여 초대 코드 크기가 축소 후 다시 되돌아오는 애니메이션을 추가했다. 이를 통해 플레이어 간 빠른 초대가 가능하도록 개선했다.

3초 후 게임 시작

두 플레이어가 모두 입장하면 즉시 게임이 시작되는 대신 게임 시작 전 3초의 카운트다운을 거친 후 게임이 시작되도록 로직을 수정했다. 카운트다운은 3-2-1 숫자가 화면 중앙에 화면에 애니메이션으로 구성해 게임 시작 시점을 직관적으로 인지할 수 있도록 UX를 개선했다.

입장 제한

player 정원을 2명으로 제한해 방의 인원 정원이 초과된 경우에는 추가 입장이 불가하도록 입장 제한 로직을 구현했다.

2️⃣ 게임 중 - 진행 단계 (In-Game)

시간 set

❓ 타일 리스트에서 뒤집기, 정렬 시 timer reset

현재는 playing 상태에서 모든 snapshot마다 타이머가 갱신되고 있다. 그 결과 타일 리스트 정렬 및 뒤집기와 같은 단순 UI 상호작용에도 시간이 갱신되는 문제가 발생했다.

문제 해결 (Game.js)

기존에는 아래 조건문으로 인해 snapshot 변경 시마다 타이머가 초기화되는 문제가 발생했다. Game.js의 함수 applyRoomSnapshot 내부의 타이머 초기화 로직을 제거해 타이머가 턴 변경 시에만 reset되도록 수정했다.

- if (roomDoc.status === "playing" && !roomDoc.winner) {
-   setTimeLeft(TURN_LIMIT);
- }

turn 변경

❓ time out 시 turn 변경 안 됨

현재는 타이머 제한 시간이 종료되어도 턴이 변경되지 않는 문제가 있다. 타임아웃 처리가 로컬 타이머(UI)에서만 수행되어 서버 상태(currentTurn)가 갱신되지 않아 상대 플레이어로 턴이 넘어가지 않았던 것이다.

문제 해결 (roomService.js, Game.js)

타임아웃 발생 시 서버 트랜잭션을 통해 턴을 명시적으로 넘기도록 수정했다. 이를 위해 서버에서 안전하게 턴을 전환하는 함수를 구현하고 로컬 타이머 종료 시 해당 함수를 호출하도록 구조를 변경했다.

ㆍ roomService.js: 서버에서 안전하게 턴 전환 함수 구현

ㆍ Game.js: 로컬 타이머 종료 시 서버 함수를 호출하도록 수정하고 중복 호출 방지 로직 추가

roomService.js

export async function handleTurnTimeout({ roomId, timedOutUid }) {
  if (!roomId) throw new Error("roomId required");
  if (!timedOutUid) throw new Error("timedOutUid required");

  const roomRef = doc(db, "rooms", roomId);

  try {
    const result = await runTransaction(db, async (tx) => {
      const snap = await tx.get(roomRef);
      if (!snap.exists()) return { updated: false, reason: "ROOM_NOT_FOUND" };

      const room = snap.data();

      // 상태/승자 검증
      if (room.status !== "playing") return { updated: false, reason: "NOT_PLAYING" };
      if (room.winner) return { updated: false, reason: "ALREADY_ENDED" };

      // 현재 턴 확인 (중복/경합 방지)
      if (room.currentTurn !== timedOutUid) return { updated: false, reason: "TURN_CHANGED" };

      const players = room.players || {};
      const playerUids = Object.keys(players);
      if (playerUids.length < 1) return { updated: false, reason: "NO_PLAYERS" };

      // turn 넘기기
      const nextUid = getNextTurnUid(players, timedOutUid);
      if (!nextUid) return { updated: false, reason: "NO_OTHER_PLAYER" };

      // DB 업데이트 - turnCount 증가 X
      const updateData = {
        currentTurn: nextUid,
        lastAction: {
          type: "TIMEOUT",
          actorUid: timedOutUid,
          ts: serverTimestamp(),
        },
        lastTimeoutAt: serverTimestamp(),
      };

      tx.update(roomRef, updateData);

      return { updated: true, newTurn: nextUid };
    });

    return result;
  } catch (err) {
    console.error("handleTurnTimeout transaction failed:", err);
    throw err;
  }
}

ㆍ 트랜잭션 내에서 현재 룸 상태 검증:

- 방 존재, status === "playing", winner 없음

- room.currentTurn이 timedOutUid(타임아웃 당한 플레이어)와 동일한지 확인

ㆍ currentTurn을 상대 플레이어로 변경

ㆍ lastAction에 { type: "TIMEOUT", actorUid: timedOutUid, ts: serverTimestamp() } 기록

ㆍ 반환값으로 성공여부와 새 currentTurn 반환

Game.js

setTimeLeft((prev) => {
  if (prev <= 1) {
  // 타임아웃 시도는 currentTurn이 내 uid일 때만 실행
  if (currentTurn === myUid && !timeoutCallingRef.current) {
    timeoutCallingRef.current = true;
    (async () => {
      try {
        const res = await handleTurnTimeout({ roomId, timedOutUid: currentTurn });     
        setTimeLeft(TURN_LIMIT);
      } catch (err) {
        console.error("handleTurnTimeout failed", err);
        // 실패 시 안전하게 리셋
        setTimeLeft(TURN_LIMIT);
      } finally {
        timeoutCallingRef.current = false;
      }
    })();
  } else {
    setTimeLeft(TURN_LIMIT);
  }
  return TURN_LIMIT; // 현재 20초 제한 (추후 수정)
}
  return prev - 1;
});

ㆍ 로컬 타이머가 0이 되었을 때 오직 현재 턴을 가진 플레이어의 클라이언트만 서버에 handleTurnTimeout 호출을 시도 (동시 호출이 발생하더라도 서버 트랜잭션으로 안전하게 보호됨)

ㆍ 중복 호출 방지를 위해 timeoutCallingRef 도입

ㆍ 호출 성공/실패 후 timeLeft를 재설정

상대방 나갈 시 게임 종료

중도 퇴장 시 게임 종료 및 승패 처리 로직을 구현했다.

버튼

게임 중 플레이어가 '나가기' 버튼으로 세션을 이탈하면 게임을 즉시 종료하고 남은 플레이어에게는 모달창으로 상대의 이탈과 승리 결과를 알리도록 구현했다.

뒤로 가기

게임 중 플레이어가 '뒤로 가기' 로 세션을 이탈하면 게임을 즉시 종료하고 남은 플레이어에게는 모달창으로 상대의 이탈과 승리 결과를 알리도록 구현했다.

3️⃣ 게임 후 - 결과 및 피드백 (Outcome)

빙고 완성

❓ 둘의 main color가 아닌데 빙고가 완성됨

player의 main color가 아닌 타일 조합에서도 빙고 라인이 감지되어 게임이 종료되는 문제가 발생했다.

// 승자 set
if (!serverWinner && uidWithColor) setServerWinner(uidWithColor);
// 빙고 line set
setWinningLine(found);

문제 해결 (Game.js)

기존 로직은 특정 줄에서 빙고 라인이 탐지 되면 main color와 무관한 빙고 라인 완성 시에도 승자 설정 로직이 실행되어 게임이 종료되는 문제가 있었다. 이를 해결하기 위해 player의 main color로 빙고가 완성된 경우에만 승자 설정 및 빙고 라인이 표시되도록 로직을 수정했다.

if (uidWithColor) {
  setWinningLine(found); // 빙고 line set
}

rematch 모달창

게임 종료 시 단순히 'rematch' 버튼만 보여주는 것이 아니라 대화형 리매치 모달을 띄우도록 구현했다. UI/UX 측면에서 요청, 대기, 수신, 응답의 각 상태 전환에 맞춰 모달 메시지가 동적으로 변경되도록 구현해 즉각적인 시각적 피드백을 제공했다. 이를 통해 player가 진행 상황을 명확히 인지할 수 있도록 했으며 단순 대기 시간을 인터랙티브한 경험으로 전환하도록 설계했다.

모달창 승자 표시

게임 종료 시 플레이어가 결과를 즉각적으로 인지할 수 있도록 모달창 상단에 You win / You lose 메시지를 배치해 플레이어가 승패 결과를 한눈에 확인할 수 있는 직관적인 UI를 구현했다.

rematch 시 main color

❓ rematch 시 main color가 계속 유지됨

rematch 시 이전 게임에서 부여받은 각각의 main color가 그대로 유지되는 문제가 있다.

문제 해결 (roomService.js)

이는 rematch 초기화 과정에서 플레이어 색상 재할당 로직이 제대로 수행되지 않았기 때문이다. 이를 해결하기 위해 rematch 시 기존에 작성한 assignRandomColors 함수를 호출해 main color가 무작위로 다시 배정되도록 수정했다.

const hostUid = room.hostUid || playerUids[0];
const otherUid = playerUids.find(u => u !== hostUid) || hostUid;

const updatedPlayers = assignRandomColors(newPlayers, hostUid, otherUid); // random으로 색 다시 배정

4️⃣ 시스템(System) 및 공통 로직

라우팅(Routing) 분리

메인 화면과 게임 화면의 역할을 명확히 분리하기 위해 라우팅 구조를 분리했다. 기존에는 하나의 흐름에서 화면 상태로만 전환되던 구조였으나 /home과 /game 경로를 각각 독립적으로 구성해 화면 책임을 분리하고 네비게이션 흐름을 명확히 했다. 이를 통해 진입 로직, 게임 세션 관리, 예외 처리 등을 화면 단위로 관리할 수 있도록 구조를 개선했다.

5️⃣ 앞으로...

이제 자잘한 오류들을 거의 다 잡았다.. 끝이 보이는데 끝이 보이질 않는다. 3월 되기전에는 끝ㄴ내야지

[대학전쟁3] 양면빙고 웹 개발 08 - 2인 play

로데시 — Sun, 8 Feb 2026 22:40:18 +0900

0️⃣ 지난 번까지..

지난 글에서는 제한시간이 넘어가면 turn이 넘어가고, 빙고 완성 시 highlight가 되고, restart 할 수 있는 기능을 구현했다.

오늘은 이어서 2인 play가 가능한 기능을 구현해보고자 한다.

☰ 양면빙고 (double-sided-bingo) 개발 과정

ㆍ [대학전쟁3] 양면빙고 웹 개발 01 - list, 타일 뒤집기

ㆍ [대학전쟁3] 양면빙고 웹 개발 02 - 타일 list 내 이동

ㆍ [대학전쟁3] 양면빙고 웹 개발 03 - 타일 착수

ㆍ [대학전쟁3] 양면빙고 웹 개발 04 - 타일 뒤집기, 이동

ㆍ [대학전쟁3] 양면빙고 웹 개발 05 - 빙고 판단, player 2명

ㆍ [대학전쟁3] 양면빙고 웹 개발 06 - 직전 타일 이동, 뒤집기 제한

ㆍ [대학전쟁3] 양면빙고 웹 개발 07 - timer, highlight, restart

ㆍ [대학전쟁3] 양면빙고 웹 개발 09 - UI/UX 개선 및 기능 보완

1️⃣ firebase

firebase

이 게임은 2인이 동시에 접속해 play하는 웹 기반 빙고 게임이다. 별도의 서버를 직접 구축하기보다는 빠르게 배포하고 실시간 상태 동기화를 처리할 수 있는 백엔드 서비스가 필요했다. Firebase는 웹 배포(Hosting), 사용자 인증(Auth), 그리고 실시간 데이터베이스(Firestore)를 한 번에 제공하기 때문에 프론트엔드 중심의 개인 프로젝트에 적합하다고 판단해 Firebase를 사용했다.

Firebase 프로젝트 생성 및 기본 설정 과정은 공식 문서를 참고했다. 자세한 내용은 아래 링크에서 확인할 수 있다.

2️⃣ 현재 진행 상황

메인 화면

게임 화면과 분리된 메인 화면을 새로 구현했다. 메인 화면에서는 방을 새로 생성하거나 이미 생성된 초대코드를 입력하여 게임에 입장할 수 있다. (아직은 CSS가 적용되지 않은 상태다.)

방 생성

'방 생성' 버튼을 누르면 게임 화면에 입장한다. 다른 플레이어를 초대할 수 있는 초대 코드도 함께 확인할 수 있다.

방 입장

앞서 발급된 초대 코드를 다른 플레이어가 입력하면 동일한 게임 방에 입장할 수 있다."

play

실시간 동기화가 정상적으로 동작하는가 확인하기 위해 두 개의 브라우저로 교차 테스트를 진행했다. 같은 방에 입장한 뒤 subscribeRoom을 통해 한쪽 탭에서 발생한 행동이 다른 탭에도 실시간으로 반영되는 것을 확인할 수 있었다. 착수, 뒤집기, 이동 모든 액션이 Firestore를 통해 즉시 동기화되었고 별도의 새로고침 없이도 두 클라이언트의 상태가 일관되게 유지되는 것을 확인했다.

3️⃣ 앞으로...

아직 세세한 오류가 너무너무너무너ㅜㅁ너무 많다... 이 오류들을 잘 잡고 깔끔하게 CSS 적용하면 끝이다! (왜 끝날 것 같은데 안 끝나냐)

[대학전쟁3] 양면빙고 웹 개발 07 - timer, highlight, restart

로데시 — Sat, 31 Jan 2026 20:16:05 +0900

0️⃣ 지난 번까지..

지난 주에 양면빙고를 끝냈어야 했는데... 너무 오랜만에 글을 써본다...

지난 글에서는 빙고판 위의 타일 개수에 따라 이동 뒤집기를 제한하는 기능을 구현했다.

오늘은 이어서 시간 제한을 만들어 제한시간이 넘어가면 turn이 넘어가는 기능을 구현해보고자 한다.

☰ 양면빙고 (double-sided-bingo) 개발 과정

ㆍ [대학전쟁3] 양면빙고 웹 개발 01 - list, 타일 뒤집기

ㆍ [대학전쟁3] 양면빙고 웹 개발 02 - 타일 list 내 이동

ㆍ [대학전쟁3] 양면빙고 웹 개발 03 - 타일 착수

ㆍ [대학전쟁3] 양면빙고 웹 개발 04 - 타일 뒤집기, 이동

ㆍ [대학전쟁3] 양면빙고 웹 개발 05 - 빙고 판단, player 2명

ㆍ [대학전쟁3] 양면빙고 웹 개발 06 - 직전 타일 이동, 뒤집기 제한

ㆍ [대학전쟁3] 양면빙고 웹 개발 08 - 2인 play

ㆍ [대학전쟁3] 양면빙고 웹 개발 09 - UI/UX 개선 및 기능 보완

1️⃣ timer

App.js 코드

const 추가

const TURN_LIMIT = 60;
const [timeLeft, setTimeLeft] = useState(TURN_LIMIT);
const isDanger = timeLeft <= 5;

ㆍ TURN_LIMIT - 한 turn당 제한 시간을 60으로(초 단위) 설정한다. (현재는 test 단계기 때문에 10으로 설정했다)

ㆍ timeLeft - 남은 시간을 표시하는데 사용한다.

ㆍ isDanger - timeLeft가 5 초과일 경우 false, 5 이하로 줄어들면 true로 설정하여 시각적으로 서로 다른 알림을 주는데에 사용한다.

endTurnNoCount 함수 추가

const endTurnNoCount = () => {
  if (!winner) {
    setCurrentTurn(prev => prev === "me" ? "opponent" : "me");
  }
};

현재는 다른 player의 turn으로 넘어가면 setTurnCount이 1 증가하게 되어있다. 하지만 시간 초과로 turn이 넘어갈 경우에는 setTurnCount이 증가하면 안 된다. (착수하지 않았기 때문이다.) 따라서 turn이 넘어가지만 setTurnCount은 증가하지 않는 함수, endTurnNoCount를 추가로 작성한다.

useEffect 작성

useEffect(() => {
  setTimeLeft(TURN_LIMIT);
}, [currentTurn]);

턴 바뀔 때마다 타이머 TURN_LIMIT가 reset 되도록 코드를 작성한다.

useEffect 작성

useEffect(() => {
  if (winner) return;

  const timer = setInterval(() => {
    setTimeLeft(prev => {
      if (prev <= 1) {
        endTurnNoCount();
        return TURN_LIMIT;
      }
      return prev - 1;
    });
  }, 1000);

  return () => clearInterval(timer);
}, [currentTurn, winner]);

currentTurn이 변경될 때마다 타이머를 실행하기 위해 useEffect가 실행 되도록 한다. (단, winner가 결정되면 타이머를 실행하지 않도록 바로 return 한다.) setInterval을 통해 1초마다 setTimeLeft를 호출하여 남은 시간을 1씩 감소시킨다. 남은 시간이 1 이하가 되면 endTurnNoCount 함수를 호출해 setTurnCount이 증가 없이 턴을 종료하고 다음 player의 턴을 위해 시간을 TURN_LIMIT으로 초기화한다.

return 수정

<div className={`timer ${isDanger ? "danger" : ""}`}>
  <span className="timer-icon">?</span>
  <span className="timer-text">Time Left</span>
  <span className="timer-value">{timeLeft}s</span>
</div>

남은 시간을 화면 상단에 표시한다. danger 클래스를 추가해 isDanger의 값에 따라 타이머의 시각적 효과를 달리 한다.

App.css 코드

css 작성

.timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 8px 14px;
  border-radius: 10px;

  background: #1f2937;
  color: #ffffff;

  font-weight: 600;

  margin-left: 300px;
}

.timer-icon {
  font-size: 18px;
}

.timer-value {
  font-size: 18px;
  font-weight: 700;
  color: #22c55e;
}

.timer.danger {
  background: #dc2626;
  animation: pulse 1s infinite;
}

.timer.danger .timer-value {
  color: #fca5a5;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.timer-container.danger {
  animation: pulse 1s infinite;
}

남은 시간이 5 초과일 경우에는 흰색, 초록색 text와 어두운 계열 배경으로 깔끔한 timer 버튼 UI를 구성한다. 남은 시간이 5 이하일 경우 글자색과 배경색이 각각 #fca5a5 , #dc2626 으로 변한다. 또한 pulse 애니메이션을 적용해 타이머의 크기가 반복적으로 커졌다 작아지도록 설정하여 시간이 얼마 남지 않았음을 시각적으로 강조한다.

타이머

남은 시간이 5 이하일 때와 5 초과일 때 타이머가 서로 다른 스타일로 표시되는 것을 확인할 수 있다.

2️⃣ 빙고 완료 시, 빙고 highlight

App.js 코드

const 추가

const [winningLine, setWinningLine] = useState([]);

완성된 빙고 line을 저장할 const를 작성한다.

checkBingo 수정

// 빙고 기준 set
const lines = [
// 행 빙고
[0,1,2,3], [4,5,6,7], [8,9,10,11], [12,13,14,15],
// 열 빙고
[0,4,8,12], [1,5,9,13], [2,6,10,14], [3,7,11,15],
// 대각선 빙고
[0,5,10,15], [3,6,9,12],
];

const checkBingo = (boardTiles, targetColor) => {
  const winningLine = lines.find((line) =>
    line.every((idx) => {
      const tile = boardTiles[idx];
      if (!tile) return false;
      return getVisibleColor(tile) === targetColor;
    })
  );

  return winningLine || null;
};

빙고가 완성이 될 경우 해당 빙고를 시각적으로 표시하기 위해 checkBingo 함수 코드를 재작성한다. 빙고의 완성 여부를 판별함과 동시에 완성된 빙고 line 배열을 반환한다. 미리 정의한 'lines' 배열을 순회하며 빙고 조건에 만족하는 첫 번째 line을 반환한다.

useEffect 수정

useEffect(() => {
  // 1. 내 빙고 체크
  const myBingoLine = checkBingo(boardTiles, players.me.mainColor);
  if (myBingoLine) {
    setWinner("me");
    setWinningLine(myBingoLine);
    return;
  }

  // 2. 상대 빙고 체크
  const oppBingoLine = checkBingo(boardTiles, players.opponent.mainColor);
  if (oppBingoLine) {
    setWinner("opponent");
    setWinningLine(oppBingoLine);
  }
}, [boardTiles]);

빙고판(bingoboard)이 바뀔 때마다 useEffect를 통해 checkBingo 호출한다. checkBingo를 통해 빙고가 완성됨을 확인하면 완성된 빙고 line을 setWinningLine에 저장한다.

return 함수 수정

<BingoBoard winningLine={winningLine} />

완성된 빙고 line을 BingoBoard 에 전달해준다.

BingoBoard.js 코드

코드 작성

const BingoCell = ({ winningLine= [] })
const isBingo = winningLine.includes(cellId);
isBingo={isBingo}

ㆍ winningLine= [] - winningLine을 props로 받는다.

ㆍ isBingo - 빙고가 완성된 cellId를 저장한다.

ㆍ isBingo={isBingo} - BingoCell에 빙고 여부 전달

BingoCell.js 코드

코드 작성

const BingoCell = ({ isBingo })
${isBingo ? "bingo-highlight" : ""}

ㆍ isBingo - props로 받는다.

ㆍ isBingo ? "bingo-highlight" : "" - 빙고 완성 여부에 따른 CSS를 달리한다.

BingoBoard.css 코드

css 작성

.bingo-highlight {
  border: 3px solid #11ff00 !important;
  box-shadow: 0 0 15px #11ff00;
  transform: scale(1.05);
  z-index: 10;
  transition: all 0.3s ease;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

빙고가 완성된 경우 border와 box-shadow를 사용해 완성된 line을 시각적으로 강조하고 pulse 애니메이션으로 highlight의 크기가 반복적으로 변하도록 스타일을 적용한다.

highlight

빙고가 완성된 경우 초록색 highlight가 표시됨을 볼 수 있고 타일과 line의 크기가 반복적으로 변하는 것을 확인할 수 있다.

3️⃣ restart 버튼

App.js 코드

disabled

{winner && (
  <div className="end">
    <h1 className="winner">
      Winner: {winner === "me" ? "ME" : "OPPONENT"}
    </h1>

    <button
      className="restart"
      onClick={() => window.location.reload()}
    >
      게임 다시 시작
    </button>
  </div>
)}

빙고가 완성되어 winner가 set되면 조건부 렌더링을 통해 winner를 표시하고 그 아래에는 게임을 다시 시작할 수 있는 restart 버튼을 렌더링한다. restart 버튼은 window.location.reload()를 호출해 웹 전체 상태를 초기화하기 때문에 새 게임을 이어서 할 수 있다.

App.css 코드

css 작성

/* 빙고 완성 시 */
.end {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  color: white;

  display: flex;
  flex-direction: column; /* ? 세로 정렬 */
  align-items: center;
  justify-content: center;
  gap: 24px; /* h1과 버튼 사이 간격 */

  z-index: 999;
}

/* 승자 */
.winner {
  font-size: 48px;
  margin: 0;
}

/* 다시 시작 버튼 */
.restart {
  font-size: 18px;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;

  background-color: #ffffff;
  color: #000000;
}

.restart:hover {
  background-color: #e0e0e0;
}

기본 상태에서는 흰색 배경과 검은색 text로 깔끔한 restart 버튼 UI를 구성하고 마우스를 올렸을 때는 :hover를 통해 배경색이 회색으로 변경되도록 설정해 버튼이 클릭 가능한 인터랙션 요소임을 직관적으로 알 수 있도록 한다.

restart

빙고가 완성되면 restart 버튼이 화면에 표시되고 버튼을 클릭해 게임을 다시 시작할 수 있다.

4️⃣ 앞으로...

타이머, 빙고 highlight, restart 버튼을 만들었다. 이제 진짜 진짜 거의 끝이다! 다음에는 컴퓨터 한 대에서 턴을 번갈아 진행하던 방식이 아니라 서로 다른 두 기기에서 play할 수 있도록 구현하고자 한다. 또한 현재처럼 하나의 기기에서도 2명이 play할 수 있게 main color 등이 표시되는 방법을 바꿀 것이다. 그리고 웹 배포까지 하면 끝이다..

[대학전쟁3] 양면빙고 웹 개발 06 - 직전 타일 이동, 뒤집기 제한

로데시 — Fri, 23 Jan 2026 20:01:20 +0900

0️⃣ 지난 번까지..

대학전쟁에 나온 '양면빙고 (double sided bingo)' 게임을 보고

이 게임을 웹으로 만들면 재밌겠다는 생각이 들어 양면빙고 웹 개발을 시작했다.

오늘 드디어 대학전쟁3 결승전까지 끝났다..

진짜 결승전 개존잼.. 안 본 사람들 다들 보러가세여 ㄱㄱ

나의 양면빙고 웹도 거의거의 막바지 단계다.

지난 글에서는 빙고가 완성되면 게임을 중단하고, player가 행동하면 turn이 넘어가는 기능을 구현했다.

오늘은 이어서 빙고판 위의 타일 개수에 따라 이동 뒤집기를 제한하는 기능을 구현해보고자 한다.

☰ 양면빙고 (double-sided-bingo) 개발 과정

ㆍ [대학전쟁3] 양면빙고 웹 개발 01 - list, 타일 뒤집기

ㆍ [대학전쟁3] 양면빙고 웹 개발 02 - 타일 list 내 이동

ㆍ [대학전쟁3] 양면빙고 웹 개발 03 - 타일 착수

ㆍ [대학전쟁3] 양면빙고 웹 개발 04 - 타일 뒤집기, 이동

ㆍ [대학전쟁3] 양면빙고 웹 개발 05 - 빙고 판단, player 2명

ㆍ [대학전쟁3] 양면빙고 웹 개발 07 - timer, highlight, restart

ㆍ [대학전쟁3] 양면빙고 웹 개발 08 - 2인 play

ㆍ [대학전쟁3] 양면빙고 웹 개발 09 - UI/UX 개선 및 기능 보완

1️⃣ 타일 개수에 따른 이동, 뒤집기 제한

App.js 코드

const 추가

const [turnCount, setTurnCount] = useState(0);
const [phase, setPhase] = useState("PLACE");

ㆍturnCount - 빙고판에 올라가있는 타일의 개수를 판단하기 위해 turnCount를 사용한다.

ㆍphase - turnCount가 14 이상이 되는 순간, phase의 상태를 MOVE_FLIP으로 바꾼다.

endTurn 함수 수정

setTurnCount(prev => prev + 1);

Turn이 지날 때마다 turnCount이 1 씩 증가할 수 있도록 코드를 추가한다.

canMoveFlip 함수 작성

const canMoveOrFlip = (tileKey) => {
    if (phase !== "MOVE_FLIP") return false;
    if (lastAction && lastAction.tileKey === tileKey) return false;
    return true;
};

phase가 PLACE일 경우 착수만, MOVE_FLIP일 경우에 뒤집기, 이동할 수 있도록 코드를 작성한다.

handleFlip 함수 수정

if (fromBoard && !canMoveOrFlip(key)) return;

착수 14번 이하면 뒤집을 수 없도록 코드를 추가한다.

handleDragStart 함수 수정

if (!canMoveOrFlip(active.id)) return;

착수 14번 이하면 이동할 수 없도록 코드를 추가한다.

handleDragEnd 함수 수정

if (!canMoveOrFlip(active.id)) return;

착수 14번 이하면 이동할 수 없도록 코드를 추가한다.

return 수정

<BingoBoard
  boardTiles={boardTiles}
  movableCell={movableCell}
  onFlip={(key) => handleFlip(key, true)}
  isDisabled={canMoveOrFlip} />

BingoTile로 내려주어 실제 동작 차단을 하도록 한다.

4개부터 이동 가능

원래는 14개를 착수하여야 이동이 가능하지만, 현재는 테스트 단계이기 때문에 4개로 테스트 하였다.

2️⃣ 직전 타일 이동, 뒤집기 제한

App.js 코드

const 추가

setLastAction({ tileKey: key, owner: currentTurn });

마지막 타일을 저장할 수 있는 const를 추가한다.

canMoveOrFlip 함수 수정

const canMoveOrFlip = (tileKey) => {
  if (phase !== "MOVE_FLIP") return false;
  if (!tileKey) return true;
  if (lastAction && lastAction.tileKey === tileKey) return false;
 return true;
};

직전 턴에 이동/뒤집기한 타일은 다음 턴에 이동/ 뒤집기를 제한하도록 코드를 수정한다.

handleFlip 함수 수정

setLastAction({ tileKey: key, owner: currentTurn });

이번 턴에 뒤집었으면 다음 턴에 같은 타일을 이동/뒤집을 수 없도록 코드를 추가한다.

handleDragStart 함수 수정

const activeTileKey = active.data.current?.tileKey ?? active.id;
const tile = myTiles.find(t => t.key === activeTileKey);
setActiveTile(tile ?? null);

이번 턴에 움직였으면 다음 턴에 같은 타일을 이동/뒤집을 수 없도록 코드를 추가한다.

handleDragEnd 함수 수정

const movedTile = boardTiles[from];
const movedTile = boardTiles[from];
 if (movedTile?.key) {
   setLastAction({ tileKey: movedTile.key, owner: currentTurn });      
 } else {
   setLastAction({ tileKey: activeTileKey, owner: currentTurn });      
 }

이번 턴에 움직였으면 다음 턴에 같은 타일을 이동/뒤집을 수 없도록 코드를 추가한다.

직전 타일 막음

직전 타일은 뒤집기도 이동도 불가능하다. 이동이 불가능한 타일이 빨간색으로 출력되는 것을 확인할 수 있다.

3️⃣ 이동 자체도 막음

BingoTile.js 코드

disabled

disabled: !!isDisabled,

useDraggable 옵션 중 하나인 disabled를 사용해 props로 받은 isDisabled의 드래그 동작 자체를 비활성화한다.

직전 타일 막음

직전 타일을 이동할 때 빨간색으로 출력하는 것이 아니라 아예 움직이지 않게 막았다.

4️⃣ gray 표시

BingoTile.js 코드

<TileItem showOverlay={isDisabled} />

props로 받은 isDisabled를 TileItem에게도 넘겨준다.

TileItem.js 코드

<div className="tile-img-wrap" data-overlay={showOverlay ? "true" : "false"}> </div>

showOverlay 상태값에 따라 서로 다른 CSS 스타일을 적용하기 위해 코드를 작성한다.

TileItem.CSS 코드

.TileItem .tile-img-wrap {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
}
.tile-img-wrap[data-overlay="true"] .tile-img {
  cursor: default;   /* 또는 not-allowed */
}
.TileItem .tile-img-wrap[data-overlay="true"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.20);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: normal;
  transition: background .18s ease;
  border-radius: inherit;
}

true일 경우 (직전에 착수, 이동, 뒤집은 타일일 경우) 회색처리를 한다.

직전 타일 회색

직전 타일 (착수, 이동, 뒤집기)은 건들지 못하기 떄문에 시각적으로 볼 수 있게 타일에 회색 처리를 했다. 근데 뭔가 빙고 완성이 한 눈에 보이지 않아 나중에 삭제할 수도..

5️⃣ 앞으로...

이동, 뒤집기를 제한하는 기능을 만들었다.

이제 시간 제한을 만들고 빙고 완성 시, 빙고를 highlight하는 기능을 만들 것이다.

[아나콘다] 차근차근 로그인 안 하고 / 로그인 없이 파이썬 아나콘다 다운로드 설치하는 법 anaconda download without log

로데시 — Thu, 22 Jan 2026 15:18:19 +0900

노트북이 맛탱이가 갔다....

아나콘다 VS code 등등 다시 다 다운로드 하는 중..

새 학기 첫 수업 때는 항상 아나콘다를 설치하는데 수업 놓친 학생들도 따라 설치하면 좋을 것 같다.

1️⃣ anaconda 설치

https://www.anaconda.com/download/success
위 링크에 들어간다.
이 링크를 누르면 로그인 없이 다운로드 할 수 있는 창으로 넘어간다.
(cf 아나콘다 웹사이트 우측에 있는 free download를 누르면 로그인하는 창으로 넘어간다..)

Windows - Anaconda Distribution
각자 운영체제에 맞는 탭에 들어가 다운로드를 진행한다.

다운로드 중..

2️⃣ anaconda Setup

더블 클릭 후 실행

Next / I Agree

Next
✅ Just Me (recommended)
Just Me 체크 후 Next를 누른다.

Next
Destination Folder C:\Users\{사용자이름}\anaconda3 확인 후 Next

Install
✅ Create shortcuts (supported packages only).
✅ Add Anaconda3 to my PATH environment variable << 반드시 체크
✅ Register Anaconda3 as my default Python 3.13
☑️ Clear the package cache upon completion

Next
Completed 되면 next

Next
Everything you love about Anaconda now available from the cloud with Anaconda's fully-loaded Jupyter notebook.
No setup required. Get started for free.
Code in the cloud with Anaconda Notebooks

Finish
체크 해제 후 Finish
☑️ Launch Anaconda Navigator
☑️ Welcome to Anaconda

3️⃣ anaconda 설치 확인

anaconda python 설치 확인

conda --version

python --version

tmi..
anaconda 용량 진짜 크다....
무려무려 12기가..