본문 바로가기

분류 전체보기

 (226)
summernote summernote 서머노트란 오픈소스 '이지윅'에디터로 'WYSIWYG' 는 What You See Is What You Get 의 줄임말로서 '보는대로 얻는다'라는 의미입니다. 그 말은 즉슨 html처럼 따로 css문법을 적용해서 디자인 편집을 하는 것이 아닌 문서 편집 과정에서 화면에 포맷된 낱말, 문장이 출력물과 동일하게 나오는 방식을 말합니다. 테스트 먼저 자신의 프로젝트에 적용하기전에 테스트를 하고 사용한다. vs코드를 사용해서 테스트를 해본다 왼쪽빨간박스를 복사해서 vs코드에 붙여넣어준다. 테스트실행 높이지정 왼쪽의 빨간색박스부분만 vs코드에 붙여넣어준다. CDN 복사 성공적으로 테스트가 끝났으니 CDN부분을 복사해서 header.jsp파일에 붙여넣어준다. writeForm에 scripts를..
게시판 만들기 - 브라우저 쿠키 값 받아오기 3가지 저장영역이 있다고 생각하면된다. 세션, request, 쿠키 가 있다. 요청하는 순간 메모리가 생긴다. 그 메모리 영역이 request이다. 응답을 해주면 만들어진 메모리 영역은 없어진다. 쿠키는 브라우저가 가지고 있다. 쿠키는 JavaScript로 접근이 불가능하다. - 브라우저가 막고있다. 쿠키는 브라우저에 무엇인가를 저장하고싶을때 쿠키에 저장한다. 쿠키는 다음 요청을 할때 HTTP의 header에 들고간다. 중요 응답시 Header에 Set-Cookie가 있으면 거기에 있는 정보를 브라우저 쿠키에 넣어준다(자동 저장해준다). body에 있는 데이터는 쿠키로 못가지고간다 - 이유는 javaScript는 접근이 불가하기 때문이다. HttpOnly가 체크되어 있으면 자바스크립트로 접근이 불가능하다..
게시판 만들기 - 리팩토링(자바스크립트 static 폴더로 이동) 테스트 테스트용 폴더 생성 스프링에서 유일하게 외부에서 접근할수 있는 폴더가 static폴더(정적resource폴더)이다. URL접근이 가능하다 -> 파일명으로 찾을 수있다. URI-> Controller를 통해서 자원을찾는다. - CV패턴 잘나오는지 확인했으면 a.txt파일은 삭제 코드리팩토링 static 폴더안에 assets,css,js 폴더를 만들어준다. js폴더 - 오른쪽마우스 - New - Other... javas검색 - JavaScript File 선택 서버를 종료하고 users/joinForm.jsp파일의 내부에 있는 코드들을 ctrl + x(잘라내기)를 한다. 조금전에 만든 js/users.js 파일에 Ctrl + v(붙여넣기)를 해준다. joinForm.jsp파일에서 에 src="/js..
게시판 만들기 - ajax통신 로그인, 회원수정, 회원탈퇴 로그인 1. 데이터들을 Form으로 감싸고 id값을 준다. 2. Ajax작성 3.UsersController 작성 @PostMapping("/login") public @ResponseBody CMRespDto login(@RequestBody LoginDto loginDto) { Users principal = usersService.로그인(loginDto); if(principal == null) { return new CMRespDto(-1, "로그인실패", null); } session.setAttribute("principal", principal); return new CMRespDto(1, "로그인성공", null); } 실행결과 __________________________________..
게시판 만들기 - ajax통신으로 회원가입 1. 데이터들을 Form으로 감싸고 id값을 준다. 2. Ajax 작성 먼저 아래와 같은 형식으로 만들고 시작한다. type : post 응답받을때의 데이터 타입 dataType: json - 데이터타입은 무조건 json으로 한다. 지금내가 전송할 데이터를 stringify에 담는다. 키값은 data이다. 최종코드 let isUsernameSameCheck = false; // 회원가입 $("#btnJoin").click(()=>{ if(isUsernameSameCheck == false){ alert("유저네임 중복 체크를 진행해주세요"); return; } // 0. 통신 오브젝트 생성 let data = { username: $("#username").val(), password: $("#passw..
게시판 만들기 - ajax통신으로 아이디 중복 확인 form 태그안에 button이 있으면 자동 submit을 한다. 그래서 type을 button으로 지정해준다. listener가 된것이다. id가 btnUsernameCheck인 버튼이 클릭이 되면, 뭘할지에 대한 행위를 click( )의 ()안에 작성해준다. java는 (() -> {}), javascript는 (()=>{})를 사용한다. get요청을 하는 이유는 username이 있는지 select할 것이기 때문이다. json을 만드는 이유는 body데이터를 보내거나 받을때 사용한다. @ResponseBody를 붙이면 파일을 찾는 것이 아니라 CMRespDto 데이터로 응답을 한다. 중요 기본적인 Controller는 view resolver가 발동된다. -> 파일을 찾아서 응답해준다. Respon..
Ajax통신 정리 HTTP통신을 하면 HTML로 받는다. -> 전체Reload를 해야한다. AJAX통신을 하면 데이터로 받는다 -> 부분Reload를 해야 한다. 자바스크립트로 비동기 통신을 한다 => ajax통신 ajax통신은 자바스크립트 만으로 통신을 할 수 있다. ajax는 데이터로만 응답 받을 수 있다. Get - a태그, 주소요청(브라우저) - 예외로 Ajax통신을 사용하는 경우 (비동기 통신, 부분 리로드)할때 사용 Post - ajax통신 Body데이터 O Put - ajax통신 Body데이터 O Delete - ajax통신 Body데이터 X Mime 타입 클라이언트에게 전송된 문서의 다양성을 알려주기 위한 메커니즘 - text/html -text/plain - application/json(json처럼생김)..
js 기초 javascript_lab폴더를 생성후 그안에 ch01폴더를 만들어준다. Visual Studio Code를 실행해서 var1.html이라는 파일을 ch01폴더 안에 만들어줍니다. ! 자동입력하면 아래와 같이 나온다. document 객체는 웹 페이지 그 자체를 의미한다. 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 합니다. querySelector는 함수이다. 특정 name,id,class를 제한하지 않고 css선택자를 사용하여 요소를 찾습니다. 실행하는 법 마우스 오른쪽 클릭 Open with Live Server 선택 _____________________________________________________________ @오류가뜬다면 아래..

티스토리툴바