나의 공부 기록

SPA MPA 브라우저 안에서 작동하는 앱 사용하는 동안 페이지 리로딩을 필요로 하지 않는다. 렌더링 방식은 CSR 컨텐트가 변할 때마다 페이지 리로드가 필요하다. 렌더링 방식은 SSR CSR SSR SSG Client Side Rendering 요청을 단일 HTML 파일로 리디렉션하면 서버는 모든 JavaScript를 가져오고 브라우저가 내용을 렌더링하기 전에 모든 내용을 컴파일할 때까지 아무런 내용(또는 로드 화면) 없이 해당 요청을 전달 🔥 장점 화면 깜빡임이 없다. 초기 로딩 이후 구동 속도가 빠르다. TTV와 TTI 사이 간극이 없다. 서버 부하 분산 👻 단점 초기 로딩 속도가 느림 SEO에 불리하다. Server Side Rendering 서버의 안정적인 인터넷 연결을 사용하여 데이터를 가져오..

beforeSend : function(xhr){ xhr.setRequestHeader(header, token); }, 비동기로 요청을 보내기 전에 Header에 설정하는 부분이다. 이 부분에서 에러가 발생했다. header와 token 변수가 없어서 발생한 에러였다.

src 경로가 잘못되어서 or Spring Security에서 차단 🌿 해결 1. 이미지 파일을 static 폴더로 옮겼다. 이미지를 사용하는 HTML 파일이 templates/user 아래에 있었다. 나의 경우는 파일 구조가 아래와 같았다. resources static 이미지.png templates user 파일.html 2. Spring Security 설정에서 antMatchers().permitAll()에 "/*"를 추가했다. 참고 👇 https://stackoverflow.com/questions/44455900/spring-security-login-page-images Spring security login page - images i'm a newbie. I'm trying to dev..

new URL(document.referrer).searchParams.get("redirect_uri") console에 입력해서 redirect되는 url을 알아낼 수 있다. 어플리케이션에 등록한 redirect url과 같아야 한다. 참고 👇 https://help.naver.com/service/23029/contents/20352?lang=ko [서비스 설정 오류 문제 해결 방법] : 네이버 로그인 고객센터 해당 오류 메시지는 이용하려는 서비스에서 '네이버 로그인' 적용에 오류가 있는 경우 노출됩니다.​ 이용 상황에 맞게 아래의 버튼을 선택하여 이동해 주세요.​네이버 로그인 서비스를 적용 help.naver.com

APIExamNaverLogin.html callback.html APIExamNaverLogin.html의 script와 callback.html의 script를 한 파일에 같이 썼더니 발생한 에러다. 예시처럼 따로 파일을 생성하면 된다. 👇 참고 https://developers.naver.com/forum/posts/7966 개발자 포럼 - NAVER Developers developers.naver.com https://developers.naver.com/docs/login/api/api.md 네이버 로그인 API 명세 - LOGIN 네이버 로그인 API 명세 네이버 로그인 API는 네이버 로그인 인증 요청 API, 접근 토큰 발급/갱신/삭제 요청API로 구성되어 있습니다. 네이버 로그인 인증 ..

JS에서 model의 값에 접근하고 싶었다. Thymeleaf의 th:inline을 사용한다. 스크립트 태그에 th:inline="javascript"를 추가했다. 참고) th:inline의 값으로는 text, none도 있다. var post_id=[[${post.id}]]; 이렇게 사용한다. Strings, Numbers, Booleans, Arrays, Collections, Maps, Beans(objects with getter and setter methods) 타입을 사용할 수 있다. 참고 👇 https://kimfk567.tistory.com/105 타임리프 js에서 model 데이터 받기 ( th:inline ) 현재 타임리프를 사용하고 있지만, 전에는 jsp를 사용했었다. 컨트롤러에서 ..

Summernote 에디터를 이용해 저장하고 조회하니 HTML 태그까지 같이 출력되었다. Thymeleaf를 사용했기 때문에 th:utext를 이용하는 것으로 해결했다. th:utext는 unescaped text다. 참고 👇 https://velog.io/@hellocdpa/220307-SpringBoot-%ED%83%80%EC%9E%84%EB%A6%AC%ED%94%84-%EC%8D%B8%EB%A8%B8%EB%85%B8%ED%8A%B8summernote-%EC%A0%80%EC%9E%A5%EA%B3%BC-%EC%A1%B0%ED%9A%8C [22/03/06] SpringBoot 타임리프 썸머노트(summernote) 저장과 조회 게시판 글 작성란이 조금 밋밋한 것 같아서 summer note를 추가해보았다..

삭제 버튼의 form="formId" 참고 👇 https://negabaro.github.io/archive/how-to-post-button-out-to-form html form바깥에서 submit하는 방법 form에id를 지정해주고 form바깥에 있는 type='submit'을 가진 element에 해당 form의id를 form태그에 넣어주면 된다. negabaro.github.io

consol에 Uncaught TypeError: $.ajax is not a function 에러가 뜬다. slim build를 사용해서 기능이 많이 빠진다. ✨ 해결 uncompressed를 가져왔다. 참고 👇 https://releases.jquery.com/jquery/ jQuery Core – All Versions | jQuery CDN jQuery Core – All Versions jQuery Core & Migrate - Git Builds UNSTABLE, NOT FOR PRODUCTION jQuery Core - All 3.x Versions jQuery Core 3.6.0 - uncompressed, minified, slim, slim minified jQuery Core 3.5...

summernote를 사용하려고 했는데 적용이 안 된다. 공통 html common의 head를 가져와서 쓰고 있었다. common.html의 CDN ✨ 해결 th:replace를 th:insert로 바꿨다. th:replace는 모두 다 교체, insert는 추가 지금 내 상황에서 필요한 것은 추가다. 참고 👇 https://summernote.org/getting-started/#compiled-css-js Summernote - Super Simple WYSIWYG editor Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online. sum..