객체 지향 언어 dart

• 아래 자료형을 포함한 대부분의 자료형과 function은 object, class로 이루어져 있음

void main() {
  String name = "쩡";
  bool alive = true;
  int age = 11;
  double money = 1.11;

  // num : int와 double의 부모 class
  num x = 1;
  x = 1.2;
}

list

list 변수를 만드는 두가지 방법

1. var 키워드 사용

   void main() {
   var numbers = [1, 2, 3, 4];
   }

2. List<int> 명시

   void main() {
   List<int> numbers = [1, 2, 3, 4];
   }

• List는 collection if, collection for를 지원

  collection if

  if로 존재할 수도, 존재하지 않을 수도 있는 요소로 작성 가능

  void main() {
  var giveMeFive = true;
  var numbers = [
    1,
    2,
    3,
    4,
    if (giveMeFive) 5, // == if(giveMeFive) {numbers.add(5);}
  ];
  print(numbers);
  }

• giveMeFive 값이 true일 경우 5를 리스트 요소로 가짐

collection for

void main() {
  var oldFriends = ['nico', '쩡'];
  var newFriends = [
    'lewis',
    'ralph',
    'darren',
    for (var friend in oldFriends) "🩵 $friend",
  ];
  //   for (var friend in oldFriends) {
  //     newFriends.add();
  //   } collection for를 사용하여 대체 가능
  print(newFriends);
}

• collection if는 메뉴나 navigation bar를 만들 때 유용하게 사용 가능

List 자동 Formatting 방법

1. 리스트의 마지막 변수 뒤에 ,(쉼표)를 붙인다.
2. 코드를 전체 선택 단축키(Ctrl+A)를 이용해서 전체 선택한다.
3. 자동 Formatting 단축키 (Shift+Ctrl+F)를 사용.

String interpolation

String interpolation : text에 변수 추가

단순 변수 값을 출력하고 싶을 때 String interpolation

void main() {
  var name = "쩡";
  var greeting = 'Hello everyone, my name is $name. Nice to meet you!';
  print(greeting);
}

• 변수가 이미 존재할 경우 $ 기호를 사용 -> $변수명

계산을 실행할 때 String interpolation

void main() {
  var name = "쩡";
  var age = 23;
  var greeting = 'Hello everyone, my name is $name and I\'m ${age + 2}.';
  print(greeting);
}

• 중괄호 사용 -> ${계산할 내용}

Map

map : key와 value를 연결하는 객체, 동일한 값을 여러번 사용할 수 있음(== Javascript/TypeScript의 object, python의 dictionary)

void main() {
  //   var player = {'name': '쩡', 'xp': 99.01, 'superpower': false};
  // key: String, Value: object(any) -> 컴파일러가 자료형 유추
  Map<int, bool> player = {1: true, 2: false, 3: true};
  Map<List<int>, bool> boolean = {
    [1, 2, 3, 5]: true,
  };

  List<Map<String, Object>> players = {
    {
      'name': 'nico',
      'xp': 10000.1,
    },
    {
      'name': 'nico',
      'xp': 10000.1,
    },
  }
}

• key와 value로 이루어진 API 구조의 데이터를 정의할 때 Map 대신 class를 사용하는 것이 더 좋음

Set

Set과 List의 차이

• Set에 속한 모든 아이템은 Unique, Sequence(순서가 있음)
• 중괄호 사용
• 요소가 항상 하나씩만 있어야 하면 사용
• List = python의 list / Set = python의 Tuple
• *[Set]**

  void main() {
   var numbers = {1, 2, 3, 4};
   // == Set<int> numbers = {1, 2, 3, 4,};
   numbers.add(1);
   print(numbers);
  }

  
• *[List]**

  void main() {
   List numbers = [1, 2, 3, 4];
   numbers.add(1);
   print(numbers);
  }

  

수정 가능한 변수 - var

1. var 변수

   void main(){
    var name = '쩡';
   }

• 함수나 메소드 내부에 지역 변수 선언 시 사용

2. 명시적으로 변수 타입 지정

   void main(){
    String name = '쩡';
   }

• 클래스에서 변수나 프로퍼티 선언 시 사용

Dynamic Type

