나태쿤의 개발이야기

spring boot에서 에러 페에지이 대해서 알아보자

프로젝트 진행시 에러페이지가 나올 수 있는 요구 사항은 

적어도 5가지 이상있을 것 같다

1. 잘못된 요청에 대한 에러페이지

2. 로그인을 하지 않는 자의 요청에 대한 에러페이지

3. 권한을 뛰어넘는 요청에 대한 에러 페이지

4. 시스템의 에러페이지

5. 허용하지 않는 http 메서드에 대한 에러 페이지 (Get,Post 등등 또는 Http Method에 존재하지않는 단어)

아마 위의 상황에 대한 http 상태 코드는 4xx ~ 5xx 사이이다.

따라서 모든 경우의 상황에 대한 에러 페이지를 만들것인지,

특정 몇개만 만들어서 사용할지 정해야한다

하지만 스프링 부트에서는 이 걱정을 말끔히 해결해준다

스프링 부트의 마법을 보자

실제 ErrorMvcAutoConfiguration 이 bean을 등록하는 코드를 보자

생성자 쪽을 보면 리졸버 까지 넘기는것을 볼 수 있다.

우선 컨트롤러이니까 어떤 url에 맵핑되는지 보자 

특별한값을 설정하지 않으면 /error 를 사용한다

다음은 BasicErrorController 이다

다음은 DefaultErrorViewResolver 이다, 에러 컨트롤러가 위임한 그 리졸버이다.

여기 코드 문맥을 보자

this.resolve에 현재 에러상태코드를 넘긴다 (여기선 500 이라치자)

그렇다면 error/500 이 있는지 확인하고 있다면 해당 ModelAndView 를 리턴하고 

없으면 정적리소스로서 체크하는것다

(이떄문에 타임리프쪽의 에러페이지를 먼저 찾고 없으면 정적파일에서 찾는 우선순위가 정의된다)

(스프링은 참 대단한것 같다)

다시 돌아와서 

그렇게 this.resolve 로 시작 한 코드는 다음과 같은 조건에 따라 결과가 두개이다

1. 준비된 http 상태 코드의 파일이 존재하면 not null

2. 존재하지않으면 null

존재하지않으면 노랑색 영역의 코드가 평가되는데

다음과 같은 상황에서 동작할 수 있다

만약 405 (Method Not Allowed) 에러 코드가 나왓는데 error/405.html 은 존재하지 않지만, error/4xx.html 이 존재한다면

4xx.html로 modelAndView 생성된다.

따라서 처음 요구사항을 다시 보면

1. 잘못된 요청에 대한 에러페이지

2. 로그인을 하지 않는 자의 요청에 대한 에러페이지

3. 권한을 뛰어넘는 요청에 대한 에러 페이지

4. 시스템의 에러페이지

5. 허용하지 않는 http 메서드에 대한 에러 페이지 (Get,Post 등등 또는 Http Method에 존재하지않는 단어)

4xx, 5xx 두개로 처리할 수있으니 

4xx.html, 404.html, 500.html 이면 크게 부족하진 않는다 (요구사항에 따라 다르겠지만)

선언적 파이프라인 스크립트를 작성시

환경변수가 종종 필요한데

${env.JENKINS_HOME} 이렇게 접근하곤한다

근데 반대로 환경변수가 뭐뭐있는지 출력을 해야 써먹지 않겠는가?

sh "printenv" 로 출력할 수 있다

추가로 환경변수 영역에 작성한 변수들도 추가된다

따라서 printenv 하면 coomitMessage 환경변수가 추가된다(git의 commit 메세지를 변수로갖음)

회사 동료들에게 블로그를 털렸다

뭘 적기 무서울것 같다 (보고있나 ... )

제기랄 ㅋㅋㅋㅋㅋ

✨ vue cli 전역 설치
npm i -g @vue/cli



✨ cli 로 프로젝트 생성
vue create [프로젝트명]


✨ 옵션 선택으로 프로젝트 생성, 골라서 엔터
vue create [프로젝트명]


✨ gui 로 프로젝트 생성, 흠 ...
vue ui

✨ 포트 지정
npm run serve -- --port 4000

✨ 로컬 환경에서 ...
환경파일: .env.local
로컬 환경: npm run serve (npm run serve -- --mode local)

✨개발 환경에서 ...

환경파일 : .env. development
개발 환경: npm run serve -- --mode development

VUE 환경파일에서는 

prefix로 VUE_APP 으로 붙여야 한다

VUE_APP

