20230626 수업내용🤦‍♂️🤦‍♂️🤦‍♂️

웹브라우저에서 F12 소스보기를 누르면 어떠한 것들이 사용되고있는지 볼수 있다.

<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>

웹브라우저는 위 코드를 javascript로 불러들여 해석해서 해당 페이지에서 해석하여 함수로써 사용한다.

jquery는 jquery만의 메소드를 가진 배열을 return 해준다.

5개의 참조값을 return해주는 $("div").text("hi");는

let divs = document.querySelectorAll("div");
for(let i=0; i<divs.length; i++){
	let tmp = divs[i];
    tmp.innerText="hi";
}

와 비슷하다.

배열타입의 object라서 뒤에 계속해서 추가적으로 사용가능하다.

first()메소드로 첫번째 div만 지정해서 적용해 보기

추출(읽어오는 동작)받은 값에 대해서는 적용하는 행위는 할 수 없다.

입력은 가능!

 

 

1교시 jqeury다음으로는 Spring시간

새로운 프로젝트를 만들고 Spring 셋팅을 끝냈다.

퀀텀 db를 이용해 기존 테이블을 연동해주고 기존 비빌번호를 암호화 시켜줄 것이다.

 

mapper 폴더를 생성해주고 그안에 UsersMapper.xml의 기본틀 만들어준다,

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
   "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="users">

</mapper>

Configuration.xml에 가서 typeAliases를 초기화 시켜주고 sql문을 작성한 Mapper.xml문서가 어디있는지 목록을 작성할 코드부분을 작성해준다,

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE configuration
  PUBLIC "-//mybatis.org//DTD Config 3.0//EN"
  "http://mybatis.org/dtd/mybatis-3-config.dtd">
<configuration>
	<!-- 자주사용하는 type의 별칭을 등록 해놓고 Mapper xml에서 사용할 수 있다. -->
	<typeAliases>
	
	</typeAliases>
	
	<!-- sql 문을 작성한 Mapper xml 문서가 어디에 있는지 목록을 적성해야 한다. -->
	
	<mappers>
		<mapper resource="mapper/UsersMapper.xml"/>
	</mappers>
</configuration>

servlet-context.xml 에서 MyBatis 기반으로 DB연동하기 위한 설정 코드

<?xml version="1.0" encoding="UTF-8"?>
<beans:beans xmlns="http://www.springframework.org/schema/mvc"
   xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
   xmlns:beans="http://www.springframework.org/schema/beans"
   xmlns:context="http://www.springframework.org/schema/context"
   xsi:schemaLocation="http://www.springframework.org/schema/mvc https://www.springframework.org/schema/mvc/spring-mvc.xsd
      http://www.springframework.org/schema/beans https://www.springframework.org/schema/beans/spring-beans.xsd
      http://www.springframework.org/schema/context https://www.springframework.org/schema/context/spring-context.xsd">

   <!-- DispatcherServlet Context: defines this servlet's request-processing infrastructure -->
   
   <!-- Enables the Spring MVC @Controller programming model -->
   <annotation-driven />

   <!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
   <resources mapping="/resources/**" location="/resources/" />

   <!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
   <beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
      <beans:property name="prefix" value="/WEB-INF/views/" />
      <beans:property name="suffix" value=".jsp" />
   </beans:bean>
   
   <context:component-scan base-package="com.gura.spring04" />
   
          <!-- 
            JNDI 데이터 소스 객체 얻어오는 설정   
            Servers/context.xml 에 설정된 oracle 접속정보 가 있어야 된다. 
             
            <Resource name="jdbc/myoracle" auth="Container"
                    type="javax.sql.DataSource" driverClassName="oracle.jdbc.OracleDriver"
                    url="jdbc:oracle:thin:@127.0.0.1:1521:xe"
                    username="scott" password="tiger" maxTotal="20" maxIdle="10"
                    maxWaitMillis="-1"/>          
         -->
         
         <beans:bean id="dataSource" 
            class="org.springframework.jndi.JndiObjectFactoryBean">
            <beans:property name="jndiName" value="java:comp/env/jdbc/myoracle"/>
         </beans:bean>
         
         <!-- 
            위는 아래의 코드와 같다
            dataSource = new JndiObjectFactoryBean();
            dataSource.setJndiName("java:comp/env/jdbc/myoracle");
          -->
         
         
         <!-- 
            SqlSessionFactory 객체 
            Configuration.xml 문서가 어디에 있는지 알려야 한다. 
            value 에서 classpath: 은  src/main/resources 폴더를 가리킨다. 
            따라서  classpath:Configuration.xml 은  src/main/resources 폴더안에 존재 해야 한다. 
         -->
         <beans:bean id="sessionFactory" 
            class="org.mybatis.spring.SqlSessionFactoryBean">
            <beans:property name="dataSource" ref="dataSource"/>
            <beans:property name="configLocation" value="classpath:Configuration.xml"/>
         </beans:bean>
         
           
         <!-- 
            sessionFactory=new SqlSessionFactoryBean();
            sessionFactory.setDataSource(dataSource);
            sessionFactory.setConfigLocation("classpath:Configuration.xml");
          -->
         
      
         <!-- 
            SqlSession 인터페이스를 구현한 
            SqlSessionTemplate(SqlSession) 객체 
            Dao 가 의존하는 객체 
         -->
       <beans:bean id="sqlSessionTemplate" class="org.mybatis.spring.SqlSessionTemplate">
            <beans:constructor-arg name="sqlSessionFactory" 
               ref="sessionFactory"/>
         </beans:bean>
         
   
   
