JS

💎 React Component와 클래스형, 함수형 컴포넌트 💡 React 컴포넌트는 React 애플리케이션의 구성 요소입니다. 컴포넌트는 재사용 가능하도록 만들어져 있으며, UI를 작은 조각으로 나누어 관 리할 수 있습니다. React 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트로 나뉩니다. 클래스형 컴포넌트는 React.Component 클래스를 상속받아 구현하며, 함수형 컴포넌트는 함수로 구현합니다. 컴포넌트는 다른 컴포넌트를 포함할 수 있으며, 부모-자식 관계를 가집니다. 부모 컴포넌트는 자식 컴포넌트에게 props라는 속성을 전달할 수 있습니다. 자식 컴포넌트는 props를 통해 전달받은 값을 사용하여 UI를 렌더링합니다. 📣 클래스형 컴포넌트 💍 클래스형 컴포넌트 만들기 1. Componen..

원인 : Vscode 를 통해 HTML 파일로 작업한후 jsp 파일로 변경할때 발생한 문제이다. 2개의 jsp파일에 같은 js를 적용시켰었는데 다른부분은 문제가없었지만 변수로 등록한 const toggleButtons = document.querySelectorAll('.td'); 이 변수가 중복으로 작성되어 실행이안된다는는 오류이다. 해결 : 2개의 js를 분리시키거나 중복되는 변수를 제거해주면 된다!!

📣 링크 📞 JSP, JS [ Spring ] 채팅 기능구현 - JSP JS 📣 링크 📞 JSP, JS https://mungwang.tistory.com/entry/Spring-%EC%B1%84%ED%8C%85-%EA%B8%B0%EB%8A%A5%EA%B5%AC%ED%98%84-JSP-JS 📞 ChattingController https://mungwang.tistory.com/entry/Spring-%EC%B1%84%ED%8C%85%EA%B8%B0%EB%8A%A5%EA%B5%AC%ED%98%84-Contr mungwang.tistory.com 📞 ChattingController [ Spring ] 채팅 기능구현 - Controller 📣 링크 📞 JSP, JS https://mungwang.tisto..

💎 pom.xml / servlet-context.xml 추가 📣 pom.xml - 채팅기능을 구현할때 pom.xml에는 크게 ↓ 3개 라이브러리를 추가해주면된다. com.fasterxml.jackson.core jackson-databind 2.14.2 org.springframework spring-websocket ${org.springframework-version} com.google.code.gson gson 2.9.0 📣 servlet-context.xml - pom.xml에 추가하면서 websocket이 생겼을거다 체크박스를 체크해준다. - servlet-context.xml에 source부분에 ↓ 코드 추가 📣 TestWebsocketHandler 클래스 만들어보기 public class..

💎 Console ★★ 템플릿 리터럴( template literal ) ★★ - js내에 '역따옴표(백틱)' 을 사용하면 ${} 표현식을 쓸수있고 결과는 문자열로 인식한다 장점 : 기존 문자열 내부에 표현식을 추가하려면, 문자열을 따옴표로 분리한후 + 연산자로 하나씩 연결해줘야했지만 템플릿리터럴 즉 백틱을 사용하면 편리하고 가독성이 좋게 작성할수있다. 💎 Jsp ${boardName} 썸네일 × 업로드 이미지 × × × × 등록 💎 JS // img 5개 const preview = document.getElementsByClassName("preview"); // file 5개 const inputImage = document.getElementsByClassName("inputImage"); // ..

🥇 VS-Code [ jsp ] 📺 JSP 본문 코드 🥈 VS-Code [ js ] // 좋아요 버튼이 클릭 되었을 때 const boardLike = document.getElementById("boardLike"); // 로그인 여부 검사 boardLike.addEventListener("click",e =>{ if(loginMemberNo == ""){ alert("로그인한후 이용해주세요"); return; } let check; // 기존에 좋아요 X(빈하트) : 0 // 기존에 좋아요 O(꽉찬하트) : 1 // contains("클래스명") : 클래스가 있으면 true, 없으면 false if(e.target.classList.contains("fa-regular")){ // 좋아요 X (빈하트..

💎 Console 📢 location.pathname => '/board/1/2001' 📢 location.pathname.replace ("board", "board2") => '/board2/1/2001' - replace : board => board2 로 바꾸는 함수 📢 location.pathname.replace ("board", "board2") + "/update" => '/board2/1/2001/update' 📢 location.search => '?cp=1' 🎈 최종으로 원하는 주소는 '/board2/1/2001/update?cp=1' 이기때문에 💎 Jsp 📢 enctype = "multipart/form-data" : 제출 데이터 인코딩 X 🔑 파일 제출은 가능 🔑 MultiPart..

🥇 VS-Code [ jsp ] 📺 JSP 본문 코드 👌 Spring을 통해 수행한 작업을 map 담아 jsp에 넘겨주어 저장된 값을 셋팅 - / 👌 boardName 값을 얻는방법 1), 2) 똑같은 값 - 1) - 2) 게시판 이름 글번호 제목 작성자 작성일 조회수 좋아요 게시글이 존재하지 않습니다. ${board.boardNo} 요청을 했는데 원하는 메소드가 실행이 되지않는다. - 해결방법 : @PathVariable 지정 시 정규 표현식 사용 -> { K : 정규표현식 } -> "{boardCode:[0-9]+}" : boardCode 는 1자리이상 숫자 📺 BoardController 📺 BoardService 📺 BoardServiceImpl - 게시글 목록 조회를 할때에는 1~4번 의 방식으..

🥇 VS-Code [ jsp ] 📺 JSP 본문 코드 ${board.boardTitle} - ${boardName} ${board.memberNickname} ${board.likeCount} 작성일 ${board.boardCreateDate} 마지막 수정일 ${board.boardUpdateDate} 조회수 ${board.readCount} imgaeList에 썸네일이 있다면 조회 되었을 때 IMG_ORDER가 0인 이미지가 imageList[0]에 저장 되었을 것이다. --%> 썸네일 다운로드 업로드 이미지 다운로드 ${board.boardContent} 수정 삭제 목록으로 🥈 VS-Code [ js ] - 추가 적인 JS 작업은 필요하지 않고 바로 Spring으로 작업으러 넘어가면 된다. 🥉 Spr..

🥇 VS-Code [ jsp ] 📺 JSP 본문 코드 x 이미지 선택 변경하기 이메일 로그인 회원 이메일 가입일 로그인 회원 가입일 📺 기본 브라우저화면 🥈 VS-Code [ js ] 📺 JS 코드 ( 추가, 변경, 삭제 ) // 프로필 이미지 추가 / 변경 / 삭제 const profileImage = document.getElementById("profileImage"); // img 태그 const deleteImage = document.getElementById("deleteImage"); // x 버튼 const imageInput = document.getElementById("imageInput"); // input태그 let initCheck; // 초기 프로필 이미지 상태를 저장하는 변..