SteVe가 뭐야?🤔

SteVe는 독일에서 시작된 Java 기반의 OCPP(Open Charge Point Protocol) 서버 오픈 소스로, 전기차 충전기와 서버를 연결해주는 핵심 역할을 합니데이 쉽게 말하면, SteVe는 충전기와 통신하고, 데이터를 수집하고, 충전 과정을 관리하는 "매니저"입니다.

"OCPP서버를 만들고 싶은데 어디서 시작해야 할지 모르겠어!😩" "SteVe가 도와줄게요😉"

SteVe의 주요 기능 🚀

SteVe는 단순한 서버가 아닙니다. 다양한 기능으로 충전 네트워크를 효율적으로 관리할 수 있죠.

• OCPP 1.6 지원
  SteVe는 OCPP 1.6 표준을 완벽히 지원합니다. 덕분에 대부분의 현대 충전기와 호환이 가능하며, 안정적인 충전기-서버 통신 환경을 제공합니다.
  • 충전 세션 관리: 각 충전기의 세션 데이터를 효율적으로 관리할 수 있습니다.
  • 원격 명령: 충전 시작/중지, 펌웨어 업데이트 등 다양한 원격 명령을 실행할 수 있습니다.
• 사용자 관리 기능
  관리자와 사용자 계정을 나누어, 충전 네트워크를 체계적으로 관리할 수 있는 기능을 제공합니다. 이를 통해 충전 기록과 세션 정보를 사용자 그룹별로 손쉽게 확인할 수 있습니다.
• 웹 기반 UI
  충전기 상태, 세션 기록 등을 한눈에 파악할 수 있는 사용자 친화적인 웹 기반 대시보드를 제공합니다.
• 오픈 소스의 자유로움
  SteVe의 코드는 모두 공개되어 있어, 필요에 따라 직접 수정하거나 새로운 기능을 추가할 수 있습니다. 커스터마이징이 중요한 환경에서 큰 장점이 됩니다.

SteVe를 왜 써야 할까? 🤷‍♀️

다른 상용 OCPP 서버 솔루션도 많은데, 왜 SteVe를 써야 할까요?
아래에서 SteVe의 매력을 살펴보세요!

💡 SteVe의 장점

• 무료 & 오픈 소스
  SteVe는 100% 무료입니다. 비용 걱정 없이 프로토타입이나 테스트 환경을 구축할 수 있죠.
• 확장 가능
  Java 기반으로 만들어졌기 때문에, 개발 경험이 있다면 원하는 대로 커스터마이징이 가능합니다.
• 쉽게 설치 가능
  초기 설치가 비교적 간단해요. MySQL 데이터베이스와 함께 사용하면 곧바로 충전기를 연결할 수 있습니다.

🛠️ SteVe 설치 가이드

SteVe를 직접 써보고 싶으신가요? 아래의 단계를 따라 설치해보세요!

1. 필요한 환경 준비하기

• Java 11 이상
• MySQL 데이터베이스

2. SteVe 설치가이드

1. SteVe의 GitHub 페이지에서 코드를 가져옵니다.
2. GitHub 저장소에서 스티브 소스 코드를 클론합니다.
3. MySQL 데이터베이스를 생성하고, steve.properties 파일에서 데이터베이스 설정을 구성합니다.
4. Maven을 사용하여 프로젝트를 빌드합니다
mvn clean install
5. 빌드된 .war 파일을 톰캣(Tomcat) 서버에 배포합니다.
6. 톰캣 서버를 시작하고, 웹 브라우저에서 스티브 웹 인터페이스에 접근합니다.

마무리: SteVe와 함께하는 충전의 미래 ⚡

SteVe는 단순한 오픈 소스를 넘어, OCPP 서버 구축에 대한 훌륭한 가이드가 되어줍니다. 만약 전기차 충전 네트워크를 관리하거나, 새로운 기능을 실험해보고 싶다면 SteVe를 한 번 사용해보세요.

"스티브와 함께 전기차 충전의 세계를 더 똑똑하고 유쾌하게 만들어봅시다!" 🚗✨

👉 GitHub에서 SteVe 확인하기

이 위젯들은 크게 두 가지로 나눌 수 있습니다 StatelessWidget과 StatefulWidget 둘의 차이를 이해하면 더 나은 앱 개발이 가능해지니, 지금부터 예시와 함께 자세히 알아볼까요?

1️⃣ StatelessWidget

StatelessWidget은 말 그대로 "상태가 없는 위젯" 입니다.

즉, 화면의 내용이 고정되어 있으며, 유저의 행동이나 데이터 변화에 따라 다시 그려질 필요가 없습니다.

💭 "Hello, Flutter!" 라는 텍스트를 화면에 표시한다고 가정해보세요.

이 텍스트는 사용자와의 상호작용과 상관없이 변하지 않는 고정된 내용입니다.

  import 'package:flutter/material.dart';

  class StatelesswidgetApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(title: Text('StatelessWidget 정적')),
          body: Center(
            child: Text('Hello, Flutter!'), // 변하지 않는 텍스트
          ),
        ),
      );
    }
  }

📱 실행 결과

화면에** "Hello, Flutter!"** 라는 텍스트가 표시됩니다. 유저가 버튼을 누르거나 화면을 스와이프해도 이 텍스트는 변하지 않습니다.

이처럼 StatelessWidget은 고정된 UI를 표현할 때 사용됩니다.

2️⃣ StatefulWidget

이제 StatefulWidget을 살펴봅시다. StatefulWidget 은 "상태가 있는 위젯" 으로, 사용자 상호작용이나 데이터 변화에 따라 화면의 내용이 동적으로 변경됩니다.

💭 버튼을 누를 때마다 숫자가 증가하는 카운터 앱을 만들어봅시다.

import 'package:flutter/material.dart';

class StatefulwidgetApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<StatefulwidgetApp> {
  int _counter = 0; // 상태를 저장하는 변수

  void _incrementCounter() {
    setState(() {
      // 상태를 업데이트하고 화면 새로고침
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('StatefulWidget 동적')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('버튼를 눌러보세욤'),
              Text(
                '$_counter', // 상태에 따라 동적으로 변경되는 텍스트
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter, // 버튼 클릭 시 상태 업데이트
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

📱 실행 결과

처음에는 화면 중앙에 0이라는 숫자가 표시됩니다. 유저가 화면 하단의 + 버튼을 누를 때마다 숫자가 1씩 증가합니다. 이처럼 StatefulWidget은 동적인 데이터와 UI를 처리할 때 사용됩니다.

3️⃣ StatelessWidget vs StatefulWidget

StatelessWidget은 "액자 속 사진"과 같습니다. 한 번 넣은 사진은 변하지 않죠.

StatefulWidget은 "디지털 액자"와 같습니다. 버튼을 누르면 사진이 바뀌는 것처럼, 상태에 따라 화면이 변화합니다.

결론 🎯

Flutter에서 앱을 개발할 때 화면이 고정적인지, 아니면 동적으로 변하는지를 먼저 판단하세요.

🖼️ 고정적이라면 → StatelessWidget 🔄 동적이라면 → StatefulWidget

위 두 가지를 적재적소에 활용하면, 더 효율적이고 아름다운 앱을 만들 수 있습니다! 🚀

🔗 [링크] DartPad : Dart 문법 연습하기

🎯 기본내용 main은 Dart에서 처음 시작 시 호출하는 약속된 함수이다 주석은 // print() 소괄호 안쪽에 값 입력 console에 출력 ; Dart 에서 마지막은 세미클론으로 마무리~

    main() {
    // Print 아래 내용이 콘솔에 출력됩니다.
    print("Hello Word~");
    }

1) 변수 2) 자료형 3) 흐름 제어문 4) 함수(function) 5) 클래스(Class)

1️⃣ 변수

  main() {
    var variable = "변수"; 
    String id = "ee_ji0"; // 쌍따움표 
    String velogPath = 'https://velog.io/'; // 단다음표

    //문자열 연산 
    print(velogPath + id); // https://velog.io/ee_ji0
    print(velogPath + "@" + id); // https://velog.io/@ee_ji0

    // 문자열 속에 변수값 할당
    print("velogPath id");   // velogPath id
    print("$velogPath@$id"); // https://velog.io/ ee_ji0
    print("${velogPath + id}"); // https://velog.io/ee_ji0

    // 내장함수 
    print(velogPath.split('//')); // [https:, velog.io/]

    }

** 자료형 ** var : 처음 담긴 값으로 타입이 지정됩니다. String : 문자만 담을 수 있습니다. String? : 문자 또는 비어있는(null) 상태일 수 있습니다. final String : 문자를 한 번 담은 뒤 재할당 불가능합니다.

** 변수명 만드는 규칙** 1. 영문 / _ / $ / 숫자만 사용 2. 숫자로 시작 불가능 3. 카멜케이스(camelCase) 사용

2️⃣ 자료형

3️⃣ 흐름제어문

1) 조건문

if (bool1) {
    // bool1이 true면 실행
} else {
    // bool1이 false면 실행
}

if (bool1) {
    // bool1이 true면 실행
} else if (bool2) {
    // bool1이 false이고, bool2가 true이면 실행
} else if (bool3) {
    // bool1과 bool2가 false이고, bool3가 true이면 실행
} else {
    // bool1, bool2, bool3가 모두 false이면 실행
}

• ** AND와 OR 연산자**

2) 반복문

: 온라인 상에서 Dart를 실행할 수 있는 웹사이트 ▶️DartPad 접속◀️

main() {
  // 여기서 부터 시작합니다.
  print("Hello Dart");

}

• print(): 소괄호 안쪽에 값을 넣으면 오른쪽 Console에 값이 출력

  ---

💡변수

1. 변수 만들기

1) 자료형

var : 처음 담긴 값에 따라 타입을 지정(문자열, 정수) String: 문자만 String?: 문자 또는 비어있는(null) 상태 final String: 문자를 한 번 담은 뒤 재할당 불가능

2) 변수명

Dart의 변수명 만드는 규칙

1. 영문 / _ / $ / 숫자만 사용
2. 숫자로 시작 불가능
3. 카멜 표기법 사용

main() {
  /// var : 처음 담은 값으로 자료형이 결정 됨
  var name = '철수';
  print(name); // 철수
  print(name.runtimeType); // string (문자)

  var age = 20;
  print(age); // 20
  print(age.runtimeType); // int (정수)


  print("="*20);


  /// String : 문자만 넣을 수 있음
  String address = '우리집';
  print(address); // 우리집

  // address = 1; // ⬅️ String 만 담을 수 있기 때문에 이 코드는 에러 발생

  address = '모두의 집';
  print(address); // 모두의 집


  print("="*20);


  /// String? : 문자 또는 비어있을 수 있음
  String? email; // ⬅️ 아무것도 안넣었으므로 비어있음
  print(email); // null ⬅️ 비어있음을 의미

  email = "a@a.com"; // 문자열 할당
  print(email); // a@a.com

  email = null; // 다시 비우기
  print(email); // null


  print("="*20);


  /// final : 값을 재할당 할 수 없음
  final String phone = "010-0000-0000";
  print(phone); // 010-0000-0000
  // phone = "010-1111-1111"; // final 때문에 이 코드는 실행 불가능
}

Console화면

💡자료형

💡흐름 제어문

1) 조건문

if (bool1) {
    // bool1이 true면 실행
} else if (bool2) {
    // bool1이 false이고, bool2가 true이면 실행
} else if (bool3) {
    // bool1과 bool2가 false이고, bool3가 true이면 실행
} else {
    // bool1, bool2, bool3가 모두 false이면 실행
}

2) 반복문(for문)

