이 글은 2026년 04월 13일 작성된 글입니다.

오늘은 Rq 파라미터 처리 개선, 예외 처리, 테스트(assertThat), 그리고 레이어드 아키텍처 구조를 정리했다.

1. 파라미터 처리 리팩토링 (HashMap + Stream)

문자열을 매번 직접 파싱하는 대신, 생성자에서 한 번만 파싱하여
HashMap에 저장하도록 개선했다.

@Test
@DisplayName("\"등록?이름=홍길동&고향=남원&성별=남성\"")
void t7() {
    Rq rq = new Rq("등록?이름=홍길동&고향=남원&성별=남성");

    String paramValue = rq.getParam("성별", "");

    assertEquals("남성", paramValue);
}

• 생성자에서 초기화 → 중복 파싱 제거
• HashMap으로 빠른 조회
• Stream으로 코드 간결화

2. 예외 상황 처리

파라미터가 없거나 값이 비어있는 경우 기본값을 반환하도록 처리했다.

@Test
@DisplayName("\"등록?성별=\"")
void t8() {
    Rq rq = new Rq("등록?성별=");

    String paramValue = rq.getParam("성별", "모름");

    assertEquals("모름", paramValue);
}

@Test
@DisplayName("\"등록?성별\"")
void t9() {
    Rq rq = new Rq("등록?성별");

    String paramValue = rq.getParam("성별", "모름");

    assertEquals("모름", paramValue);
}

@Test
@DisplayName("\"등록\"")
void t10() {
    Rq rq = new Rq("등록");

    String paramValue = rq.getParam("성별", "모름");

    assertEquals("모름", paramValue);
}

• 값이 없으면 기본값 반환
• 예외 상황에서도 안정적으로 동작

3. assertThat (AssertJ)

기존 assertEquals 대신 assertThat을 도입했다.

assertThat(value).isEqualTo(2);

• 가독성이 좋고 체이닝 방식 지원
• 다양한 검증 메서드 제공

4. getParamAsInt 구현

문자열 파라미터를 정수로 변환하는 기능을 추가했다.

@Test
@DisplayName("\"목록?page=2\"")
void t11() {
    Rq rq = new Rq("목록?page=2");

    int value = rq.getParamAsInt("page", 1);

    assertThat(value).isEqualTo(2);
}

@Test
@DisplayName("\"목록?page=2번\"")
void t12() {
    Rq rq = new Rq("목록?page=2번");

    int value = rq.getParamAsInt("page", 1);

    assertThat(value).isEqualTo(1);
}

• 변환 성공 → 값 반환
• 변환 실패 → 기본값 반환

5. 레이어드 아키텍처

역할별로 계층을 나누어 구조를 분리하는 방식이다.

역할 계층

요청 처리 Controller 비즈니스 로직 Service 데이터 처리 Repository

• 역할이 분리되어 유지보수에 유리

6. 구조 분리 (Controller / Service / Repository)

기능을 역할별로 분리했다.

• SystemController → 종료
• WiseSayingController → CRUD
• Service → 로직 처리
• Repository → 데이터 처리

7. AppContext

공통으로 사용하는 객체를 static으로 관리한다.

public class AppContext {
    public static WiseSayingService wiseSayingService;
}

• 여러 곳에서 공유되는 객체 관리
• Controller / Service / Repository 등록

8. static block

클래스 로딩 시 한 번 실행되는 초기화 블록이다.

static {
    // 초기화 코드
}

• 복잡한 static 초기화에 사용

✅ 정리

• 파라미터를 미리 파싱해두면 코드가 훨씬 단순해진다.
• 예외 상황을 처리하면 안정적인 프로그램을 만들 수 있다.
• 레이어를 나누면 구조가 깔끔해지고 유지보수가 쉬워진다.

이 글은 2026년 04월 10일 작성된 글입니다.

오늘은 명언 게시판 코드에 Stream 도입과 Rq 클래스 구현, 그리고 컨트롤러 구조 개선과 TDD 개념까지 정리했다.

1. Stream 도입 (기존 코드 → Stream)

기존에는 반복문과 조건문을 사용해 데이터를 처리했다. 하지만 Stream을 사용하면 더 간결하게 표현할 수 있다.

list.stream()
    .filter(e -> e.getId() == id)
    .findFirst();

핵심 - 반복문 없이 데이터 처리 가능 - filter, map 등으로 선언형 코드 작성 가능

2. removeIf를 통한 데이터 삭제

컬렉션에서 조건에 맞는 요소를 제거할 때 사용한다.

list.removeIf(e -> e.getId() == id);

핵심 - 반복문 없이 삭제 가능 - 코드가 훨씬 간결해짐

3. 컨트롤러와 Rq 클래스

컨트롤러는 명령어를 처리하는 역할을 한다. 식당의 점원과 같은 역할을 한다.

4. Rq 클래스 개념

Rq는 Request의 약자로, 컨트롤러에서 자주 사용하는 로직을 모아둔 클래스이다.

Rq rq = new Rq("목록?page=5&searchKeyword=영광");

int page = rq.getParamAsInt("page", -1);
String keyword = rq.getParam("searchKeyword", "");

5. Rq 클래스 구현

public String getParam(String paramName, String defaultValue) {
    if (paramsMap.containsKey(paramName)) {
        return paramsMap.get(paramName);
    } else {
        return defaultValue;
    }
}

public int getParamAsInt(String paramName, int defaultValue) {
    String value = getParam(paramName, "");

    if (value.isEmpty()) return defaultValue;

    try {
        return Integer.parseInt(value);
    } catch (NumberFormatException e) {
        return defaultValue;
    }
}

6. TDD 개념

TDD(Test-Driven Development)는 테스트를 먼저 작성하고, 그 테스트를 통과시키는 방식으로 개발하는 방법이다.

TDD 3단계

• Red: 실패하는 테스트 작성
• Green: 테스트 통과 코드 작성
• Refactor: 코드 개선

7. 자동 테스트 vs 수동 테스트

구분 자동 테스트 수동 테스트

실행 주체 컴퓨터 사람 실행 속도 빠름 느림 신뢰도 높음 낮음

✅ 정리

• Stream을 사용하면 반복문 없이 데이터를 간결하게 처리할 수 있다.
• removeIf를 사용하면 조건에 맞는 요소를 쉽게 제거할 수 있다.
• Rq 클래스는 명령어 파싱 로직을 분리하여 컨트롤러를 단순하게 만든다.
• getParam과 getParamAsInt를 통해 안전하게 파라미터를 처리할 수 있다.
• TDD는 테스트를 먼저 작성하고 기능을 구현하는 개발 방식이다.
• Red-Green-Refactor 사이클을 통해 점진적으로 코드를 개선할 수 있다.
• 자동 테스트를 사용하면 빠르고 안정적으로 코드 품질을 유지할 수 있다.

이 글은 2026년 04월 09일 작성된 글입니다.

오늘은 콘솔 기반 명언 관리 앱을 구현하면서 CRUD 구조와 문자열 파싱, 객체 관리 방식을 정리했다.

1. 전체 실행 흐름 (run)

사용자의 명령어 입력에 따라 기능을 분기하는 메인 루프이다.

void run () {
    System.out.println("== 명언 앱 ==");

    while (true) {
        System.out.print("명령) ");
        String cmd = scanner.nextLine().trim();

        if (cmd.equals("종료")) {
            System.out.println("프로그램을 종료합니다.");
            break;
        } else  if (cmd.equals("등록")) {
            actionWrite();
        } else if (cmd.equals("목록")) {
            actionList();
        } else if (cmd.startsWith("삭제")) {
            actionDelete(cmd);
        } else if (cmd.startsWith("수정")) {
            actionModify(cmd);
        }
    }
    scanner.close();
}

핵심

• while(true)로 계속 실행
• 명령어에 따라 기능 분기
• 콘솔 앱의 전체 흐름 제어

2. 상태 관리 (필드)

앱 실행 동안 유지되는 데이터 저장 영역이다.

Scanner scanner = new Scanner(System.in);
int lastId = 0;
List<WiseSaying> wiseSayingList = new ArrayList<>();

핵심

• lastId : 명언 번호 증가 관리
• List : 데이터 저장소 역할
• 메모리 기반 구조

3. 명언 등록 (Create)

사용자 입력을 받아 객체를 생성하고 리스트에 저장한다.

void actionWrite() {
    System.out.print("명언: ");
    String content = scanner.nextLine().trim();

    System.out.print("작가: ");
    String author = scanner.nextLine().trim();

    WiseSaying wiseSaying = write(author, content);

    System.out.println("%d번 명언이 등록되었습니다.".formatted(wiseSaying.getId()));
}

WiseSaying write (String author, String content) {
    WiseSaying wiseSaying = new WiseSaying(++lastId, author, content );
    wiseSayingList.add(wiseSaying);
    return wiseSaying;
}

핵심

• 입력 → 객체 생성 → 리스트 저장
• ++lastId로 ID 증가
• 입력과 저장 로직 분리

4. ID 증가 방식

명언 등록 시마다 번호를 증가시켜 고유값을 유지한다.

new WiseSaying(++lastId, author, content);

핵심

• 선증가 연산 사용
• 삭제해도 ID 재사용 없음

5. 목록 조회 (Read)

등록된 명언을 최신순으로 출력한다.

void actionList() {
    System.out.println("번호 / 작가 / 명언");
    System.out.println("----------------------");

    for (int i = wiseSayingList.size() - 1; i >=0; i--) {
        WiseSaying wiseSaying = wiseSayingList.get(i);
        System.out.println("%d / %s / %s".formatted(
            wiseSaying.getId(),
            wiseSaying.getAuthor(),
            wiseSaying.getContent()
        ));
    }
}

핵심

• 리스트 역순 순회
• 최신 데이터가 위로 출력

6. 삭제 (Delete)

명령어에서 id를 추출하여 해당 데이터를 제거한다.