dynamic : 여러가지 타입을 가질 수 있는 변수에 사용되는 키워드 (자주 사용하는 것을 추천하지 않음)

void main() {
  var name; // == dynamic name;
  name = '쩡';
  name = 1;
  name = true;
}

• 변수 타입을 알기 어려울 경우 주로 사용
• flutter, json 사용 시 dynamic 타입 사용

• 변수 타입이 지정되지 않아 사용할 수 있는 함수가 많지 않음

  void main() {
   dynamic name;
   if(name is String){
     name.
   }
  }
  

![](https://velog.velcdn.com/images/j_jeong2/post/d5590f91-a92d-445d-a8de-04994828eff3/image.png)

# Nullable (null safety)
기본적으로 모든 변수는 non-nullable임
null safety : 개발자가 null 값을 참조할 수 없도록 하는 것

```dart
void main() {
  String? nico = 'nico';
  nico = null;
  //   if (nico != null) {
  //     nico.isNotEmpty; // 컴파일러가 null이 아님을 알기 때문에 에러가 나지 않음
  //   }
  nico?.isNotEmpty;
}

• 변수 타입에 '?'를 붙이게 되면 해당 변수가 지정한 변수 타입 또는 null이 될 수 있다고 명시하는 것 (A or null)

  void main() {
  String? nico = 'nico';
  nico = null;
  nico.length;
  }

  

수정 불가능한 변수 - final(==js의 const)

void main() {
  final (String) name = '쩡';
  name = 'hello';
}

• 타입 지정은 선택

late 수식어

late : final이나 var 앞에 붙여줄 수 있는 수식어로, 초기 데이터 없이 변수를 선언할 수 있도록 해줌

void main() {
  late final name;
  // API 요청으로 데이터 받아옴
  name = 'data';
}

flutter에서 data fetching 할 때 유용

const

const : compile-time constant를 만들어줌, 수정 불가능한 상수(final과 똑같이 작동), 컴파일 시간에 값이 있어야함 compitle-time constant : 컴파일 시간에 초기화 값을 확인할 수 있는 상수

void main() {
  //   const API = '1123344'; // 하드코딩 됨
  const API =
      fetchApi(); // 컴파일러는 api의 변수 값을 모르기 때문에 compile-time constant가 아님 -> final API = fetchApi();로 작성
}

final: 값을 재할당하지 못하는 변수를 만듦 dynamic type: 어떤 타입의 데이터가 들어올 지 모를 때 사용함 const: 컴파일 할 때 값을 알고 있는 변수 final: 런타임 중에 만들어질 수 있는 변수 late: final, var, String같은 것들 앞에 써줄 수 있는 수식어로서 어떤 데이터가 올 지 모를 때 사용한다.

스프링 부트 익스텐션 설치 전

환경 변수 - 시스템 변수 - Path에 jdk 경로가 추가되어있지 않다면 Spring이 실행되지 않으므로 jdk를 설치한 후 Path를 추가해준다.

스프링 부트 익스텐션 설치

익스텐션 팩을 설치하게 되면 상단의 Tool, Dashboard, Initializr Java Support 세 개의 익스텐션이 설치된다.

프로젝트 생성

ctrl + shift + p 를 누른 후, Gradle을 사용하여 프로젝트를 진행할 예정이므로 _Spring Initializr: Create a Gradle Project..._을 선택하여 프로젝트를 생성해준다. 사용하고자 하는 버전으로 선택해준다. 사용하고자 하는 언어로 선택해준다.

프로젝트 Group ID 설정

Vue.js 프레임워크를 사용하여 프로젝트를 진행해줄 것이기 때문에 그룹 아이디를 parkvue로 설정해주었다.

프로젝트 Artifact ID 설정

디폴트는 demo로 설정되어있다.

빌드 형식 설정

자바 버전 선택

의존성 패키지 추가

기본적으로 Spring Web, Lombok, Thymeleaf, Spring Boot DevTools 등을 선택하여 추가한다. 필요한 의존성 패키지가 있으면 검색하여 추가하면 된다.

프로젝트 경로 설정

Generate into this folder를 클릭하여 프로젝트 경로를 설정한 후 우측 하단의 팝업에 Open을 클릭한다. open 누르면 새창이 뜨는데 open 안 눌러도 상관은 없을 것 같다.

프로젝트 실행

src-main-java-com-...-ErpApplication.java 파일을 열어 우측 상단의 ▶️Run 버튼을 누르면 Spring이 실행된다.

사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크 표준 HTML, CSS 및 JavaScript를 기반으로 구축되며, 단순한 것 부터 복잡한 것 까지 사용자 인터페이스를 효율적으로 개발할 수 있는 컴포넌트 기반 프로그래밍 모델을 제공 https://ko.vuejs.org/

Count 버튼 클릭 시 1씩 증가 예시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Vue3</title>
</head>
<body>
    <div id="app">
        <button type="button" v-on:click="counter++">
            Counter : {{counter}}
        </button>
    </div>
    <script>
        const app = Vue.createApp({
            data(){
                return {
                    counter: 0,
                };
            },
        });
        app.mount("#app");
    </script>
</body>
</html>

예시에서 알 수 있는 Vue의 핵심 기능

• 선언적 렌더링(Declarative Rendering) : Vue는 템플릿 구문 {{데이터}}을 활용하여 데이터를 선언적으로 출력(렌더링) 할 수 있도록 함. (자동 렌더링)
• 반응성(Reactivity) : Vue는 JavaScript 상태 변경을 자동으로 추적하고 변경이 발생하면 DOM을 효율적으로 업데이트함. -> counter++로 상태 변경 시 {{counter}}에서 자동 변경

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-bind:placeholder="message">
        <hr>
        <button v-on:click="reverseMessage">
            click
        </button>
        <hr>
        {{username}} <br>
        <input type="text" v-model="username">
        <hr>
        <p v-if="visible">보임</p>
        <button type="button" v-on:click="visible = true">visible</button>
        <hr>
        <ul>
            <li v-for="item in items">{{item}}</li>
        </ul>
    </div>
    <script>
        const app = Vue.createApp({
            data(){
                return{
                    message: "값을 입력해주세요.",
                    username: "홍길동",
                    visible: false,
                    items: ['사과', '포도', '딸기'],
                };
            },
            methods:{
                hello(){
                    alert('Hello World!');
                },
                reverseMessage(){
                    this.message = this.message.split('').reverse().join("");
                }
            },
        });
        app.mount('#app')
    </script>
</body>
</html>

※ v- 접두어가 붙은 특수 속성을 디렉티브(directive) 라고 함.

바인딩(v-bind)

v-bind 속성은 데이터(상태) 속성에 바인딩할 때 사용하는 특수 속성으로, 바인딩 된 DOM은 placeholder 속성을 Vue 인스턴스의 message 속성으로 최신 상태 유지 하지만 단방향으로 바인딩 되어 input 태그에서 value를 변경 했을 때 상태 값은 변경되지 않음.

<input type="text" v-bind:placeholder="message">

<script>
        const app = Vue.createApp({
            data(){
                return{
                    message: "값을 입력해주세요.",
                };
            },
        });
        app.mount('#app')
</script>

이벤트 핸들링(v-on)

사용자가 앱과 상호 작용할 수 있게 하기 위해 v-on 디렉티브를 사용하여 Vue 인스턴스의 메소드(methods)를 호출

<input type="text" v-bind:placeholder="message">
<hr>
<button v-on:click="reverseMessage">click</button>

<script>
        const app = Vue.createApp({
            methods:{
                reverseMessage(){
                    this.message = this.message.split('').reverse().join('');
                }
            },
        });
        app.mount('#app')
</script>

버튼을 누르면 message 값이 reverse 되어 나온다.

양방향 바인딩(v-model)

value 변경 시 상태값도 변경하고 싶을 때 v-model로 상태값도 변경 가능

<p>{{username}}</p>
<input type="text" v-model="username">

<script>
        const app = Vue.createApp({
            data(){
                return{
                    username: "홍길동",
                };
            },
        });
        app.mount('#app')
</script>

조건문(v-if)

<p v-if="visible">보임</p>
<button type="button" v-on:click="visible = true">visible</button>

<script>
        const app = Vue.createApp({
            data(){
                return{
                    visible: false,
                };
            },
        });
        app.mount('#app')
</script>

버튼을 누르면 '보임'이라는 글자가 화면에 나타남

반복문(v-for)

v-for는 배열에서 데이터를 가져와 아이템 목록을 표시

<ul>
    <li v-for="item in items">{{item}}</li>
</ul>

<script>
        const app = Vue.createApp({
            data(){
                return{
                    items: ['사과', '포도', '딸기'],
                };
            },
        });
        app.mount('#app')
</script>

• 정보시스템을 구축하기 위한 데이터 관점의 업무 분석 기법으로 현실세계의 데이터(what)를 약속된 표기법으로 표현하는 과정이다.

• 데이터베이스를 구축하기 위한 분석 및 설계의 과정이라고 할 수 있다.

📄데이터 모델링 목적

1. 업무정보를 구성하는 기초 정보들을 일정한 표기법으로 표현하여 정보시스템 구축의 대상이 되는 업무 내용을 정확하게 분석하는 것
2. 분석된 모델로 실제 데이터베이스를 생성하여 개발 및 데이터관리에 사용하기 위한 것

데이터 모델링은 단지 데이터베이스만을 구축하기 위한 용도로 쓰이는 것이 아니라 데이터 모델링 자체로도 업무를 설명하고 분석하는 부분에서 매우 중요한 의미가 있다.

🚨데이터 모델링 유의점

1. 중복(Duplication)

• 데이터 모델은 같은 데이터를 사용하는 사람, 시간, 그리고 장소를 파악하는 데 도움을 준다.
• 데이터베이스가 여러 장소에 같은 정보를 저장하는 잘못을 하지 않도록 한다.

  2. 비유연성(Inflexibility)

• 데이터 모델을 어떻게 설계했느냐에 따라 사소한 업무변화에도 데이터 모델이 수시로 변경되어 유지보수의 어려움을 가중시킬 수 있다.
• 데이터의 정의를 데이터의 사용 프로세스와 분리함으로써 데이터 모델링은 데이터 혹은 프로세스의 작은 변화가 애플리케이션과 데이터 베이스에 중대한 변화를 일으킬 수 있는 가능성을 줄인다.

  3. 비일관성(Inconsistency)

• 데이터 중복이 없더라도 비일관성은 발생할 수 있다.
• ex) 신용 상태에 대한 갱신 없이 고객의 납무 이력 정보를 갱신하는 경우 → 개발자가 서로 연관된 다른 데이터와 모순된다는 고려 없이 일련의 데이터를 수정할 수 있기 때문에 이와 같은 문제 발생
• 데이터 모델링을 할 때 데이터와 데이터 간의 상호 연관 관계에 대해 명확하게 정의한다면 이러한 위험을 사전에 예방하는데 도움을 줄 수 있다.

오늘의집 클론코딩 컴포넌트끼리 값 전달하기

[storeManagement.js] 코드 일부

import React, {useEffect, useState} from 'react';
import ProductManagement from "./productManagement";
import InfoUpdate from "./infoUpdate";
import { SidebarItem } from './sidebarItem';
import '../css/store.css';
import StoreInventory from "./store_inventory";
import StoreProduct from "./store_product";
import StoreStatus from "./store_status";

function StoreManagement() {
    const [productInfo, setProductInfo] = useState(null);
    const [productCount, setProductCount] = useState(null);
// 상품 리스트 불러오기
    const fetchProductInfo = async (storenum) => {
        try {
            const response = await fetch(`http://localhost:80/product/productList?storenum=${storenum}`, {
                method: 'GET'
            });

            if(response.ok){
                const data = await response.json();
                setProductInfo(data);
            }else {
                console.error('Failed to fetch user info');
            }
        } catch (error) {
            console.error('Error fetching user info:', error);
        }
    };

    // 상품 개수 불러오기
    const fetchProductCount = async (storenum) => {
        try {
            const response = await fetch(`http://localhost:80/product/productCount?storenum=${storenum}`, {
                method: 'GET'
            });
            if(response.ok){
                const data = await response.json();
                setProductCount(data);
            }else {
                console.error('Failed to fetch user info');
            }
        } catch (error) {
            console.error('Error fetching user info:', error);
        }
    };
