공지 게시판 페이지

[JeeIn-Shin]

[HIYOKA]

1 자바스크립트 구현
1-1. 게시 구현
1-1-1. 작성자, 제목, 내용, 첨부파일, 작성일자 이렇게 있는데 뭐가 더 필요한가?
1-2. 글쓰기 기능 관리자만 쓸 수 있게 하기 (임의 구현 완료)
1-3. 관리자면 게시글 수정 삭제 가능하게 하기
1-4. 검색 기능 구현
1-5. 1 중요 공지 올릴 수 있게 해주기 2 새로운 공지 강조하기
1-6. 웹 표준 문서 종종 보기, 프론트엔드 성능 최적화
|https://ko.javascript.info/ > 문서 이벤트 인터페이스 부분 먼저 보기

[HIYOKA]

1 자바스크립트 구현
1-1. 게시 구현
1-1-1. 작성자, 제목, 내용, 첨부파일, 작성일자 충분한 거 같다.
1-1-2. 동영상 게시나 이미지 게시 부분 구현하기?
1-2. CRUD 관련
1-2-1. 글쓰기 기능 관리자만 쓸 수 있게 하기 (임의 구현 완료)
1-2-2. 관리자면 게시글 수정 삭제 가능하게 하기 (임의 구현 완료)
1-2-3. 검색 기능 구현
1-2.4. 게시나 수정할 때 편집창이랑 HTML창 정보가 html 버튼 누르지 않으면 따로 놀아서 그 제출 버튼 누르면
그 때 편집창 기준으로 textarea에 내용 집어 넣은 다음 서버에 데이터 보내는 식으로 바꾸기

1-3. 1 중요 공지 올릴 수 있게 해주기 2 새로운 공지 강조하기
1-4. 웹 표준 문서 종종 보기, 프론트엔드 성능 최적화
|https://ko.javascript.info/ > 문서 이벤트 인터페이스 부분 먼저 보기
1-5. 조회수 올라가는 로직 짜기
1-6. 첨부파일 관련 기능
1-7. 글쓰기 기능
1-7.1. 좌, 중, 우 정렬 선택 강조
2. 굵게, 기울임, 밑줄, 취소선 버튼은 다시 누르면 취소되게 하기
3. color 기능
4. font size 기능
5. 글꼴 기능
6. tab키로 들여쓰기
7. 커서가 위치한 행의 스타일을 바꿔버리는데 더 세세하게 선택할 수 있게하기
8. 마지막줄 직접 입력하면 문제 없는데 받아온 마지막줄을 하다보면 버튼들 작동이 안 되는 문제 해결하기
9. 링크 기능 눌렀을 때 링크를 바로 만드는 게 아니라 올바른 url을 넣었을 때 기능 작동하게 만들기
|또한 링크가 되었으면 예쁘게 해주기
10. 첨부파일 관련 기능

2. 백엔드. db와의 연계?
   |팀장이 이번주 api 하자고 했다.

[HIYOKA]

3.bootstrap
그 예시 1194개 html 중에서 아래 것들을 참고하면서 만들 예정이다.

404
block-blog-single-3
block-blog-single-4
block-blog-single-6
blog-grid
menu-with-button
wysiwyg > 텍스트편집기
block-navigation-header-5
block-footer-2

현 공지게시판은
blog-grid에
block-navigation-header-5
block-footer-2

notice-user-board, notice-admin-board에서 수정할 부분 및 문제점
1 블럭 부분들 수정 > 수정해봄.
2 게시글 내용 적당하게 들어가게 하기 > 게시판에서는 내용 안 넣을래 > 안 넣으면 이상한 것 같기도 하고
3 js
4 css나 js 파일들 쳐내고 병합하는 등등 > 일부완료
5 js가 html 잘 넣어줬는데 버튼 누르거나 개발자도구 띄우면 다른 부분은 안 사라지는데
게시글 부분이 사라지기도 한다. 캐시? 문제인 것 같다. 캐시방지라고 쳐서 나오는 글들 찾아봐야겠다.

[HIYOKA]

4 공지사항 시나리오
어떤 페이지에서 공지게시판을 누른다.

1 로그인이 되지 않았을 때와 일반사용자의 경우
|공지유저게시판으로 들어간다.
|공지사항-유저 이용가능
|도중에 로그인했을경우 일반 사용자이면 공지유저게시판으로 돌아가고
|관리자일 경우 공지관리자게시판으로 들어간다.
||공지유저게시판에서 로그인했다는 걸 알려주기

2 관리자일 경우
|공지관리자게시판으로 들어간다. >수정, 삭제, 글쓰기 등 관리자 기능
|공지사항-관리자, 공지글쓰기, 공지사항수정 이용 가능
|공지사항-관리자에서도 수정, 삭제 가능하게 해주기.
|로그아웃 했을경우 공지유저게시판으로 돌아간다.

[JeeIn-Shin]

지금 필요한게 그럼
백엔드 단에서 게시글 관련 CRUD와, 검색 기능인거죠? 제가 놓친게 있으면 말해주세요.
공지 유저 게시판과 공지 관리자 게시판의 차이는 읽기만 가능하냐 , 등록 수정 삭제까지만 가능하냐 차이 맞죠?