</beans:beans>

회원정보를 저장 삭제 수정 조회하는 Dao 메소드를 담는 interface를 만들어준다

package com.gura.spring04.usert.dao;

import com.gura.spring04.usert.dto.UsersDto;

public interface UsersDao {
	
	//인자로 전달된 아이디가 존재하는지 여부를 리턴하는 메소드
	public boolean isExist(String inputId);
	//인자로 전달된 가입하는 회원의 정보를 DB에 저장하는 메소드
	public void insert(UsersDto dto);
	//인자로 전달하는 아이디에 해당하는 정보를 리턴하는 메소드
	public UsersDto getData(String id);
	//비밀번호를 수정하는 메소드
	public void updatePwd(UsersDto dto);
	//개인정보를 수정하는 메솓,
	public void update(UsersDto dto);
	//회원정보를 삭제하는 메소드
	public void delete(String id);
}

만드는 순서👉

dto를 만들어준 후 dao 인터페이스 -> daoImpl 예)=> session.insert("users.insert",dto); ->UsersMapper.xml에서 DB insert구문 완성

configuration.xml에서 typeAliases로 파라미터 데이터타입 별칭 만들어주기

<typeAliases>
		<typeAlias type="com.gura.spring02.users.dto.UsersDto" alias="usersDto"/>
</typeAliases>

UsersMapper.xml에서 insert문 완성하기

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" 
   "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="users">
	<insert id="insert" parameterType="usersDto">
		INSERT INTO users(id, pwd, email, regdate)
		VALUES(#{id}, #{pwd}, #{email}, SYSDATE)
	</insert>
</mapper>

getData(id를 입력하면 전체를 조회하는 select문 만들기

<select id="getData" parameterType = "string" resultType = "usersDto">
		SELECT id, pwd, profile, email, regdate
		FROM users
		WHERE id = #{id}
	</select>

prarameterType에 string은 소문자로 적어도된다( MyBatis안에서)

#{id} 에서 id는 아무값이나 적어도 상관없다 => 바인딩 될 값은 하나뿐이라서 무관하다.

selectOne을 쓰는 경우는 select되는 row 하나가 확실한 경우에만 사용한다.(하나의정보를 조회할때=>한명의회원정보)

List<> => 전체의 정보를 조회할때 여러개의 row(다수의 게시글이나 여러명의 회원목록 등등)

	<update id="updatePwd" parameterType = "usersDto">
		UPDATE users
		SET pwd = #{newPwd}
		WHERE id = #{id}
	</update>
	<update id="update" parameterType = "usersDto">
		UPDATE users
		SET email = #{email}, profile = #{profile}
		WHERE id = #{id}
	</update>
	<delete id="delete" parameterType = "string">
		DELETE FROM users
		WHERE id = #{id}
	</delete>
</mapper>

비밀번호 수정 / 메일주소, 프로필 수정 / 회원정보삭제 구문 추가

public boolean isExist(String inputId) {
		//전달된 아이디로 select해서
		UsersDto dto = session.selectOne("users.getData", inputId);
		//아이디의 존재 여부를 알아내서 (null이면 존재하지 않고, null이 아니면 존재한다)
		boolean isExist = dto == null ? false : true;
		return isExist;
	}

아이디가 존재하는지 않하는지 알아보는 메소드

package com.gura.spring04.users.service;

import com.gura.spring04.usert.dto.UsersDto;

public interface UsersService {
	public void addUser(UsersDto dto);

}

 이 메소드를 이용해 암호화를 할 것이다.

package com.gura.spring04.users.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;

import com.gura.spring04.usert.dao.UsersDao;
import com.gura.spring04.usert.dto.UsersDto;

public class UsersServiceImpl implements UsersService{

	@Autowired
	private UsersDao dao;
	
	@Override
	public void addUser(UsersDto dto) {
		//비밀번호를 암호호화해줄 객체를 생성
		BCryptPasswordEncoder encoder = new BCryptPasswordEncoder();
		//암호화된 비밀번호를 얻어내서
		String encodedPwd = encoder.encode(dto.getPwd());
		//UsersDto 객체에 다시 담고
		dto.setPwd(encodedPwd);
		//UsersDao 객체를 이용해서 DB에 저장하기
		dao.insert(dto);
	}
	
}

암호화된 객체를 추가해서 db에 저장하기

package com.gura.spring04.users.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

import com.gura.spring04.users.service.UsersService;
import com.gura.spring04.usert.dto.UsersDto;

@Controller
public class UsersController {
	
	@Autowired
	private UsersService service;
	
	@RequestMapping(method = RequestMethod.POST, value = "/users/signup")
	public ModelAndView signup(ModelAndView mView, UsersDto dto) {
		service.addUser(dto);
		mView.setViewName("users/signup");
		return mView;
	}
	/*
	 *	GET 방식 / users/signup_form 요청을 처리할 메소드
	 *	- 요청방식이 다르면 실행되지 않는다.
	 *
	 */
	@RequestMapping(method = RequestMethod.GET, value =  "/users/signup_form")
	public String signupForm() {
		
		return "users/signup_form";
	}
}

컨트롤러에 addUser()메소드 매핑하기.

 

Bcrypt 클래스의 static 메소드를 이용해서( checkpw( ) )이용해서 입력한 비밀번호와