yeosang0508 님의 블로그

프로젝트 기획

회사를 찾아보면서 Node.js, React 가 많이 보임.. 간단한 주제를 잡고 이 전에 좀 체계적으로 못했다면 작은 프로젝트로 기획, 설계, 개발, 테스트, 배포까지 좀 더 체계적으로 단기간에 진행해보자

목표는

• 사람들이 간단히 이벤트를 등록하고 관리할 수 있는 웹 애플리케이션
• 이벤트 이름, 날짜, 장소를 입력하고 등록된 이벤트를 목록으로 확인/삭제

프로젝트 설계

초기 기술 스택

배포환경 : 로컬(개발), AWS

일단 간단하게 이벤트 CRUD 할 수 있는거 만들고 확장하는 식으로 이거 만들어 두면 다른 프로젝트에도 넣을 수도(?) 있으니깐

1. 이벤트 등록 -> 이름, 날짜, 장소 입력 및 저장 / 이벤트 조회 -> 등록된 이벤트 목록 조회 / 이벤트 삭제
2. 이벤트 우선순위 저장

• 단순히 등록하는 것을 넘어 각 이벤트에 우선순위를 설정
• 오늘 할 일과 미래의 이벤트를 한 화면에 표시
• 우선순위 높은 이벤트 강조

페이지 들어가면 로그인 창을 딱 보여주자, 로그인하면 바로 윗 내용으로
알림 및 카운트다운 -> 각 이벤트에 대해 사용자 지정 알림 설정 / 남은 시간 표시

확장

공유 이벤트 관리 -> 이건 게시글 만든 뒤 확장하고, 생성한 이벤트 링크 공유/ 친구나 팀원과 실시간으로 협업하여 이벤트 추가 / 삭제 -> 간단한 소셜 피드 ( 각 이벤트에 댓글 기능 추가)

캘린더...? 처럼 할껀가 중요한 이벤트는 색상이 진하고, 덜 중요한 이벤트는 옅은 색
버튼 클릭 시 애니메이션 효과 추가 ( 이벤트 추가 시 작은 성공 메시지 표시 )
반응형 웹으로 제작

간단한 대시보드 : 오늘, 이번주, 이번달, 일정 요약
개인화 설정 : 이벤트 색상 지정, 알림 방식 선택

영신님이 Postgresql설치 및 세팅 노션에 올려주신거 참고하면서 window 환경에서 세팅

1. PostgreSQL 공식 설치 프로그램 사용

PostgreSQL 공식 사이트 버전 17로 설치해서, 환경변수 설정 path에 C:\Program Files\PostgreSQL\17\bin 경로 설정

psql --version

설치 확인 후

2. PostgreSQL 서버 실행 및 종료

window 에서는 PostgreSQL 서비스가 자동으로 실행된다고 하지만, 그래도 확인!

서비스 실행

net start postgresql-x64-17

서비스 중지

net stop postgresql-x64-17

3. PostgreSQL 데이터베이스 설정

DBeaver로 PostgreSQL 데이터베이스 생성

1. DBeaver 설치 및 PostgreSQL 연결

• DBeaver를 실행하고, Database > New Connection 클릭
• PostgreSQL 선택
• localhost, 포트 : 5432, 비밀번호 : 설치 시 설정한 비밀번호 입력
• 연결 표시!

외부 접속 허용

노션 참고해서 pg_hba.conf와 postgresql.conf 파일을 수정하였고,

변경사항 코드는 아래와 같이 적용!

pg_ctl -D "C:\Program Files\PostgreSQL\17\data" restart

yml도 내 이름, 비밀번호로 설정하여 넣어줌

확인

1. 모든 데이터베이스 확인

\l

1. 현재 연결된 데이터베이스 확인

\c

1. 사용자 목록 확인

\du

RDBMS (관계형 데이터베이스 관리 시스템)

데이터를 테이블(관계) 형태로 조직화하여 관리하는 데이터베이스 관리 시스템
각 테이블은 행과 열로 구성되며, 데이터 간의 관계는 기본키와 외래키를 통해 정의

포트폴리오 매칭 시스템의 특성과 RDBMS 적용 이유

• 사용자 정보, 스킬 등 정형화된 데이터를 다룰 가능성이 높음
• 사용자와 포트폴리오 간의 다대다 관계를 처리해야 할 가능성이 있음

