우당탕탕 초보 개발자

변수와 자료형 변수 선언시 var, let, const를 이용해서 선언이 가능하다. 변수 선언 중복선언 재할당 범위 var 가능하다 가능하다 function scope 내에서 사용가능 let 가능하다 불가능하다 변수가 선언된 블럭에서만 사용가능 const 불가능하다 불가능하다 변수가 선언된 블럭에서만 사용가능 1) 변수 선언시 중복선언과 재할당 변수와 자료형 변수 선언시 var,let,const를 이용해서 선언 가능 * var,let,const의 차이점 1) 변수 선언 방법 클릭 /* var는 자유롭게 변수 선언을 할 수 있다는 장점이자 단점이 있다. 중복된 변수가 생길 수 있고 값이 변경될 여지가 있다. 이를 보완해서 나온 타입이 let과 const이다. */ } 2) 변수 선언시 범위 3) 변수 선언..

HTML 요소에 접근하기(해당 요소객체 가져오기) 1. 아이디로 접근하기 HTML 요소에 접근하기(해당 요소객체 가져오기) 1)아이디로 접근하기 아이디로 접근버튼 1-1. 아이디로 접근하기 아이디로 접근2 2. 태그명으로 접근하기 2)태그명으로 접근하기 목록1 목록2 목록3 목록4 목록5 태그로접근버튼 3. name 속성값으로 접근하기 3)name속성값으로 접근하기 취미 노래부르기 게임하기 산책하기 이름으로접근버튼 4. 클래스명으로 접근하기 4)클래스명으로 접근하기 클래스로접근 5. 원하는 요소 자유자재로 가져오기(선택자 활용) 5)내가 원하는 요소 자유자재로 가져오기(선택자 활용) 테스트입니다. 안녕 잘가 안녕하세요 수고하셨습니다. 클릭

자바스크립트에서의 데이터 입출력 1. 데이터를 출력하는 기본 구문 window.alert("알림창에 출력할 문구"); window.consol.log("콘솔창에 출력할 문구"); document.write("화면에 출력할 문구"); 선택할요소.innerHTML/innerText = "해당 요소에 출력할 문구"; // 3)document.write('화면에출력할문구') // 4) 선택한요소.innerHTML/innerText="해당요소에 출력할 문구" 자바스크립트에서 어떤 요소(element) 안의 값(content)을 가지고 온다거나 변경하고자 할 때 innerHTML, innerText 라는 속성에 접근 가능 2. 데이터를 입력받는 기본 구문(변수에 기록 가능) 변수 = window.confirm("질..

웹의 3요소 HTML : 웹문서의 큰 틀(뼈대) CSS: 스타일(색상, 테두리, 디자인 등) JavaScript: 웹 문서 상에 이벤트가 발생했을 때 실행할 동작들 처리(동적인 효과) 자바스크립트 개요 1. 스크립트 언어란? 프로그램 동작을 사용자의 요구에 맞게 수행하는 용도, 매우 빠르게 배우고 짧은 소스코드로 상호작용 되도록 고안되었다. 2. 자바스크립트란? 웹 브라우저에서 가장 많이, 가장 기본적으로 사용되는 "인터프리터 방식"의 스크립트 언어 - java : 컴파일 방식 -> 컴파일 과정을 거치고 실행된다 - javascript : 인터프리터 방식 -> 컴파일을 거치지 않고 곧바로 실행이 된다(브라우저에 html 문서가 로딩될때 코드를 한줄씩 읽어내는 방식) 3. 자바스크립트(인터프리터 방식)의 ..

아주 전통적인 방법의 로그인 구현을 해보려고 한다.(시큐리티 로그인 전 파트) #1 사용자들이 회원가입한 데이터를 바탕으로 로그인을 한다 => 로그인(버튼)을 클릭하면 ID로 연결되어 작동하는 AJAX실행. 사용자들이 ID와 PASSWORD를 입력 후, 로그인 버튼을 누르면 AJAX가 실행되도록 설정해야 합니다. 로그인 폼에서 로그인버튼의 ID를 btn-login이라고 설정해뒀으니 이것을 활용해서 JS파일에서 AJAX가 실행되게 코드를 짜봅시다. let index = { init: function(){ // 회원가입 버튼 $("#btn-save").on("click",()=>{ this.save(); }); $("#btn-login").on("click",()=>{ this.login(); }); }, ..

Spring Boot에는 src/main/resources 파일 내부에 Static 폴더가 존재하고 이 폴더는 보통 Content를 두곤합니다. 보통 CSS/JS 파일을 위치하게 하고 /static을 통해서 웹에서 바로 접근이 가능합니다. 회원가입 버튼을 눌렀을 때 AJAX로 username, password, email의 value 값들이 이동하게 만들고 회원가입이 성공적으로 이뤄질 수 있게 /static 폴더 내부에 간단한 JS파일 작업을 시작합니다. #1 /static/js/user.js 회원가입 버튼(#btn-save)가 눌리면 작동하는 save function()을 만들고 username, password, email의 데이터를 Post 방식으로 전송한다. let index{ init: func..

우리 블로그의 홈화면과 로그인, 회원가입 페이지를 만들어보도록 하겠습니다. # 1 기본적으로 http://localhost:8080/blog 로 접속했을 때 우리의 home 화면을 보여줘야 하므로, 컨트롤러를 하나 생성하도록 하겠다. BoradController.java 클래스를 생성하고 return 값으로 "index"를 주면 yml의 설정때문에 /WEB-INF/views/index.jsp를 서칭하게 되므로 views 밑에 index.jsp를 만들어둔 후 index.jsp에 기본적인 세팅을 해주면 된다. 부트스트랩을 활용하여 적당한 템플릿을 가져와 줍니다. (footer와 header 파일은 따로 생성했습니다) BoardController.java @Controller public class Board..

앞선 포스팅에서 더미 데이터를 Select 해오고, Insert 해보는 작업을 해봤다. 오늘은 Update 작업을 해볼 건데 앞선 Select와 Insert의 구현 방식을 이해했다면 손쉽게 이해할 수 있을 것이다. # 1 첫 번째로 생각해야할 것은 바로 DB의 Update를 위해서는 PostMaping을 한다는 것! 그리고는 어떤 컬럼을 기준으로 Update문을 작성하고, 구현해야하는지. . . . 우리는 ID값을 기준으로 DB를 Update 할 것이다. 이제는 뭐 자동적으로 코드가 술술 나온다 ~ Update를 위한 PostMapping 주소를 입력하고, 매개변수로 @PathVariable을 사용해 id 값을 매칭시키고, @RequestBody 어노테이션을 사용해서 requestUser 라는 이름의 U..