for (int i = 0; i < 5; i++) {
    print('hello ${i + 1}');
}```

Flutter 이해하기

Flutter의 모든 위젯은 StatelessWidget 과 StatefultWidget으로 나눌 수 있다

StatelessWidget : 상태 변화가 없어 화면을 새로고침 할 필요가 없는 위젯 StatefulWidget : 상태 변화가 있어 화면을 새로고침 할 필요가 있는 위젯

🚩StatelessWidget (새로고침 없음)

• extends StatelessWidget : StatelessWidget의 기능을 물려받는다
• 생성자 : 클래스 이름과 동일한 함수
• build 함수 : 화면에 보여줄 자식 위젯을 반환 DartPad로 연습하기

  🚩StatefulWidget(새로고침 있음)

  DartPad로 연습하기

👷‍♂️영역 배치 관련

💡Scaffold : 간편 배치

• Scaffold 위젯 UI의 뼈대를 잡아주는 역할을 하는 위젯

• 상단 appBar, 중앙 body, 하단bottomNavigetionBar, 우측하단 floatingActionButton

Scaffold(
    appBar: 다른 위젯, // 상단 바
    body: 다른 위젯, //화면 중앙에 가장 큰 면적
    bottomNavigationBar: 다른 위젯, //하단 바
    floatingActionButton: 다른 위젯, //우측 하단
),

💡Column : 세로 방향

세로 방향으로 여러 위젯을 나열할 때 사용

Column(
  children: [ // 자식 위젯들
    Text("위젯1"),
    Text("위젯2"),
  ],
),

💡Padding

전방위 모두 동일 적용

Paddion(
    padding: const EdgeInsets.all(8),
),

특정 방위만 적용

Paddion(
    padding: const EdgeInsets.only(
         left: 8,
          right: 8,
    ),
), 

위아래 또는 좌우 적용

Paddion(
    padding: const EdgeInsets.symmetric(
        vertical: 8,
        horizontal: 8,
    ),
)

💡Container

Container(
  width: double.infinity, // 폭
  margin: EdgeInsets.only(top: 24),
  height: 200, // 높이
  color: Colors.amber, // 박스 색상
  alignment: Alignment.center, //chlid 정렬 
  child: Text("I Love Flutter!"), // 자식 위젯
      style: TextStyle(
        color: Colors.white,
        fontSize: 18
    )
),

⌨️텍스트 관련

💡Text : 텍스트 창

텍스트를 보여줄 때 Text위젯을 사용

Text(
  '텍스트 내용',
  style: TextStyle(
    fontSize: 35, // 폰트 크기
    fontWeight: FontWeight.bold, // 폰트 두께
    color: Colors.amber, // 폰트 색상
  ),
),

💡TextField : 텍스트 입력

TextField(
    obscureText: true,
    decoration: InputDeCoration(
    labelText:"비밀번호"
    ),
),

🕹️버튼 관련

💡ElevatedButton : 기본 버튼

// 위로 올라와 있는 듯한 버튼
ElevatedButton(
  onPressed: () {},// 클릭 이벤트 담당
  child: Text('Elevated Button'), // 버튼 속 위젯
),

💡TextButton : 텍스트 버튼

// 텍스트 버튼
TextButton(
  onPressed: () {},
  child: Text('Text Button'),
),

💡IconButton : 아이콘 버튼

// 아이콘 버튼
IconButton(
  onPressed: () {},
  icon: Icon(Icons.add),
),

📷이미지 관련

💡 Image

Image.network("URL")

Padding(
       padding: const EdgeInsets.all(32),
       child: Image.network("URL",
       width: 81,
),

🖱️Scroll 관련

💡SingleChildScrollView

범위 감싸기

  body: SingleChildScrollView(
   child: 다른 위젯,
  )

위젯트리을 사용하고 여러 개발 환경을 다룰 필요 없이 flutter 하나 만으로 안드로이드, iOS를 다룰 수 있다는 점이 흥미로웠다🍭

그래,, Flutter 너 멋진 아이구나,, 근데 왜 설치하기,, 왜이리 힘드냐,,?🙄

여러 고난과 역경을 겪고 결국 해냈다..🪄 Flutter 설치 과정에 대해서 다시 정리해서 포스팅하는 것이 해두어야겠다

(더 이상의 삽질은 용납 못한다🫶)

프로그램도 설치했으니 오늘은 프로젝트 파일을 생성해 보려고한다!

🪄프로젝트 준비

1) Flutter 프로젝트 생성하기 2) VSCode Dart 세팅 3) Emulator 실행하기 4) 실행하기

💡Flutter 프로젝트 생성하기

1) Visual Stutdio Code(VSCode) 실행하기 2) 상단에 view ➡️command Palette 버튼 클릭하기

window 단축키: ctrl + Shift + p macOS 단축키 : cmd + Shift + p

3) 명령어 검색 팝업창에 flutter입력 후 Flutter: New Project선택하기 4) Application을 선택하기 5) 프로젝트 시작할 폴더를 선택하기 (경로 지정하기 한글은 지양) 6) 프로젝트 이름 입력 후 확인!

🤔폴더 구조 살펴 보기

나의 경우에는 hello_flutter라는 폴더를 생성하였다🫶 이쯤에서 굼금해 지는 폴더 구조 한번 살펴 보자 lib : 주로 코드를 짜는 폴더 pubspec.yaml : 라이브러리 및 설정을 하는 폴더 android : Android 프로젝트 폴더 ios : iOS 프로젝트 폴더 web : Web 프로젝트 폴더 (웹도 만들수 있다!) macos: MacOS 프로젝트 폴더 linux : Linux 프로젝트 폴더 windows : Window 프로젝트 폴더

7) main.dart에 아래 코드 복사해서 기존 코드 모두 지우고 붙여 넣기

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(),
      ),
    );
  }
}

8) 불필요한 내용 화면에 표시하지 않기analysis_options.yaml파일을 열고, 아래 코드 복사해서 24번째 라인 뒤에 붙여 넣고 저장하기

    prefer_const_constructors: false
    prefer_const_literals_to_create_immutables: false

💡VSCode Dart 세팅

1) View → Command Palette 실행하기 > window 단축키: ctrl + Shift + p macOS 단축키 : cmd + Shift + p 2) dart recommend라고 검색한 뒤 Dart: Use Recommended Settings를 선택하기 (자동 줄 정렬 기능과 같이 편의 기능 설정이 적용)

💡Emulator 실행하기

🤔에뮬레이터(Emulator)란?

실제 기기를 연결하지 않고 개발 항 수 있도록 컴퓨터 상의 가상의 휴대폰을 의미한다.

1) View → Command Palatte실행하기 2) launch를 입력한 뒤 Flutter: Launch Emulator를 선택하기. 3) android 에뮬레이터를 선택하기

💡실행하기

1) ⅴ 버튼을 누르고 Run Without Debugging 버튼을 클릭 2) 실행하는 동안 시간이 조금 소요 되니 여유롭게 기다리기!

🥳실행화면

데이터 모델링의 특징

추상화 : 현실세계를 간략하게 표현해야한다. 단순화 : 누구나 쉽게 이해할 수있도록 표현해야한다. 명확성 : 명확하게 의미가 해석되어야 하고 한가지 의미를 가져야한다.

데이터 모델링의 3단계 (개->논->물)

📍데이터 모델링 3단계
개념적 모델링 , 논리적 모델링, 물리적 모델링 📍데이터 모델링 관점 데이터, 프로세스, 데이터와 프로세스

개념적 모델링

• 전사적 관점에서 기업의 데이터를 모델링한다.
• 추상화 수준이 가장 높은 모델링이다.

  논리적 모델링

• 정규화를 통해서 재사용을 높인다.

  물리적 모델링

• ** 성능, 보완, 가용성 등을 고려하여 데이터 베이스를 구축**한다.

3층 스키마

사용자, 설계자, 개발자가 데이터 베이스를 보는 관점에 까라 데이터 베이스를 기술하고 이들 간의 관계를 정의한 것 데이터베이스의 독립성을 확보하기 위한 방법이다

3층 스키마의 구조 (데이더의 독립성 요소)

1) 외부스키마 (외부화면, 사용자, 인터페이스)

• 개개 사용자가 보는 개인적 DB 스키마
• 응용 프로그램이 접근하는 데이터베이스를 정의

2) 개념 스키마 (전체가 통합된 스키마)

• 모든 사용자 관점을 통합한 전체 DB
• 통합 데이터 베이스의 구조

3) 내부 스키마 (실제 저장된 DB)

• 물리적 장치(물리적 저장 구조)에서 데이터가 실제적 저장된 형식

데이터의 독립성

논리적 복립성 : 개념스키마가 변경 되더라도 외부 스키마가 영향을 받지 않는 것이다. 물리적 독립성 : 내부 스키마가 변경되더라도 개념 스키마가 영향을 받지 않는 것이다.

엔터티 (Entity)

업무에서 관리해애하는 데이터의 집합을 의미하며, 저장되고 관리되어야 하는 데이타이다. 객체?와 같은 의미인듯

특징

• 유일한 식별자가 있어야 한다.
• 2개 이상의 인스턴스가 있어야 한다.
• 반드시 속성을 가지고 있다.
• 다른 엔터티와 최소한 한개 이상의 관계가 있어야 한다.
• 업무에서 관리 되어야 하는 집합이다.

종류

유형과 무형에 따른 엔터티의 종류로는
유형엔터티, 개념엔터티, 사건엔터티 발생 시점에 따른 엔터티의 종류 기본엔터티, 중심엔터티, 행위엔터티

속성(Attribute)

업무에소 필요한 정보인 엔터가 가지는 항목 속성은 더 이상 분류되지 않은 단위로, 업무에 필요한 데이터를 저장할 수 있다.

속성의 종류

단일 속성 : 하나의 의미로 구성된 것 복합 속성 : 여러 개의 의미가 있는 것 다중값 속성 : 여러개의 값을 가질 수 있는 것으로 (엔터티로 구분O)

관계 (Relationship)

엔터티 간의 관계성을 의미하며 존재관계와 행위 관계로 구분

관계의 종류

존재관계 : 엔터티 간의 상태를 의미 (화사 - 사원) 행위 관계 : 엔터티 간의 어떤 행위가 있는 것 (회사 - 주문내역)

관계차수

| 는 필수적 관계 O 선택적 관계

엔터티 식별자

주식별자 (기본키, primary key)

최소성,대표성, 유일성,불변성

식별자의 종류

대표성 여부에 따른 식별자의 종류

• 주식별자
- 유일성과 최소성을 만족하면서 엔터티를 대표하는 식별자이다
- 다른 엔터티와 참조 관계를 연결될 수 있다. 보조
• 보조식별자
- 유일성과 최소성은 만족하지만 대표성은 만족하지 못하는 식별자

🤔 플러터 [Flutter] 란?

플러터는 cross- platform프레임워크이다. cross-platform 라는 말은, iOS와 Android 두개의 플랫폼에 사용할 앱을 하나의 코드베이스로 구축할 수 있음을 의미한다. 이런 특징은 규모적으로 스위프트, 코틀린 각각을 다루기 어려운 스타트업 개발에 있어서 큰 장점이고, 구글에서 많은 지원을 하고 있기 때문에 앞으로의 활용 범위도 넓어질 것이라고 한다👍

앱 뿐만 아니라 웹 페이지까지 플러터로 한 번에 구축할 수 있다고 했는데..! 웹은 아직 다가가지 않는 것이 정신 건강에 이롭다고 한다❕👀

따라서 플러터는 기본적으로 앱 개발을 위한 프레임워크! 고도의 모듈화된 위젯들을 이용해 widget tree를 쌓으며 User Interface를 코드로 구현하는 환경을 제공한다. 하나하나 구현 하는 것보다 쉽게 앱 개발이 가능하다는 장점이있다.

💭왜 Flutter를 사용하는가?

앱 개발 방법에 따라 네이티브 앱, 클로스 플랫폼 앱으로 나누어 진다.

📱네이티브 앱(Native App)

Android는

• 프로그래밍 언어 : java / Kotlin
• 개발 툴 : Android Studio

iOS는

• 프로그래밍 언어 : Obiective-C / Swift
• 개발 툴 : XCode

Android 는 Google에서 제공하는 Android SDK를 이용해 개발하는 방면 iOS는 Apple에서 제공하는 iOS(Software Development Kit)를 이용하여 개발 한다. 또한 macOS에서만 개발이 가능하다😮

따라서 네이티브 앱은, 하나의 Android 와 iOS를 각각의 개발 방법에 따라 개별로 두 번 만드는 단점이 있다! 그러나 성능이 빠르고 최신 기능을 빠르게 적용할 수 있다는 장법도 존재❕

📱크로스 플랫폼 앱(Cross Platform App)

💡 하나의 프로그래밍 언어와 소스코드로 Android와 iOS를 모두 개발하는 방법 💡네이티브 앱의 성능을 뛰어 넘을 수는 없지만! 하나의 언어로 두 플랫폼에서 모두 실행이 된다는 엄청만 장점이 있다~~

React Native

• 프로그래밍 언어 : javaScript
• 페이스북에서 출시한 오픈 소스 모바일 애플리케이션 프레임 워크

Flutter

• 프로그래밍 언어 : Dart
• 구글에서 출시한 오픈 소스 모바일 애플리케이션 프레임 워크

💭Flutter 이해하기

📍위젯 (레고와 같이 조립이 가능 하다)

💡Flutter는 모든 것이 위젯(Widget)으로 만들어져 있다❕ 위젯(Widget) 은 레고 블럭과 같이 앱을 만든데 사용되는 작은 모듈* 위젯트리(Widget Tree) 레고들록 하나하나가 위젯들이고 블록이 겹쳐서 만들어진것이 하나의 앱!

메테리얼 위젯(Material Widget) - Android 기본화면 구성요소 재현 위젯 쿠퍼티노 위젯(Cupertino Widget) - iOS 기본화면 구성요소 재현 위젯 커스텀 위젯(Custom Widget) - 특정 플랫폼에 종속되지 않고 고유의 디자인

🤔 플러터 설치하기

진짜,,,플러터까지는 설치 쉬웠다,, Android Studio 설치가 빡세서 놀랬다..

🪄설치

1. 플러터홈페이지 에서 플러터를 다운로드한다.
   
   
2. 플러터를 실행하기 위해서는 플러터뿐이니라 Android Studio, Xcode, Chrome등 ... 추가적으로 필요한 게 많은데 flutter doctor를 이용해 확인할 수 있다. 터미널 실행 > 플러터 디렉터리가 위치한 경로로 이동 flutter doctor입력 > 추가 사항 알려줌
   
3. X표시된 부분에서 문제가 있음 열심히 구글링하기!

😮🫶Reference

Flutter개발환경 구축

https://aws.amazon.com/ko/what-is/flutter/

빌드 : 컴파일된 코드를 실제 실행할 수 있는 상태로 만드는 일 배포 : 빌드가 완성된 실행 가능한 파일을 사용자가 접근할 수 있는 환경에 배 시키는 일

jar(Java ARchive) : war(Web application ARchive) :

https://tomcat.apache.org/

서버로 파일 옮기고 압축 풀기

server.xml 파일 vos 코드로 열기 22번째행 / 69번째행 port번호 수정

cmd켜기 (관리자 권한) bin 폴더까지 전체 복사 나는 tools에 파일이 있기 때문에 cd C:\tools\server\apache-tomcat-8.5.93\bin

cd 파일경로 startup.bat 입력하면 아래와 같은 한글이 깨진 cmd창 뜬다

2. Maven 설치해보자

https://maven.apache.org/

repository 파일 생성 conf > settings.xml
53번째 행 밖으로 빼고 reposetory 경로 입력 C:\tools\maven\apache-maven-3.9.4\reposetory

STS 켜고 8_application window-preferences-Maven-userSettings

스프링 프로젝트 설정 다시하기 Spring MVC project 페키지 명 : DeployExam 클래스 명 : com.kh.deployExam

프로젝트 우클릭 > run as>

3. 배포

<plugin>
<groupId>org.apache.tomcat.maven</groupId>
<artifactId>tomcat7-maven-plugin</artifactId>
<version>2.2</version>
<configuration>
<url>http://127.0.0.1:8899/manager/text</url>
<username>admin</username>
<password>admin</password>
<path>/DeployExam</path>
</configuration>
</plugin>

추가 pom.xml 태그에 추가ㅎㅎㅎ

tomcat-user.xml

<role rolename="manager-gui"/>
<role rolename="manager-jmx"/>
<role rolename="manager-status"/>
<user username="admin" password="admin" roles="managergui,manager-script,manager-status,manager-jmx"/>

Maven build run confingurations -> tomcat7:deploy -> apply -> run

Context API란❓

Props driling은 React 컴포넌트 구조에서 자식 컴포넌트로 데이터를 전달하기 위해 부모 컴포넌트를 거치는 것을 의미 이는 컴포넌트의 구조가 깊어지면서 코드가 복잡해지고 유지보수가 어려워지는 문제를 유발한다.

Context API는 props driling 방지 문제점을 해결하기 위한 방법이다

Props driling

ConText를 사용하기 위해서는❓

createContext()함수를 사용하여 Context객체를 생성해야한다. 객체 생성 후 Context.Provider 컴포넌트를 이용해 자식컴포넌트에게 데이터를 전달할 수 있다.

Provider

value prop을 통해 데이터를 전달한다.

아래 예제를 보고 Context API를 알아보자

UserContext.js

import React, { createContext } from 'react';

// createContext(초기값): Constext 객체생성
const UserContext = createContext();

export default UserContext;

R06_context_api.js

import React, { useState , useContext } from 'react';
import UserContext from '../contexts/UserConext';

const User = () =>{

    //useContext(Context명) : 지정된 Context를 사용
    // -> 부모 컴포넌트에서 제공한 값을 꺼내 쓸 수 있다
    const {user, temp} = useContext(UserContext); //user, temp
    // UserContext에서 user를 꺼내서 user변수에 저장
    // UserContext에서 temp를 꺼내서 temp변수에 저장

    console.log(user);
    console.log(temp);

    return(
        <ul>
            <li>{user.name}</li>
            <li>{user.email}</li>
        </ul>
    )
}

const Profile =() => {

    const [user, setUser] = useState(null);

    const print = () => {

        setUser({name: '김미영', email: 'my-kim@kh.or.kr'})
    }



const temp = '임시변수';

    return(

        /*  UserContext가 감싸고 있는 자식 컴포넌트에게  
            Context API를 이용해서 user 제공
        */ 

        <UserContext.Provider value={ {user , temp} }>
            <div>
                {/* 삼항연산자를 이용한 컴포넌트 렌더링 제어(조건부 렌더링) */}
                { user != null? (
                    <>
                        <User/>
                        <button onClick={ ()=>{ setUser(null) }}> 개인 정보 숨기기</button>
                    </>
                ) : (
                    <button onClick={print}> 개인 정보 출력</button>
                )}

            </div>
        </UserContext.Provider>

    );
}

export default Profile;

💗화면

첫 화면

개인정보 출력 버튼을 누르면?

onClick print()가 수행되고 김미영 팀장의 정보가 나타난다.

개인정보 숨기기 버튼을 누루면?

onClick 에서 익명함수가 실행되고 setUser를 통해 user는 null이 되어 초기화면으로 돌아간다.

자식 컴포넌트에서 발생한 이벤트를 부모 컴포넌드에서 처리하도록 하는 상태

원래는 부모 컴포넌트가 자식 컴포넌트의 상태를 직접 변경할 수 없다❌! 그러나 props와 useState의 성질를 이용해서 위와 같은 문제를 해결할 수 있다!

props

부모컴포넌트가 자식 컴포넌드에게 데이터 전달 시 사용하는 객체

**props 사용법**
    1. 자식 컴포넌트에 전달하려는 값(date) 속성을 정의한다.
    2. props를 사용해 정의된 값과 속성을 전달한다. 
    3. 전달받은 props를 렌더링 한다. 

State

컴포넌트의 상태를 나타내고 동적인 데이터를 다룰 때 사용한다.

userState

컴포넌트의 상태를 관리해줌 state의 변화가 감지되면 변화가 감지된 부분만❗컴포넌트 리렌더링를 한다

StateLiftingUp 예제

R04_state3.js

📍상태끌어올리기 : 부모컴포넌트의 "상태를 변경하는 함수"(useState사용) 그 자체를 자식 컴포넌트로 전달하고, 이함수를 하위 컴포넌트가 실행한다.

const [변수명, 값을 변경하는 함수(setter같은 역할)] = useState('초기값');

값을 변경하는 함수를 담을 변수를 생성해서 props로 보냄! 자식이 변경되면 부모도 변경되는 상태가된다.

import React,{useState} from "react";

const Id = ({handler}) => {

    // props로 전달한 값 중에서 key가 handler인 요소인 value 반환
    // console.log(handler);

    return(
        <>
            <div className='wrapper'>
                <label htmlFor='id'>ID : </label>
                <input type="text" id='id' onChange={handler}/>
            </div>
        </>
    );

};


const Pw = ({handler}) => { 
    return(
        <>
            <div className='wrapper'>
                <label htmlFor='pw'>PW : </label>
                <input type='password' id='pw'onChange={handler}/>
            </div>
        </>
    );

};

// 상태 끌어올리기
const StateLiftingUp = () => {

    const [id, setId] = useState('');
    const [pw, setPw] = useState('');

    // 변수에 저장
    const idHandler = (e) => { // id 값을 변경하는 함수

        setId(e.target.value);
    };

    // 변수에 저장
    const pwHandler = (e) => { // pw 값을 변경하는 함수
        setPw(e.target.value);
    };

    console.log("id : "+ id);
    console.log("pw : "+ pw);

    return(
        <>
            <Id handler={idHandler}/>
            <Pw handler={pwHandler}/>

            <div className='wrapper'>

                {/* disabled */}
                {/* id와 pw중 하나라도 입력되지 않을 경우  버튼 안 눌리게 하기*/}
                <button disabled={id.length === 0||pw.length === 0}>Login</button>
            </div>
        </>
    );
};

export default StateLiftingUp;

부모컴포넌트가 자식 컴포넌드에게 데이터 전달 시 사용하는 객체 props는 자식이 부모에게 전달 할 수는 없다.

React 컴포넌트에게 데이터를 전달하는 방법 중 하나입니다. Props는 부모 컴포넌트로부터 자식 컴포넌트로 전달되며, 컴포넌트 내부에서 변경할 수 없는 읽기 전용 데이터이다. Props를 사용하면 컴포넌트 간의 데이터 전달이 간단하고 유지보수가 쉬워진다. 또한, 컴포넌트의 재사용성을 높일 수 있습니다.

Props Drilling : 상태 내려꽂기

Props를 통해 데이터를 전달 할 때, 하위 컴포넌트에서 필요하지 않은 Props를 게속 전달하는 것

코드의 가독성을 떨어뜨리고, 유지보수를 어렵게 만들수 있다. 따라서 props drilling을 최소화하기 위해서는, 필요한 Props만을 전달하고, 필요하지 않은 Props는 하위 컴포넌트에서 직접 접근하는 것이 좋다.

이후 HttpAPI를 배울예정.... (React Context, Redux 상태 관련 라이브러리)

Props 예제

App.js

import './App.css';

import PropsEx from './components/R01_props.js';
  return (
    <>
      <h1>Hello React!!</h1>

      <div>리엑트 배운다~~</div>

      <PropsEx name={'홍길동'}/>
      <PropsEx name={'김길동'}/>
      <PropsEx name={'이길동'}/>

    </>
  );
}
export default App;

R01_Props.js

import React from 'react';

//props : 부모 컴포넌트가 자식 컴포넌트에게 
//      데이터 전달 시 사용하는 객체
//*** props는 자식 -> 부모 데이터 전달 불가능 ***/

const ChildComponent = (props) => {
    return(
        <>
            <ul>
                <li>이름: {props.name}</li>
                <li>나이: {props.age}</li>
            </ul>
        </>
    );
}

const MenuPrin =(props) => {
    return(
        <h4>김밥 : {props.김밥} , 떡볶이 : {props.떡볶이}</h4>
    );
}

const PropsEx = (props) => {
    //props 매개변수 : 부모로 부터 전달 받은 값이 담긴 객체

    // K:V 형태로 담겨 있음
    console.log(props);
    console.log(props.name);

    const menu = { '김밥' : 3000, '떡볶이' : 4000 };

    return(
        <>
            <h1>{props.name}</h1>
            <ChildComponent name={props.name} age={props.name === '홍길동' ? 20 :25}/>
            <MenuPrin {...menu}/>
            {/* <MenuPrin 김밥={3000}, 떡볶이={4000}/> */}
        </>
    );
}
export default PropsEx;

props 결과화면

State 상태

컴포넌트의 상태를 나타내고 동적인 데이터를 다룰 때 사용한다.

const [상태명, 상태변경함수명] = useState(초기값); 컴포넌트 내부에서 관리되는 상태 값을 의미한다. 컴포넌트가 생성되고, 갱신될때마다 변경될 수 있는 값이며, 이 값이 변경 될 때마다 화면이 다시 렌더링된다. state는 useState Hook 을사용하여 컴포넌트 내부에서 관리할 수 있으며, setState 함수를 통해 값을 업데이트할 수 있습니다.

state 예제 코드

R02_state1.js

import React, {useState} from 'react';

//컴포넌트 이름은 대문자로 작성!

// 리액트는 컴포넌트의 상태가 변할 때 마다 리렌더링을 수행 함
const InputTest = () => {

    const [inputValue, setInputValue] = useState("초기값")
    //        변수           함수

    // InputValue는 값을 저장하는 변수
    // setInputValue는 InputValue에 값을 대입하는 setter의 역할

    const changeInputValue = (e) => {
        console.log(e.target.value);
        setInputValue(e.target.value);
    }

    return(

        // 첫 렌더링 : vlaue = "초기값"
        // -> input 의 값을 변경 (컴포넌트의 상태 변화 -> 리렌더링 진행)
        //      1) onChage(값이 변했을 때)
        //          + onChangeInputValue 함수가 실행되면서
        //          inputValue에 e.target.value(변화된 값 대입)

        //      2) 컴포넌트의 상태 변화 -> 리렌더링 진행

        // 리렌더링 -> value = 변경된 inputValue의 값


        <input type='text' value={inputValue}
        onChange={changeInputValue}
        // onChange={(e)=>{setInputValue(e.target.value)}}
        />
    );
}
export default InputTest;

R03_state3.js

import React, {useState} from 'react'

const State2= (props) =>{

    //props : 부모로 부터 값을 전달 받은 객체
    // props.init
    //const [conut , setConut] = useState(0);
    const [conut , setConut] = useState(props.init);


    // useState :컴포넌트의 상태를 관리할 때 사용하는 Hook
    // const [변수, 값을 변경하는 함수 (setter)] = useState(초기값);

    return(

        <div>
            <h3>{conut}</h3>
            <button onClick={()=>setConut(conut +1)}>클릭하면 1증가</button>
        </div>
    );

}

export default State2;

리액트(React)는 페이스북에서 제공해주는 프론트엔드 라이브러리이다. React는 컴포넌트(Component) 기반으로 되어 있어 conponent에 데이터를 내려주면 개발자가 설계한 대로 UI가 만들어져 사용자에게 보여진다. 리액트을 사용하지 않아도 html과 css로 충분히 화면을 만들수 있다!

그러나 html과 css로만 만들어진 웹페이지는 동적인 데이터를 UI에 뿌려주기에는 적합합지 ❌ 리액트를 이용하면 사용자와 상호작용할 수 있는 UI를 손 쉽게 만들어 줄 수 있다!

❕❕따라서 동적인 화면을 만들기 위함❕❕

Component란?

리액트는 컴포넌트 기반의 라이브러리이다 component란? 특정 코드 뭉치를 다른 부분으로 인식하거나 재사용하기 위해 사용하는 코드를 블록단위를 말한다. 쉽게 말해, UI를 하나의 큰 덩어리로 생각한다면 컴포넌트는 그 덩어리를 이루는 아주 작은 요소들이라고 생각하면 된다!

따라서 작은 컴포넌트들은 다른 화면에서도 사용될 수 있는 재사용성을 가지고 있기 때문에 똑같은 코드를 반복적으로 입력할 필요가 없어 비교적 효율적이다. 컴포넌트의 종류는 클래스형과 함수형으로 나누어 진다!

Component의 종류(클래스형, 함수형)

클래스형 컴포넌트 : React.Componet 클래스를 상속 받아 구현 함수형 컴포넌트 : 함수로 구현

컴포넌트는 다른 컴포넌트를 포함할 수 있으며, 부모-자식 관계를 가진다 부모 컴포넌트는 자식 컴포넌트에게 props라는 속성을 전달 할 수 있다. 자식 컴포넌트는 props를 통해 전달받은 값을 사용하여 UI를 렌더링 한다.

fragment

리액트 컴포넌트는 딱 하나의 요소만 반환할 수 있다 여러 요소를 반환하고 싶은 때는 부모 요소로 묶어준다.

이때 사용하는 것이 fragment(<></>) 반환 요소를 감쌀 때 사용하고 해석이 되지 않는다❗

클래스형 컴포넌트 활용하기(Exam1.js)

💗_클래스형 컴포넌트 만들기_💗

1. Component 상속 만들기
2. render() 함수 작성하기(필수)
3. 만든 class를 export default 지정하기 (내보내기) -> 다른 곳에서 import받을 수 있음

화면에 버튼을 누르면 1씩 Count가 증가되는 화면을 만들 것이다!

import React, { Component } from 'react'; 상속 받으려고 react 패키지에서 가지고 오는거 겠지..???

import React, { Component } from 'react';
// node-moduls 폴더에 있는 React 패키지를 가져옴 


class Exam1 extends Component{

    constructor(props){
        super(props);
        this.state = { count : 0 };
    }

    handleClick = () => {
        this.setState({ count : this.state.count + 1 });
    }

    // 화면 렌더링 시 
    // render() 함수에서 반환된 값이 화면에 출력됨
    render(){
        return(
            <>
                <h2>클래스형 컴포넌트</h2>
                <h1>Count : {this.state.count}</h1>
                <button onClick = {this.handleClick}>Increment</button>
            </>
        );
    }
}

export default Exam1;

이 때 까지 html, js로 이벤트을 줬던 방법과 다르다❕ js에서는 아래와 같이 코드를 작성했었음

document.getElementById(버튼).addEventListener("click", ()=>{
        const count = document.getElementById(카운트);
        count.innerText = Number(count,innerText)+1;
}); 

➡️ React는 미리 사용할 함수를 변수로 지정해 두고 해당 함수를 사용해서 화면을 만들어 준다! 또한 분리하여 화면을 만들어 주기 때문에 재사용성 유지보수👍👍👍👍 이전 코드 스타일과 완전히 다름❕🥲🫧

함수형 컴포넌트 활용하기(Exam2.js)

💗_함수형 컴포넌트 만들기_💗

1. 함수생성하기
2. return 구문에 출력하고자 하는 html 코드 작성하기
3. 만든 함수를 export default 지정하기 (내보내기) -> 다른 곳에서 import받을 수 있음

화면에 버튼을 누르면 1씩 Count가 감소하는 화면을 만들 것이다!

import React, { useState } from 'react';

function Exam2(){

    const [count, setCount] = useState(100);
    // count 라는 변수에 초기 값 100대입
    // count 값(상태)을 변경 할 때 setCount 함수를 이용

    const handleClick = () => {
        setCount( () => { return count -1 })
    }

    return(
        <>
            <h2>함수형 컴포넌트</h2>
            <h1> Conut : { count }</h1>
            <button onClick={handleClick}>Decrement</button>
        </>
    );
}
export default Exam2

App.js로 만든 컴포넌트 추합하기❕❕❕❕

약간 이 친구가 mian.jsp같은 느낌,,,,이 든다. 안녕,,,

import시 동등한 위치로 가고 싶다면 ./ 사용해 주어야한다❗

import './App.css';

// components 폴더의Exam1.js 를 가져와서 사용
// 사용 할때 이름을 Ex1으로 지정
import Ex1 from './components/Exam1';
import Ex2 from './components/Exam2';

function App() {
  // 리엑트의 컴포넌트는 딱 하나의 요소만을 반환할 수 있다
  // -> 여러 요소를 반환하고 싶을 때는 부모 요소로 묶어 준다! 
  return (
    /*fragment(<></>) : 반화요소를 감쌀 때 사용, 해석 X*/
    <>
      {/* jsx 주석 */}
      <h1>Hello React!!</h1>

      <div>리엑트 배운다~~</div>

      <Ex1/>

      <Ex2/>
    </>
  );
}

export default App;

출력화면

⬇️버튼을 하나씩 눌러 보자❗

리액트 처음 다루어 보는데,,어색 그 자체,,💗

1. node.js > 18.17.1 LTS 다운로드 > 설치
   

2. 웹도우 검색창 > PowerShell창 관리자 권한으로 열기

3. PowerShell 창 node -v 입력 후 설치 및 버전 확인하기

4. get -help Set-ExecutionPolicy 명령어 실행 후 Y입력

5. Set-ExecutionPolicy RemoteSigned 명령어 실행후 Y입력

6. 원하는 파일 위치에 폴더 생성하기

7. 그 위치로 VS Code 에서 해당 폴더 여기 ctrl + shift + ` 으로 터미널 실행. 혹은 상단 메뉴바의 Terminal > new Terminal

