..

MySQL) 기초

Thu, 04 May 2023 19:42:50 GMT

1. SELECT

1.1 행/열 조회

SELECT 컬럼명 FROM 테이블명;

행 조회는 WHERE 조건;

*는 해당 테이블의 모든 컬럼명을 나타낸다.

1.2 주석

--

1.3 원하는 순서로 조회

ORDER BY

오름차순	내림차순
ASC	DESC

1.4 원하는 만큼 데이터 조회

LIMIT {가져올 갯수}나 LIMIT {건너뛸 갯수}, {가져올 갯수}

1.5 컬럼명 변경

원래 컬럼명 AS 변경할 컬럼명

2. 연산자

연산자	의미
+, -, *, /	각각 더하기, 빼기, 곱하기, 나누기
%, MOD	나머지
IS	양쪽이 모두 TRUE 또는 FALSE
IS NOT	한쪽은 TRUE, 한쪽은 FALSE
AND, &&	양쪽이 모두 TRUE일 때만 TRUE
OR,
=	양쪽 값이 같음
!=, <>	양쪽 값이 다름
>, <	(왼쪽, 오른쪽) 값이 더 큼
>=, <=	(왼쪽, 오른쪽) 값이 같거나 더 큼
BETWEEN {MIN} AND {MAX}	두 값 사이에 있음
NOT BETWEEN {MIN} AND {MAX}	두 값 사이가 아닌 곳에 있음
IN (...)	괄호 안의 값들 가운데 있음
NOT IN (...)	괄호 안의 값들 가운데 없음
LIKE '... % ...'	0~N개 문자를 가진 패턴
LIKE '... _ ...'	_ 갯수만큼의 문자를 가진 패턴

출처 (얄팍한 코딩사전)[https://www.youtube.com/watch?v=dgpBXNa9vJc]

백준) 10171: 고양이

Wed, 03 May 2023 19:49:44 GMT

원래 하던대로 print(r"")로 입력 후 제출한 결과 컴파일에러 발생 파이참에서는 이상 없이 실행돼서 원인을 생각하다가 그냥print("")에 백슬래시가 들어갈 때만 한 번 더 입력해주는 방식이 더 빠르겠다고 생각해서 수정

print("\\    /\\")
print(" )  ( ')")
print("(  /  )")
print(" \\(__)|")

vue) 페이지에 유튜브 영상 띄우기

Thu, 30 Mar 2023 04:20:34 GMT

VueYoutube 등을 모르겠으면 아래 방법으로도 올릴 수 있다

대신 영상 바꿔야할 때마다 하드코딩을 해야된다

원하는 영상을 찾아서 공유 - 퍼가기 순으로 클릭
퍼가기를 눌렀을 때 나온 코드를 원하는 위치에 붙여넣는다.

에러

VueYoutube 사용시

app.js:934 Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_2__.default is not a constructor

원인 vue/cli 5.8 버전에서 Vue.js는 2.x 버전대이므로, Vue.js 3.x에서 추가된 createApp 함수를 사용할 수 없다.

해결 new Vue()를 사용

참고

오쌤의 니가스터디, [HTML기초문법] 8강 iframe태그와 youtube영상 넣기 및 옵션 설정

라이브러리 / 프레임워크

Wed, 29 Mar 2023 12:53:55 GMT

라이브러리와 프레임워크의 차이는 단어 자체의 뜻인 도서관과 뼈대라는 의미를 생각해보면 이해하기 쉽다

도서관에서 자유롭게 책을 열람하는 일과 인부가 정해진 설계도에 따라 건물을 완성하는 모습을 생각해보자

도서관에 들어가서 책장에서 원하는 책을 집어들고 필요한 내용을 열람하는 과정까지 사용자인 우리가 일의 흐름을 결정한다.

반면, 프레임워크는 미리 철근으로 뼈대를 만들고 건물을 짓는 공사현장이라고 생각해보자. 내가 공사 현장을 겪어보진 못했지만 설계도에 따라 뼈대가 세워지면 인부들은 내키는대로 작업하지 않고 자신에게 정해진 방식으로 건물을 만들어나간다.

떠올린 이미지에서 가장 큰 차이는 일의 주도권(어플리케이션의 흐름)이 누구에게 있느냐다. 자유롭게 책을 열람하는 도서관처럼 라이브러리는 어플리케이션의 흐름을 사용자가 가지고 있고, 프레임워크는 건설 중인 인부처럼 미리 정해진 흐름에 따른다는 점이 라이브러리와 프레임워크의 차이다

추가

라이브러리, 패키지, 모듈, 함수 비교

라이브러리 : 패키지의 집합 패키지 : 모듈의 집합 모듈 : 함수와 변수의 집합 으로 외우지 말고 위 그림으로 한번에 이해하고 넘어가자

Git) commit rule

Wed, 29 Mar 2023 09:36:12 GMT

commit을 하면서도 메세지에 작업일자와 내용만 적고 끝내던 방식으로는 Git을 제대로 사용하는게 아니라고 생각해서 커밋 메세지 규칙을 찾아 정리했다.

Commit message 7가지 규칙

제목과 본문을 한 줄 띄어 구분
제목은 50자 이내
제목 첫 글자는 대문자
제목 끝에 마침표 X
제목은 명령문으로, 과거형 X
본문의 각 행은 72자 이내 (줄바꿈 사용)
본문은 어떻게 보다 무엇을, 왜에 대하여 설명

Commit message 구조

기본적으로 commit message 는 제목, 본문, 꼬리말로 구성한다. 제목은 필수사항이며, 본문과 꼬리말은 선택사항이다.

Type

타입	내용
feat	새로운 기능 추가, 기존의 기능을 요구 사항에 맞추어 수정
fix	기능에 대한 버그 수정
build	빌드 관련 수정
chore	패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore
ci	CI 관련 설정 수정
docs	문서(주석) 수정
style	코드 스타일, 포맷팅에 대한 수정
refactor	기능의 변화가 아닌 코드 리팩터링 ex) 변수 이름 변경
test	테스트 코드 추가/수정
release	버전 릴리즈

Subject

Type 과 함께 헤더를 구성한다. 예를들어, 로그인 API 를 추가했다면 다음과 같이 구성할 수 있다.

ex) feat: Add login api

Body

헤더로 표현이 가능하다면 생략이 가능한다. 아닌 경우에는 자세한 내용을 함께 적어 본문을 구성한다.

어떠한 이슈에 대한 commit인지, issue number 를 포함해야 한다. 위의 좋은 예시에서는 (#1) 처럼 포함시켰다. 그리고 close #1 처럼 close 를 통해 해당 이슈를 닫는 방법도 있다.

참고

코딩 공부 일지, [Git] 좋은 커밋 메세지 작성법

Docker) 도커 허브에 이미지 올리기

Wed, 29 Mar 2023 02:25:22 GMT

먼저 도커 허브에 로그인

레파지토리 생성

터미널에서 작업

도커 로그인 docker login
이미지 확인 docker images
도커 허브에 푸시 docker push 이미지명

이름을 일치시켜주기 위해 이름 변경이 필요한 경우 docker tag IMAGE_ID 변경할 이름

포트폴리오) 바로우산

Tue, 28 Mar 2023 09:10:50 GMT

💼개요

ChatGPT, 객체인식, 수요예측 인공지능을 융합해 보유 자산을 관리할 수 있도록 이식한 공유경제 자동화 서비스 개발과 협업 방식을 익히기 위한 목적으로 팀 프로젝트를 진행했다.

📝 프로젝트 진행 기록

💳 주요 기능

YOLOv5를 통한 자산 파손 여부 인식
ChatGPT를 통한 이용자 안내
Keras를 사용한 인공지능으로 지역에 따른 서비스 수요 예측

👨‍💻 업무

공통 업무

Jira, Confluence를 사용한 프로젝트 진행 내역 정리
FastAPI를 통한 서버 구축
AWS를 통한 배포
ERD 작성

전담 업무

개발 환경 설정
데이터 정형화
크롤링을 통한 데이터 수집
딥러닝 프레임워크를 사용한 주요 기능에서 사용할 모델 구현
웹 목업 작성
랜딩페이지 제작

📚 기술 스택 및 툴

Ptyhon 3.9
FastAPI
AWS
Vue.js
Keras
Pytorch
Flutter
Github
Jira
Confluence
Slack

개발 환경 설정 ✅

1. Install Django Framework

3. Python / MySQL 네트워크 연결

# powershell
# Python과 MySQL 네트워크 연결을 위한 라이브러리 설치
(base) PS C:\Users\Quiet> pip install mysqlclient
(base) PS C:\Users\Quiet> pip install mysql-connector-python
(base) PS C:\Users\Quiet> pip install django-cors-headers

4. Install Tensorflow & Pytorch

4.1 Version Check(Tensorflow, Python, cuDNN, CUDA)

⇒ Tensorflow gpu 사용을 위해 2.10.0 버전을 사용한다.

5. Install NVIDIA Driver(GeForce RTX 2080)

5.1 최신 공식 NVIDIA 드라이버 다운로드

　　　⇒ 그래픽카드(GeForce RTX 2080) 기준 설치

    ⇒ 디폴트로 설정된 옵션으로 설치

6. Install CUDA(ver 11.2)

uninstall NVIDIA FrameView SDK
📖 appwiz.cpl >> NVIDIA FrameView SDK 1.3.8107.31782123

6.1 CUDA Toolkit 11.2 Downloads

        ⇒ 디폴트로 설정된 옵션으로 설치

7. Install cuDNN(8.1.0)

7.2 Download cuDNN v8.1.0 (January 26th, 2021), for CUDA 11.0,11.1 and 11.2

7.3 압축파일 다음 경로에 풀기

📖 C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.2\include

7.4 Install Tensorflow(2.10.1)

Update conda and pip
   # powershell
       # 관리자 모드 윈도우 탐색기
       (base) PS C:\> pip install --upgrade pip
       (base) PS C:\> conda update -n base conda
       (base) PS C:\> conda update --all
Install tensorflow & tensorflow-gpu # powershell # 관리자 모드 윈도우 탐색기 (base) PS C:> pip install tensorflow==2.10.1 (base) PS C:> pip install tensorflow-gpu==2.10.1

   # 가상환경에 설치되었는지 확인
     (base) PS C:\> conda list

8. Install Pytorch(1.13.1)

　0.14.1 Check Install code

        ⇒ Conda Package로는 설치가 되지 않았다.(원인미상)

 # powershell
   (base) PS C:\Users\Quiet> pip3 install torch torchvision torchaudio --extra-index-url https://download.pytorch.org/whl/cu117

※ 참고 CUDA를 분명 11.2를 설치했는데 11.7로 설치하는 이유가 뭐지?
📖 https://kjy042386.tistory.com/324

    ⇒ 추정) pytorch 구동환경 내 cuda library 복사본을 설치

         → 설정값은 CUDA 11.2 지만, pytorch 구동환경 내 상태값은 11.7인 것

9. Check Version

    #**Python Code**

    # python
    import os
    import numpy as np
    import tensorflow as tf
    import torch
    import sklearn
    from tensorflow.python.client import device_lib

    # TF_CPP_MIN_LOG_LEVEL Default Setting 관련 경고 임시 조치
    os.environ['TF_CPP_MIN_LOG_LEVEL'] = '3'

    if __name__ == '__main__':
        print(f'numpy version : {np.__version__}')
        print(f'tensorflow version : {tf.__version__}')
        print(f'torch version : {torch.__version__}')
        print(f'sklearn version : {sklearn.__version__}')
        print(f'이 PC에 설치된 디바이스 상세보기 : {device_lib.list_local_devices()}')
        print(f'CUDA 프로그래밍 가능여부 :  {torch.cuda.is_available()}')
        print(f'CUDA 프로그래밍 가능여부 : {torch.cuda.get_device_name()}')
        print(f'사용 가능 GPU 갯수 :  {torch.cuda.device_count()}')
    ```

10. Install FastAPI & uvicorn

10.1 pip install

    #powershell
    # Install
    (base) PS C:\fastApiServer> pip install fastapi 'uvicorn[standard]'

    # 서버 생성
    (base) PS C:\fastApiServer> uvicorn main:app --reload

11. 애자일 방식을 위한 Tool 연동

11.1 slsck-jira 연동

프로젝트 설정
Connect to Slack 클릭

11.2 jira-Confluence 연동

11.3 jira-GitHub 연동

GitHub for Jira 검색
바로우산에서 사용한 앱
추가한다
추가한 뒤에는 컨플루언스의 업무에서 브랜치 만들기, 커밋 만들기를 누르면
아래 이미지가 나오고 Create branch를 누르면 깃허브에 브랜치가 생성된다

AWS☁

1 설정

fastapi requirements.txt에 추가
main.py에 handler = Mangum(app) 추가

1.1 DB

데이터 베이스 수정에서 db 파라미터를 사용중인 db로 변경
db가 제대로 들어갔는지는 하이디로 확인
하이디의 ip는 db의 연결 보안에 있는 엔드포인트
fastapi의 db도 host는 AWS의 엔드포인트

이제 docker/mysql 내부의 코드들은 발생x, docker/api만 발생

2. 진행 순서

RDS -> IAM -> S3

3 RDS

3.1 RDS 작성

도커파일 및 yml파일 변경 후 dockerfile의 경로인 docker/api로 들어가서 'docker build -t 이미지명 .' 입력
원래 경로로 돌아가서 docker compose up
자동으로 테이블이 들어와야 성공 🐋 docker compose up 방법이 기억안나면

3.2 RDS 인스턴스 생성

생성하면서 확인

표준 생성
사용 엔진(이번에는 MySQL)
템플릿 : 프리티어
인스턴스 크기 : t3(t2도 상관없으나 t3도 프리데이터)
스토리지 : 범용, 20, 자동 조정 비활성화 ※ 스냅샷 체크를 해제해도 사용으로 된 경우도 있으므로 확인 필요

3.3 보안그룹 생성

주의사항

잘못하면 DB 해킹의 위험이 있는 부분이므로 주의

SecurityGroup 설정에서 보안 그룹을 생성하고 인바운드 규칙을 추가

외부 접속 방지를 위해 로컬에서 개발하는 동안은 개인 IP 주소를 설정하지만 EC2로 접속하는 과정이 있으면 추가

위치 무관을 체크해야 ubuntu에서 apt-get-update가 적용된다

우측 상단 수정 → 생성한 식별자 선택

퍼블릭 액세스: 예(마이너 버전으로 변경시 요금 발생)

포트폴리오 사용할 일 없으면 : 아니오

백업 보존기간 : 0일

스냅샷 : 해제

이거 보고도 모르겠으면 여기 참고

3.4 파라미터 그룹 생성

좌측사이드바에서 파라미터 그룹(이하 Parameters)에서 파라미터 편집으로 넘어간다. 검색창에 char, coll 을 각각 입력 후 셀렉트박스에서 utf-8과 utf-8_general_ci 를 선택

DB 수정 → DB옵션에서 파라미터 그룹을 방금 설정한 그룹으로 변경

4. IAM

4.1 IAM 생성하기

S3 만들기 전에 반드시 iam 을 생성해야 한다. 이 파트를 생략해도 S3 가 만들어지지만, CORS 에서 많은 오류를 경험하기 싫으면 일단 생성하자

, s3

5. S3

5.1 env.py 양식

USERNAME = "AWS 유저명"
PASSWORD = ""
HOSTNAME = "aws 사용시의 엔드포인트"
DATABASE = "AWS의 DB명"
PORT = 3306
CHARSET = "utf8"
DB_URL = f"mysql+pymysql://{USERNAME}:{PASSWORD}@{HOSTNAME}:{PORT}/{DATABASE}"

5.2 dockerfile 양식

FROM python:3.9

WORKDIR /app ADD requirements.txt . RUN pip install --trusted-host pypi.python.org -r requirements.txt EXPOSE 8000 CMD ["uvicorn", "app.main:app", "--reload", "--host", "AWS엔드포인트", "--port", "8000"]

6. 한글 깨짐

파라미터 그룹 -> 파라미터 편집에서
char : 전부 utf8mb4로 변경(0,1로 나오는 항목은 제외)
coll : collation_connection, collation_server의 값을 utf8mb4_general_ci로 변경

7. 보안🔒

개인적인 피해를 막기 위한 최소한의 보안

인바운드는 어렵게 아웃바운드는 쉽게 1) 사용자 그룹 생성
권한 정책 연결 : AmazonS3FullAccess 선택 2) MFA 설정
준비 : Google OTP 어플리케이션
root 계정에서 보안자격 증명 → MFA 활성화 → 가상 MFA 디바이스 체크 후 계속
먼저 본인 핸드폰에 설치한 Google OTP로 해당 QR코드 인식 후 MFA 코드 1 입력
- MFA 코드 2는 MFA 코드 1 시간 경과 후 나오는 다음 코드

7.1 Root가 IAM에게 비밀번호 변경 권한 주기

IAM에서 '계정 설정' 클릭
'암호 정책-> 편집'에서 체크
- 사용자 지정 : 암호감독 체크박스 전체,
- 기타 요구사항 :사용자 자신의 암호 변경 허용

7.2 IAM 로그인시 비밀번호 지정

IAM -> 사용자 -> 사용자명 클릭

보안 자격 증명 -> 콘솔 액세스 관리 -> 활성화 후 비밀번호 지정
권한을 받은 IAM사용자명, 방금 지정한 비밀번호로 로그인 가능

7.3 권한 부여

Root 사용자의 IAM으로 들어가서 권한을 준다

7.4 IAM 사용자 결제 대시보드 접근 권한 설정

builling은 AdministratorAccess에 포함되어 있다
기본적으로 결제 정보 메뉴에 대한 권한이 없는 IAM 사용자가 해당 권한을 얻기 위한 조건은
- (1) 이 계정이 IAM 및 페더레이션 사용자가 결제 정보에 액세스하도록 허용
- (2) 필요한 IAM 권한을 보유하도록 함으로써 사용자 또는 그룹에 대해 권한

(1)은 Root 계정으로만 설정 가능
- 계정 → 결제 정보에 대한 IAM 사용자 및 역할 액세스 :편집
- IMA 액세스 활성화 체크 → 업데이트

8. AWS에서 lambda 사용

yaml(context file)을 사용하는 Serverless Framework보다 IaC방식(TypeScript 사용)인 Pulumi를 더 많이 사용

serverless와 pulumi 방식중 선택해서 사용

9. CLI(커맨드 라인 인터페이스)

리액트 사용시에는 서버리스 프레임워크를 사용하지만 리액트 같은 프론트 요소가 없는 경우는 CLI를 사용한다

CLI? AWS 클라우드 리소스를 생성, 편집, 검사하는 방식 중 하나

1) 언제 사용?

리액트 같은 프론트엔드 부문의 작업을 위한 경우는 서버리스 프레임워크를 사용하지만, 프론트엔드부분을 신경쓰지 않는 작업에서는 CLI를 사용

2) 장점

코드(CLI 명령 포함)가 사용자의 변경을 기록

버전 제어(깃 등)하에 코드를 배치하고 변경사항을 효과적으로 관리 => 커밋하면 아마존 내부의 코드도 변경

수동적인 단계의 수행을 줄여서 작업을 빠르게 다시 실행할 수 있다

인적 오류 발생 가능성이 낮다

10. 로컬 AWS 환경 설정

  # 액세스 키 만들기
  - 경로 : AWS 사용자 설정 - 보안자격 증명 - 액세스 키 만들기 - 액세스 키, 비밀 액세스 키, .csv 파일 다운로드(!!!이 내용은 절대 커밋 금지) 
  - 유닉스계열(맥 등)은 셸 설정에서 환경변수를 추가 
  - KMS는 유료 서비스다

  # 설정 확인(아래 코드 차례대로 실행)
  - aws --version
  - aws s3 li s3://
  - aws configure

11 S3 버킷 생성

OAC방식

OAC 설정시 '웹 사이트 엔드포인트 사용'을 누르면 OAC 설정이 사라지니까 먼저 누르지 말것
S3 버킷 액세스
원본 액세스 제어 설정(권장) - 제어설정 생성 : s3로
속성 - 생성한 버킷에서 정적 웹 사이트 호스팅 편집 - 활성화 후 변경사항 저장(CF연결할거니까 테스트목적 아니면 하지 말것)
- OAC 방식이 아니더라도 ACM(인증서)가 아니면 자신이 사용하는 리전으로 등록해야한다

11.1 정책 설정

경로 : 정책 - 버킷 정책 - 새 문 추가 - 아래 코드 입력

CF 사용시 버킷정책

  {
      "Version": "2012-10-17",
      "Statement": [
          {
              "Sid": "Statement1",
              "Effect": "Allow",
              "Principal": {"Service":"cloudfront.amazonaws.com"},  - cloudfront.amazonaws.com를 통해서만 권한 부여
              "Action": "s3:*",                                     - 모든 crud를 사용
              "Resource": "arn:aws:s3:::seongbae.shop/*",
              "Condition": {                                  -condition == if
                  "StringEquals" : {                            - "AWS:SoursArn"의 문자열이 ""과 같다면 
                      "AWS:SoursArn":"클라우드 프론트의 ARN"
                  }
              }
          }
      ]
  }

12 CloudFront

도메인 | CF | S3

CF관련 비용 절감 방법

CF를 억지로 만들 필요 없이 도메인과 S3를 만들면 알아서 생성된다
- 그러니까 CF를 먼저 만들지 마라
cf의 오리진 = 버킷

12.0 특징

고비용에 더 느리지만 보안에 더 유리
S3에서 CF로의 데이터 전송은 요금이 없으나 인터넷으로 전달하는건 비용이 요구된다
같은 리전에서의 전송만 무료니까 설정시 자신이 속한 리전을 설정

12.1 DNS 연결(아마존은 Route53)

route53 - 시작하기 - 호스팅 영역 생성
- NS(Name Server), SOA가 생겼는지 확인 (NS, SOA에 대한 설명 참고)
값/트래픽 라우팅 대상에 있는 값을 NDS에 등록 (이번에는 가비아에서 도메인을 받음. 상세설명은 여기)
- 등록 장소 : 가비아 - My가비아 - 도메인 - 관리 - 네임서버 설정
  - 가비아는 NS의 마지막 '.'을 지워야 한다

12.2 CNAME 등록

AWS에서

AWS Certificate Manager에서 인증상태 확인

인증이 안된 상태면 route53에 레코드 자동 생성을 눌렀는지 생각해보자
도메인 - CNAME 확인
'Route53에서 레코드 생성' 클릭
- 한 번 지운 경우는
- Route53 - 호스팅 영역에서 CNAME이 생기면 된다
  - A 레코드를 추가하면서 'ping 주소'나온 IP입력

가비아에서

My가비아 - DNS 관리툴 - DNS설정
- 호스트 : ~~.com은 @ / www.~~.com은 www(이때 www를 쓴다면 값도 www가, admin을 쓰는 주소라면 admin.이 포함돼야 한다)
- 값/위치 : AWS에서 카피한 CNAME 이름 입력
- TTL:3600

✅가비아에서 제대로 등록됐는지 확인하는 방법

cmd에서 'ping 주소' 입력

후이즈 도메인 검색

결과가 안나올 경우 ping 네임서버 1차 주소를 넣고 나온 값을 사용해서 A레코드를 만든다

후이즈 통과 후 CF로 이동

12.3 CF 배포

cloundfront 생성에서 원본 도메인 선택하고 여기를 참고
- 가격 분류는 본인이 사용할 리전이 속해있는 곳에 해야 과한 비용을 막을 수 있다
- CNAME 추가('www.주소.com'과 '주소.com'을 둘 다 해야한다) -> A 레코드로 연결했으면 CNAME의 값을 도메인 이름으로 해도 괜찮다
- ACL를 사용하기 위해서는 먼저 아마존에서 사용하는 DNS인 Route53을 먼저 설정해야 한다(2.2 CNAME 등록 참고)
- SSL은 optional로 되어있지만 보안 요소라 사실상 필수
- IPv6: off(필수는 아니고 수업에서는 일단 off로 지정함 디폴트는 on)
버킷과 연결
- Amazon S3 - 버킷 - 권한 - 버킷 정책 편집에서 CF의 ARN추가

    "Condition": {
        "StringEquals": {
            "AWS:SoursArn": "배포하는 CF의 ARN"
        }
    }

12.4 CF 주의사항

정적콘텐츠를 s3에 올리지 마라
OAI는 이제 죽으니까 OAC로 가야된다
AWS : EC2 / S3 / CloudFront 트래픽 요금 분석
https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html
왜 쓰나?

자동확장 : 스케일링

13 EC2

13.1 보안그룹 확인

보안그룹 생성은 설정 필기에서 확인

13.2 인스턴스 생성

경로 : EC2 - 인스턴스 - 인스턴스 생성

우분투 선택

인스턴스 시작 후 PuTTY 사용

.pem을 .ppk로 하는건 Puttygen사용

퍼블릭 ip를 입력하고 세이브 (먼저 있던 경우는 )

Connection - SSH - Credentioal에서 .ppk 연다

☕install java

sudo apt-get update sudo apt-get install -y --no-install-recommends tzdata g++ git curl sudo apt-get update sudo apt-get install openjdk-11-jdk java -version javac -version vim ~/.bashrc

i 입력으로 insert로 두고 가장 아랫줄에
- ``export JAVA_HOME=$(dirname $(dirname $(readlink -f $(which java))))
```
        export PATH=$PATH:$JAVA_HOME/bin``` 추가
```
Esc 누르고 :wq! source ~/.bashrc 설정 적용 echo $JAVA_HOME

