coding develop

npm i concurrently express -save

문제해결!

고객 데이터

const customers =[{
  'id' :1,
  'image' : 'https://placeimg.com/64/64/1',
  'name' : '이순신',
  'birthday' : '940926',
  'gender' : '남자',
  'job' : '대학생'
}
,
{
  'id' :2,
  'image' : 'https://placeimg.com/64/64/2',
  'name' : '홍길동',
  'birthday' : '951222',
  'gender' : '남자',
  'job' : '대학생'
}
,
{
  'id' :3,
  'image' : 'https://placeimg.com/64/64/3',
  'name' : '장보고',
  'birthday' : '961222',
  'gender' : '남자',
  'job' : '대학생'
}
]

App.js

class App extends Component {
  
  render(){
  return (
    <div>
    <Customer
      id={customers[0].id}
      image={customers[0].image}
      name={customers[0].name}
      birthday={customers[0].birthday}
      gender={customers[0].gender}
      job={customers[0].job}
      
    />

    <Customer
    id={customers[1].id}
    image={customers[1].image}
    name={customers[1].name}
    birthday={customers[1].birthday}
    gender={customers[1].gender}
    job={customers[1].job}
    
  />
  <Customer
  id={customers[2].id}
  image={customers[2].image}
  name={customers[2].name}
  birthday={customers[2].birthday}
  gender={customers[2].gender}
  job={customers[2].job}
  
  
/>
</div>
  );
}
}

Customer.js에게 데이터 전달

데이터가 많아지면 코드가 길어짐

반복문 사용하여 구현!!

react에서는 반복문으로 map 함수 사용

map

{
      customers.map( c => {

        return(
          <Customer
            id={c.id}
            image={c.image}
            name={c.name}
            birthday={c.birthday}
            gender={c.gender}
            job={c.job}
            />

        );
      }

      )

    }

cmd -> 명령 프롬포트

cd C:\workspace\React

npm install -g create-react-app

create-react-app 이름

cd 이름

yarn start

단위 테스트 (Unit Test)

컴퓨터 프로그래밍에서 소스 코드의 특정 모듈이 의도된 대로 정확히 작동하는지 검증하는 절차다.

즉, 모든 함수와 메소드에 대한 테스트 케이스를 작성하는 절차를 말한다.

이를 통해서 언제라도 코드 변경으로 인해 문제가 발생할 경우, 단시간 내에 이를 파악하고 바로 잡을 수 있도록 해준다.

이상적으로 , 각 테스트 케이스는 서로 분리되어야 한다. 이를 위해 가짜 객체를 생성 하는 것도 좋은 방법이다.

이점 (왜 작성해야 할까?)

• 단위 테스트는 개발단계 초기에 문제를 발견하게 도와준다.
• 단위 테스트는 개발자가 나중에 코드를 리팩토링하거나 라이브러리 업그레이드 등에서 기존 기능이 올바르게 작동하는지 확인할 수 있다. (회귀 테스트)
• 단위 테스트는 기능에 대한 불확싱성을 감소 시킬 수 있다
• 단위 테스트는 시스템에 대한 실제 문서를 제공한다. 즉, 단위 테스트 자체가 문서로 사용 할 수 있다

프레임워크

가장 대중적인 테스트 프레임 워크는 xUnit 으로 개발환경(x)에 따라 Unit 테스트를 도와주는 도구라고 생각하면 된다.

xUnit 프레임워크

• JUnit - Java
• DBUnit - DB
• CppUnit - C++
• NUnit -. net

IDE (통합 개발 환경)

Intellij 

이때까지 이클립스만 사용했었는데,

이번에 첨으로 인텔리제이를 사용하게 되었다.

인텔리제이는 네이버,카카오,라인,쿠팡,우아한형제들 등 많은 IT 서비스 회사에서 사용한다고 하니

이번 기회에 익혀두면 좋을 것 같다.

의존성 설정

build.gradle

buildscript {
    ext {
        springBootVersion = '2.4.0.RELEASE'
    }
    repositories {

        mavenCentral()
        jcenter()
    }
    dependencies {
        classpath("org.springframework.boot:spring-boot-gradle-plugin:2.4.0")
    }
}

apply plugin: 'java'
apply plugin: 'eclipse'
apply plugin: 'org.springframework.boot'
apply plugin: 'io.spring.dependency-management'



group 'org.example'
version '1.0-SNAPSHOT'
sourceCompatibility = 1.8


repositories {
    mavenCentral()
}

dependencies {
    testImplementation 'org.junit.jupiter:junit-jupiter-api:5.6.0'
    testRuntimeOnly 'org.junit.jupiter:junit-jupiter-engine'
    compile('org.springframework.boot:spring-boot-starter-web')
    testCompile('org.springframework.boot:spring-boot-starter-test')
}

