안녕하세요.
Hynn 입니다.
이번 포스팅에서는 수강하는 학원내에서 3명이 한 조를 이루어, 한가지 조그마한 프로젝트를 진행한 결과물과, 그에 대한 간략한 설명을 위한 포스팅을 작성하게 되었습니다.
처음에는 사진 커뮤니티를 지향하는 페이지를 구성하려고 했지만, 욕심이 욕심을 낳고, 스노우볼이 굴러가고...
더군다나 제 부모님으로 인한 가족여행 일정때문에, 어쩔수없이 1주간 자리를 비우는사태도 발생해서.. 다른 조원에 비해서 다소 완성도가 떨어져서, 팀원들에게 죄송한 마음이 컸습니다.
하지만, 남은 기간 열심히 달려서 완성을 하게되었고, 배포까지 완성하게 되어, 그에 대한 회고를 간단히 작성해볼까 합니다.
그럼 시작해보겠습니다.
===========
===========
1. 실제 배포 웹 사이트 구동영상
실제 AWS 배포를 진행한 구동 영상입니다.
무료 버전의 AWS 로 배포했고, 배포과정에서도 자잘한 문제가 발생했습니다.
실제 기간중의 작업만큼이나 AWS 배포를 염두에 둔 설정도 미리 필요하다는것을 몸으로 체감하였고, 다음 배포에는 조금 더 다듬어지지 않을까, 라는 생각을 하게 되었습니다.
실제 세부 코드는 아래의 Github 에서 확인이 가능합니다.
https://github.com/Hynn-Hyunwoong/project2
1) Index 구동영상
2) 게시글쓰기
3) 게시글수정
4) 나의반응/댓글/좋아요
5) 채팅 구동
6) 알림 구동
7) 기본 통계
2. 구현 과정
실제 구현을 하기 전, 외부의 디자인을 그대로 가져오지 않고,
세명에서 새롭게 디자인을 하기 위해서 시간 소요가 제법 컸습니다.
그러다 보니, 이러한 디자인 수정이 컸고, 중간중간에 변경도 많이 되었습니다.
최초의 디자인은, Simple 하게 가자는것이 시작이었지만,
대항해시대[?]로 변경이 되는 과정도 상당히 여러차례 수정을 거치는 작업이 이루어졌습니다.
당시 최초 작성의 디자인 초안은 아래의 사진 같았습니다.
작업관리의 경우, Trello, Github 를 바탕으로 Task-Management 를 진행했습니다.
처음에는 큰 틀에서 한가지 작업씩을 진행했지만, 이후에는 Github 에서 pull & merge 시에 발생하는 오류를 수정하고, 난 뒤 다음 작업을 단계별로 진행했고, 일자별로 Github의 Wiki 를 활용하여 HIstory 관리를 했습니다.
실제 Team Github 와 Trello 는 아래와 같이 관리를 했습니다.
3. Back/Front 기본 구조 작업
구현한 실제 Backend & Front Directory Tree 입니다.
Backend 의 경우, Design Pattern 으로 MVC 를 사용했고, 각 구현 기능별로 Repository, Service, Controller, Module 그리고 Route 로 구성하여, src 폴더에 분류가 되어 있습니다.
그리고 model 에서는 DB를 생성하고, Field 및 relation 을 설정하는 요소들이 구성되어 있습니다.
암호화는 JWT 를 사용하고, library 로서 lib 파일 내의 구성이 되어 있고, 각 요소들이 routes directory 에서 통합되어, server.js 에서 작동하도록 되어 있습니다.
app.js 에서는 error 처리를, 별도의 socketo는 route 에서 동작하도록 파일 구성이 되어 있습니다.
그리고 민감한 정보는 .env 를 통해 처리되었고, 팀원들의 양식을 위해 "example.env" 를 추가로 작성해서, 어떠한 형식으로 작성할지에 대해서 서로 양식을 맞추어 두었습니다.
Front의 경우,
기본적으로는 backend 와 같은 형태로 출발을 했습니다.
먼저 FileUpload 처리를 위한 MiddleWare 를 별도로 작성했고, routes 에서는 각 기능별 동작을 위한 Route 를 구성하고, 그를 index.js 에 통합하도록 요소를 분리하였습니다.
public 에서는 JavaScript, CSS 파일을 기능에 맞게 구현하여 정리했고, 화면을 Render 하기 위한 HTML 은 views 에 구조별로 정리하여 작성했습니다.
HTML 의 경우에는 Nunjucks 를 활용하여, 기본 layout 파일을 구성한 뒤, layout 을 바탕으로 나머지 페이지에 대한 작업이 시작되었습니다.
CSS 역시 기초적인 root.css 를 구성하여, 여러HTML 에서도 공통적으로 사용을 했습니다.
4. 사용 기술
Backend 사용기술은 아래와 같습니다.
"@ckeditor/ckeditor5-upload": "^36.0.0",
"axios": "^1.3.2",
"cookie-parser": "^1.4.6",
"cors": "^2.8.5",
"crypto": "^1.0.1",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"moment": "^2.29.4",
"multer": "^1.4.5-lts.1",
"mysql2": "^3.1.0",
"sequelize": "^6.28.0",
"socket.io": "^4.6.0"Front 사용기술은 아래와 같습니다.
"@ckeditor/ckeditor5-image": "^36.0.0",
"@ckeditor/ckeditor5-upload": "^36.0.0",
"axios": "^1.2.6",
"cookie-parser": "^1.4.6",
"cors": "^2.8.5",
"dotenv": "^16.0.3",
"express": "^4.18.2",
"multer": "^1.4.5-lts.1",
"mysql2": "^3.1.0",
"nunjucks": "^3.2.3"
감사합니다.
댓글