- [ Study/SSR ][SSR] 썸네일 미리보기 기능2024-09-18 20:41:16원래 화면이다. 여기서 제목 input 태그 밑에 썸네일을 추가하면 미리보기를 할 수 있고 저장 후 DB에 썸네일의 경로를 저장 및 로컬에도 이미지를 저장할 것이다. 그리고 게시글 불러 올 때 썸네일도 같이 출력되게 끔 만들려고 한다. 일단 input 폼을 조금 수정했다. WRITE TITLE THUMBNAIL --> CANCEL WRITE 그리고 이미지 들어갈 태그에 css를 먹여놨다. 처음부터 img 태그가 보이면 이미지가 없기 때문에 엑박이 뜬다. 그래서 처음엔 display를 none으로 ..
- [ Study/SSR ][SSR] SimpleMDE 적용하기2024-09-18 20:36:10이전에 마크다운 라이브러리를 2번 정도 사용했었는데 2번 다 방법이 달랐다. 첫번째는 수작업으로 textarea에 마크다운 문법만 붙여넣으면 오른쪽에 만들어둔 div에 marked 라이브러리 붙여서 실시간으로 마크다운 파싱해서 보여줬었고.. 두번째는 Toast UI Editor를 적용시켰는데 커스터마이징 할 수 있는 기능들은 SSR에서는 지원이 안되길래 이번에 SimpleMDE로 갈아탔다.1. SimpleMDE CDN 어디다 적용시켜야 하는지 모른다면 검색해보자.. 나는 thymeleaf에서 제공하는 layout 라이브러리로 공동 레이아웃을 따로 관리하고 있기 때문에 head.html에 적용시켜놨다.2. PrismJS CDN얘는 소스코드를 꾸며주는 역할을 한다. 보통 티스토리 블로그에서 문법 강조시키는...
- [ Study/Troubleshooting ][Troubleshooting] SSL 인증서 및 도메인 발급 이후 HTTP 기본 페이지로 나오는 문제2024-09-14 00:45:51공인 IP:포트로 접근했을 때는 잘 됐었다. 그러나 SSL 인증서 발급하고나서부터 기본 페이지가 나오는 게 아닌가.. 처음엔 설정 파일에서 documentRoot 경로를 dockerfile에서 작성했던 경로로 똑같이 바꾸는 바보 짓도 했었는데.. 생각해보니 공인 IP:Port로는 잘나오고 SSL 인증서 발급하자마자 안됐다? 프록시 쪽 문제라는 생각이 들었고 이 전에 Rocky Linux에서 SSL 인증서 발급받을 때 어떻게 했는지 찾아보니 아래 문구가 더 적혀져 있었다. ProxyPreserveHost OnProxyPass / ${라즈베리파이 IP 주소 }:${컨테이너 포트 }/ProxyPassReverse / ${라즈베리파이 IP 주소 }:${컨테이너 포트 }/ 이 부분을 추가하자. 파일은 /etc/a..
- [ Study/Troubleshooting ][Troubleshooting] 주소 [localhost]와(과) 포트 [8005]에, 서버 셧다운 소켓을 생성하지 못했습니다. (base 포트 [8005], offset [0])java.net.BindException: Address already in use: JVM_Bind2024-08-08 09:50:46이슈 발생 상황은 Windows에서 Tomcat을 돌릴 때(startup.bat을 실행했을 때) cmd 창이 바로 꺼지며 실행되지 않는 상황이였다. 에러 로그는 아래와 같다.08-Aug-2024 09:33:10.755 심각 [main] org.apache.catalina.core.StandardServer.await 주소 [localhost]와(과) 포트 [8005]에, 서버 셧다운 소켓을 생성하지 못했습니다. (base 포트 [8005], offset [0]) java.net.BindException: Address already in use: JVM_Bind at java.net.DualStackPlainSocketImpl.bind0(Native Method) at ja..
- [ Study/SQL ][SQL] DBeaver + PostgreSQL 설치 및 연동2024-08-06 22:20:52회사에서 투입된 프로젝트에서는 PostgreSQL을 쓴다고 한다. 문법이 조금 다른 것 같아서 공부를 해야겠다 싶어 끄적끄적..😶🌫️DBeaver - https://dbeaver.io/download/Windows - Windows(installer) 클릭PostgreSQL - https://www.enterprisedb.com/downloads/postgres-postgresql-downloads운영체제에 맞게 클릭한다. 나는 Windows이므로 Windows x86-64를 다운로드 받았다. 버전은 알아서 정하자.✅ PostgreSQL의 기본 포트는 5432이다. DBeaver - Database Navigater - 오른쪽 클릭 - Create - Connection PostgreSQL 클릭 처..
- [ Study/Javascript ][Javascript] 버튼 클릭 시 주변 노드 text 가져오기2024-07-16 12:23:45댓글 수정 버튼을 클릭하면 클릭한 버튼 아래에 있는 text를 가져와 모달 창의 textarea 요소에 띄워야했다.1. HTML1. 모달창 알림 취소 확인 2. 댓글 수정 버튼 수정 삭제 ..
- [ Study/Troubleshooting ][Troubleshooting] the password has expired2024-07-11 00:01:40sql developer에서 패스워드 만료됐다고 접속이 안됐다.windows 기준으로 cmd에서 아래와 같이 작업해주면 된다. C:\Users\PC>sqlplus conn as sysdbaSQL*Plus: Release 11.2.0.1.0 Production on 화 7월 9 16:49:06 2024Copyright (c) 1982, 2010, Oracle. All rights reserved.비밀번호 입력:다음에 접속됨:Oracle Database 11g Enterprise Edition Release 11.2.0.1.0 - 64bit ProductionWith the Partitioning, OLAP, Data Mining and Real Application Testing optionsSQL> a..
- [ Study/HTML & CSS ][HTML & CSS] 미디어 쿼리 @media2024-06-25 00:14:25어제 배포에 성공하면서 휴대폰으로 내가 만든 페이지를 들여다보니 pc 해상도에 맞춰진 레이아웃이 휴대폰 해상도에 그대로 옮겨져있어 클릭하고 움직일 때 너무 불편했다. 그래서 오늘 간략하게 적용한 미디어 쿼리를 메모할 겸 잠깐 남겨놓는다.1. 미디어 쿼리란?뷰포트(viewport)의 크기에 따라 서로 다른 레이아웃을 생성할 수 있게 도와준다.반응형 웹싸이트를 구현할 때 많이 사용된다.미디어 유형과 미디어 특성으로 구성되는 참 / 거짓의 값을 가지는 논리식이다.2. 미디어 쿼리 적용 예시/** 최대 넓이가 767px 일 때 적용된다. (~ 767px) **/@media (max-width: 767px) { body { width: 100%; } nav { width: 100% !important;..
- [ Study/Troubleshooting ][Troubleshooting] Spring war 배포 후 관련 이슈 모음2024-06-22 17:07:001. Access denied for user ‘root’@’localhost’ (using password: YES)데이터베이스 연동이 안된다? 대체 왜 안될까하다가 내 프로젝트에 데이터베이스 연동해놓은 부분을 찾아봤다. url 주소가 127.0.0.1로 되어있는데 이게 localhost니까 리눅스에서는 호스트 네트워크로 포트 포워딩한 192.168.56.103이라는 IP 주소로 접속하려고 시도하려나? 싶어서 127.0.0.1을 지우고 cmd에서 ifconfig하면 나오는 사설 IP 주소로 변경했고 이후 접속이 잘됐다.2. Host ‘IP Address’ is not allowed to connect to this MariaDB serverUSE mysql;SELECT HOST, USER, PLUGIN..
- [ Study/전자정부프레임워크 ][전자정부프레임워크] globals.properties 적용하기2024-06-22 11:40:35사진 게시판에 사진 등록하는 로직에서 개발 환경이랑 배포 환경의 디렉토리 구조가 달라 사진이 화면에 출력안되는 이슈가 있었다. 로그를 확인해보지 않아도 학원에서 리액트 반이랑 협업할 때 자연스레 알게된 점이긴 했지만.. 여튼 spring boot는 profile을 적용하면 됐었는데 전자정부프레임워크는 globals.properties를 적용한다고 한다! 환경에 따라 보다 효율적으로 관리하기 위해 globals.properties를 적용시켜보았다.1. classpath에 globals.properties 추가 dev - windowsprod - linux(rocky linux) 나는 resources 내에 생성했으며 globals.properties는 파일 내에 active=dev 혹은 active=pro..
- [ Study/Troubleshooting ][Troubleshooting] Unable to process parts an no multi-part configuration has been provided2024-06-20 23:54:59oracle VM virtualbox를 통해 서버 구축 후 war 파일을 배포했다. 이후 해당 싸이트에서 글 작성 테스트 중 500 에러가 발생했다. 게시글 등록 시 dto와 multi-part를 같이 담아 보내는데(캡처에서는 다 안보이지만 밑에 첨부파일 등록하는 부분이 있다) multi-part 설정 부분이 제공되지 않았기 때문에 발생하는 에러라고 한다. 따라서 아래와 같이 ../conf/context.xml을 수정한다. ~ 수정 전 ~ ~ 수정 후 ~ context.xml 수정 후 'systemctl restart tomcat' 해주고 다시 게시글을 작성하니 정상적으로 작동하는 것을 확인할 수 있었다. 참고 레퍼런스https://powerku.tistory.com/12https://lunker-emp..