개발

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

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

시작하며 이번에 새롭게 사이드프로젝트를 진행하면서 백엔드 언어로 코틀린을 선정했다. 자바랑 여러가지 차이가 있고 뭐가 장점이고 하는 의사결정 과정이 중요한건 아니고, 중요한건 코틀린으로 언어를 바꾸면서 기존에 만들었던 코드를 다시 짜야 한다는 것이다. 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 ..

보통 웹개발을 하게 되면 민감한 정보는 암호화 해서 DB에 저장하게 된다. 개인적으로는 비밀번호 같이 복호화가 필요 없는건 SHA-256, 이름이나 파일명 같은 복호화가 필요한 데이터는 AES-256을 사용해서 암호화하고 있다. 너무 흔한 방식이라 대부분 같은 방식을 사용하고 있을거라고 생각된다. SHA는 해시함수라 항상 같은 길이의 결과물이 떨어져서 DB 컬럼 길이를 정할때 고민없이 정할 수 있다. 하지만 AES를 하게 되면 길이가 늘어나기 때문에 고민을 안 할수가 없다. AES는 기본적으로는 블록암호화함수라 입력값과 출력값의 길이가 동일하다. 다만, 패딩이 붙기 때문에 실제 길이보다 살짝 늘어나게 된다. 여기에 흔히 암호화 후 base64 인코딩해서 저장하는 경우가 많은데 base64까지 하게 되면 ..

React 개발을 시작하면서 PHP로 Restfull API 서버를 구성했다. React는 dev 모드로 로컬호스트에서 실행되고 있고, 서버는 실서버를 바라보게 설정했다. api 서버도 로컬에 테스트로 열어놓으면 좋겠지만 PHP로 구성되어 있어서 (Spring이면 로컬에서 돌렸을텐데) 귀찮음에 항복하고 실서버를 바라보게 설정해버렸다. 로컬호스트에서 실행되는 스크립트가 실제 도메인을 가진 서버를 바라보고 있으니 당연히 CORS 에러가 발생했다. *CORS에 대한 글 그런데 Access-Control-Allow-Origin 헤더를 넣어도 GET을 제외한 POST, PUT, DELETE에서 CORS에러가 발생하고 있었다. 그 이유는 React에서 api를 호출하기 위해 Axios를 사용하고 있었는데, Axio..