void actionDelete(String cmd) {
    String[] cmdBits = cmd.split("=");

    if (cmdBits.length < 2 ||  cmdBits[1].isEmpty()) {
        System.out.println("id를 입력해주세요.");
        return;
    }

    int id = Integer.parseInt(cmdBits[1]);

    delete(id);

    System.out.println("%d번 명언이 삭제되었습니다.".formatted(id));
}

void delete(int id) {
    WiseSaying wiseSaying = null;

    for (int i = 0; i < wiseSayingList.size(); i++) {
        if (wiseSayingList.get(i).getId() == id) {
            wiseSaying = wiseSayingList.get(i);
        }
    }

    if (wiseSaying == null) {
        System.out.println("해당 아이디는 존재하지 않습니다.");
        return;
    }

    wiseSayingList.remove(wiseSaying);
}

핵심

• split("=")로 id 추출
• 리스트 탐색 후 제거
• 존재 여부 확인

7. 문자열 파싱

명령어에서 필요한 값을 분리하는 과정이다.

String[] cmdBits = cmd.split("=");
int id = Integer.parseInt(cmdBits[1]);

핵심

• 문자열 분리 (split)
• 숫자 변환 (parseInt)

8. 수정 (Update)

기존 데이터를 조회한 뒤 새로운 값으로 변경한다.

void actionModify(String cmd) {
    String[] cmdBits = cmd.split("=");

    if (cmdBits.length < 2 ||  cmdBits[1].isEmpty()) {
        System.out.println("id를 입력해주세요.");
        return;
    }

    int id = Integer.parseInt(cmdBits[1]);

    WiseSaying wiseSaying = findById(id);

    System.out.printf("명언(기존) : %s\n",  wiseSaying.getContent());
    System.out.print("명언 : ");
    String content = scanner.nextLine().trim();

    System.out.printf("작가(기존) : %s\n",  wiseSaying.getAuthor());
    System.out.print("작가 : ");
    String author = scanner.nextLine().trim();

    modify(wiseSaying, content, author);

    System.out.println("%d번 명언이 수정 되었습니다.".formatted(id));
}

void modify(WiseSaying wiseSaying, String content, String author) {
    wiseSaying.setContent(content);
    wiseSaying.setAuthor(author);
}

핵심

• 기존 객체 조회 후 값 변경
• 객체 참조 기반 수정

9. findById

id를 기준으로 명언을 조회한다.

WiseSaying findById(int id) {
    WiseSaying wiseSaying = null;

    for (int i = 0; i < wiseSayingList.size(); i ++) {
        if (wiseSayingList.get(i).getId() == id) {
            wiseSaying = wiseSayingList.get(i);
        }
    }

    if (wiseSaying == null) {
        System.out.println("해당 아이디는 존재하지 않습니다.");
        return null;
    }

    return wiseSaying;
}

핵심

• 리스트 순회로 데이터 조회
• 없으면 null 반환

✅ 정리

• List를 활용하여 명언 데이터를 메모리에 저장하고 관리할 수 있다.
• lastId를 증가시키는 방식으로 고유한 ID를 유지할 수 있다.
• split과 parseInt를 사용하여 문자열 명령어를 처리할 수 있다.
• CRUD 구조를 통해 등록, 조회, 삭제, 수정 기능을 구현할 수 있다.

이 글은 2026년 04월 08일 작성된 글입니다.

오늘은 프로그래머스 자바 입문 문제를 풀면서
클래스, 생성자, 접근제어자 등 객체지향 개념을 복습했다.
또한 Stream API를 활용하여 반복문과의 차이를 비교하며 구현해봤다.

1. 클래스와 객체

클래스는 객체를 만들기 위한 설계도이고
객체는 클래스를 기반으로 생성된 인스턴스이다.

class Person {
    String name;
}

2. 생성자 (Constructor)

객체 생성 시 초기화를 담당하는 메서드이다.

특징

• 클래스 이름과 동일
• 반환 타입 없음
• 객체 생성 시 자동 호출
• 필드 초기값 설정 가능

public Person(int id, String name, int age, char gender) {
    this.id = id;
    this.name = name;
    this.age = age;
    this.gender = gender;
}

3. 접근제어자

클래스의 접근 범위를 제어한다.

4. 캡슐화 (Encapsulation)

필드를 private으로 선언하고 getter/setter로 접근하는 방식이다.

사용하는 이유

• 데이터 보호
• 잘못된 값 방지
• 유지보수 용이
• 내부 구현 숨김

private int age;

public int getAge() {
    return age;
}

5. Stream API 핵심

컬렉션 데이터를 선언형으로 처리하는 방식이다.

대표적인 메서드

6. map vs mapToInt

Stream에서 데이터 타입을 변환할 때 사용하는 메서드이다.

• map() → 객체 타입 변환
• mapToInt() → int 타입으로 변환

예시

int[] array = Arrays.stream(new String[]{"1번", "2번", "3번"})
        .map(e -> e.substring(0, e.length() - 1))
        .mapToInt(Integer::parseInt)
        .toArray();

7. 반복문 vs Stream 비교

7.1 문자열 → 숫자 변환

반복문

String[] messages = new String[]{"1번", "2번", "3번"};
int[] numbers = new int[messages.length];

for (int i = 0; i < messages.length; i++) {
    String message = messages[i];
    message = message.substring(0, message.length() - 1);
    int number = Integer.parseInt(message);

    if (number % 2 == 0) continue;

    numbers[i] = number;
}

Stream

int[] array = Arrays.stream(new String[]{"1번", "2번", "3번"})
        .map(e -> e.substring(0, e.length() - 1))
        .mapToInt(Integer::parseInt)
        .filter(number -> number % 2 != 0)
        .toArray();

7.2 조건 데이터 합계

반복문

int sum = 0;

for (Person person : people) {
    if (person.getGender() == 'M') {
        sum += person.getAge();
    }
}

Stream

int sum = people.stream()
        .filter(e -> e.getGender() == 'M')
        .mapToInt(e -> e.getAge())
        .sum();

7.3 평균 계산

반복문

int sum = 0;
int count = 0;

for (Person person : people) {
    if (person.getGender() == 'M') {
        sum += person.getAge();
        count++;
    }
}

double avg = (double) sum / count;

Stream

double avg = people.stream()
        .filter(e -> e.getGender() == 'M')
        .mapToInt(e -> e.getAge())
        .average()
        .orElse(0);

7.4 데이터 추출

반복문

List<String> names = new ArrayList<>();

for (Person person : people) {
    if (person.getGender() == 'M') {
        names.add(person.getName());
    }
}

String result = String.join(", ", names);

Stream

String result = people.stream()
        .filter(e -> e.getGender() == 'M')
        .map(Person::getName)
        .collect(Collectors.joining(", "));

7.5 특정 데이터 찾기

반복문

Person found = null;

for (Person person : people) {
    if (person.getId() == 2) {
        found = person;
        break;
    }
}

Stream

Optional<Person> op = people.stream()
        .filter(e -> e.getId() == 2)
        .findFirst();

Person found = op.orElse(null);

8. 배열 → List 변환

기본형 배열(int[])은 바로 List로 변환할 수 없기 때문에
boxing 과정이 필요하다.

List<Integer> list = Arrays.stream(new int[]{10, 20, 30})
        .boxed()
        .toList();

✅ 정리

• 클래스는 객체를 생성하기 위한 설계도이다
• 생성자는 객체 초기화를 담당한다
• 캡슐화를 통해 데이터 보호와 유지보수를 쉽게 할 수 있다
• Stream API는 반복문을 간결하게 표현할 수 있다
• map / filter / collect 흐름이 핵심이다
• map과 mapToInt의 차이를 이해해야 한다
• 기본형 배열은 boxing 후 List로 변환해야 한다

이 글은 2026년 04월 07일 작성된 글입니다.

오늘은 자바 객체지향 개념(추상 클래스, 다형성, 생성자)과 Stream API 기초를 간단히 정리했다.

1. 추상 클래스와 다형성

전사가 사용하는 무기에 따라 공격 방식이 달라지도록 구현한다.

class 전사 {
    String 이름;
    int 나이;
    무기 a무기;

    void 공격() {
        a무기.작동(이름, 나이);
    }
}

abstract class 무기 {
    String 무기명;

    void 작동(String 이름, int 나이) {
        System.out.println(나이 + "살 전사 " + 이름 + "(이)가 " + 무기명 + "(으)로 공격합니다.");
    }
}

class 칼 extends 무기 {
    칼() { 무기명 = "칼"; }
}

class 활 extends 무기 {
    활() { 무기명 = "활"; }
}

핵심

• abstract class : 직접 객체 생성 불가
• 자식 클래스에서 기능을 구현
• 무기 교체로 행동이 바뀌는 다형성 구조

2. return

메서드는 return을 통해 값을 반환한다.

static int get정수() {
    return 5;
}

특징

• 값을 반환하며 메서드 종료
• 객체나 null도 반환 가능

3. 생성자

객체 생성 시 자동 실행되는 메서드.

class 사람 {
    String 이름;
    int 나이;

    사람() {
        이름 = "홍길동";
        나이 = 22;
    }

    사람(String 이름, int 나이) {
        this.이름 = 이름;
        this.나이 = 나이;
    }
}

특징

• 클래스 이름과 동일
• 반환 타입 없음
• 객체 생성 시 자동 호출

4. 생성자 호출 구조

객체 생성 시 부모 생성자 → 자식 생성자 순서로 실행된다.

class 동물 {
    동물() {
        System.out.println("동물 생성");
    }
}

class 사람 extends 동물 {
    사람() {
        super();
        System.out.println("사람 생성");
    }
}

5. this()

같은 클래스의 다른 생성자를 호출할 때 사용한다.

class 전사 {
    String 이름;
    int 나이;

    전사() {
        this("NoName");
    }

    전사(String 이름) {
        this.이름 = 이름;
        나이 = 20;
    }
}

6. Stream API 기초

컬렉션 데이터를 간결하게 처리하는 기능.

기본 사용

IntStream.rangeClosed(1, 10)
        .forEach(System.out::println);

filter