🐍intall python

sudo apt update sudo apt-get install -y python3-pip python3-dev sudo apt install software-properties-common sudo add-apt-repository ppa:deadsnakes/ppa

13.3 pip3 pip로 변경

cd /usr/local/bin
sudo ln -s /usr/bin/pip3 pip
pip3 install --upgrade pip

13.4 sudo apt-get clean

13.5 install nginx

# 설치
sudo apt-get update
sudo apt-get install nginx
sudo systemctl start nginx

/etc/nginx/sites-available 내 file에 쓰기 권한이 없으므로 chmod를 쓰기 권한을 추가해준다. sudo chmod 775 /etc/nginx/sites-available
nginx config 추가: cd /etc/nginx/sites-available && vim <서버이름>

퍼미션 에러 나오면 앞에 sudo를 붙혀준다.

AWS route53에서 도메인을 추가한다. A record를 생성하기 위해서는 고정된 IP 주소가 필요하다. lightsail 인스턴스에서 고정된 public IP를 생성해 A record에 연결한다. 생성한 도메인은 nginx conf에 추가한다.

server{
       server_name ;
       location / {
           include proxy_params;
           proxy_pass http://사용할 IP:8000;
       }
}

symlink: sites-available/ → sites-enabled

sudo ln -s /etc/nginx/sites-available/ /etc/nginx/sites-enabled/

13.6 run app

git clone cd /var/www git clone cd

nginx 확인
sudo nginx -t
restart nginx sudo systemctl restart nginx.service
- 안되면 sudo systemctl restart nginx
  
  failed가 나올 경우 putty에서 /etc/nginx/sites-available과 /etc/nginx/sites-enabled/에 둘 다 같은 vim 파일이 있는지 확인한다.
gunicorn으로 ASGI 서버 실행 : python3 -m gunicorn -k uvicorn.workers.UvicornWorker main:app

🔗연결 확인