test {
    useJUnitPlatform()
}

• ext : build.gradle에서 사용하는 전역변수를 설정한다 (springBootVersion 이라는 전역변수 생성)
• apply plugin : 자바와 스프링 부트를 사용하기 위해 추가해야 한다. 특히 io.spring.dependency-management 플러그인은 스프링 부트의 의존성들을 관리해주는 플러그인이다
• repositories : 각종 의존성(라이브러리)들을 어떤 원격 저장소에서 받을지 정한다.
• dependencies : 프로젝트 개발에 필요한 의존성을 선언 하는 곳

※ JSP 페이지의 주요 기능 중 하나는 데이터를 보여주는 것이다.

   하나의 JSP 페이지에 데이터를 보여주기 위한 자바코드와 단순히 화면을 출력하는 HTML 코드를 함께 작성하면

   기능을 확장하거나 코드를 재사용하는 데 어려움이 있다.  

   따라서 프로그램의 효율을 높이기 위해 화면을 출력하는 부분과 데이터를 처리하는 로직 부분을 구분하여 작성하며, 로직 부분의 코드에 자바빈즈라는 클래스를 사용한다.

자바빈즈

자바빈즈는 동적 콘텐츠 개발을 위해 자바 코드를 사용하여 자바 클래스로 로직을 작성하는 방법이다.

JSP 페이지에서 화면을 표현하기 위한 계산식이나 자료의 처리를 담당하는 자바 코드를 따로 분리하여 작성하는 것이다.

useBean 액션 태그

useBean 액션 태그는 JSP 페이지에서 자바빈즈를 사용하기 위해 실제 자바 클래스를 선언하고 초기화하는 태그다

<jsp:useBean id="user" class="user.User" scope="page"/>

• id : 자바빈즈를 식별하기 위한 이름
• class : 패키지 이름을 포함한 자바빈즈 이름 (기본 생성자 있어야하고 , 추상클래스 사용 안됨)
• scope: 자바빈즈가 저장되는 영역(page, request, session , application 중 하나 사용)

setProperty 액션 태그

setProperty 액션 태그는 useBean 액션 태그와 함께 자바빈즈의 Setter() 메소드에 접근하여

자바빈즈의 멤버 변수인 프로퍼티의 값을 저장하는 태그다.

 <jsp:useBean id="board" class="board.Board" scope="page" />
<jsp:setProperty property="title" name="board"/>
<jsp:setProperty property="content" name="board"/>
<jsp:setProperty property="writer" name="board"/> 

• name : useBean 태그에 id 속성 값으로 설정된 자바빈즈를 식별하기 위한 이름
• property : 자바빈즈 프로퍼티 이름, 만약 프로퍼티 이름에'*' 를 사용하면 모든 요청 파라미터가 자바빈즈 프로퍼티의 setter( ) 메소드에 전달됨을 의미한다.
• value : 변경할 자바빈즈의 프로퍼티 값이다. 
• param : 자바빈즈의 프로퍼티 값을 전달하는 요청 파라미터의 이름이다. param과 value 동시 사용 불가

위의 코드는 글 등록하는 JSP 파일에서 form 태그로 값을 가져와서 property 에 값을 담았다 = (board 클래스 setter( ))

활용 

회원 정보 수정 작업 중

userUpdateAction.jsp 파일에서

UserDAO dao = new UserDAO();
	int result = dao.update
       (
        userID, 
        request.getParameter("name"),
        request.getParameter("password"),
        request.getParameter("email")
        );
		if(result == -1){
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("alert('회원 수정 실패.')");
			script.println("history.back()");
			script.println("</script>");
		}else{
			PrintWriter script = response.getWriter();
			script.println("<script>");
			script.println("alert('회원 수정 성공')");
			script.println("location.href = 'index.jsp'");
			script.println("</script>");
		}

UserDao update 매개변수에

세션 값으로 설정한 아이디와 함께 form 태그에서 받은 데이터 값을 다 넘겨 주었다.

UserDao.java

public int update(String id , String name, String pw, String email) {
		
String sql = "update user set name = ? , password =? , email =? where id =? ";
		

	try {
		pstmt = conn.prepareStatement(sql);
		pstmt.setString(1, name);
		pstmt.setString(2, pw);
		pstmt.setString(3, email);
		pstmt.setString(4, id);
		return pstmt.executeUpdate();
	}catch(Exception e) {
			
		e.printStackTrace();
	}finally {
		try {
		if(pstmt !=null) pstmt.close();
		if(conn !=null) conn.close();
		}catch(Exception e) {
			e.printStackTrace();
			}
		}
		
	return -1;
	}