8. 터미널에 npm install –global yarn 으로 전역으로 yarn 설치하기

   ++만약 여기서 실행 되지 않고 오류가 발생 한다면!

   [yarn 설치 안 될 때] 윈도우 검색창 - 시스템 환경변수 편집 - 고급 - 환경변수 - Path - 새로 만들기 - nodejs 폴더 경로 추가 - VS Code 재실행

9. yarn global add creat-react-app 으로 전역에서 creat-react-app 을 사용하게끔 명령 어 실행

10. npx create-react-app my-app 으로 my-app이라는 이름의 리액트 앱을 생성 [리엑트 앱 생성 에러 발생시] npx clear-npx-cache명령어로 캐시 클리어 후 진행

11. 리액트앱 생성 후 cd my-app 명령어로 내 리액 프로잭트로 경로 이동

12. npm start or yarn start명령어로 프로 젝트 실행시키기

    http://localhost:3000/ 접속 ( 자동실행 된다 )

    

!문제점! 프로젝트 서버에 일정 시간마다 파일 업뎃하기!

현재 진행 중인 서버의 images 파일에는 board 파일과 member파일이 있고 위의 폴더에는 사진이 게시글 사진과 프로필 사진이 각각 저장되어 있다. 그러나, 게시글 목록과 프로필이미지에서 사진을 수정 삭제 할 경우에 DB에는 변경된 사항들이 UPDATE와 DELETE을 통해 변경이 되지만 서버에는 변경 되지 않고 그대로 남아 있는 모습을 보인다.

202308145419_31115.png , 202308145419_95983.png 이 두 파일은 DB에 없는 사진 파일이다! 그런데 서버에는 존재하고 board파일에 쌓이는 중..^^ 재거해 보자!

이때 사용할 수 있는 기능

🚩** @Schedulrd ** Spring에서 제공하는 스케줄러로 시간에 따른 특정 작업의 순서를 저장하는 방법이다!