<중략>
    <section className="store-content-section store-item">
        {/*컴포넌트에 값 전달*/}
        {activeMenu === "상품 관리" && <StoreProduct productcount={productCount} productinfo={productInfo}/>}
        {activeMenu === "재고 관리" && <StoreInventory />}
        {activeMenu === "매출 현황" && <StoreStatus />}
        {activeMenu === "정보 변경" && <InfoUpdate />}
    </section>

db에서 저장한 값을 storeManagement.js 컴포넌트에서 매개변수에 저장시켜주고 store_product.js 컴포넌트로 전달하기 위해 store_product.js를 StoreProduct로 임포트 시켜주고 컴포넌트를 불러온다.

참조 블로그

https://velog.io/@sojeong0302/React-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%97%90-%EA%B0%92-%EC%A0%84%EB%8B%AC%ED%95%98%EA%B8%B0

국취제 끝나기 직전 마지막 스프링 프로젝트로 오늘의집을 클론코딩하는데, 이때 쓰일 쇼핑 카테고리별 상품을 크롤링하는 코드를 작성했다.

보완할 점

오늘의 집 카테고리는 이렇게 생겼는데, 여기서 메인 카테고리와 하위 카테고리, 구분선 밑의 다른 메인 카테고리의 아이디를 한번에 가져오고 싶었다. 하지만 첫 크롤링인데다가 크롤링 문법에 익숙하지 않아 뭔가 알 것 같은데 해결이 되지 않았다. 그래서 결국은 큰 카테고리의 아이디는 수동으로 입력하고 하위 카테고리는 크롤링으로 가져와서 db에 저장하였다. 큰 카테고리 아이디를 가져오는 방법을 다시 알아봐야겠다.

