프로젝트를 전형적으로 Frontend / Backend로 나눴다고 가정한다. 프로젝트 트리는 대략 다음과 같다.

utrip/
 ┣ utrip-backend   ← 백엔드（Java / Spring Boot）
 ┣ utrip-frontend  ← 프론트엔드（React）
 ┣ README.md
 ┗ application.properties ← 환경 설치

1️⃣ 사전 환경 설치

먼저 아래 환경이 필요하다:

• Java 17 (JDK)
• MySQL
• Node.js

✔️ 설치 여부 확인

터미널에서 아래 명령어 실행:

java -version
mysql --version
npm -v

👉 11.12.1 같은 버전 번호가 나오면 정상 설치 완료

👉 "command not found"가 나오면 → 설치 안 된 상태

2️⃣ Java 17 (JDK) 설치

🔗 https://www.oracle.com/java/technologies/downloads/#jdk22-mac

✔️ 설치 방법

1. 원하는 Java 버전 다운로드
2. 내 컴퓨터 아키텍처 확인:

uname -m

• x86_64 → Intel (64비트)
• arm64 → M1 / M2 / M3

3. 맞는 버전 다운로드 후 설치 진행 (계속 클릭)

✔️ 설치 확인

java -version

👉 예시 출력:

java version "17.0.19" 2026-04-21 LTS

→ 정상 설치 완료

3️⃣ MySQL 설치

🔗 https://dev.mysql.com/downloads/

✔️ 반드시 설치해야 하는 것

• MySQL Community Server
• MySQL Workbench

3.1 MySQL Community Server

✔️ 설치 방법

• OS 선택
• ARM / x86 확인 후 다운로드

⚠️ 주의

설치 중 root 비밀번호 설정 필수 , 반드시 기억해야 함

3.2 MySQL Workbench

• OS / 버전 선택
• ARM / x86 맞게 다운로드

✔️ 설치 확인

mysql --version

👉 예시:

mysql  Ver 9.6.0 for macos15.7 on arm64 (Homebrew)

→ 정상 설치 완료

4️⃣ Node.js 설치

🔗 https://nodejs.org/en/download/current

✔️ 설치 방법

• 다운로드 후 바로 설치

✔️ 설치 확인

npm -v

👉 예시:

11.12.1

→ 정상 설치 완료

5️⃣ 프로젝트 실행

5.1 프론트엔드 실행

1. VSCode로 프로젝트 열기
2. 터미널에서 frontend 폴더 이동

npm install

👉 의존성 설치 (시간 소요), 그 다음에 프로젝트 실행:

npm start

✔️ 실행 결과:

You can now view utrip-frontend in the browser.

Local: http://localhost:3000

webpack compiled successfully

👉 브라우저에서 http://localhost:3000 접속, localhost 뒤에 나오는 prot 번호는 다를 수 있음.

5.2 백엔드 실행

./mvnw spring-boot:run

👉 프로젝트에 mvnw 파일이 있으면 바로 실행 가능

6️⃣ MySQL 설정 및 DB 생성

6.1 MySQL 실행

• Workbench 실행
• root 비밀번호 입력 후 접속

6.2 application.properties 설정

프로젝트 내 파일 수정:

spring.datasource.url=jdbc:mysql://localhost:3306/utrip
spring.datasource.username=xxx
spring.datasource.password=xxx

👉 실제 MySQL 정보와 동일하게 입력

6.3 데이터베이스 생성

1. Workbench → New SQL Tab

2. 프로젝트에 맞는 SQL 쿼리 입력
3. ⚡ 버튼 클릭하여 실행

6.4 DB 생성 확인

• 상단 탭 → Schemas 선택

👉 프로젝트 이름 아래 Tables 생성 확인 가능

✅ 전체 흐름 요약

1. 환경 설치 (Java / MySQL / Node)
2. 프론트 실행 (npm start)
3. 백엔드 실행 (spring-boot:run)
4. DB 연결 및 생성

Window - Package Management - Package Manager - Unity Registy 여기에 들어가서,

uGUI 검새해서 다운로드, 그러면 다 해결 돼요~

저도 이 것 때문에 고생해서 공유합니다!

본 파이썬 강의는 맥북용 Visual Studio Code 편집기를 기반으로 진행되는 강의입니다. 우선 해당 프로그램을 컴퓨터에 다운로드받는 걸 권장드립니다. 또한 맥북과 윈도우스는 실행 환경이 좀 다를 수 있으니 참고 부탁드립니다. https://code.visualstudio.com/download

컴파일 언어와 인터프리터 언어

개념

• 컴파일 언어 → 0과 1만 읽을 수 있는 컴퓨터를 위해, 사람의 언어를 컴파일을 통해 컴퓨터가 이해 가능한 언어로 해석해.

• 인터프리터 언어 → 코드를 한 줄씩 해석하면서 실행해.

• C 언어는 컴파일 언어고, 파이썬은 인터프리터 언어야.

파이썬 기본 규칙

• 들여쓰기를 엄격하게 지켜야 해.
• 문법을 깔끔하게 지켜야 해.

파이썬은 어디에 쓰일까?

• 웹 프로그래밍: Django, FastAPI, Flask
• 인공지능과 머신러닝: TensorFlow, PyTorch
• 수치 연산 프로그래밍: NumPy
• 데이터 분석: pandas
• 데이터베이스 프로그래밍: SQLite, MySQL

이것들이 파이썬이랑 무슨 관계냐고?

→ 위에 나열한 것들은 모두 Python 언어에서 사용하는 도구(라이브러리 또는 프레임워크)야.

pip install django

터미널에 위 명령어를 작성해서 실행하면, 로컬또는 가상 환경에 바로 설치해서 사용할 수 있어.

변수(Variable)

먼저 파이썬 문법을 배우기 전에 변수에 대해 알아보자.

변수 = 데이터를 담아두는 상자

a = 3

위 연산을 보면, 우리는 보통 a는 3과 같다고 말하지만, 코딩에서는 "3이라는 숫자를 a라는 상자에 담는다"라고 해석해.

그래서 파이썬으로 코딩하다보면 a = a + 1 와 같은 연산을 많이 보게 될거야, 하지만 만약 우리가 평소에 알던 수학 연산으로 생각하면 완전 말이 안되는 연산이지, 이 규칙을 이해하기 위해서 상자 안에 무엇을 담을 수 있을까 알아 볼까?

자료형(Data Type)

상자 안에 담는 내용을 알기 위해 자료형(Data Type)을 알아보자.

자료형은 다음과 같은 종류가 있어:

• 숫자
• 문자열
• 불(Boolean)
• 리스트(List)
• 튜플(Tuple)
• 딕셔너리(Dictionary)
• 집합(Set)

이렇게 다양한 자료형을 가진 데이터를 변수 상자에 담을 수 있어.

자료형은 컴퓨터가 데이터를 어떤 종류로 인식하고 다루는지 알려주는 라벨표라고 생각하면 쉬워.

예를 들어:

a = "안녕하세요"   # 문자열
a = 12345        # 숫자

파이썬은 데이터의 종류를 자료형으로 구분해서, 어떤 연산을 할 수 있는지, 어떻게 저장할지를 결정해줘.

숫자형(Number)