📍 @Scheduling 설정하기

@Scheduling 사용하기 위해서는 아래와 같이 설정하는 과정 이 필요하다

• 1) servlet-context.xml -> Namespaces 탭 -> task 체크 후 저장
• 2) servlet-context.xml -> Source 탭 -> task:annotation-driven/ 추가

📍 @Scheduled 속성

• fixedDelay : 이전 작업이 끝난 시점으로 부터 고정된 시간(ms)을 설정. @Scheduled(fixedRate = 10000) // 이전 작업이 시작된 후 10초 뒤에 실행

  • fixedRate : 이전 작업이 수행되기 시작한 시점으로 부터 고정된 시간(ms)을 설정. @Scheduled(fixedDelay = 10000) // 이전 작업이 끝난 후 10초 뒤에 실행

  • cron 속성 : UNIX계열 잡 스케쥴러 표현식으로 작성 - cron="초 분 시 일 월 요일 [년도]" - 요일 : 1(SUN) ~ 7(SAT) ex) 2019년 9월 16일 월요일 10시 30분 20초 cron="20 30 10 16 9 2 " // 연도 생략 가능

  • 특수문자 * : 모든 수. - : 두 수 사이의 값. ex) 10-15 -> 10이상 15이하 , : 특정 값 지정. ex) 3,4,7 -> 3,4,7 지정 / : 값의 증가. ex) 0/5 -> 0부터 시작하여 5마다 ? : 특별한 값이 없음. (월, 요일만 해당) L : 마지막. (월, 요일만 해당)

  • @Scheduled(cron="0 * * * * *") // 매 분마다 실행

🫧 코드 작성해보자!

💗ImageDeleteScheduling.java

package edu.kh.project.common.scheduling;

import java.io.File;
import java.util.Arrays;
import java.util.List;

import javax.servlet.ServletContext;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.scheduling.annotation.Scheduled;
import org.springframework.stereotype.Component;

import edu.kh.project.board.model.service.BoardService;

// 스프링이 일정 시간 마다 해당 객체를 이용해서 코드를 수행
// == 스프링이 해당 클래스를 만들어서 관리를 해야한다
// == Bean으로 등록

@Component // @Controller, @Service, @Repository의 부모 어노테이션
            // Bean 등록을 하겠다고 명시하는 어노테이션
public class ImageDeleteScheduling {

    @Autowired
    private ServletContext servletContext;

    @Autowired
    private BoardService service;

    //@Scheduled(fixedDelay = 10000) // ms단위
    // 일(5초) -> 10초 대기 -> 일(5초) -> 10초 대기

    //@Scheduled(fixedRate = 10000) 
    // 일(5초)
    // 대기(10초)

    //cron ="초 분 시 일 월 요일 [년도]"
    //@Scheduled(cron ="0,30 * * * * *")
    @Scheduled(cron = "0 0 * * * *") // 매 정시 (*시 0분 0초)
    public void test() {
        //System.out.println("스케줄러가 일정시간마자 자동으로 출력");

        System.out.println("----------게시판 DB, 서버가 불일치하는 파일 제거------------");

        // 서버에 저장된 파일 목록을 조회해서
        // DB에 저장된 파일 목록과 비교하여
        // 매칭되지 않는 서버 파일 제거


        // 1) 서버에 저장된 파일 목록 조회
        // -> application객체를 이용해서 
        //         /resources/images/board의 실제 서버 경로를 얻어옴
        String filePath= servletContext.getRealPath("/resources/images/board");
        // C:\workspace\6_Framework\boardProject\src\main\webapp\resources\images\board

        // 2)filePath네 저장된 모든 파일 경로 읽어오기
        File path = new File(filePath);
        File[] imageArr = path.listFiles();

        // 배열 -> List로 변환
        List<File> serverImageList = Arrays.asList(imageArr);


        /* // 확인(임시)
        for(File f :serverImageList) {
            System.out.println(f.toString());
        }*/

        // 3) DB 파일 목록 비교
        List<String> dbImageList = service.selectImageList();


        /*// 확인(임시)
        for(String s :dbImageList) {
            System.out.println(s);
        }*/

        // 4) 서버에 파일 목록이 있을 경우에 비교 시작
        if(!serverImageList.isEmpty()) {

            // 5) 서버 파일 목록 순차접근
            for(File server : serverImageList) {

                // 6) 서버에서 존재하는 파일이 
                //  DB(dbImageList)에 없다면 삭제

                //String[] temp =  server.toString().split("\\");
                //String s = temp[temp.length-1];

                //System.out.println(s);
                // C:\workspace\6_Framework\boardProject\src\main\webapp\resources\images\board\20230821141913_00001.png

                // getName() - spilt을 쓰지 않아도 
                // System.out.println(server.getName());

                //List.indexOf(객체) = 객체가 List에 있으면 인덱스 반환
                //                      없으면 -1반환

                if(dbImageList.indexOf(server.getName()) == -1){
                    //db파일 목록             서버 파일 이름

                    System.out.println(server.getName() + "삭제");
                    server.delete(); //File.delete() : 파일 삭제
                }
            } // for문 종료
             System.out.println("-----------이미지 파일 삭제 스케줄러 종료----------------");

        }
    }

}

일정시간이 지나면 알아서 사진 파일 업뎃하고 삭제한다!

이전에 구현한 게시글 목록 조회에 참고해서 추가 기능을 넣어 볼 예정이다 .

🫧 boardList.jsp

         <%-- 검색을 진행한 경우 파라미터 (key,query)를
            쿼리스트링 태로 저장한 변수  --%>
        <c:if test="${!empty param.key}" >
            <c:set var="search" value="&key=${param.key}&query=${param.query}"/>
        </c:if>


         <div class="pagination-area">


                <ul class="pagination">

                    <!-- 첫 페이지로 이동 -->
                    <li><a href="/board/${boardCode}?cp=1${search}">&lt;&lt;</a></li>

                    <!-- 이전 목록 마지막 번호로 이동 -->
                    <li><a href="/board/${boardCode}?cp=${pagination.prevPage}${search}">&lt;</a></li>


                    <!-- 특정 페이지로 이동 -->
                    <c:forEach var="i" begin="${pagination.startPage}"
                                end="${pagination.endPage}" step="1">
                        <c:choose>
                           <c:when test="${i== pagination.currentPage}">
                                <!-- 현재 보고있는 페이지 -->
                                <li><a class="current">${i}</a></li>
                           </c:when>

                           <c:otherwise>
                                <!-- 현재 페이지를 제외한 나머지 -->
                                <li><a href="/board/${boardCode}?cp=${i}${search}">${i}</a></li>
                           </c:otherwise>
                        </c:choose>
                    </c:forEach>

                    <!-- 다음 목록 시작 번호로 이동 -->
                    <li><a href="/board/${boardCode}?cp=${pagination.nextPage}${search}">&gt;</a></li>

                    <!-- 끝 페이지로 이동 -->
                    <li><a href="/board/${boardCode}?cp=${pagination.maxPage}${search}">&gt;&gt;</a></li>

                </ul>
            </div>




            <!-- 검색창 -->
            <form action="${boardCode}" method="get" id="boardSearch">

                <select name="key" id="searchKey">
                    <option value="t">제목</option>
                    <option value="c">내용</option>
                    <option value="tc">제목+내용</tion>
                    <option value="w">작성자</option>
                </select>

                <input type="text" name="query"  id="searchQuery" placeholder="검색어를 입력해주세요.">

                <button>검색</button>
            </form>

🫧 boardList.java

// 검색창 이전의 기록 남겨 놓기 
const boardSearch = document.querySelector("#boardSearch");
const searchKey = document.querySelector("#searchKey");
const searchQuery = document.querySelector("#searchQuery");
const options = document.querySelectorAll("#searchKey > option");

(()=>{
    const params = new URL(location.href).searchParams;
    const key = params.get("key"); //t,c,tc,w중  하나
    const query = params.get("query"); // 검색어

    if(key != null){ // 검색을 했을 때
        searchQuery.value=query; // 검색어를 화면에 출력 

        // option태그를 하나씩 순차접근해서 value가 key랑 같으면
        // selected속성 추가
        for(let op of options){
            if(op.value == key){
                op.selected = true;
            }

        }
    }
})();

//검색어 없이 제출된 경우 
boardSearch.addEventListener("submit", e =>{
    if(searchQuery.value.trim().length == 0){
        e.preventDefault();

        location.pathname//해당게시판 1페이지로 이동 

        //location.pathname : 쿼리스트링을 제외한 실제 주소
    }
})

🫧 boardController.java

if문으로 게시글 검색이 있을 경우와 없을 경우를 만들어 주었다

    //게시글 목록 조회
    @GetMapping("/{boardCode:[0-9]+}") // boardCode는 1자리 이상 숫자
    public String selectBoardList(@PathVariable("boardCode") int boardCode
            , @RequestParam(value="cp", required = false, defaultValue = "1") int cp
            , Model model
            , @RequestParam Map<String, Object> paramMap //파라미터가 전부다 담겨 있음 
            ) {

        // boardCode 확인
        //System.out.println("boardCode: "+ boardCode);

        if( paramMap.get("key") == null ) {//검색어가 없을 때 

            // 게시글을 목록 조회하는 service호출 
            Map<String, Object> map = service.selectBoardList(boardCode, cp);

            //조회 결과를 request scope에 세팅 후 forward
            model.addAttribute("map", map);

        }else { //검색어가 있다 (검색 O)

            paramMap.put("boardCode", boardCode);

            Map<String , Object> map = service.selectBoardList(paramMap, cp);

            model.addAttribute("map", map);
        }
        return "board/boardList";
    }

🫧 boardService.java

    /** 검색어를 통한 게시글 목록 조회(검색)
     * @param paramMap
     * @param cp
     * @return boardList
     */
    Map<String, Object> selectBoardList(Map<String, Object> paramMap, int cp);

🫧 boardServiceImpl.java

매개변수의 자료형이 달라서 overlodding되어 메소드 사용할 수 있다!

    // 게시글 목록 조회 (검색)
    @Override
    public Map<String, Object> selectBoardList(Map<String, Object> paramMap, int cp) {

        // 1. 특정 게시판에 삭제되지 않고 검색 조건이 일치하는 게시글 수 조회
        int listCount = dao.getListCount(paramMap);

        // 2. 1번 조회 결과 + cp를 이용해서 Pagination 객체 생성
        // -> 내부에 필드가 모두 계산 되어서 초기화 됨
        Pagination pagination = new Pagination(cp, listCount);


        // 3. 특정게시판에서
        // 현재 페이지에 해당하는 게시글 목록 조회
        // + 단, 검색 조건이 일치하는 글만 
        List<Board> boardList = dao.selectBoardList(pagination, paramMap);

        // 4. paginatio, boardList를 Map에 담아서 반환
        Map<String, Object> map = new HashMap<String, Object>();

        map.put("pagination", pagination);
        map.put("boardList", boardList);

        return map;
    }

🫧 boardDAO.java

    /** 게시글 수 조회(검색)
     * @param paramMap
     * @return listCount
     */
    public int getListCount(Map<String, Object> paramMap) {
        return sqlSession.selectOne("boardMapper.getListCount_search", paramMap);
    }


    /** 게시글 목록 조회(검색)
     * @param pagination
     * @param paramMap
     * @return boardList
     */
    public List<Board> selectBoardList(Pagination pagination, Map<String, Object> paramMap) {

        // 1) offset 계산
        int offset 
        = (pagination.getCurrentPage() -1) * pagination.getLimit();

        // 2) Row Bounds객체 생성
        RowBounds rowBounds = new RowBounds(offset, pagination.getLimit());

        // 3) selectList("namespace.id", 파라미터, Rowbounds)호출
        return sqlSession.selectList("boardMapper.selectBoardList_search", paramMap, rowBounds);
    }

🫧 board-mapper.xml

동적 SQL사용을 사용하여 조회해 보았다(if, choose,CDATA)

    <!-- 특정게시판에 삭제되지 않고 검색 조건에 일치하는 게시글 수 조회 -->
    <select id="getListCount_search"  resultType="_int">
        SELECT COUNT(*)
        FROM BOARD

        <!-- 작성자 검색일 경우 -->
        <if test='key=="w"'>
            JOIN MEMBER USING(MEMBER_NO)
        </if>

        WHERE BOARD_DEL_FL = 'N'
        AND BOARD_CODE = #{boardCode}


        <choose>
            <when test='key== "t"'>
                <!-- 제목 -->
                AND BOARD_TITLE LIKE '%${query}%'
            </when>
            <when test='key=="c"'>
                <!-- 내용 -->
                AND BOARD_CONTENT LIKE '%${query}%'
            </when>
            <when test='key=="tc"'>
                <!-- 제목 + 내용 -->
                AND (BOARD_TITLE LIKE '%${query}%' OR BOARD_CONTENT LIKE '%${query}%')
            </when>
            <when test='key=="w"'>
                <!-- 작성자(닉네임) -->
                AND MEMBER_NICKNAME LIKE '%#{query}%'            
            </when>
        </choose>        
    </select>

    <!-- CDATA 태그 : 해당 태그 내부에 작성된 것은 모두 문자로 취급-->
    <!-- 게시글 목록 조회 -->
    <select id="selectBoardList_search" resultMap="board_rm">
        SELECT BOARD_NO, BOARD_TITLE, MEMBER_NICKNAME, READ_COUNT, 

         <![CDATA[
            CASE  
               WHEN SYSDATE - B_CREATE_DATE < 1/24/60
               THEN FLOOR( (SYSDATE - B_CREATE_DATE) * 24 * 60 * 60 ) || '초 전'
               WHEN SYSDATE - B_CREATE_DATE < 1/24
               THEN FLOOR( (SYSDATE - B_CREATE_DATE) * 24 * 60) || '분 전'
               WHEN SYSDATE - B_CREATE_DATE < 1
               THEN FLOOR( (SYSDATE - B_CREATE_DATE) * 24) || '시간 전'
               ELSE TO_CHAR(B_CREATE_DATE, 'YYYY-MM-DD')
            END B_CREATE_DATE,
         ]]>

         (SELECT COUNT(*) FROM "COMMENT" C
          WHERE C.BOARD_NO = B.BOARD_NO) COMMENT_COUNT,

         (SELECT COUNT(*) FROM BOARD_LIKE L
          WHERE L.BOARD_NO = B.BOARD_NO) LIKE_COUNT,

         (SELECT IMG_PATH || IMG_RENAME FROM BOARD_IMG I
         WHERE I.BOARD_NO = B.BOARD_NO
         AND IMG_ORDER = 0) THUMBNAIL
      FROM "BOARD" B
      JOIN "MEMBER" USING(MEMBER_NO)
      WHERE BOARD_DEL_FL = 'N'
      AND BOARD_CODE = #{boardCode}

      <choose>
            <when test='key== "t"'>
                <!-- 제목 -->
                AND BOARD_TITLE LIKE '%${query}%'
            </when>
            <when test='key=="c"'>
                <!-- 내용 -->
                AND BOARD_CONTENT LIKE '%${query}%'
            </when>
            <when test='key=="tc"'>
                <!-- 제목 + 내용 -->
                AND (BOARD_TITLE LIKE '%${query}%' OR BOARD_CONTENT LIKE '%${query}%')
            </when>
            <when test='key=="w"'>
                <!-- 작성자(닉네임) -->
                AND MEMBER_NICKNAME LIKE '%#{query}%'            
            </when>
        </choose>

      ORDER BY BOARD_NO DESC
    </select>

게시판에 아래와 같이 댓글과 그 댓글 의 답글을 다는 코드를 구현해 보려고 한다. 결과 화면은 아래와 같다