IntStream.rangeClosed(1, 10)
        .filter(e -> e % 2 != 0)
        .forEach(System.out::println);

map

int[] result = Arrays.stream(numbers)
        .map(e -> e * 2)
        .toArray();

특징

• 데이터 변환 처리에 강함
• 원본 데이터는 변경되지 않음

✅ 정리

• 추상 클래스와 다형성을 이용해 유연한 구조를 만들 수 있다.
• 생성자는 객체 생성 시 자동 실행된다.
• this()와 super()로 생성자 흐름을 제어할 수 있다.
• Stream API를 사용하면 데이터를 더 간결하게 처리할 수 있다.

이 글은 2026년 4월 6일 작성된 글입니다.

오늘은 자바 객체지향 개념 중 상속, 오버라이딩, 추상 클래스, 형변환, 객체 상태 저장에 대해 학습했다. 특히 오리 시뮬레이션 예제를 통해 상속 구조의 장점과 한계, 그리고 추상 클래스의 역할을 이해할 수 있었다.

1. 상속과 코드 재사용

여러 클래스에서 같은 기능을 사용할 때 부모 클래스를 만들고 상속을 사용하면 코드 중복을 줄일 수 있다.

예를 들어 오리 클래스가 있을 때 기본 동작을 부모 클래스에 정의한다.

class 오리 {
    void 날다() {
        System.out.println("오리가 날개로 날아갑니다.");
    }
}

그리고 다른 오리들은 이를 상속받는다.

class 흰오리 extends 오리 { }

class 청둥오리 extends 오리 { }

상속 구조

오리
 ├ 흰오리
 └ 청둥오리

이렇게 하면 공통 기능을 부모에서 관리할 수 있다.

2. 메서드 오버라이딩

상속받은 클래스는 부모의 메서드를 재정의(Override) 할 수 있다.

예를 들어 고무오리는 날 수 없기 때문에 날다 메서드를 수정한다.

class 고무오리 extends 오리 {
    void 날다() {
        System.out.println("저는 날 수 없어요.");
    }
}

이렇게 하면 같은 메서드 이름이지만 각 객체에 맞는 동작을 수행하게 된다.

3. 상속 구조의 한계

상속만으로는 모든 문제를 해결할 수 없다.

예를 들어

• 일반 오리 → 날 수 있음
• 고무 오리 → 날 수 없음
• 로봇 오리 → 날 수 없음 + 수영 방식 다름

이처럼 다양한 동작이 섞이면 상속 구조가 복잡해지고 중복 코드가 생길 수 있다.

그래서 객체지향에서는 구성(Composition) 이라는 방식도 사용한다.

구성은

객체 안에 다른 객체를 포함하는 방식

으로 더 유연한 설계를 만들 수 있다.

4. 추상 클래스

추상 클래스는 공통 구조만 정의하고 구현은 자식 클래스에 맡기는 클래스이다.

예시

abstract class 무기 {
    abstract void 공격();
}

자식 클래스는 반드시 이 메서드를 구현해야 한다.

class 칼 extends 무기 {
    void 공격() {
        System.out.println("칼로 공격합니다.");
    }
}

추상 클래스는 리모콘의 버튼 설계도와 비슷하다.
버튼은 정의되어 있지만 실제 동작은 각 기기가 구현한다.

5. 형변환과 객체 타입

자바에서는 부모 타입으로 자식 객체를 참조할 수 있다.

사람 a사람 = new 홍길동();

이것을 업캐스팅(자동 형변환) 이라고 한다.

반대로 자식 타입으로 바꾸는 경우에는 명시적 형변환이 필요하다.

홍길동 a홍길동 = (홍길동)a사람;

이때 실제 객체가 해당 타입이 아니면 런타임 오류가 발생할 수 있다.

정리

오늘 학습한 핵심 개념

• 상속은 코드 재사용을 위한 중요한 기능이다
• 메서드 오버라이딩을 통해 클래스별 동작을 다르게 만들 수 있다
• 상속만으로는 구조가 복잡해질 수 있어 구성 방식도 함께 사용한다
• 추상 클래스는 공통 인터페이스 역할을 한다
• 자바의 형변환은 자동형변환과 명시적 형변환으로 나뉜다

객체지향 설계에서는 중복을 줄이고 확장 가능한 구조를 만드는 것이 중요하다.

오늘은 컨디션이 좋지 않아 집중을 하지 못했다. 컨디션 괜찮을 때 다시 복습을 해야 할 거 같다.

이 글은 2026년 04월 03일 작성된 글입니다.

자바 기초 핵심 개념을 간단히 정리했다. 증감 연산자, 반복문, 메모리 구조, 객체와 클래스, 컬렉션, static, 상속까지 자바의 기본 동작 원리를 이해하는 내용이다.

1. 증감 연산자

변수 값을 증가 또는 감소시킬 때 사용한다.

i++;   // 1 증가
i--;   // 1 감소

i = i + 2;
i += 2;

i = i - 2;
i -= 2;

후위 연산자

값을 먼저 사용하고 증가한다.

int i = 10;

System.out.println(i++); // 10
System.out.println(i);   // 11

전위 연산자

값을 먼저 증가시키고 사용한다.

int i = 10;

System.out.println(++i); // 11
System.out.println(i);   // 11

2. while 반복문

조건이 참인 동안 반복 실행된다.

int i = 0;

while (i <= 10) {
    System.out.println(i);
    i++;
}

3. 기본 자료형 8종

구분 타입

논리 boolean 문자 char 정수 byte, short, int, long 실수 float, double

boolean b = true;
char c = 'a';

int i = 3;
long l = 4L;

float f = 5.5f;
double d = 5.5;

4. 메모리 구조

자바 메모리는 크게 스택(Stack)과 힙(Heap)으로 나뉜다.

지역 변수

• 스택에 저장
• 함수 종료 시 자동 삭제

객체

• 힙에 저장
• 참조가 없어지면 GC에 의해 삭제

int a = 10;        // 스택
String name = "Paul"; // 객체는 힙, 변수는 스택

5. 기본형 vs 참조형

구분 특징

기본형 값이 직접 저장 참조형 객체 주소 저장

int a = 10;
String name = "Paul";

참조형 변수에는 객체의 주소(참조)가 저장된다.

6. 함수와 매개변수

public static void plus(int num1, int num2) {
    System.out.println(num1 + num2);
}

리턴

public static int plus(int num1, int num2) {
    return num1 + num2;
}

7. 컴파일 타임 vs 런타임

구분 의미

컴파일 타임 실행 전 코드 검사 런타임 프로그램 실행 중

8. 함수 호출과 스택

함수 A가 함수 B를 호출하면 B의 스택이 생성되고 B가 끝나면 해당 스택이 제거된다.

9. 객체 생성

new 키워드는 객체를 힙에 생성한다.

String name = new String("홍길동");

int[] arr = new int[] {10, 20, 30};

10. 객체 참조

int[] arr1 = new int[] {10,20,30};
int[] arr2 = arr1;

객체가 2개가 되는 것이 아니라 참조가 2개가 된다.

11. 메모리 해제

지역 변수

함수 종료 시 삭제

객체

참조하는 변수가 없어지면 GC가 제거

arr1 = null;

12. 객체

객체는 여러 데이터를 하나로 묶는 구조이다.

13. 인스턴스 변수

객체 내부에 선언된 변수.

int[] person = new int[3];

person[0] = 1;
person[1] = 20;
person[2] = 170;

14. 클래스

객체를 만들기 위한 설계도.

class GameCharacter {
    int no;
    int age;
    int height;
}

GameCharacter p1 = new GameCharacter();
p1.age = 20;

15. this

객체 자기 자신을 가리키는 참조.

this.age

new는 객체 생성 후 this 참조를 반환한다.

16. Wrapper Class

기본형 타입을 객체 형태로 만든 클래스.

기본형 래퍼

int Integer double Double boolean Boolean

17. 배열 vs 리스트

구분 특징

배열 크기 고정 리스트 크기 변경 가능

List<Integer> list = new ArrayList<>();

list.add(10);
list.add(20);

System.out.println(list.size());

18. List vs Map

List

데이터 넣기 편함

List<Integer> ages = new ArrayList<>();
ages.add(10);
ages.add(20);

Map

데이터 찾기 편함

Map<String, Integer> ages = new HashMap<>();

ages.put("철수",10);
ages.get("철수");

19. static

static 변수는 클래스에 속한다.

class Person {
    static int maxSpeed;
}

Person.maxSpeed = 100;

특징

• 클래스에 1개만 존재
• 모든 객체가 공유

20. 객체와 참조

객체는 참조 변수로 조종한다.

자동차 a자동차 = new 자동차();

a자동차.달리다();

21. 상속

중복 코드를 줄이기 위해 사용한다.

class 고양이 {
    void 숨쉬다() {
        System.out.println("숨쉬다");
    }
}

class 검은고양이 extends 고양이 {
}

검은고양이 cat = new 검은고양이();
cat.숨쉬다();

✅ 정리

• 증감 연산자는 변수 값을 증가 또는 감소시킨다.
• 자바 메모리는 스택(지역 변수)과 힙(객체)으로 구성된다.
• 기본형은 값을 직접 저장하고 참조형은 객체 주소를 저장한다.
• 클래스는 객체의 설계도이며 new로 객체를 생성한다.
• 배열은 크기가 고정이고 리스트는 가변이다.
• static 변수는 클래스에서 하나만 존재하며 모든 객체가 공유한다.
• 상속을 사용하면 코드 중복을 줄일 수 있다.

이 글은 2026년 04월 02일 작성된 글입니다.

오늘은 IntelliJ 기본 개발 환경 설정을 진행하고, 이후 Java 기초 문법과 if 조건문을 학습했다.

1. IntelliJ 기본 설정

개발 환경을 편하게 사용하기 위해 몇 가지 기본 설정을 진행했다.

JDK 설정

• SDK : graalvm-ce-21
• 없으면 Download JDK 선택
• 애플 실리콘 환경은 aarch64 버전 사용

