Springboot사용해서 블로그 만들기 글쓰기기능(summernote에디터사용) 추가와 상세보기 페이지(삭제,수정) 회원정보 변경

 

웹에서는 인증(어선트케이션)과 권한(어 솔 라이즈)이 있다.

건물로 치면 입구에 들어가는 행위가 인증, 어떠한 방으로 들어가는 것은 권한인 것이다.

 

 

jpa규칙

jpa는 형태만 똑같으면 되기 때문에 password에 별칭을 달아서 형태를 유지하되 password를 session에 담기지 않도록 했다.

jpa규칙

jpa는 형태만 똑같으면 되기때문에 password에 별칭을 달아서 형태를 유지하되 password를 session에 담기지 않도록 했다.

저번에 구현했던 회원가입 파일을 복사해서 위와 같이 수정했다.

readonly는 수정이 불가능하도록 만들어주는 속성

required는 해당 태그가 입력 없이 subimt이 안되도록 사용자에게 강제하는 속성

 

규칙

EL표현식은 위와 같이 변수로 담아서 보내면 톰캣이 컴파일을 할 때 principal.getUsername으로 파싱 해서 해당 getter를 때려준다.

 

위파 일을 리턴하기 위한 함수도 만들어 준다.

이제 정보 수정을 위한 기능을 만들어주자

AOP

공통 관심사

위와 같은 코드는 인증이나 권한이 필요한 모든 함수에서 꼭 체크돼야 하는 사항이다.(공통 관심사)
목적을 이루기 위해서 해야 되는 부가적인 것들.
그래서 나오는 스프링에서의 개념이 바로 AOP이다.
쉽게 말해서 컨트롤러마다 비서를 배치하는 것이다.
AOP는 공통 관심사를 분리시키는 것 더 자세한 것은 따로 포스팅을 하도록 하겠습니다.

 

글쓰기 기능

w3schools에 들어가서 위 탭을 선택한다.

샘플을 복사한다.

var의 값은 page scope에 들어간다.

샘플을 분석후에 내가 사용할 수 있도록 수정해준다.

스프링은 MVC를 강제하기 때문에 컨트롤러를 통해서 실행시켜야 한다.

컨트롤러를 만들어준다.

di(의존성 주입)를 해주고 파일에 접근할 컨트롤러 생성한다

 

상세보기 기능

post파일 안에 선언돼있는 user오브젝트 안에 있는 user의 id값을 찾아 야하기 때문에 el표현식을 위와 같이 작성해줬다.

 

상세보기 페이지의 컨트롤러

 

상세보기 페이지 삭제 버튼 구현

 

권한 체크를 해주는 코드는 주석을 참고한다.

새로운 함수를 하나 더 만들어서 오버 로딩해줬다

삭제하기 버튼의 경로 설정

 

글쓰기 기능

디자인을 간략하게 만들었다.

인증체크가 안된 컨트롤러

로그인한 사람만 글쓰기를 할 수 있도록 세션에 있는 사용자의 user데이터를 체크한 다음

위 파일을 리턴하는 컨트롤러를 만드는데 글쓰기 기능은 추가하는 것이니까 jpa의 save메서드를 사용했다.

하지만

이렇게 만들면 principal이 null일 때 null값을 반환하기 때문에 postman으로 uri호출 시 값이 들어간다
그럼 당연히 db에 user오브젝트에 id값에 null이 들어가면서 db 데이터가 쓸 수 없는 데이터가 된다.

 

잘못 들어간 데이터

위와 같이 db를 버리고 싶지 않다면 인증 체크 혹은 상황에 따라서는 권한 체크까지 꼭 해 줘야 한다.

인증체크가 된 글쓰기 컨트롤러

이제 ux(사용자 경험)를 좀 더 좋게 하기위해서 좀더 수정을 해본다.

 

무료 에디터 summernote

버전을 확인해서 더 높은것을 사용한다.

따로 다이내믹 웹 프로젝트에서 샘플을 테스트하는 이유

1. 스프링에선 MVC 때문에 컨트롤러를 만들어야 하기 때문

2. 샘플을 파악하기 위함.

3. CDN의 버전을 파악해서 맞는 더 높은 버전으로 설정해줘야지 부트 스트렙을 사용할 수 있다.

부트스트렙 적용 예제

 

짤막 지식 script는 기생이라는 뜻 즉 js는 기생 언어라고 생각하면 된다.

그래서 인터프리터 언어에서 script의 위치는 항상 돔(HTML)의 밑에 있어야 하는 것이다. 그림이 먼저 존재하고 그 그림에 기생해서 이벤트를 발생시키는 것이다.

이미지를 넣으면 이런 데이터가  db에 저장된다

data = 프로토콜

image/png mime타입

base64 디코딩이 가능한 암호화

그 뒤에 코드는 암호화된 이미지의 byte이다.

 

수정하기

수정하기니까 글쓰기 파일을 그대로 들고 왔다.

그리고 이제 사용자가 수정을 다 한 후 글쓰기 완료 버튼을 만들었을 때 처리할 컨트롤러가 필요하다

 

id를 찾아서 db에 데이터를 저장하고 다시 돌려준다.

redirect를 사용하는 이유는 오른쪽에 있는 컨트롤러를 때려서 model이 select 해주도록 유도하는 것이다.

 

 

독립된 모듈 : 컴포넌트