[HIYOKA]

4 공지사항 시나리오 수정
views/notice 폴더에 html들을 넣는다.

notice-board.html 게시글들 보이는 게시판
|notice-board.js : 관리자의 경우 관리자 기능이 보이게 한다.
notice.html 개별 게시글
|notice.js : 관리자의 경우 관리자 기능이 보이게 한다.
notice-write.html 쓰거나 수정할 때
|notice-write.js : 관리자가 notice-board.html에서 수정 버튼과 글쓰기 버튼을 눌렀을 때를 구분하여
보여지도록 한다.
그 외 필요한 부트스트랩 연결

5 Data 흐름 시나리오

5-1 내가 작성했던 거 보고 흐름 적었음. > 생략
5-2 생각한 Data 흐름
notice-board.js
서버에서 첫 페이지에 해당되는 Data들만 가져와서
notice-board.html에 게시글들이 보여지게 한다. R
이후 페이지네이션에서 버튼을 누르면 그 해당 페이지 Data들을 얻어와서 게시글들이 보여지게 한다. R
수정을 누르면 어떤 것을 수정할 것인지 notcie-write.js가 알 수 있도록 한다.
삭제를 누르면 어떤 것을 삭제할 것인지 확실히 해서 서버에 삭제 요청을 보낸다. D
글쓰기를 누르면 notice-write.html에 가게 한다.

+검색 기능.. "제목, 작성자, 내용"중에서 하나를 선택하게 되어 있고 검색 내용과 함께 서버로 보내서
그 해당 Data들이 포함되는 게시글들이 뜨게 한다. R

notice.js
notice-board.html에서 notice-board.js를 통해 로컬스토리지에 어떤 게시글을 눌렀는지 변수를 저장하고
notice.js에서 로컬스토리지에서 그 값을 얻어와서 해당 게시글 Data를 서버에서 얻어와
notice.html에 띄운다. R

notice-write.js
1 notice-board.html에서 글쓰기를 눌렀을 때
내용이 빈 notice-write.html을 띄운다.
글을 잘 써서 Data들을 서버에 보낸다. C

2 notice-board.html에서 수정을 눌렀을 때
notice- board.js에서 로컬스토리지를 통해 누른 게시글이 무엇인지 알려주고
notice-write.js에서 그 로컬스토리지 변수를 통해 해당 게시글 Data를 얻어온 다음
그 게시글의 내용이 들어가도록 notice-write.html이 보여지게 한다. R
이후 수정 후 Data 수정 요청을 서버에 보낸다. U

[HIYOKA]

[HIYOKA]

부트스트랩 예시 blog-grid.html

작성 예시1

작성 예시2

작성 예시3

작성 예시4

작성 예시5

[HIYOKA]

5 Data with json-server (feat.bootstrap)
notice-board
|아무래도 js가 데이터를 얻어오고 html까지 해주는데
|사라지는 이유는 캐시방지가 아니었던거 같다.
||음 그래도 캐시방지 해놔야 되겠지.
||인터넷에 한줄로 하는 거 있길래 그거 해놨는데 흠..
||<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
|아마도 내가 Data를 이상하게 다룬 듯
|좀 고치니까 먼가 사라지는 빈도가 줄어든거 같기도?
| <script src="../../public/js/functions.js"></script>
<script id="noticeboard" src="../../public/js/notice-board.js?v=<%= Math.floor(Math.random() * 1000000) %>"></script>
이렇게 두개만 남겨두니까 해결되었다.

notice
|애도 데이터 얻어오는 거 까지는 되고
|Uncaught TypeError: Cannot read properties of undefined
|제일 많이 보게 되는 이 에러가 뜨는데 안 뜨고 제대로 될 때가 적진 않단 말이지
|아마 함수 호출할 때나 함수 짜 놓은게 불안정한거겠지

notice-write
|원래 애 먼저 마무리 할려다가 위지위그? 에디터 부분이 읽기 어려워서
|수정할 때 작성일(date), 작성자(writer), 제목(title) 들어오는 거만 해놨다.
|내용(details)을 아직 안 넣어서 그런지 생각 내에서 문제는 없었다.

[JeeIn-Shin]

notice-board
정확하게 뭐가 사라진다는거야? 데이터?
데이터가 맞다면,

1. fetch를 통해서 데이터를 받아오고
2. createElement 로 html 객체를 만들어서
3. html 객체에 받아온 데이터를 넣은 후
4. append를 이용해 그 객체를 다시 html 전체에 붙이는 식으로 구상되니까
   이 흐름을 한번 찾아서 해볼래?

notice
Uncaught TypeError: Cannot read properties of undefined 이거에 대한 에러메세지 좀 올려줄래?
이게 DB쪽이랑 문제가 있는거일수도 있어서 확인해볼께

[HIYOKA]

bandicam.2023-03-01.12-55-29-512.mp4

문제가 되는 부분
notice 20초 32초

notice-board 38초