import re
import time
import mysql.connector
from mysql.connector import Error
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.chrome.service import Service
from selenium.webdriver.common.keys import Keys
from selenium.webdriver.common.by import By
from webdriver_manager.chrome import ChromeDriverManager
from bs4 import BeautifulSoup

# MySQL에 카테고리 데이터를 삽입하는 함수
def insertCategory(category_id, majorCategory=None, subCategory=None):
    try:
        # MySQL 데이터베이스 연결
        connection = mysql.connector.connect(
            host='localhost',      # MySQL 서버 주소
            user='',      # MySQL 사용자명
            password='', # MySQL 비밀번호
            database=''   # 사용할 데이터베이스 이름
        )
        if connection.is_connected():
            cursor = connection.cursor()
            # 데이터 삽입 쿼리
            insert_query = """
                INSERT INTO category (categoryNum, majorCategory, subCategory)
                VALUES (%s, %s, %s)
            """

            # 쿼리 실행
            cursor.execute(insert_query, (int(category_id), majorCategory, subCategory))
            connection.commit()  # 커밋하여 데이터베이스에 반영
            print(f'카테고리 [{category_id}]가 DB에 저장되었습니다.')

    except Error as e:
        print(f'오류 발생: {e}')
    finally:
        if connection.is_connected():
            cursor.close()
            connection.close()  # 데이터베이스 연결 종료