먼저 숫자형을 알아보자. 크게 두 가지를 사용해.

1. int (정수형)

소수점이 없는 숫자.

• 양수, 음수, 0 모두 가능해.
• 나이, 페이지 번호, 사람 수 등에 사용해.

a = 10000       # 양의 정수
b = -5          # 음의 정수
c = 0           # 0

print(type(a))  # <class 'int'>가 terminal에 출력됨

() 안에 b, c로 바꿔서 뭐가 출력되는지 직접 확인해봐.

실행 방법

코드는 보통 편집기에 작성해. 터미널을 열어서 이렇게 입력하면 실행할 수 있어:

python3 파일이름.py

터미널은 상단 메뉴바에서 Terminal - New Terminal에서 열 수 있어.

연산

연산자는 이렇게 있어:

• 더하기 +
• 빼기 -
• 곱하기 *
• 나누기 /
• 제곱 **
• 나머지 %
• 몫 //

정수는 사칙연산(+, -, *, /)을 주로 사용해.

a = 123
b = 1.9
c = 7

print(a + c)    # 130이 출력됨

나머지와 몫이 좀 낯설 수 있는데, 예시를 들어보자. 7 ÷ 2 = 몫 3, 나머지 1이야.

d = 10

print(d // 3)   # 3 출력
print(d % 3)    # 1 출력

2. float (실수형)

소수점이 있는 숫자.

• 키, 몸무게, 평균 점수 등에 사용해.

x = 3.14
y = -2.5
z = 0.0
height = 158.7

print(type(x))  # <class 'float'> 출력

() 안에 y, z로 바꿔서 확인해봐.

문자열(String)

이제 문자열을 알아보자.

문자열을 표현하는 방법은 4가지가 있어:

• "안녕" (큰따옴표)
• '안녕' (작은따옴표)
• """안녕""" (큰따옴표 3개)
• '''안녕''' (작은따옴표 3개)

다양한 문자열 표현 방식은 문자열 안에 따옴표를 포함할 때 특히 유용해.

e = "배가 고프다!"         
f = '123'                  
g = """I'm hungry"""      
h = '''I miss you!'''     

print(type(e))  # <class 'str'>

줄바꿈

줄 바꿈을 하고 싶으면 \n을 사용하면 돼.

i = "오늘은 날씨가 좋은데 \n 뭘 먹을까나?"
print(i)

문자열 연산

문자열(str)은 숫자처럼 더하기(+) 와 곱하기(*) 연산을 할 수 있어. 하지만 빼기(-)나 나누기(/)는 할 수 없어.

1. 문자열 더하기 (문자열 연결)

• '+' 기호를 사용하면 두 문자열을 붙여서 하나의 문자열로 만들 수 있어.

name = "선배님"
greeting = "안녕하세요!"

print(greeting + name)           # 안녕하세요!선배님
print(greeting + " " + name)     # 안녕하세요! 선배님   (공백 추가)

first = "Hello"
second = "World"
print(first + " " + second)      # Hello World

• 문자열과 숫자를 바로 더하면 오류가 발생할 수 있어!

    print("나는 " + 14 + "살입니다.")   # ← 오류 발생!

2. 문자열 곱하기 (반복)

• 문자열과 숫자를 *로 곱하면, 그 문자열을 숫자만큼 반복해.

  print("안녕" * 3)          # 안녕안녕안녕
  print("★" * 10)            # ★★★★★★★★★★
  print("=" * 20)            # ====================

문자열 인덱싱 (Index)

• 문자열은 하나하나의 글자가 순서대로 나열되어 있어.

• 각 글자에 번호(위치)를 붙여서 접근할 수 있는데, 이걸 인덱싱이라고 해.

• 인덱스는 항상 0부터 시작해!

• 대괄호 [ ]를 사용해서 접근.

• 코드 예시:

  fruit = "apple"
  
  print(fruit[0])   # a   ← 첫 번째 글자
  print(fruit[1])   # p
  print(fruit[2])   # p
  print(fruit[3])   # l
  print(fruit[4])   # e
  
  # 음수 인덱스 (뒤에서부터 세기)
  print(fruit[-1])  # e   ← 마지막 글자
  print(fruit[-2])  # l
  print(fruit[-3])  # p

  ** print할 때 범위를 벗어나면 오류가 발생하니까 주의해.

• 시각화로 이해하기:

  문자열:   a  p  p  l  e
  인덱스:    0  1  2  3  4
  음수인덱스:      -3 -2 -1

문자열 슬라이싱 (Slicing)

• 인덱스를 이용해서 문자열의 일부분을 잘라서 가져오는 것을 슬라이싱이라고 해.

• 형식: 문자열[시작:끝], 시작 위치는 포함,끝 위치는 포함하지 않음.

  word = "python"
  
  print(word[0:2])    # py     (0부터 2 전까지)
  print(word[2:5])    # tho
  print(word[0:4])    # pyth
  
  # 처음부터 특정 위치까지
  print(word[:3])     # pyt    (0부터 3 전까지)
  
  # 특정 위치부터 끝까지
  print(word[3:])     # hon
  
  # 전체 문자열 복사
  print(word[:])      # python

스택, 큐는 일종의 규칙이다. 이 두 개는 추상적 데이터 구조라고 부른다.

추상적 데이터 구조는 자료 구조의 하나의 형태이다. 코드로 정의된 것이 아니라 그렇게 부른다.

스택(Stack)

먼저 스택에 대해서 알아볼까?

우리가 샌드위치를 만들었다고 가정해 보자. 접시에 차곡차곡 쌓을 때 가장 최근에 만든 샌드위치가 맨 위에 있겠지, 반대로 가장 처음에 만든 샌드위치는 바닥에 깔려 있어.

그럼 우리가 샌드위치를 먹을 때 가장 마지막에 만든 샌드위치를 가장 먼저 먹겠지. 우리는 이를 Last In, First Out (LIFO)이라고 해.

큐(Queue)

큐는 말 그대로 줄을 선다고 생각하면 돼. 가장 먼저 온 사람이 첫 줄에 서겠지.

간단한 예시를 들면, 콘서트 티켓팅이 바로 큐 규칙을 사용해. 예매 버튼을 빨리 누른 사람이 티켓팅에 성공하지!

우리는 이를 First In, First Out (FIFO)이라고 해.

정리

그럼 정리해 보면,

• 스택은 샌드위치를 쌓는 것 같아. → 위에서만 요소를 읽거나 삭제할 수 있어.

• 큐는 줄을 서는 것 같아. → 새로운 요소는 큐 맨 뒤에 추가되고, → 큐의 맨 앞 요소만 읽거나 삭제될 수 있어.

스택과 큐는 추상적 데이터 구조라, 규칙들만 이해하면 돼.

언제 사용할까?

언제 큐를 쓰고 언제 스택을 쓰는지 질문한다면,

• 웹 서핑을 한다고 생각해 봐. 뒤로 가기를 누르면 바로 앞 페이지로 넘어가지. → 이거는 스택의 개념이야.

• 큐는 → 이메일 전송 → 쇼핑몰 주문 → 콜센터 전화 같은 경우에 사용돼.

Q: 쿠버네티스는 뭐에요?

• 쿠버네티스는 컨테이너화된 워크로드(Workload) 와 서비스를 자동으로 배포, 스케일링 및 관리해주는 오픈 소스 시스템입니다.

Q: 워크로드(Workload)뭐에요?

• 워크로드는 시스템에 의해 수행되거나 처리되어야 하는 작업의 양 또는 종류를 포괄적으로 일컫는 말입니다.

• 웹 서버(Nginx, Apache), 데이터베이스(MySQL, PostgreSQL), 백엔드 API 서비스, 배치 처리 프로그램, 머신러닝 모델 추론 서비스 등 사용자에게 서비스를 제공하거나 내부 시스템을 운영하는 모든 애플리케이션이나 프로세스가 워크로드에 해당합니다.

Q: "컨테이너화"된다는 것은 무슨 의미인가요?

• 애플리케이션 코드와 그 실행에 필요한 모든 종속성 (운영체제 라이브러리, 환경 변수, 설정 파일, 런타임 등)이 하나의 컨테이너 이미지로 묶여 있음을 의미합니다.
• 또한 이 패키지(이미지)는 어떤 환경(개발자 노트북, 테스트 서버, 클라우드 환경)에서도 동일한 실행 환경을 보장하며, 실행되면 컨테이너라는 격리된 공간에서 작동합니다.

Q: 컨테이너 이미지는 무엇인가요?

• 컨테이너 이미지(Container Image)는 컨테이너를 생성하는 데 사용되는 읽기 전용 템플릿이자 독립 실행 가능한 정적 패키지입니다.
• 쉽게 말해, 애플리케이션을 실행하기 위해 필요한 모든 것(코드, 런타임, 시스템 도구, 라이브러리, 설정 파일)을 하나의 파일 시스템으로 묶어 놓은 '청사진' 또는 '스냅샷'이라고 이해할 수 있습니다.

Q: 도커의 역할은 무엇인가요?

• 이미지 생성: 개발자는 도커(Docker) 플랫폼을 사용하여 애플리케이션 코드와 모든 종속성을 묶어 컨테이너 이미지를 만듭니다.

• 컨테이너 실행: 도커 엔진은 이 컨테이너 이미지를 로드하여 도커 컨테이너라는 격리된 실행 환경을 생성합니다. 컨테이너가 실행되면, 이는 독립된 하나의 워크로드가 됩니다.

Q: 쿠버네티스의 역할(오케스트레이션)은 무엇인가요?

• 배포 및 확장: 서비스 규모가 커지면, 수십, 수백 개의 컨테이너가 필요해지고 이들을 여러 대의 서버(노드)에 분산시켜야 합니다. 이때 쿠버네티스가 등장합니다.

• 클러스터 관리: 쿠버네티스는 레지스트리에서 컨테이너 이미지를 다운로드받아 클러스터 내의 각 서버에 도커 컨테이너를 생성하고 관리합니다.

• 운영 자동화: 쿠버네티스는 컨테이너의 상태를 모니터링하며, 컨테이너가 죽으면 자동으로 다시 시작하고(Self-healing), 트래픽이 몰리면 컨테이너 수를 자동으로 늘립니다(Scaling).

Q: 도커, 쿠버네티스의 관계는 뭐에요?

• 쿠버네티스는 도커의 상위 개념이 아닙니다. 상호 보완적이며 계층적인 관계입니다.
• 도커는 애플리케이션을 포장하고 실행하는 하위 수준 기술입니다. (컨테이너 런타임 환경 제공)
• 쿠버네티스는 이 포장된 애플리케이션(컨테이너)을 대규모로 효율적으로 배포 및 관리하는 상위 수준 관리 시스템입니다. (오케스트레이션 제공)

Q: 그럼 쿠버네티스의 오케스트레이션과 자동화의 차이는 뭔가요?

• 자동화 (Automation): 개별적이고 반복적인 작업을 스크립트나 도구를 사용해 인간의 개입 없이 처리하는 것입니다. (예: 서버에 패치 설치, 백업 실행)

• 오케스트레이션 (Orchestration): 여러 개의 자동화된 작업과 시스템들을 통합하고, 이들 간의 복잡한 상호 작용 및 순서를 조율하여 전체적인 목표(워크플로)를 달성하는 것입니다.

• 오케스트레이션은 여러 자동화된 구성 요소를 엮어내는 상위 관리 기술이며, 쿠버네티스가 바로 이 컨테이너 오케스트레이션의 가장 강력하고 널리 사용되는 도구입니다.

Q: 쿠버네티스의 오케스트레이션이 제공하는 주요 기능은 뭔가요?

*Q: 도커, 도커 이미지, 컨테이너, 쿠버네티스의 상관 관계 정리 *

아래에서 언급하는 정의는 아마 수도없이 들어봤을거다, 하지만 "그래서 뭐?", 정의에 대해 아무리 여러 번 읽어도 여전히 블록체인을 이해할 수 없는 분들을 위해 이 글을 쓴다.

"블록체인은 블록에 데이터를 담아 체인 형태로 연결하여, 수많은 컴퓨터에 동시에 이를 복제해 저장하는 분삭형 데이터 저장 기술이다."

정의보다는 작동 원리 이해가 우선

1. 그림으로 보는 블록체인

출처: 데일리투머로우

2.단계별로 보는 작동 방식

정리하면 블록체인의 6단계 작동 원리를 따른다.

✅ 1단계: 거래(Transaction) 발생 및 생성

사용자 A가 사용자 B에게 디지털 자산(예: 코인)을 전송하는 등의 거래를 요청한다. 이 요청은 개인 키(Private Key)로 서명되어 거래의 유효성(소유권)을 증명한다.

✅ 2단계: 네트워크 전파 및 검증 (P2P Network)

생성된 거래는 P2P(Peer-to-Peer, 개인 간) 네트워크에 연결된 모든 노드(Node, 참여 컴퓨터)에게 전파. 노드들은 이 거래를 받아 유효성을 검증. (예: 송금자가 잔액이 충분한지, 서명이 올바른지 등)

✅ 3단계: 블록으로 모으기 (Block Creation)

유효한 것으로 검증된 거래들은 채굴자(Miner)나 검증자(Validator)와 같은 특정 노드에 의해 수집되어 하나의 블록(Block)으로 묶인다.

새로운 블록은 다음 세 가지 주요 정보로 구성된다:

✅ 4단계: 합의 및 승인 (Consensus Mechanism)

이는 새로운 블록이 정당하고 유효한지 네트워크 전체가 동의하는 과정이다.

✅ 5단계: 체인 연결 및 기록 (Chain Linkage)

합의를 통해 승인된 블록은 암호화 해시(Cryptographic Hash)를 이용하여 기존 블록체인의 맨 끝에 연결된다.

해시는 블록의 모든 정보를 압축한 고유한 지문이다.

새 블록에 포함된 '이전 블록 해시'가 블록들을 시간순으로 끊어지지 않게 체인(Chain)처럼 연결한다.

✅ 6단계: 분산 저장 및 불변성 확보 (Distribution & Immutability)

새롭게 연결된 블록체인의 사본이 네트워크에 참여하는 모든 노드에 분산 저장된다.

특징으로 보는 블록체인

블록체인이 기존 시스템과 결정적으로 다른 이유는 딱 세 가지다.

불변성, 인센티브 메커니즘, 분산 원장

1. 불변성(Immutability)과 무결성

블록체인은 거짓된 정보를 기록할 수 없다.

데이터는 해시 연결과 합의 메커니즘을 통해 한 번 기록되면, 그 누구도 임의로 수정하거나 삭제하는 것이 불가능하다, 이것이 불변성이다.

이처럼 데이터가 위변조되지 않고 원래 상태를 유지하는 성질은 무결성(Integrity)이라고 부른다. 데이터의 물결성은 데이터의 신뢰성을 극한으로 끌어올린 것이다.

2. 인센티브 메커니즘

인센티브 메커니즘이란, 분산된 네트워크 참여자들이 자신의 이익을 추구하는 과정에서 자연스럽게 네트워크 전체의 이익에 기여하도록 유도하는 경제적/기술적 설계이다.

인센티브 메커니즘은 주로 퍼블릭 블록체인에서 나타난다, 퍼블릭(무허가형) 블록체인은 신뢰할 수 없는(Trustless) 익명의 다수 참여자들로 구성되서 그렇다. 따라서 그들의 악의적인 행동을 억제하며 네트워크 유지하기 위해선 인센티브 메커니즘 꼭 필요하다.

예를들어 합의 과정(채굴 또는 검증)에 참여하여 블록체인 네트워크를 유지하는 노드(또는 사용자)들에게 보상(코인 또는 수수료)을 지급한다.

다만, 보상은 참여 노드의 '기여도'에 따라 보상이 차등 지급된다. 더 많은 자원(컴퓨팅 파워, 지분)을 투입하고 검증에 성공한 노드가 더 많은 보상을 가져갈 가능성이 크다는 뜻이다.

3. 분산 원장 (Distributed Ledger)

블록체인은 중앙 서버 없이 네트워크 참여자(노드)들에게 정보(거래 내역)가 복제되어 분산 저장되는 분산 원장(Distributed Ledger) 특성을 가진다.

이는 다수의 사용자가 서로 정보를 공유하기 때문이다.

이러한 분산 저장 방식 덕분에 특정 노드 한두 개가 다운되어도 전체 네트워크는 문제없이 유지되며, 모든 참여자가 동일한 정보를 볼 수 있어 투명성과 가용성이 보장된다.

인센티브 메커니즘 작동 방식

인센티브 메커니즘은 블록체인이 어떤 합의 알고리즘(Consensus Algorithm)을 채택하느냐에 따라 구체적인 방식이 달라진다

MUSIA ONE사용법에 앞서 곡의 구성(SONG FORM)을 알아보자.

🎵 SONG FORM

🎬 INTRO (인트로)

• 가사가 없는 전주 부분
• 분위기를 서서히 잡아주며, 곡의 시작을 알린다
• 생략 가능

🎙 VERSE (벌스)

• 노래가 본격적으로 시작되는 파트
• 스토리나 메시지를 전달하며, 노래의 분위기를 형성
• 보통 반복되며 가사는 매번 달라지는 경우가 많다

🎙 PRE-CHORUS (프리 코러스)

• 후렴으로 넘어가기 전의 연결 파트
• 긴장감과 기대감을 조성하여 감정의 고조를 유도
• 생략 가능

🌟 CHORUS (코러스 / 후렴)

• 노래의 가장 중요한 파트
• 감정이 가장 고조되는 부분이며, 가장 기억에 남도록 만들어야 한다
• 보통 반복되며, 가사나 멜로디가 거의 동일

🎙 BRIDGE (브리지)

• 보통 두 번째 코러스 이후 등장
• 주 멜로디와 다른 리듬과 분위기로 전환하여, 곡에 변화를 준다
• 코러스와 코로스를 자연스럽게 연결해주는 역할을 한다

🎬 OUTRO (아웃트로)

• 가사가 끝난 후의 마무리 파트
• 인트로와 유사한 연주로 곡의 여운을 남기며 종료

🎵 SONG FORM 한눈에 보기

🟢 벨로그는 _GitHub Flavored Markdown(GFM)_을 기반으로 하여, 표준 마크다운 문법과 일부 확장 기능을 지원한다. 🟢 마크다운은 직관적인 _문법_으로 문서 작성과 콘텐츠 제작을 효율적으로 만들어주는 도구

🟧 제목 추가

🔻 제목은 # 기호를 사용하여 1~6단계까지 표현

# H1 제목
## H2 부제목
### H3 소제목
#### H4
##### H5
###### H6

🔎 미리보기

H1 제목

H2 부제목

H3 소제목

H4

H5

H6

🟧 텍스트 서식

🔻 텍스트를 강조하거나 스타일을 적용할 수 있다

**굵은 글씨** 또는 __굵은 글씨__
*기울임* 또는 _기울임_
~~취소선~~
`인라인 코드`

🔎 미리보기 굵은 글씨 또는 굵은 글씨 기울임 또는 기울임 취소선 인라인 코드

🟧 목록 (Lists)

🔻 순서 없는 목록(글머리 기호)

- 항목 1
- 항목 2
  - 하위 항목 2.1
  - 하위 항목 2.2
* 대시(-) 대신 * 사용 가능

🔎 미리보기

• 항목 1
• 항목 2
  • 하위 항목 2.1
  • 하위 항목 2.2
• 항목 3

🔻 순서 있는 목록(번호)

1. 첫 번째
2. 두 번째

🔎 미리보기

1. 첫 번째
2. 두 번째

🟧 표

🔻 열을 |로 구분, 헤더는 -로 정의

| 제목1 | 제목2 | 제목3 |
|-------|-------|-------|
| 내용1 | 내용2 | 내용3 |
| 내용4 | 내용5 | 내용6 |

🔎 미리보기

🟧 수평선

🔻 섹션을 구분할 때 사용

---
또는
***

🔎 미리보기

🟧 체크리스트

- [x] 완료된 작업
- [ ] 미완료 작업

🔎 미리보기

• 완료된 작업
• 미완료 작업

🟢 svg는 벡터 이미지 형식으로, 크기를 조정해도 퀄리티를 잃지 않는 파일이다. 🟢 벡터는 _크기_와 _방향_을 모두 가진 양이다, 예를들어 힘, 가속도.

🟧 svg의 기본 개념

🔸 SVG(Scalable Vector Graphics) 🔸 벡터 그래픽 형식으로, XML 기반의 텍스트 파일로 저장 🔸 이미지의 경로, 모양, 색상을 수학적 공식으로 정의하여, 크기 조정 시에도 품질 손실 없음

🟧 svg의 활용처

🔸 웹 디자인: 스케일 가능한 아이콘, 로고, 그래픽 제작. 🔸 인쇄: T-셔츠 등 스케일이 중요한 템플릿 제작. 🔸 대화형 그래픽: JavaScript를 통해 애니메이션 및 동적 그래픽 구현.

🟧 svg의 장단점

🔸 장점

• 크기 조정 시 품질 유지 가능
• 압축 시 파일 크기 감소 가능, 품질 저하 없음
• 스크린 리더로 텍스트 읽기 가능
• JavaScript로 인터랙티브 가능

🔹 단점

• 사진이나 복잡한 이미지에는 부적합(예: 원화)
• 오래된 브라우저(예: IE 8 이하)에서 호환성 문제

🟧 svg, JPG와 PNG와의 비교

친절하게 어느 스프레드에 오류가 발생했는지 알려줄 때도 있고, 그냥 PDF 저장 오류만 뜰 수 있음. 우선 어느 스프레드에 오류가 발생했는지 찾는 방법부터 알아보자

오류난 스프레드 찾는 방법

1️⃣ 바탕화면에 텍스트 문서 하나 만들기 🔸 파일명은 DisableAsyncExports 🔸 본문 내용은 그냥 공백으로 둔다

2️⃣ adobe Indesign이 있는 파일을 찾는다 🔸 보통 따로 지정하지 않았더라면 로콜 디스크(C:) Program Files나 Program Files(x86)에 있음 🔸 파일 진입 후 Adobe 파일 찾기 🔸 해당 파일에서 내가 지금 작업하고 있는 인디자인 버전 찾기

3️⃣ 바탕화면에 생성한 _DisableAsyncExports_을 원하는 인디자인 파일에 드래그해서 안에다 넣기

4️⃣ 인디자인에 돌아와서 창-유틸리티-배경 작업 열기

5️⃣ 그럼 이런 화면이 나옴

🔸 이거를 통해서 pdf로 저장할 때 어디에 오류가 발생했는지 확인 가능

6️⃣ 이제 다시 pdf로 내보내기 실행 🔸 그러면 아래 이미지처럼 저장되는 과정이 ui로 표시됨 🔸 만약 저장 중에 에러가 생기면 여기서 바로 오류가 떠서 확인 가능

스프레드 오류 해결 방법

이제 스프레드 오류 해결 방법 알아보자, 어떤 페이지가 오류 났는지 표시해주지만, 정확히 무슨 오류인지는 친절히 알려주지 않는다.

그래서 가능하다면 오류난 스프레드를 지워서 다시 만드는 게 가장 효과적이다.

🌾 도커? 도커 컨테이너? 도커 이미지?

도커라는 말이 나오면, 컨테이너, 이미지 등 여러 개념을 접하게 되는데, 각각 어떤 흐름으로 사용되는지 앞서, 그 관계성에 대해서 간략히 집고 넘어간다. 아래 그림으로 설명하자면,

• 도커는 컨테이너를 관리하는 프로그램
• 도커 이미지는 컨테이너를 만들기 위한 템플릿 즉 설계도
• 도커 컨테이너는 도커 이미지가 실행되는 환경
• 컨테이너와 이미지는 둘 중 하나가 누락되면 존재 할 수 없다, 둘은 쌍둥이라고 생각해면 쉽다.

🌾 도커

• 도커는 응용 프로그램과 그 종속성을 격리된 환경인 컨테이너로 패키징하여 실행할 수 있도록 해주는 플랫폼
• 이를 통해 다양한 환경에서 프로그램을 일관되게 실행할 수 있으며, 개발과 운영 환경 간의 차이로 인한 문제를 최소화

🌾 도커 이미지

• 정의
  • 도커 이미지는 컨테이너를 생성하기 위한 템플릿이나 설계도로, 실행할 프로그램과 그에 필요한 파일 및 의존성을 포함하고 있음
• 사용 방법
  • 이미지는 각 컨테이너에 실행 환경을 정의, Dockerfile이라는 설정 파일에 기반하여 생성
  • 이 파일에는 설치할 소프트웨어와 그 설정이 명시되어 있음
• 장점
  • 도커 레지스트리를 통해 다른 개발자와 쉽게 공유 가능
  • 이미지는 변경 불가하며, 새 버전은 기존 이미지 기반으소 생성

🌾 도커 컨테이너

• 정의
  • 도커 컨테이너는 도커 이미지의 실행 인스턴스
  • 환경이 격리되어 있어, 여러 애플리케이션이 충돌하지 않고 독립적으로 실행될 수 있게 돕는다
• 역할
  • 각 컨테이너는 격리된 환경에서 실행되어 애플리케이션과 관련된 기능을 수행
  • 컨테이너 내에서 발생한 문제는 다른 컨테이너와는 무관하게 접근
• 특징
  • 일반 가상 머신보다 훨씬 가볍고 빠르게 실행 가능
  • 각 컨테이너는 쉽게 생성, 수정 또는 삭제할 수 있으며, 필요할 때마다 재사용할 수 있음

🌷 도커를 왜 사용하지?

🌾 환경 일치를 위함

도커를 사용하면 모든 팀원이 같은 환경에서 작업할 수 있음

1. 다른 팀원과 같이 협업할 때 내 파이썬은 1.34, 영미의 파이썬은 1.26, 이렇게 버전이 다를 수 있음
2. 이런 버전 차이는 때때로 충돌을 일으키며, 프로젝트 실행이 안되는 상황이 발생

코드화된 환경 자동으로 설치

1. Dockerfile을 통해 언어와 패키지 버전을 명시하여 자동으로 설치 가능
2. 설정 오류를 줄이고 쉽게 환경 재구성 가능

🌾 용이한 배포와 관리

빠른 배포

1. 도커 이미지를 사용하여 애플리케이션 패키징하고 배포 가능
2. 필요한 경우 즉각적으로 확장할 수 있음

에러 독립

1. 각 도커 컨테이너는 독립적으로 실행되기 때문에,
2. 한 컨테이너의 문제가 다른 컨테이너에 영향을 미치지 않음

노드 js 프로젝트 만들기

• 리엑트 설치

  npx create-react-app ./

• Firebase 설치 https://firebase.google.com/docs/cli?hl=ko

  cd 파일명
  npm install firebase

Firebase 사용방법

• 링크: https://firebase.google.com/?hl=ko

• 회원 가입

• 프로젝트 만들기

  • 원하는 파일 이름 정하고, 계속 누르기
  • 미국 선택 - 프로젝트 만들기

• 파이어베이스 CLI 설정

  • 링크: https://firebase.google.com/docs/cli?hl=ko#mac-linux-auto-script

  • 나에게 맞는 장치 선택

  • 나는 윈도우 노드 js 기반이라 비주얼 스튜디오에 가서 터미널 창 열기

  • 반드시 command promt 열기

  • 코드 입력

           //파이어베이스 로그인
      firebase login

  • 터미널 창에 이거 나오면 y 입력

  • y 입력하면 브라우저에 자동으로 구글 로그인 창으로 연결

  • 수락하면 성공했다고 브라우저 창에 메시지가 뜸

  • 콘솔창에 입력

    //firebase 프로젝트를 오픈한 프로젝트에 생성
    firebase init

    

  • yes 선택

• 이제 어떤 상품을 사용할 것인지 선택해야한다(중요)

  • 나는 Firestore, Hosting(optionally github), Storage 설치 필요, 선택은 스페이스 바로 하면 된다.
  • 체크된 부분은 *이 생성된다
  • 다 선택했으면 엔터 키
  • 이제는 프로젝트를 선택한다, 아까 처음에 프로젝트를 이미 생성했으므로 use an exisitng project 선택
  • 아마 프로젝트를 여러 개를 생성했다면 여러 개가 보일거다, 내가 원하는 프로젝트 이름을 선택하고 엔터

• Matplotlib는 데이터 시각화를 위한 가장 널리 사용되는 라이브러리이다.

• 주로 2D 플롯을 생성하는데 사용된다.

Matplotlib는......?

주요 기능

• 다양한 그래프 생성 가능
  • 선 그래프 x축과 y축을 매핑하여 시각화 가능. 데이터가 연속적으로 변화하거나 시간 축을 따라 변화하는 데이터를 시각화할 때 사용.
  • 막대 그래프
  • 히스토그램
  • 산점도
  • 파이 차트
• 세부 조정가능
  • 축의 레이블, 범례 , 제목 , 스타일 등 요소 조정 가능
• 대규모 데이터 시각화
  • 대규모 데이터셋에 대한 시각화 효율적으로 처리 가능
• Python 생태계와의 통합
  • Numpy, Padnas 등과 같은 라이브러리와 자연스럽게 통합되어, 분석과 시각화를 손쉽게 결합 가능
• 플롯 저장 및 출력
  • 생성한 그래프 다양한 파일 형식(예 : PNG, PDF, SVG 등)으로 저장 가능가능

Matplotlib 사용법

Matplotlib 설치

# 터미널에 install

# 윈도우 설치
pip install matplotlib

#맥 설치
pip3 install matplotlib

Matplotlib 선언하기

# 굳이 선언 안해도 되지만 선언하면 손쉽게 불러와서 사용 가능
import matplotlib.pyplot as plt

데이터 불러오기

# 데이터 불러오기 위해 pandas 설치 필요(pip install pandas,import pandas as pd ) 
# 데이터 이름 = pd.read_csv("데이터 경로/데이터 이름.csv")

ecommerce_df = pd.read_csv("../00_data/ecommerce_sales.csv"

Matplotlib 사용하기

선 그래프 그리기

ecommerce_df = pd.read_csv("../00_data/ecommerce_sales.csv", encoding="latin1")
# InvoiceDate 컬럼을 날짜 형식으로 변경
ecommerce_df["InvoiceDate"] = pd.to_datetime(ecommerce_df["InvoiceDate"])

ecommerce_df["TotalPrice"] = ecommerce_df["Quantity"] * ecommerce_df["UnitPrice"]
dail_sales = ecommerce_df.groupby(ecommerce_df["InvoiceDate"].dt.date)["TotalPrice"].sum()

plt.figure(figsize=(10,6))
plt.rc("font", family="Malgun Gothic")

# plot 차트를 그리는 매서드이다.
plt.plot(dail_sales.index, dail_sales.values, label="날짜별 총 판매 금액")

plt.title("날짜별 총 판매 금액 변화")
plt.xlabel("날짜")
plt.xticks(rotation=45)
plt.ylabel("총 판매 금액")
plt.legend()
plt.tight_layout()
plt.show()

막대형 그래프 그리기

막대형 그래프는 각 카테고리가 갖는 값을 막대 높이로 표현하여, 데이터를 직관적으로 비교할 수 있다.

# 축의 값 포맷을 사용자 정의 형식으로 지정하기 위해서 사용하는 도구이다.
from matplotlib.ticker import FuncFormatter

ecommerce_df = pd.read_csv("../00_data/ecommerce_sales.csv", encoding="latin1")
ecommerce_df["InvoiceDate"] = pd.to_datetime(ecommerce_df["InvoiceDate"])

filtered_df = ecommerce_df[(ecommerce_df["InvoiceDate"] > "2010-12-01")& (ecommerce_df["InvoiceDate"] < "2011-06-01")].copy()

filtered_df["Total"] = filtered_df["Quantity"] * filtered_df["UnitPrice"]

country_salse = filtered_df.groupby("Country")["Total"].sum()
plt.figure(figsize=(20,6))
# 막대 그래프를 그리는 메서드이다.
plt.bar(country_salse.index, country_salse.values, label="지역별 총 판매 금액")
plt.xlabel("지역")
plt.xticks(rotation=45)
plt.ylabel("금액")

formatter = FuncFormatter(lambda x, _: f'{int(x):,}')

plt.gca().yaxis.set_major_formatter(formatter)

plt.tight_layout()
plt.legend()
plt.show()

히스토그램

• 히스토그램은 데이터 분포를 시각화하는데 사용한다.

• 즉 데이터의 빈도를 막대 형태로 표현한다.
• 가로 축에는 데이터의 구간, 세로 축에는 해당 구간에 속하는 데이터의 빈도(횟수나 개수 등)를 나타낸다.

human_df = pd.read_csv("../00_data/Human_Resources.csv", encoding="latin1")

plt.figure(figsize=(20,6))
plt.hist(human_df["Age"], bins=50, color="skyblue", edgecolor="black")
plt.title("나이 분포")
plt.xlabel("나이")
plt.xticks(rotation=45)
plt.ylabel("분포")
plt.show()

산점도

산점도는 두 변수 간의 상관관계를 시각화 하는데 유용하다.

stock_df = pd.read_csv("../00_data/stock_daily_prices.csv")

goog = stock_df["GOOG"]
amzn = stock_df["AMZN"]

plt.figure(figsize=(10,5))

plt.scatter(goog, amzn)

plt.title("goog와 amzn의 상관관계")
plt.xlabel("구글 가격")
plt.ylabel("아마존 가격")
plt.show()

다중 플롯

하나의 그래프에 여러 데이터를 겹쳐서 비교할 때 유용하다.

stock_df = pd.read_csv("../00_data/stock_daily_prices.csv")
filtered_df = stock_df[(stock_df["Date"] > "2020-07-10") & (stock_df["Date"] < "2020-08-05")].copy()


plt.figure(figsize=(10,6))

plt.plot(filtered_df["Date"], filtered_df["AAPL"], label="AAPL", color="green", marker="o")
plt.plot(filtered_df["Date"], filtered_df["AMZN"], label="AMZN", color="blue", marker="x")
plt.plot(filtered_df["Date"], filtered_df["GOOG"], label="GOOG", color="red", marker="s")
plt.plot(filtered_df["Date"], filtered_df["TSLA"], label="TSLA", color="purple", marker="^" )

plt.title("주식 가격 비교")
plt.xlabel("Date")
plt.ylabel("stock Price")
plt.xticks(rotation=45)
plt.legend()
plt.tight_layout()
plt.show()

서브플롯

• 하나의 figure 내에 여러 개의 그래프를 배치 가능하다.

• 여러 데이터를 한번에 비교할 때 유용하다.

Numpy는 파이썬을 통해 데이터 분석할 때 사용하는 수치 계산용 라이브러리이다.

Numpy는......?

🔮 정의

• Numpy는 Numerical Python의 줄임말로 C언어로 구현된 파이썬 라이브러리이다.

🔮 용도

• 대규모 다차원 배열과 행렬 연산에 도움을 준다.

🔮 왜 사용하는가......?

• 파이썬을 통해 머신러닝, 딥러닝, 데이터분석 등을 할 때 사용한다.

Numpy 사용법

🗳 Numpy 설치

• pip를 통해 쉽게 설치 가능하다
  • 우선 프로젝트에 가상환경을 생성하고 연결허세요 --> 참조 윈도우에서 미니콘다 설치 맥에서 미니콘다 설치

    $pip install numpy

🗳 Numpy 사용하기

• Numpy를 파이썬에서 쉽게 사용하기 위해 np라는 이름을 붙인다.

  import numpy as np

🗳 Numpy 배열 생성

• Numpy에서 가장 기본적인 데이터 구조는 배열이다.

• ndarray 클래스로 다차원 배열을 생성하고 관리할 수 있다.
• np.array() 함수를 통해 파이썬 list를 인자로 받아와서 사용한다.

1. list를 배열로 변환

• array정의 및 출력하기

  arr = [1,2,3,4,5]
  print(arr)
  type(arr)
  

결과:

[1, 2, 3, 4, 5]

list

- 위에서 만든 python list를 사용하기
~~~python
ndarray = np.array(arr)
print(ndarray) 
type(ndarray)

# 결과:
# [1 2 3 4 5]
# numpy.ndarray

2. 다차원 배열

arr_2d = np.array([[1,2,3],[3,4,5]])
print(arr_2d)

# 결과: 
# [[1 2 3]
# [3 4 5]]

3. ndarray배열의 속성

• 배열의 구조에 따라 데이터를 조작하는 방식이 달라지기 때문에,

• 배열의 중요한 속성들을 확인하는 것은 배열의 구조를 파악하는데 필수적이다.

• 배열의 차원 확인

  print(ndarray.shape) #(5,)
  print(arr_2d.shape)  #(2, 3)

• 데이터 타입 확인

  print(ndarray.dtype) #int64
  print(arr_2d.dtype)     #int64

• 배열의 차원 수 확인

  print(ndarray.ndim)  #1
  print(arr_2d.ndim)   #2

4. 배열 초기화

• np.zeros(size)

  # 3 * 3의 배열로 초기화
  arr_2d = np.zeros((3,3))
  print(arr_2d)
  

#결과: #[[0. 0. 0.] #[0. 0. 0.] #[0. 0. 0.]]

- np.ones(size)
~~~python
# 2*2 배열을 생성하고 값을 1로 채움
arr_2d = np.ones((2,2)) 
print(arr_2d)

#결과:
#[[1. 1.]
# [1. 1.]]

• np.full(size)

  # 3*3 배열을 생성하고 값을 7로 채움
  arr_2d = np.full((3,3), 7) 
  print(arr_2d)
  

#결과: #[[7 7 7]

[7 7 7]

[7 7 7]]

- np.random.random(size)
~~~python
# 2*2 배열을 생성하고 값을 랜덤하게 채움
arr_2d = np.random.random((2,2)) 
print(arr_2d)

#결과:
#[[0.60425932 0.53006054]
# [0.28702881 0.3450351 ]]

• npm = Node Package Manager

• 자바스크립트를 위한 패키지 관리자이다
• Node.JS를 설치하면 npm이 자동으로 설치된다

Node.js 설치

• 링크: https://nodejs.org/en/download/package-manager/current
• 자신의 컴퓨터 사양에 맞게 다운로드

VS Code 설치

• 링크: https://code.visualstudio.com/download
• 자신의 컴퓨터 사양에 맞게 다운로드

설치 확인

#버전은 항상 체크해이햔다, 버전이 다르면 프로젝트 진행할 때 오류가 생길 수 있다
node -v  #노드 버전 체크
npm -v   #npm 버전 체크

리액트 프로젝트 생성

• VS CODE에서 CTRL+J으로 터미널 열기
• npx 명령어 사용해서 프로젝트 생성

  #npx create-react-app {프로젝트 명}
  npx create-react-app react-board
  #또는 프로젝트 이름없이
  npx create-react-app ./

• npx명령어 사용하면 프로젝트에 필요한 모듈 등이 생성된다, 기본적으로 깃허브에는 모듈은 업로드하지 않는다
• 프로젝트 업데이트

  npm i

• 프로젝트 웹브라우저에서 실행

  npm start

• 미니콘다(Miniconda)는 파이썬 환경을 관리하고 패키지를 설치하는 데 사용하는 경량 버전의 Anaconda 배포판이다.

• 아나콘다(Anaconda)는 데이터 과학, 머신러닝, 데이터 분석 등에 필요한 많은 패키지를 포함한 배포판이라, 용량이 상당하다!
• 하지만 미니콘다는 아나콘다의 핵심적인 기능만 제공하여 훨씬 가볍고 빠른 설치가 가능하다.

미니콘다 설치

• 설치 페이지에서 다운로드

  • 링크:https://docs.anaconda.com/miniconda/
  • 사용하는 디바이스 os버전에 맞게 다운로드
  • 다운로드 파일에 저장된 파일 열기
  • 
  • 경로를 한글 없게 설정해야한다, 아디면 실행 안될 수 있다.
  • 다음 3개는 꼭 체크해야한다.
  • 미니콘다가 설치되면 기본적으로 (base)라는 환경이 만들어진다.

미니콘다 실행

터미널에서 실행

• 버전 확인

  python --version
  conda --version

• vs code에 파이썬 연결, 버전에 맞게

  • 그럼 conda list하면 콘다 연결 가능

• 가상환경 생성

  #conda create -n {가상환경 이름} python=내 파이썬 버전
  conda create -n test_conda python=3.12
  

Proceed ([y]/n)? 나오면 y 입력

- 가상환경 활성(cmd에서 작업)
~~~bash
conda activate {원하는 가상환경 이름}

#'(가상환경 이름)프로젝트 경로' 이렇게 출력되면 가상환경 활성된 것이다.
# 가상 환경이 프로젝트 파일에 만들어지지 않고 우리가 미니콘다에 설치한 가상 환경을 끌어다 쓴다.

• 가상환경 비활성

  conda deactivate

• 가상환경에 패키지 설치

  # pip install {패키지명}
  pip install pandas
  

#Proceed ([y]/n)? 나오면 y 입력

- 가상환경에 패키지 제거
~~~bash
# pip uninstall {패키지명}
pip uninstall pandas

• 다운로드 받은 패키지 확인

  pip list

• 가상환경 삭제

  conda env remove -n {원하는 가상환경 이름}

인공지능 분석 및 챗봇을 위해 install해야할 패키지

conda install pandas
conda install sciscikit-learn scipy
conda install -c conda-forge implicit

• 미니콘다(Miniconda)는 파이썬 환경을 관리하고 패키지를 설치하는 데 사용하는 경량 버전의 Anaconda 배포판이다.

• 아나콘다(Anaconda)는 데이터 과학, 머신러닝, 데이터 분석 등에 필요한 많은 패키지를 포함한 배포판이라, 용량이 상당하다!
• 하지만 미니콘다는 아나콘다의 핵심적인 기능만 제공하여 훨씬 가볍고 빠른 설치가 가능하다.

미니콘다 설치 방법

• 설치 페이지에서 다운로드

  • 링크: https://docs.anaconda.com/miniconda/
  • 사용하는 디바이스 os버전에 맞게 다운로드
  • 필자는 M1이라 이미지에서 보이는 가장 하단에 것 다운로드

• 미니콘다 파일 설치

  • 파일이 다운로드 된 다음에 우선 다운로드된 경로를 확인한다.(보통 따로 설정하지 않았으면 Downloads파일에 있다)

  • 그리고 터미널을 연다.

  • 미니콘다가 설치된 경로로 이동한다.

    #cd {파일이 다운로도된 경로}
    cd Downloads

  • 현재 위치한 경로 안에 내용 확인

    # ls로 확인하면 경로에 저장된 내용들을 리스트의 형태로 쭉 확인할 수 있다.
    # 방금 우리가 다운로드한 {Miniconda3-latest-MacOSX-arm64.sh}이런 형태로된 파일 확인 가능
    ls

  • sh 파일 실행

    # sh {파일명}
    # 방금 확인한 sh 파일 명러어 뒤에 복붙
    sh Miniconda3-latest-MacOSX-arm64.sh

  • 라인선스 확인 설치 한 다음에는 아래와 같은 내용이 나오는 데 enter를 계속 클릭한다. _Do you accept the license terms?_가 나오면 yes 를 입력한다, 그전까지는 계속 enter 클릭해야 한다.

    # 참고로 라인선스 내용이 많아서 한참동안 enter 클릭해야한다. 
    Welcome to Miniconda3 py312_24.7.1-0
    In order to continue the installation process, please review the license agreement.
    Please, press ENTER to continue
    >>> 

  • 미니콘다 설치 경로 지정 yes를 입력하면 아래와 같은 내용이 출력된다. 내가 원하는 경로로 경로와 파일 이름 지정하고 enter 누르면 해당 파일에 내용이 다운로드된다.

    #경로 지정 방법: /경로/파일 이름
    #다운로드 시간은 좀 걸리니 기다려야한다.
    - Press ENTER to confirm the location
     - Press CTRL-C to abort the installation
     - Or specify a different location below
    
    /Users/me/miniconda

  • 다운로드 완성 Thank you for installing Miniconda3! 문구가 나오면 완성된거다.

• 터미널 종료 후 재 시작 방금까지 사용한 터미널 끄고 새로운 창을 연다, 재시작하지 않으면 설치된 것을 확인할 수 없다.

• 다운로드 확인

  #{conda 24.7.1} 이와 같은 내용이 출력되면 잘 다운로드 된 것!
  conda --version

미니콘다 실행

터미널에서 실행

• 가상 환경 생성

  #conda create -n {가상환경 이름} python=내 파이썬 버전
  conda create -n test_conda python=3.12
  

Proceed ([y]/n)? 나오면 y 입력

- 가상환경 활성
~~~bash
conda activate {원하는 가상환경 이름}

#'(가상환경 이름)프로젝트 경로' 이렇게 출력되면 가상환경 활성된 것이다.
# 가상 환경이 프로젝트 파일에 만들어지지 않고 우리가 미니콘다에 설치한 가상 환경을 끌어다 쓴다.

• 가상환경 비활성

  conda deactivate

• 가상환경에 패키지 설치

  # pip3 install {패키지명}
  pip3 install pandas
  

#Proceed ([y]/n)? 나오면 y 입력

- 가상환경에 패키지 제거
~~~bash
# pip3 uninstall {패키지명}
pip3 uninstall pandas

• 다운로드 받은 패키지 확인

  pip list

• 가상환경 삭제

conda env remove -n {원하는 가상환경 이름}

인공지능 분석 및 챗봇을 위해 install해야할 패키지

conda install pandas
conda install sciscikit-learn scipy
conda install -c conda-forge implicit

• Redux Thunk는 Redux에서 비동기 작업을 처리하는 미들웨어이다.
• 기본 Redux 액션은 순수한 동기 액션 객체여야 한다,
• 하지만 Redux Thunk를 사용하면 액션을 함수로 반환할 수 있어서,
• 비동기 작업(API 호출 등)을 수행할 수 있다.

Intro

우선 들어가기 전에 Redux, React, Thunk의 상관관계에 대해서 정리하고 들어가자.

• 정의

  • React는 UI 라이브러리로, 컴포넌트 기반으로 화면을 구성하고 상태 관리 할 수 있다.

  • Redux는 React에서 상태 관리를 위한 상태관리 라이브러리이다.(리액트 없이도 사용 가능하다)

  • Redux-Thunk는 Redux에서 비동기 작업을 처리할 때 가장 기본적으로 사용하는 미들웨어이다.

• 상관 관계

  • React의 상태 관리 기능은 컴포넌트 단위로 제한되기 때문에, 전역 상태를 관리하기 위해 별도의 라이브러리인 Redux를 사용한다. Redux를 사용하면 여러 컴포넌트 간 상태를 일관되게 공유할 수 있다.

  • 실무 작업에서는 API 호출 같은 비동기 작업이 많이 필요하다, Redux는 동기 액션을 처리하기 때문에 비동기 작업을 처리할 수 있는 Redux-Thunk를 활용한다.

• Redux Thunk의 동작 로직

  • React에서 Redux Thunk를 사용하면, React 컴포넌트는 전역 상태를 관리하는 Redux 스토어와 상호작용할 수 있고, 비동기 로직을 Redux Thunk를 통해 처리할 수 있다.

  • React 컴포넌트는 Redux의 dispatch 함수를 사용해 Thunk를 호출하여 비동기 액션을 트리거하고, 비동기 작업의 결과에 따라 상태가 업데이트되면 컴포넌트는 리렌더링된다.

Redux-Thunk 사용 방법

• 설치

npm install redux-thunk

아래에 작성된 코드는 그냥 이해를 돕기 위한 예시이다.

• Redux Store에 Redux Thunk 적용

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers'; 

const store = createStore(rootReducer, applyMiddleware(thunk));

• Thunk 액션 함수 작성

//이 함수는 dispatch와 getState를 인자로 받으며, 여기서 비동기 작업을 실행할 수 있다.
//여기서 fetchUserData는 비동기 API 호출을 처리하고, 결과에 따라 성공 또는 실패 액션을 dispatch로 처리한다.
const fetchUserData = () => {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_USER_REQUEST' });
    try {
      const response = await fetch('https://api.example.com/user');
      const data = await response.json();
      dispatch({ type: 'FETCH_USER_SUCCESS', payload: data });
    } catch (error) {
      dispatch({ type: 'FETCH_USER_FAILURE', error });
    }
  };
};

• Reducer에서 액션 처리

const userReducer = (state = {}, action) => {
  switch (action.type) {
    case 'FETCH_USER_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_USER_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_USER_FAILURE':
      return { ...state, loading: false, error: action.error };
    default:
      return state;
  }
};

• React 컴포넌트에서 비동기 액션을 호출

import { useDispatch, useSelector } from 'react-redux';
import { useEffect } from 'react';
import { fetchUserData } from './actions';

const UserProfile = () => {
  const dispatch = useDispatch();
  const user = useSelector((state) => state.user);

  useEffect(() => {
    dispatch(fetchUserData()); // 비동기 액션을 호출
  }, [dispatch]);

  if (user.loading) {
    return <div>Loading...</div>;
  }

  if (user.error) {
    return <div>Error: {user.error}</div>;
  }

  return (
    <div>
      <h1>{user.data.name}</h1>
      <p>{user.data.email}</p>
    </div>
  );
};

export default UserProfile;

Redux-Thunk 구조 플로우차트

리액트 및 노드를 활용한 백엔드/프론트 엔드 구축 구조