자주 사용하는 플러그인

• Lombok
• Github Copilot

2. 프로젝트 생성 시 설정

새 프로젝트마다 필요한 설정도 있다.

Import 자동화

Settings → Editor → General → Auto Import

• Add unambiguous imports on the fly
• Optimize imports on the fly

파일 인코딩

Settings → Editor → File Encodings

• Project encoding : UTF-8
• Default encoding : UTF-8

Gradle 빌드 속도 개선

Settings → Build Tools → Gradle

• Build and run using : IntelliJ IDEA
• Run tests using : IntelliJ IDEA

3. Java 프로그램의 기본 구조

Java 프로그램은 main 함수에서 시작된다.

public class Main {
    public static void main(String[] args) {
        System.out.println("Hello World");
    }
}

프로그램은 위에서 아래로 한 줄씩 실행된다.

4. 변수와 출력

int x = 10;

System.out.println(x);
System.out.println("x : " + x);
System.out.println("x : " + (x + 10));

• 변수는 값을 저장하는 공간이다.
• 문자열과 숫자를 더하면 숫자가 문자열로 변환된다.

5. 조건문 if

조건이 true일 때만 코드가 실행된다.

int age = 50;

if (age >= 20) {
    System.out.println("성년");
}

6. 논리 연산자

OR (||)

하나라도 참이면 결과는 참

AND (&&)

하나라도 거짓이면 결과는 거짓

7. 클린코딩 특강

오후에는 외부 강사님의 클린코딩 특강이 진행되었다.

강사님은 11번가 → 뱅크샐러드 → 카카오페이에서 근무하신 개발자였다.

클래스의 응집도는 높이고, 결합도는 낮추어야 한다는 말씀이 가장 기억에 남는다.

✅ 정리

• IntelliJ 기본 개발 환경 설정을 진행했다.
• JDK, UTF-8 인코딩, 폰트, Gradle 설정을 익혔다.
• Java 프로그램의 시작점인 main 함수를 이해했다.
• 변수, 출력, 문자열 연산의 기본 개념을 학습했다.
• if 조건문과 논리 연산자(||, &&)를 배웠다.
• 클린코딩 특강을 통해 읽기 좋은 코드의 중요성을 느꼈다.

이 글은 2026년 04월 01일 작성된 글입니다

프로젝트 최종 발표와 마감을 어제 마친 뒤, 오늘은 데브코스의 1차 역량 테스트를 보게 되었다. 프로젝트를 끝낸 직후라 조금 긴장도 되었지만, 지금까지 학습한 내용을 점검해볼 수 있는 시간이었다.

1. 알고리즘 테스트

오전에는 알고리즘 문제 4개가 주어졌다. 그중 3문제는 해결했고 1문제는 풀지 못했다.

문제를 풀면서 지금까지 학습했던 자료구조와 알고리즘 개념을 다시 떠올리게 되었고, 아직 부족한 부분이 무엇인지도 어느 정도 느낄 수 있었다.

또한 학습 내용을 기반으로 한 객관식 시험 20문제도 함께 진행되었다. 이 시험은 전반적인 개념 이해도를 확인하는 형태였다.

2. 웹 구현 과제

오후에는 테스트 페이지에 접속해 웹 구현 과제를 진행했다.

테스트 웹서버에 제공된 문제 파일을 확인하면서 지시사항에 맞게 기능을 구현하는 방식이었고, 주어진 과제들을 모두 구현하는 데 성공했다.

프로젝트를 진행하면서 익혔던 흐름들이 실제로 많이 도움이 되었다고 느꼈다.

✅ 정리

• 오전: 알고리즘 테스트 4문제 (3문제 해결, 1문제 미해결)
• 오전: 학습 기반 객관식 시험 20문제
• 오후: 테스트 웹서버 기반 웹 구현 과제 진행 (모두 구현 성공)

앞으로 데브코스 기간 동안 2번의 팀 프로젝트와 2번의 역량 테스트가 더 남아 있다.

이번 테스트를 통해 현재 실력을 점검할 수 있었고, 앞으로 남은 과정에서도 더 열심히 학습하며 내실을 다져가고 싶다.

또한 1차 역량 테스트 결과가 성적표 형태로 제공될 것 같아서 어떤 결과가 나올지 조금 기대가 된다.

이 글은 2026년 03월 31일 작성된 글입니다

오늘은 프로젝트 최종 발표회가 있어서 오전에는 기능 개선과 오류 수정, 그리고 팀원들과 함께 발표 준비를 진행했다. 발표 전 피드백을 반영해 로그인 UI를 개선했고, 발표 이후 강사님의 코드 리뷰와 피드백을 들을 수 있었다.

1. 로그인 비밀번호 보기 토글 기능 추가

오전에 FT님께서 배포된 서비스를 확인하시면서 로그인 / 회원가입 화면에서 비밀번호를 확인할 수 있는 토글 기능이 있으면 좋겠다는 피드백을 주셨다.

바로 useState를 사용하여 비밀번호 표시 여부를 제어하는 기능을 추가했다.

const [showPassword, setShowPassword] = useState(false)

input의 type을 상태값에 따라 변경하도록 구현했다.

<input
  type={showPassword ? 'text' : 'password'}
/>

버튼을 클릭하면 상태가 토글되도록 처리했다.

<button
  type="button"
  onClick={() => setShowPassword((prev) => !prev)}
>
  <EyeIcon show={showPassword} />
</button>

간단한 기능이지만 사용자 경험 측면에서 중요한 부분이라 빠르게 반영했다.

2. 발표 준비 및 프로젝트 발표

오전에는 팀원들과 함께 프로젝트 발표 자료를 준비했고, 오후에는 최종 발표를 진행했다.

발표 이후 강사님의 질의응답 시간에서 우리 팀 프로젝트에 대해 몇 가지 좋은 피드백을 들을 수 있었다.

특히 다음 부분을 좋게 봐주셨다.

• GitHub Issue / PR / 컨벤션을 통한 협업 관리
• 컴포넌트와 앱 구조를 잘 분리한 점
• 로직과 인터페이스(UI) 구조 분리

프로젝트 구조를 설계할 때 신경 썼던 부분이었는데, 그 부분을 좋게 평가해주셔서 인상 깊었다.

3. 소셜 로그인 로직 구조화

내가 담당했던 Auth 파트에서도 구조를 잘 나누었다는 피드백을 받을 수 있었다.

특히 소셜 로그인 로직을 하나의 함수로 묶어 처리한 부분을 좋게 평가해주셨다.

const signInWithOAuth = async (
  provider: 'google' | 'kakao',
  onSubmittingChange: (value: boolean) => void,
  failureMessage: string,
) => {
  setErrorMessage('')
  setInfoMessage('')
  onSubmittingChange(true)

  const supabase = createClient();
  const { error } = await supabase.auth.signInWithOAuth({
    provider,
    options: {
      redirectTo: `${window.location.origin}/auth/callback`,
    },
  });

  if (error) {
    setErrorMessage(failureMessage)
    onSubmittingChange(false)
  }
}

Google, Kakao 로그인 로직을 각각 구현하지 않고 provider 값만 받아 재사용 가능한 구조로 만든 것이 좋은 평가를 받았다.

4. 프로젝트 피드백

전반적으로 팀 프로젝트에 대해 긍정적인 피드백을 많이 들을 수 있었다. 물론 개선해야 할 부분도 있었다.

가장 큰 피드백은 Supabase 클라이언트 구조였다.

현재 프로젝트에는 다음과 같은 구조가 공존하고 있었다.

• supabase.ts (레거시 방식)
• supabase/client
• supabase/server

이렇게 여러 방식이 섞여 있기 때문에 레거시 코드를 제거하고 하나의 구조로 통일하는 것이 좋다는 피드백을 받았다.

✅ 정리

• 로그인 화면에 비밀번호 보기 토글 기능 추가
• 프로젝트 최종 발표 진행
• GitHub 협업 관리와 컴포넌트 구조 설계에 대해 좋은 피드백을 받았다.
• Auth 파트에서 소셜 로그인 로직 구조화 부분이 좋은 평가를 받았다.
• Supabase 클라이언트 구조를 레거시 제거 후 통일할 필요가 있다는 피드백을 받았다.

프로젝트를 진행하며 신경 썼던 코드 구조와 협업 방식에 대해 긍정적인 평가를 받아 의미 있는 발표였다.

좋은 팀원들과 좋은 결과를 낸 거 같아서 기분이 좋은 하루다.

이 글은 2026년 03월 30일 작성된 글입니다

프로젝트를 진행하며 여행 추천 플랫폼을 개발했고, 나는 로그인 및 회원가입 기능 구현을 담당했다. Supabase를 활용해 이메일 인증 기반 회원가입 및 로그인 기능을 구현했으며, 이후 구글과 카카오 소셜 로그인(SSO)까지 확장할 수 있는 구조를 설계했다.

이번 프로젝트를 통해 단순히 기능 구현뿐만 아니라 팀 협업 방식과 애플리케이션 구조 설계의 중요성을 많이 느낄 수 있었다.

1. 로그인 및 회원가입 기능 구현

이번 프로젝트에서는 Supabase Auth를 활용하여 이메일 인증 기반 회원가입과 로그인 기능을 구현했다.

Supabase에서 제공하는 인증 기능을 활용하면서 기본적인 로그인 흐름을 구성했고, 이후 확장성을 고려하여 구글과 카카오 소셜 로그인(SSO)을 추가할 수 있는 구조로 설계했다.

이를 통해 인증 기능을 단순히 구현하는 것에 그치지 않고, 이후 서비스 확장을 고려한 구조 설계의 중요성을 경험할 수 있었다.

2. Git 협업 방식 경험

팀 프로젝트에서는 Git을 활용한 협업 방식도 중요한 경험이었다.

팀원들과 Issue, Pull Request(PR), 커밋 컨벤션 등의 양식을 통일하여 작업을 진행했는데, 덕분에 작업 내용을 한눈에 파악하기 쉬웠고 전체적인 작업 흐름도 훨씬 명확해졌다.