route 53에 레코드를 CNAME으로 들어간 놈을 A로 바꾸고 그 레코드에 고정 IP(탄력적 ip)로 입력했는지 확인
- putty의 vim 파일이 아래 같은 모양인지 확인 ```server{ server_name 사용할 도메인 이름; location /{
```
include proxy_params;
proxy_pass http://사용할 IP:8000;
```
  } }
  
  ! 사용할 IP자리에 사용하기 위해 받은 탄력적 IP를 넣었을 때 실패
- 사용할 IP에 127.0.0.1(로컬호스트)을 주로 사용하는 이유는 EC2 자체가 하나의 PC이기 때문에 로컬로 돌리는 것이기 때문에다

14 EC2와 서브 도메인 연결

루트 도메인을 이미 사용했으므로 새 인증서를 요청 참고

인증이 완료돼서 CNAME을 얻으면 가비아로 가서 등록

14.1 탄력적 IP를 사용

할당
확인
EC2 연결

💻 putty 사용

EC2의 인스턴스에서 사용할 인스턴스 재시작 Putty에서 .ppk 실행

푸티의 ip는 'EC2- 인스턴스'에서 우클릭 후 연결을 선택해서 여기에 있는 퍼블릭 IP 입력

2.? error😕

도메인 주소로 접속시 주소 앞에 '주의 요함'이 나오는 경우

원인

배포한 CF에 인증서인 SSL이 없는 경우

해결

s3은 되는데 CF가 안되면?

원인

route53 문제

해결

호스팅 영역 삭제 후 다시 만들어라 (영역 삭제가 안되면 A, CNAME 레코드를 삭제 후 영역 삭제를 진행하면 된다)

A 레코드의 값을 ip가 아니라 CF의 배포 도메인 이름으로 바꿔준다(별칭 활성 - CF 엔드포인트 선택 배포 도메인 이름 입력)
!!! 동적 ip를 사용하는 경우는 퍼블릭 엑세스 차단 활성화 + CORS 코드 삭제

자동으로 안들어오는 경우 대체 CF에서 도메인 이름을 설정하면 해결된다

15 🐋Docker 설정

안되면 앞에 sudo

155.1 Docker 설치

apt install apt-transport-https ca-certificates curl software-properties-common curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu bionic stable" apt update apt-cache policy docker-ce apt install docker-ce

15.2 Docker에 sudo 권한 부여

usermod -aG docker $USER newgrp docker

15.3 설치 확인

systemctl status docker

15.4 Docker-compose

curl -L "https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

15.5 Docker-compose에 실행권한 부여

chmod +x /usr/local/bin/docker-compose

15.6 설치확인

systemctl status docker

curl -L "https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

chmod +x /usr/local/bin/docker-compose docker-compose version

16 🐍Python 설치

sudo apt install python3 sudo apt install python3-venv python3 -m venv 가상 공간 이름

가상환경 설정여부 확인 cd 가상환경명 ll 아래 사진처럼 나온다면 ok

가상환경 활성화 source 가상 환경 경로/bin/activate

17 Pycharm 연동

먼저 .pem 키를 가져오고
해당 경로에 폴더만 생성되고 파일이 안들어오는 경우는
remote path 경로를 var/www를 기본으로 사용하고 권한이 없어서 못만드는 경우는 putty에 직접 들어가서 mkdir 폴더명 실행하고 remote path를 지정해준다
*/var/www는 먼저 enginx

권한 오류가 나오는 경우는 ?.4 참고

방금 만든 SSH로 터미널 열고 cd 복사한 경로

17.1 DB 연결

18. 프리티어 사용시 주의

인스턴스 구성시 t2로 설정
RDS에서 스토리지의 할당된 스토리지는 20으로(스토리지 자동 조정 활성화는 체크를 해제)

EC2를 사용해서

주의

인공지능 모델은 lambda
상시로 열려있는 페이지는 EC2가 더 유리하다
이제는 매번 도커에 설치할 필요 x
- 참고

리전은 ACM에서만 버지니아 북부를 사용

📁데이터 베이스

1. ERD 구성

운영 시 수집 될 데이터를 보관 할 저장소를 구축한다.
1.1 1차

1.2 2차

변경사항

사용자엔티티와 우산엔티티는 다대다 관계이므로 크로스엔티티를 추가해 역정규화
우산 파손여부 외에 파손율 변수 추가
대여함 설치위치와 관련된 데이터들과 우산 배치개수와 관련된 데이터로 분리

1.3 3차

변경사항

필요이상으로 많은 테이블이 만들어져서 테이블 종류를 제한

1.4 최종 ERD

변경사항

사용자 엔티티 필드 중 위치를 위도/경도로 구분하고 비밀번호 필드 추가
게시판(boards)엔티티를 추가
프런트와 필드명 일치 검토 필요하다.
테이블은 관리자, 우산, 대여함, 대여 일지, 사용자, 게시판의 총 6개로 분류한다.

각 테이블의 세부 내용

관리자 관리자ID, 이름, 비밀번호, 가입 일자, 수정 일자, 토큰 모든 테이블에 접근 권한이 있다. 우산

우산ID, 파손율, 이미지, 상태
외래 키로 대여함 테이블의 대여함ID를 받는다.
대여함*
대여함ID, 자치구, 위도, 경도
대여 일지*
대여ID, 파손 여부, 대여 시각, 반납 시각
외래 키로 우산 테이블의 우산ID와 사용자 테이블의 사용자ID를 받는다.
사용자*
사용자ID, 연령, 거주 지역, 주 이용 지역, 현 위치 위도, 현 위치 경도, 생년월일, - 등급, 결제정보, 비밀번호, 이메일, 가입 일자, 정보 수정 일자, 성별, 토큰
게시판*
게시 글ID, 제목, 작성 일자, 수정 일자, 유형, 내용, 원 글ID
외래 키로 사용자 테이블의 사용자ID를 받는다.

2. FastAPI 데이터 베이스 구축

ERD 구성을 바탕으로 각 테이블과 컬럼을 코드로 생성한다.
Docker 를 사용하기 때문에 Docker compose up 명령어 입력 시 테이블이 자동으로 생성된다.

💻웹 제작

프론트엔드 희망하는 팀원이 따로 없고 앱 위주의 서비스이기 때문에 가벼운 랜딩 페이지로 제작

1. 웹 목업 제작

Balsamiq mockups을 사용해 작업을 진행한다.
웹은 고객이 보는 서비스 소개 페이지와, 관리자가 보는 관리자 페이지 2개로 구분된다.

1.1 Figma 제작

목업에서 사용 가능한 HTML 코드를 추출하기 위해 Figma를 사용했다.
관리자 페이지는 로그인 창과 관리 창으로 구성되며, 관리창은 네비게이터 버튼만 클릭하면 내부 화면이 바뀌는 형태로 구성한다.

2. 랜딩 페이지

2.1 초안

2.1.1 제작 중 추가 내용

랜딩페이지에서 깃허브 등 상세 링크로 이동할 때 새 화면이 랜딩페이지의 창에서 열려서 열람에 불편을 끼침
- target="_blank"를 태그에 추가해서 해결

2.1.2 보완사항

서비스 소개 항목 벨로그 게시물로 교체
미구현 항목 제거

👾인공지능 모델링

1. YOLOv5를 이용한 파손 여부 확인

1.1 전처리

1.1.1 train.py에서 실행하기 위해 사용할 데이터를 가져올 yaml 파일을 생성

1.1.2 기본 Dataset에서 학습 시킬 대상을 가진 데이터만 남기고 나머지 데이터 삭제

실행 전	실행 후

images : 116,408 / labels : 116,408	images : 3,904/ labels : 3,904

1.2 전체 사물 중 우산만 인식

학습한 .pt 파일을 실행한 결과

목적인 우산 자체는 인식을 했으나 우산이 아닌 것까지 우산으로 인식하는 문제 발생

원인?
- Confidence Threshold가 0.25로 낮아서 발생한 문제
- 아래 설명에서 알 수 있듯이 이 값이 너무 낮으면 자신감 넘치는 상대의 말은 무조건 믿는 것처럼 정확도가 낮은 결과를 받게된다.
  Confidence Threshold?
  - 말 그대로 Confidence에 대한 신뢰도로 Confidence가 일정 수준에 미달이면 버리게 하는 수준이다 .
  - 단, 이 값이 너무 높으면 작은 차이로도 인식에 문제가 생기기 때문에 중간점을 잘 잡아야 한다.
해결
- Confidence Threshold의 값을 0.4정도로 설정해서 정확도가 낮은 박스를 사용하지 않게 했다.

1.3 우산의 파손 여부 인식

1.3.1 이미지 크롤링

우산 파손여부 인식을 위해 기본 데이터셋에 없는 파손된 우산 이미지와 라벨이 필요
크롤링 결과로 나온 이미지들에 라벨링 작업 시행

1.3.2 1차 시도

파손 데이터의 양이 너무 적고 각 파손된 형태가 제각각이기 때문에 정사 우산과 파손 우산을 구분하지 못함

-파손 데이터를 추가하고 epoch 50으로 실행한 결과

이제는 우산과 파손을 잘 잡지만 아직도 이상한 곳에서 우산을 인식한다… 이건 우산관련 데이터를 늘리는 방법이 최선이라고 생각한다.

1.3.3 2차 시도

2차 학습에서 사용한 데이터셋에서 데이터량을 늘려서 학습
구글 이미지 크롤링으로 검색된 파손된 우산 이미지를 모두 모아서 크롤링으로는 우리가 원하는 데이터를 더 구할 수 없으니 다음 단계에서는 직접 데이터셋을 늘리는 방식을 찾아야 한다

이전 시도보다는 높은 정확도를 가지게 됐다.

2. KoGPT2를 이용한 Borrow-San 서비스 챗봇

2.1 전처리

2.2 학습

가장 많이 사용되는 송영숙님의 깃허브에 있는 챗봇 데이터셋을 참고해서 프로젝트 시나리오를 추가 메타데이터는 사용자 입력, 원하는 대답, 내용 분류된다

2.2.1 1차 시도

서비스 시나리오를 구상해서 약 100개의 대화 유형을 데이터셋으로 만들어 학습

결과
고정된 답변만 가능하고 그마저도 틀리는 경우가 발생
서비스 이외의 대답은 불가

대안 : 송영숙님의 데이터셋을 추가해서 대화 가능한 범위 확대

2.2.2 2차 시도

1차 시도의 대안으로 데이터셋을 추가해서 학습
결과
대화 가능범위는 늘었지만 알아듣지 못한다

원인 : 기존 데이터셋에 내용 분류에 해당하는 값들을 넣어주지 않아서 생긴 문제

대안 : 내용 분류에 해당하는 값으로 서비스 관련(3)을 추가했다.

대안 적용 후

2.3 ChatGPT3로 변경

ChatGPT3 출시로 기존에 있던 KoGPT2를 파인튜닝하는 방식보다 더 쉽게 좋은 성능을 낼 수 있어서 ChatGPT3를 사용한 서비스용 챗봇으로 변경

2.3.1 준비(API키)

OpenAI에서 회원가입 후 진행
API키 가져오기
- API키 생성

2.3.2 코드 작성

openAI 설치

터미널에서 아래 명령어 입력으로 설치

pip install openai

API 호출

import pandas as pd
import openai
openai.organization = "Organization 키를 입력"
openai.api_key = "발급받은 API 키를 입력."

Organization 키 확인

3. 수요예측 모델

3.1 1차

3.1.1 🧾전처리

공공데이터의 범위가 너무 넓어서 서비스 지역을 2호선에 한정하고 그에 따른 전처리 진행

y값 생성

원본 데이터에서는 승차총승객수와 하차총승객수만 나와있어서 y값으로 사용할 컬럼이 없는 상태이므로 각 일자별 승하차 변동을 나타내는 컬럼을 추가

전처리 과정에 역별로 csv파일을 분리하는 과정 추가

역별 csv로 변경한 이후 아래 코드로 y값 생성

분할 및 y값 생성 결과

전처리 이전
서비스 대상 지역 축소
각 역별 csv 생성
y값인 승하차 승객수 변동 컬럼 추가

Min Max Scale

3.2 모델 생성

계획 : 각 역별로 일별 승하차총승객수를 바탕으로 하차총승객수를 예측한다

보완사항

각 역별로 모델을 만들고 같은 기간동안 지하철 승객 변동이 가장 심한 지역 위주로 지도에 나타내는게 기존의 계획이었으나 모든 역이 요일을 기준으로 거의 일정한 요동인구 변화를 나타내기 때문에 지하철을 이용한 승객 변화를 통해 학습한 모델의 메리트가 떨어진다.

대안

모든 역에 대한 수요예측 후 비교라는 초반의 방식을 버리고 하나의 역에 대한 작업 우선 진행 강남 하나만 집어서 날씨 등 다른 변수 추가 (2023-02-27)

3.2 2차(날씨 추가)

3.2.1 전처리

이전 단계에서 사용한 데이터셋에는 변수가 너무 적기 때문에 하나의 역을 정해서 강수 여부를 추가

3.2.2 학습

결과

서비스 항목인 우산과 비슷하게 날씨에 영향을 받는 상품의 수요 변화를 변수로 둘 필요가 있다

날씨 추가 후 😅 다시 생각해보니 날씨가 지하철을 이용량에 영향을 미치지 않고 이걸 뽑아내더라도 우산 대여와 관련이 없다

3.3 3차(따릉이 대여정보 추가)

예시 상품인 우산처럼 날씨의 영향을 많이 받으면서 수요의 증감이 우산 사용량과 반비례 관계를 가졌을 것이라고 예상되는 따릉이 대여기록을 추가 따릉이 데이터 수 : 53,401,411개

3.3.1 전처리

우산과 수요가 반비례하는 따릉이의 자료를 가져오고 y값을 승하차 변동률이 아니라 따릉이 대여량으로 바꾸기 위해 전처리 과정을 거침'

서울역 승하차정보 추출

서울역의 역별 승하차 정보와 따릉이 대여소 위치정보 간의 연결이 가장 수월하기 때문에 강남역을 대상으로 한 이전 전처리 결과를 버리고 서울역으로 다시 진행

따릉이 대여량 추출

1년치 따릉이 대여정보가 하루를 기준으로 적게는 5만에서 20만개의 데이터가 모여있어서 전처리가 필수

서울역 승하차 정보와 따릉이 대여량 join

365개의 csv 파일 중 일부 파일의 메타데이터, 인코딩 방식이 일치하지 않아서 에러 발생

3.3.2 학습

결과

epoch : 80
epoch : 800

날씨 데이터가 빠진 채로 학습해서 그런거라고 생각된다

3.4 4차(기온, 풍속 추가)

3.4.1 전처리

3차 시기의 데이터에 기온, 풍속 등 변수 추가

3.4.2 학습

결과

3차 시도 때보다는 loss가 감소했다

epoch, batch size에 따른 결과 비교


epoch : 300, batch size : 20	epoch : 400, batch size : 20

epoch : 400, batch size : 30	epoch : 500, batch size : 20

epoch : 600, batch size : 12	epoch : 700, batch size : 30

epoch : 800, batch size : 15	epoch : 4000, batch size : 64

batch size

각 사이즈 테스트시 에포크는 1000
||| |---|---| |15|20| ||| |30|64| |||

16 단위로 batch 사이즈 비교
5 단위로 비교

😨오류

FastAPI💨

1. Invalid argument(s) 'encoding' sent to create_engine()

🤔원인 기존까지 잘 작동되던 코드인데, 포맷 후 버전이 달라지면서 발생한 에러

😊해결

버전이 업그레이드 되면서 encoding을 명시하는 것이 레거시가 되었다.
위 코드에서 encoding=”utf-8” 부분만 지우면 해결 된다.

MySQL 로그인 시 my.cnf 파일 인식 불가

🤔원인 Dockerfile 에 my.cnf 경로를 지정하지 않아 발생한 오류

😊해결

사진과 같이 경로만 추가하면 해결

sqlalchemy.exc.InvalidRequestError: One or more mappers failed to initialize

🤔원인

Postman에서 값 전달 시 발생하는 에러
Article 테이블의 back_populates에 적힌 속성 값과 User 테이블의 변수 명이 달라 발생하는 에러

😊해결

변수 명과 속성 값을 동일하게 변경하면 해결

Docker🐋

다른 컨테이너 실행 오류

🤔원인 git 업로드 시 생성되는 .idea 폴더와 충돌해 기존 컨테이너가 실행되어 발생하는 오류

😊해결 .idea 폴더 삭제 후 명령어를 재 실행하면 해결

DB 테이블 미 생성

🤔원인 router 연결 코드가 제대로 입력되지 않은 경우 발생하는 에러

😊해결

main.py → router(schema) → repository → model 순으로 router 연결이 되지 않은 부분이 있는지 확인하고, 빠진 부분에 추가로 코드를 입력하면 해결
이번에 발생한 에러는 main.py 에 umbrella, stand의 연결 코드가 없어서 발생
umbrella, stand 연결 코드를 추가한 뒤 docker compose up 명령어를 다시 입력하면 테이블이 생성

도커 허브 이미지 업로드시 아래 문제 발생

🤔원인 버전 이슈로 node 16.0 이하의 버전에서는 html 태그를 지원하지 않는다

😊해결 버전을 올려서 사용해준다. 물론 이 과정에서 다른 문제가 발생하지 않았는지 확인하는건 당연

Vue

Unhandled Runtime Error

🤔원인 Table 내부 구조를 잘못 짜 발생한 오류

😊해결 태그만 사용해 구성했던 테이블을 태그 내부에 태그를 넣어 구성하자 해결

YOLOv5

KeyError: 'path'

🤔원인 아래 코드를 추가해서 yaml 파일의 내용을 변경하는 과정에서 원래 있던 path:가 사라져서 발생한 문제

😊해결 yaml을 수정해주자

전처리 과정에서 한 개의 파일만 제거하고 다음 파일은 찾지 못하는 문제 발생

🤔발생 코드

train_label_list = glob('C:/Users/AIA/PycharmProjects/datasets/umb/train/labels/*.txt')
for path in train_label_list:
  print(path)
  f = open(path, "rt")
  umbrella = []
  for line in f:
    if line.startswith("76"):
      umbrella.append(line)
  f.close()
  if len(umbrella) == 0 : # person 이 없으면 삭제한다
    os.remove(path)
    os.remove(path.replace(".txt", ".jpg").replace("/labels/","/images/"))
  else :
    f2 = open(path, 'wt')
    for p in umbrella:
      f2.write(p.replace("76","0",1))
    f2.close()

😊해결 12번 라인의 replace("/labels/","/images/")를 replace("labels","images")로 바꿔서 다시 실행

전처리 후 학습시 nc 이외의 범위에서 키에러 발생

🤔원인 발생 당시 train과정에서는 전처리가 완료되어 모든 네임클래스가 0으로 정리된 파일을 사용했지만 valid 과정에서는 전처리가 제대로 이뤄지지 않은 파일이 적용돼서 발생한 문제

😊해결

에러지점 네임클래스 확인
0 이외의 다른 nc가 들어온걸 볼 수 있다

전처리 코드를 valid 폴더 내부에도 실행해준다

# 에러 발생 
for cls, *xyxy in filtered_labels.tolist():
    metadata.append({
        'label': f'{self.class_names[int(cls)]}-gt',
# 변경
for cls, *xyxy in filtered_labels.tolist():
    metadata.append({
        'label': f'{self.class_names}-gt',

KoGPT2

RuntimeError: Expected all tensors to be on the same device, but found at least two devices

🤔원인 텐서 별로 사용하는 디바이스가 달라서 발생

😊해결

사용중인 디바이스 확인
- model과 token_ids의 디바이스가 다른 것을 확인
동일한 디바이스를 사용하게 해서 해결

TypeError: can't convert cuda:0 device type tensor to numpy. Use Tensor.cpu() to copy the tensor to host memory first.

🤔원인 GPU에 할당된 텐서를 넘파이 배열로 변환하려 해서 발생

😊해결 이전 에러 해결을 위해 CUDA로 사용중이던 텐서의 디바이스를 넘파이 배열 사용 전에 cpu로 바꾼다.

ValueError: Connection error, and we cannot find the requested files in the cached path. Please try again or make sure your Internet connection is on.

😊해결 재실행하면 된다

수요예측 모델

TypeError: numpy boolean subtract,

🤔원인 MinMaxScale 과정에서 String값을 가지는 컬럼까지 포함돼서 발생한 문제

😊해결 int값만 사용될 수 있도록 바꿔준다

전처리 과정중 키에러가 반복적으로 발생

🤔원인 전체 csv 파일 중 일부 파일의 메타데이터, 인코딩 방식이 일치하지 않아서 발생

😊해결 따로 정해진 방식은 없고 아래 코드를 통해 해결

이번 에러는 아래 코드로 해결했다

dirs = os.listdir('.\\data\\tpss')
for i in dirs:  # 월
  dir = os.listdir(f'.\\data\\tpss\\{i}')
  for j in dir:  # 일
      try:
          df = pd.read_csv(f'.\\data\\tpss\\{i}\\{j}', encoding='cp949')
          if df.columns[2] != '시작_대여소_ID':
              df.rename(columns={df.columns[2]: '시작_대여소_ID'}, inplace=True)
              df.to_csv(f'.\\data\\tpss\\{i}\\{j}')
      except UnicodeDecodeError as df:
          df = pd.read_csv(f'.\\data\\tpss\\{i}\\{j}', encoding='utf8')
          if df.columns[2] != '시작_대여소_ID':
              df.rename(columns={df.columns[2]: '시작_대여소_ID'}, inplace=True)
              df.to_csv(f'.\\data\\tpss\\{i}\\{j}')
      print(f'{j}일 종료')

ValueError:

🤔원인 확인 결과 각 역 별로 csv파일을 나누는 과정에서 딱 역의 종류만큼 인덱스가 다른 것을 알 수 있다

😊해결 모든 역을 한 번에 비교하기보다 각 역별 이동인구 변동율을 예측하고 이를 비교하는 방향으로 변경

npm run serve 실행시 noscript만 나오는 경우

🤔원인 발생 당시 main.js의 내용은 아래처럼 작성됐는데

import { createApp } from 'vue'
import App from './App.vue'
import { router } from '@/router/index'

createApp(App).use(router).mount('#src')

여기서 createApp() 메소드는 인자로 전달된 DOM element를 찾아, 해당 DOM element를 Vue 인스턴스에 마운트(Mount)한다. 위에서 DOM element로 전달된 #src가 잘못된 선택자라서 발생한 문제다.

😊해결

원래는 default인 #src가 맞는 인자지만 이번 프로젝트에서는 App.vue를 통해 전달된 파일들을 보여주는 형태라서 #src를 #app으로 변경해줘야 한다.

Oracle) 프로젝트 배포

Tue, 28 Mar 2023 05:21:29 GMT

1. Linux 패키지 업데이트

sudo apt update -y && sudo apt upgrade -y

update : 최신 버전 유무를 확인해주는 명령어

upgrade : 해당 패키지들을 다운로드 받고 설치

2. node 설치

nvm 설치 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
위의 명령어로 bash 설정을 바꿨으면 아래 명령어도 실행 source ~/.bashrc
npm 설치 npm install
설치 확인 node npm
yarn 설치 npm install --global yarn

3. 프론트엔드 / 백앤드 실행

usr 경로에 깃 클론 cd usr git clone [repo 주소]

맨 처음 putty로 접속을 하면 기본적으로 home/ubuntu 경로에 있게되는데, 이 안에 클론을 받으면 나중에 배포할 때 500 에러가 발생할 수 있다. 그러니 꼭 상위의 usr 폴더에 들어가서 clone
front, back 폴더에서 각각 yarn install을 해서 패키지들을 설치 yarn install yarn start
db 정보 등 기존에 env 파일로 관리하던 내용들도 .env 파일에 작성해준 뒤 실행을 확인 cd [.env 파일 만들 경로] vi .env 파일 내용 작성 후 esc -> :wq

4. 배포

nginX와 Docker를 사용하니까 설치해준다 npm install --global nginx npm install --global docker

4.1 서버 배포

백엔드 폴더에서 서버를 실행 pm2를 사용하는 경우는 pm2 --name back-server start yarn -- start를 사용하지만 우리는 docker를 사용해서 docker compose up을 하면 된다.

4.2 프론트 배포

front 폴더로 이동한 후 build yarn build 또는 npm run build

빌드가 완료되면 nginx 세팅을 할 때 필요하니까 build 폴더로 이동한 뒤 현재 경로를 기록한다.

pwd 명령어로 나온 경로를 복사해서 따로 적어놓아야 한다. cd build pwd
nginx 설정 파일을 수정 sudo vi /etc/nginx/sites-available/default

root /var/www/html; 부분을 아까 기록한 폴더 위치로 바꿔주면 된다. 이 때 오타가 있거나 뒤에 세미콜론(;)을 붙이지 않으면 오류가 나니까 주의. (앞의 /도 지우면 안된다.) 예) root /usr/KORrection/front/build; root 위에서 기록한 build 폴더 위치;

nginx 재시작 sudo systemctl reload nginx sudo service nginx start

클론 이후 내용은 지금 진행중인 팀 프로젝트 마무리되면 그때 직접 해보면서 다시 정리한다

참고

혼자공부끄적끄적

FastAPI) 경로 매개변수

Mon, 27 Mar 2023 13:49:53 GMT

경로 매개변수?

파이썬 포맷 문자열이 사용하는 동일한 문법으로 "매개변수" 또는 "변수"를 경로에 선언할 수 있다

예시)
from fastapi import FastAPI

app = FastAPI()

@app.get("/items/{item_id}")
async def read_item(item_id):
    return {"item_id": item_id}

경로 매개변수 item_id의 값은 함수의 item_id 인자로 전달되서 http://127.0.0.1:8000/items/foo로 이동하면 {"item_id":"foo"}라는 응답을 볼 수 있다

타입이 있는 매개변수

위의 코드에서 파이썬 표준 타입 어노테이션을 사용하여 함수에 있는 경로 매개변수의 타입을 선언할 수도 있다.

@app.get("/items/{item_id}")
async def read_item(item_id:int):

데이터 변환

http://127.0.0.1:8000/items/3을 열면 {"item_id":3}라는 응답을 볼 수 있다

이때 함수가 받은(반환도 하는) 값은 문자열 "3"이 아니라 파이썬 int 형인 3으로 타입 선언을 하면 FastAPI는 자동으로 요청을 "파싱"한다.

데이터 검증

경로의 타입을 int로 설정했으므로 브라우저에서 경로를 str 등으로 주게 되면 아래와 같은 에러가 발생한다 (이는 int와 float 사이에도 동일)

{
    "detail": [
        {
            "loc": [
                "path",
                "item_id"
            ],
            "msg": "value is not a valid integer",
            "type": "type_error.integer"
        }
    ]
}

파이썬 타입 선언을 하면 FastAPI는 데이터 검증하는데 오류는 검증을 통과하지 못한 지점도 정확하게 명시한다.
- 이는 API와 상호 작용하는 코드를 개발하고 디버깅하는 데 매우 유용

순서 문제

경로 동작을 만들때 고정 경로를 갖고 있는 상황들을 맞닦뜨릴 수 있다. /users/me처럼, 현재 사용자의 데이터를 가져오려고 할 때, 사용자 ID를 이용해 특정 사용자의 정보를 가져오는 경로 /users/{user_id}도 있으면 경로 동작은 순차적으로 평가되기 때문에 /users/{user_id} 이전에 /users/me를 먼저 선언해야 한다.

from fastapi import FastAPI

app = FastAPI()


@app.get("/users/me")
async def read_user_me():
    return {"user_id": "the current user"}


@app.get("/users/{user_id}")
async def read_user(user_id: str):
    return {"user_id": user_id}

그렇지 않으면 /users/{user_id}는 매개변수 user_id의 값을 "me"라고 "생각하여" /users/me도 연결한다.

사전정의 값부터 정리 다시

FastAPI) 시작하기

Mon, 27 Mar 2023 13:41:33 GMT

main.py의 형식과 실행 방법, 대화형 또는 대안 API 문서를 통한 확인은 이전 게시글 참고

OpenAPI

FastAPI는 API를 정의하기 위한 OpenAPI 표준을 사용하여 여러분의 모든 API를 이용해 "스키마"를 생성한다

스키마

API "스키마"

이 경우, OpenAPI는 API의 스키마를 어떻게 정의하는지 지시하는 규격 이 스키마 정의는 API 경로, 가능한 매개변수 등을 포함

데이터 "스키마"

"스키마"라는 용어는 JSON처럼 어떤 데이터의 형태를 나타낼 수도 있는데 이러한 경우 JSON 속성, 가지고 있는 데이터 타입 등을 뜻합니다.

OpenAPI와 JSON 스키마

OpenAPI는 API에 대한 API 스키마를 정의한다. 또한 이 스키마에는 JSON 데이터 스키마의 표준인 JSON 스키마를 사용하여 API에서 보내고 받은 데이터의 정의(또는 "스키마")를 포함한다.

openapi.json 확인

가공되지 않은 OpenAPI 스키마가 어떻게 생겼는지 궁금하다면, FastAPI는 자동으로 API의 설명과 함께 JSON (스키마)를 생성하니까 로컬에서 앱이 실행되는 url 뒤에 /openapi.json을 추가한 http://127.0.0.1:8000/openapi.json에서 직접 볼 수 있다

OpenAPI의 용도

OpenAPI 스키마는 포함된 두 개의 대화형 문서 시스템을 제공하고 OpenAPI의 모든 것을 기반으로 하는 수십 가지 대안이 있다.

FastAPI로 빌드한 애플리케이션에 이러한 대안을 쉽게 추가 할 수 있다.
API와 통신하는 클라이언트를 위해 코드를 자동으로 생성하는 데도 사용할 수 있는데 그 예로 프론트엔드, 모바일, IoT 애플리케이션이 있다.

단계별 요약

1단계: `import FastAPI`

from fastapi import FastAPI

FastAPI는 API에 대한 모든 기능을 제공하는 파이썬 클래스다
- FastAPI는 Starlette를 직접 상속하는 클래스라서 FastAPI로 Starlette의 모든 기능을 사용할 수 있다.

2단계: FastAPI "인스턴스" 생성

from fastapi import FastAPI
인스턴스명 = FastAPI()

app 변수는 FastAPI 클래스의 "인스턴스"가 돼서 모든 API를 생성하기 위한 상호작용의 주요 지점이 될 것이다.
이 app은 다음 명령에서 uvicorn이 참조하고 것과 동일하다

3단계: 경로 동작 생성

from fastapi import FastAPI
인스턴스명 = FastAPI()
@인스턴스명.get("/")

3.1 "경로"

일반적으로 "앤드포인트" 또는 "라우트"라고도 불리며 API를 빌드하는 동안 "경로"는 "관심사"와 "리소스"를 분리하는 주요 방법이다

여기서 "경로"는 첫 번째 /에서 시작하는 URL의 마지막 부분이므로 https://example.com/items/foo라는 URL에서의 경로는 /items/foo다

3.2 "동작(Operation)"

HTTP "메소드" 중 하나

POST, GET, PUT, DELETE 외에도 OPTIONS, HEAD, PATCH, TRACE도 있다
HTTP 프로토콜에서는 이러한 "메소드"를 하나(또는 이상) 사용하여 각 경로와 통신할 수 있다

`@something`

데코레이터라고 부르며 아래 있는 함수를 받고 그걸 이용해 무언가를 한다

@인스턴스.get("/") FastAPI에게 아래 함수가 경로 /에 해당하는 get 동작하라고 알려주는데 이게 경로 동작 데코레이터다

4단계: 경로 동작 함수 정의

from fastapi import FastAPI
인스턴스명 = FastAPI()

@인스턴스명.get("/")
async def root():

위에서 먼저 정리한대로 경로는 / 동작은 get 등 함수는 "데코레이터" 아래에 있는 함수 (@app.get("/") 아래).

위의 경우 async함수를 사용했는데 async def 대신 일반 함수로 정의할 수 있다

5단계: 콘텐츠 반환

from fastapi import FastAPI
인스턴스명 = FastAPI()

@인스턴스명.get("/")
async def root():
    return {"콘텐츠명":"콘텐츠"}

요약

FastAPI 임포트.
인스턴스 생성.
경로 동작 데코레이터 작성.
경로 동작 함수 작성.
개발 서버 실행(uvicorn main:app --reload)

참고

FastAPI, 자습서-사용자 안내서

백엔드 인터뷰 준비(Learning)

Mon, 27 Mar 2023 12:27:42 GMT

인공 지능의 역사

알랜 튜링(1965) - 마민 민스키 (1969, XOR 문제, 멀티 레이어 필요) - 겨울1 (1974 ~ 1980) - 힌튼 (1986, 오류 역전파로 멀티 레이어 문제 해결) - 겨울2 (Vanishing gradient problem, 1987 ~ 1993) - 힌튼 (엑티베이션 함수 relu) - 알파고 (2016)

데이터(Data)

Data has a categorical, numeric.

카테고리(categorical) = 이산형 = norminal + ordinal = 정수형
숫자형(numeric) = 연속형 = ratio + interval = 실수형
데이터 분석에는 두 가지의 접근방법이 있다.*
확증적 데이터 분석(CDA: Confirmatory Data Analysis) = 추론통계 = 가설 -> .. -> 특정 사례 예측 = 연역 = 가정된 전제
탐색적 데이터 분석(EDA: Exploratory Data Analysis) = 기술통계 = 데이터 -> .. -> 모델 = 귀납 = 개인적 경험

데이터셋

train, test, validation set 세개로 나눈다.

머신러닝(Machine Learning)

머신러닝은 통계와 딥러닝의 집합이다. 머신러닝과 딥러닝의 차이점은 신경망의 유무이다.

통계와 머신러닝의 차이

기술통계 - 추론통계 = 학습(Learning)

머신러닝 절차

데이터 로드

데이터 분석

데이터 이해를 위한 데이터 분석

(= 데이터 전처리를 위한 데이터 분석)

변수
설명
데이터
테이터 타입
종속 변수
특성 생성
특성 삭제
결측값 처리
정규 분포로 변환
이상값 처리
원핫 인코딩
라벨 인코딩

데이터 전처리

데이터 수집 20% + 데이터 전처리 60% 시간 사용 (백조 발 구르기) 특성 생성 (데이터 프레임) 특성 삭제 (데이터 프레임) 변수 나누기 (독립 변수와 종속 변수 나누기) 수(치)가 아닌 데이터를 수(치)로 변환 결측값 처리 정규 분포로 변환 이상값 처리 원핫 인코딩 구간화 라벨 인코딩 특성 스케일링 차원 축소 커스텀 데이터 변환 군집화

모델 생성

모델 학습

회귀

모델 검증

회귀나 분류냐에 따라 달라진다

모델 예측

회귀/분류/군집

회귀 (지도 학습: 답 있는 데이터로 학습)
분류 (지도 학습)
군집 (비지도 학습: 답 없는 데이터로 학습, 데이터 전처리)

회귀

특성을 통해 수(치) (실수) (연속형)를 예측한다. 수(치)를 예측하려면 회귀를 사용

회귀는 확률을 예측하는 것이 아니다. 회귀는 출력는 연속성이 있고, 그 연속성 중에 어디에 점을 찍을지 결정하는 문제다

타겟 변수 Y 가 연속형 변수(continuous variable)인 경우

연속형 변수: 연속 범위내에서 임의의 값을 가질 수 있는 변수 (가질 수 있는 값이 무한정) 설명 변수와 종속 변수의 관계를 선형으로 모델링하냐 비선형으로 모델링하냐에 따라 선형과 비선형으로 나누어진다

1) 선형 회귀 모델 (선형: 수식이 직선)

(1) 선형 회귀 (LinearRegression) 모델

변수들이 서로 선형적으로 연결되어 있는 경우, 오차(실제값 과 예측값의 차이)가 가장 작은 직선인 최저적합선을 찾는다 (= 직선의 수식(모델)에서 w 와 b를 찾는다)

1	2	3
계수(coefficient)	기울기	가중치(weight)
상수항(intercept)	y절편	편향(bias)

특이치에 영향을 받기 쉬우므로 빅데이터 집합을 분석하는 데 사용해서는 안 된다.
핵심키워드: 선형회귀(Linear Regression) 가설(Hypothesis) 비용함수(Cost function)
(2) 라쏘 (Lasso) 모델

리지 회귀와 같이 모델의 복잡성을 줄여주는 또 다른 정규화 기법이다.
회귀 계수의 절대 사이즈를 금지함으로써 복잡성을 줄인다.
리지 회귀와는 다르게 아예 계수 값을 0에 가깝게 만든다.그 장점은 기능 선택을 사용할 수 있다는 것이다.
데이터 집합에서 기능 세트를 선택하여 모델을 구축할 수 있다.
라쏘 회귀는 필요한 요소들만 사용하고 나머지를 0으로 설정함으로써 과대적합을 방지할 수 있다.
(3) 릿지 (Ridge) 모델

다중 회귀라고도 불리는 리지 회귀는 정규화 또는 규제화(regularization) 기법으로 알려져 있으며 모델의 복잡성을 줄이는 데 사용된다.
또한 ‘리지 회귀 페널티’로 알려진 약간의 편향, 즉 바이어스(bias)를 사용하여 모델이 과대적합(overfitting)에 덜 취약하게 만든다.

Ridge: 능선(稜線)은 산이나 언덕의 꼭대기가 일정 간격을 두고 연결되어 연속적으로 솟아오른 지형을 말한다. 등산 코스로 흔히 사용된다

2) 비선형 회귀 모델 (비선형: 수식이 곡선)

(1) k-최근접 이웃 (KNeighborsRegressor) 모델

(2) 의사 결정 나무 (DecisionTreeRegressor) 모델

(3) 서포트 벡터 머신 (SVR) 모델

타겟변수 Y가 이산형 변수 (discrete variable)인 경우

이산형 변수: 특정한 값만 가질 수 있는 변수 (가질 수 있는 값이 유한정)

Classification
Y의 레이블이 디스크리트 일 경우 a b c d e 이렇게 객관식일 경우에 주로 많이 쓰임

Classification vs Clustering 분류 문제의 학습: 결정 경계 (decision boundary) 를 경정할 수 있는 함수, 패턴, 모델 찾아내기

집계 함수

입력이 여러개의 로우이고, 출력이 하나인 결과인 함수

테이블의 전체 로우 수를 구하는 count , 평균( avg ), 총합( sum ), 최대값( max ), 최소값( min ) 등이 집계함수다

추론과 예측

추론과 예측의 차이는 답이 라벨인가, 그라운드트루스 인가이다.

그라운드 트루스 (Ground-Truth)

"label"은 정답지라고도 불리듯이 답이 명확하게 정해져 있는 값 "ground-truth"은 '우리가 정한 정답', '우리의 모델이 우리가 원하는 답으로 예측해주길 바라는 답'

오차 편차 잔차 편향

오차(Error) : 실제값(y) - 테스트 단계 예측값(y^)
편차(Deviation) : 예측값평균 - 예측값
잔차(Residual) : 실제값(y) - 트레인 단계 예측값(y^)
편향(bias) : 분산과 반대되는 개념이라고 생각하면 편하다

우도함수

실현된 데이터(혹은 관찰된 데이터 observed data)로부터 특정 통계 모델의 적합성을 확인하는데 주로 이용된다.

워드임베딩(Word Embedding)

자연어를 머신러닝과 딥러닝에서 사용할 수 있도록 수치화된 데이터로 만드는 과정

인코딩(encoding)

문자 -> 숫자

원핫인코딩 (One Hot Encoding)

가장 기본적인 벡터화의 방법이다

단어 집합의 크기를 벡터의 차원으로 하고, 표현하고 싶은 단어의 인덱스에 1의 값을 부여하고, 다른 인덱스에는 0을 부여하는 단어의 벡터 표현 방식 단어가 뭔지만을 알려줄 뿐 어떤 특징을 표출해주지는 못한다.

정규화(Normalization)

feature 의 변환은 표준화(Z-score 정규화)와 정규화가 있다.

아웃라이어가 있으면 표준화 나머지는 정규화가 낫다.

코퍼스(Corpus)

말뭉치 또는 코퍼스(Corpus)는 자연언어 연구를 위해 특정한 목적을 가지고 언어의 표본을 추출한 집합

RNN에서 TrainSet을 말한다. 코퍼스에서 소문자(lower_case)전환, 숫자제거, 문장기호를 제거한 상태를 토큰이라고 하고 토큰은 정수화된다.
원핫인코딩으로 정형화된다.

토큰

코퍼스에서 숫자와 기호가 제거된 사전에 실린 단어 그 자체

토큰(Token)이란 문법적으로 더 이상 나눌 수 없는 언어요소
텍스트 토큰화의 유형은 문장 토큰화와 단어 토큰화로 나눌 수 있습니다.
- 문장 토큰화는 텍스트에서 문장을 분리하는 작업을 뜻한다.
- 단어 토큰화는 문장에서 단어를 토큰으로 분리하는 작업을 뜻합니다.
- 단어 토큰화 (Word Tokenization)는 기본적으로 띄어쓰기를 기준으로 합니다.

토크나이저

data를 문장 혹은 단어 등의 단위로 나누는 것

타깃(=출력값)

int = 불연속 = 카테고리컬 = 분류 classification
float = 연속 = 시퀀셜 = 회귀 regression

트랜스포머

트랜스포머는 시퀀스-투-시퀀스 과제를 수행하는 모델

백엔드 인터뷰 준비 (네트워크)

Mon, 27 Mar 2023 08:14:15 GMT

1. TCP와 UDP의 차이

-	TCP	UDP
연결여부	연결형 서비스	비연결형 서비스
방식	가상회선 방식	데이터그램 방식
특징	높은 신뢰성, 제어 기능제공	TCP에 보다 빠르다

TCP는 연결형 서비스로 가상회선 방식을 제공하고 높은 신뢰성을 보장하며 흐름제어 및 혼잡 제어 기능을 제공한다.
UDP는 비연결형 서비스로 데이터그램 방식을 제공하고 속도가 TCP에 빠르다.

2. TCP 3,4 way handshake

TCP 3 way handshake 는 TCP 통신을 이용하여 데이터를 전송하기 위한 네트워크 연결을 설정하는 과정
- 즉, 양쪽 모두 데이터를 전송할 준비가 되었다는 것을 보장하고, 실제로 데이터를 전송하기 전에 한 쪽이 다른 쪽이 준비되었다는 것을 알 수 있도록 한다.
TCP 4 way handshake 는 TCP의 연결을 해제하는 과정

3. HTTP와 HTTPs의 차이

HTTP는 서버/클라이언트 모델을 따라 데이터를 주고받기 위한 프로토콜. 즉, 하이퍼텍스트를 교환하기 위한 통신규약입니다.
HTTPs란 HTTP에 데이터 암호화가 추가된 프로토콜

4. HTTPS에 대해서 설명하고 SSL Handshake에 대해서 설명

HTTPS는 HTTP에 보안 계층을 추가한 것으로 제3자 인증, 공개키 암호화, 비밀키 암호화를 사용한다.
제3자 인증 : 믿을 수 있는 인증기관에 등록된 인증서만 신뢰하는 것
공개키 암호화 : 비밀키를 공유하기 위해 사용
비밀키 암호화 : 통신하는 데이터를 암호화하는데 사용

클라이언트는 TCP 3way handshake를 수행한 이후 Client Hello를 전송합니다. 서버는 인증서를 보냅니다.(다른 정보들도 전송하나 검색을 통해 알 수 있는 부분입니다. 대개 그 정도까지는 요구하지 않습니다.)

클라이언트는 받은 인증서를 신뢰하기 위해서 등록된 인증기관인지 확인합니다. 이 인증서는 인증기관의 개인키로 암호화되어있고, 공개키로 검증할 수 있습니다.(브라우저에 내장되어있음) 클라이언트는 사이트의 정보와, 서버의 공개키를 얻을 수 있습니다.

서버의 공개키로 통신에 사용할 비밀키를 암호화해서 서버에 보냅니다. 서버는 이를 개인키로 확인하고 이후 통신은 공유된 비밀키로 암호화되어 통신합니다.

제3자 인증: 인증서, 인증기관/공개키 암호화: 인증서, 비밀키 공유/비밀키 암호화: 통신과정

4.1 왜 공개키 암호화와 비밀키 암호화를 복합적으로 사용하는가?

공개키 방식은 암/복호화 과정에서 많은 컴퓨터 파워를 사용하기 때문에 성능에 단점이 생기는 문제를 줄이기 위해 복합적으로 사용한다

공개키를 그대로 사용하면 많은 접속이 몰리는 서버는 매우 큰 비용을 지불해야 하고 반대로 대칭키는 암호를 푸는 열쇠를 상대에게 전송해야 하는데 이걸 그냥 전송하면 위험하다
- 그래서 속도는 느리지만 데이터를 안전하게 주고 받을 수 있는 공개키 방식으로 대칭키를 암호화하고 실제 데이터를 주고 받을 때는 대칭키를 이용해서 데이터를 주고 받음

5. HTTP 메소드와 역할

메소드	역할
POST	생성(C)
GET	조회(R)
PUT	수정(U)
DELETE	삭제(D)

5.1 Get 과 Post 방식의 차이

Get : 클라이언트가 서버로 어떤 데이터를 조회하기 위한 요청을 위한 메소드
Post : 서버로 데이터를 생성하기 위해 데이터를 보낼때 사용하는 메소드
Get은 URL 파라미터에 데이터를 담아보내므로 body가 없고 Post는 body에 데이터를 실어 보낸다.

-	Get	Post
사용목적	데이터 조회	데이터의 생성
요청에 body	무	유
멱등성	O	X

멱등? : 연산을 여러번 적용해도 결과가 달라지지 않는 성질

정리🙋‍♂ Get은 데이터의 조회를 위한 요청시 사용하는 메소드이며 멱등하고, URL에 데이터를 실어보내므로 body가 없습니다. Post는 데이터의 생성 위해 사용하는 메서드로 body에 데이터를 실어보내고 멱등하지 않습니다.

6. RESTful?

REST의 원리를 잘 지키는 시스템

REST의 원리? HTTP URI 를 통해 데이터를 표시하고 HTTP method를 통해 자원에 대한 처리를 하는 것

7. CORS?

서로 다른 도메인간에 자원을 공유하는 것
대부분의 브라우저에서는 이를 차단하며, 서버측에서 헤더를 통해서 사용가능한 자원을 알려준다

8. OSI 7계층이란 무엇이고 존재이유

OSI 7계층은 네트워크에서 통신이 일어나는 과정을 7단계로 나눈것을 말하며 계층을 나눈 이유는 단계별로 통신이 일어나는 과정을 파악할 수 있기 때문이다.

8.1 TCP/IP 4계층 ?

실제로 우리가 대부분 사용하는 네트워크는 TCP/IP 4계층으로 통신에 실제로 이용되는 계층이다.

8.2 OSI 7계층 중 웹서버 소프트웨어는 어디서 작동?

웹 서버는 HTTP 프로토콜을 사용하여 html 데이터를 클라이언트에 제공하는 서버입니다. 웹서버 중의 하나로 어플리케이션 계층에서 작동

9. CSRF

웹사이트 취약점 공격의 하나로, 사용자가 자신의 의지와는 무관하게 공격자가 의도한 행위(수정, 삭제, 등록 등)를 특정 웹사이트에 요청하게 하는 공격
Django에서는 기본적으로 csrf token을 이용하는데 이는 POST 요청에 대해서만 csrf token을 발급하고 체크한다.

문제 출처

ksundong/backend-interview-question

썸네일 출처

heelieben

백엔드 인터뷰 준비(Python)

Mon, 27 Mar 2023 08:04:48 GMT

list와 tuple의 차이

둘 다 인덱스를 가지지만 list는 를 사용하고 수정이 가능한 반면, tuple은 ()(소괄호)를 사용하고 수정이 불가능하다

코루틴?

서브루틴이 루틴에 종속되는 기존의 함수와 달리, 루틴과 서브루틴이 서로를 호출하는 비동기 방식 따라서 호출하면 코드를 한 번만 실행할 수 있는 일반함수와 달리, 진입점이 여러 개인 코루틴은 코드를 여러 번 실행할 수 있다

진입점?(entry point) 함수의 코드를 실행하는 지점

데코레이터

함수를 받아 명령을 추가한 뒤 이를 다시 함수의 형태로 반환하는 함수로 함수의 내부를 수정하지 않고 기능에 변화를 주고 싶을 때 사용한다

GIL

Global Interpreter Lock의 약어로 파이썬에서만 존재하는 개념이다

여러 개의 스레드가 파이썬 바이트코드를 실행하지 못하게 막아서 한번에 하나만 사용할 수 있게 락을 거는 것으로 하나의 시점에 하나의 스레드만 실행된다
- CPU 연산의 비중이 큰 경우는 멀티 스레딩의 성능이 싱글스레드보다 떨어져서 GIL을 사용하는게 더 좋은 성능을 보인다

MRO

파이썬의 메소드 결정 순서로 기본적으로 다중 상속을 지원하는 파이썬에서 자식과 부모 클래스를 전부 포함하여 메소드의 실행 순서를 지정하는 것으로 죽음의 다이아몬드를 피할 수 있다.

Magic Method

스페셜 메소드(Special method) 또는 던더 메소드(Double UNDERscore method)라고도 불리며 이미 파이썬 내에 정의되어 있고, 클래스 내부에서 매직 메소드들을 오버라이딩 하여 사용할 수 있다.

특징
- 직접 호출해서 사용하지 않고, 정해진 규칙에 따라 알아서 호출된다
- 앞 뒤로 언더바가 두 개씩 붙는다

new와 init의 차이

init

객체가 생성되어 초기화 되는 즉시 호출하지만 메모리를 할당하지 않는다 -> 클래스 인스턴스를 생성하지 않는다
- new
init과 달리 객체에 메모리를 할당하며 init이 실행되기 전에는 항상 new가 실행되고 메모리 할당은 이때 이뤄진다
반드시 오브젝트를 반환한다
- 그럼 init이 아니라 new가 생성자인가?
No
일반적으로 우리가 아는 '객체 생성'은 new 메소드로 만든 인스턴스를 사용자가 원하도록 변경하는 것을 말하지만 '생성자'라는 단어에서 나타내는 생성은 객체가 생성되어 초기화 되는 즉시 호출하는 init으로 서로 다른 의미를 갖는다

(참고 : ryu-log, [python] new vs init)

`repr`와 `str`의 차이

객체의 타입에 관계없이 데이터를 문자열 표현으로 반환한다는 공통점이 있으나 __repr__은 해당 객체를 인간이 이해할 수 있는 표현으로 나타내기 위한 용도로 사용되는 반면, __str__의 본질적인 목적은 서로 다른 자료형 간에 인터페이스를 제공하기 위해서 존재한다 (참고:Parkito's on the way!)

r string과 u string

문자열 포매팅 방식들로 u와 r 외에 b와 f도 있다.

r string은 r'' 사이의 무자열을 이스케이프 시퀀스(변환) 없이 그대로 저장해서 파일경로나 정규표현식에서 자주 쓰이며
u sting은 unicode로 파이썬3 이후로는 없는 포매팅 방식이다
- 아직도 u''가 존재하는 이유는 레거시 코드들과의 호환성 때문이다
  
  (참고:코드잇, 문자열 포매팅의 종류에 관하여

Call by Assignment

명시적인 Call by Reference 혹은 Call by Value 라는 개념이 존재하지 않는 파이썬에서 함수에 인수를 전달하는 방식

파이썬은 모든 것이 객체이기 때문에 변수에 특정 값을 할당할 때, 그 값들이 실제로 변수에 저장되는 것이 아니라 새로운 객체가 생성되고 변수가 그 객체를 가르키는 방식으로 동작한다

파이썬에서의 접근제어지시자

클래스의 외부에서 클래스의 멤버 변수, 메서드, 생성자를 사용 가능 여부를 지정하는 키워드로 그 종류로는 어디서나 접근 가능한 public, 같은 패키지나 상속관계의 클레스에서만 접근 가능한 protected, 해당 패키지 내에서만 접근 가능한 default, 같은 클래스 내부에서만 접근 가능한 private가 있다.

global과 nonlocal 키워드의 차이

사용하면 변수 선언시 전역변수로 간주되는 global과 달리 nonlocal은 전역변수를 제외하고 본인 스코프 바깥 방향으로 가장 가까운 변수를 찾는다

classmethod와 staticmethod의 차이

staticmethod는 부모 클래스의 클래스 속성값을 가져오지만 classmethod는 cls인자를 활용해서 클래스의 클래스 속성을 가져오기 때문에 상속에서 차이가 있다

문제 출처

ksundong/backend-interview-question

썸네일 출처

heelieben

TensorFlow/Keras/Pytorch

Mon, 27 Mar 2023 01:30:52 GMT

텐서플로

구글이 개발한 오픈소스 소프트웨어 라이브러리이며 머신러닝과 딥러닝을 쉽게 사용할 수 있도록 다양한 기능을 제공

특징
데이터 플로우 그래프(Data Flow Graph) 구조를 사용

Data Flow Graph ? 수학 계산식과 데이터의 흐름을 노드(Node)와 엣지(Edge)를 사용한 방향성 그래프로 표현하는 방식
각 노드 사이의 연결이나 다차원 배열 등을 의미하는 텐서 사이의 연결 관계를 풍부하게 표현할 수 있으며, 텐서보드 시각화 도구 모음을 사용하면 웹 기반의 대화형 대시보드에서 그래프 실행 방법에 대한 검사나 프로파일링도 가능

장점

주로 이미지 인식이나 반복 신경망 구성, 기계 번역, 필기 숫자 판별 등을 위한 각종 신경망 학습에 사용되는데 특히 대규모 예측 모델 구성에 뛰어나 테스트부터 실제 서비스까지 사실상 거의 모든 딥러닝 프로젝트에서 범용적으로 활용할 수 있다.
구글이 지원하기 때문에 지속적인 성능 개선과 지원에서 타 프레임워크보다 빠르고 안정적이란 부분도 강점
추상화 수준이 높아 텐서플로를 활용하면 개발자는 알고리즘의 세세한 구현보다 전체적인 논리 자체에 더 집중할 수 있게 되며 확장성 또한 뛰어나다

단점

딥러닝 모델을 만드는 데 기초 레벨부터 직접 작업해야 하기 때문에 초보자가 사용하기 어려울 수 있다.

케라스

사용이 어려운 텐서플로우의 문제를 해결하기 위해 개발됐으며 텐서플로우보다 단순화된 인터페이스를 제공한다

특징

딥러닝 초급자도 각자 분야에서 손쉽게 딥러닝 모델을 개발하고 활용할 수 있도록 직관적인 API를 제공
케라스에서 제공하는 시퀀스 모델로 원하는 레이어를 쉽게 순차적으로 쌓을 수 있으며, 다중 출력 등 더 복잡한 모델을 구성할 때는 케라스 함수 API를 사용하여 쉽게 구성할 수 있다.

장점

일반 사용 사례에 최적화된 간단하고 일관된 인터페이스를 제공.
사용자 오류에 대해 명확하고 실용적인 피드백을 제공.
케라스의 구성 요소는 모듈 형태로, 각 모듈이 독립성을 갖기 때문에 새로운 모델을 만들 때 각 모듈을 조합해 쉽게 새로운 모델을 만들 수 있다.

단점

모듈화의 한계로 복잡한 프로젝트에 구현 범위가 다소 좁은 편이다. 또한 케라스는 다양한 백엔드 위에서 동작하기 때문에 어떤 오류가 발생했을 때 케라스 자체의 문제인지, 백엔드 언어의 문제인지 특정하기 어려운 단점이 있다

파이토치

페이스북의 AI 연구 팀이 Torch를 기반으로 개발한 파이썬 기반 오픈소스 머신러닝 라이브러리

특징

절차가 간단하고 그래프가 동적으로 변화할 수 있으며 코드 자체도 파이썬과 유사해 진입 장벽이 낮은 편

장점

그래프를 만들면서 동시에 값을 할당하는 Define by run 방식으로 코드를 깔끔하고 직관적으로 작성할 수 있다.
학습 속도가 텐서플로보다 빠르다.
텐서플로가 유기적을 신경망을 만들 수 없어 성능의 한계를 가지고 있는 반면, 파이토치는 메모리에서 연산을 하면서도 신경망 사이즈를 최적으로 바꾸면서 동작시킬 수 있다.
파이토치는 Numpy를 대체하면서도 GPU를 이용한 연산이 가능하며 유연하고 빠르기 때문에 최근 딥러닝 관련 논문에서는 텐서플로보다 파이토치를 선호하는 추세입니다.

단점

텐서플로에 비해 사용자층이 낮고 학습에 필요한 자료와 예제를 구하기 쉽지 않다.

참고

혼공머신(한빛미디어, 박해선)

Flutter로 프로젝트용 어플 제작

Wed, 22 Mar 2023 09:38:46 GMT

1. Flutter 작업 시작

Figma 디자인에 따른 모바일 어플리케이션 페이지 및 레이아웃 Flutter로 구현

1.1 페이지

네비게이션바(임시)	시작화면	로그인

회원가입	로딩화면	메인 화면 (대여 전)

QR 스캔	오류보고	메뉴

사용자 프로필	결제 정보	이용 방법	문의 내역

추후 작업 요망

챗봇 기능 추가 시 챗봇 위젯 구현 필요
위젯간 데이터 전송 및 상태 관리
API 를 통한 request 및 response 처리

2. 기능 구현

2.1 앱 로그인 및 로그아웃 기능 구현

REST API를 이용해 fastAPI 서버와 로그인 기능을 연동할 수 있는지 테스트 해보고자 한다.
서버는 POST 방식으로 user_email과 password 키값을 가지는 JSON을 보내면 해당 Token을 똑같은 JSON형태로 돌려준다.
소스코드*

에러 발생 INFO: 172.18.0.1:50394 - "POST /users/login HTTP/1.1" 422 Unprocessable Entity
원인 : 데이터를 JSON 형태로 Post 하지 않아서 생긴 문제다. jsonEncode 함수에 Map 형태의 값을 넣어 보내도록 한다.
화면을 통해 발급받은 토큰을 확인했다.

만들어놓은 레이아웃에 적용시킨 소스 코드

import 'dart:convert';import 'package:dio/dio.dart';import 'package:flutter/material.dart';import 'package:flutter_project/const/constants.dart';import 'package:flutter_project/screen/1_start.dart';import 'package:flutter_project/screen/3_signup.dart';import 'package:flutter_project/widgets/basic_button.dart';import 'package:flutter_project/widgets/input_box.dart';import 'package:flutter_project/widgets/logo.dart';class Login extends StatefulWidget {
  Login({super.key});  @override  State createState() => _LoginState();}

class _LoginState extends State {
  String user_email = '';  String password = '';  bool logoAppear = true;  @override  Widget build(BuildContext context) {
    final bottomInset = MediaQuery.of(context).viewInsets.bottom;    return Scaffold(
      appBar: AppBar(
        title: Text("로그인"),      ),      backgroundColor: MAIN_COLOR,      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 10.0),        child: Container(
          width: MediaQuery.of(context).size.width,          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,            crossAxisAlignment: CrossAxisAlignment.stretch,            children: [
              showLogo(),              InputBox(
                hintText: "아이디",                onTap: () {
                  setState(() {
                    logoAppear = false;                  });                },                onChanged: (String value) {
                  user_email = value;                },              ),              SizedBox(
                height: 10.0,              ),              InputBox(
                hintText: "비밀번호",                onTap: () {
                  setState(() {
                    logoAppear = false;                  });                },                onChanged: (String value) {
                  password = value;                },              ),              Row(
                children: [
                  Checkbox(value: false, onChanged: (value) {}),                  Text('자동 로그인'),                ],              ),              SizedBox(
                height: 30.0,              ),              Row(
                mainAxisAlignment: MainAxisAlignment.center,                children: [
                  Expanded(
                    child: BasicButton(
                      buttonTitle: "로그인",                      onPressed: () {
                        postLoginInfo();                        print('##### 토큰 정보 : ${postLoginInfo().toString()} #####');                      },                    ),                  ),                  SizedBox(
                    width: 10.0,                  ),                  Expanded(
                    child: BasicButton(
                      buttonTitle: "계정 찾기",                      onPressed: () => Navigator.push(
                        context,                        MaterialPageRoute(
                          builder: (context) => Start(),                        ),                      ),                    ),                  ),                ],              ),              BasicButton(
                buttonTitle: "회원가입",                onPressed: () => Navigator.push(
                  context,                  MaterialPageRoute(
                    builder: (context) => SignUp(),                  ),                ),              ),            ],          ),        ),      ),    );  }

  Widget showLogo() {
    if (logoAppear) {
      return Column(
        children: [
          Logo(),          SizedBox(
            height: 50.0,          ),        ],      );    } else {
      return SizedBox(
        height: 20.0,      );    }
  }

  Future postLoginInfo() async {
    Map loginInfo = {
      'user_email': user_email,      'password': password,    };    print('##### loginInfoMap is ${loginInfo} #####');    final response = await Dio().post(
      'http://10.0.2.2:8000/users/login',      data: jsonEncode(loginInfo),    );    return response.data;  }
}

이메일과 비밀번호의 초기값이 onChanged 함수를 통해 TextFieldForm의 값으로 변경되어 저장된다.

2023.02.28. 로그인, 로그아웃 구현 마무리 작업

TextFormField 위젯의 onChanged 함수를 이용하면 이메일과 비밀번호를 작성하는 중에도 상태가 변경되어 상태관리가 어려워진다.
대안으로 onSaved 함수를 이용해 값을 저장하고 TextFormField 위젯을 Form 위젯으로 감싸 GlobalKey() 클래스를 이용해 저장된 값들을 관리한다.
Dio를 이용해 응답받은 토큰은 FlutterSecureStorage 라이브러리를 이용해 값을 저장, 로그아웃에 이용한다.
showDialog함수를 이용해 로그인 성공, 실패시 알림창이 뜨게하고 알림창을 확인했을 때 Navigator를 이용해 알맞은 스크린으로 이동하도록 한다.
obscureText 기능을 통해 비밀번호 입력 시 “*”기호로 보이게 한다.

2.2 앱 로그인 및 로그아웃 기능구현 상세

로그인 성공 혹은 실패 시 API의 응답 데이터가 FutureBuilder의 snapshot에 저장된다. 저장된 데이터의 경우의 수만큼 switch문으로 코드를 작성한다.
비밀번호가 일치하지 않았을 경우

소스코드	화면

아이디가 일치하지 않았을 경우

소스코드	화면

로그인에 성공했을 경우

소스코드	화면

2.3 앱 회원가입 기능 구현

우선 회원가입에 필수 정보인 “이메일”과 “비밀번호”, “비밀번호 재입력” TextFieldForm 을 만든다
“비밀번호 재입력” 칸을 이용해 비밀번호를 정확히 입력했는지 검증한다.
이메일, 비밀번호가 null값이 아니고 비밀번호와 재입력 비밀번호가 일치하면 Dio 라이브러리를 통해 서버에 이메일과 비밀번호 값을 JSON 형태로 보낸다.
서버에서 응답받은 값 (null, 회원가입성공, 회원가입실패, 이미 존재하는 이메일) 에 따라 Dialog를 보여준다.
회원가입이 완료되면 Dialog의 ‘확인’버튼을 누르고 로그인 페이지로 이동한다.

2.4 앱(안드로이드) 지도 기능 구현

flutter_naver_map 플러그인을 통해 지도 위에 우산 대여함의 위치를 마킹하고 우산 대여함 아이콘을 클릭하면 우산 대여 화면으로 넘어가도록 한다.

네이버 API 사용 방법

네이버 클라우드 콘솔에 접속해 지도 API Key를 발급받는다.
현재 진행 중인 플러터 프로젝트 명을 그대로 입력한다.
클라이언트ID를 진행중인 프로젝트의 AndroidManifest.xml 파일에 입력한다.

에뮬레이터를 통해 이상없이 나오는지 확인한다.

2.4.1 우산대여함 위치에 마킹하기

initialCameraPosition 키를 통해 지도를 켰을 때 처음 위치를 설정한다.
초기 위치는 우선 우산대여함 위치와 동일하게 설정한다.
markers 키를 통해 마커를 입력한다.
마커 아이콘은 assets 디렉토리에 있는 우산이미지를 이용하였다.

우산 아이콘을 클릭시 우산 대여 혹은 반납 페이지로 이동할 수 있는 네비게이션 창이 실행된다

Marker(
                          markerId: '1',
                          position: LatLng(standLatitude, standLongitude),
                          icon: snapshot.data,
                          width: 32,
                          height: 32,
                          onMarkerTab: (marker, iconSize) {
                            showDialog(
                              context: context,
                              builder: (context) {
                                return AlertDialog(
                                  title: Text("우산 대여 화면으로\n이동하시겠습니까?"),
                                  content: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceEvenly,
                                    children: [
                                      ElevatedButton(
                                        onPressed: () {
                                          Navigator.of(context).push(
                                            MaterialPageRoute(
                                              builder: (context) =>
                                                  RentScreen(),
                                            ),
                                          );
                                        },
                                        child: Text("예"),
                                      ),
                                      ElevatedButton(
                                        onPressed: () {
                                          Navigator.of(context).pop();
                                        },
                                        child: Text("아니오"),
                                      ),
                                    ],
                                  ),
                                );
                              },
                            );
                          },
                        ),

2.4.2 사용자 현재 위치 표시

geolocator 패키지를 사용
```
dependencies:
  geolocator: ^9.0.2
