나태쿤의 개발이야기

✅ 뷰포트 내부 높이 구하기, 스크롤바 포함 ! 

window.innerHeight

✅  브라우저 전체 높이 구하기

window.outerHeight

✅ 실제 스크롤까지 펼친 높이, 넘치는 부위까지 다 계산

document.documentElement.scrollHeight

아래그림을 참고하자

화면작업을 하다보면 가끔 요소의 좌표축이 필요할때가 있다

특정 dom을 접근하여 getBoundingClientRect   메서드를 실행하면

다양한 값을 얻을 수 있다

속성 이름 설명 계산 방식 / 특징

지난글 https://nataekoon.tistory.com/170

이번에는 실습과 함께 좀 보자

환경은 대충 이렇다

일부로 에러를 내기위한 /500 

post요청을 처리하는 /post 을 기억하자

일반적으로 에러만 안나면 index.html 를 리턴하도록 했다

다음은 폴더구조 이다

error 디렉터리 밑에 다음처럼 만들어놧다 

파일의 내용은 다 똑같다 

(* 참고로 trace는 숨기는게 안전하다 웹 소스경로나 클래스이름이 노출된다)

자 그럼 /500 을 호출해보자 에러가 발생했으므로 index.html 를 리턴하지 않았다

상황을 해석해보자

사용자가 /500 로 컨트롤러를 호출했고,

해당 컨트롤러는 무조건 예외를 터트리기 때문에 이 예외가 서블릿까지 올라간다

그다음 서블릿에서 forward로 /error 로 요청하고

지난번 포스트에서 보던데로 BasicErrorController 가 이를 처리한다

따라서 forward 이기떄문에

브라우저 url을 보면 최초 요청 localhost:8080/500 이 그대로있고

디버깅으로 스레드를 봐도 똑같은 번호를 가진다

1. MainController 에서 스레드

2. BasicErrorController 에서 스레드

둘다 같은걸 볼 수 있다.

포트포워딩은 관리자 권한이 필요하다

#포트 포워딩 목록 조회
netsh interface portproxy show all

# 포트 포워딩 추가

=> 내 컴퓨터 1111 번 포트로 오는 요청을 192.168.1.100 의 22번 포트로 포워딩

netsh interface portproxy add v4tov4 listenaddress=0.0.0.0 listenport=1111 connectaddress=192.168.1.100 connectport=22

# 포트 포워딩 삭제

netsh interface portproxy delete v4tov4 listenaddress=0.0.0.0 listenport=1111

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 이면 크게 부족하진 않는다 (요구사항에 따라 다르겠지만)

✨ 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/