특히 다음과 같은 협업 방식을 사용했다.

• Issue를 통해 작업 단위 관리
• Feature 브랜치 기반 개발
• Pull Request를 통한 코드 리뷰 및 병합

이러한 방식은 프로젝트의 작업 흐름을 정리하고 협업 효율을 높이는 데 큰 도움이 되었다.

3. 로그인 무한 리다이렉트 문제 해결

여러 브랜치를 병합하는 과정에서 로그인 시 무한 리다이렉트가 발생하는 문제가 발생했다.

처음에는 로그인 기능 자체의 문제라고 생각했지만, 원인을 분석해보니 온보딩 페이지에서 로그인 경로가 하드코딩되어 있던 라우팅 구조 문제였다.

이 문제를 해결하면서 단순히 기능 코드만 보는 것이 아니라 애플리케이션 전체 라우팅 흐름을 함께 확인하는 것이 중요하다는 것을 배울 수 있었다.

4. 브랜치 병합 과정에서의 충돌 경험

프로젝트를 진행하며 여러 브랜치를 병합하는 과정에서 Git 충돌이 자주 발생하기도 했다.

이 경험을 통해 작업 중에도 수시로 git pull을 통해 최신 코드 상태를 유지하는 것이 중요하다는 점을 직접 체감할 수 있었다.

또한 협업 환경에서는 다음과 같은 습관이 필요하다는 것을 느꼈다.

• 작업 시작 전 최신 코드 pull
• 작은 단위로 커밋
• PR을 통한 코드 병합

5. 인증 기능 구현을 통해 배운 점

이번 프로젝트를 통해 로그인 기능은 단순히 인증 API를 호출하는 것만으로 끝나는 것이 아니라 다음과 같은 요소들을 함께 고려해야 한다는 것을 배웠다.

• 페이지 접근 제어
• 인증 상태 관리
• 라우팅 흐름 설계

또한 팀 프로젝트에서는 단순히 기능 구현뿐만 아니라 코드 구조와 협업 방식이 프로젝트의 안정성과 개발 효율성에 큰 영향을 준다는 점도 느낄 수 있었다.

✅ 정리

이번 프로젝트를 통해 Supabase를 활용한 인증 기능 구현뿐만 아니라 Git을 활용한 협업 방식과 애플리케이션 구조 설계의 중요성을 경험할 수 있었다.

특히 로그인 기능은 단순히 인증 로직만 구현하는 것이 아니라 페이지 접근 제어, 인증 상태 관리, 라우팅 흐름까지 함께 고려해야 한다는 점을 배울 수 있었다.

앞으로는 기능 구현에만 집중하기보다는 애플리케이션의 전체 흐름과 인증 구조를 먼저 설계한 뒤 개발을 진행하는 습관을 가져야겠다고 느꼈다.

이 글은 2026년 03월 28일 작성된 글입니다.

오늘은 Supabase Auth를 기반으로 회원 정보를 자체 user 테이블에 저장하고, 로그아웃 및 마이페이지에서 사용자 정보를 조회/수정하는 기능을 구현했다.

단순 인증(Auth)만 사용하는 것이 아니라, 서비스에서 활용할 사용자 데이터를 별도의 테이블로 관리하는 구조를 구성한 것이 핵심이다.

1. Supabase Auth + user 테이블 연동

회원가입 시 Supabase Auth에만 저장하는 것이 아니라, 추가 정보를 관리하기 위해 public.user 테이블에도 데이터를 저장하도록 구현했다.

• Auth 회원가입 성공 후 DB insert
• user 테이블에 닉네임, 이메일 등 저장

const { data, error } = await supabase.auth.signUp({
  email,
  password,
});

if (data.user) {
  await supabase.from("user").insert({
    id: data.user.id,
    email: data.user.email,
    nickname,
  });
}

2. 사이드바 사용자 정보 표시

로그인된 사용자 정보를 가져와 사이드바 하단에 닉네임과 프로필 이미지를 표시했다.

const {
  data: { user },
} = await supabase.auth.getUser();

• 닉네임 표시
• 프로필 이미지 표시

3. 로그아웃 및 페이지 이동 기능

사이드바에서 로그아웃 및 마이페이지 이동 기능을 구현했다.

await supabase.auth.signOut();

• 로그아웃 버튼
• 마이페이지 이동 버튼

4. 마이페이지 UI 및 사용자 정보 조회

마이페이지에서 로그인된 사용자의 정보를 조회하여 표시했다.

const { data } = await supabase
  .from("user")
  .select("*")
  .eq("id", user.id)
  .single();

• 이메일
• 닉네임
• 프로필 이미지

5. 사용자 정보 수정 기능

마이페이지에서 사용자 정보를 수정할 수 있도록 구현했다.

1. 닉네임 변경

await supabase
  .from("user")
  .update({ nickname })
  .eq("id", user.id);

2. 비밀번호 재설정 (이메일 전송 방식)

비밀번호는 직접 변경하는 것이 아니라, Supabase에서 제공하는 비밀번호 재설정 이메일 기능을 사용했다.

await supabase.auth.resetPasswordForEmail(email, {
  redirectTo: "http://localhost:3000/reset-password",
});

• 사용자가 이메일을 통해 비밀번호 재설정 진행
• redirect 페이지에서 새로운 비밀번호 설정

3. 이메일 변경

await supabase.auth.updateUser({
  email: newEmail,
});

🍀 금일 구현한 것

• 회원가입 시 Auth → user 테이블 저장
• 사이드바 사용자 정보 UI 구현
• 로그아웃 기능 구현
• 마이페이지 UI 및 사용자 정보 조회
• 닉네임 변경 기능
• 비밀번호 재설정 (이메일 방식)
• 이메일 변경 기능

🔥 주말 구현 예정

현재는 각 컴포넌트(사이드바, 마이페이지)에서
개별적으로 supabase.getUser()를 호출하고 있다.

이를 개선하여 인증 상태를 한 곳에서 관리하도록 리팩토링할 예정이다.

• MainAuthGate에서 유저 정보 일괄 처리
• 전역 상태 관리 (Context 또는 상태관리 라이브러리 활용)
• 불필요한 중복 호출 제거

✅ 정리

• Supabase Auth는 인증을 담당하고, 서비스 데이터는 별도 테이블로 관리해야 한다.
• 사용자 정보 수정은 Auth / DB 역할을 나누어 처리해야 한다.
• 비밀번호는 직접 변경이 아니라 이메일 기반 재설정 방식이 안전하다.
• 인증 상태를 중앙에서 관리하면 코드 구조가 훨씬 깔끔해진다.

이 글은 2026년 03월 26일 작성된 글입니다.

개요

오늘은 팀 프로젝트에서 맡은 로그인 / 회원가입 기능 개발을 본격적으로 진행했다. 피그마 와이어프레임을 기반으로 로그인 및 회원가입 페이지의 UI를 구현하고, 인증 기능을 위해 Supabase, SSO 기번 이메일 로그인 및 회원가입 구조를 설계했다.

개발을 진행하는 과정에서 팀원들의 브랜치를 병합한 이후 온보딩 페이지에서 로그인 무한 루프가 발생하는 문제를 겪었고, 이를 해결하기 위해 라우팅 구조와 인증 흐름을 다시 정리하는 트러블슈팅 과정도 경험했다.

1. 로그인 / 회원가입 기능 구현

오늘은 로그인 기능의 전체적인 흐름을 고려하면서 UI와 인증 구조를 함께 구현했다.

먼저 피그마 와이어프레임을 기반으로 다음 페이지들을 구현했다.

• 로그인 페이지 UI
• 회원가입 페이지 UI

또한 이후 인증 기능 연동을 위해 Supabase + SSO 로그인 / 회원가입 기능을 연결할 수 있는 구조를 준비했다.

금일 구현 내용

• Supabase 이메일 회원가입
• Supabase 이메일 로그인
• 구글 소셜 로그인
• 카카오 소셜 로그인
• 비밀번호 재설정 기능

2. 인증 로직을 위한 폼 이벤트 처리

로그인 폼에서는 기본적으로 폼 제출 시 페이지가 새로고침되기 때문에 이벤트를 제어해야 한다.

  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault()

  // 로그인 API 요청
}

preventDefault()를 사용하면 기본 제출 동작을 막고 로그인 요청이나 인증 로직을 직접 처리할 수 있다.

3. 로그인 무한 루프 문제 발생

팀원들의 작업 브랜치를 머지한 이후 온보딩 페이지에서 로그인 루프 문제가 발생했다.

문제 증상

첫 수정

• 로그인은 정상적으로 완료됨
• 하지만 로그인 페이지에서 벗어나지 못하는 문제 발생

로그인 성공 → 다시 로그인 페이지로 이동

두번째 수정

• 로그인 페이지에서 벗어나긴 했지만
• 페이지가 계속 새로고침되는 무한 리로드 현상 발생

페이지 진입 → redirect → reload → 반복

4. 문제 원인 분석

온보딩 페이지의 시작하기 버튼 경로가 하드코딩 되어 있는 것이 원인이었다.

기존 코드

router.push("/login")

이 구조에서는 사용자가 이미 로그인되어 있어도 무조건 로그인 페이지로 이동하게 된다.

결과적으로

로그인 상태 → 온보딩 → 로그인 페이지 → 다시 인증 확인 → 반복

과 같은 흐름이 만들어지면서 무한 루프가 발생했다.

5. 해결 방법

1. 온보딩 페이지 경로 수정

시작하기 버튼이 메인 페이지로 이동하도록 수정했다.

router.push("/main")

2. 메인 페이지 로그인 보호 로직 추가

메인 페이지에 로그인 여부를 확인하는 로직을 추가했다.

로그인이 되어 있지 않은 경우 로그인 페이지로 이동하도록 처리했다.

if (!user) {
  router.push("/login")
}

3. 메인 내부 페이지 접근 보호

/main 내부의 모든 페이지는 로그인 상태가 아닐 경우 온보딩 페이지로 돌아가도록 보호 로직을 추가했다.