매개변수로 아이디, 이름 , 비밀번호, 이메일을 받는다.

코드가 되게 길고 매개변수를 하나 하나 적어줘야 하는 불편함이 있다.

자바 빈즈를 사용하면

<jsp:useBean id="user" class="user.User" scope="page"/>
<jsp:setProperty property="*" name="user"/>

UserDAO dao = new UserDAO();
			
	int result = dao.update(user);
	if(result == -1){
		PrintWriter script = response.getWriter();
		script.println("<script>");
		script.println("alert('회원 수정 실패.')");
		script.println("history.back()");
		script.println("</script>");
	}else{
		PrintWriter script = response.getWriter();
		script.println("<script>");
		script.println("alert('회원 수정 성공')");
		script.println("location.href = 'index.jsp'");
		script.println("</script>");
}

매개변수에 user 객체 담아서 보내면

코드가 간결해진다.

public int update(User user) {
		
String sql = "update user set name = ? , password =? , email =? where id =? ";
		

try {
	pstmt = conn.prepareStatement(sql);
	pstmt.setString(1, user.getName());
	pstmt.setString(2, user.getPassword());
	pstmt.setString(3, user.getEmail());
	pstmt.setString(4, user.getId());
	return pstmt.executeUpdate();
}catch(Exception e) {
			
	e.printStackTrace();
}finally {
	try {
		if(pstmt !=null) pstmt.close();
		if(conn !=null) conn.close();

	}catch(Exception e) {
		e.printStackTrace();
	}
			
}
		return -1;
	}

세션설정

로그인을 성공 했을 때

sessionID라는 세션 이름과 함게 user.getId()로 로그인 했을 때 사용했던 아이디를 세션 값으로 설정하였다.

user.getId() 

값은

request.getParameter( ) 대신

자바빈즈로 값을 가져왔다.

세션활용

설정 했던 세션 이름 sessionID를 가져와서 

String sessionID = null;
if(session.getAttribute("sessionID") != null){
		sessionID = (String) session.getAttribute("sessionID");
	}

세션 값이 없으면 (로그인을 하지 않았다면)

화면에는 로그인, 회원가입 이 보이고

세션 값이 null이 아니라면 (로그인을 했다면)

로그아웃과 회원 수정 화면이 보이게 설정해두었다.

• 메인화면

<h1>메인화면</h1> <br/>
	<% 
	String sessionID = null;
	if(session.getAttribute("sessionID") != null){
			sessionID = (String) session.getAttribute("sessionID");
	}
	
	if(sessionID != null){
		
	
	%>
	<h2 id="sessionID">	<span id="sessionID"><%=sessionID %></span> 님 환영합니다. </h2>
	
	<% 
	}
    %>

세션 제거

		session.invalidate();
	

현재 세션에 저장된 모든 속성을 제거한다.

로그아웃 버튼을 눌러

<a class="dropdown-item" href="logout.jsp">로그아웃</a> 

logout.jsp 에 파일에 위해 세션 제거 코드를 넣고

<script>
			location.href= "index.jsp";
		</script>

페이지 이동을 하면 된다.

회원 탈퇴도 마찬가지다!!!!

JSP 내장 객체

※ 내장 객체(implicit object)는 JSP 페이지에서 사용할 수 있도록 JSP 컨테이너에 미리 정의된 객체 로 그 종류가 다양함.

JSP 페이지가 서블릿 프로그램으로 번역될 때 JSP 컨테이너가 자동으로 내장 객체를 멤버 변수, 메소드 매개변수 등의 참조 변수로 포함한다.

그래서 JSP 페이지에 별도의 import 문 없이 자유롭게 사용이 가능하다. 

그리고 스크립틀릿 태그나 표현문 태그에 선언을 하거나 객체를 생성하지 않고도 직접 호출하여 사용 할 수 있다.

내장 객체의 종류

※ 모든 내장 객체는 JSP 컨테이너가 관리하는 객체로, 이 중 request, session , application, pageContext를 이용하여 

속성을 관리할 수 있다. 속성은 각각의 내장 객체가 존재하는 동안 JSP 페이지 사이에서 정보를 주고받거나 공유하는데 사용된다. 

속성을 처리하는 메소드는 다음과 같이 4 종류이다.

request 내장 객체

※ JSP 페이지에서 가장 많이 사용되는 기본 내장 객체로, 웹 브라우저에서 서버의 JSP 페이지로 전달하는 정보를 저장

요청 파라미터 관련 메소드

