반응형

FE/html 40

첨부 파일 UI

첨부 파일 파일을 선택해 주세요. 파일을 선택하면 input에 파일명이 출력되는 함수다. 결과는 아래와 같다. 참고 👇 https://www.delftstack.com/ko/howto/javascript/javascript-filename-extension/ JavaScript에서 파일 이름 확장명 가져오기 이 튜토리얼은 자바스크립트에서 파일 확장자를 얻는 방법을 나열합니다. www.delftstack.com https://kyuhyuk.kr/article/spring-boot/2020/07/22/Spring-Boot-JPA-MySQL-Board-Post-File-Upload-Download [Spring Boot] 게시판 구현 하기 (4) - 파일 업로드 & 다운로드 앞의 글 에서 글을 수정하고 삭제하..

FE/html 2022.07.31

[Thymeleaf] 게시글 상세보기에서 댓글 개수 출력

Comments 를 추가했다. 댓글들이 들어있는 commentList 리스트의 길이를 구한다. 참고 👇 https://dev-coco.tistory.com/132 Spring Boot JPA 게시판 댓글 작성 및 조회 구현하기 게시판에서 댓글은 없어선 안될 중요한 부분이라고 생각한다. 그래서 오늘은 게시판의 댓글 기능을 구현해보려 한다. 1. Entity 1-1. Comment @Builder @AllArgsConstructor @NoArgsConstructor @Getter @Table(n.. dev-coco.tistory.com https://solbel.tistory.com/1401 [thymeleaf] 타임리프 리스트/배열의 크기 구하는 방법 [thymeleaf] 타임리프 리스트/배열의 크기 구하..

FE/html 2022.07.07

[JS] 댓글 작성/수정/삭제 후 비동기 방식으로 출력

3가지 방법 중 3번 방법을 사용했다. 1. 기존 댓글 리스트를 비운후 다시 DB에서 해당 글의 댓글 리스트를 가져온다. 반복문으로 하나씩 출력 https://dawitblog.tistory.com/129 AJAX로 댓글달기 기능 구현 댓글 기능을 구현해야 하는데, 댓글을 달거나 삭제할 때마다 페이지를 새로고침한다면 자원 낭비일 것이고, 사용자 입장에서도 별로 좋은 느낌은 받지 못한다. 그래서 AJAX를 사용해서 비동기(새 dawitblog.tistory.com 2. 댓글 작성에 성공하면 location.href로 요청을 보내기 댓글 리스트 부분만 갱신하면 되므로 이 방법은 비효율적이다. https://www.youtube.com/watch?v=ZzWXzj9vg44&t=1217s 3. 기존 댓글 테이블을..

FE/html 2022.07.06

수정 버튼 클릭시 알림창을 띄우고 요청 보내기

🎶 코드 수정 전 function updatePost(){ let id=document.getElementById('postId').value; let isUpdate=confirm("정말 수정하시겠습니까?"); if(isUpdate){ window.location.href="/post/detail/"+id; } } window.location.href는 GET방식으로 요청을 보낸다. 하지만, 내가 작성한 코드는 PUT방식으로 요청을 받아야했다. 🎶 코드 수정 후 function updatePost(){ let id=document.getElementById('postId').value; let isUpdate=confirm("정말 수정하시겠습니까?"); if(isUpdate){ return true; ..

FE/html 2022.06.09

[Bootstrap] class="invalid-feedback"이 작동하지 않을 때

제목 에러 메시지 유효성 검사에 실패한 필드의 메시지를 출력하려니까 출력이 안된다. ✨ 해결 첫 번째 방법) text-danger를 사용하니까 잘 동작한다. 두 번째 방법) We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with .is-invalid and .is-valid. Note that .invalid-feedback is also supported with these classes. referenced by : https://getbootstrap.com/docs/5.0/forms/validatio..

FE/html 2022.06.06

[Bootstrap] 부트스트랩의 아이콘 사용하기

https://icons.getbootstrap.com/ Bootstrap Icons Official open source SVG icon library for Bootstrap icons.getbootstrap.com 여기에서 다양한 아이콘을 사용할 수 있다. 예시) 위의 말풍선 아이콘을 사용해보겠다. 1. head 태그에 위의 링크를 추가(그래야 아이콘이 뜬다.) Comments 2. Icon front를 클래스에 다음과 같이 추가했다. 🎶 결과 참고 👇 https://velog.io/@saichoiblog/how-to-use-bootstrap-icon 부트스트랩 아이콘 활용하는 방법 부트스트랩 아이콘을 사용하여 이벤트 넣는 방법 velog.io

FE/html 2022.06.02

[Error] 부트스트랩 dropdown이 안 될 때

dropdown을 클릭해도 목록이 뜨지 않았다. head에 아래 스크립트를 추가해서 해결 참고 👇 https://getbootstrap.kr/docs/5.0/components/navbar/ 내비게이션 바 Bootstrap의 강력하고 반응형적인 내비게이션 헤더, 내비게이션 바의 문서와 예. 콜랩스(collapse) 플러그인 지원을 포함한 브랜딩, 내비게이션 등의 지원이 포함되어 있습니다. getbootstrap.kr https://www.studytonight.com/bootstrap/solvedbootstrap-dropdown-not-working [Solved]-Bootstrap dropdown not working - Studytonight www.studytonight.com

FE/html 2022.04.01

[Thymeleaf] 글 작성자에게만 수정, 삭제 버튼 보이기

취소 수정 삭제 버튼도 이런 식으로 button 태그를 쓰면 된다. 작성자와 로그인한 유저 아이디를 비교한다. username 변수를 버튼 태그 안에서 쓰면 작동이 안 된다. (div에 쓴 이유) 참고 👇 https://okky.kr/article/873095 OKKY | 타임리프 + 시큐리티질문입니다... 현재 로그인한 사람 게시글 쓴 사람 일 경우 삭제버튼을 추가해주고 싶은데 구글링을 해봐도 잘 모르겠어서 질문합니다 현재 로그인한 사람 정보는 이걸로 값을 얻어 올 수 있습니다. sec:authent okky.kr

FE/html 2022.03.29
반응형