라우트 흐름

온보딩 (/)
   ↓
로그인 (/login)
   ↓
메인 (/main)
   ↓
메인 내부 페이지

로그인이 되어 있지 않은 경우

main → onboarding(/) redirect

이렇게 인증 흐름을 정리하면서 로그인 무한 루프 문제를 해결할 수 있었다.

** 금일 구현한 결과물이다 **

✅ 정리

오늘 개발을 진행하면서 로그인 기능 구현뿐만 아니라 라우팅과 인증 흐름 설계의 중요성을 다시 느꼈다.

특히 팀 프로젝트에서는 여러 브랜치가 병합되면서 예상치 못한 문제가 발생할 수 있기 때문에

• 라우팅 구조
• 로그인 상태 관리
• 페이지 접근 권한

명확하게 설계하는 것이 중요하다는 것을 경험했다.

내일 구현 목표인 작업으로는 아래와 같다.

• 회원가입 시 Supabase Auth → users 테이블에 회원 정보 저장
• 사이드바 하단 사용자 명, 프로필 사진 구현
• 사이드바에 로그아웃, 마이페이지 바로가기 기능 구현
• 마이페이지 UI 구현, 마이페이지에서 사용자 정보 표시

이 글은 2026년 03월 25일 작성된 글입니다.

오늘은 팀 프로젝트의 본격적인 개발 시작 전 회의와 협업 환경 설정을 진행했다. 팀원들과 역할을 분담하고, ERD 설계와 화면 와이어프레임을 작성했으며, Git 협업 규칙을 정했다.

특히 로그인/회원가입 기능을 맡게 되어 인증(Auth) 파트 구현을 시작했다.

1. 팀 프로젝트 역할 분담

프로젝트 회의를 통해 기능 단위로 역할을 나누었다.

내가 맡은 파트는 회원 관리 기능이다.

주요 담당 기능

• 이메일 기반 회원가입
• 구글 / 카카오 소셜 로그인
• 회원가입 시 사용자 정보 데이터베이스 저장
• 기존 가입 이메일 검증
• 로그인
• 아이디 / 비밀번호 찾기
• 로그아웃

이 중 1차적으로 이메일 기반 회원가입과 로그인 기능 구현을 진행할 예정이다.

2. 화면 설계 (와이어프레임)

로그인 / 회원가입 화면은 피그마(Figma) 를 이용해 와이어프레임을 정의했다.

로그인 화면에는 다음 기능들이 포함된다.

• 이메일 로그인
• 비밀번호 입력
• 로그인 버튼
• 구글 로그인
• 카카오 로그인
• 아이디 찾기
• 비밀번호 찾기
• 회원가입 이동

좌측에는 서비스 소개 영역이 있고 우측에는 로그인 및 회원가입 폼이 위치하는 구조이다.

3. Git 브랜치 전략

팀 협업을 위해 브랜치 전략을 다음과 같이 정했다.

메인 브랜치 아래에 기능 단위 브랜치를 생성한다.

main
 ├ feature/main_page
 ├ feature/sub_page
 ├ feature/auth
 └ feature/...

각자 맡은 기능을 feature 브랜치에서 개발하고 작업 완료 후 Pull Request(PR) 를 통해 main 브랜치에 병합한다.

4. Issue 작성 규칙

작업은 Issue 단위로 관리하기로 했다.

Issue 양식

## 💡개발 내용
-

## 🌿To-do
- [ ] 구현1
- [ ] 구현2

Issue 규칙

• 기능 단위로 이슈 작성
• 이슈 단위로 PR 생성
• PR 머지 후 Issue Close
• 담당자와 라벨 명시

5. Commit 메시지 규칙

팀 내에서 커밋 메시지 컨벤션도 정했다.

[분류] 내용

ex)
[Feat] Add 메서드 구현

커밋 타입

Feat      : 새로운 기능 추가
Fix       : 버그 수정
Docs      : 문서 수정
Style     : 코드 포맷팅, UI 수정
Refactor  : 코드 리팩토링
Test      : 테스트 코드
Chore     : 빌드, 패키지 수정
Revert    : 이전 상태로 롤백

6. 오늘 느낀 점

팀 프로젝트는 개인 프로젝트와 다르게 의사소통과 협업 방식이 매우 중요하다는 것을 느꼈다.

팀원들과 의견을 나누며 서로의 생각을 맞춰가는 과정이 쉽지는 않았지만 그 과정 자체가 흥미롭고 의미 있게 느껴졌다.

앞으로 개발을 진행하면서 기술적인 성장뿐만 아니라 협업 경험도 많이 쌓고 싶다.

✅ 정리

오늘 진행한 내용

• 팀 프로젝트 역할 분담
• ERD 설계
• 로그인 / 회원가입 화면 와이어프레임 작성
• Git 브랜치 전략 수립
• Issue 작성 규칙 정리
• Commit 메시지 컨벤션 정의

앞으로는 내가 맡은 회원가입 / 로그인 기능 구현을 중심으로 개발을 진행할 예정이다.

이 글은 2026년 03월 24일 작성된 글입니다.

오늘은 Supabase를 활용한 게시글/댓글 CRUD와 RLS 권한 제어를 학습했고, 팀 프로젝트 기획 단계에서 여행지 추천 플랫폼 주제와 요구사항 명세서 작성을 진행했다.

1. Supabase 테이블 관계 설정 (FK)

게시글 작성자를 연결하기 위해 posts.user_id를 Supabase 인증 테이블인 auth.users.id와 연결했다.

posts.user_id → auth.users.id (FK)

초기에는 데이터 입력을 위해 Nullable 허용으로 설정했다.

Is Nullable : 체크

향후 실제 user_id가 저장되기 시작하면 Nullable 해제 예정.

2. 게시글 CRUD 구현

게시글 등록

const { error } = await supabase
  .from('posts')
  .insert([{ title, content }])

게시글 삭제

const { error } = await supabase
  .from('posts')
  .delete()
  .eq('id', id)

게시글 수정

const { error } = await supabase
  .from('posts')
  .update({ title, content })
  .eq('id', id)

3. 댓글 CRUD 구현

댓글 등록

const { data, error } = await supabase
  .from('comments')
  .insert([
    { some_column: 'someValue', other_column: 'otherValue' },
  ])
  .select()

댓글 삭제

const { error } = await supabase
  .from('comments')
  .delete()
  .eq('some_column', 'someValue')

4. Supabase RLS(Row Level Security) 권한 제어

RLS 설정 후 권한이 없는 경우 데이터를 가져오지 못한다.

권한 검증 예시

if (!data || data.length === 0) {
  // RLS 차단 or 해당 행이 없음
  throw new Error('수정 권한이 없거나 대상이 존재하지 않습니다.')
}

또한 사용자 권한에 따라 UI 토글 노출을 구현할 수 있다.

예

작성자 → 수정 / 삭제 버튼 노출
비작성자 → 버튼 숨김

5. getSession() vs getUser()

Supabase에서 인증 정보를 가져오는 방법은 두 가지가 있다.

6. 팀 프로젝트 기획

오늘은 팀 프로젝트 기획서와 요구사항 명세서를 작성했다.

프로젝트 주제는 다음과 같다.

태그 기반 여행지 추천 웹 서비스

사용자가 원하는 여행 테마 태그를 선택하면 해당 테마에 맞는 여행지를 추천받는 플랫폼이다.

예시 태그

• 힐링
• 자연
• 감성 카페
• 맛집
• 야경
• 액티비티
• 쇼핑

7. 담당 역할

프로젝트 역할 분배 결과 나는 회원 시스템 파트를 맡게 되었다.

구현 예정 기능

회원가입
로그인
이메일 인증
SSO 로그인

SSO는 소셜 로그인을 의미하며 다음과 같은 방식으로 구현할 예정이다.

Google 로그인
Kakao 로그인

이후 프로젝트 진행 상황에 따라 다른 기능 파트도 추가로 맡아 구현할 가능성이 있다.

✅ 정리

오늘은 Supabase CRUD와 RLS 권한 제어 방식을 학습했다. 특히 인증 정보 조회 방식인 getSession()과 getUser()의 차이를 이해할 수 있었다.

또한 팀 프로젝트 기획을 진행하며 태그 기반 여행지 추천 플랫폼을 주제로 선정했고, 나는 회원가입 / 로그인 (이메일 + SSO) 파트를 담당하게 되었다.

앞으로는 회원 시스템 구현을 시작으로 프로젝트 기능을 단계적으로 개발해 나갈 예정이다.

이 글은 2026년 03월 23일 작성된 글입니다.

오늘은 Next.js에서 Supabase를 연동하여 데이터 조회와 인증 기능을 구현하는 방법을 배웠다. Supabase를 사용하면 별도의 백엔드 서버 없이 DB + 인증 기능을 빠르게 구현할 수 있다.

1. Supabase 설치 및 환경변수 설정

패키지 설치

npm install @supabase/supabase-js

.env.local

NEXT_PUBLIC_SUPABASE_URL=https://xxxxx.supabase.co
NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY=sb_publishable_xxx

2. Supabase Client 설정

/lib/supabase.ts

import { createClient } from '@supabase/supabase-js'

export const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!
)

3. 게시글 목록 조회

const { data } = await supabase
  .from('posts')
  .select('*')

핵심 흐름

• supabase.from('table')
• .select() 데이터 조회
• React state에 저장 후 렌더링

4. 게시글 상세 조회

특정 게시글 조회

const { data } = await supabase
  .from('posts')
  .select('*')
  .eq('id', id)
  .single()

댓글 조회

const { data } = await supabase
  .from('comments')
  .select('*')
  .eq('post_id', id)

5. Supabase 조회 메서드

메서드 설명

.eq() 값 일치 .gt() 초과 .lt() 미만 .gte() 이상 .lte() 이하 .like() 패턴 검색 .ilike() 대소문자 무시 .in() 배열 포함

예시

supabase.from('posts').select('*').eq('id', 1)

6. 회원가입 구현

