[Spring] 스프링 부트 STOMP 채팅 + 채팅방 구현 Ver.1

2023-10-27 1. 주요 빌드 정보 implementation 'org.springframework.boot:spring-boot-starter-websocket' implementation 'org.webjars:sockjs-client:1.1.2' implementation 'org.webjars:stomp-websocket:2.3.3-1' implementation 'org.springframework.boot:spring-boot-starter-thymeleaf' //순수 HTML 사용 시 불필요 implementation 'org.springframework.boot:spring-boot-starter-freemarker' implementation 'org.webjars.bower:boo..

• format_list_bulleted WEB/Spring
• · 2023. 10. 27.
• textsms

[JavaScript] textArea 자동 크기 조절 방법 (resize)

2023-09-22 1. 방법 숨겨진 textarea의 auto 설정으로 새롭게 입력받은 input 값에 따라 높이를 계산하고 이후 실제 textare에 적용한다. 실제 textarea에 바로 적용하지 않는 이유는 바로적용 시 auto 속성 값으로 인해 웹창에 스크롤도 같이 이동하기 때문이다.

• format_list_bulleted WEB/JavaScript
• · 2023. 9. 22.
• textsms

[Next.js] Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components. 오류 해결

2023-09-18 1. 방법 GetServerSideProps으로 데이터를 가져온 후 input에 데이터를 넣고 있었는데, 해당 데이터가 없을 경우 페이지 상에서는 오류가 나지 않지만 콘솔에서는 아래와 같은 오류가 발생하고 있었다. Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components. 위와 같은 오류가 발생시 데이터가 없을 경우 default로 넣어줄 값을 선언해 주면 해당 오류는 사라지게 된다. 아래와 같은 방법으로 값을 넣어주면 된다. value={userName || ''} 이렇게 데..

• format_list_bulleted WEB/Next.js
• · 2023. 9. 18.
• textsms

[JavaScript] contenteditable 붙여넣기 텍스트만 넣기

2023-09-14 1. 방법 contenteditable 을 이용한 태그에 붙여넣기를 하면 일반 텍스트가 아닌 html 형태로 들어가게 되는데 이를 일반 텍스트가 들어갈 수 있게 변경하는 방법을 알아보자. 위 코드는 해당 요소에 붙여 넣기 이벤트를 감지하고, 붙여 넣은 텍스트를 HTML 태그 없이 해당 요소에 삽입하며, 텍스트를 붙여 넣을 때 HTML 태그 속성을 포함하지 않도록 할 수 있다. 메인 이미지 출처 : 사진: Unsplash의Ori Song

• format_list_bulleted WEB/JavaScript
• · 2023. 9. 14.
• textsms

[HTML] img 태그 리소스 404 및 불러올 수 없을때 처리방법

2023-09-08 1. 방법 onError 키워드를 사용하면 현재 리소스가 존재하지 않았을 경우에 노출할 수 있는 이미지를 설정 할 수 있다. 메인 이미지 출처 : 사진: Unsplash의NEOM

• format_list_bulleted WEB/HTML
• · 2023. 9. 8.
• textsms

[JavaScript] 선택된 라디오 버튼만 checked로만들기

2023-09-07 1. 방법 prop 를 사용해 우선 해당 클래스의 버튼들을 checked false로 만든 이후 선택된 라디오 버튼만 checked 로 만들면 된다. Option 1 Option 2 Option 3 2. JQuery 가져오는 방법 https://seeminglyjs.tistory.com/525 [JQuery] 선택된 라디오 버튼만 checked 되게 설정하기 2023-09-07 1. 방법 prop 를 사용해 우선 해당 클래스의 버튼들을 checked false로 만든 이후 선택된 라디오 버튼만 checked 로 만들면 된다. Option 1 Option 2 Option 3 메인 이미지 출처 : 사진: Unsplash의David Clode seeminglyjs.tistory.com 메인..

• format_list_bulleted WEB/JavaScript
• · 2023. 9. 7.
• textsms