NoSQL 부적합 이유

1. NoSQL은 테이블 간의 관계를 직접적으로 지원하지 않으므로, 사용자와 포트폴리오 간의 복잡한 매칭 로직을 구현하기 어렵다.
2. 데이터 무결성과 일관성이 중요한 시스템에서 NoSQL은 추가적인 애플리케이션 로직을 필요로 하며, 복잡성이 증가한다.
3. 시스템 초기 설계가 명확하고, 데이터 구조가 자주 변경되지 않는 경우에는 RDBMS의 고정된 스키마가 더 적합하기에..

VARCHAR, CHAR

VARCHAR

• 저장된 데이터의 길이만큼만 공간을 차지, 추가적으로 문자열 길이를 저장하기 위해 1~2바이트 더 사용
• 데이터 길이가 가변적인 경우 적합

CHAR

• char(50)이면 저장된 데이터가 50글자보다 짧으면, 나머지 공간은 공백으로 채워짐
• 데이터 길이가 고정되어 있어 데이터 검색이나 비교 작업에서 속도가 더 빠름

여기서 드는 의문은 항상 varchar을 사용하는 것이 합리적이지 않나..? 왜 나누어진거지

varchar은 저장하는 데이터의 길이를 추적해야하기 때문에, 각 데이터 항목에 추가적인 1~2바이트가 필요하고, char는 고정 길이이므로 길이를 추적할 필요가 없고, 데이터가 항상 같으 크기로 정렬되어 저장된다.

char은 고정된 길이 덕분에 검색과 비교가 더빠를 수 있고, 고정된 길이의 데이터가 많으면 디스크 I/O 작업에서 이점이 있을 수 있다고 함

varchar은 데이터 길이가 다를 경우, 데이터 정렬과 검색 작업 시 추가적인 계산이 필요할 수 있음

내가 varchar로 사용한 이유는 데이터 길이가 가변적이고, 짧은 데이터 이기에 ( 이름, 이메일 주소, 게시글 제목...)

ENUM?

소셜 로그인 제공자를 ENUM으로 한 이유

ENUM은 열거형 데이터 타입, 데이터베이스에서 특정 열에 대해 미리 정의된 값들 중 하나만 저장할 수 있도록 제한하는 데 사용

ENUM은 미리 정의된 값만 저장할 수 있고, ( 위에 내가 설정한 google, github로 설정하면 이 값만 )
내부적으로 ENUM값은 정수로 저장된다고함 (값은 정의 된 순서에 따라 저장)

=> 메모리를 절약할 수 있고, 비교 속도가 더 빠르다는 장점, 허용된 값 외의 데이터터는 삽입되지 않아서 데이터가 잘못 저장될 가능성이 줄어든다.

근데 다른 권한 레벨이나, 연차별 직책과 같은 것을 tinyint로 지정한건 확장성 때문에

그리고 enum을 사용하는 다른 이유는 데이터가 별도로 매핑 값을 확인안해도 됨

=> 이러한 생각으로 설정하였지만, 다른 분들하고 상의 해야할 듯..?

좋아요 테이블을 분리해야하는 이유는 좋아요 기능이 확장되지 않을까..?
좋아요 수에 기반해서 포트폴리오 랭킹 시스템 구현 가능할 것 같고, 사용자가 좋아요를 누른 포트폴리오를 내가 좋아요한 포트폴리오목록으로 별도로 조회 가능 -> 아 이건 따로 저장 버튼 만들기로 했던 것 같기도
, 좋아요 데이터를 분석해서 개인화 추천 시스템에 활용할 수 있지 않을까..? -> 유사한 기술 스택을 가진 포트폴리오 추천???

초기 ERD 작업

확인✔️

1. 회원 관리

• 소셜로그인(google, github)과 로컬 로그인 모두 지원하도록 설계?
• 회원의 공통 정보를 부모 테이블로 분리하고, 일반 회원/사업자 정보를 자식 테이블로 관리?

1. 포트폴리오 관리

• 포트폴리오 데이터를 Article 테이블로 관리?
• 좋아요 데이터를 별도의 테이블로 관리해서 확장 가능성을 높였는지?