# 판매자정보 삽입 함수
def insertStore(store):
    try:
        # MySQL 데이터베이스 연결
        connection = mysql.connector.connect(
            host='localhost',      # MySQL 서버 주소
            user='root',           # MySQL 사용자명
            password='1234',       # MySQL 비밀번호
            database='myhouse'     # 사용할 데이터베이스 이름
        )
        if connection.is_connected():
            cursor = connection.cursor()
            # 스토어 중복 여부 확인
            check_query = "SELECT COUNT(*) FROM store WHERE storeName = %s"
            cursor.execute(check_query, (store,))
            count = cursor.fetchone()[0]

            # 중복이 없는 경우에만 삽입
            if count == 0:
                insert_query_store = "INSERT INTO store (storeName) VALUES (%s)"
                cursor.execute(insert_query_store, (store,))
                connection.commit()
                print(f'스토어 [{store}]가 DB에 저장되었습니다.')
            else:
                print(f'스토어 [{store}]는 이미 DB에 존재합니다.')
    except Error as e:
        print(f'오류 발생: {e}')
    finally:
        if connection.is_connected():
            cursor.close()
            connection.close()  # 데이터베이스 연결 종료

# 판매자 번호 가져오기
def get_store_id(store_name):
    try:
        # MySQL 데이터베이스 연결
        connection = mysql.connector.connect(
            host='localhost',      # MySQL 서버 주소
            user='root',           # MySQL 사용자명
            password='1234',       # MySQL 비밀번호
            database='myhouse'     # 사용할 데이터베이스 이름
        )
        if connection.is_connected():
            cursor = connection.cursor()
            # store_name이 이미 존재하는지 확인
            select_query = "SELECT storeNum FROM store WHERE storeName = %s"
            cursor.execute(select_query, (store_name,))
            result = cursor.fetchone()

            if result:
                # store_name이 이미 존재하면 해당 store_id 반환
                return result[0]
    except Error as e:
        print(f'오류 발생: {e}')
        return None
    finally:
        if connection.is_connected():
            cursor.close()
            connection.close()  # 데이터베이스 연결 종료

