9/27- jsp/servelet or 리액트( jsx, component, props)

mvc

model 1 : jsp에서 출력과 로직을 전부 컨트롤

model 2 : jsp에서는 출력만 처리

 

scope

사전적 의미: 범위,영여그살피다,스코프(관찰용기구)  

프로그램 의미:  변수가 유효성을 갖는 영역

 

scope

jsp 페이지에서 사용되는 객체들은 jsp 내장 객체이든 페이지 내에서 만들어졌던 간에 모두 정해진 영역 안에서만 사용 가능

 

page scope: 실제 선언된 jsp 페이지 내에서만 사용가능

pagecontext내장객체로 사용 가능

저장된 값은 저장한 페이지 내에서 지역변수로 사용

 

<Request>

 

값저장 방법

pagecontext.setAttribute(네임값(string), 실제값(object))

pageContext.getAttribute(네임값(string)

 

주사용 용도

- 클라이언트 요청을 다룰 때 사용

- forward로 데이터 넘겨서 유지하고자 할 때 사용

- pagescope에 값을 저장한 후 el 표기법 사용

- 해당 jsp나 servlet이 실행되는 동안에만 정보 유지하고자 할 때 사용

 

request scpe: 클라이언트로부터 요청을 받고 응답할 때까지 사용가능

                       - httpServletRequest객체로 사용 가능

                       - service()메소드가 끝날 때 객체가 없어짐

 

forwarding은  request 영역을공유한다

 

redirecting은 요청2번 응답 2번공유객체가 다르다

 

<sesstion>

Session scope: 세션이 유지되는 동안 사용가능

- httpSession객체로 사용가능

- 웹 브라우저 별(chrome,safari등)변수 관리하는 영역

<Application>

Application scope: 웹 어플리케이션이 시작되고 종료될 때까지 사용가능

- servletContext객체로 사용가능

- 웹 어플리케이션 당 한 개의 객체 사용

maven project 환경설정

 

<maven의 장점>

- 라이브러리 관리가 매우 용이함

- 정해진 빌드 방법을 사용해 협업에 유리

- 다양한 플러그인을 통해 많은 작업이 자동화

[MavenSample]

<join.con.java>

package com.smhrd.controller;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.smhrd.model.Member;

public class JoinCon extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//요청 데이터 인코딩방식 지정
		request.setCharacterEncoding("UTF-8");
		
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		String nick = request.getParameter("nick");
		
		Member vo = new Member(id, pw, nick);
	}

}

<SqlSessionManager.java>

package com.smhrd.database;

import java.io.IOException;
import java.io.Reader;

import org.apache.ibatis.io.Resources;
import org.apache.ibatis.session.SqlSessionFactory;
import org.apache.ibatis.session.SqlSessionFactoryBuilder;

//myBatis 설정파일(mybatis-config.xml) 내용을 읽어서 db 커넥션 후 세션 반환 
//SqlSessionFactoryBuilder : config 파일 바탕으로 SessionFactory 생성
//SqlSessionFactory: Session 생성
//SqlSession:sql 실행, 트랜잭션 관리
public class SqlSessionManager {
	public static SqlSessionFactory sqlSession;
	
