👒내 포트폴리오 웹사이트 만들기👒 : 설계/기획

신촌에서 다같이 해보려고 했으나!!

개인프로젝트기도 하고...이야기하다보니까개인적으로하겟다는게 낫겟다고생ㄱ각도들고,,,,아직사람들취업급하지도않고...,,터져버렸다.....ㅠㅠㅠㅠㅠㅠㅠㅠ

 그래서~~카부캠 같은 팀 주리언니랑 세호오빠랑 하기로~~~

---

👒 프론트 동향

2024 프론트엔드 기술스택 이야기

출처

---

👒 기술 스택 설계

프론트 : 
npm + Node.js + vite + React + typeScript + next.js + emotions + Framer Motion + TailwindCSS+ Three.js + ESLint + prettier + jest
배포(CI/CD) : 
github actions + ec2 + docker

 

 

패키지 관리 도구 : npm
런타임 환경 : Node.js
번들러 : Vite
트랜스파일러: SWC
프레임워크 부문 : React
개발 언어 부문 : Typescript
CSS-in-JS: Emotion
유틸리티 CSS : TailwindCSS
애니메이션 라이브러리: Framer Motion
3D 그래픽 라이브러리: Three.js
코드 포맷터 : Prettier
코드 품질 관리 도구 : ESLint
테스트 도구 : Jest

CI/CD 부문: GitHub Actions
서버 부문: AWS EC2
컨테이너화 부문: Docker
리버스 프록시 및 웹 서버: Nginx

 

npm 패키지 관리 도구로 프로젝트의 의존성을 관리하고,  Node.js으로 런타임 환경을 구성.

React와 TypeScript를 기반으로

Tailwind CSS와 Emotion을 사용해 유연한 스타일링을 구현하고, Framer Motion,Three.js를 통해 애니메이션 효과와 3d 모델을 도입해 동적인 사용자 경험을 제공.

Vite와 SWC를 통해 빌드 속도를 개선하고,

Prettier를 통해 코드 스타일을 자동으로 포맷팅하고, ESLint를 통해 코드 품질과 일관성을 관리.

Jest로 테스트를 보장.

EC2 서버에서 Docker를 통해 컨테이너화된 애플리케이션을 관리하고, Nginx를 사용하여 정적 파일을 효율적으로 제공하며, GitHub Actions로 자동 배포 워크플로우를 구축하여 지속적인 배포와 테스트 자동화를 실현

 

 

여기까지 일단 해 놓고 k8s 공부한 뒤에 도입 시도해보기

컨테이너 오케스트레이션 도구 : Kubernetes

그다음에 

챗봇 rag 넣기 추가하기!

API 개발용 웹 프레임워크 : FastAPI
LLM 활용 프레임워크 : Langchain
인공지능 API 서비스 : OpenAI API

씁,,,돈 많이 들어가려나...

---

👒 컨벤션

.github에 pr/issue 템플릿 넣어 놓기

커밋 컨벤션 맞추기

 

iR브랜치

git flow 사용

• main: 서비스을 직접 배포하는 역할을 하는 브랜치
• dev(개발):  feature에서 개발된 내용을 가지고 있는 브랜치
• feature(기능):각 기능 별 개발  브랜치 ( feature/#[Issue 번호])
• release(배포):  배포를 하기 전 내용을 QA(품질 검사) 하기 위한 브랜치
• fix(고치기):  main 브랜치로 배포를 하고 나서 버그가 생겼을 때 고치기 위한  브랜치 ( fix/#[Issue 번호])
• refactor(리팩토링):  리팩토링을 위한 브랜치 ( refactor/#[Issue 번호])

✨커밋

제목은 최대 50글자까지 아래에 작성

본문은 아래에 작성

꼬릿말은 아래에 작성

Feat	새로운 기능 추가
Fix	버그 수정
Docs	문서 수정
Style	코드 formatting, 세미콜론 누락, 코드 자체의 변경이 없는 경우
Init	초기 생성
Refactor	코드 리팩토링
Test	테스트 코드, 리팩토링 테스트 코드 추가
Chore	패키지 매니저 수정, 그 외 기타 수정 ex) .gitignore
Design	CSS 등 사용자 UI 디자인 변경
Comment	필요한 주석 추가 및 변경
Rename	파일 또는 폴더 명을 수정하거나 옮기는 작업만인 경우
Remove	파일을 삭제하는 작업만 수행한 경우

• 절대 동사 형태로 작성 불가
• 제목 첫 글자를 대문자로
• 제목은 명령문으로
• 제목 끝에 마침표(.) 금지
• 제목과 본문을 한 줄 띄워 분리하기
• 본문은 "어떻게" 보다 "무엇을", "왜"를 설명한다.
• 본문에 여러줄의 메시지를 작성할 땐 "-"로 구분

Fixes	이슈 수정중 (아직 해결되지 않은 경우)
Resolves	이슈 해결했을 때 사용
Ref	참고할 이슈가 있을 때 사용
Related to	해당 커밋에 관련된 이슈번호 (아직 해결되지 않은 경우) # ex) Fixes: #47 Related to: #32, #21

ex)

Feat : 랭킹 점수 계산식 변경

기존 계산식은 기여 횟수 * 영상 시간(분)이었지만, 기획 변경으로 인해 횟수 * 영상 시간(초)로 변경되었습니다.

Related to: #12

✨PR

🧑🏻‍🎨	:art	코드의 구조/형태 개선
⚡️	:zap	성능 개선
🔥	:fire	코드/파일 삭제
🐛	:bug	버그 수정
🚑	:ambulance	긴급 수정
✨	:sparkles	새 기능
💄	:lipstick	UI/스타일 파일 추가/수정
⏪	:rewind	변경 내용 되돌리기
🔀	:twisted_rightwards_arrows	브랜치 합병
💡	:bulb	주석 추가/수정
🗃	:card_file_box	데이터베이스 관련 수정