1. 기능 확장

• 사업자와 일반 회원의 데이터를 구분해서 권한별로 접근 제한이 가능하도록 설계?

국비 학원이 끝난 후지만 따로 모여서 같이 프로젝트 시작!!

프론트나 백엔드 문서 작업 등등 내가 하지 못했던 부분 또는 부족했던 부분을 같이 프로젝트 진행하면서 배울점이 많을 것 같다

주제 선정

오늘은 따로 카페에 모여서 주제 선정 후, 프로젝트 생성, 노션까지 정리

나온 주제들은

1. 음악을 들려주면 코드를 분석 -> 확장 프로그램 까지
2. 유튜브 외국 댓글 거르기 / 한국 댓글만 보이게 (검색 기능) -> Comments Search for Youtube라고 존재함.. 아쉽.. ㅜ
3. 동영상 특정 부분은 보내서 어떤 만화인지 분석(구글 이미지 검색?), 영상을 어디서 볼 수 있는지
4. 개발자 포트폴리오 탬플릿 사이트

라는 주제들이 나왔는데 보다 현재 시점에서 접근하기도 좋은 개발자 포트폴리오 탬플릿 사이트으로 선정되었다.

개발자 포트폴리오 사이트가 나온 이유가 내가 포트폴리오를 만들면서 참고한 사이트가

https://notefolio.net/

와 같이 디자이너들을 위한 포트폴리오를 모아둔 페이지는 있지만 개발자는 없기에, 참고하면서 저건 개발자가 과연 구현시킬 수 있을까 라는 생각도 많이 들었기에, 실제 개발자들이나 취준생들 구현시킨 포트폴리오 사이트를 모아둔다면 취준생들에게 도움이 되지 않을까 싶어서 ( 물론 나에게도 ㅎㅎㅎ )

이런 주제를 말했더니 딱 나온 이야기는 여기에 인사담당자까지 연결하여 실제 취업까지? 라는 의견도 나옴

여기에 살을 계속 붙이면 그럴듯한 사이트가 될 것같다.

작업분담은 프론트(최은서), 백엔드(한영신), 풀스택(이윤정, 나)로 진행하기로 함

프로젝트 생성 후 브랜치 전략(feature 브랜치)를 도입, feature-ssa 브랜치 생성하였다.

YesY Team 결성🎉

일단 이번주 나의 할일은 ERD (초기 스키마) 작성하고, 주기능을 보조해줄 수 있는 편의성 기능 생각해서 정리 -> 이건 빨리 정리해서 전달해주어야 할 것 같다.

배포과정

1. 프로젝트의 settings 클릭
   
2. 좌측 네비게이션 바에서 Pages 클릭
   
3. Deploy from a branch로 변경한 후 Branch를 deploy로 만들고 /(root)인 상태에서 save
   
4. 생성 완료
   

현재 프로젝트 내부에 index.html 설정을 안해줘서 리드미에 작성한 내용밖에 들어있지 않지만, 웹사이트로 보이도록 수정할 예정!!! 그리고 포폴이랑 연결해야지!

분명히 env 파일 만들고, 경로까지 다 지정을 해놨는데, 인식이 되지 않아 지도나 사진이 보이지 않음..
직접 키를 yaml에 입력해주니 생성되는걸 확인했는데 그러면 경로의 문제는 아니고..
근데 폴더에는 env 파일이 보이는데 sts에 env가 보이지 않음을 발견... 발견하기 전에 env를 지웠다가 리셋시켰다가.. 난리난리를

어쨌뜬 발견하고,

Project Explorer 활성화

1. 상단 메뉴 -> window -> Show View -> Project Explorer를 클릭
2. Show View 창에서 Project Explorer를 검색한 후 클릭 -> Open 버튼

View Menu

1. Project Explorer 뷰가 열리면 오른쪽 상단에 있는 작은 드롭다운 아이콘 (View Menu, 세로로 점 3개로 된.. ) 클릭
2. Filters ans Customization 메뉴 선택
3. resources* 항목 체크 해제 -> 이 옵션이 체크되어있으면 점(.)으로 시작하는 파일이 숨겨진다고 함...........

이렇게 해결...... 아니 언제 저걸 체크한거지...........

