💛카부커넥션💛 : 디렉토리 구조 수정, 레이아웃 완성, 텍스트 컴포넌트

와~ 세호오빠가 버셀 없이 프론트 CI/CD를 구축했다

http://3.38.223.164

멋지다~

들여다봐여지

백엔드들이 MicroServiceArchitecture + Load Balancing + Kubernetes 배포를 구현한다고 한다

엄청어려워보임......

나도 배포 공부할래

 

그리고 AI 파트랑 개인미션 챗봇할 때 태진오빠 따라서 fastAPI도 해볼까

왜 모든 인간들이 풀스택인공지능PS배포를 추구해서 세상을 힘들게 만드는 거지

---

🌟구조 수정 , 프리티어 적용

KABOO_CONNECTION-FRONT/
│
├── public/                 # 정적 파일들이 위치하는 곳 
│
├── src/                    # 소스 코드가 위치하는 곳
│   ├── assets/             # 이미지, 폰트, 스타일 등 정적 자산
│   ├── components/         # 재사용 가능한 컴포넌트
│   ├── pages/              # 각 라우트에 해당하는 페이지 컴포넌트
│   ├── hooks/              # 커스텀 훅
│   ├── constants/          # 공통적으로 사용되는 상수들을 정의한 파일
│   ├── stores/             # Zustand 상태관리
│   ├── services/           # api 관련 로직의 모듈 파일, auth와 같이 인증과 관련된 파일
│   ├── utils/              # 정규표현식 패턴이나 공통함수 등 공통으로 사용하는 유틸 파일
│   └── config/             # 여러개의 config 파일
│
└── package.json            # 프로젝트 설정 및 의존성 목록

 

디렉토리 구조를 조금 수정한다

{컨포넌트이름}.styled.js : 스타일
{컨포넌트이름}.js : 구조

컴포넌트 스타일과 구조를 분리하여 파일을 만든다

 

프리티어도 깔고

npm install --save-dev prettier

마켓플레이스에서 prettier 확장자도 깔아 준 후

settings/json을 수정한다

{
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": "explicit"
    }
  }

새로고침할 때마다 정렬~

 

🌟주리 언니 헤더랑 같이 레이아웃 완성하기

푸터 쫌 아래에 붙여애겠다

푸터를 페이지의 맨 아래에 배치하되, 컨텐츠의 양에 따라 자연스럽게 페이지 하단에 위치하도록 하려면 flexbox레이아웃을 사용하여 구현

---

🌟text 컴포넌트 만들기

카카오 폰트를 가져온다

GlobalStyle로 폰트를 기본 설정하고 index에 깔아둔다

text 컴포넌트 만들기~

폰트이뿌당

! Named Export와 Default Export 갖다 쓸 때 {} 주의하기

+ 

pr 날리고 나서 수정사항이 생각났다면?

그 브랜치에 그대로 작업 에드커밋푸쉬하면 PR에 알아서 반영된다~

 

---

 

 

게임을 진짜 못하는 것 같다 왜지?