	static {
		String resource = "com/smhrd/database/mybatis-config.xml";
		Reader reader;
		try {
			reader = Resources.getResourceAsReader(resource);
			sqlSession = new SqlSessionFactoryBuilder().build(reader);
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	
	//생성된 factory 반환
	public static SqlSessionFactory getSqlSession() {
		return sqlSession;
	}
}

<mybatis-config.xml>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
	<environments default="development">
        <environment id="development">
            <transactionManager type="JDBC"/>
            <dataSource type="POOLED">
                <property name="driver" value="oracle.jdbc.driver.OracleDriver"/>
                <property name="url" value="jdbc:oracle:thin:@localhost:1521:xe"/>
                <property name="username" value="hr"/>
                <property name="password" value="hr"/>
            </dataSource>
        </environment>
    </environments>
    
</configuration>

<member.java>

package com.smhrd.model;

public class Member {
	private String id;
	private String pw;
	private String nick;
	
	public Member(String id, String pw, String nick) {
		this.id = id;
		this.pw = pw;
		this.nick = nick;
	}
	
	public String getId() {
		return id;
	}
	public String getPw() {
		return pw;
	}
	
	public String getNick() {
		return nick;
	}
}

<memberDAO>

package com.smhrd.model;

import org.apache.ibatis.session.SqlSession;
import org.apache.ibatis.session.SqlSessionFactory;

import com.smhrd.database.SqlSessionManager;

public class MemberDAO {
	SqlSessionFactory sqlSessionFactory = SqlSessionManager.getSqlSession();
	SqlSession sqlSession = sqlSessionFactory.openSession();
}

[src>webapp>index]

<html>
<body>
<h2>Hello World!</h2>
</body>
</html>

[src>webapp>join]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="JoinCon" method="post">
		ID : <input type="text" name="id"><br>
		PW: <input type="password" name="pw"><br>
		NICK : <input type="text" name="nick"><br>
		<input type="submit" value="회원가입">
	</form>
</body>
</html>

[src>webapp>main]

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<a href="join.jsp"><button>회원가입</button></a>
</body>
</html>

 

 

<mybatis>

자바 지속성(persistanc)프레임워크

XML.Annotation을 사용하여 저장 프로시저나 SQL문으로 객체들을 연결

 

MyBatis 사용법

1. 기존 DAO 클래스 방식

2. Mapper interface 방식

3. Annotation 방식

---

오후 리액트

리액트의 꽃!

1.컴포넌트

2.프로퍼티(props)

3. state

 

컴포넌트(component)

1. 리액트로 만들어진 앱을 이루는 최소 단위

내가 원하는 기능을 '태그화'시킨다

2. component 폴더 생성 & 파일 생성

component -> 파일이름.js 생성(대문자) 이때, 주의할 점! 컴포넌트의 이름은 반드시 대문자로 시작할 것!

 

 

rafce: 컴포넌트의 구조를 만드는 단축키

컴포넌트: 리액트로 만들어진 앱을 이루는 최소 단위, 반복되는 코드를 하나로 묶어 컴포넌트로 만든다 내가 원하는 코드를 묶어 '태그화' 시킨다. 반드시, 대문자로 시작! -> 기존의 HTML 태그와 구분

 

3.컴포넌트 파일 관리

4.내보낸 컴포넌트 불러오기

EX) 컴포넌트

내가 원하는걸 묶어서 태그화 시킨다!

 

[컴포넌트 사용 시 주의사항]

컴포넌트의 이름은 반드시 대문자로 시작해야 한다

리액트가 컴포넌트와 일반 HTML 태그를 구분할 수 있어야 한다. 그렇기 때문에 리액트에서는 일반 HTML 태그를 구분할 수 있어야 한다. 그렇기 때문에 리액트에서는 일반 HTML 태그는 소문자로, 컴포넌트는 반드시 대문자로 시작해야 한다!

 

[props]

props(프로퍼티)

상위 컴포넌트가 하위 컴포넌트에 값을 전달할 때 사용한다. 상위 컴포넌트에서 값을 입력하고, 하위 컴포넌트에서는 값을 읽어온다.

 

[props 상위 컴포넌트]

props(프로퍼티)사용방법

문자열을 전달할 때는 큰따옴표를("") 문자열 외의 값을 전달할 때는 중괄호 ({})를 사용한다

 

[props 하위 컴포넌트]

props(프로퍼티)사용방법

<App.js>

import './App.css';
import Menu from './Components/Menu';

function App() {
   //rafce: 컴포너트의 구조를 만드는 단축키
    //컴포너트": 리액트로 만들어진 앱을 이루는 최소 단위
    //          반복되는 코드를 하나로 묶어 컴포넌트로 만든다
    //          내가 원하는 코드를 묶어 '태그화'시킨다
    // 반드시, 대문자로 시작! => 기존의 HTML 태그와 구분

    //프로퍼티(props)
    //상위 컴포넌트가 하위 컴포넌트에 값을 전달할때 사용
    //상위 컴포넌트: <컴포넌트이름 속성="값"/>
    //        단순 문자열? "값"
    //        변수 사용? {변수이름}
    //하위 컴포넌트의 매개변수로 값(Object)을 전달 받는다 
    //                매개변수, 속성

    let blackTea = '블랙티'
  return (
    <div>
      <Menu name="바닐라라떼" price="4500원"></Menu>
      <Menu name={blackTea} price="4300원"></Menu>
      <Menu name="아메리카노"></Menu>
    </div>
  );
}

export default App;

<menu.js>

import React from 'react'