await supabase.auth.signUp({
  email,
  password
})

7. 로그인 / 로그아웃

로그인

await supabase.auth.signInWithPassword({
  email,
  password
})

로그아웃

await supabase.auth.signOut()

현재 사용자 조회

const { data: { user } } = await supabase.auth.getUser()

✅ 정리

• Supabase는 DB + 인증 기능을 제공하는 BaaS
• @supabase/supabase-js로 Next.js에서 쉽게 연동 가능
• .from().select() 방식으로 데이터 조회
• .eq, .like 등으로 SQL처럼 필터링
• supabase.auth로 회원가입 / 로그인 / 로그아웃 구현 가능

Next.js와 Supabase를 함께 사용하면 간단한 CRUD 서비스나 개인 프로젝트를 빠르게 만들 수 있다.

수파베이스를 처음 접해봐서 사실 따라가기에 급급했던 수업인 거 같다. 반복해서 학습을 해야 할 필요성을 느꼈다.

이 글은 2026년 03월 20일 작성된 글입니다.

오늘은 Next.js 기본 구조와 Supabase 설정 기초를 학습했다.
Next.js 프로젝트 생성, 파일 기반 라우팅 규칙, layout 구조, 서버/클라이언트 컴포넌트 차이 그리고 Supabase 연동을 위한 기본 세팅을 실습했다.

1. Next.js 프로젝트 생성

Next.js 프로젝트는 아래 명령어로 생성할 수 있다.

npx create-next-app@latest

명령어 실행 후 기본 폴더 구조와 함께 Next.js 프로젝트가 생성된다.

대표적으로 생성되는 구조

app/
  layout.jsx
  page.jsx
public/
package.json

2. Next.js 파일 기반 라우팅

Next.js는 파일 기반 라우팅(File-based Routing) 방식을 사용한다.
즉 폴더와 파일 이름이 URL 경로가 된다.

예시 컴포넌트

export default function PostList() {
  return <>게시글 목록 페이지</>
}

export default function PostDetail() {
  return <>게시글 상세 페이지</>
}

예시 폴더 구조

app
 ├ posts
 │   ├ page.jsx
 │   └ [id]
 │       └ page.jsx

URL 매핑

/posts
/posts/1
/posts/2

3. Layout 구조

Next.js에서는 layout.jsx를 이용해 공통 레이아웃을 구성할 수 있다.

예를 들어 상단 네비게이션과 푸터를 공통으로 만들 수 있다.

<body>
  <header>
    <nav className="flex gap-2">
      <a href="/" className="p-2 rounded hover:bg-gray-200">
        메인
      </a>

      <a href="/posts" className="p-2 rounded hover:bg-gray-200">
        글 목록
      </a>
    </nav>
  </header>

  {children}

  <footer className="p-2 text-sm">
    footer 영역
  </footer>
</body>

{children} 위치에 각 페이지 컴포넌트가 렌더링된다.

4. a 태그 vs Link

Next.js에서는 내부 페이지 이동 시 Link 컴포넌트 사용을 권장한다.

예시

<a href="/posts">글 목록</a>

<Link href="/posts">글 목록</Link>

5. 서버 컴포넌트 vs 클라이언트 컴포넌트

Next.js에서는 Server Component와 Client Component 개념이 존재한다.

클라이언트 컴포넌트 예시

"use client"

import { useState, useEffect } from "react"

6. 더미 데이터 API 연동

React의 useEffect를 이용해 외부 API 데이터를 가져올 수 있다.

"use client"

import { useState, useEffect } from "react"

export default function PostList() {

  const [posts, setPosts] = useState([])

  useEffect(() => {
    fetch("https://dummyjson.com/posts")
      .then((res) => res.json())
      .then((data) => setPosts(data.posts))
  }, [])

  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>
          {post.id} - {post.title}
        </li>
      ))}
    </ul>
  )
}

7. 동적 라우팅 (useParams)

Next.js에서는 useParams를 이용해 URL 파라미터 값을 가져올 수 있다.

"use client"

import { useParams } from "next/navigation"

export default function PostDetail() {

  const { id } = useParams()

  return (
    <div>
      {id}번 게시글 상세 페이지
    </div>
  )
}

예시 URL

/posts/1
/posts/10

8. Supabase 설정

Supabase는 Backend as a Service 형태의 서비스로 DB와 인증 등을 제공한다.

먼저 패키지를 설치한다.

npm install @supabase/supabase-js

Supabase 클라이언트 설정

import { createClient } from "@supabase/supabase-js"

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY

export const supabase = createClient(
  supabaseUrl,
  supabaseAnonKey
)

환경 변수에는 Supabase 프로젝트의 URL과 API Key를 설정한다.

✅ 정리

• Next.js는 파일 기반 라우팅을 사용한다.
• layout.jsx로 공통 레이아웃을 만들 수 있다.
• 내부 페이지 이동은 Link 컴포넌트를 사용하는 것이 좋다.
• Next.js에는 서버 컴포넌트와 클라이언트 컴포넌트 개념이 있다.
• useEffect를 이용해 외부 API 데이터를 가져올 수 있다.
• useParams로 동적 라우팅 처리가 가능하다.
• Supabase 패키지를 통해 DB 연동 준비를 할 수 있다.

이 글은 2026년 03월 19일 작성된 글입니다.

오늘은 React Todo 프로젝트를 다시 복습하면서 컴포넌트 구조를 정리했고, 외부 API와 연동하여 데이터를 처리하는 방법을 학습했다. 또한 useEffect의 동작 방식을 정리하고, Todo 데이터를 CRUD 방식으로 처리하는 흐름을 학습했다.

1. TodoForm 컴포넌트 분리

기존에는 App.jsx 내부에서 Todo 입력과 관련된 로직을 처리하고 있었는데, 이를 별도의 컴포넌트로 분리했다.

기존에는 form submit을 직접 처리하는 handleOnSubmit을 props로 전달했다.

<TodoForm handleOnSubmit={handleOnSubmit} />

이 방식을 조금 더 단순하게 만들기 위해 addTodo 함수를 정의하고 props 이름도 명확하게 변경했다.

<TodoForm addTodo={addTodo} />

이렇게 하면 컴포넌트의 역할이 더 명확해지고, App은 상태 관리에 집중하고 TodoForm은 입력 UI에 집중할 수 있게 된다.

2. Fetch API로 더미 데이터 연결

Todo 데이터를 테스트하기 위해 더미 API를 사용했다.

useEffect(() => {
    fetch('https://dummyjson.com/todos')
        .then((res) => res.json())
        .then((res) => setTodos(res.todos))
}, [])

흐름은 다음과 같다.

1. 서버에 Todo 데이터를 요청한다.
2. 응답을 JSON으로 변환한다.
3. todos 상태에 데이터를 저장한다.

이 코드는 컴포넌트가 처음 렌더링될 때 한 번만 실행된다.

3. useEffect deps 정리

deps는 언제 다시 실행할지를 정하는 조건이다.

React에서 데이터를 처음 불러오는 API 요청은 대부분 [] 형태로 사용한다.

4. Todo API 연동 (CRUD)

Todo 기능을 API와 연결했다.

사용한 API

https://dummyjson.com/todos

각 기능별 HTTP Method는 다음과 같다.

기능 Method URL

조회 GET /todos 생성 POST /todos/add 삭제 DELETE /todos/:id 수정 PUT /todos/:id

Todo 생성 (POST)

fetch('https://dummyjson.com/todos/add', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
        todo: text,
        completed: false,
        userId: randomInt(1, 255),
    }),
})

새로운 Todo 데이터를 서버에 전달한다.

Todo 삭제 (DELETE)

fetch(`https://dummyjson.com/todos/${selectedId}`, {
    method: 'DELETE',
})

선택된 Todo id를 기준으로 데이터를 삭제한다.

Todo 수정 (PUT)

fetch(`https://dummyjson.com/todos/${selectedId}`, {
    method: 'PUT',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
        completed: !target.completed,
    }),
})

완료 상태를 토글(toggle)하는 방식으로 업데이트했다.

5. 목록 갱신을 위한 fetchTodos

데이터를 다시 불러오기 위해 별도의 fetchTodos 함수를 만들었다.

const fetchTodos = () => {
        fetch('https://dummyjson.com/todos')
            .then((res) => res.json())
            .then((res) => setTodos(res.todos))
    }

이렇게 하면

• Todo 추가
• Todo 삭제
• Todo 수정

이후 목록을 다시 가져와 최신 상태를 유지할 수 있다.

6. React Router Dom 설치

추가로 라우팅 기능을 위해 React Router Dom을 설치했다.

설치

npm install react-router-dom

이를 통해 여러 페이지에서 데이터를 처리하거나 화면을 분리할 수 있게 된다.

7. 👥 1차 팀미션 진행

내일까지 React 기반의 Todoapp 을 강사님 레포에 PR 후 팀원들과 서로 리뷰를 하는 것이 과제였다. 오늘 오전에 PR을 하였는데, 팀원들이 좋은 리뷰를 달아줬고, 내가 Context API를 사용하여 전역 상태 관리를 하려고 하였으나, 일부 컴포넌트에선 props 를 사용하고 있었다. 팀원분들이 남겨주신 좋은 피드백을 보며 개선했고, 팀원분들의 코드를 보면서도 각기 배울 점들이 많은 것 같다.

✅ 정리

오늘 학습한 핵심 내용

• TodoForm을 컴포넌트로 분리하여 역할을 명확하게 구성
• Fetch API를 사용해 외부 Todo API와 데이터 연동
• useEffect의 dependency 배열 동작 방식 정리
• Todo 데이터를 CRUD 구조로 API와 연결
• 데이터 갱신을 위한 fetch 함수 분리
• React Router Dom을 설치하여 라우팅 구조 준비

React에서 API 연동은 매우 중요한 부분이기 때문에 CRUD 흐름을 직접 구현해본 것이 의미 있는 연습이었다.

다음 회차부터는 Next.js 를 학습할 예정이다. 좀 더 집중해서 학습해야겠다.