🫧DB 데이터 입력

기능 구현에 필요한 더미 데이터를 입력해 보자

현재 게시글 번호가 '1506'인 게시글에는 댓글이 없다 댓글을 넣어주자

SELECT COMMENT_NO, COMMENT_CONTENT,
    TO_CHAR(C_CREATE_DATE, 'YYYY"년" MM"월" DD"일" HH24"시" MI"분" SS"초"')C_CREATE_DATE,
    BOARD_NO, MEMBER_NO, MEMBER_NICKNAME, PROFILE_IMG, PARENT_NO, COMMENT_DEL_FL
FROM "COMMENT"
JOIN MEMBER USING(MEMBER_NO)
WHERE BOARD_NO = 1506
ORDER BY COMMENT_NO;

부모 댓글 2개 INSERT하기

INSERT INTO "COMMENT"
VALUES(SEQ_COMMENT_NO.NEXTVAL, '부모 댓글1', DEFAULT, DEFAULT, 1506, 1, NULL);
INSERT INTO "COMMENT"                                     -- 
VALUES(SEQ_COMMENT_NO.NEXTVAL, '부모 댓글2', DEFAULT, DEFAULT, 1506, 1, NULL);

하위 자식 댓글 INSERT하기

INSERT INTO "COMMENT"                                     -- 게시글, 회원
VALUES(SEQ_COMMENT_NO.NEXTVAL, '자식 댓글1-1', DEFAULT, DEFAULT, 1506, 1, 1022);
INSERT INTO "COMMENT"                                     -- 게시글, 회원
VALUES(SEQ_COMMENT_NO.NEXTVAL, '자식 댓글1-2', DEFAULT, DEFAULT, 1506, 1, 1022);
INSERT INTO "COMMENT"                                     -- 게시글, 회원
VALUES(SEQ_COMMENT_NO.NEXTVAL, '자식 댓글1-3', DEFAULT, DEFAULT, 1506, 1, 1022);
---------------------------
INSERT INTO "COMMENT"                                     -- 게시글, 회원
VALUES(SEQ_COMMENT_NO.NEXTVAL, '자식 댓글2-1', DEFAULT, DEFAULT, 1506, 1, 1023);
INSERT INTO "COMMENT"                                     -- 게시글, 회원
VALUES(SEQ_COMMENT_NO.NEXTVAL, '자식 댓글2-2', DEFAULT, DEFAULT, 1506, 1, 1023);
INSERT INTO "COMMENT"                                     -- 게시글, 회원
VALUES(SEQ_COMMENT_NO.NEXTVAL, '자식 댓글2-3', DEFAULT, DEFAULT, 1506, 1, 1023);

🫧DB입력이 끝났으면 조회을 해보자!

*계층형 쿼리 조회하기 * 계층형 쿼리(START WITH, CONNECT BY, ORDER SIBLINGS BY) - 상위 타입과 하위 타입간의 관계를 계층식으로 표현 할 수 있게 하는 질의어(SELECT)
- START WITH : 상위 타입(최상위 부모)으로 사용될 행을 지정 (서브쿼리로 지정 가능)
- CONNECT BY -> 상위 타입과 하위 타입 사이의 관계를 규정 -> PRIOR(이전의) 연산자와 같이 사용하여 현재 행 이전에 상위 타입 또는 하위 타입이 있을지 규정
1) 부모 -> 자식 계층 구조 CONNECT BY PRIOR 자식 컬럼 = 부모 컬럼 2) 자식 -> 부모 계층 구조 CONNECT BY PRIOR 부모 컬럼 = 자식 컬럼
- ORDER SIBLINGS BY : 계층 구조 정렬
** 계층형 쿼리가 적용 SELECT 해석 순서 **
5 : SELECT 1 : FROM (+JOIN) 4 : WHERE 2 : START WITH 3 : CONNECT BY 6 : ORDER SIBLINGS BY

- WHERE절의 계층형 쿼리 보다 순서가 늦기 때문에 먼저 조건을 반영하고 싶은 경우 FROM절 서브쿼리(인라인뷰)을 이용

     SELECT LEVEL, C.* FROM 
      (SELECT COMMENT_NO, COMMENT_CONTENT,
          TO_CHAR(C_CREATE_DATE, 'YYYY"년" MM"월" DD"일" HH24"시" MI"분" SS"초"')C_CREATE_DATE,
          BOARD_NO, MEMBER_NO, MEMBER_NICKNAME, PROFILE_IMG, PARENT_NO, COMMENT_DEL_FL
      FROM "COMMENT"
      JOIN MEMBER USING(MEMBER_NO)
      WHERE BOARD_NO = 1507) C
      WHERE COMMENT_DEL_FL='N'
      START WITH PARENT_NO IS NULL
      CONNECT BY PRIOR COMMENT_NO= PARENT_NO 
      ORDER SIBLINGS BY COMMENT_NO
;

🫧VS Code

💗comment.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>

<div id="commentArea">
    <!-- 댓글 목록 -->
    <div class="comment-list-area">

        <ul id="commentList">

            <c:forEach items="${board.commentList}" var="comment">
                <!-- 부모/자식 댓글 -->
                <li class="comment-row <c:if test='${comment.parentNo !=0 }'>child-comment</c:if>">
                    <p class="comment-writer">

                        <!-- 프로필 이미지 -->
                        <c:if test="${empty comment.profileImage}" >
                            <%-- 없을 경우 --%>
                            <img src="/resources/images/user.png">
                        </c:if>
                        <c:if test="${!empty comment.profileImage}" >
                            <%-- 있을 경우 --%>
                            <img src="${comment.profileImage}">
                        </c:if>

                        <!-- 닉네임 -->
                        <span>${comment.memberNickname}</span>

                        <!-- 작성일 -->
                        <span class="comment-date"></span>
                    </p>

                    <!-- 댓글 내용 -->
                    <p class="comment-content">${comment.commentContent}</p>




                    <!-- 버튼 영역 -->
                    <div class="comment-btn-area">
                        <button onclick="showInsertComment(${comment.commentNo},this)">답글</button>   

                        <!-- 로그인 회원과 댓글 작성자가 같은 경우 -->  
                        <c:if test="${loginMember.memberNo == comment.memberNo}" >
                            <button onclick="showUpdateComment(${comment.commentNo},this)">수정</button>     
                            <button onclick="deleteComment(${comment.commentNo})">삭제</button>
                        </c:if>
                    </div>
                </li>
            </c:forEach>


        </ul>
    </div>

    <!-- 댓글 작성 부분 -->
    <div class="comment-write-area">
        <textarea id="commentContent"></textarea>
        <button id="addComment">
            댓글<br>
            등록
        </button>

    </div>

</div>

💗comment.js

// 댓글 목록 조회
function selectCommentList(){

    // REST(REpresentational State Transfer) API
    // - 자원을 이름으로 구분(Repersentational)하여
    //   자원의 상태(State)을 주고 받는 것(Transfer)

    // -> 주소를 명시하고 
    // http Method(GET, POST, DELETE)를 이용해
    // 지정된 자원에 대한 CRUD 진행

    // Create : 생성 (POST)
    // Read   : 조회 (GET)
    // Update : 수정 (PUT,PETCH)
    // Delete : 삭제 (DELETE)

    // 기본적으로 form 태그 GET/POST만 지원


    fetch("/comment?boardNo="+ boardNo) //GET방식은 주소에 파라미터를 담아서 전달
    .then(response => response.json()) // 응답 객체 -> 파싱
    .then(cList => {  // cList :댓글 목록 (객체 배열)
        console.log(cList);

        // 화면에 출력되어 있는 댓글 목록 삭제
        const commentList = document.getElementById("commentList"); // ul태그
        commentList.innerHTML = "";

        // cList에 저장된 요소를 하나씩 접근
        for(let comment of cList){

            // 행
            const commentRow = document.createElement("li");
            commentRow.classList.add("comment-row");

            // 답글일 경우 child-comment 클래스 추가
            if(comment.parentNo != 0)  commentRow.classList.add("child-comment");


            // 작성자
            const commentWriter = document.createElement("p");
            commentWriter.classList.add("comment-writer");

            // 프로필 이미지
            const profileImage = document.createElement("img");

            if( comment.profileImage != null ){ // 프로필 이미지가 있을 경우
                profileImage.setAttribute("src", comment.profileImage);
            }else{ // 없을 경우 == 기본이미지
                profileImage.setAttribute("src", "/resources/images/user.png");
            }

            // 작성자 닉네임
            const memberNickname = document.createElement("span");
            memberNickname.innerText = comment.memberNickname;

            // 작성일
            const commentDate = document.createElement("span");
            commentDate.classList.add("comment-date");
            commentDate.innerText =  "(" + comment.commentCreateDate + ")";

            // 작성자 영역(p)에 프로필,닉네임,작성일 마지막 자식으로(append) 추가
            commentWriter.append(profileImage , memberNickname , commentDate);



            // 댓글 내용
            const commentContent = document.createElement("p");
            commentContent.classList.add("comment-content");
            commentContent.innerHTML = comment.commentContent;

            // 행에 작성자, 내용 추가
            commentRow.append(commentWriter, commentContent);


            // 로그인이 되어있는 경우 답글 버튼 추가
            if(loginMemberNo != ""){
                // 버튼 영역
                const commentBtnArea = document.createElement("div");
                commentBtnArea.classList.add("comment-btn-area");

                // 답글 버튼
                const childCommentBtn = document.createElement("button");
                childCommentBtn.setAttribute("onclick", "showInsertComment("+comment.commentNo+", this)");
                childCommentBtn.innerText = "답글";

                // 버튼 영역에 답글 버튼 추가
                commentBtnArea.append(childCommentBtn);

                // 로그인한 회원번호와 댓글 작성자의 회원번호가 같을 때만 버튼 추가
                if( loginMemberNo == comment.memberNo   ){

                    // 수정 버튼
                    const updateBtn = document.createElement("button");
                    updateBtn.innerText = "수정";

                    // 수정 버튼에 onclick 이벤트 속성 추가
                    updateBtn.setAttribute("onclick", "showUpdateComment("+comment.commentNo+", this)");                        


                    // 삭제 버튼
                    const deleteBtn = document.createElement("button");
                    deleteBtn.innerText = "삭제";
                    // 삭제 버튼에 onclick 이벤트 속성 추가
                    deleteBtn.setAttribute("onclick", "deleteComment("+comment.commentNo+")");                       


                    // 버튼 영역 마지막 자식으로 수정/삭제 버튼 추가
                    commentBtnArea.append(updateBtn, deleteBtn);

                } // if 끝


                // 행에 버튼영역 추가
                commentRow.append(commentBtnArea); 
            }


            // 댓글 목록(ul)에 행(li)추가
            commentList.append(commentRow);
        }


    })
    .catch(err => console.log(err));

}


//-------------------------------------------------------------------------------------------------


// 댓글 등록
const addComment = document.getElementById("addComment");
const commentContent = document.getElementById("commentContent");

addComment.addEventListener("click", e => { // 댓글 등록 버튼이 클릭이 되었을 때

    // 1) 로그인이 되어있나? -> 전역변수 memberNo 이용
    if(loginMemberNo == ""){ // 로그인 X
        alert("로그인 후 이용해주세요.");
        return;
    }

    // 2) 댓글 내용이 작성되어있나?
    if(commentContent.value.trim().length == 0){ // 미작성인 경우
        alert("댓글을 작성한 후 버튼을 클릭해주세요.");

        commentContent.value = ""; // 띄어쓰기, 개행문자 제거
        commentContent.focus();
        return;
    }

    // 3) AJAX를 이용해서 댓글 내용 DB에 저장(INSERT)

    const data={ "commentContent"  : commentContent.value
                , "memberNo"       : loginMemberNo
                , "boardNo"        : boardNo}; //JS객체

    fetch("/comment", {
         method: "POST"
        ,headers:{"Content-Type": "application/json"}
        ,body : JSON.stringify(data) //JS객체 -> JSON으로 파싱
    })
    .then(resp => resp.text())
    .then(result => {
        if(result > 0){ // 등록 성공
            alert("댓글이 등록되었습니다.");

            commentContent.value = ""; // 작성했던 댓글 삭제

            selectCommentList(); // 비동기 댓글 목록 조회 함수 호출
            // -> 새로운 댓글이 추가되어짐

        } else { // 실패
            alert("댓글 등록에 실패했습니다...");
        }
    })
    .catch(err => console.log(err));
});


// -----------------------------------------------------------------------------------
// 댓글 삭제
function deleteComment(commentNo){

    if( confirm("정말로 삭제 하시겠습니까?") ){

        fetch("/comment",{
            method: "DELETE"
            ,headers: {"Content-Type": "application/json"}
            ,body : commentNo //값을 하나만 전달시 JSON 필요없음

        })
        .then(resp => resp.text())
        .then(result => {
            if(result > 0){
                alert("삭제되었습니다");
                selectCommentList(); // 목록을 다시 조회해서 삭제된 글을 제거
            }else{
                alert("삭제 실패");
            }
        })
        .catch(err => console.log(err));

    }
}




// ------------------------------------------------------------------------------------------
// 댓글 수정 화면 전환 

let beforeCommentRow; // 수정 전 원래 행의 상태를 저장할 변수


function showUpdateComment(commentNo, btn){
                     // 댓글번호, 이벤트발생요소(수정버튼)

    // ** 댓글 수정이 한 개만 열릴 수 있도록 만들기 **
    // 댓글 수정을 위한 textarea를 모두 얻어옴 -> 수정이 활성화 되어 있을 경우 1개, 없으면 0개
    const temp = document.getElementsByClassName("update-textarea");  

    if(temp.length > 0){ // 수정이 한 개 이상 열려 있는 경우

        if(confirm("다른 댓글이 수정 중입니다. 현재 댓글을 수정 하시겠습니까?")){ // 확인

            temp[0].parentElement.innerHTML = beforeCommentRow;
            // comment-row                       // 백업한 댓글
            // 백업 내용으로 덮어 씌워 지면서 textarea 사라짐

        }else{ // 취소
            return;
        }
    }


    // 1. 댓글 수정이 클릭된 행을 선택
    const commentRow = btn.parentElement.parentElement; // 수정 버튼의 부모의 부모

    // 2. 행 내용 삭제 전 현재 상태를 저장(백업) (문자열)
    //    (전역변수 이용)
    beforeCommentRow = commentRow.innerHTML;


    // 3. 댓글에 작성되어 있던 내용만 얻어오기 -> 새롭게 생성된 textarea 추가될 예정

    let beforeContent = commentRow.children[1].innerHTML;

    // 이것도 가능!
    //let beforeContent = btn.parentElement.previousElementSibling.innerHTML;


    // 4. 댓글 행 내부 내용을 모두 삭제
    commentRow.innerHTML = "";

    // 5. textarea 요소 생성 + 클래스 추가  +  **내용 추가**
    const textarea = document.createElement("textarea");
    textarea.classList.add("update-textarea");

    // ******************************************
    // XSS 방지 처리 해제
    beforeContent =  beforeContent.replaceAll("&", "&");
    beforeContent =  beforeContent.replaceAll("&lt;", "<");
    beforeContent =  beforeContent.replaceAll("&gt;", ">");
    beforeContent =  beforeContent.replaceAll("&quot;", "\"");

    // ******************************************
    textarea.value = beforeContent; // 내용 추가

    // 6. commentRow에 생성된 textarea 추가
    commentRow.append(textarea);


    // 7. 버튼 영역 + 수정/취소 버튼 생성
    const commentBtnArea = document.createElement("div");
    commentBtnArea.classList.add("comment-btn-area");


    const updateBtn = document.createElement("button");
    updateBtn.innerText = "수정";
    updateBtn.setAttribute("onclick", "updateComment("+commentNo+", this)");


    const cancelBtn = document.createElement("button");
    cancelBtn.innerText = "취소";
    cancelBtn.setAttribute("onclick", "updateCancel(this)");


    // 8. 버튼영역에 버튼 추가 후 
    //    commentRow(행)에 버튼영역 추가
    commentBtnArea.append(updateBtn, cancelBtn);
    commentRow.append(commentBtnArea);

}


