본문 바로가기

분류 전체보기488

스프링 부트 메테리얼 디자인 적용 라이브러리는 없나? 피그마? 스프링 부트 메테리얼 디자인 지원 라이브러리는 없나? 플러터나 안드로이드에선 간단한 종속성 추가와 설정 변경만으로 테마가 변경되고 위젯들에 스타일이 적용되어 매우 편했다. 그래서 기존의 웹 html을 이용한 웹에 간단하게 테마를 바꾼다던지 스타일을 바꾸는 방법이 없는지 알아보겠습니다. https://devkimchi.tistory.com/78 스프링 부트 머티리얼디자인 적용 시키기 머티리얼 디자인을 적용시키기 위해 홈페이지의 나와 있는 Github의 Repository를 방문하게 되었다. 들어가게 되면 Material Desingn Web Components에 대해 나오는 거 같은데 퀵가이드를 봐도 Node 쪽 관련된 devkimchi.tistory.com 이전에 쓴 글에서 mdc.textField.MD.. 2023. 2. 4.
포토샵 기본 도구사용하는 방법 (오려내기, 합성, 자르기, 보정하기, 브러쉬툴) 안녕하세요~ 오늘은 포토샵에서 사용하는 기본 도구를 이용해서 어떻게 사용할 수 있는지에 대한 방법에 대해서 적어보려 합니다. 처음에 포토샵을 켰을 때 기본 옵션 도구들이 뜨는데요 그중에서도 오늘 사용하게 될 도구들 위주로 설명을 적어볼게요 ~ 위에 적힌 툴 그림들을 가지고 오늘 자르기, 합성하기, 개체 지우기, 사진 화면을 옮기기 등 하는 방법들을 차례로 남겨 볼게요 객체 합성 동영상 포토샵을 켜고 단축키 ctrl+O(열기) 원하는 파일을 가져옵니다. 자석 올가미 툴을 이용해서 강아지 이미지를 뜹니다. 단축키 Ctrl+J( 복사) 합니다. 그러면 예쁘게 올가미 자동 툴로 딴 강아지 그림만 쏙 나오게 됩니다. 강아지 그림을 옮겨서 다른 사진에 파일에 객체를 붙이는 방식의 사진 합치기를 할 수 있어요. 이미.. 2023. 2. 3.
포토샵 어두운 작업 화면을 밝게 설정하는 방법과 이미지크기조절하기 포토샵 어두운 화면 밝게 설정하기 포토샵을 처음 배우게 되면~ 포토샵을 먼저 깔아야 하잖아요~ 깔고 나서도 포토샵을 사용할 때 쓰는 도구들을 설정해 놓아야 작업속도도 올라가고 금방 작업을 처리할 수 있는데요 그럴 때 제일 먼저 하는 설정 방법이기도 합니다. 포토샵을 실행했을 때 제일 먼저 뜨는 화면은 어두운 화면으로 뜨게 되는데요~ 일을 할 때 밝은 화면보다는 어두운 화면이 사용자 눈에는 안정적이고 일할 때 집중도 잘된다고 해서 포토샵을 실행되었을 때 기본 화면 색깔이 검정으로 뜨게 됩니다. 하지만~ 사람마다 취향이라는 게 있으니깐요 저는 어두운 화면보다는 밝은 화면에서 일하는걸 더 편해하고 집중력이 올라가더라고요~ 화면의 밝기를 설정하는 방법에 대해서 남겨볼게요~ 포토샵을 먼저 실행합니다. 포토샵 상단.. 2023. 2. 2.
스프링 부트 머티리얼디자인 적용 시키기 머티리얼 디자인을 적용시키기 위해 홈페이지의 나와 있는 Github의 Repository를 방문하게 되었다. 들어가게 되면 Material Desingn Web Components에 대해 나오는 거 같은데 퀵가이드를 봐도 Node 쪽 관련된 거 같아 저장소의 상위 쪽으로 가게 되면 웹에 적용시키기 적당한 내용들이 나온다. https://github.com/material-components/material-components-web GitHub - material-components/material-components-web: Modular and customizable Material Design UI components for the web Modular and customizable Material.. 2023. 2. 2.
Spring Boot Material Design 3 선택 이유 Thymeleaf Layout 적용 https://devkimchi.tistory.com/76 Sprng Boot 2.7.8 Reactive WebOAuth2 Google Login 적용해 보기 간단 해결기 Sprng Boot 2.7.8을 이용 Reactive Web에 OAuth2를 이용해 Google Login을 붙여 볼 예정이다. 이전 시도에서 스프링부트 3.0.0 이용하여 실패했는데 소스도 별로 없고 글도 없어서 아직 이른가 보다라는 판단에 devkimchi.tistory.com 스프링 웹플러스에 구글 로그인은 적용시켰습니다. 이제 메인 페이지부터 해서 화면을 만들고 디자인을 적용시켜 볼 예정입니다. Material 선택 이유 디자인엔 문외한 이기 때문에 감각적인 디자인을 하긴 힘들고 어려워서 구글에서 많은 디자이너와 개발자들이 사용.. 2023. 2. 2.
Sprng Boot 2.7.8 Reactive WebOAuth2 Google Login 적용해 보기 간단 해결기 Sprng Boot 2.7.8을 이용 Reactive Web에 OAuth2를 이용해 Google Login을 붙여 볼 예정이다. 이전 시도에서 스프링부트 3.0.0 이용하여 실패했는데 소스도 별로 없고 글도 없어서 아직 이른가 보다라는 판단에 이전 버전에서 테스트를 해보고 Spring Security를 좀 이해하게 되면 버전을 높여서 해볼 생각입니다. 최신 버전에선 시행착오도 많았는데 결국엔 실패 했고 안전하게 너무 최신은 거르고 바로 전 버전으로 하는 것이 정신 건강에 이롭지 않을까 하여 다시 시도해 봅니다 https://devkimchi.tistory.com/74 Spring boot 3 WebFlux Google OAuth2 재도전기 첫 번째 도전 이전 글에서 spring webflux에 googl.. 2023. 2. 2.
포토샵 한글 CC 2022 PNG 만들기와 JPG 사진 저장 방법 포토샵 한글 CC 2022 저장 방법 오늘은 제가 블로그를 쓰면서 포토샵을 활용해서 작업할 사진들이 많이 있더라고요 간단하게 사진을 가져와 자르고 저장하거나 테두리를 치고 텍스트를 기입하는 너무나 간단하지만... 포토샵이 엄청 업그레이드가 되어서 예전에 알던 방식으로 하면 사진을 불러오고 저장하고 붙여 넣고 합치고 하기가 너무 어려운 느낌이 들더라고요 그래서 기초부터 다시 공부하는 느낌으로 저장하는 방법에 대해서 남기려고 합니다. 파일 새로 만들기 첫 번째 포토샵을 실행합니다. 파일에 들어가면 새로 만들기 또는 열기를 해서 파일을 불러올 수가 있어요 단축키 : 새로 만들기 ctrl+N 오픈(열기) ctrl+O 파일 크기 지정 새로 만들기를 불러오면 사용자 정의 파일의 크기를 정할 수 있어요 저는 대부분 .. 2023. 2. 1.
Spring boot 3 WebFlux Google OAuth2 재도전기 첫 번째 도전 이전 글에서 spring webflux에 google login 창을 띄우고 OAuth2를 이용하려 했으나 실패했다. UI까지 띄우고 리디렉션 페이지로 이동하는 것은 성공하였으나 코드 같은 정보를 어디서 가져오는지 도통 알 수가 없었다. 첫 시도는 실패 하였고. 스프링에서 기본적으로 만들어 넣으 샘플이 있다고 하여 재 도전을 해 보려 합니다. https://devkimchi.tistory.com/73 SPRING WEBFLUX OAUTH 2.0 구글 로그인 후 넘어 오는 값(CODE) 방황기 이전 포스팅에서 프런트 페이지에 구글 로그인을 띄우는 것을 다루었다. 이제 로그인이 성공한 후에 제공업체에서 가져온 값을 처리하는 로직을 만들 것이다. 흐름은 알겠는데 로그인 완료 후 j devkimc.. 2023. 2. 1.
SPRING WEBFLUX OAUTH 2.0 구글 로그인 후 넘어 오는 값(CODE) 방황기 이전 포스팅에서 프런트 페이지에 구글 로그인을 띄우는 것을 다루었다. 이제 로그인이 성공한 후에 제공업체에서 가져온 값을 처리하는 로직을 만들 것이다. 흐름은 알겠는데 로그인 완료 후 jwt를 처리하는 것에 대한 문서가 어디 있는지 잘 보이질 않는다. 그래서 일단 파이어베이스 안이 문서를 살펴보고 있다. 기존 프런트 페이지는 이렇게 설정하였다. https://devkimchi.tistory.com/72 firebase login Sign-in method, web ui 설정, google 로그인 제공 업체 추가 Firebase Login Ui 설정 https://devkimchi.tistory.com/71 firebase google login spring webflux 적용기 Spring Webflux.. 2023. 1. 29.
firebase login Sign-in method, web ui 설정, google 로그인 제공 업체 추가 Firebase Login Ui 설정 https://devkimchi.tistory.com/71 firebase google login spring webflux 적용기 Spring Webflux에 구글 로그인을 달아보려고 했는데 생각보다 보게 되는 게 많았다. 워낙에 자바가 볼게 많은 거 같다. 세세한 사항도 많고 자동으로 되어 있는 부분도 많은데 고칠거 없으면 그냥 쓰 devkimchi.tistory.com 우여곡절 끝에 spring webflux thymeleaf front 페이지에 javascript CDN을 이용하여 로그인 버튼과 로그인 페이지로 가도록 연결을 해 놓았다. 결과는 아래와 같았다. Firebase: The given sign-in provider is disabled for thi.. 2023. 1. 26.
firebase google login spring webflux 적용기 Spring Webflux에 구글 로그인을 달아보려고 했는데 생각보다 보게 되는 게 많았다. 워낙에 자바가 볼게 많은 거 같다. 세세한 사항도 많고 자동으로 되어 있는 부분도 많은데 고칠거 없으면 그냥 쓰면 되지만 수정하려면 모르고 하기도 애매하니 암튼 이제 스프링에 구글 로그인을 붙여 보려고 한다 잘되야 할 텐데. Thymeleaf 수정 사항 Deprecated unwrapped fragment expression "header::header" found in template layout, line 24, col 6. Please use the complete syntax of fragment expressions instead ("~{header::header}"). The old, unwrapped.. 2023. 1. 26.
Firebase, WebFlux Security, Spring 기본 설정드, 어노테이션 등 FirebaseOptions options = FirebaseOptions.builder() new를 제거하고 B를 소문자로 변경해 주면 된다. 이게 인텔리제이가 다 한글로 나오는데 내가 설정한 건가 아니면 원래 그런 건가 메뉴까지 다 한글로 나오니 은근 불편하다는. @Bean public FirebaseApp firebaseApp() throws IOException { ClassPathResource classPathResource = new ClassPathResource("serviceAccountKey.json"); FileInputStream serviceAccount = new FileInputStream(classPathResource.getFile()); FirebaseOptions op.. 2023. 1. 25.

티스토리툴바