취뽀를 위해 포트폴리오 만들면서.. 프로젝트 리팩토링 하면서.. 배포하면서.. CS 준비하면서.. 알고리즘 공부 하면서.. 이제 진짜 시작이라고 보면 된다.......... 하하ㅏㅎ 화이팅...

일단 포트폴리오 먼저 만들고, 프로젝트 정리해가면서 수정해야겠다..

템플릿 참고 사이트
http://jekyllthemes.org/page17/
https://github.com/saadpasta/developerFolio

가져올건 가져오고 만들건 만들고...!

아이콘
https://icon-icons.com/ko/

https://github.com/mattboldt/typed.js/

최대한 깔끔하고, 눈에 들어오게 만들어보자.

스킬 아이콘은 아래에서

https://skillicons.dev/

피드백✨

마크다운 형식이라 잘 눈에 안들어옴.. 글 정리 하는 방식을 바꾸고, 다른 분들 포폴 확인해보니.. 현재 내 포폴 너무 밋밋함..

확실히 바꿀 필요가 있음.... 이렇게 영상으로 보니깐 하나도 눈에 안들어와 (기술스택 나열한 부분은 괜찮은듯!)

YOLOv7

• 강아지 객체 감지를 위해 사용

git clone https://github.com/WongKinYiu/yolov7.git
cd yolov7


pip install -r requirements.txt

가상환경 정리

가상환경이 복잡하거나 충돌이 심한 경우, 새로운 가상환경을 생성하여 문제를 해결

새 가상환경 생성

python -m venv yolov7_env

가상환경 활성화

yolov7_env\Scripts\activate

YOLOv7과 numpy 버전 충돌 해결

YOLOv7을 실행하려는 환경에서 numpy 버전 충돌이 발생

YOLOv7은 numpy<1.24.0 버전을 요구하지만, 현재 설치된 버전이 numpy-2.1.3으로 호환되지 않아서 문제를 일으킴

설치된 numpy 버전이 YOLOv7과 호환되지 않으므로 pip uninstall numpy 제거

YOLOv7은 numpy<1.24.0을 요구하므로, 안정적인 numpy==1.23.5 버전을 설치
pip install numpy==1.23.5 --only-binary :all:

모델이 잘못된 클래스를 감지하고 있음

출력 결과:
잘못된 클래스 값 무시: 39
잘못된 클래스 값 무시: 73
잘못된 클래스 값 무시: 39
잘못된 클래스 값 무시: 41
잘못된 클래스 값 무시: 60
잘못된 클래스 값 무시: 68

잘못된 클래스 값 무시라는 디버깅 메시지로, YOLO 모델이 감지한 객체의 클래스가 dog 클래스와 일치하지 않아서 해당 객체를 무시한 경우 출력됨

• YOLO 모델은 COCO 데이터셋(80개 클래스)을 기반으로 훈련되었음
• 감지된 클래스가 16번(강아지 클래스)가 아닌 다른 클래스(고양이, 의자, 자동차..)인 경우 무시되는데, 대부분의 탐지된 클래스가 dog 클래스와 관련이 없기 때문에 무시된 것이라고 한다.

객체가 감지되지 않는 이유가 데이터의 문제라면... confidence threshold (conf_thres) 값을 낮추어 더 많은 객체를 감지하도록 해보자..

COCO 클래스 정의에서 강아지(dog) 클래스가 cls == 16 인 경우에만 처리하도록 설계, 강아지로 탐지된 결과만 필터링하고 처리하는데 초점이 맞춰지도록!

1. COCO 클래스

COCO 클래스 목록에서 강아지는 cls == 16

이를 기준으로 탐지된 객체 중 강아지를 선별

2. 클래스 이름 출력

print(f"탐지된 클래스: {class_name} (클래스 번호: {cls}), 신뢰도: {conf:.2f}") 이 코드는 디버깅용으로 모델이 탐지한 클래스 이름, 번호, 신뢰도를 출력

3. 강아지 클래스만 처리

if cls == 16: 조건문으로 강아지 탐지 결과만 처리하고, 다른 클래스는 무시

강아지로 탐지된 경우, 이미지를 크롭하고 경계 상자를 시각화하며 파일로 저장

def detect_and_crop(image_path, model, output_folder, conf_thres=0.25, iou_thres=0.2):