따라서 VUE_APP_XXX 이런식으로 선언해두면

뷰 컴포넌트에서 process.env.VUE_APP_XXX  로 읽을 수 있다

업무상 vue를 이번에 프론트로 사용한다하여 vue를 공부를 시작하게되었다 !

vue3이 나온지 몇년되서 여러책을 조사해봣지만 대부분 버전이슈가 없었다

그래서 나는 이책을 골랐다

처음 보자마자 100페이지 정도까지 봤는데, 역시 리액트에 비해 대체로 직관적이고 쉽다

하지만 중간중간 비교하려고 공식사이트에서 가서보니

그새 vue 도 발전되어 api 스타일이 두개로 나눠진다

1.Options Api 스타일

이게 과거에 먼저 나온것 같다 책은 이방식이다

2. Composition Api 스타일

이건 좀더 바닐라 자바스크립트 느낌이 강하고 리액트와도 유사하다

다행히도 문서에서 api 스타일을 고르면 그에 따른 문서가 제공되니 

나름 친절한것 같다

UI를 꾸밀때 참고하는 사이트 먼저 시작 하겠다

- W3Schools Css 

css에 대해서 간단히 배울 수 있는 사이트이다 , css 말고도 많다 .

https://www.w3schools.com/css/default.asp

- Google Material ✨✨

폰트와 아이콘이 필요할때는  구글이 제공하는걸 써보자

https://fonts.google.com/icons?selected=Material+Symbols+Outlined:radio_button_checked:FILL@0;wght@400;GRAD@0;opsz@24&icon.query=radio&icon.size=24&icon.color=%23e8eaed

- Bootstrap ✨✨

다음은 아주 유명한 부트스크랩이다 

미리 만들어진 샘플이 많아서 가져다 쓰기 편하고

실제 실무에서 퍼블리셔에게 받는 기분이 든다, 최근에 아주 잘 쓰고있다

조각을 가져다가 쓰는 느낌이 강하다, 커스텀에 좀 닫혀있다

https://getbootstrap.com/docs/5.3/getting-started/introduction/

- Tailwind Css ✨✨✨

요즘 제일 핫한 css 프레임 워크가 아닌 가 생각이 든다 

리액트 책을 공부하면서 접하게 되었다

여러 Front framework 뿐만 아니라 일반 html/css/js 환경에서도 지원한다

css 파일을 작성하지않고 미리 일반화 된 클래스명을 가지고 챸챸 적용하는 느낌이 강하다

부트스크랩보다 좀더 고수준이다, 커스텀에 좀더 열려있다

내 생각에는 부트스크랩 충분히 쓰고 이거 쓰면 될듯하다

https://flowbite.com/docs/getting-started/quickstart/

다음은 흑백 에디터가 되겠다 , 오픈소스인걸 여러개 조사했는데 
과연 어떤 에디터가 생존하게 될 것 인가 ? 두구 두구

내가 쓰던 에디터는 네이버 스마트 에디터를 썻는데 결국에 유료화가 되어서 

이전 무료 버전의 코드를 뜯어 고쳐서 강제로 썻다가 앞으로 쓸 만한 에디터를 정리해 봤다.

각 에디터 별로 사이트 링크와 간단한 캡쳐사진을 준비했다.

참고로 웹 에디터에서는 의존성으로 jquery를 사용하는게 많더라.

- CkEditor 에디터 (라이센스 확인필요) 

나는 잘 사용안했지만 제일 많이 사람들이 썻던것 중에 이게 제일 유명했다

최신 버전(아마 5버전) 부터는 html/css 방식이아닌 npm 에서 제공하는 것 같다 ,

리액트 같은 프론트 프레임워크를 사용하고 라이센스 확인 잘 한후에 사용해도 무난 할 것 같다

참고로 라이센스에 관련된 질문이 구글링에 많은걸 볼 수 있다

지금은 아마 5버전이 최신인것 같은데, 실무에는 보통 html/css 환경에서 사용하는 설치형 4 버전이 많다.

(아마 사용하려면 4버전 설치형을 구해다가 쓰는게 맘편할 것 같다

CDN 스타일이나 현재 제공하는 4버전을 공식 사이트에서 다운로드 받으면 버전 이슈로 인한

에디터에 알림같은게 생기니, 그걸 또 커스텀 해서 안나오게 설정하는 공수가 필요하다)

* 참고 - 버전 이슈 시

https://ckeditor.com/

-SummerNote 에디터  (오픈소스) ✨ ✨ ✨

결론 부터 말하면 난 이게 킥이다.

