우선 12월 1일 디자인팀과 회의를 준비하던 도중 공지사항 탭에서 몇 가지 에러를 발견했다.
첫 번째,
내용탭에서 입력내용이 줄바꿈 없이 길어지면 자동 줄바꿈이 되지 않고 옆으로 늘려짐.
이를 해결하기 위해서
위의 코드로 수정해줬다.
우선 max-height: 200px;
출력 영역의 최대 높이를 설정한다. 이 값은 내용이 초과할 경우에 자동으로 줄바꿈이 되도록 한다. 우선 200px 로 설정을 했는데, 지금 상태로는 지장이 없는데 만약 나중에 이 부분에서 오류가 생길 가능성이 있다고 생각한다. 인지하고 있어야함.
overflow-y: auto;
길이가 영역을 오버했을 시에 세로 스크롤이 필요하면 자동으로 생기게 하는 기능이다.
auto 를 하면 원래는 없다가 필요할 때만 나오게 한다.
white-space: pre-wrap;
이 속성은 공백을 유지하면서 줄바꿈을 가능하게 한다.
추가로 웹상에서 스크롤바의 모양이 예쁘지 않아서 검색해보니
위의 css 코드를 통해 스크롤바의 디자인을 변경할 수 있었다.
위와 같이 깔끔해졌다.
그런데 만들고나서 생각해보니, 스크롤이 꼭 필요할까 의문이 들었고 그냥 전부 다 볼 수 있게해도 괜찮을 것 같았다.
그래서 max-height: 200px;
이 속성을 삭제하고, overflow-y: hidden;
이렇게 수정을 하니까 최종적으로 아래와 같이 한 번에 출력되었다. 굿!
두 번째,
댓글 입력시에 댓글 내용이 길어서 줄바꿈이 되면 댓글작성자가 적혀있는 영역이 밀리면서 간격이 좁아져
작성자의 이름이 세로로 눌림.
작성자 출력칸의 영역을 조금 더 확보해보려한다.
위 코드를 추가해서는 변화가 없다. 영역만 넓어진다.
밥을 먹고 한 숨 자고 일어났더니 영역을 조금 더 확보하려는 시도말고 아예 영역을 고정시켜야한다고 생각이 들었다.
어차피 작성자 이름은 3글자를 초과하지 않는다.
다음과 같이 writer 과 content 의 class 를 지정해줬고,
다음과 같이 코드를 짜주었다.
옆에 삭제버튼을 만들 생각이었기 때문에 100 % 를 채우지 않았다.
이렇게 하면 모바일 버전에서는 똑같이 눌리는 현상이 있어서 모바일 전용으로
위 코드도 추가해주었다.
원하는대로 구현 성공.
자 이제 댓글 삭제 기능을 구현해보자.
게시물 삭제와 같은 원리로 구현할 거다.
하지만 차이점이라고 함은 게시물 삭제 때는 이미 URL 로부터 게시물의 id 값을 받아놓은 상태이다.
결국 댓글도 삭제하고자 하는 해당 댓글의 id 값을 받아와서 그 id 를 DB 안에서 찾아서 타겟해서 지워야한다.
댓글의 id 값을 어떻게 찾으면 될까..
일단 당장 생각나는 방법은 게시물 수정때 이용했던 방법처럼 해당 댓글의 id 값을 댓글 주변에 띄워놓고
display:none; 으로 숨겨놓은다음 삭제할 때 그 값을 가져오는 방법이다.
근데 생각해보니 위처럼 굳이 하지 않아도 가능해보였다.
이처럼 a 태그를 만들어줬고, :id 자리에 해당 댓글 id 값을 바로 서버로 보낼 수 있다.
서버에 comment DB에 접근시켜서 해당 id 값을 삭제시키게 한 후에 redirect back 으로 그 상세페이지에 유지시키면 끝난다.
이제 공지사항 상세페이지에서 자기가 적은 글에만 수정 삭제할 수 있는 기능을 댓글에도 추가할 생각이다.
이렇게 구현해주었다. 간단했다.
위 대로 마무리를 했다가 아무대로 삭제 버튼이 눌렸을 때 "삭제 하시겠습니까? " 하는 재확인 팝업이 뜰 필요가 있다고 생각이 들었다.
근데 지금 방법으로는 nodejs 에서 javascript 를 이용해 confirm 함수를 이용할 방법이 없었다.
그래서 데이터를 전달하는 방식을 ajax 를 이용해 바꾸기로 했다.
코드를 위와 같이 수정했다.
a 태그는 유지했지만 따로 접속하는 route 를 없앴다. #을 넣어주면 그냥 현재 페이지로 이동하는 거라고 한다.
data-comment-id 는 데이터속성을 활용한 것인데 html 요소에 추가적인 정보를 저장할 수 있는 표준화된 방법이라고 한다.
위와 같은 함수를 만들었는데,
우선 event.preventDefault();
이벤트의 기본 동작을 중지시킨다. 여기서는 a태그를 중지시킨다.
var commentId = event.target.getAttribute('data-comment-id');
클릭된 요소의 id 값이 data-comment-id 에 저장되어 있을 것인데 event.target 으로 이벤트가 발생한 곳을 (클릭이 된 부분을) 타겟하고 여기서 getAttribute 를 통해서 data-comment-id 에 저장된 값을 불러와서 commentId 변수에 저장시킨다.
결국 댓글의 id 값을 commentId 에 저장시키는 것이다.
var confirmDelete = confirm('댓글을 삭제하시겠습니까?');
위 문구에서 confirm 이 눌리면 그 값을 변수에 저장시킨다. ( 추측이지만 1이 저장되지 않았을까? )
확인창을 사용하는 코드인데, confirm 이 눌리면 window.location.href 를 통해서 다음 url 로 데이터를 전달한다.
이렇게 전달받으면 서버측에서 :id 를 통해 mongoDB 의 해당 데이터를 타겟할 수 있다.
서버측에서 이처럼 마무리 해줬다. 잘 해결되었다.
이렇게 게시물 삭제 기능에서도 확인창 기능을 똑같이 만들어주었다.
input 태그에서 입력을 할 때 자동완성 되는 기능이 있는 것이 불편했다.
검색을 해보니
autocomplete="off"
속성을 넣어주면 자동완성이 되지 않았다.
전에 로그인이 되었는지 확인하고 로그인이 되어있지 않다면 접근을 막고 로그인페이지로 이동시키는 기능을 하기 위해
다음과 같은 미들웨어를 만들어서 적용했었다.
하지만 그냥 이동시키는 것 보다 로그인이 필요하다는 팝업을 띄우고 싶었다.
근데 문제가 있었던게 저렇게 login.ejs 로 message 를 담아서 렌더링 시킨 후에
login.ejs 에서 alert('<%=message%>') 코드로 출력시키면 해당 접근으로는 message 변수가 들어있으니 에러가 생기지 않았는데 다른 접근방식을 통하지 않고 바로 로그인페이지로 들어가면 message 변수의 값이 비어있어서 에러가 발생했다.
그런 문제상황을
다음과 같이 message 변수에 값이 들어있을 때만 실행될 수 있도록 코드를 바꿨다.
따로 login-need.ejs 파일을 만들어서 관리했었는데 위와 같이 하면 login-need.ejs 파일은 필요가 없다.
이런 상황에 코드를 어떻게 짜야하나 고민을 많이 했는데 이와 같이 if 문을 사용하면 될거같다.
실수했다. message 데이터 값이 들어가있지 않은 상태에서 접근을 해봐서 확인을 했다고 판단했는데 위 상태로 재배포를 해보니 에러가 났다. 내일 개발일지에서는 바로 이거부터 수정해야겠다.
'Project > 축구모임 홈페이지개발' 카테고리의 다른 글
| [축구모임 홈페이지개발] 12/05 개발일지 Nodejs / 공지사항탭 페이지네이션, 검색기능 (2) | 2023.12.06 |
|---|---|
| [축구모임 홈페이지개발] 12/04 개발일지 Nodejs / 변수 렌더링 유무 확인, 메뉴바 구현, app.use 사용, 네비 기능 구현 (2) | 2023.12.04 |
| [축구모임 홈페이지개발] 12/01 개발일지 디자인 (0) | 2023.12.03 |
| [축구모임 홈페이지개발] 11/30 개발일지 Nodejs (2) | 2023.12.01 |
| [축구모임 홈페이지개발] 11/29 개발일지 Nodejs (0) | 2023.11.29 |