// -----------------------------------------------------------------------------------
// 댓글 수정 취소
function updateCancel(btn){
    // 매개변수 btn : 클릭된 취소 버튼
    // 전역변수 beforeCommentRow : 수정 전 원래 행(댓글)을 저장한 변수

    if(confirm("댓글 수정을 취소하시겠습니까?")){
        btn.parentElement.parentElement.innerHTML = beforeCommentRow;
    }
}

// -----------------------------------------------------------------------------------
// 댓글 수정(AJAX)
function updateComment(commentNo, btn){

    // 새로 작성된 댓글 내용 얻어오기
    const commentContent = btn.parentElement.previousElementSibling.value;

    const data= {
        "commentNo": commentNo,
        "commentContent": commentContent
    }

    fetch("/comment",{
        method: "PUT",
        headers : {"Content-Type" : "application/json"}
        ,body: JSON.stringify(data)
    })
    .then(resp => resp.text())
    .then(result => {
        if(result > 0){
            alert("댓글이 수정되었습니다.");
            selectCommentList();
        }else{
            alert("댓글 수정 실패");
        }
    })
    .catch(err => console.log(err));

}

// -------------------------------------------------------------------------------
// -------------------------------------------------------------------------------

// 답글 작성 화면 추가 
// -> 답글 작성 화면은 전체 화면에 1개만 존재 해야한다!

function showInsertComment(parentNo, btn){
                        // 부모 댓글 번호, 클릭한 답글 버튼


    // ** 답글 작성 textarea가 한 개만 열릴 수 있도록 만들기 **
    const temp = document.getElementsByClassName("commentInsertContent");

    if(temp.length > 0){ // 답글 작성 textara가 이미 화면에 존재하는 경우

        if(confirm("다른 답글을 작성 중입니다. 현재 댓글에 답글을 작성 하시겠습니까?")){
            temp[0].nextElementSibling.remove(); // 버튼 영역부터 삭제
            temp[0].remove(); // textara 삭제 (기준점은 마지막에 삭제해야 된다!)

        } else{
            return; // 함수를 종료시켜 답글이 생성되지 않게함.
        }
    }

    // 답글을 작성할 textarea 요소 생성
    const textarea = document.createElement("textarea");
    textarea.classList.add("commentInsertContent");

    // 답글 버튼의 부모의 뒤쪽에 textarea 추가
    // after(요소) : 뒤쪽에 추가
    btn.parentElement.after(textarea);


    // 답글 버튼 영역 + 등록/취소 버튼 생성 및 추가
    const commentBtnArea = document.createElement("div");
    commentBtnArea.classList.add("comment-btn-area");


    const insertBtn = document.createElement("button");
    insertBtn.innerText = "등록";
    insertBtn.setAttribute("onclick", "insertChildComment("+parentNo+", this)");


    const cancelBtn = document.createElement("button");
    cancelBtn.innerText = "취소";
    cancelBtn.setAttribute("onclick", "insertCancel(this)");

    // 답글 버튼 영역의 자식으로 등록/취소 버튼 추가
    commentBtnArea.append(insertBtn, cancelBtn);

    // 답글 버튼 영역을 화면에 추가된 textarea 뒤쪽에 추가
    textarea.after(commentBtnArea);

}


// 답글 취소
function insertCancel(btn){
                    // 취소
    btn.parentElement.previousElementSibling.remove(); // 취소의 부모의 이전 요소(textarea) 제거
    btn.parentElement.remove(); // 취소의 부모 요소(comment-btn-area) 제거
}


// 답글 등록
function insertChildComment(parentNo, btn){
                        // 부모 댓글 번호, 답글 등록 버튼

    // 누가?                loginMemberNo(로그인한 회원의 memberNo )(전역변수)
    // 어떤 내용?           textarea에 작성된 내용
    // 몇번 게시글?         현재 게시글 boardNo (전역변수)
    // 부모 댓글은 누구?    parentNo (매개변수)

    // 답글 내용
    const commentContent = btn.parentElement.previousElementSibling.value;

    // 답글 내용이 작성되지 않은 경우
    if(commentContent.trim().length == 0){
        alert("답글 작성 후 등록 버튼을 클릭해주세요.");
        btn.parentElement.previousElementSibling.value = "";
        btn.parentElement.previousElementSibling.focus();
        return;
    }

    const data = {"commentContent": commentContent,
                "memberNo": loginMemberNo,
                "boardNo": boardNo,
                "parentNo": parentNo 
    }

    fetch("/comment",{
            method : "POST"
            , headers : {"Content-Type" : "application/json"}
            ,  body : JSON.stringify(data)
    })
    .then(resp => resp.text())
    .then(result => {
        if(result > 0){ // 등록 성공
            alert("답글이 등록되었습니다.");
            selectCommentList(); // 비동기 댓글 목록 조회 함수 호출

        } else { // 실패
            alert("답글 등록에 실패했습니다...");
        }
    })
    .catch(err => console.log(err));

}

🫧Spring

💗CommentController.java

package edu.kh.project.board.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;

import edu.kh.project.board.model.dto.Comment;
import edu.kh.project.board.model.service.CommentService;

//@Controller + @ResponseBody
@RestController  // 요청/응답 처리(단, 모든 요청 응답이 비동기)
                // -> REST API 구축하기 위한 Controller
public class CommentController {

    @Autowired
    private CommentService service;

    // 댓글 목록 조회
    @GetMapping(value = "/comment" , produces = "application/json; charset=UTF-8")
    @ResponseBody
    public List<Comment> select( @RequestParam("boardNo") int boardNo ) {
        return service.select(boardNo); // httpMessageconverter List -> JSON 변환
    }

    // 댓글 삽입
    @PostMapping("/comment")
    public int insert(@RequestBody Comment comment) {
        // 요청데이터(JSON)을
        // httpMessageConverter가 해석해서 JAVA객체(comment)에 대입
        return service.insert(comment);
    }

    //댓글 삭제 
    @DeleteMapping("/comment")
    public int delete( @RequestBody int commentNo ){
                        // ajax요청시 body에 담겨 있는 하나의 데이터는 
                        // 매개변수 int commentNo담기게 된다
        return service.delete(commentNo);
    }

    // 댓글 수정
    @PutMapping("/comment")
    public int update( @RequestBody Comment comment) {
        return service.update(comment);

    }
}

💗CommentService.java 인터페이스

package edu.kh.project.board.model.service;

import java.util.List;

import edu.kh.project.board.model.dto.Comment;

public interface CommentService {

    /** 댓글 목록 조회
     * @param boardNo
     * @return cList
     */
    List<Comment> select(int boardNo);

    /** 댓글 삽입
     * @param comment
     * @return result
     */
    int insert(Comment comment);

    /** 댓글 삭제
     * @param commentNo
     * @return result
     */
    int delete(int commentNo);

    /** 댓글 수정
     * @param comment
     * @return result
     */
    int update(Comment comment);

}

💗CommentServiceImpl.java

package edu.kh.project.board.model.service;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;

import edu.kh.project.board.common.utility.Util;
import edu.kh.project.board.model.dao.CommentDAO;
import edu.kh.project.board.model.dto.Comment;

@Service
public class CommentServiceImpl implements CommentService{

    @Autowired
    private CommentDAO dao;

    // 댓글 목록 조회
    @Override
    public List<Comment> select(int boardNo) {
        return dao.select(boardNo);
    }

    // 댓글 삽입
    @Transactional(rollbackFor = Exception.class)
    @Override
    public int insert(Comment comment) {
        // XSS 방지 처리 
        comment.setCommentContent(Util.XSSHandling(comment.getCommentContent()));
        return dao.insert(comment);
    }

    // 댓글 삭제
    @Transactional(rollbackFor = Exception.class)
    @Override
    public int delete(int commentNo) {
        return dao.delete(commentNo);
    }

    //댓글 수정
    @Transactional(rollbackFor = Exception.class)
    @Override
    public int update(Comment comment) {

        // XSS 방지 처리 
        comment.setCommentContent(Util.XSSHandling(comment.getCommentContent()));
        return dao.update(comment);
    }
}

💗CommentDAO.java

package edu.kh.project.board.model.dao;

import java.util.List;

import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import edu.kh.project.board.model.dto.Comment;

@Repository // DB 관련 + bean 등록(IOC)
public class CommentDAO {

    @Autowired
     private SqlSessionTemplate sqlsession;

    /** 댓글 목록 조회
     * @param boardNo
     * @return cList
     */
    public List<Comment> select(int boardNo) {
                                // board-mapper.xml에 작성된 select 이용
        return sqlsession.selectList("boardMapper.selectCommentList", boardNo);
    }

    /** 댓글 삽입
     * @param comment
     * @return result
     */
    public int insert(Comment comment) {
        return sqlsession.insert("commentMapper.insert",comment);
    }

    /** 댓글 삭제
     * @param commentNo
     * @return result
     */
    public int delete(int commentNo) {
        return sqlsession.update("commentMapper.delete",commentNo);
    }

    /**댓글 수정
     * @param comment
     * @return result
     */
    public int update(Comment comment) {
        return sqlsession.update("commentMapper.update",comment);
    }
}

💗mybatis-config.xml

    <!-- mapper 파일(SQL 작성되는파일) 위치 등록 부분 -->
    <mappers>
        <mapper resource="/mappers/comment-mapper.xml" />
    </mappers>

💗comment-mapper.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="commentMapper">


  <insert id="insert">
      INSERT INTO "COMMENT"
      VALUES(SEQ_COMMENT_NO.NEXTVAL,
            #{commentContent},
            DEFAULT, DEFAULT, 
            #{boardNo}, #{memberNo}, 

            <!-- 동적 SQL : if문 -->

            <!-- 부모 댓글 -->
            <if test="parentNo == 0">NULL</if>

            <!-- 자식 댓글 -->
            <if test="parentNo != 0">#{parentNo}</if>
            )
   </insert>

   <!-- 댓글 삭제 -->
   <update id="delete">
           UPDATE "COMMENT" SET
           COMMENT_DEL_FL ='Y'
           WHERE COMMENT_NO = #{commentNo}
   </update>

   <!-- 댓글 수정 -->
   <update id="update">
       UPDATE "COMMENT" SET
           COMMENT_CONTENT=#{commentContent}
        WHERE COMMENT_NO=#{commentNo}
   </update>
</mapper>

게시글 작성 구현 전 알아야 할 것!

• 목록 조회 : /board/1?cp=1 (cp : current page(현재페이지))
• 상세 조회 : /board/1/1500?cp=1
  
• *컨트롤러 따로 생성 *
• 삽입 : /board2/1/inssert?code=1(code ==BOARD_CODE , 게시판 종류)
• 수정 : /board2/1/update?code=1&no=1500 (no == BOARD_NO , 게시글 번호)
• 삭제 : /board2/1/delete?code=1&no=1500

board.controller

BoardController2

package edu.kh.project.board.controller;

import java.io.IOException;
import java.util.List;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.SessionAttribute;
import org.springframework.web.bind.annotation.SessionAttributes;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import com.fasterxml.jackson.annotation.JacksonInject.Value;

import edu.kh.project.board.model.dto.Board;
import edu.kh.project.board.model.service.BoardService2;
import edu.kh.project.member.model.dto.Member;

@Controller
@RequestMapping("/board2")
@SessionAttributes({"loginMember"})
public class BoardController2 {

    @Autowired
    private BoardService2 service;

    // 게시글 작성 화면 전환
    @GetMapping("/{boardCode:[0-9]+}/insert")
    public String boardInsert(@PathVariable("boardCode") int boardCode) {

        //@PathVariable :주소 값 가져오기 + requset scope 에 값올리기
        return "board/boardWrite";
    }


    // 게시글 작성 
    @PostMapping("/{boardCode:[0-9]+}/insert")
    public String boardInsert( 
            @PathVariable("boardCode") int boardCode
            , Board board /*커멘드 객체(필드에 파라미터 담겨져 있음)*/
            , @RequestParam(value="images", required = false) List<MultipartFile> images
            , @SessionAttribute("loginMember") Member loginMember
            , RedirectAttributes ra
            , HttpSession session) throws IllegalStateException, IOException{


        // 파라미터 : 제목, 내용, 파일(0~5개)
        // 파일저장 경로 : httpSession
        // 세션 : 로그인한 회원 번호 
        //리다이렉트 시 데이터 전달 : RedirectAuttributrs
        // 작성 성공 시 이동할 게시판 코드 : @PathVariable("boardCode")

        /* List<MultipartFile>
         * -업로드된 이미지가 없어도 List에 요소 MultipartFile  객체가 추가됨
         * 
         * -단, 업로드된 이미지가 없는 MultipartFile 객체는
         * 파일크기(size)가 0 또는 파일명(getOriginalFileName())이 ""
         * */

        // 1. 로그인한 회원 번호를 얻어와 board에 세팅
        board.setMemberNo(loginMember.getMemberNo());

        // 2. boardCode도 board에 세팅
        board.setBoardCode(boardCode);

        // 3. 업로드된 이밎 서버에 실제로 저장되는 경로
        //    + 웹에서 요청 시 이미지를 볼 수 있는 경로
        String webPath ="/resources/images/board/";
        String filePath = session.getServletContext().getRealPath(webPath);

        // 게시글 삽입을 하는 서비스 호출 후 삽입된 게시글의 번호 반환 받기
        int boardNo = service.boardInsert(board, images, webPath, filePath);

        // 게시글 삽입 셩공 시 
        // -> 방금 삽입한 게시글의 상세 조회 페이지로 리다이렉트
        // -> /board/{boardCode}/{boardNo}

        String message = null;
        String path ="redirect:";

        if(boardNo > 0) { //성공 시
            message="게시글이 등록 되었습니다.";
            path +="/board/"+boardCode +"/"+boardNo;
        }else {
            message="게시글 등록 실패ㅠㅠ";
            path += "insert";
        }

        ra.addFlashAttribute("message", message);
        return path;
    }
}

board.model

service.BoardService2 인터페이스

/** 게시글 삽입
     * @param board
     * @param images
     * @param webPath
     * @param filePath
     * @return boardNo
     */
    int boardInsert(Board board, List<MultipartFile> images, String webPath, String filePath)throws IllegalStateException, IOException;

service.BaordServiceImpl2 클래스

package edu.kh.project.board.model.service;

import java.io.File;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import org.springframework.web.multipart.MultipartFile;

import edu.kh.project.board.common.utility.Util;
import edu.kh.project.board.model.dao.BoardDAO2;
import edu.kh.project.board.model.dto.Board;
import edu.kh.project.board.model.dto.BoardImage;
import edu.kh.project.board.model.exception.FileUploadException;

@Service
public class BoardServiceImpl2 implements BoardService2{

    @Autowired
    private BoardDAO2 dao;