요청 파라미터는 사용자가 폼 페이지에 데이터를 입력한 후 서버에 전송할 때 전달되는 폼 페이지의 입력된 정보 형태를 말한다. 이러한 파라미터는 <name=value> 형식으로 웹 브라우저에서 서버의 JSP 페이지로 전송 된다.

요청 파라미터는 폼 페이지에서 <input type="text"...> 처럼 입력 양식이 텍스트 유형인 경우 값을 입력하지 않으면 서버로 빈 문자열이 전송된다. 하지만 체크 박스와 라디오 버튼 유형인 경우 선택하지 않고 전송하면 요청 파라미터 자체가 전달되지 않는다.

실제로 form 태그 에서 값을 지정해서 데이터를 전송하면 request.getParameter로 값을 가져왔었다.

그런데, 글 상세보기 화면 구현 중...

Board 객체의 값을 넣어서 상세보기 화면을 구현한다.

BoardDAO에 있는 detail함수 매개변수에 해당 게시글 번호를 넘겨준다.

detail 메소드에서는 받아온 매개변수 값으로

쿼리문을  실행한다.

이렇게 해당 게시글 번호를 매개변수로 넘겨줘야 하는데

이때 

request.getParameter("bno")

을 사용했는데

form 태그를 사용하지 않았는데

이때 request는 어떤 데이터를 요청하는 걸까? ....

form 태그 없으니깐... 웹 브라우저 Http 요청 정보인가..?

이 bno 값은 어디서 왔을 까??....

 아마  board.jsp 파일

a 태그 안에 있는 detail.jsp?bno=????    <-  여기서 데이터를 보내지 않았을 까 싶다.

jsp 파일로 화면 구현을 하는데,

table 이나 input 태그를 쓸때

하나 하나 씩 입력하면 귀찮다.

빠르게 입력해보자!!

Help -> Eclipse MarketPlace 클릭

Emmet 라이브러리를 다운 받는다.

Install를 눌러 설치를 한다.

설치가 완료 되면  업데이트 적용을 위해 재시작 할지를 묻는다.

당연히 재시작!!

이제

Ctrl +E를 눌러 빠르게 html 코드를 짜보자..

div 태그 안에 있는 클래스 이름 container를 만들고 싶으면

div.container 하고 Ctrl+ e

이번엔 table 태그에 클래스 이름을 지정하고

그안에 thead 속성  그 안 에 tr 태그 그 안에 th 태그 2개를 한 번에 만들어보자 

굿!!! 엄청 편함

자주 쓰이는 기호 몇 개를 알아두고 계속 써먹자!!

게시판 목록을 만들었는데

수많은 데이터를 한 페이지에 다 담으면 너무 많기 때문에

글 10개씩 끊어서 페이지마다 담아보자!!

쿼리문 뒤에 limit 10을 붙이면 

10개만 끊어서 보여준다.

게시글이 10개면 페이지 1개 , 11개 부터 20개까지면 페이지  2개

게시글 번호를 들고오는 쿼리

Select bno from board order by bno desc ;

여기서 내림차순으로 조회하는 order by bno desc 를 해준다.

그러면 게시물 제일 마지막 번호가 제일 위에 조회 된다.

마찬가지로 쿼리문을 실행 해주고 ResultSet 객체로 쿼리문을 반환하는데

rs.next() 이 말이 쿼리가 실행 되어 반환 한다는 말이니깐

게시글이 존재 한다는 말이다 ( Select bno ~~ 했을 때 데이터 값이 나옴)

return 값으로 rs.getInt(1) + 1

결과 값을 가져오는 게시글 번호에서  1을 더한 이유는

게시글을 10개씩 끊을 때!

조건 절에 bno < ? 성립하려면 나의 현재 게시글 번호보다 1이 더 큰 숫자를 해줘야 함!!!!

음.. 게시글 마지막 번호를 가져오는 함수 , 10개씩 데이터를 가져오는 함수 

이렇게 필요하구나!!! 

페이징이 어렵긴하다... 코린이 탈출하자...

게시판 글 등록을 해서 이제 글 번호 21이다.

현재 보이는 페이지는 1

쿼리문 ? 에 들어갈 값이 next() =22 -  (1-1)*10  이므로 22이다.

bno <22 가 되는데  이 조건식에 해당하는 값을 다 출력하는데,  limit 10이 있으니깐

bno 21 부터 10개만 출력이 된다.

이제 페이지에 따라 다른 데이터 10개씩 불러오자..

이전 버튼과 다음 버튼

한 페이지의 게시글이 10개가 넘어가면 다음 버튼이 보인다

다음 버튼을 눌렀을 때 페이지가 1씩 증가 하고 이전 버튼을 누르면 페이지가 1씩 감소한다.