전체 글

💻 시작하며요즘 개발하는 모던 웹 페이지에서 테마 기능을 빼놓을 수 없다.따라서 새로운 프로젝트에서도 테마 기능을 넣어보려고 한다. 테마 정보를 어디에 기록하면 좋을까 생각하다가 여러가지 이유로 글 제목처럼 피니아 스토어에 기록해야겠다는 생각이 들었다. 🛠️ 요구사항테마 기능을 구현할때 단순히 브라우저나 기기의 설정을 따라가기만 해도 좋지만 그와는 별도로 사용자 지정도 가능하게 하고 싶어서 요구사항을 비교적 복잡하게 지정했다.기본적으로 기기의 설정에 따라 설정되어야 함사용자가 테마를 변경시 기기의 설정과 별개로 동작해야 함테마 정보는 저장되어 있다가 다시 접근할때 복원되어야 함.테마를 변경할때 새로고침 등의 액션 없이 즉각적으로 반영되어야 함. ← 피니아를 사용하게 된 이유다.라이트 / 다크 모드 뿐..

💻 요즘 맥북을 사용하기 시작했다 내 맥북은 예전 모델인 M1 맥북프로 13인치다. 좀 된 모델이지만 성능상 부족한게 없고 (모니터 크기는 좀 모자라긴 하다) 개인적으로 터치바를 좋아해서 이 모델을 고수하고 있다. 무엇보다 잘 안 쓰니 새로 살 필요가 없었다 🤣 한참 동안 안쓰던 맥북을 요즘 들어 꺼내서 사용하고 있다. 그러다보니 (일이 하기 싫어지면) 뭔가 이것저것 업그레이드 하고 싶다는 욕심이 자꾸 생긴다. 사람들이 영문 키보드가 이쁘다고 일부러 사기도 한다는 건 예전부터 알고 있었는데 솔직히 관심이 가질 않았다. 고작 키보드가 뭐라고... 그런데 뭔가 업그레이드 할게 없나 하고 찾아보다가 영문 키보드를 다시 발견하게 됐고, 알리에서 만원 언저리에 키캡만 파는걸 발견했다. 살까말까 하다가 덜컥 구입...

🧐 다크모드에서 깜박하는 것 최근 웹 개발의 필수품 중 하나는 다크모드다. 여러가지 웹/앱을 사용하면서 다크모드가 지원되지 않는 서비스를 찾아보기 드물었다. 다크모드를 구현하는 방법에는 여러가지 기술이 있지만 공통점이 있다. 모든 컬러를 수동으로 작성해야 한다는 점이다. div, Button, Input, Textarea 등등 눈에보이는 모든 부분의 색상이 재정의 되어야 한다. 그러다보니 놓치기 쉬운 부분이 있는데 바로 스크롤바다. 브라우저에서 기본 css가 정의되어 있는 항목이 여럿 있지만 가장 대표적인 부분은 Input, Button, 스크롤 바 영역이다. 이 친구들은 브라우저마다 보이는 스타일이 다르다. 그래도 대부분의 서비스에서 input과 button은 스타일 요소로 취급해 디자인을 변경하여 모..

💻 왜 이런 프로젝트를 생각했을까? 나는 취미로 글을 쓴다. 글을 쓰다보니 영감이 시도때도 없이 찾아오게 되는데, 항상 이 영감을 어딘가에 메모해야 하는 불편함이 있었다. 그냥 단순히 아이디어 수준의 영감이면 괜찮다. 그렇지만 원고에 대해 퇴고 아이디어가 떠올랐을때가 항상 문제였다. 보통 집필 프로그램은 컴퓨터에 설치되어 작업하는 경우가 많으니 아이디어가 번쩍하고 떠올랐을때 그 컴퓨터 앞에 앉아있지 않으면 아이디어의 신선도가 떨어져버리게 된다. 그래서 구글독스처럼 온라인 기반의 웹 에디터가 있었으면 좋겠다는 생각이 들었다. 집필에 최적화된 UI와 모바일 지원까지 가능한 클라우드 기반의 웹 에디터. 상상만 해도 마음에 들었다. 🏷️ 프로젝트 이름을 정해보자 프로젝트 이름을 정하는건 항상 어려운 일이다. 변..