    // 게시글 삽입 
    @Override
    @Transactional(rollbackFor = Exception.class)
    public int boardInsert(Board board, List<MultipartFile> images, String webPath, String filePath) throws IllegalStateException, IOException {

        // 0. XSS 방지 처리
        board.setBoardContent(Util.XSSHandling(board.getBoardContent()));
        board.setBoardTitle(Util.XSSHandling(board.getBoardTitle()));


        // 1. BOARD 테이블에 INSERT하기(제목, 내용, 작성자, 게시판 코드)
        // -> boardNo (시퀀스로 생성한 번호) 반환 받기
        int boardNo = dao.boardInsert(board);

        // 2. 게시글 삽입 성공시 
        // 업로드 된 이미지가 있다면 BOARD_IMG 테이블에 삽입하는 DAO 호출

        if(boardNo > 0) { // 게시글 성공 시

            // List<MultipartFile> images
            // -> 업로드된 파일이 담긴 객체 MultipartFile이 5개 존재
            // -> 단, 업로드된 파일이 없어도 MultipartFile 개체는 존재

            // 실제로 업로드된 파일을 기록할 List
            List<BoardImage> uploadList = new ArrayList<BoardImage>();

            // images에 담겨 잇는 파일 중에서 실제로 업로드된 파일 만 분류
            for(int i= 0; i <images.size(); i++) {

                //i 번째 요소에 업로드한 파일이 있다면
                if(images.get(i).getSize() > 0) {

                    BoardImage img = new BoardImage();

                    //img에 파일 정보를 담아서 uploadList에 추가 
                    img.setImagePath(webPath); //웹 접근 경로
                    img.setBoardNo(boardNo); //게시글 번호 
                    img.setImageOrder(i); //이미지 순서

                    //파일 원본명
                    String fileName = images.get(i).getOriginalFilename();

                    img.setImageOriginal(fileName); //원본명
                    img.setImageReName(Util.fileRename(fileName)); // 변경명

                    uploadList.add(img);
                }
            } // 분류하는 for문 종료

            // 분류 작업 후 uploadList가 비어 있지 않은 경우
            // == 업로드한 파일이 있다
            if(!uploadList.isEmpty()) {

                // BOARD_IMG테이블에 INSERT 하는 DAO호출
                int result = dao.insertImageList(uploadList);
                // result == 삽입된 행의 개수 == uploadList.size()

                // 삽입된 행의 개수와 uploadList의 개수가 같다면
                // == 전체 insert 성공
                if(result == uploadList.size()) {

                    // 서버에 파일 저장(transferTo())

                    // images            : 실제 파일이 담긴 객체 리스트
                    //                        (업로드 안된 인덱스 빈칸)

                    // uploadList         : 업로 된 파일의 정보 리스트
                    //            (원본명, 변경명, 순서, 경로, 게시글 번호)

                    // 순서 == images 업로드된 인덱스 번호

                    for(int i =0; i <uploadList.size(); i++) {

                        int index = uploadList.get(i).getImageOrder();


                        // 파일로 변환 
                        String rename = uploadList.get(i).getImageReName();

                        images.get(index).transferTo(new File(filePath+ rename));
                    }

                }else { //일부 또는 전체 insert 실패

                    // **웹서비스 실행 중 1개라도 실패하면 전체 실패**
                    // -> rollback필요

                    // @Transactional(rollbackFor = Exception.class)
                    // -> 예외가 발생 해야지만 롤백

                    // [결론]
                    // 예외 강제 발생 시켜서 rollback  해야한다
                    // -> 사용자 정의 예외 생성

                    throw new FileUploadException(); //예외 강제 발생
                }
            }
        }

        return boardNo;
    }
}

dao.BoardDAO2

package edu.kh.project.board.model.dao;

import java.util.List;

import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import edu.kh.project.board.model.dto.Board;
import edu.kh.project.board.model.dto.BoardImage;

@Repository
public class BoardDAO2 {

    @Autowired
    private SqlSessionTemplate sqlsession;

    /** 게시글 삽입
     * @param board
     * @return 
     */
    public int boardInsert(Board board) {
        int result = sqlsession.insert("boardMapper.boardInsert", board);

        // ->sql 수행 후 매개변수 board 객체에는 boardNo 존재O

        // 삽입 성공시 
        if(result > 0) result =  board.getBoardNo();

        return result; // 삽입 성공 시 boardNo, 실패 시 0 반환
    }


    /** 이미지 리스트(여러개)삽입
     * @param uploadList
     * @return result
     */
    public int insertImageList(List<BoardImage> uploadList) {
        return sqlsession.insert("boardMapper.insertImageList", uploadList);
    }
}

board-mapper.xml

게시글 삽입(INSERT) 시 미리 boardNo 결과를 Select 구문으로 얻어와서 INSERT구문에 넣어 삽입 결과 1 or 0 얻어오기!
useGeneratedKeys 속성 : DB 내부적으로 생성한 key(시퀀스)를 전달된 파라미터의 필드로 대입 가능 여부를 지정(trur/false) 동적 SQL 프로그램 수행 중 SQL를 변경하는 기능 (마이바티스의 가장 강력한 기능) selectKey태그 INSERT/UPDATE 시 사용할 키(시퀀스)를 조회해서 파라미터의 지정된 필드에 대입 oder속성 메인 SQL이 수행되기 전/후 selectKey가 수행되도록 지정한다 전: BEFORE / 후: AFTER foreach 이미지 리스트 (여러개 삽입)

    <!-- 게시글 삽입 -->
    <!-- 
        useGeneratedKeys 속성 : DB 내부적으로 생성한 key(시퀀스)를
                              전달된 파라미터의 필드로 대입 가능 여부를 지정

        **동적 SQL**
        - 프로그램 수행 중 SQL를 변경하는 기능 (마이바티스의 가장 강력한 기능)

        <selectKey> 태그 : INSERT/UPDATE 시 사용할 키(시퀀스)를 
                          조회해서 파라미터의 지정된 필드에 대입    

        oder속성 : 메인 SQL이 수행되기 전/후 selectKey가 수행되도록 지정한다
                전: BEFORE
                후: AFTER


        keyProperty 속성 : selectKey 조회 결과를 저장할 파라미터의 필드
     -->
    <insert id="boardInsert" parameterType="Board" useGeneratedKeys="true">

        <selectKey order="BEFORE" resultType="_int" keyProperty="boardNo">
            SELECT SEQ_BOARD_NO.NEXTVAL FROM DUAL
        </selectKey>

        INSERT INTO BOARD 
          VALUES( #{boardNo},
                  #{boardTitle},
                  #{boardContent},
                  DEFAULT, DEFAULT, DEFAULT, DEFAULT,
                  #{memberNo}, 
                  #{boardCode} )
    </insert>

    <!-- 동적 SQL 중 <foreach> 
      - 특정 SLQ 구문을 반복할 때 사용
      - 반복되는 사이에 구분자(separator)를 추가할 수 있음.

      collection : 반복할 객체의 타입 작성(list, set, map...)
      item : collection에서 순차적으로 꺼낸 하나의 요소를 저장하는 변수
      index : 현재 반복 접근중인 인덱스 (0,1,2,3,4 ..)

      open : 반복 전에 출력할 sql
      close : 반복 종료 후에 출력한 sql

      separator : 반복 사이사이 구분자
    -->



    <!-- 이미지 리스트(여러개 삽입) -->
    <insert id="insertImageList" parameterType="list">
        INSERT INTO BOARD_IMG
        SELECT SEQ_IMG_NO.NEXTVAL, A.*
        FROM(

            <foreach collection="list" item="img" separator=" UNION ALL ">
                SELECT  #{img.imagePath} IMG_PATH,
                         #{img.imageReName} IMG_RENAME,
                         #{img.imageOriginal} IMG_ORIGINAL,
                        #{img.imageOrder} IMG_ORDER,
                        #{img.boardNo} BOARD_NO
                FROM DUAL;
            </foreach>

            ) A
    </insert>

VS CODE

boardList.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>

<%-- map에 저장된 값을 각각 변수에 저장 --%>
<c:set var="pagination" value="${map.pagination}"/>
<c:set var="boardList" value="${map.boardList}"/>

<%-- <c:set var="boardName" value="${boardTypeList[boardCode-1].BOARD_NAME}"/> --%>
<c:forEach items="${boardTypeList}" var="boardType">
    <c:if test="${boardType.BOARD_CODE == boardCode}" >
        <c:set var="boardName" value="${boardType.BOARD_NAME}"/>
    </c:if>
</c:forEach>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

    <link rel="stylesheet" href="/resources/css/board/boardList-style.css">

</head>
<body>
    <main>
        <jsp:include page="/WEB-INF/views/common/header.jsp"/>


        <section class="board-list">

            <h1 class="board-name">${boardName}</h1>


            <div class="list-wrapper">
                <table class="list-table">

                    <thead>
                        <tr>
                            <th>글번호</th>
                            <th>제목</th>
                            <th>작성자</th>
                            <th>작성일</th>
                            <th>조회수</th>
                            <th>좋아요</th>
                        </tr>
                    </thead>

                    <tbody>
                        <c:choose>
                           <c:when test="${empty boardList}">
                                <%-- 조회된 게시글 목록 비어있거나 null인 경우 --%>

                                <!-- 게시글 목록 조회 결과가 비어있다면 -->
                                <tr>
                                    <th colspan="6">게시글이 존재하지 않습니다.</th>
                                </tr>
                           </c:when>

                           <c:otherwise>

                            <c:forEach items="${boardList}" var="board">
                                <!-- 게시글 목록 조회 결과가 있다면-->
                                <tr>
                                    <td>${board.boardNo}</td>
                                    <td> 
                                        <%-- 썸네일이 있을 경우 --%>
                                        <c:if test="${!empty board.thumbnail}" >
                                            <img class="list-thumbnail" src="${board.thumbnail}">
                                        </c:if>



                                        <%-- ${boardCode} : @PathVariable로 request scope에 추가된 값 --%>
                                        <a href="/board/${boardCode}/${board.boardNo}?cp=${pagination.currentPage}">${board.boardTitle}</a>   
                                        [${board.commentCount}]                       
                                    </td>
                                    <td>${board.memberNickname}</td>
                                    <td>${board.boardCreateDate}</td>
                                    <td>${board.readCount}</td>
                                    <td>${board.likeCount}</td>
                                </tr>
                            </c:forEach>
                           </c:otherwise>
                        </c:choose>




                    </tbody>
                </table>
            </div>


            <div class="btn-area">

            <!-- 로그인 상태일 경우 글쓰기 버튼 노출 -->
                <c:if test="${!empty loginMember}" >
                    <button id="insertBtn">글쓰기</button>                     
                </c:if>

            </div>


            <div class="pagination-area">


                <ul class="pagination">

                    <!-- 첫 페이지로 이동 -->
                    <li><a href="/board/${boardCode}?cp=1">&lt;&lt;</a></li>

                    <!-- 이전 목록 마지막 번호로 이동 -->
                    <li><a href="/board/${boardCode}?cp=${pagination.prevPage}">&lt;</a></li>


                    <!-- 특정 페이지로 이동 -->
                    <c:forEach var="i" begin="${pagination.startPage}"
                                end="${pagination.endPage}" step="1">
                        <c:choose>
                           <c:when test="${i== pagination.currentPage}">
                                <!-- 현재 보고있는 페이지 -->
                                <li><a class="current">${i}</a></li>
                           </c:when>

                           <c:otherwise>
                                <!-- 현재 페이지를 제외한 나머지 -->
                                <li><a href="/board/${boardCode}?cp=${i}">${i}</a></li>
                           </c:otherwise>
                        </c:choose>
                    </c:forEach>

                    <!-- 다음 목록 시작 번호로 이동 -->
                    <li><a href="/board/${boardCode}?cp=${pagination.nextPage}">&gt;</a></li>

                    <!-- 끝 페이지로 이동 -->
                    <li><a href="/board/${boardCode}?cp=${pagination.maxPage}">&gt;&gt;</a></li>

                </ul>
            </div>


         <!-- 검색창 -->
            <form action="#" method="get" id="boardSearch">

                <select name="key" id="searchKey">
                    <option value="t">제목</option>
                    <option value="c">내용</option>
                    <option value="tc">제목+내용</tion>
                    <option value="w">작성자</option>
                </select>

                <input type="text" name="query"  id="searchQuery" placeholder="검색어를 입력해주세요.">

                <button>검색</button>
            </form>

        </section>
    </main>


    <!-- 썸네일 클릭 시 모달창 출력 -->
    <div class="modal">
        <span id="modalClose">&times;</span>
        <img id="modalImage" src="/resources/images/user.png">
    </div>


    <jsp:include page="/WEB-INF/views/common/footer.jsp"/>
    <script src="/resources/js/board/boardList.js"></script>

</body>
</html>

boardList.js

const insertBtn = document.getElementById("insertBtn");

// 글쓰기 버튼 을 클릭했을 때 

if(insertBtn != null){

    insertBtn.addEventListener("click", ()=>{
        // JS BOM 객체 location

        // location.href="주소"
        // 해당 주소 요청(GET방식)

        // location.href="/board2/"+location.pathname.split("/")[2]
        location.href=`/board2/${location.pathname.split("/")[2]}/insert`
                    //board2/1/insert
    })
}

boardWrite.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"  %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"  %>

<c:forEach items="${boardTypeList}" var="boardType">
    <c:if test="${boardType.BOARD_CODE == boardCode}" >
        <c:set var="boardName" value="${boardType.BOARD_NAME}"/>
    </c:if>
</c:forEach>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${boardName}</title>

    <link rel="stylesheet" href="/resources/css/board/boardWrite-style.css">
</head>
<body>
    <main>
        <jsp:include page="/WEB-INF/views/common/header.jsp"/>


                            <%-- @PathVariable에서 request scope로 가져옴 --%>
        <form action="/board2/${boardCode}/insert" method="POST" 
                class="board-write" id="boardWriteFrm" enctype="multipart/form-data"> 
                         <%--enctype="multipart/form-data" : 제출 이코딩 X
                         -> 파일제출 가능
                         -> Multipath Resolver 가 문자열, 파일 구분
                         --> 문자열, String, int, DTO, Map (HttpMessageConverter)
                         --> 파일 -> MultiPathFile 객체 -> transferTo() (파일을 서버에 저장) --%>

            <h1 class="board-name">${boardName}</h1>

            <!-- 제목 -->
            <h1 class="board-title">
                <input type="text" name="boardTitle" placeholder="제목" value="">
            </h1>


            <!-- 썸네일 영역 -->
            <h5>썸네일</h5>
            <div class="img-box">
                <div class="boardImg thumbnail">
                    <label for="img0">
                        <img class="preview" src="">
                    </label>
                    <input type="file" name="images" class="inputImage" id="img0" accept="image/*">
                    <span class="delete-image">&times;</span>
                </div>
            </div>


            <!-- 업로드 이미지 영역 -->
            <h5>업로드 이미지</h5>
            <div class="img-box">

                <div class="boardImg">
                    <label for="img1">
                        <img class="preview" src="">
                    </label>
                    <input type="file" name="images" class="inputImage" id="img1" accept="image/*">
                    <span class="delete-image">&times;</span>
                </div>

                <div class="boardImg">
                    <label for="img2">
                        <img class="preview" src="">
                    </label>
                    <input type="file" name="images" class="inputImage" id="img2" accept="image/*">
                    <span class="delete-image">&times;</span>
                </div>

                <div class="boardImg">
                    <label for="img3">
                        <img class="preview" src="">
                    </label>
                    <input type="file" name="images" class="inputImage" id="img3" accept="image/*">
                    <span class="delete-image">&times;</span>
                </div>

                <div class="boardImg">
                    <label for="img4">
                        <img class="preview" src="">
                    </label>
                    <input type="file" name="images" class="inputImage" id="img4" accept="image/*">
                    <span class="delete-image">&times;</span>
                </div>
            </div>

            <!-- 내용 -->
            <div class="board-content">
                <textarea name="boardContent"></textarea>
            </div>


             <!-- 버튼 영역 -->
            <div class="board-btn-area">
                <button type="submit" id="writebtn">등록</button>
            </div>


        </form>

    </main>

    <jsp:include page="/WEB-INF/views/common/footer.jsp"/>

    <script src="/resources/js/board/boardWrite.js"></script>

</body>
</html>

boardWrite.js

//미리보기 관련 요소 모두 얻어오기

//img 5개
const preview = document.getElementsByClassName("preview");
//file 5개
const inputImage = document.getElementsByClassName("inputImage");

// X버튼 5개
const deleteImage = document.getElementsByClassName("delete-image");

// 위에 얻어온 요소들의 개수가 같음 == 인덱스가 일치함

for( let i=0; i < inputImage.length; i++){

    // 파일이 선택되거나, 선택 후 취소 되었을 때
    inputImage[i].addEventListener("change", e=>{

        const file = e.target.files[0]; //선택된 파일의 데이터

        if(file != undefined){ //파일이 선택되었을 때

            const reader = new FileReader(); //파일을 읽는 객체

            reader.readAsDataURL(file);
            //지정된 파일을 읽은 후 result변수에 URL형식으로 저장

            reader.onload = e =>{ //파일을 다 읽은 후 수행
                preview[i].setAttribute("src", e.target.result);
            }

        }else{ // 파일 선택 후 취소 눌렀을 때
            // -> 선택된 파일이 없다 -> 미리보기 없다
            preview[i].removeAttribute("src");



        }
    });

    // 미리보기 삭제 버튼(x버튼)
    deleteImage[i].addEventListener("click", ()=>{

        // 미리보기 이미지가 있을 경우 
        if(preview[i].getAttribute("src") != ""){

            // 미리보기 삭제
            preview[i].removeAttribute("src");

            // input type="file" 태그의 value를 삭제
            // input type="file" 의 value ""(빈칸)만 대입가능
            inputImage[i].value="";
        }
    })


}

// 게시글 등록 시 제목, 내용 작성 여부 검사 
const boardWriteFrm = document.getElementById("boardWriteFrm")
const boardTilte = document.querySelector("[name='boardTitle']")
const boardContent = document.querySelector("[name='boardContent']")

boardWriteFrm.addEventListener("submit", e=>{

    if( boardTilte.value.trim().length == 0 ){
        alert("제목을 입력해주세요")
        boardTilte.value="";
        boardTilte.focus();
        e.preventDefault();
        return;
    }

    if( boardContent.value.trim().length == 0){
        alert("내용을 입력해주세요");
        boardContent.value="";
        boardContent.focus();
        e.preventDefault();
        return;
    }
});

☔공공데이터 포털 사이트에서!

https://www.data.go.kr

1) 로그인 후 홈페이지에서 원하는 데이터를 검색 나는 "한국환경공단 대기오염"을 검색