# 상품 삽입 함수
def insertProduct(product_num, product_name, category_id, store_name):
    try:
        # MySQL 데이터베이스 연결
        connection = mysql.connector.connect(
            host='localhost',      # MySQL 서버 주소
            user='root',           # MySQL 사용자명
            password='1234',       # MySQL 비밀번호
            database='myhouse'     # 사용할 데이터베이스 이름
        )

        store_num = get_store_id(store_name)

        if connection.is_connected():
            cursor = connection.cursor()
            # 상품 중복 여부 확인
            check_query = "SELECT COUNT(*) FROM product WHERE productNum = %s"
            cursor.execute(check_query, (product_num,))
            count = cursor.fetchone()[0]

            # 중복이 없는 경우에만 삽입
            if count == 0:
                # 데이터 삽입 쿼리
                insert_query_product = "INSERT INTO product (productNum, productName, categoryNum, storeNum) VALUES (%s,%s,%s,%s)"
                # 쿼리 실행
                cursor.execute(insert_query_product, (int(product_num), product_name, int(category_id), store_num))
                connection.commit()  # 커밋하여 데이터베이스에 반영
                print(f'상품코드 [{product_num}], 상품명 [{product_name}], 카테고리 [{category_id}], 판매자 [({store_num}), {store}]가 DB에 저장되었습니다.')
            else:
                print(f'상품명 [{product_name}]는 이미 DB에 존재합니다.')
    except Error as e:
        print(f'오류 발생: {e}')
    finally:
        if connection.is_connected():
            cursor.close()
            connection.close()  # 데이터베이스 연결 종료

# 크롬 드라이버 설정
options = Options()
service = Service(ChromeDriverManager().install())
driver = webdriver.Chrome(service=service, options=options)

# 카테고리 ID가 포함된 URL
base_url = 'https://ohou.se/store/category?category_id='

# 페이지 URL
url = 'https://ohou.se/store/category?category_id=34000000'  # 초기 페이지 URL
driver.get(url)
time.sleep(3)  # 페이지 로드 대기

# 페이지 소스를 BeautifulSoup으로 파싱
soup = BeautifulSoup(driver.page_source, 'html.parser')

# 특정 div나 h2 태그 내에서만 a 태그를 찾고 싶다면
h2_elements = soup.find_all('h2', class_='commerce-category-list__title')
tree_div_elements = soup.find_all('div', class_='commerce-category-tree__entry__header')

# 각 요소 내에서 a 태그를 찾기
category_links = []
for element in h2_elements + tree_div_elements:
    category_links.extend(element.find_all('a', href=True))  # 해당 요소 내에서 모든 a 태그 추가

# 이후 category_id, category_names 추출
category_ids = []
category_names = []

for link in category_links:
    href = link['href']
    match = re.search(r'category_id=(\d+)', href)
    category_name = link.get_text().strip()

    if match:
        category_id = match.group(1)
        if "O!" not in category_name and "렌탈" not in category_name and "수입주방관" not in category_name and category_id not in category_ids:
            category_ids.append(category_id)
            category_names.append(category_name)

# 카테고리 아이디와 이름을 묶어서 딕셔너리로 변환
category_dict = dict(zip(category_ids, category_names))
print(category_dict)

previous_major_category = None