시작하며 이번에 새롭게 사이드프로젝트를 진행하면서 백엔드 언어로 코틀린을 선정했다. 자바랑 여러가지 차이가 있고 뭐가 장점이고 하는 의사결정 과정이 중요한건 아니고, 중요한건 코틀린으로 언어를 바꾸면서 기존에 만들었던 코드를 다시 짜야 한다는 것이다. JWT 발행이나 인증, Intercepter 같은 기능들이 만들어놓은지 몇년 됐으니 이참에 새롭게 갈아엎자고 생각했다. 기존에 [Spring Boot] 인터셉터 인증 처리 제외 어노테이션 만들기 이런 글을 올린 적이 있었는데 주석에 기재된 날짜를 보니 벌써 3년 전이다. 아까워 하지 말고 전부 버리고 새로 만들기로 했다. 기존에는 JWT 발행 라이브러리로 com.auth0/java-jwt를 사용했었는데 코틀린으로 언어를 변경하면서 io.jsonwebtoke..

이 글을 보는 분들이라면 다들 알겠지만 Log4J2 라이브러리에 취약점이 보고되었다. 참고: CVE-2021-44228 스프링부트는 기본적으로 기본 로그 시스템을 Log4J2로 변경했을때만 해당이 된다고 한다. 취약점에 대한 뉴스를 접하자마자 github의 pom.xml부터 확인했었고, 해당사항이 없는 걸 보고 안심한채 주말내내 불구경하는 마음으로 구경했었는데... 출근 후 확인해보니 디펜던시 걸린 다른 라이브러리에서 Log4J2를 사용하고 있었다. ./mvnw dependency:list | select-string -pattern log4j 나에게 사용하고 있는 라이브러리의 업데이트를 기다릴 시간따윈 없다. 강제로 버전을 올리는 방법을 알아보자 1. Maven 사용시 2.15.0 pom.xml의 pr..

크롬을 통해 개발을 하다보면 자연스럽게 개발자 도구의 network 탭을 볼 일이 자주 생기는데, 사용중인 여러가지 확장 프로그램들 요청이 함께 표시된다. 한 두개면 모를까 실제 요청한 xhr 개수보다 더 많은 요청이 쌓인다. 사용하는 확장 프로그램 개수가 많아서 그런 것 같다. 아무튼 개발할 때 거슬리니 필터에 아래 조건을 걸어두도록 하자 -scheme:chrome-extension 훨씬 쾌적한 개발환경이 되었다. 출처 https://stackoverflow.com/questions/16436369/is-it-possible-to-hide-extension-resources-in-the-chrome-web-inspector-network-t

개발을 하다보면 API 호출시 사용자의 인증정보를 체크할 필요성이 생긴다. 하지만 모든 API에 인증 체크 코드를 넣어두기엔 유지보수도 힘들고 같은 코드가 모든 메소드에 반복되게 되니 보통은 요청이 넘어오기 전에 Interceptor를 둬서 인증 체크하고 실제 메소드로 넘겨주는 방법을 사용하게 된다. 아래는 예전에 인터셉터를 구성했던 코드를 가져와봤다. JwtAuthInterceptor.java package me.huiya.core.Config; import me.huiya.core.Common.JWTManager; import me.huiya.Exception.AuthRequiredException; import org.springframework.web.servlet.HandlerIntercepto..

https://blog.huiya.me/14 SpringBoot html 템플릿 메일 보내기 - Thymeleaf 스프링부트에서 메일을 보내야 할 필요가 생겼다. 개발하면서 필요했던 요구사항은 아래와 같다. 가입 환영 메일, 이메일 인증 메일, 기타 등등 여러 종류의 메일 발송 가능할것. 단순 텍스트 blog.huiya.me 이 글에서 메일 보내기를 구현하고 나니 메일을 비동기로 보내야겠다는 생각이 들었다. 기존 프로젝트에서 가입과 메일 보내는걸 동기적으로 처리했다가 한참동안 기다려야 했던 기억이 나서 이번에는 꼭 스레드를 써봐야겠다고 마음을 먹었다. 그래서 찾아보니 SpringBoot에서는 쓰레드 생성이 어렵지 않았다. 예전에는 테스크 잡인가 뭔가 해서 진짜 복잡하게 돌렸던 기억이 나는데... 역시 스..

스프링부트에서 메일을 보내야 할 필요가 생겼다. 개발하면서 필요했던 요구사항은 아래와 같다. 가입 환영 메일, 이메일 인증 메일, 기타 등등 여러 종류의 메일 발송 가능할것. 단순 텍스트 이메일이 아니라 html로 구성되어 디자인이 가능할 것. 코드가 복잡하지 않고 확장성 있을 것 열심히 찾아보던 중 thymeleaf라는 라이브러리를 찾게 되었다. 사용법이 간단해 공유해보고자 한다. 1. Maven dependency(pom.xml) 설정 org.springframework.boot spring-boot-starter-mail org.springframework.boot spring-boot-starter-thymeleaf 2. src/main/resources/application.properties ..