탐지된 클래스: bench (클래스 번호: 13)
탐지된 클래스: refrigerator (클래스 번호: 72)
탐지된 클래스: chair (클래스 번호: 56)
탐지된 클래스: couch (클래스 번호: 57)
탐지된 클래스: person (클래스 번호: 0)
탐지된 클래스: chair (클래스 번호: 56)

너무 낮추었나.. 너무 다르게 나오네..

탐지된 클래스: dog (클래스 번호: 16), 신뢰도: 0.68
탐지된 클래스: cat (클래스 번호: 15), 신뢰도: 0.42
잘못된 클래스 탐지: cat (클래스 번호: 15)
탐지된 클래스: dog (클래스 번호: 16), 신뢰도: 0.80
탐지된 클래스: cat (클래스 번호: 15), 신뢰도: 0.77
잘못된 클래스 탐지: cat (클래스 번호: 15)
탐지된 클래스: potted plant (클래스 번호: 58), 신뢰도: 0.38
잘못된 클래스 탐지: potted plant (클래스 번호: 58)
탐지된 클래스: dog (클래스 번호: 16), 신뢰도: 0.81
탐지된 클래스: dog (클래스 번호: 16), 신뢰도: 0.46
탐지된 클래스: cat (클래스 번호: 15), 신뢰도: 0.35
잘못된 클래스 탐지: cat (클래스 번호: 15)
탐지된 클래스: dog (클래스 번호: 16), 신뢰도: 0.70
탐지된 클래스: dog (클래스 번호: 16), 신뢰도: 0.91
탐지된 클래스: bed (클래스 번호: 59), 신뢰도: 0.47

def detect_and_crop(image_path, model, output_folder, conf_thres=0.3, iou_thres=0.25):

이거 맞추기 참..

conf_thres는 탐지된 객체의 신뢰도를 나타낸 conf 값이 conf_thres 보다 작으면 해당탐지를 무시

• conf_thres를 낮추면 더 많은 객체를 탐지하지만, 오탐지가 증가할 수 있다.
• conf_thres를 높이면 더 높은 신뢰도로 탐지된 객체만 남는다.

iou_thres

• iou_thres를 낮추면 더 많은 탐지를 허용하며, 강아지 클래스의 추가적인 탐지가 가능해질 수 있다 .
• iou_thres를 높이면 중복된 탐지를 더 강하게 제거한다.

결론적으로 def detect_and_crop(image_path, model, output_folder, conf_thres=0.25, iou_thres=0.2): 로 진행

탐지 결과가 없거나 다른 클래스만 탐지될 경우, 해당 클래스는 무시하도록 함.

여기서 탐지 정확도를 높이기 위해서는 conf_thres를 낮추거나 모델 가중치를 변경해서 시도해보자...

이미지의 해상도, 밝기, 대조 등을 조정하여 강아지 탐지 가능성을 높이고,
OpenCV의 cv2.equalizeHist 또는 cv2.resize 등을 활용해 데이터 품질을 개선

==> 다시 생각 아니 클래스를 무시하면 안되지!!!!!!! 영상 프레임 별 감지를 하는건데 무시하면 오차가 생기고 그만큼 모델 행동 분류하는데 오차가 생길거 아니냐고... 객체 감지를 하면 크롭하여 저장한 뒤 넣어두고, 객체감지 오류가 발생한경우 크롭되지 않은 원본의 데이터를 가지고 데이터 처리를 하자

크롭 완료!✨
.
.
.

오차는 존재....;;;

코드 흐름

1. labeling_dir에서 JSON 파일을 읽고, JSON 파일의 annotations에서 frame_number를 추출
2. frame_dir 에서 해당 frame_number에 해당하는 이미지를 읽어오고, detect_and_crop 함수를 호출하여 강아지 객체를 탐지하고 크롭된 이미지를 저장한다.
3. 탐지된 강아지 객체의 정보를 annotations.csv 파일에 기록

csv 파일안에는 frame_number 탐지된 강아지가 포함된 프레임 번호, cropped_frame_path 크록된 강아지 이미지 경로가 들어간다. 크롭된 이미지에는 강아지 객체가 탐지된 후, 해당 영역을 크롭하여 cropped_output 디렉터리에 저장한다.