```
flutter pub get 명령어로 dependency를 적용
```
import 'package:geolocator/geolocator.dart';
```

Future checkLocationPermission() async { final isLocationEnabled = await Geolocator.isLocationServiceEnabled(); if (!isLocationEnabled) { return "위치 서비스를 활성화해주세요."; } LocationPermission checkedPermission = await Geolocator.checkPermission(); if (checkedPermission == LocationPermission.denied) { checkedPermission = await Geolocator.requestPermission(); if (checkedPermission == LocationPermission.denied) { return "위치 권한을 허가해주세요."; } } if (checkedPermission == LocationPermission.deniedForever) { return "앱의 위치 권한을 설정에서 허가해주세요."; } return "위치 권한이 허가 되었습니다."; }

class BeforeRentScreen extends StatefulWidget { const BeforeRentScreen({Key? key}) : super(key: key);

@override State createState() => _BeforeRentScreenState(); }

class _BeforeRentScreenState extends State { final standLatitude = 37.5706; final standLongitude = 126.9853;

@override Widget build(BuildContext context) { return WillPopScope( onWillPop: () { return Future(() => false); }, child: Scaffold( appBar: AppBar( title: Text("Before Rent Screen"), leading: Container(), // 배포 시 홈버튼 삭제 actions: [homeButton(context)], ), body: Stack( children: [ FutureBuilder( future: checkLocationPermission(), builder: (context, snapshot) { if (snapshot.hasData && snapshot.connectionState == ConnectionState.waiting) { return Center( child: CircularProgressIndicator(), ); } if (snapshot.data == '위치 권한이 허가 되었습니다.') { return FutureBuilder( future: OverlayImage.fromAssetImage( assetName: 'assets/images/umb_icon.png', ), builder: (context, snapshot) { return NaverMap( ...

![](https://velog.velcdn.com/images/boost_dev/post/9e9479b9-bda8-4e0c-871d-3fb2747875d8/image.PNG)

## 2.5 앱 게시판 기능 구현
- 게시글 작성 시 첨부파일 업로드 테스트
- image_picker 패키지를 사용해 갤러리 혹은 카메라로 사진을 불러온다.
소스코드 :

import 'dart:io';

import 'package:dio/dio.dart'; import 'package:flutter/material.dart'; import 'package:image_picker/image_picker.dart';

void main() { runApp( MaterialApp( home: HomeScreen(), ), ); }

class HomeScreen extends StatefulWidget { const HomeScreen({Key? key}) : super(key: key);

@override State createState() => _HomeScreenState(); }

class _HomeScreenState extends State { String? imagePath; XFile? tokenPthoto;

@override Widget build(BuildContext context) { return Scaffold( body: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ ElevatedButton( onPressed: () async { final image = await ImagePicker().pickImage(source: ImageSource.gallery); print(image); }, child: Text("Load Image"), ), ElevatedButton( onPressed: () async { final image = await ImagePicker().pickImage( source: ImageSource.camera, maxHeight: 100, maxWidth: 100, imageQuality: 30, ); print("이미지 경로 : ${image!.path}"); print("이미지 경로 타입 : ${image.path.runtimeType}"); setState(() { imagePath = image.path; tokenPthoto = image; }); }, child: Text("Take a Photo"), ), previewPhoto(), ], ), ); }

Widget previewPhoto() { if (imagePath == null) { return Container( child: Text("이미지 경로 없음"), ); } else { return Column( children: [ Text("이미지 경로 : $imagePath"), Image.file( File(imagePath!), width: 200, height: 200, ), ], ); } } }


|첫 화면| 이미지 선택 화면|이미지 로드 완료|
|---|---|---|
|![](https://velog.velcdn.com/images/boost_dev/post/d7c69fd7-fbfc-4087-84d3-d7580d9d02ba/image.png)|![](https://velog.velcdn.com/images/boost_dev/post/623f61c0-331d-4368-aa50-2123104777e9/image.png)|![](https://velog.velcdn.com/images/boost_dev/post/8f41dfcc-bc54-4912-9813-33480b6af62c/image.png)|

- 촬영한 데이터 (혹은 불러온 데이터)를 서버에 전송한다.
    - Dio 패키지의 post 함수를 사용한다.

## 2.6 앱 챗봇 기능 구현
**챗봇 응답 서버와 통신 가능 테스트**
- http 패키지의  post 메서드를 이용해 서버의 챗봇 인공지능 모델과 통신한다.
- ListView builder를 이용해 사용자와 챗봇의 메세지를 화면에 나타낸다.
- 소스코드 :

챗봇 응답 서버와 통신 가능 테스트

http 패키지의 post 메서드를 이용해 서버의 챗봇 인공지능 모델과 통신한다.

ListView builder를 이용해 사용자와 챗봇의 메세지를 화면에 나타낸다.

소스코드 :

- 에뮬레이터 화면
![](https://velog.velcdn.com/images/boost_dev/post/14c89f2c-8a0c-4d15-9718-4918d4c5542b/image.png)

## 2.7 QR코드 인식
- QR code scanner 패키지를 pub.dev 에서 가져온다

dependencies: qr_code_scanner: ^1.0.1


- QR코드 인식에 성공하는 순간 우산 내부 사진을 캡쳐하기 위해 Screenshot 패키지를 pub.dev 에서 가져온다

dependencies: screenshot: ^1.3.0

- flutter pub dev  명령어로 depndency를 적용
- class의 속성으로 screenshot의 controller, qrview의 controller, qrcode, 캡쳐 시 QR 가이드라인을 제거하기 위해 boolean값을 생성

class RentScreen extends StatefulWidget { const RentScreen({Key? key}) : super(key: key);

@override State createState() => _RentScreenState(); }

class _RentScreenState extends State { final screenshotController = ScreenshotController(); String? qrCode; QRViewController? controller; final GlobalKey qrKey = GlobalKey(debugLabel: 'QR'); bool removeQrScannerOverlayShape = false;

@override Widget build(BuildContext context) { double deviceWidth = MediaQuery.of(context).size.width;

return Scaffold( ... 생략 ...

- 캡쳐하는 범위는 QRView 위젯 전체이므로 Screenshot 위젯으로 QRView 위젯을 감싼다. QRcode 스캔에 성공하면 카메라를 멈추고 Screenshot의 캡쳐 기능이 발동하도록 코딩한다. 캡쳐에 성공하면 API서버에 발송할지 여부를 묻는 다이얼로그가 뜨고 승인하면 서버에서 QR코드를 매치하고 커스텀한 YOLOv5를 이용해 우산의 고장 여부를 판별

... 생략 ... return Scaffold( appBar: AppBar( title: Text("Rent Screen"), actions: [ homeButton(context) ], leading: IconButton( icon: Icon(Icons.arrow_back), onPressed: () { Navigator.of(context).push( MaterialPageRoute( builder: (context) => BeforeRentScreen(), ), ); }, ), ), body: Screenshot( controller: screenshotController, child: QRView( key: qrKey, overlay: renderQrScannerOverlayShape(deviceWidth), onQRViewCreated: (controller) { controller.scannedDataStream.listen( (scanData) { if (scanData.code == null) { return; } else { qrCode = scanData.code; setState( () { removeQrScannerOverlayShape = true; }, ); controller.pauseCamera().then( (_) async { final capturedImg = await screenshotController.capture(); showDialog( context: context, builder: (context) { return AlertDialog( title: Image.memory( capturedImg!, width: deviceWidth * 0.75, height: deviceWidth * 0.75, ), actions: [ ElevatedButton( onPressed: () { setState( () { removeQrScannerOverlayShape = false; }, ); Navigator.pop(context); controller.resumeCamera(); }, child: Text("다시 스캔"), ), FutureBuilder( future: FlutterSecureStorage().read(key: "token"), builder: (context, snapshot) { return ElevatedButton( child: Text("대여"), onPressed: () async { await Dio() .post( '$API_DOMAIN/flutter/rent', data: jsonEncode( { "token": snapshot.data, "qr_code": qrCode, }, ), ) .then( (value) { if (value.data['msg'] == null) { showDialog( context: context, builder: (context) { return AlertDialog( title: Text("서버와 통신에 실패하였습니다"), actions: [ ElevatedButton( child: Text("확인"), onPressed: () { Navigator.of(context) .pop(); }, ), ], ); }, ); } else if (value.data['msg'] == "대여 성공") { showDialog( context: context, builder: (context) { return AlertDialog( title: Text("대여 성공했습니다"), actions: [ ElevatedButton( child: Text("확인"), onPressed: () { Navigator.of(context) .push( MaterialPageRoute( builder: (context) => AfterRentScreen(), ), ); }, ), ], ); }, ); } else if (value.data['msg'] == "대여 실패") { showDialog( context: context, builder: (context) { return AlertDialog( title: Text("대여 실패했습니다"), actions: [ ElevatedButton( child: Text("확인"), onPressed: () { Navigator.of(context) .push( MaterialPageRoute( builder: (context) => RentScreen(), ), ); }, ), ], // add this ); }, ); } }, ); }, ); }, ), ], ); }, ); }, ); } }, ); }, ), ), );

- 캡쳐 시 QR코드 가이드라인이 보이지 않도록 하기 위해 ```renderQrScannerOverlayShape```을 추가

... 생략 ... QrScannerOverlayShape renderQrScannerOverlayShape(deviceWidth) { if (removeQrScannerOverlayShape == false) { return QrScannerOverlayShape( borderColor: Colors.red, borderRadius: 5, borderLength: 15, borderWidth: 5, cutOutSize: deviceWidth * 0.2, ); } else { return QrScannerOverlayShape( overlayColor: Colors.black.withOpacity(0.0), ); } }

![](https://velog.velcdn.com/images/boost_dev/post/fd0d623c-7159-483b-a7f9-3ed5bef07568/image.jpg)
![](https://velog.velcdn.com/images/boost_dev/post/17b0b646-7507-4d02-a97c-31b932825e33/image.jpg)
![](https://velog.velcdn.com/images/boost_dev/post/306ecaae-b903-4ebd-b0cf-5a12e2cee559/image.jpg)


## 2.8 학습한 모델 실행
>** 소스코드**

import 'dart:convert'; import 'package:dio/dio.dart'; import 'package:flutter/material.dart'; import 'package:flutter_secure_storage/flutter_secure_storage.dart'; import 'package:qr_code_scanner/qr_code_scanner.dart'; import 'package:screenshot/screenshot.dart'; import '../const/constant.dart';

class ReturnScreen extends StatefulWidget { const ReturnScreen({Key? key}) : super(key: key);

@override State createState() => _ReturnScreenState(); }

class _ReturnScreenState extends State { final screenshotController = ScreenshotController(); String? qrCode; QRViewController? controller; final GlobalKey qrKey = GlobalKey(debugLabel: 'QR'); bool removeQrScannerOverlayShape = false;

@override Widget build(BuildContext context) { double deviceWidth = MediaQuery.of(context).size.width;

return Scaffold(
  appBar: AppBar(
    title: Text("Return Screen"),
  ),
  body: Screenshot(
    controller: screenshotController,
    child: QRView(
      key: qrKey,
      overlay: renderQrScannerOverlayShape(deviceWidth),
      onQRViewCreated: (controller) {
        controller.scannedDataStream.listen(
          (scanData) {
            if (scanData.code == null) {
              return;
            } else {
              qrCode = scanData.code;
              setState(() {
                removeQrScannerOverlayShape = true;
              });
              controller.pauseCamera().then(
                (_) async {
                  final capturedImg = await screenshotController.capture(
                    pixelRatio: 0.50,
                  );
                  showDialog(
                    context: context,
                    builder: (context) {
                      return AlertDialog(
                        title: Column(
                          children: [
                            Image.memory(capturedImg!,
                                width: deviceWidth * 0.75,
                                height: deviceWidth * 0.75),
                            Text(qrCode!),
                            Row(
                              children: [
                                ElevatedButton(
                                  onPressed: () {
                                    setState(
                                      () {
                                        removeQrScannerOverlayShape = false;
                                      },
                                    );
                                    Navigator.pop(context);
                                    controller.resumeCamera();
                                  },
                                  child: Text("다시 스캔"),
                                ),
                                FutureBuilder(
                                  future: FlutterSecureStorage()
                                      .read(key: "token"),
                                  builder: (context, snapshot) {
                                    return ElevatedButton(
                                      onPressed: () async {
                                        var response = await Dio().post(
                                          '$API_DOMAIN/flutter/return',
                                          data: jsonEncode(
                                            {
                                              "token": snapshot.data,
                                              "qr_code": qrCode,
                                              "image": capturedImg,
                                            },
                                          ),
                                        );
                                        print(
                                            "response : ${response.toString()}");
                                        Navigator.of(context).pop();
                                      },
                                      child: Text("반납"),
                                    );
                                  },
                                ),
                              ],
                            ),
                          ],
                        ),
                      );
                    },
                  );
                },
              );
            }
          },
        );
      },
    ),
  ),
);

}

QrScannerOverlayShape renderQrScannerOverlayShape(deviceWidth) { if (removeQrScannerOverlayShape == false) { return QrScannerOverlayShape( borderColor: Colors.red, borderRadius: 5, borderLength: 15, borderWidth: 5, cutOutSize: deviceWidth * 0.2, ); } else { return QrScannerOverlayShape( overlayColor: Colors.black.withOpacity(0.0), ); } } }

```

