WakaraNai

객체 정의 var healthObj = { name : "달리기", lastTime : "PM10:12", showHealth : function() { console.log(this.name + "님, 오늘은 " + this.lastTime + "에 운동을 하셨네요"); } } healthObj.showHealth(); this 객체 안에서의 this는 그 객체 자신을 가리킴 ES6부터 객체에서 메소드를 사용할 때 function 생략 가능 const obj = { getName() { return this.name; }, setName(name) { this.name = name; } } obj.setName("crong"); const result = obj.getName(); 함수가 실행될 때, ..

var data = [{name : "corn", description : "초당옥수수", price : 5500}, {name : "beer", description : "캔맥주", price : 4500}, {name : "candy", description : "사탕", price : 350}]; for 와 forEach for(var i=0; i 5000; //5000원이상만 추출 }); var filteredData = data.filter(function(v) { return v.price > 5000; }).map(function(v) { v.price = (''+v.price).replace(/^(\d+)(\d{3})$/, "$1,$2원"); return v; }); immutable 원본..

서버로부터 받은 데이터를 화면에 반영해야할 때, HTML 형태는 그대로인데, 데이터만 변경되는 경우에 사용 ex) sns 또는 게시판에 댓글을 올린 경우 HTML Template 반복적인 HTML 부분을 template로 만들어두고, 서버에서 온 데이터(주로 JSON)를 결합해서, 화면에 추가하는 작업 .replace() 그리고 method chaining replace()를 계속해서 연결하여 사용 var data = { title : "hello", content : "lorem dkfief", price : 2000 }; var html = "{title}{content}{price}"; var resultHTML = html.replace("{title}", data.title) .replace("..

Tab UI를 위한 기초 HTML과 CSS 공사 Tab UI Test crong pororo koko doto hello jk Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus magni eos expedita iure ducimus, neque sint? 자바스크립트로 탭 동작하기 추가하면 클릭한 탭이 무엇인지 출력됨 AJAX로 클릭한 순간 서버에서 데이터 가져오기 데이터 json.txt [ { "name" : "crong", "favorites" : ["golf", "facebook"] }, { "name" : "pororo", "favorites" : ["soccer", "apple"] }, { "name" : "koko", ..

@RestController Spring 4, Spring MVC에서 Rest API 또는 Web API를 개발하기 위해 등장 이전 버전의 @Controller와 @ResponseBody를 포함합니다. MessageConvertor JSON 변환 관련 담당. jackson 라이브러리를 추가해야만 JSON 처리 Convertor가 등장함 추가하지 않았다면 500번 오류 예 외부에서 전달받은 JSON 메소드를 내부에서 사용할 수 있는 객체로 변환하기 컨트롤러를 반환한 객체가 클라이언트에게 JSON으로 변화해서 전달될 수 있도록 하는 역할 자바 객체와 HTTP 요청 / 응답 바디를 변환하는 역할 @ResponseBody, @RequestBody @EnableWebMvc 로 인한 기본 설정 WebMvcConfi..

이번 시간엔 방명록을 Spring 프레임워크를 이용해 만들어 보도록 하겠습니다. 이를 통해 각 레이어별로 어떤 내용들을 작성해야 하는지 알아보고, 완전히 동작하는 웹 어플리케이션을 개발해 봄으로써 Spring 웹 어플리케이션에 대한 이해를 높이는 시간이 될 수 있길 바랍니다. 방명록 만들기 실습 Spring JDBC를 이용하여 DAO 작성 Controller, Service Dao로 레이어드 아키텍처 구성 트랜잭션 처리 Spring MVC에서 form 값 입력받기 Spring MVC에서 redirect하기 Controller에서 jsp에게 전달한 값을 JSTL과 EL을 이용해 출력 방명록 요구 사항 데이터베이스 관련 guestbook 테이블 방명록 정보 id는 자동으로 입력되도록 한다 id, 이름, 내용..

Controller에서 중복되는 부분 - 헤더의 로그인 버튼, 검색창 - 광고 배너 Controller에서 중복되는 부분을 처리하려면? 별도의 객체로 분리합니다. 별도의 메소드로 분리합니다. 예를 들어 쇼핑몰에서 게시판에서도 회원 정보를 보여주고, 상품 목록 보기에서도 회원 정보를 보여줘야 한다면 회원 정보를 읽어오는 코드는 어떻게 해야 할까요? 컨트롤러와 서비스 컨트롤러들이 중복 호출된 부분들을 별도의 객체인 Service로 구현 이 객체는 보통 업무와 관련된 메소드를 가지고 있어, 비즈니스 메소드라고 함 이런 서비스 객체란 비즈니스 로직을 수행하는 메소드를 가진 객체를 말함 하나의 비즈니스 로직은 하나의 트랜잭션으로 동작 컨트롤러는 Service객체를 사용하도록 합니다. 상품 서비스의 경우, 컨트롤러..

Controller작성 실습 2/3 http://localhost:8080/mvcexam/userform 으로 요청을 보내면 이름, email, 나이를 물어보는 폼이 보여진다. 폼에서 값을 입력하고 확인을 누르면 post방식으로 http://localhost:8080/mvcexam/regist 에 정보를 전달하게 된다. regist에서는 입력받은 결과를 콘솔 화면에 출력한다. 1. 유저 정보 받기 - userform.jsp 경로: src/main/webapp/WEB-INF/views name : email : age : 2. 유저 정보를 담을 객체를 위한 클래스 생성 DTO 패키지 생성 경로: src/main/java 이름: kr.or.connect.mvcexam.dto User.java package ..

이전 실습에서는 각각의 어노테이션이나 설정 파일들이 어떤 의미를 가지는지 살펴봤다면, 이번 실습에서는 실제로 컨트롤러가 어떻게 사용되는지 살펴보기 Controller작성 실습 1/3 웹 브라우저에서 http://localhost:8080/mvcexam/plusform 이라고 요청을 보 내면 서버는 웹 브라우저에게 2개의 값을 입력받을 수 있는 입력 창과 버튼이 있는 화면을 출력한다. 웹 브라우저에 2개의 값을 입력하고 버튼을 클릭하면 http://localhost:8080/mvcexam/plus URL로 2개의 입력값이 POST방식으로 서버에게 전달한다. 서버는 2개의 값을 더한 후, 그 결과 값을 JSP에게 request scope으로 전달하여 출력한다. jsp file 생성 /src/main/java..

실습 가이드 1. 웹 브라우저에서 http://localhost:8080/mvcexam/plusform 이라고 요청을 보내면 서버는 브라우저에게 2개의 값을 입력받을 수 있는 입력창과 버튼이 있는 화면을 출력 2. 웹 브라우저에 2개의 값을 입력하고 버튼 클릭하면 http://localhost:8080/mvcexam/plusform URL로 2개의 입력값이 POST 방식으로 서버에 전달 서버는 2개의 값을 더한 결과를 JSP에게 request scope로 전달하여 출력 프로젝트 생성 및 라이브러리 추가 Maven Proejct archetypes : webapp group id : kr.or.connect artifact id : mvcexam src/main/ 에 java 폴더 생성 pom.xml에 수..