for category_id, category_name in category_dict.items():
    # 세 번째, 네 번째 자리가 '0'이면 majorCategory로 설정
    if (len(category_id) >= 3 and category_id[2] == '0') and (len(category_id) >= 4 and category_id[2] == '0' and category_id[3] == '0'):
        majorCategory = category_name
        subCategory = None
        previous_major_category = majorCategory
    else:  # 세 번째, 네 번째 자리가 '0'이 아니면 subCategory로 설정
        majorCategory = previous_major_category  # 이전 majorCategory를 그대로 사용
        subCategory = category_name

    # MySQL 데이터베이스에 카테고리 저장
    insertCategory(category_id, majorCategory, subCategory)

# 각 카테고리 ID에 대해 상품 크롤링
for category_id, category_name in category_dict.items():
    # 세 번째 자리가 '0'이 아닌 경우만 크롤링
    if (len(category_id) >= 3 and category_id[2] != '0') or (len(category_id) >= 4 and category_id[2] == '0' and category_id[3] != '0'):
        target_product_count = 10
        print(f"\n카테고리 {category_id}에서 크롤링 시작")

        driver.get(base_url + category_id)
        time.sleep(1)

        product_list = []
        product_nums = []

        # 상품 정보 수집
        while len(product_list) < target_product_count:
            soup = BeautifulSoup(driver.page_source, 'html.parser')
            articles = soup.find_all('article', class_='css-fy16k5')

            for article in articles:
                link = article.find('a', href=True)
                if link:
                    href = link['href']
                    match = re.search(r'/productions/(\d+)', href)
                    if match:
                        product_id = match.group(1)
                        if product_id not in product_nums:
                            product_nums.append(product_id)
                            store = article.select_one('div.product-brand').get_text().strip()
                            product_name = article.select_one('span.product-name').get_text().strip()

                            if "쿠폰" not in product_name:
                                product_list.append({
                                    'productNum': product_id,
                                    'store': store,
                                    'product': product_name
                                })
                                insertStore(store)
                                insertProduct(product_id, product_name, category_id, store)

                            if len(product_list) >= target_product_count:
                                break

            driver.find_element(By.TAG_NAME, 'body').send_keys(Keys.END)
            time.sleep(1)
        print(f"상품: {product_list}")

# 드라이버 종료
driver.quit()

커스텀 select box를 만든 계기

select option 코드를 스크립트로 생성한 후 option의 폰트를 변경하기 위해 구글링을 해서 찾아봤지만 option의 폰트를 바꾸기 위한 글은 찾을 수 없었고 select option 스타일을 변경하여 ul, li 코드를 이용해 셀렉트 박스를 만든 사례가 더 많았다. 그래서 나도 셀렉트 박스의 디자인을 변경하기 위해 다른 분들의 코드들을 보고 코드를 변경해보았다.

HTML 코드

    <div class="league_season">
        <button type="button" class="selectbox-btn">시즌 선택</button>
        <ul class="selectbox-option">
            <script>
                let season = 2013;
                let seasonList = [];
                let today = new Date();
                let year = today.getFullYear();
                for (let i = 0; i < 12; i++) {
                    seasonList.push(season + i);
                }
                seasonList.forEach((item) => {
                    document.write(`<li><button type="button" class="option-btn">${item}</button></li>`);
                });
            </script>
        </ul>
    </div>

CSS 코드

.league_season{
    position: relative;
    width: 150px;
    margin: 10px 20px 10px 10px;
    float: right;
}