구현된 화면

결과

로컬에서는 우산을 인식한 모델이 앱에서는 우산인식을 못하는 문제 발생

대안

우산 내부 인식이 부족하다고 생각해서 파손 여부 판단에 필요한 우산 내부 이미지를 늘려서 재학습
리턴된 값 확인

서비스형 AI 구축

Wed, 22 Mar 2023 06:49:23 GMT

0. 기본적인 개발 준비 ✅

0.1 version check

작업 전 프로젝트 파일들이 완전 무결한 상태로 git push 후 작업(권장)
Windows10 환경에서 설치

Windows 초기 계정으로 설치하기(권장)

0.2 아나콘다 설치

⇒ 2022. 12. ver 설치 시 위 옵션 외에 디폴트로 설정되어 있는 값을 수정할 필요 없었음

    위 옵션을 선택해야 아나콘다가 전역으로 설치됨

0.2.1 환경변수 설정

    # powershell
    Windows + R
    sysdm.cpl ,3

    # 시스템 변수 생성
    ANACONDA_HOME1
    C:\ProgramData\Anaconda3
    ANACONDA_HOME2
    C:\ProgramData\Anaconda3\Scripts
    ANACONDA_HOME3
    C:\ProgramData\Anaconda3\Library\bin
    ANACONDA_HOME4
    C:\ProgramData\Anaconda3\Library\mingw-w64\bin

    # path 변수 편집
    %ANACONDA_HOME1%
    %ANACONDA_HOME2%
    %ANACONDA_HOME3%
    %ANACONDA_HOME4%

