project[Puleus]_(3주차) 코딩과 디버깅 그리고 크리스마스

기간 : 24.12.23~ 24.12.29

🌱 코딩과 디버깅 그리고 크리스마스

• 프로젝트가 7일 남았다. 하지만 25일 크리스마스로 인해 실질적인 미팅과 논의를 할 수 있는 시간은 2일에 불과했다. 또한 23일 임시 배포를 해야하기 때문에 바쁜 3주차였다.

---

💡 Meeting

• 팀원들과 각자 담당 분야의 진행 상황을 공유했다.
• Git의 충돌을 방지하는 것이 다시 한번 언급 되었다.
  • 반드시 자신의 branch를 설정한 뒤 작업을 진행 한다.
  • branch에서 충돌이 없음을 확인한 뒤 수정 사항을 커밋 메세지와 함께 업로드한다.

✨ 개인 작업

💻 자유 게시판 기능

• 자유게시판은 사용자들이 게시글을 작성, 조회, 수정, 삭제할 수 있는 기능을 가지고 있다.
• 사용자들은 자유게시판을 통해 정보, 의견을 교류하여 우리 페이지를 오랫동안 사용 할 수 있게 유도한다.

게시글 목록

• 기능: 모든 게시글을 테이블 형태로 조회.
• 구성 요소:
  • 제목, 작성일, 작성자, 분류 정보 표시.
  • 각 게시글의 제목을 클릭하면 상세 페이지로 이동.
• 조건:
  • 게시글이 없는 경우 "게시글이 없습니다." 메시지 표시.

게시글 작성

• 기능: 로그인한 사용자만 게시글 작성 가능.
• 구성 요소:
  • 게시글 제목, 내용, 분류, 이미지 업로드 가능.
  • 작성 버튼 클릭 시 서버로 데이터 전송.

게시글 조회

• 기능: 특정 게시글의 상세 내용을 조회.
• 구성 요소:
  • 제목, 작성일, 작성자, 내용, 분류 정보 표시.
  • 댓글 작성 및 조회 가능.

댓글 기능

• 기능: 게시글에 댓글 추가, 수정, 삭제.
• 구성 요소:
  • 로그인 상태에서 댓글 작성 가능.
  • 댓글 수정 및 삭제는 작성자만 가능.

게시글 관리

• 기능: 게시글 수정 및 삭제.
• 구성 요소:
  • 게시글 작성자는 자신의 게시글 수정 및 삭제 가능.

💻 자유 게시판 기술

5. 라우트 정의 (index.js)

• 라우팅

라우팅	내용
GET /board	게시판 목록 표시
GET /board/write	게시글 작성 폼 표시
POST /board/write	게시글 데이터 업로드
GET /board/view/:id	특정 게시글 조회
POST /board/view/:id/comment	댓글 작성
PUT /board/comment/:id/edit	댓글 수정
DELETE /board/comment/:id	댓글 삭제
DELETE /board/view/:id/delete	게시글 삭제

• 미들웨어
  • isAuthenticated: 로그인 여부 확인.
  • setUserId: 로그인 상태의 사용자 ID를 로컬 변수에 저장.

2. 데이터베이스 모델 (board.js)

• 구조: board 테이블
• 필드

라우팅	세부	내용	검사
boardId	Primary Key, Auto Increment	게시글 고유 식별자	-
boardTitle	String, 50	게시글 제목	필수
boardDate	Date	게시일(현재 시간)	기본값
boardDetail	String, 300	게시글 내용	필수
boardPicPath	String, 100	첨부 이미지	선택
userId	String, 20	작성자 ID	선택
boardCategory	String, 20	게시글 분류	필수

• 설정:
  • freezeTableName: 테이블 이름 고정.
  • timestamps: 생성 및 업데이트 시간 자동 기록 비활성화.

3. HTML 구조 (board.ejs)

• 기능:
  • 게시글 목록을 표시하며, 조건부 렌더링으로 게시글 유무에 따라 동적 처리.
  • 로그인 여부에 따라 게시글 작성 버튼 또는 로그인 안내 표시.
• 구성:
  • <table>: 게시글 목록 테이블.
  • <div class="write-btn">: 작성 버튼 또는 로그인 안내.
• 템플릿 엔진: <% %>를 사용한 동적 렌더링.

4. CSS 스타일링 (board.css)

• 기능:
  • 레이아웃 및 디자인 제공.
  • 주요 스타일:
    • body: 기본 배경과 글꼴 설정.
    • .board-list: 게시판 레이아웃 정의.
    • .btn-red: 버튼 스타일 정의.
• 사용성:
  • 테이블, 버튼, 폼 등 모든 요소에 반응형 디자인 적용.

---

📘 Meeting

트러블 슈팅

🔥안건

• "상품 정보"가 없어서 현재 구현 정도의 한계점이 발생
• ERD기반 연결이 되지 앟아 페이지 오류
• SQL 테이블명 확인하면서 코딩

🔎 해결방안

1. ERD, SQL을 기준으로 코딩

2. 상품 정보 크롤링이 오래 걸릴 경우 실시간 크롤링 방식을 이미지 가져오기 방식으로 변경하기로 결정했다.

---

⚙️ 기술적 보완점

1. 배포하기
   • AWS 배포 과정에서 원인 불명의 오류가 계속 발생.
   • Leader의 도움을 받아야함.
2. 게시글
   • 게시글 목록 페이징 처리.
3. DB 쿼리
   • DB 쿼리에 인덱스 추가.
4. UI/UX 개선
   • 모바일 사용자를 위한 반응형 디자인 추가.
   • 게시글 검색 및 필터링 기능.
5. 보안 강화
   • 현재 로그인을 하면 입력 값에 대한 보안사항 부재.
   • 입력 값에 대한 유효성 검사 추가해 "글 내용" 충실하게 개선