[Chatppiok] 2_구현 방식 결정/ UI UX 구현

 

---

 

주제를 정했으니 이제 서비스를 어떻게 구현할지

아키텍쳐를 설계했다.

 

 

 

먼저, 티스토리의 코드 편집기능 만으로는 chatspace를 구현하기엔

로그를 확인할 수 없고 불안정한 부분 등 통제 불가능한 요소가 많을 것이라 판단

 

 

 

 

이 조건을 기준으로 서비스를 구현하는 2가지 방법이 있다.

 

1. iffame 방식을 사용하여 외부에서 완성 화면을 통째로 넣는것

2. 외부 파일 로딩 방식 ✅

 

이중 2번의 방법 선택하기로 결정!

1번 iframe 방식은 정책 변경 리스크나 크기, 확장성 등의 문제 발생 리스크가 있어 제외.

 

 

 

---

 

 전체 구조

 

[사용자]
│
│ 1) 티스토리 메인 페이지 로드
│ 2) 티스토리 HTML 안의 <link> <script>로 외부 파일 로딩
│ 3) JS가 외부 실시간 주소로 연결
│ + 사용 환경 : 컴퓨터 + 모바일
│
▼
[내 티스토리]
│
│ 1) 역할 : 화면 컨테이너 (HTML, CSS, JS 코드 로더)
│ 2) 제한 : DB 접근, 서버 로그 접근, 백엔드 실행
│
│ HTTPS로 외부 파일 요청
▼
[외부 WEB-WAS]
│
│  1) 역할 
│      - 서버 제공
|       > 정적/동적 파일 제공 
│       > proxy
│       > WebSocket 등
│      - DB 연동
│ 
▼
[외부 DB]
│  
│ 1) 역할: 채팅 로그 등 히스토리 저장
────────────────────────────────────────────────────────
✔️ 배포 방식 1: VM 직접 구성
- WEB + WAS + DB
  > 블로그 방문자 수 통계값을 근거로, 동접자수는 최대 10-20일 것으로 계산.
  > vm 2대 구성(WEB+WAS / DB) *노트북 상태가 요즘 좋지않아.. 상황보고 결정 예정
✔️ 배포 방식 2: 클라우드 구성

 

 

 

 

이런게 큰 틀을 잡고 이제 외부 서비스..

즉 어플리케이션의 구조를 설정해야한다.

ChatSpace/
│
├─ public/
│   │
│   ├─ css/
│   │   └─ chatspace.css
│   │
│   ├─ js/
│   │   └─ chatspace.js
│   │
│   └─ assets/
│       └─ (아이콘·리소스)
│
├─ app.js
├─ config.js
│
└─ README.md

 

따로 server, db 디렉터리도 넣을까 했지만

추후 생성해도 되는 부분이기도 하고 우선 단순 서비스만 목표인데다

직접 설치한 web, was, db에서 로그 확인 할 예정이라 뺐다.

 

 

 

 

무엇보다도

지피티..자네의 말을 믿어보겠네..🙂‍↕️

 

 

 

 

 

 지피티로 코드 생성 후 수정 무한 반복

예전에 프로그래밍 교육을 듣지 않았다면 디테일한 부분 수정이 어려웠을듯 싶다.

생각보다 요청대로 결과가 안나오는게 많기도 하고 요구사항을 잘못 해석해서 답변을 주는게

너무 많아서 시간을 꽤 소모했다.

지금은 서버 없이 로컬에서 기능만 테스트 하는 용도이다.

 

 

 

 

이 프로젝트의 메인은 미들웨어와 클라우드 실전 공부용이므로

중요하지 않은 부분은 이후 수정작업으로 완성도를 높일것이다.

 

 

색상이나 배열 미세하게 안맞는 디테일은 추후 수정 예정 우선은 기능만!

 

 

 

코드 작성 일부. 반응형 ui가 제대로 동작을 안해 이거에 가장 많은 시간을 썼다.

 

 

 

 

이번 포스팅은

UI·UX 기본 구조와 화면 동작까지 구현 후 마무리합니다.