0.2.2 Windows Terminal 관리자 권한 / Permission 부여 / 사용 중인 가상환경 시각화

powershell

윈도우 터미널 관리자 권한으로 실행
PS C:\Users\Quiet> conda init
PS C:\Users\Quiet> Set-ExecutionPolicy RemoteSigned
PS C:\Users\Quiet> Get-ExecutionPolicy  # 권한 확인
윈도우 터미널 재실행
(base) PS C:\Users\Quiet>
원하는 가상환경으로 실행
(base) PS C:\Users\Quiet> conda activate {가상환경 이름}
(가상환경 이름) PS C:\Users\Quiet> 
```

⇒ **conda 명령어가 먹히는 것을 확인한 상태에서 PyCharm을 설치하는 것을 권장**

0.3 Pycharm : Professional

3.1 PyCharm Installation Options

Create Desktop Shortcut : 바탕화면 Pycharm 바로가기 생성
Update Context Menu : PC 내 임의의 폴더를 마우스 우클릭으로 PyCharm 에서 프로젝트로 선택한 폴더를 열 수 있는 옵션
Create Associations : PyCharm IDE에서 .py 확장자 파일을 열게 해주는 옵션
Update PATH Variable : 명령 프롬프트에서 PyCharm에 직접 접근하게 해주는 옵션
(New Project) Settings >> Python Interpreter >> 아래 경로의 Python.exe 선택

💡 C:\ProgramData\Anaconda3 # base interpreter

    ⇒ PyCharm 22.2.4 버전에서는 Python Interpreter의 이름이 Python 3.9 로 나타났었으나, 

        PyCharm 22.3.1 버전에서는 위의 이름처럼 경로를 나타내는 식으로 만들어진다.

        show all 해준 후 Python Interpreter rename을 해줄 수는 있으나, 굳이…

0.4 Install Django Framework

　0.4.1 Microsoft C++ Build Tools Install

　0.4.2 Microsoft C++ Build Tools - Visual Studio

    ![](https://velog.velcdn.com/images/boost_dev/post/6d1a0cbe-5df3-4daf-bbc7-97ef99e3edd3/image.png)

    ⇒ 위의 Tools를 선택하고 우측 하단의 설치 버튼 클릭(약 7GB)

　0.4.3 pip install

4.3.1 install django

    # powershell
    (base) PS C:\Users\Quiet> python -m pip install --upgrade pip
    (base) PS C:\Users\Quiet> pip install django
    (base) PS C:\Users\Quiet> pip install djangorestframework

4.3.2 Create New Django Project/App(table)

    # powershell
    (base) PS C:\Users\Quiet\DjangoProject> django-admin startproject {project_name}
    (base) PS C:\Users\Quiet\DjangoProject> django-admin startapp {app_name=table_name}
    (base) PS C:\Users\Quiet\DjangoProject> python manage.py makemigrations
    (base) PS C:\Users\Quiet\DjangoProject> python manage.py migrate
    (base) PS C:\Users\Quiet\DjangoProject> python manage.py runserver
    http://127.0.0.1:8000 Ctrl + 클릭

0.5 Docker with MySQL

　0.5.1 2022.12. 기준 디폴트로 설정되어 있는 값으로 설치

　0.5.2 재부팅 후 나타나는 링크로 들어가서 업데이트 진행

　0.5.3 create mysql container

    # powershell
    # 윈도우 터미널을 통해 Docker Container 목록 출력하기
    # (-a 옵션은 실행하지 않은 Container도 출력)
    (base) PS C:\Users\Quiet\DjangoProject> **docker ps -a**

    # 윈도우 터미널을 통해 Docker Container를 생성 및 실행하기
    (base) PS C:\Users\Quiet\DjangoProject> **docker run -d --name mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=root mysql:5.7**

    # 컨테이너 접속
    # (container ID 값에 해당하는 uuid 값을 컨테이너 name 자리에 넣어주어도 실행할 수 있다)
    (base) PS C:\Users\Quiet\DjangoProject> **docker exec -it mysql bash**

    # yum update
    bash-4.2# **yum update**

    # yum install -y vim
    bash-4.2# **yum install -y vim**

    # my.cnf 설정
    bash-4.2# **cd etc**
    bash-4.2# **vim my.cnf**

    # 키보드 i 누르면 insert 가능
    [client] 
    default-character-set = utf8mb4 

    [mysql] 
    default-character-set = utf8mb4

    [mysqld]  # 추가해주기
    lower_case_table_names=1
    collation-server = utf8_unicode_ci 
    init-connect='SET NAMES utf8' 
    character-set-server = utf8

    # 키보드 esc 누르고 ":wq!" 입력 후 Enter
    (base) PS C:\Users\Quiet\DjangoProject> exit
    (base) PS C:\Users\Quiet\DjangoProject> docker restart mysql  # container ID
    (base) PS C:\Users\Quiet\DjangoProject> docker exec -it mysql bash

    # DB서버 접속
    bash-4.2# **mysql -u root -p** (Enter 후 password 입력)
    Enter password:

    # DB서버에 접속하면 Databases와 Tables를 통제할 수 있다.(DB서버의 함수 사용 가능)
    mysql> **show databases;**

    # DB를 생성하고 싶다면 create 함수를 이용한다.
    mysql> **create database mydb;**

    # show에서 볼 수 있는 DB서버의 DB를 사용하고, Tables를 볼 수 있다.
    mysql> **use mydb;**
    mydb> **show tables;**
    mydb> **status;**

    # 서버 실행하기
    ****mydb> **exit**
    Bye
    ****bash-4.2# **exit**
    exit
    ****(base) PS C:\Users\AIA\PycharmProjects\djangoProject> **python .\manage.py runserver**

　0.5.4 PyCharm Database Tab(right side)

⇒ Test Connection 반드시 누르기

0.6 Python / MySQL 네트워크 연결

# powershell
# Python과 MySQL 네트워크 연결을 위한 라이브러리 설치
(base) PS C:\Users\Quiet> pip install mysqlclient
(base) PS C:\Users\Quiet> pip install mysql-connector-python
(base) PS C:\Users\Quiet> pip install django-cors-headers

0.7 Install jdk11

　7.1 환경변수 설정

    # powershell
    # **Windows + R**
    sysdm.cpl ,3

    **# 시스템 변수 생성**
    JAVA_HOME
    C:\Program Files\Java\jdk-11

    # **path 변수 편집**
    %JAVA_HOME%\bin
    ```

0.8 Install VSCode

0.8.1 VSCode Installation Options

0.8.2 Install Extensions

Install docker, ES7, JavaScript(ES6)

0.9Install node.js

　⇒ 추후 설치할 next.js에서 node.js 18버전 사용 시 정상적으로 동작하지 않았다.

　⇒ NEXT.JS 공식 홈페이지에서 13버전 릴리즈에 대한 설명에도 그에 대한 설명은 없었다.

일단은 굳이 다른 시도를 하지 않고 16버전을 설치하는 것을 추천



아래 설치과정은 동일하다.

⇒ check하면 **python 3.11 등 불필요한 것들이 설치**된다. (**좀 큰일남**)

0.9.1 환경변수 설정

    # powershell
    # **Windows + R**
    sysdm.cpl ,3

    **# 시스템 변수 생성**
    NODE_HOME
    C:\Program Files\nodejs

    # **path 변수 편집**
    %NODE_HOME%
    ```

0.9.2 Install yarn & redux

```powershell
# Install yarn(node.js 설치하며 따라온 npm을 활용하여 설치)
(base) PS C:\Users\Quiet> npm install --location=global
(base) PS C:\Users\Quiet> npm install yarn -g
        => 에러나면 npm install yarn --force (웬만하면 -g로)
(base) PS C:\Users\Quiet> yarn install
(base) PS C:\Users\Quiet> yarn add react-router-dom
(base) PS C:\Users\Quiet> yarn add redux
(base) PS C:\Users\Quiet> yarn add @reduxjs/toolkit
(base) PS C:\Users\Quiet> yarn add react-redux

# run yarn server
(base) PS C:\Users\Quiet> yarn start
```

- react auto save : react screen 실시간 반영

0.10 Install Tensorflow & Pytorch

0.10.1 Version Check(Tensorflow, Python, cuDNN, CUDA)

⇒ Tensorflow gpu 사용을 위해 2.10.0 버전을 사용한다.

0.11 Install NVIDIA Driver(GeForce RTX 2080)

0.11.1 최신 공식 NVIDIA 드라이버 다운로드

　　　⇒ 그래픽카드(GeForce RTX 2080) 기준 설치

    ⇒ 디폴트로 설정된 옵션으로 설치

0.12 Install CUDA(ver 11.2)

uninstall NVIDIA FrameView SDK
📖 appwiz.cpl >> NVIDIA FrameView SDK 1.3.8107.31782123

0.12.1 CUDA Toolkit 11.2 Downloads

        ⇒ 디폴트로 설정된 옵션으로 설치

0.13 Install cuDNN(8.1.0)

0.13.2 Download cuDNN v8.1.0 (January 26th, 2021), for CUDA 11.0,11.1 and 11.2

0.13.3 압축파일 다음 경로에 풀기

📖 C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.2\include

0.13.4 환경변수 설정

    # powershell
    # **Windows + R**
    sysdm.cpl ,3

    **# 시스템 변수 생성**
    CUDA_HOME1
    C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.2\bin
    CUDA_HOME2
    C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.2\include
    CUDA_HOME3
    C:\Program Files\NVIDIA GPU Computing Toolkit\CUDA\v11.2\lib

    # **path 변수 편집**
    %CUDA_HOME1%
    %CUDA_HOME2%
    %CUDA_HOME3%
    ```

0.13.5 Install Tensorflow(2.10.1)

0.13.5.1 Update conda and pip
   # powershell
       # 관리자 모드 윈도우 탐색기
       (base) PS C:\> pip install --upgrade pip
       (base) PS C:\> conda update -n base conda
       (base) PS C:\> conda update --all
0.13.5.2 Install tensorflow & tensorflow-gpu # powershell # 관리자 모드 윈도우 탐색기 (base) PS C:> pip install tensorflow==2.10.1 (base) PS C:> pip install tensorflow-gpu==2.10.1

   # 가상환경에 설치되었는지 확인하기
     (base) PS C:\> conda list

0.14 Install Pytorch(1.13.1)

　0.14.1 Check Install code

        ⇒ Conda Package로는 설치가 되지 않았다.(원인미상)

 # powershell
   (base) PS C:\Users\Quiet> pip3 install torch torchvision torchaudio --extra-index-url https://download.pytorch.org/whl/cu117

※ 참고 CUDA를 분명 11.2를 설치했는데 11.7로 설치하는 이유가 뭐지?
📖 https://kjy042386.tistory.com/324

    ⇒ 추정) pytorch 구동환경 내 cuda library 복사본을 설치

         → 설정값은 CUDA 11.2 지만, pytorch 구동환경 내 상태값은 11.7인 것