.selectbox-btn {
    width: 150px;
    padding: 13px 30px 13px 14px;
    font-size: 22px;
    line-height: 14px;
    background-color: #fff;
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    background: url("../images/select-down_img.png") center right 10px no-repeat;
    background-size: 14px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.selectbox-option{
    display: none;
    position: absolute;
    width: 100%;
    left: 0;
    border: 1px solid #C4C4C4;
    box-sizing: border-box;
    box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
}

.selectbox-btn.on {
    background: url("../images/select-up_img.png") center right 10px no-repeat;
    background-size: 14px;
}

.selectbox-btn.on+.selectbox-option {
    display: block;
}

.selectbox-btn li {
    height: 40px;
    padding: 5px 8px;
    box-sizing: border-box;
}

.option-btn{
    width: 100%;
    padding: 10px;
    border: none;
    font-size: 22px;
    background-color: #fff;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    /* 말줄임 */
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.option-btn:hover, .option-btn:focus{
    background-color: #e4f1ff;
}

JS 코드

const btn = document.querySelector('.selectbox-btn');
const list = document.querySelector('.selectbox-option');

btn.addEventListener('click', () => {
    btn.classList.toggle('on');
});

list.addEventListener('click', (event) => {
    if (event.target.nodeName === "BUTTON") {
        btn.innerText = event.target.innerText;
        btn.classList.remove('on');
    }
});

window.addEventListener('click', (event) => { 
    if (!btn.contains(event.target)) {
        btn.classList.remove('on');
    }
});

https://www.heidisql.com/download.php

위 링크에 접속한 후 Installer를 클릭해 다운받아줍니다.

exe 파일을 열게 되면 설치 시 보여줄 언어를 선택할 수 있습니다. 한국어는 설치 언어에 없어서 영어로 선택했습니다.

동의 후 다음을 눌러줍니다.

✔ 바탕화면 바로가기 생성 ✔ sql 예제 파일 생성 경로 ✔ sql 확장자명을 가진 파일을 heidisql로 연결 ✔ 자동 업데이트 ✔ 자동으로 heidisql에 보고 취향대로 선택해서 설치하면 될 것 같습니다.

Click Finish to exit Setup 선택에 첫 설치 시에는 컴퓨터를 다시시작 할건지 물어보는 라디오버튼이 있는데 No를 누르면 됩니다.

실행 후 신규를 눌러서 세션을 생성해줍니다. 사용할 네트워크 유형을 선택하고 암호까지 입력하게 되면 데이터베이스 텍스트필드에 있는 파란삼각형을 누르면 위 사진과 같이 뜨는데 mydata 빼고 다 초기에 사용 가능한 데이터베이스입니다. 저는 mysql로 선택해서 저장 후 열기 해줬습니다.

신규 생성한 세션을 우클릭한 후 데이터베이스 생성을 누르면 새 창이 하나 뜨는데 데이터베이스 이름을 지정하고 euckr_korean_ci 조합을 선택해서 생성해주면 됩니다.

새로 생성한 데이터베이스를 사용하려면 데이터베이스를 클릭해주어야 연결이 되기 때문에 클릭 후 쿼리문으로 테이블, 데이터 삽입 후 사용하면 됩니다.

JDK 17 다운로드

https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html

오라클 사이트에서 플랫폼을 담당하는 JDK를 다운받아줍니다. 제가 사용하는 운영체제는 윈도우이기 때문에 Windows x64 Installer로 다운받아줍니다. exe 파일을 실행시키고 파일 위치를 지정한 후 설치해줍니다. 저는 따로 Java 파일을 만든 후 C:\Java\jdk-17로 위치를 지정해줬는데 기본은 C:\Program Files\Java\jdk-17로 되어 있기 때문에 변경하지 않아도 상관 없습니다.

이클립스 다운로드

https://www.eclipse.org/downloads/

링크에 접속하면 바로 다운로드 할 수 있도록 되어 있기 때문에 위 사진의 다운로드 버튼을 눌러 이클립스를 다운로드 해줍니다. 다운로드 한 이클립스 인스톨러를 실행시키면 아래와 같이 실행되게 되는데, 학교 실습에서는 웹도 다루기 때문에 두번째에 Web Developers로 다운로드 해줍니다. 파일 위치를 찾을 수 있다면 기본 위치에 설치해도 상관 없지만 저는 Java폴더에 위치시켜주었습니다. INSTALL을 클릭하면 창이 하나 뜨는데 Accept All을 눌러줍니다. 런처를 누르고 워크스페이스의 위치를 지정해줍니다.

아파치 톰캣 9.0 다운로드

https://tomcat.apache.org/download-90.cgi

아파치 톰캣에 들어간 후 왼쪽 Download에서 Tomcat 9를 찾습니다. Binary Distribution에서 Core 옵션의 32-bit/64-bit Widnows Service Installer를 다운받아줍니다.

전체 컴포넌트를 받아줍니다.

서버 포트는 8005, HTTP 포트는 80, User Name은 admin, password는 취향껏 기억할만한 번호로 입력하면 됩니다.