이 글은 2026년 03월 18일 작성된 글입니다.

오늘은 바닐라 JavaScript로 만든 Todo App을 이어서 구현했고, 이전에 만들었던 React Todo App도 처음부터 다시 복습했다.

바닐라 프로젝트에서는 조건 렌더링, 컴포넌트 분리, LocalStorage 저장을 구현했고 React 프로젝트에서는 Vite 프로젝트 생성부터 Todo 등록 / 삭제 / 체크 토글 로직까지 다시 정리했다.

1. && 연산자로 조건 처리

간단한 조건에서는 삼항 연산자 대신 && 연산자를 사용하면 코드가 더 간결해진다.

<li style="${todo.checked && 'text-decoration: line-through'}">
  <input type="checkbox" ${todo.checked && "checked"}>
  <span>${todo.text}</span>
</li>

• 조건이 true일 때만 뒤의 값이 적용된다.
• false면 아무 값도 렌더링되지 않는다.

2. TodoList 생성

Todo 목록을 관리하는 컴포넌트.

import TodoItem from "./TodoItem.js";

function TodoList({ $target, initialState, onDelete, onToggle }) {
  const $container = document.createElement("div");
  const $ul = document.createElement("ul");

  $container.appendChild($ul);
  $target.appendChild($container);

  this.state = initialState;

  $container.addEventListener("click", (e) => {
    const id = Number(e.target.dataset.id);

    if (e.target.classList.contains("del_btn")) onDelete(id);
    if (e.target.classList.contains("toggle_btn")) onToggle(id);
  });

  this.setState = (next) => {
    this.state = next;
    this.render();
  };

  this.render = () => {
    $ul.innerHTML = "";
    this.state.forEach((todo) =>
      new TodoItem({ $target: $ul, todo })
    );
  };

  this.render();
}

export default TodoList;

이벤트 위임을 사용하여 삭제 / 체크 이벤트를 한 곳에서 처리했다.

3. TodoItem 생성

각 Todo 항목을 렌더링하는 컴포넌트.

function TodoItem({ $target, todo }) {
  const $li = document.createElement("li");

  $li.style.textDecoration = todo.checked ? "line-through" : "";

  $li.innerHTML = `
    <input class="toggle_btn" type="checkbox" data-id="${todo.id}" ${todo.checked ? "checked" : ""}>
    <span>${todo.text}</span>
    <button class="del_btn" data-id="${todo.id}">X</button>
  `;

  $target.appendChild($li);
}

export default TodoItem;

체크 상태에 따라 취소선 스타일을 적용했다.

4. LocalStorage 유틸 만들기

Todo 데이터를 새로고침 후에도 유지하기 위해 LocalStorage를 사용했다.

export function getStorage(key) {
    try {
        const stored = localStorage.getItem(key); 
        if (stored == null) return null;          
        return JSON.parse(stored);   
    } catch {
        return null;
    }
}

export function setStorage(key, data) {
    try {
        localStorage.setItem(key, JSON.stringify(data)); 
    } catch {
       console.log("저장 중 오류 발생")  
    }
}

• setStorage → 데이터 저장
• getStorage → 데이터 조회 (없으면 기본값 반환)

5. React Todo App 복습

이전에 만들었던 React Todo App도 처음부터 다시 복습했다.

프로젝트 생성

npm create vite@latest

프로젝트 생성 후 React 템플릿을 선택하여 기본 환경을 구성했다.

Prettier 설정

코드 스타일을 맞추기 위해 Prettier 플러그인을 설치하고 프로젝트 루트에 .prettierrc 파일을 생성했다.

6. App.jsx Todo 로직 구현 복습

App.jsx에서 Todo 상태 관리와 함께 등록(add), 삭제(remove), 체크 토글(toggle) 기능을 구현했다.

• addTodo → 새로운 Todo 추가
• removeTodo → Todo 삭제
• toggleTodo → 체크 상태 변경

✅ 정리

• && 연산자를 활용해 조건 처리를 간결하게 작성했다.
• TodoList / TodoItem을 분리해 컴포넌트 구조를 만들었다.
• LocalStorage를 활용해 Todo 데이터를 저장했다.
• React Todo App을 처음부터 다시 복습하며 Todo 등록 / 삭제 / 체크 토글 로직을 구현했다.

강사님의 강의로 학습한 것이외에도 개인적으로 다시 상기시키며 복습을 해보아야 할 거 같다는 생각이 들어서, 틈틈히 복습을 할 생각이다.

이 글은 2026년 3월 17일 작성된 글입니다.

오늘은 React에서 React Router를 활용한 페이지 라우팅, Dummy JSON API를 활용한 더미 데이터 실습, 그리고 REST API 요청 방식(GET / POST / PUT / DELETE)을 활용하여 Todo 데이터를 관리하는 실습을 진행하였다.

또한 이전에 진행했던 Vanilla JavaScript 기반 Todo App 구현 과정도 함께 정리하였다.

1. React Router 기본 구조

React에서는 React Router를 사용하여 페이지 이동을 구현한다.

기본적인 라우터 구조는 다음과 같다.

import { BrowserRouter, Routes, Route } from "react-router-dom"
import Main from "./pages/Main"
import Sub from "./pages/Sub"

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route index element={<Main />} />
        <Route path="/sub" element={<Sub />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

구성 요소

2. 여러 페이지 라우팅 예제

Todo 프로젝트에서는 다음과 같이 여러 페이지를 구성하였다.

import { BrowserRouter, Routes, Route } from "react-router-dom"
import Main from "./pages/Main"
import Sub from "./pages/Sub"
import List from "./pages/List"
import Form from "./pages/Form"

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route index element={<Main />} />
        <Route path="/sub" element={<Sub />} />
        <Route path="/list" element={<List />} />
        <Route path="/new" element={<Form />} />
      </Routes>
    </BrowserRouter>
  )
}

export default App

페이지 구조 예시

/
├ main
├ sub
├ list
└ new

URL 경로에 따라 다른 컴포넌트가 렌더링된다.

3. Dummy JSON 이란

Dummy JSON은 테스트용 데이터를 제공하는 API 서비스이다.

실제 서버가 없어도 REST API 요청을 연습할 수 있다.

예시 API

https://dummyjson.com/todos

응답 데이터 예시

{
  "todos": [
    {
      "id": 1,
      "todo": "Do something",
      "completed": false
    }
  ]
}

활용 목적

• API 연동 연습
• 테스트용 데이터 사용
• CRUD 기능 실습

4. Dummy JSON으로 Todo 데이터 가져오기

React에서는 useEffect + fetch를 사용하여 데이터를 가져온다.

import { useEffect } from "react"
import { useTodos } from "../context/TodoContext"
import TodoList from "../components/TodoList"
import TodoWriteForm from "../components/TodoWriteForm"

function Main() {
  const { setTodos } = useTodos()

  useEffect(() => {
    fetch("https://dummyjson.com/todos")
      .then((res) => res.json())
      .then((data) => setTodos(data.todos))
  }, [])

  return (
    <>
      <TodoWriteForm />
      <TodoList />
    </>
  )
}

export default Main

동작 흐름

1. 컴포넌트 마운트
2. API 요청 발생
3. JSON 데이터 변환
4. 상태(state)에 저장
5. UI 렌더링

5. Todo 데이터 조회 (GET)

Todo 목록을 가져오는 요청이다.

useEffect(() => {
  fetch("https://dummyjson.com/todos")
    .then((res) => res.json())
    .then((data) => setTodos(data.todos))
}, [])

특징

• GET 요청
• 여러 데이터 조회
• 초기 데이터 로딩에 사용

6. Todo 데이터 추가 (POST)

새로운 Todo 데이터를 서버에 추가하는 요청이다.

const handleSubmit = (e) => {
  e.preventDefault()
  const form = e.target

  fetch("https://dummyjson.com/todos/add", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      todo: form.todo.value,
      completed: false,
      userId: 5,
    }),
  })
    .then((res) => res.json())
    .then(console.log)
}

POST 특징

• 서버에 새로운 데이터 생성
• body에 JSON 데이터 전달

7. Todo 데이터 삭제 (DELETE)

특정 Todo 데이터를 삭제하는 요청이다.

const removeTodo = (id) => {
  fetch(`https://dummyjson.com/todos/${id}`, {
    method: "DELETE",
  })
    .then((res) => res.json())
    .then(console.log)
}

특징

• 특정 ID 데이터 삭제
• URL 파라미터 사용

8. Todo 데이터 수정 (PUT / PATCH)

Todo 완료 상태를 변경하는 요청이다.

const toggleTodo = (id) => {
  const selected = todos.find((todo) => todo.id === id)

  fetch(`https://dummyjson.com/todos/${id}`, {
    method: "PUT",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      completed: !selected.completed,
    }),
  })
    .then((res) => res.json())
    .then(console.log)
}

PUT / PATCH 차이

9. Vanilla JavaScript Todo App 구현

Next 실습 이전에 Vanilla JS 기반 Todo App도 구현하였다.

구현 과정

• Todo Header 생성
• TodoList 상태 관리
• 입력창을 통한 Todo 추가
• initialState 데이터 구조 변경
• 삭제 버튼 클릭 시 Todo ID 가져오기

이 과정을 통해 기본적인 상태 관리와 DOM 조작 방식을 이해할 수 있었다.

✅ 정리

오늘 실습을 통해

• React Router를 이용한 페이지 라우팅
• Dummy JSON API를 활용한 더미 데이터 연동
• REST API 요청 방식
  • GET (조회)
  • POST (생성)
  • PUT / PATCH (수정)
  • DELETE (삭제)
• React에서 API 데이터를 활용하는 방법
• Vanilla JavaScript 기반 Todo App 구조

를 정리하였다.

React 애플리케이션에서는 라우팅 구조와 API 연동이 핵심적인 요소이다. 하지만 아직 익숙치않아 조금 더 복습을 해야 할 것 같다. 이번 실습을 통해 실제 서비스 구조를 이해하는 데 도움이 되었다.