0.15Check Version

    #**Python Code**

    # python
    import os
    import numpy as np
    import tensorflow as tf
    import torch
    import sklearn
    from tensorflow.python.client import device_lib

    # TF_CPP_MIN_LOG_LEVEL Default Setting 관련 경고 임시 조치
    os.environ['TF_CPP_MIN_LOG_LEVEL'] = '3'

    if __name__ == '__main__':
        print(f'numpy version : {np.__version__}')
        print(f'tensorflow version : {tf.__version__}')
        print(f'torch version : {torch.__version__}')
        print(f'sklearn version : {sklearn.__version__}')
        print(f'이 PC에 설치된 디바이스 상세보기 : {device_lib.list_local_devices()}')
        print(f'CUDA 프로그래밍 가능여부 :  {torch.cuda.is_available()}')
        print(f'CUDA 프로그래밍 가능여부 : {torch.cuda.get_device_name()}')
        print(f'사용 가능 GPU 갯수 :  {torch.cuda.device_count()}')
    ```

0.16 Install FastAPI & uvicorn

0.16.1 pip install

    #powershell
    # Install
    (base) PS C:\fastApiServer> pip install fastapi 'uvicorn[standard]'

    # 서버 생성
    (base) PS C:\fastApiServer> uvicorn main:app --reload

0.17 Install Android Studio

⇒ 디폴트 옵션 설치 후 재실행되는 프로그램에서 라이센스 전체 Accept

0.18 Install next

# powershell
yarn add next
npm install --location=global
yarn build
yarn add react
yarn add react dom


⇒ git clone 해온 것을 그대로 사용할 때는 다음 코드만 실행해도 됨

# powershell
npm install --location=global
yarn dev  # 두 번 실행하기

+ pagination 설정

# powershell
# Windows Terminal에서 설치
(base) PS C:\Users\Quiet> **pip install fastapi-pagination**

0.19 Install Flutter ver.3

⇒ 경로에 **한글/공백** 있으면 안됨

⇒ 공백없는 영어 사용자 폴더에 설치하고, 환경변수를 등록해주어야 함

0.20 애자일 방식을 위한 Tool 연동

0.20.1 slsck-jira 연동

프로젝트 설정
Connect to Slack 클릭

0.20.2 jira-Confluence 연동

0.20.3 jira-GitHub 연동

GitHub for Jira 검색
바로우산에서 사용한 앱
추가한다
추가한 뒤에는 컨플루언스의 업무에서 브랜치 만들기, 커밋 만들기를 누르면
아래 이미지가 나오고 Create branch를 누르면 깃허브에 브랜치가 생성된다

1. AWS☁

1.1 설정

fastapi requirements.txt에 추가
main.py에 handler = Mangum(app) 추가

1.1.1 DB

데이터 베이스 수정에서 db 파라미터를 사용중인 db로 변경
db가 제대로 들어갔는지는 하이디로 확인
하이디의 ip는 db의 연결 보안에 있는 엔드포인트
fastapi의 db도 host는 AWS의 엔드포인트

이제 docker/mysql 내부의 코드들은 발생x, docker/api만 발생

1.2 진행 순서

RDS -> IAM -> S3

RDS는 db에 들어가는 애
s3는 화면을 보여주는 애

1.3 RDS

1.3.1 RDS 작성

도커파일 및 yml파일 변경 후 dockerfile의 경로인 docker/api로 들어가서 'docker build -t 이미지명 .' 입력
원래 경로로 돌아가서 docker compose up
자동으로 테이블이 들어와야 성공 🐋 docker compose up 방법이 기억안나면

1.3.2 RDS 인스턴스 생성

생성하면서 확인

표준 생성
사용 엔진(이번에는 MySQL)
템플릿 : 프리티어
인스턴스 크기 : t3(t2도 상관없으나 t3도 프리데이터)
스토리지 : 범용, 20, 자동 조정 비활성화 ※ 스냅샷 체크를 해제해도 사용으로 된 경우도 있으므로 확인 필요

1.3.3 보안그룹 생성

주의사항

잘못하면 DB 해킹의 위험이 있는 부분이므로 주의

SecurityGroup 설정에서 보안 그룹을 생성하고 인바운드 규칙을 추가

외부 접속 방지를 위해 로컬에서 개발하는 동안은 개인 IP 주소를 설정하지만 EC2로 접속하는 과정이 있으면 추가

위치 무관을 체크해야 ubuntu에서 apt-get-update가 적용된다

우측 상단 수정 → 생성한 식별자 선택

퍼블릭 액세스: 예(마이너 버전으로 변경시 요금 발생)

포트폴리오 사용할 일 없으면 : 아니오

백업 보존기간 : 0일

스냅샷 : 해제

이거 보고도 모르겠으면 여기 참고

1.3.4 파라미터 그룹 생성

좌측사이드바에서 파라미터 그룹(이하 Parameters)에서 파라미터 편집으로 넘어간다. 검색창에 char, coll 을 각각 입력 후 셀렉트박스에서 utf-8과 utf-8_general_ci 를 선택

DB 수정 → DB옵션에서 파라미터 그룹을 방금 설정한 그룹으로 변경

1.4 IAM

1.4.1 IAM 생성하기

S3 만들기 전에 반드시 iam 을 생성해야 한다. 이 파트를 생략해도 S3 가 만들어지지만, CORS 에서 많은 오류를 경험하기 싫으면 일단 생성하자

, s3

1.5 S3

1.5.1 env.py 양식

USERNAME = "AWS 유저명"
PASSWORD = ""
HOSTNAME = "aws 사용시의 엔드포인트"
DATABASE = "AWS의 DB명"
PORT = 3306
CHARSET = "utf8"
DB_URL = f"mysql+pymysql://{USERNAME}:{PASSWORD}@{HOSTNAME}:{PORT}/{DATABASE}"

1.5.2 dockerfile 양식

FROM python:3.9

1.6 한글 깨짐

파라미터 그룹 -> 파라미터 편집에서
char : 전부 utf8mb4로 변경(0,1로 나오는 항목은 제외)
coll : collation_connection, collation_server의 값을 utf8mb4_general_ci로 변경

1.7 보안🔒

개인적인 피해를 막기 위한 최소한의 보안

인바운드는 어렵게 아웃바운드는 쉽게 1) 사용자 그룹 생성
권한 정책 연결 : AmazonS3FullAccess 선택 2) MFA 설정
준비 : Google OTP 어플리케이션
root 계정에서 보안자격 증명 → MFA 활성화 → 가상 MFA 디바이스 체크 후 계속
먼저 본인 핸드폰에 설치한 Google OTP로 해당 QR코드 인식 후 MFA 코드 1 입력
- MFA 코드 2는 MFA 코드 1 시간 경과 후 나오는 다음 코드

1.7.1 Root가 IAM에게 비밀번호 변경 권한 주기

IAM에서 '계정 설정' 클릭
'암호 정책-> 편집'에서 체크
- 사용자 지정 : 암호감독 체크박스 전체,
- 기타 요구사항 :사용자 자신의 암호 변경 허용

1.7.2 IAM 로그인시 비밀번호 지정

IAM -> 사용자 -> 사용자명 클릭

보안 자격 증명 -> 콘솔 액세스 관리 -> 활성화 후 비밀번호 지정
권한을 받은 IAM사용자명, 방금 지정한 비밀번호로 로그인 가능

1.7.3 권한 부여

Root 사용자의 IAM으로 들어가서 권한을 준다

1.7.4 IAM 사용자 결제 대시보드 접근 권한 설정

builling은 AdministratorAccess에 포함되어 있다
기본적으로 결제 정보 메뉴에 대한 권한이 없는 IAM 사용자가 해당 권한을 얻기 위한 조건은
- (1) 이 계정이 IAM 및 페더레이션 사용자가 결제 정보에 액세스하도록 허용
- (2) 필요한 IAM 권한을 보유하도록 함으로써 사용자 또는 그룹에 대해 권한

(1)은 Root 계정으로만 설정 가능
- 계정 → 결제 정보에 대한 IAM 사용자 및 역할 액세스 :편집
- IMA 액세스 활성화 체크 → 업데이트

1.8 AWS에서 lambda 사용

yaml(context file)을 사용하는 Serverless Framework보다 IaC방식(TypeScript 사용)인 Pulumi를 더 많이 사용

serverless와 pulumi 방식중 선택해서 사용

1.9 프리티어 사용시 주의

인스턴스 구성시 t2로 설정
RDS에서 스토리지의 할당된 스토리지는 20으로(스토리지 자동 조정 활성화는 체크를 해제)

EC2를 사용해서

주의

인공지능 모델은 lambda
상시로 열려있는 페이지는 EC2가 더 유리하다
이제는 매번 도커에 설치할 필요 x
- 참고

2. AWS 사용

리전은 ACM에서만 버지니아 북부를 사용

2.1 AWS 계정 생성 및 설정

순서는 cli를 먼저 실행하고 S3를 실행(버킷없음 오류가 나오면 버킷 생성) OAC 방식으로 CF 배포

2.1.1 계정 생성 및 로그인

플랜 선택 시 기본 지원을 선택해야 되는 점만 주의

2.1.2 CLI(커맨드 라인 인터페이스)

리액트 사용시에는 서버리스 프레임워크를 사용하지만 리액트 같은 프론트 요소가 없는 경우는 CLI를 사용한다

CLI? AWS 클라우드 리소스를 생성, 편집, 검사하는 방식 중 하나

1) 언제 사용?

리액트 같은 프론트엔드 부문의 작업을 위한 경우는 서버리스 프레임워크를 사용하지만, 프론트엔드부분을 신경쓰지 않는 작업에서는 CLI를 사용

2) 장점

코드(CLI 명령 포함)가 사용자의 변경을 기록

버전 제어(깃 등)하에 코드를 배치하고 변경사항을 효과적으로 관리 => 커밋하면 아마존 내부의 코드도 변경

수동적인 단계의 수행을 줄여서 작업을 빠르게 다시 실행할 수 있다

인적 오류 발생 가능성이 낮다

2.1.3 CLI 설치

2.1.4 로컬 AWS 환경 설정

  # 액세스 키 만들기
  - 경로 : AWS 사용자 설정 - 보안자격 증명 - 액세스 키 만들기 - 액세스 키, 비밀 액세스 키, .csv 파일 다운로드(!!!이 내용은 절대 커밋 금지) 
  - 유닉스계열(맥 등)은 셸 설정에서 환경변수를 추가 
  - KMS는 유료 서비스다

  # 설정 확인(아래 코드 차례대로 실행)
  - aws --version
  - aws s3 li s3://
  - aws configure

2.2 S3 버킷 생성

OAC방식

OAC 설정시 '웹 사이트 엔드포인트 사용'을 누르면 OAC 설정이 사라지니까 먼저 누르지 말것
S3 버킷 액세스
원본 액세스 제어 설정(권장) - 제어설정 생성 : s3로
속성 - 생성한 버킷에서 정적 웹 사이트 호스팅 편집 - 활성화 후 변경사항 저장(CF연결할거니까 테스트목적 아니면 하지 말것)
- OAC 방식이 아니더라도 ACM(인증서)가 아니면 자신이 사용하는 리전으로 등록해야한다

2.2.1 정책 설정

경로 : 정책 - 버킷 정책 - 새 문 추가 - 아래 코드 입력

    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Sid": "Statement1",
                "Effect": "Allow",
                "Principal": "*",
                "Action": "s3:GetObject",    #CRUD기능을 전부 사용할거면 GetObject 대신 * 입력
                "Resource": "arn:aws:s3:::버킷명/*"
            }
        ]
    }

CORS 코드 추가

  [
      {
          "AllowedHeaders": [
              "*"
          ],
          "AllowedMethods": [
              "HEAD",
              "GET",
              "PUT",
              "POST",
              "DELETE"
          ],
          "AllowedOrigins": [
              "*"
          ],
          "ExposeHeaders": []
      }
  ]

CF 사용시 버킷정책

  {
      "Version": "2012-10-17",
      "Statement": [
          {
              "Sid": "Statement1",
              "Effect": "Allow",
              "Principal": {"Service":"cloudfront.amazonaws.com"},  - cloudfront.amazonaws.com를 통해서만 권한 부여
              "Action": "s3:*",                                     - 모든 crud를 사용
              "Resource": "arn:aws:s3:::seongbae.shop/*",
              "Condition": {                                  -condition == if
                  "StringEquals" : {                            - "AWS:SoursArn"의 문자열이 ""과 같다면 
                      "AWS:SoursArn":"클라우드 프론트의 ARN"
                  }
              }
          }
      ]
  }

2.3 CloudFront

도메인 | CF | S3

CF관련 비용 절감 방법

CF를 억지로 만들 필요 없이 도메인과 S3를 만들면 알아서 생성된다
- 그러니까 CF를 먼저 만들지 마라
cf의 오리진 = 버킷

2.3.0 특징

고비용에 더 느리지만 보안에 더 유리
S3에서 CF로의 데이터 전송은 요금이 없으나 인터넷으로 전달하는건 비용이 요구된다
같은 리전에서의 전송만 무료니까 설정시 자신이 속한 리전을 설정

2.3.1 사용

그냥 버킷 생성한것과 달리 퍼블릭 액세스를 차단한 버킷 사용

2.3.2 DNS 연결(아마존은 Route53)

route53 - 시작하기 - 호스팅 영역 생성
- NS(Name Server), SOA가 생겼는지 확인 (NS, SOA에 대한 설명 참고)
값/트래픽 라우팅 대상에 있는 값을 NDS에 등록 (이번에는 가비아에서 도메인을 받음. 상세설명은 여기)
- 등록 장소 : 가비아 - My가비아 - 도메인 - 관리 - 네임서버 설정
  - 가비아는 NS의 마지막 '.'을 지워야 한다

2.3.3 CNAME 등록

AWS에서

AWS Certificate Manager에서 인증상태 확인

인증이 안된 상태면 route53에 레코드 자동 생성을 눌렀는지 생각해보자
도메인 - CNAME 확인
'Route53에서 레코드 생성' 클릭
- 한 번 지운 경우는
- Route53 - 호스팅 영역에서 CNAME이 생기면 된다
  - A 레코드를 추가하면서 'ping 주소'나온 IP입력

가비아에서

My가비아 - DNS 관리툴 - DNS설정
- 호스트 : ~~.com은 @ / www.~~.com은 www(이때 www를 쓴다면 값도 www가, admin을 쓰는 주소라면 admin.이 포함돼야 한다)
- 값/위치 : AWS에서 카피한 CNAME 이름 입력
- TTL:3600

✅가비아에서 제대로 등록됐는지 확인하는 방법

cmd에서 'ping 주소' 입력

후이즈 도메인 검색

결과가 안나올 경우 ping 네임서버 1차 주소를 넣고 나온 값을 사용해서 A레코드를 만든다

후이즈 통과 후 CF로 이동

2.2.4 CF 배포

cloundfront 생성에서 원본 도메인 선택하고 여기를 참고
- 가격 분류는 본인이 사용할 리전이 속해있는 곳에 해야 과한 비용을 막을 수 있다
- CNAME 추가('www.주소.com'과 '주소.com'을 둘 다 해야한다) -> A 레코드로 연결했으면 CNAME의 값을 도메인 이름으로 해도 괜찮다
- ACL를 사용하기 위해서는 먼저 아마존에서 사용하는 DNS인 Route53을 먼저 설정해야 한다(2.2 CNAME 등록 참고)
- SSL은 optional로 되어있지만 보안 요소라 사실상 필수
- IPv6: off(필수는 아니고 수업에서는 일단 off로 지정함 디폴트는 on)
버킷과 연결
- Amazon S3 - 버킷 - 권한 - 버킷 정책 편집에서 CF의 ARN추가

    "Condition": {
        "StringEquals": {
            "AWS:SoursArn": "배포하는 CF의 ARN"
        }
    }

2.2.5 CF 주의사항

정적콘텐츠를 s3에 올리지 마라
OAI는 이제 죽으니까 OAC로 가야된다
AWS : EC2 / S3 / CloudFront 트래픽 요금 분석
https://docs.aws.amazon.com/ko_kr/AmazonCloudFront/latest/DeveloperGuide/private-content-restricting-access-to-s3.html
왜 쓰나?

자동확장 : 스케일링

2.3 EC2

2.3.1 보안그룹 확인

보안그룹 생성은 설정 필기에서 확인

2.3.2 인스턴스 생성

경로 : EC2 - 인스턴스 - 인스턴스 생성

우분투 선택

인스턴스 시작 후 PuTTY 사용

.pem을 .ppk로 하는건 Puttygen사용

퍼블릭 ip를 입력하고 세이브 (먼저 있던 경우는 )

Connection - SSH - Credentioal에서 .ppk 연다

☕install java

sudo apt-get update sudo apt-get install -y --no-install-recommends tzdata g++ git curl sudo apt-get update sudo apt-get install openjdk-11-jdk java -version javac -version vim ~/.bashrc

i 입력으로 insert로 두고 가장 아랫줄에
- ``export JAVA_HOME=$(dirname $(dirname $(readlink -f $(which java))))
```
        export PATH=$PATH:$JAVA_HOME/bin``` 추가
```
Esc 누르고 :wq! source ~/.bashrc 설정 적용 echo $JAVA_HOME

🐍intall python

sudo apt update sudo apt-get install -y python3-pip python3-dev sudo apt install software-properties-common sudo add-apt-repository ppa:deadsnakes/ppa

2.3.3 pip3 pip로 변경

cd /usr/local/bin
sudo ln -s /usr/bin/pip3 pip
pip3 install --upgrade pip

2.3.4 sudo apt-get clean

2.3.5 install nginx

# 설치
sudo apt-get update
sudo apt-get install nginx
sudo systemctl start nginx

/etc/nginx/sites-available 내 file에 쓰기 권한이 없으므로 chmod를 쓰기 권한을 추가해준다. sudo chmod 775 /etc/nginx/sites-available
nginx config 추가: cd /etc/nginx/sites-available && vim <서버이름>

퍼미션 에러 나오면 앞에 sudo를 붙혀준다.

server{
       server_name ;
       location / {
           include proxy_params;
           proxy_pass http://사용할 IP:8000;
       }
}

symlink: sites-available/ → sites-enabled

sudo ln -s /etc/nginx/sites-available/ /etc/nginx/sites-enabled/

2.3.6 run app

git clone cd /var/www git clone cd

nginx 확인
sudo nginx -t
restart nginx sudo systemctl restart nginx.service
- 안되면 sudo systemctl restart nginx
  
  failed가 나올 경우 putty에서 /etc/nginx/sites-available과 /etc/nginx/sites-enabled/에 둘 다 같은 vim 파일이 있는지 확인한다.
gunicorn으로 ASGI 서버 실행 : python3 -m gunicorn -k uvicorn.workers.UvicornWorker main:app

🔗연결 확인