저는 어떤 환경에서도 사용할 수 있는지 여부를 굉장히 중요시 여기거등요

부트 스크랩 4,5 버전과 호환이 되는 버전과

부트 스크랩 없이 사용하는 lite 버전이 존재하며

다양한 언어도 지원한다

*특징으로 이미지 넣을때 바로 base64 형태로 인코딩해서 img 태그를 생성해서 에디터에 바로 그려지기 때문에

별도의 업로드 이벤트 등록없이 사용이 되더라(물론 공식사이트에는 관련 이벤트 핸들러는 존재한다)

난 이부분이 킥이다. 

https://summernote.org/

* 실 사용기

-Toast 에디터  (오픈소스)

이것 일반 사용자들 보다는  md 파일 처럼 문법을 이용해서 사용할 수 있는게 특징이다

사진을 보면 가이드 문서 만들거나 정리할때 좋을 것 같다.

https://ui.toast.com/tui-editor

-Quill 에디터 (오픈소스)

이것도 있다. 이것도 제법 느낌있다

https://quilljs.com/

-prosemirror 에디터 (오픈소스)

이건 제일 심플해 보인다..이게 제일 안이쁘다 쓰지말자

https://prosemirror.net/

필자의 환경은

- Spring Boot 3.xxx 

- Spring Security 6.xxx

우선 rememberMe 에 대해서 간단히 알아보자

사용자가 로그인(인증) 이후에 특정 시간이 지나면 세션이 만료되는데 (영영 무제한은 아니니까)

하지만 20분 마다 끊긴다면, 중요한 작업을 하다가 또 다시 로그인 해야하는 불편함이 생길 수 있다.

이럴떄 사용하면 좋은게 RemeberMe 기능이다, 그대로 "나를 기억해줘" 이다 자동 로그인 정도로 생각하면 될것 같다

이때 토큰을 사용하는데.

인증된 사용자의 대한 정보와 부가적인 내용을 가지고 자신만의 토큰을 만든다.

(아이디, 패스워드, 만료시간, 키, 알고리즘...)

Filter 로는 RememberMeAuthentcationFilter 가 존재

Service 로는 RememberMeService(인터페이스) 가 존재

Service의 구현체는  토큰의 저장 위치에 따라 두가지로 나뉜다

1. 쿠기 베이스 기반(기본)

2. 데이터 베이스 기반

근데 토큰 베이스 기반이면 충분한 것 같다.

필터 순서는 다음과 같다

인가 관련된 주요 다이어그램을 보자

그리고 rememberMe 에 관한 주요 다이어그램도 보자

자 대충 골격은 알았으니 코드를 추적해보자

시작점은 AbstractAuthenticationProcessingFilter 에서 doFilter 이 좋겠다.

우선 로그인을 성공해야(인증을 성공해야) 사용자 정보를 가지고 토큰을 만들지 않겠는가? 그렇게 생각하면 편하다.

successfulAuthentication 은 다음과 같다

그러면 rememberService 의 로그인 성공 메서드를 호출한다

마지막에 HttpServletResponse (응답)에 쿠키를 끼는것을 알 수 있다

실제 로그인 이후 브라우저의 쿠키를 보면 다음과 같다

참고로 쿠키 이름은 이를 참고 할 수있으며, api로 수정도 가능하다

그럼 일단.

SecurityFilterChain Bean 등록시 api 설정하는 방법도 알아보자

일부분만 캡쳐를 해봤다

그렇다면 remember-me 쿠키가 있고, 인증객체가 없을때 요청하면 어떻게 될까? 

RememberMeAuthentcationFilter 는 인증객체가 없으면 자동 로그인을 시도하는걸 알 수 있다

this.rememberMeService.autoLogin 은 여기서는 쿠키에 있던 토큰을 가지고 다시 인증객체를 만든다.

그리고 null 이 아니라면 인증관리자로 통해서 다시 구한다, 아마 안전하게 다시 구하는것 같다

이런식으로 쭉 따라가다보면 시큐리티 내부 코드중에는 젤 보기 괜찮은것 같다

모든 코드를 캡쳐 찍어서 보기엔 글로서는 한계가 있어서 여기까지만 작성하겠다.

최소한의 컨셉이라도 이글을 통해 도움을 받았으면 좋겠다.

이만!

미루었던 쿠버네티스를 공부하자

쿠버네티스를 하고 카프카를 공부하는게 순서가 편안할 것 같다.

강의와 책중에 고민중인데 뭘 볼지 흠..