최신 글
-
[Spring/JS] Websocket을 이용한 실시간 QnA 채팅방 만들기
기존까지 QnA 웹을 만들어 사용중이었는데,추가로 채팅방 처럼, 실시간 소통도 가능하면 좋겠다는 생각이 들었다. 실시간 채팅을 위해 사용할 기술 스택은 다음과 같다.구성 요소선택 기술이유메시지 브로커STOMP over WebSocket (Spring)별도 외부 브로커 없이 내장으로 가능실시간 데이터 저장소Redis Sorted Set개별 메시지 TTL 처리에 최적화사용자 식별JSESSIONID (HTTP 세션)새로고침해도 닉네임 유지보안/인증Spring Security 세션 기반관리자 페이지와 자연스럽게 연동 WebSocket과 STOMP WebSocket은 한 번 연결이 맺어지면 서버와 클라이언트가 양방향으로 자유롭게 데이터를 주고받을 수 있는 통신 프로토콜이다.채팅처럼 실시간성이 중요한 기능을 만들..
2026.07.08
-
[CSS/JS] 티스토리 블로그에 태그 필터링 및 수학식 기능 추가하기
개발 블로그를 하다 보니, 글이 쌓일 수록 카테고리만으로는 불편하다고 생각이 들었다.따라서 특정 태그(사용 언어)로 묶어서 보는 기능을 만들어 보려 한다. 또한, 수학식 표기나 추가 기능등을 만들어 보도록 하겠다. 태그 필터링 기능 먼저 게시글에 [Java], [Python]처럼 분류 태그를 달고,태그 클릭 시, 해당 글만 필터링해서 띄워주는 걸 목표로 하려고 한다. 먼저 대분류에 언어별/공부별로 스위칭 기능을 만들고function switchTab(type) { document.querySelectorAll('.tab-item').forEach(tab => tab.classList.remove('active')); document.getElementById('tab-' + type).cla..
2026.07.08
-
[Python] Home Assistant Smarthings IR 플러그인 제작
저번 게시글에서 Home Assistant 기본 구축과 더불어, 기본적인 대시보드 설정을 해주었다.이번엔, Smartthings 플러그인이 커버하지 못하는 Galaxy Home mini의 IR 센서 동작들을 구현해보겠다. Smartthings Extra 플러그인을 제작하기전에 벤치마킹 하기 좋은 플러그인을 발견했다.Smartthings Extra라는 플러그인이었는데.Smartthings 공식 플러그인의 OAuth 인증정보를 그대로 활용하는 방식으로 동작했다.https://github.com/mik-laj/ha_smartthing_extra GitHub - mik-laj/ha_smartthing_extraContribute to mik-laj/ha_smartthing_extra development b..
2026.07.08
-
Home Assistant 구축 및 기기 연동
필자는 애플 기기를 사용하며 스마트홈을 사용하다 보니Homebridge를 이용해 스마트홈을 구축을 했었다.하지만, 타 플랫폼 대비 폐쇄적인 구조에 한계를 느꼈다. 따라서 새로운 플랫폼을 위해 Home Assistant를 찾아보았다.Homebridge는 HomeKit 미지원 기기를 억지로 끼워넣는 도구에 가까웠다면,Home Assistant는 모든 것을 자유롭게 통합할 수 있기 때문에 채택했다.항목HomebridgeHome Assistant OS (HAOS)지원 플러그인JavaScript(Node.js) 기반 플러그인만 가능Python 기반 통합구성요소 + Node-RED 등 다양한 확장애드온/추가 서비스별도의 컨테이너나 외부 프로그램 필요공식 애드온 스토어에서 원클릭 설치 가능자동화 기능매우 제한적 (주..
2026.07.07
-
[CSS] QnA 웹 만들기, CSS로 웹 디자인과 서버 배포하기 - 7
지난 작업들 까지 모든 기능과, 서비스 화면까지 만들었다.아직은 투박한 HTML 화면에 불과하므로, 스타일시트를 활용해 디자인을 입히고완성된 프로젝트를 실제 개발 서버에 배포하는 작업을 해보도록 하겠다. 디자인 적용 먼저 디자인은 어떻게 할까 구상하다.내가 좋아하는 Apple의 디자인 철학을 따르려고 한다.그렇기에, 만들기 전에 공통적으로 필요한 원칙을 정했다.원칙설명적용 예서체시스템 폰트 우선, 가독성 극대화font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display'여백8px 단위의 일관된 간격 시스템카드 내부 24px, 목록 간격 12px색상무채색 베이스 + 블루 포인트배경 #f5f5f7, 포인트 #007aff그림자얕고 부드러운 입체감box-s..
2026.06.06
-
[Java/JS] QnA 웹 만들기, Thymeleaf로 서비스 화면 구현 - 6
기능적인 구현은 다 완료했으니이번엔 실제 유저들이 사용할 수 있는 화면을 만들어야한다.API만으로도 모든 기능이 동작하지만, Thymeleaf를 이용해 간단하게 만들어 보려고 한다. 비록 필자는 Vue나 React같은 프론트엔드 프레임워크에 익숙하지만, Spring Boot와 한번에 작동하는 엔진을 연습겸 써보기 위해 채택했다. Thymeleaf 이해 타임리프는 HTML 기반의 서버사이드 템플릿 엔진이다.주요 특징으로는 다음과 같다.특징설명th:text태그 내부 텍스트 대체th:each반복문 (Java의 for-each)th:if / th:unless조건부 렌더링th:object / th:field폼 바인딩 (Spring과 연동)layout:decorate레이아웃 템플릿 상속 여기에 추가로 Spring..
2026.06.05
-
[Spring] QnA 웹 만들기, 이메일 알림과 Redis Pub/Sub 구현 - 5
지난번 작업까지 해서, 실질적으로 돌아가는 API 기능들은 전부 완성했다. 하지만 질문자는 답변을 달고, 사이트를 수시로 확인하지 않기 때문에관리자가 답변을 달았을 시, 이메일로 알림을 받는 기능이 필요하다고 느꼈다. 따라서, 이메일 발송은 Gmail SMTP를 이용하기로 하고,발송은 HTTP 요청/응답 사이클과 분리해 비동기로 처리해야 빠르게 응답 할 수 있으니Redis의 Pub/Sub을 활용하여 구현해보도록 하겠다. Gmail SMTP 설정 Gmail은 2024년부터 일반 비밀번호로 SMTP 인증이 불가능하므로,2단계 인증 활성화와 함께 앱 비밀번호 발급이 필요하다. 먼저, 구글 계정 관리에 접속https://myaccount.google.com/ Google 계정Google 계정에서 정보, 활동..
2026.06.05
-
[Spring] QnA 웹 만들기, Spring Security와 JWT 인증 - 4
이제 기능 구현으로 API를 전부 완성했으니이제 관리자 기능을 위한 인증·인가 시스템을 붙여야 한다. 인증과 인가 Spring Security를 이해하려면 인증과 인가의 차이를 알아야 한다.구분인증 (Authentication)인가 (Authorization)질문"당신은 누구인가?""당신은 이 작업을 할 권한이 있는가?"QnA 웹 예시관리자 로그인 (아이디/비밀번호 확인)/api/admin/** 접근 시 ADMIN 역할 확인Spring SecurityAuthenticationManager, UserDetailsService@PreAuthorize, authorizeHttpRequests Spring Security 구현 실제 구현에 앞서 Spring Boot 4버전에서 개발중이므로Spring Secu..
2026.06.05