            //Case 1) 매개변수 props => props.name
            //Case 2) 객체 안의 속성 => {name}
const Menu = ({name,price})=> {
    
    return(
        <div>
            <h1>{name}</h1>
            {/* 값이 들어있지 않은 경우?
            값 O => true
            값 X => false
            => 삼항연산자 이용
            */}
            {price? <p>{price}</p> :<p>3500원</p>}
            
        </div>
    )
}

export default Menu

<index.js>

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

    <App />

);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

[컴포넌트 & props 예제]

컴포넌트와 props를 이용해서 르세라핌을 소개하는 페이지를 만들어보자!

 

<AppExample.js>

import React from 'react'
import Member from './Components/Member'

const AppExample = () => {

    // 팀원을 소개하는 페이지를 만들어보자!
    // 단, component 와 props를 이용해서 만들 것

    // 조건
    // 1) Member.js 라는 컴포넌트를 이용할 것
    // 2) 스타일은 객체 형태로 삽입할 것
    //           참고) project01 -> src -> App.js

let team = '르세라핌'

  return (
    <div>
        <Member teamName={team}MemberName="사쿠라"/>   
        <Member teamName={team}MemberName="김채원"/>   
        <Member teamName={team}MemberName="카즈하"/>   
        <Member teamName={team}MemberName="허윤진"/>   
        <Member teamName={team}MemberName="홍은채"/>   
    </div>
  )
}

export default AppExample

<index.js>

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';

//(1) 개념 정리 : App
//(2) 예제: AppExample
import App from './AppExample';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(

    <App />

);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

<member.js>

import React from 'react'

// 매개변수로 object 를 적을 때 주의!
// 1) ({속성}) => 중괄호 생략 금지!
// 2) 다중 속성을 가져올 때  ({속성},{속성}) => xxxx금지!
//                          ({속성,속성}) => OOOO 하나의 객체 안에 다중 속성

const boxStyle={
    backgroundColor:'ivory',
    border:'1px solid brown',
    textAlign:'center',
    marginTop: '20px',
    borderRadius: '10px',
}

const Member = ({teamName,MemberName}) => {
  return (
    <div style={boxStyle}>
        <h2>{teamName}</h2>
        <h4>{MemberName}</h4>
    </div>
  )
}

export default Member

 

[정리]

1) JSX => HTML + CSS

 

a. 감싸준느 하나의 커다란 상위 태그가 필요함

b. 무조건 끝태그가 존재! => "컴포넌트도 마찬가지"

c. class 대신 className =>

d. return() <- JS 문법은 {}

                 return 문 안 {} => if 문 사용 x => 삼항 연산자 => && 연산자

e. 스타일 => 객체형태로 삽입 , css로도 사용 가능

 

2)  Component

 

    => 반복되는 코드를 하나로 묶어서 사용 => 내가 원하는 코드를 "태그화"

  => 예외 없이 무조건!!!! 대문자로 시작

   =>직접적으로 스타일 지정 x
<Menu style ={style}/> XX

 

3) Props

- 상위 컴포넌트: 값을 전달해줄 컴포넌트

- 하위 컴포넌트: 값을 전달받은 컴포넌트

 

상위

<컴포넌트 이름 속성 = "값"/>

<컴포넌트 이름 속성 = {변수이름}/>

 

하위

1) 매개변수 props => const Member = (props) => {props.menu}

2) 속성 값 {속성이름}

const Member =({name, value}) => {}