route 53에 레코드를 CNAME으로 들어간 놈을 A로 바꾸고 그 레코드에 고정 IP(탄력적 ip)로 입력했는지 확인
- putty의 vim 파일이 아래 같은 모양인지 확인 ```server{ server_name 사용할 도메인 이름; location /{
```
include proxy_params;
proxy_pass http://사용할 IP:8000;
```
  } }
  
  ! 사용할 IP자리에 사용하기 위해 받은 탄력적 IP를 넣었을 때 실패
- 사용할 IP에 127.0.0.1(로컬호스트)을 주로 사용하는 이유는 EC2 자체가 하나의 PC이기 때문에 로컬로 돌리는 것이기 때문에다

2.4 EC2와 서브 도메인 연결

루트 도메인을 이미 사용했으므로 새 인증서를 요청 참고

인증이 완료돼서 CNAME을 얻으면 가비아로 가서 등록

2.4.1 탄력적 IP를 사용

할당
확인
EC2 연결

💻 putty 사용

EC2의 인스턴스에서 사용할 인스턴스 재시작 Putty에서 .ppk 실행

푸티의 ip는 'EC2- 인스턴스'에서 우클릭 후 연결을 선택해서 여기에 있는 퍼블릭 IP 입력

2.? error😕

도메인 주소로 접속시 주소 앞에 '주의 요함'이 나오는 경우

원인

배포한 CF에 인증서인 SSL이 없는 경우

해결

s3은 되는데 CF가 안되면?

원인

route53 문제

해결

호스팅 영역 삭제 후 다시 만들어라 (영역 삭제가 안되면 A, CNAME 레코드를 삭제 후 영역 삭제를 진행하면 된다)

A 레코드의 값을 ip가 아니라 CF의 배포 도메인 이름으로 바꿔준다(별칭 활성 - CF 엔드포인트 선택 배포 도메인 이름 입력)
!!! 동적 ip를 사용하는 경우는 퍼블릭 엑세스 차단 활성화 + CORS 코드 삭제

자동으로 안들어오는 경우 대체 CF에서 도메인 이름을 설정하면 해결된다

3. AWS LightSail

EC2를 사용하려고 설정했으나 비용 문제가 있어서 성능이 조금 떨어지지만 요금 문제에 비교적 자유로운 LightSail로 변경

앞에서 설정한 route53, cloudFront, 인증서는 삭제
Lightsail에서는 GPU를 돌리는게 불가능해서 어느정도의 성능 저하는 감안해야한다.
Lightsail 정액제지만 정한 용량을 초과한 순간 과금

3.0 순서

EC2로 들어갈 파일에서 도커로 먼저 docker compose up실행해서 이미지 생성 1) 인스턴스 생성 2) IP 변경 3) putty

3.1 인스턴스 생성(Lightsail 구매)

무시하거나 누르거나~

자신이 사용할 환경에 맞춰서 구매
쿠버네티스를 적용하는 경우 2GB이상의 용량이 필요하므로 4GB 선택 인스턴스 생성 완료

3.2 고정 IP로 변경

여기 우분투 밑에 있는 아이피는 고정 아이피가 아니므로 고정IP로 바꾸는 설정을 할거다

탄력적 IP 주소에서 연결된 인스턴스가 이미 있는 경우 해당인스턴스의 페이지로 들어간 뒤에 아래 그림처럼 삭제(탄력적 인스턴스도 삭제)

고정 아이피 생성

고정 아이피를 생성하면 아래처럼 나온다

라이트세일 인스턴스에 고정 IP가 제대로 들어왔는지 확인

DNS zone 생성

여기서 Domain name은 사용할 도메인을 입력 만들어진 DNS zone에서 네임서버 확인 가비아에서 네임서버 변경(기억이 안나면 이전 내용 참고)

레코드를 생성하면 자동으로 aignments가 생성된다(안되면 직접 만들어야 되니까 확인)

3.3 포트 설정

이걸 안해주면 docker compose up 실행시 아래 ?.2같은 에러가 발생한다

3.4 서버 설정

😳 사이트를 못찾는다면 http와 https 서로 바꿔보자

nohup 사용시 뭔가가 안된다면 라이트세일의 인스턴스로 들어가서 reboot를 한 번 해주자

3.5 🐋Docker 설정

안되면 앞에 sudo

3.5.1 Docker 설치

3.5.2 Docker에 sudo 권한 부여

usermod -aG docker $USER newgrp docker

3.5.3 설치 확인

systemctl status docker

3.5.4 Docker-compose

curl -L "https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

3.5.5 Docker-compose에 실행권한 부여

chmod +x /usr/local/bin/docker-compose

3.5.6 설치확인

systemctl status docker

curl -L "https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

chmod +x /usr/local/bin/docker-compose docker-compose version

3.6 🐍Python 설치

sudo apt install python3 sudo apt install python3-venv python3 -m venv 가상 공간 이름

가상환경 설정여부 확인 cd 가상환경명 ll 아래 사진처럼 나온다면 ok

가상환경 활성화 source 가상 환경 경로/bin/activate

3.7 Pycharm 연동

먼저 .pem 키를 가져오고
해당 경로에 폴더만 생성되고 파일이 안들어오는 경우는
remote path 경로를 var/www를 기본으로 사용하고 권한이 없어서 못만드는 경우는 putty에 직접 들어가서 mkdir 폴더명 실행하고 remote path를 지정해준다
*/var/www는 먼저 enginx

권한 오류가 나오는 경우는 ?.4 참고

방금 만든 SSH로 터미널 열고 cd 복사한 경로

3.7.1 DB 연결

3.8 LightSail-FastAPI 연동

3.8.1 pem 파일 받기

3.8.2 .ppk로 변경

3.8.3 putty 열기

3.8.4 명령어 입력

$ sudo -i passwd ubuntu New password: 패스워드 입력 Retype new password: passwd: password updated successfully apt-get update apt-get install -y --no-install-recommends tzdata g++ git curl apt-get install openjdk-11-jdk

자바버전 확인 java -version javac -version vim ~/.bashrc i 입력으로 Insert

export JAVA_HOME=$(dirname $(dirname $(readlink -f $(which java))))
export PATH=$PATH:$JAVA_HOME/bin

esc누르고 :wq!입력해서 나가기 source ~/.bashrc echo $JAVA_HOME apt update apt install software-properties-common add-apt-repository ppa:deadsnakes/ppa cd /usr/local/bin apt-get install -y python3-pip ln -s /usr/bin/pip3 pip pip3 install --upgrade pip apt-get clean apt-get install nginx systemctl start nginx chmod 775 /etc/nginx/sites-available cd /etc/nginx/sites-available vim api

i 입력

server{
     server_name 도메인;
     location / {
          include proxy_params;
          proxy_pass http://127.0.0.1:8000;
     }
}

esc :wq! enter

ln -s /etc/nginx/sites-available/api /etc/nginx/sites-enabled/

실행은 여기부터

nginx -t systemctl restart nginx 실행할 경로로 이동 cd /var/www/

경로를 모르겠으면 find / -name 폴더명 -type d

git clone https://github.com/gangsanlee2/hello_amazon.git cd hello_amazon pip install fastapi uvicorn nohup python3 main.py & python3 -m uvicorn main:app --reload

안되면nohup python3 main.py python3 -m uvicorn main:app --reload

&은 백그라운드에서 돌리라는 뜻 // type domain.com on browser

3.?

3.?.1 permission denied while trying to connect to the Docker daemon socket at unix:

원인

도커 권한오류

해결 sudo chmod 666 /var/run/docker.sock입력

3.?.2 pymysql.err.OperationalError: (2003, "Can't connect to MySQL server on 'IP번호' (timed out)")

원인

주소 및 포트 오류(오타)
방화벽 (서버 , 클라이언트)
공유기 사용중이라면 포트포워딩 유무
sshd 미설치

해결

lightsail - Networking에서 확인하고 포트번호 등록
아래에 있는 포트들이 다 있는지 확인

3.?.3 socket time out

?.2와 같은 방식으로 해결했다

3.?.4 Permission denied

해결 해당 경로로 이동해서 sudo chmod 777 . sudo chmod 777 해당 경로

3.?.5 putty에서 import관련 에러

docker compose up은 했나 생각해보자

requirements.txt가 있는 디렉토리에서 백날 pip 해봐야 aws에는 안올라가지 먼저 docker-compose파일이 있는 경로에서 compose up 실행하고 그 다음에 다시 python3 -m uvicorn main:app --reload

git) README.MD로 프로필 꾸미기

Tue, 21 Mar 2023 14:06:27 GMT

1. 프로필용 Repositories 생성

깃허브 홈 화면에서 New 클릭
Repositories명을 본인 깃허브 ID와 똑같이 만들면 아래처럼 나온다
위의 이미지처럼 나왔는지 확인하고 만들어진 README.MD를 작성하면 프로필로 적용된다.

2. Stack 버튼

2.1 입력 내용

뱃지명 : 텍스트로 들어갈 자리
배경색 / 로고색상 : Hexcode입력시에는 앞의 #을 제거
로고 : Simple Icons를 참고해서 가져오면 된다

2.2 뱃지 모양

3. stat 표시

아래 코드를 추가

![Anurag's GitHub stats](https://github-readme-stats.vercel.app/api?username=깃허브아이디&show_icons=true&theme=테마)

아이콘과 테마는 여기를 참고

4. header

kyechan99의 capsule-render를 사용했다.

방법은 간단하게 양식에 따라 아래 코드를 한 줄 추가해주면 된다.

MarkDown : ![header](https://capsule-render.vercel.app/api?type=wave&color=auto&height=300§ion=header&text=capsule%20render&fontSize=90)
HTML :

next.js

Tue, 21 Mar 2023 11:28:28 GMT

saga(서사구조, 화면쪽에서의 인공지능)

말로 전한다 → 말하기 패턴
대기 상태에 있다가 인식해야 될 입력이 발생하면 작동(인식되지 않는건 노이즈)

MSA끼리 이벤트(상태의 변화)를 주고받으며 작업이 이뤄지는 패턴

트랜잭션의 관리주체가 DBMS(SQL)이 아닌 Application(fastapi)에 있다

패키징된 입력을 보내서 자료를 찾는 기존의 개념을 지나서 해당 기억을 가지고 입력되는대로 인식한다고 생각하면 좋다
트랜젝션 문제 때문에 어렵다
- 트랜젝션 : DB의 상태를 변화시키기 위한 단위
partition / slice
- 전체와 부분이 다르지 않으면 슬라이스

리듀서	매핑	필터
축소	전체	하나만

해당코드는 user에서 reducers에 입력된 상태가 생기면 

const userSlice = createSlice({
    name: 'userSlice',
    initialState,
    reducers: {
        joinRequest(state:IUserState, _payload){    #const joinRequest=()=>{}를 생략한 형태
            state.status = 'loading'
        },
        joinSuccess(state:IUserState, {payload}){
            state.status = 'idle'
            state.data = [...state.data, payload] # 오버로딩 상태로 '...state.data'가 없으면 이전 데이터를 날리게 된다
        }
    }
})

///Modules/users/userAPI.ts에 Modules/users/index.ts의 인터페이스 타입을 추가

_payload와 payload의 차이는 _가 있으면 보안이 필요하고 이미 아는 정보 _가 없는건 보안이 필요없는 요소에 사용하고 오픈된 상태에서 사용해야 한다 참고

db 관련

컴포넌트에서 아래 같은 코드가 없으면 해당 스키마는 db에 적용되지 않는다

{...register("스키마", { 
  required: true, 
  maxLength: {
      value: 20,
      message: "20자 이하로 입력해주세요"
  }

create next js typescript app

https://nextjs.org/docs/api-reference/create-next-app

터미널에서 npx create-next-app@latest 입력으로 앱 생성
vs코드로 실행 후 터미널에서 아래 명령어 순서대로 입력
- npm install --location=global
- npm install yarn
- yarn add next

Error

The default export is not a React Component in page:"/'

원인

export default가 없을 때 발생하는 에러

4. WrappedApp created new store with withRedux(MyApp) { initialState: undefined, initialStateFromGSPorGSSR: undefined }

상황

링크 설정하면 서 경로를 잘못 쓴 경우 발생

yarn build나 yarn dev 실행시 실행이 안되는 경우

원인

github로 협업시 next가 없을 때 발생하는 문제

해결

npm install node나 yarn add node를 실행

307

next에서 module의 인터페이스 타입과 fastapi의 schema는 같은 이름으로 통일하는게 편하다

The above error occurred in task watchJoin
created by rootSaga
Tasks cancelled due to error:
rootSaga

해결

saga에 있던
alert(" %%% export function* watchJoin()")
를 지웠다

Cannot access before initialization

원인

export default를 object보다 위에 둔 경우

sqlalchemy.exc.IntegrityError: (1062,

원인

DB에서 primary_key가 중복된 경우 발생하는 에러

Error: Text content does not match server-rendered HTML

원인

렌더링된 HTML(SSR, ISR 등)이 업데이트되지만 페이지 로드 후 React 코드는 업데이트되지 않아서 발생

해결

Error: Hydration failed because the initial UI does not match what was rendered on the server.

Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

etc

modules는 테이블명과 일치시켜야 한다

###

hive

Tue, 21 Mar 2023 11:27:04 GMT

스트림을 사용하니까 기존의 RDBMS방식을 버려야 한다

0. hive?

No(=Not Only)sql database이면서 In Memory database

JSON을 받아와서 시리얼라이즈 후 DB에 저장되는 이전의 과정을 생략하고 바로 JSON으로 저장하는 방식

현재 flutter에서의 DB는 hive가 가장 선호된다
장점
- 중간 과정이 없어서 빠르다
- Key & Value 구조이기 때문에 인덱스가 없다
- Lambda처럼 사용한만큼 사용료를 지불해서 비용절감 가능
  - RDS에 저장하지 않아서 좋다
단점
- JOIN 불가
  term
  - annotation == Python의 decorator
  - Adapter == crossEntity

1. 설치

package → pubspec.yaml 에 추가

    dependencies:
      hive: ^[version]
      hive_flutter: ^[version]

    dev_dependencies:
      hive_generator: ^[version]
      build_runner: ^[version]

2. 데이터 저장

2.1 Initalize

hive를 사용하기 위해서는 main.dart에서 초기화가 필수

    import 'package:hive_flutter/hive_flutter.dart';
>
    await Hive.initFlutter();
    ※ 모바일 앱이 아닌 경우 Hive.initFlutter() 가 아닌 Hive.init()를 사용

2.2 OpenBox

hive에서 박스란 NoSQL의 Collection

공식 홈페이지에서의 정의
What are boxes?
All data stored in Hive is organized in boxes. A box can be compared to a table in SQL, but it does not have a structure and can contain anything.

box는 table과 비슷하지만 구조화되지 않았다는 차이가 있다

결론 : box는 데이터를 저장하는 공간이다

2.2.1 box 생성

    await Hive.openBox('myBox');
    final box = Hive.box('myBox');

OpenBox 이후에는 box 메소드를 통해 해당 박스를 가져올 수 있다

3. 사용법

읽기 : get 쓰기 : put

3.1 read

    final box = Hive.box('myBox');

    String name = box.get('name');

    DateTime birthday = box.get('birthday');

존재하지 않는 데이터를 읽을 때는 null을 리턴하지만 defaultValue를 사용해서 default값을 정할 수 있다.
```
  double height = box.get('randomKey', defaultValue: 17.5);
```

3.2 write

    final box = Hive.box('myBox');

    box.put('name', 'Paul');

    box.put('friends', ['A', 'B', 'C']);

    box.put(123, 'test');

    box.putAll({'key1': 'value1', 42: 'life'});

4. Custom Object 작성

기본적으로 List, Map, DateTime, Unit8List 등 주요 타입들을 지원하지만 그 외에 새로운 타입을 원하면 TypeAdapter 를 작성하여 Hive에 등록 해주어야 한다.

    import 'package:hive/hive.dart';

    part 'person.g.dart';

    @HiveType(typeId: 0)
    class Person {
      @HiveField(0)
      String name;

      @HiveField(1)
      int age;

      @HiveField(2)
      List friends;

      Person(this.name, this.age, this.friends);
    }

TypeAdapter 를 만들기 위한 class 를 제작 후, 클래스 위에 @HiveType(typeId:) 를 추가
- TypeField는 0 ~ 233
클래스 안의 항목들은 @HiveField([index], [default value]) 를 추가

Default value 기능은 hive: 2.0.4 , hive_generator: 1.1.0 이후 버전부터 사용 가능
part 경로 추가 이후 터미널에서 아래 build_runner 를 실행
```
  flutter packages pub run build_runner build
```
.g.dart 라는 새로운 TypeAdapter 생성을 확인
생성된 TypeAdapter 를 적용하기 위해서는 registerAdapter 를 이용

    Hive.registerAdapter(personAdapter());
    final person = await Hive.openBox('person');

    person.put('david', Person('david', 20, ['Tom', 'Ben']);
    person.put('sandy', Person('sandy', 30, ['david', 'suzan', 'eric']);

5. hive 데이터 타입

5.1 Primitive data types

5.1.1 Numeric data type

tinyint : 1-byte
smallint : 2-byte
int : 4-byte
bigint : 8-byte
float : 4-byte single-precision
double : 8-byte double-precision
decimal : 17-byte (38 digits)

       create table test (id bigint, price decimal(10,2));

5.1.2 String data type

string : sequence of characters
varchar : variable-length character (1 ~ 65355 )
char : fixed-length character ( 1 ~ 255 )

5.1.3 Date/Time data type

Timestamp : YYYY-MM-DD HH:MM:SS.fffffffff
Date : YYYY-MM-DD(Date 타입은 Date, Timestamp, String으로 변환가능)
```
     create table test (id int, created_dt date, update_dt timestamp);
```

5.1.4 etc

Boolean : true or false
Binary : sequence of bytes

5.2 Complex data tyeps

5.2.1 Struct : similar c struct type.

       struct < column : data_type(primitive type), .........>

       struct_coumn.column로 참조        

       create table test1 (id int, name struct);

5.2.2 Map : key-value pairs

map_column->name

5.2.3 Array : ordered sequece of similar elements like string..

t[ 'a', 'b','c' ], t[0], t[1]

5.2.4 UNIONTYPE : store different data types.




       create table test2(c1 uniontype, struct>);

5.3 operators

5.3.1 비교 연산

A = B
A != B
A <=> B : A and B NUL 이면 true
A <> B
A< B : A or B가 NULL이면 NULL, A < B이면 TRUE
A <= B
A >= B
A between B and C : A or B or C 가 NULL 이면 NULL
A not between B and C
A is null
A is not null
A like B : A or B가 NULL이면 NULL
A not like B
A RLIKE B : A or B가 NULL이면 NULL, A의 substring이 B에 매칭되면 true
A regexp B

5.3.2 산술 연산

A or B중 NULL이면 결과 NULL이고 모든 연산의 결과는 숫자
A + B , A-B, A*B...

hive> select 10+10 from test;

5.3.3 논리 연산

연산자는 AND, OR이며 모든 결과는 TRUE, FALSE이며, operand중 NULL이면 결과도 NULL

    A and B, A && B, A OR B, ! A , A IN (v1, v2..), A in (subquery)

    A not in (v1, v2..), A not in (subquery), exists (subquery), 

    not exists (subquery)

5.3.4 복잡 연산

      A[i], B[key], C.a

      select A[2] from test;

      select C.a from test;

참고

python) 위치 인수와 리스트 언패킹

Tue, 21 Mar 2023 11:02:12 GMT

1. 위치 인수

함수에 인수(매개변수)를 순서대로 넣는 방식. 즉, 인수의 위치가 정해져 있다

1.1 위치인수를 사용하는 함수

def 함수명(인수1, 인수2, 인수3)
    print(인수1)
    print(인수2)
    print(인수3)

위의 코드가 있을 때 함수명(10, 20, 30)을 실행하면 아래처럼 한 줄씩 출력된다

10
20
30

2. 언패킹

인수를 순서대로 넣을 때는 리스트나 튜플을 사용할 수 있다.

2.1 언패킹 방법

함수(*리스트)
함수(*튜플)

a = [인수1, 인수2, 인수3]
함수명(*a)

# 출력 결과
인수1
인수2
인수3

고정인수와 가변인수를 함께 쓰고 싶을 때는 def 함수(고정 인수, *가변 인수):

2.2 어디에 쓸 수 있나?

매개변수는 보통 arguments의 약자인 args를 사용하며 튜플 구조라 반복이 가능하다
가변인수 활용시에 사용하면 좋다

가변인수? : 인수의 개수가 정해지지 않은 인수

참고

위키독스, 파이썬 코딩도장

..

MySQL) 기초

1. SELECT

1.1 행/열 조회

1.2 주석

1.3 원하는 순서로 조회

1.4 원하는 만큼 데이터 조회

1.5 컬럼명 변경

2. 연산자

백준) 10171: 고양이

vue) 페이지에 유튜브 영상 띄우기

VueYoutube 등을 모르겠으면 아래 방법으로도 올릴 수 있다

에러

VueYoutube 사용시

app.js:934 Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_2__.default is not a constructor

참고

라이브러리 / 프레임워크

추가

라이브러리, 패키지, 모듈, 함수 비교

Git) commit rule

Commit message 7가지 규칙

Commit message 구조

Type

Subject

Body

Footer

참고

Docker) 도커 허브에 이미지 올리기

먼저 도커 허브에 로그인

레파지토리 생성

터미널에서 작업

포트폴리오) 바로우산

💼개요

📝 프로젝트 진행 기록

💳 주요 기능

👨‍💻 업무

공통 업무

전담 업무

📚 기술 스택 및 툴

개발 환경 설정 ✅

1. Install Django Framework

2. Docker with MySQL

2.1 2022.12. 기준 디폴트로 설정되어 있는 값으로 설치

2.2 재부팅 후 나타나는 링크로 들어가서 업데이트 진행

2.3 create mysql container

2.4 PyCharm Database Tab(right side)

3. Python / MySQL 네트워크 연결

4. Install Tensorflow & Pytorch

4.1 Version Check(Tensorflow, Python, cuDNN, CUDA)

5. Install NVIDIA Driver(GeForce RTX 2080)

5.1 최신 공식 NVIDIA 드라이버 다운로드

6. Install CUDA(ver 11.2)

uninstall NVIDIA FrameView SDK

6.1 CUDA Toolkit 11.2 Downloads

7. Install cuDNN(8.1.0)

7.1 NVIDIA Developer login

7.2 Download cuDNN v8.1.0 (January 26th, 2021), for CUDA 11.0,11.1 and 11.2

7.3 압축파일 다음 경로에 풀기

7.4 Install Tensorflow(2.10.1)

8. Install Pytorch(1.13.1)

** 0.14.1 Check Install code**

9. Check Version

10. Install FastAPI & uvicorn

10.1 pip install

11. 애자일 방식을 위한 Tool 연동

11.1 slsck-jira 연동

11.2 jira-Confluence 연동

11.3 jira-GitHub 연동

AWS☁

1 설정

1.1 DB

2. 진행 순서

3 RDS

3.1 RDS 작성

3.2 RDS 인스턴스 생성

3.3 보안그룹 생성

3.4 파라미터 그룹 생성

4. IAM

4.1 IAM 생성하기

5. S3

　0.14.1 Check Install code