2) 활용 신청 누른 후 공공데이터를 받으려면 인증키가 필요하니 확인하러 가보자!!!

3) 마이페이지에서 인증키 발급 현황을 확인 할 수 있다 잘 발급 되었다!

4) 마이페이지-> 활용신청 현황-> "내가 신청한 데이터"->상세기능 정보

xml -> item : 하나의 데이터 정보(실질적으로 필요한 정보) item에 있는 데이터 vo에 담아고 또 List에 담아 가져올수 있다

*openData 프로젝트 만들기 * opendata Spring Legacy Project 생성 spring 폴더 옮기기 web.xml pom.xml 라이브러리 추가 mvn업뎃 최상위 주소 '/'로 바꾸기

💧VO 만들기

item에 있는 데이터 중 필요한 부분만 VO 필드에 담는다.

package com.kh.opendata.model.vo;

import lombok.Getter;
import lombok.Setter;
import lombok.ToString;

@Getter
@Setter
@ToString
public class Air {
    //item에 있는 데이터 중 필요한 부분만 필드에 담는다. 

    //필드
    private String stationName; //측정소명
    private String dataTime; //측정일시
    private String khaiValue; //통합대기환경수치

    private String pm10Value; //미세먼지농도
    private String so2Value; //아황산가스농도
    private String coValue;//일산화탄소농도
    private String no2Value;//이산화질소농도
    private String o3Value;//오존농도
}

💧AirPollutionJavaAppRun.java

HttpURLConnection 객체를 활용해서 OpenAPI 요청절차

1. 작성된 url 정보를 넣어 URL 객체 생성
2. 생성된 URL 객체로 URLCpnnection 생성
3. 요청 시 필요한 Header 설정
4. 해당 OpenAPI 서버로 요청 후 입력스트립을 통해서 응답객체 얻어오기
5. 다 사용한 스트림 반납 및 연결 해제

json데이터를 원하는 데이터만 추출하여 VO에 담기 JSONObject, JSONArray을 이용해서 파싱할 수 있다. 이 때, (gson라이브러리 필요) ** "responseText" -> total-> response -> body -> totalCount -> items-> item ** JsonObj 객체 : "responseText", response, body int : totalCount JsonArray : items JsonArray List에 담긴 객체 for문 이용해서 하나씩 꺼내오기!(이때 배열길이 .size() 사용)

package com.kh.opendata.run;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;

public class AirPollutionJavaAppRun {

    //발급 받은 인증키 변수처리
    public static final String SERVICEKEY = "서비스키";

    public static void main(String[] args) throws IOException { // UnsupportedEncodingException의
                                                                // 부모로 예외 처리
        //OpenAPI 서버로 요청하고자 하는 url 작성
        String url ="http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty";

        //필수
        url += "?serviceKey=" + SERVICEKEY; 
        //서비스키가 제대로 부여 되지 않았을 경우 SERVICE_KEY_IS_NOT_REGISTERED_ERROR 발생
        url +="&sidoName="+ URLEncoder.encode("서울","UTF-8");

        url += "&returnType=json";

        //System.out.println(url);

        //****HttpURLConnection 객체를 활용해서 OpenAPI 요청절차**** 
        // 1. 요청할 주소를 전달해서 java.net.URL 객체 생성하기
        URL requestURL = new URL(url);

        // 2. 생성된 URL 객체를가지고 HttpUrlConnection 객체 얻어내기
        HttpURLConnection urlConn = (HttpURLConnection)requestURL.openConnection();
                                    //다운캐스팅

        // 3. 요청 시 필요한 Header 설정하기
        urlConn.setRequestMethod("GET");

        // 4. 해당 OpenAPI 서버로 요청 보낸 후 입력 스트림을 통해 응답데이터 받기
        BufferedReader br = new BufferedReader( new InputStreamReader(urlConn.getInputStream()));
        // 보조 스트림                         문자(2바이트)             보조스트림        기반스트림 Input(1바이트)
        // BufferedReader : 한줄 단위로 읽어 오자!

        String responseText="";
        String line;
        // 한 줄 씩 읽어와 line 에 담고 line null일 때 반복문 종료
        while( (line = br.readLine()) != null) { // 한줄 씩 읽어올 때 데이터가 있는 동안 반복

            //System.out.println(line);
            responseText += line;
        }
        //System.out.println(responseText);

        //*********json데이터를 원하는 데이터만 추출하여 VO에 담기********
        // JSONObject, JSONArray을 이용해서 파싱할 수 있다.
        // 이 때, (gson라이브러리 필요)

        JsonObject totalObj = JsonParser.parseString(responseText).getAsJsonObject();
        //System.out.println("total : " + totalObj);

        //response 속성 접근
        JsonObject responseObj = totalObj.getAsJsonObject("response");
        //System.out.println("response : "+ responseObj);

        //body 속성 접근
        JsonObject bodyObj = responseObj.getAsJsonObject("body");
        //System.out.println("body : "+ bodyObj);

        //totalCount 속성 접근
        int totalCount = bodyObj.get("totalCount").getAsInt();
        //System.out.println("totalCount: "+totalCount);

        //items (JsonArray형태)속성 접근 
        JsonArray itemArr = bodyObj.getAsJsonArray("items");
        System.out.println("itemArr : "+itemArr);


        ArrayList<Air> list = new ArrayList<>();


        //ites에 담겨 있는 item객체 하나씩 추출
        for(int i=0; i<itemArr.size(); i++) {
            //JsonArr배열에서 하나씩 꺼내올 때 .size사용!

            JsonObject item = itemArr.get(i).getAsJsonObject();

            //System.out.println(item);

            Air air = new Air();
            air.setStationName(item.get("stationName").getAsString()); //측정소명
            air.setDataTime(item.get("dataTime").getAsString()); // 측정일시
            air.setKhaiValue(item.get("khaiValue").getAsString()); //통합대기화

            air.setPm10Value(item.get("pm10Value").getAsString()); //미세먼지농도
            air.setSo2Value(item.get("so2Value").getAsString()); //이황가스농도
            air.setCoValue(item.get("coValue").getAsString()); //일산화탄소농도
            air.setNo2Value(item.get("no2Value").getAsString()); //이산화탄소농도
            air.setO3Value(item.get("o3Value").getAsString()); //오존농도

            list.add(air);
        }

        System.out.println("list :" +list);

        // list에 담긴 VO 객체확인
        for( Air air : list) {
            System.out.println("air: "+air);
        }

        // 5. 다 사용한 스트림 객체 반납하기
        br.close();
        urlConn.disconnect();
    }

}

출력 구문 주소 브라우저에서 검색하면 결과확인 해 볼 수 있음 resultType : XML resultType : JSON

💧index.jsp

비동기식으로 웹 어플리케이션에 적용하고자 할 때의 절차

1. Jsp에서 현재 웹 애플리케이션 서버로 ajax 요청
2. Controller에서 요청 받기 (이때 요청 시 전달값이 있다면 기록)
3. HttpURLConnection 객체 활용해서 OpenAPI서버에 요청하여 응답데이터 받기
4. 3번 과정에서의 응답데이터를 Client에게 다시 응답
5. Client측에서 돌려받은 응답데이터를 가지고 파싱 작업 후 웹 페이지에 시각화 하기

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<!-- jquery 연결 -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>

<title>대기오염 공공데이터</title>
</head>
<body>
    <h1>실시간 대기오염 정보</h1>
    지역:
    <select id="location">
        <option>서울</option>
        <option>부산</option>
        <option>대전</option>
    </select>

    <button id="btn1">해당 지역 대기 오염 정보</button>
    <br>
    <br>

    <table border="1" id="result1">
        <thead>
            <tr>
                <th>측정소명</th>
                <th>측정일시</th>
                <th>통합대기환경수치</th>
                <th>미세먼지농도</th>
                <th>아황산가스농도</th>
                <th>일산화탄소농도</th>
                <th>이산화탄소농도</th>
                <th>오존농도</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

    <script>
           $(function(){
               $("#btn1").click(function(){
                                       // 응답 데이터를 xml 형식으로 받을 때
                    $.ajax({
                        url : "air",
                        data : {
                            location : $("#location").val()
                        },
                        success : function(result) {
                            console.log(result);

                            // $('요소명').find(매개변수)
                            // - 기준이 되는 요소의 하위 요소들 중 특정 요소를 찾을 때 사용
                            // - html, xml은 같은 마크업 언어기 때문에 사용 가능하다
                            // console.log($(result).find("item"))

                            // xml형식의 응답데이터를 받았을 때 
                            // 1. 넘겨 받은 데이터를 Jquesry화 시킨 후에
                            //   응답데이터 안에 실제 데이터가 담겨 잇는 요소를 선택해 준다

                            const itemArr = $(result).find("item");
                            // 2. 반복문을 통해 실제 데이터가 담긴 요소들에 접근해서 동적으로 요소 만들기
                            let value;
                            itemArr.each(function(index, item) {

                                //console.log(item)                                   
                                console.log($(item).find("stationName")
                                        .text())

                                value += "<tr>" + "<td>"
                                        + $(item).find("stationName")
                                                .text() + "</td>" + "<td>"
                                        + $(item).find("dataTime").text()
                                        + "</td>" + "<td>"
                                        + $(item).find("khaiValue").text()
                                        + "</td>" + "<td>"
                                        + $(item).find("pm10Value").text()
                                        + "</td>" + "<td>"
                                        + $(item).find("so2Value").text()
                                        + "</td>" + "<td>"
                                        + $(item).find("coValue").text()
                                        + "</td>" + "<td>"
                                        + $(item).find("no2Value").text()
                                        + "</td>" + "<td>"
                                        + $(item).find("o3Value").text()
                                        + "</td>" + "</tr>"

                            })

                            //3. 동적으로 만들어낸 요소를 화면에 출력
                            $("#result1 > tbody").html(value);

                        },
                        error : function() {
                            console.log("통신실패")
                        }
                });

            });


        });
   </script>
</body>
</html>

💧OpenAPIController.java(JSON형식)

package com.kh.opendata.controller;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.net.HttpURLConnection;
import java.net.URL;
import java.net.URLEncoder;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class OpenAPIController {

    //발급 받은 인증키 변수처리
    public static final String SERVICEKEY = "서비스키";


    //Json형식으로 대기오염 OpenAPI 활용하기
    @RequestMapping(value = "air", produces = "application/json; charset=UTF-8")
    @ResponseBody
    public String airMethod( String location ) throws IOException{ 

        //OpenAPI 서버로 요청하고자 하는 url 작성
        String url ="http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty";

        url += "?serviceKey=" + SERVICEKEY;  //서비스키 추가
        url += "&numOfRows="+10; // 옵션 선택이고 행의 개수
        url += "&sidoName="+ URLEncoder.encode(location,"UTF-8"); //지역명 추가(한글이 들어가면 인코팅 추가)
        url += "&returnType=json";    // 리턴 타입    


        // 1. 작성된 url 정보를 넣어 URL 객체 생성
        URL requestUrl = new URL(url);

        // 2. 생성된 URL 객체로 URLCpnnection 생성
        HttpURLConnection urlConn = (HttpURLConnection)requestUrl.openConnection();

        //3. 요청 시 필요한 Header 설정
        urlConn.setRequestMethod("GET");

        //4. 해당 OpenAPI 서버로 요청 후 입력스트립을 통해서 응답객체 얻어오기
        BufferedReader br = new BufferedReader(new InputStreamReader(urlConn.getInputStream()));


        String responseText ="";
        String line;
        while((line = br.readLine()) != null){
            responseText += line;
        }

        //5. 다 사용한 스트림 반납 및 연결 해제
        br.close();
        urlConn.disconnect();


        return responseText;
    }
}

💧OpenAPIController.java(XML형식)

    @RequestMapping("air")
    public String airPollution(String location) throws IOException {

        String url ="http://apis.data.go.kr/B552584/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty";

        url += "?serviceKey=" + SERVICEKEY;  //서비스키 추가
        url += "&sidoName="+ URLEncoder.encode(location,"UTF-8"); //지역명 추가(한글이 들어가면 인코팅 추가)
        url += "&returnType=xml";
        url += "&numOfRows="+20; // 옵션 선택이고 행의 개수

        //1. 작성된 url 정보를 넣어 URL 객체 생성
        URL requestUrl = new URL(url);

        //2. 생성된 URL 객체로 URLCpnnection 생성
        HttpURLConnection urlConn = (HttpURLConnection)requestUrl.openConnection();

        //3. 요청 시 필요한 Header 설정
        urlConn.setRequestMethod("GET");

        //4. 해당 OpenAPI 서버로 요청 후 입력스트립을 통해서 응답객체 얻어오기
        BufferedReader br = new BufferedReader(new InputStreamReader(urlConn.getInputStream()));

        String responseText ="";
        String line;
        while((line = br.readLine()) != null){
            responseText += line;
        }

        //5. 다 사용한 스트림 반납 및 연결 해제
        br.close();
        urlConn.disconnect();

        System.out.println(responseText);

        return responseText;

    }

💧결과 화면