[리액트]todoList연동

☑️ 리액트 와 스프링부트 의 연동

 - 깃허브에 'springboot-react' 레포지토리를 생성한다.

 -  C:\Users\user1 경로에 'Spring-React-Workspace' 폴더를 생성한다

 -  해당폴더 주소에 'cmd'를 입력한다.( 여기서 깃허브와 해당폴더를 연결한다)

     git init ->  git 허브에 생성된 레포지토리를 입력한다  보통 주소는 'https://github.com/jinhwa2/springboot-react.git' 이다.

 => 이것이 바로 깃허브 레포지토리( 'springboot-react') 와 C:\Users\user1 경로에 'Spring-React-Workspace' 폴더를 

     연동해준다, 주소가 동일한지는 config에서 확인이 가능하다

 - 그럼 이제 스프링부트로 가서 " Spring-React-Workspace" 폴더로 접속경로를 설정한 후 스프링부트에서

    새로운 프로젝트를 생성한다.

1 ~ 3 번은 폴더명과 패키지명을 설정해주고 노란색 부분은 크게 신경쓸 것은 없다!!! 그리고 나서 아래 부분을 환경설정에 추가 해준다!

 

💠 환경설정 들

위와 같이 'TodoList-Backend' 를 이클립스전산 내 스프링부트 gradle(코끼리모냥) 으로 준비 땅땅땅 해준 후,

규칙을 준수하여 아래와 같이 코딩 하였다.

우선, todo패키지에서 'common.config' 에 DBConfig.java 코드를 작성한다.

package todo.common.config;
[임포트 생략].. 정말 많은 임포트가 있다고

@Configuration //기능설정이라는 어노테이션
@PropertySource("classpath:/config.properties")
public class DBCOnfig {
 
 @Autowired
  private ApplicationContext applicationContext;
  // 현재 만든 TodoList-backend라는 폴더 흐름
 @Bean
 @ConfigurationProperties(prefix = "spring.datasource.hikari")
  public HicariConfig hicariConfig() { //hikari = DataBase를 연결하기 위해 이용하는 기능
     return new HikariConfig(); 
   }
    // 연결된 DB를 스프링에서 인지하고 관리할 것을 표기
    @Bean
   public DataSource dataSource(HikariConfig config) {
      DataSource dataSource = new HikariDataSource(config);
      return dataSource;
     }
     
     //****  마이바티스 설정 추가 ***///
     @Bean
     public SqlSessionFactory sessionFactory(DataSource dataSource) throws Exception {
          SqlSissionFactoryBean sfb = new SqlSessionFactoryBean();
          sfb.setDataSource(dataSource);
          //Select Insert Update Delete가 작성된 매퍼 파일이 모여있는 폴더 경로 설정
          //src/main/resources 바로 밑에 있는 mappers 폴더 안에 작성된
          //xml로 끝나는 모든 파일을 바로보겠다는 **(모두바라보기) 라는 표시 작성
          //classpath = src/main/resources  
          sfb.setMapperLocations(applicatonContext.getResources("classpath://mappers/**.xml"));
          
          //DTP 모델이 있는 패키지 설정
          //Aliase = 별명, 별칭 Aliases = 별칭들
          //DATABASE 작성한 컬럼명과 DTO에 작성한 컬럼명이 다를 때 특정 별칭과 특정 컬럼명이 일치하다는 것을 명시하기 위해
          //DTO 위치 폴더를 작성
          sfb.setTypeAliasesPackage("todo.dto"); //***** 추후 본인의 dto 패키지명으로 변경 요망
          
          //마이바티스에서 DB와 컬럼에 어떤 설정을 해주고 설정에 대한 정보를 어디에 작성했는지
          //마이바티스 설정 경로와 파일명 작성
          sfb.setConfigLocation(applicationContext.getResource("classpath:mybatis-config.xml"));//추후 파일명, 경로가 변경된다면 변경요망
          return sfb.getObject();
         }
         //기본 SQL 실행한다음 insert update delete 실행
         @Bean
         public SqlSessionTemplate sqlSessionTemplate(SqlSessionFactory sf) {
           return new SqlSessionTemplate(sf);
          }
          //전반적인 commit과 rollback과 같은 관리를 해주는 트랜잭션 메니저
          @Bean
          public DataSourceTransactionManager dataSourceTransactionManager(DataSource dataSource) {
            return new DataSourceTransactionManager(dataSource);

 

♦ src/main/resource 경로 아래에 application.properties, config.properties(앞에것 복사 붙여넣기),mybatis-config.xml

[mybatis-config.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>
    <settings>
    <!--mybatis에서 null 값을 처리하는 방법을 지정하는 설정
        DB나 Java에서 가져오는 값이 null일 떄 이것을 어떻게 처리할 것인가?
        value에 Null 작성하면 NULL이 들어갈 것이고
        value = VARCHAR2 나 int 특정 값으로 null을 db에 전달하겠다. 라는 설정 -->
        
       <setting name=jdbcTypeForNull" value="NULL" />
              <!--Under score = todo_name 과 같이 중간에 _ 들어가는 것을 언더 스코어
               Camel Case = todoName 과 같이 중간에 대문자가 들어가는 것을 카멜케이스
               DB에 언더스코어로 작성된 값을 java에선 카멜케이스로 표기하겠다 선언 --!>
        <setting name="mapUnderscoreToCamelCase" value="true" />
       </settings>
    </configuration>

 

♦ mappers폴더 내 todo-mapper.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="todo.mapper.TodoMapper">
  <select id="idCheck">
   SELECT COUNT(*) FROM TODO_MEMBER WHERE ID = #{id}
  </select>
  <insert id="singup">
    INSERT INTO TODO_MEMBER
    VALUES(SEQ_TODO_MEMBER_NO.NEXTVAL, #{id},#{pw},#{name})
   </insert>
   
   <select id="Login" resultType="TodoMember">
     SELECT *FROM TODO_MEMBER
     WHERE ID = #{id}
     AND PW = #{pw}
     <!--selectTodoList 할 일 목록 전체 보는 mapper -->
     <!--한 명이 아닌 여러명의 사용자가 TODO 테이블에 작성한 수많은 할 일 있음
         todoMemberNo 특정멤버 번호를 연동해서 특정멤버의 할 일만 보여주겠다. -->
         
      <select id="selectTodoList" resultType="Todo">
       SELECT *FROM TODO
       WHERE TODO_MEMBER_NO = #{todoMemberNO}
       ORDER BY 1
       </select>
     <!--DB에 있는 TODO 테이블에서 해당번호 할 일이 완료 되었는지 isDone으로 완료 여부 수정 -->
     <update id="update">
       UPDATE TODO
       SET IS_DONE = #{isDone}
       WHERE TODO_NO = ${todoNo}
       </update>
      <delete id="delete">
        DELETE FROM TODO
        WHERE TODO_NO = ${todoNo}
       </delete>
       
       <insert id="insert" useGeneratedKeys="true">
         <selectKey order="BEFORE" keyPorperty="todoNo" resultType="_int">
           SELECT SEQ_TODO_NO.NEXTVAL FROM DUAL
           </selectKey>
           INSERT INTO TODO
           VALUES(${todoNo},#{title},default, ${todoMemberNo})
           </insert>
         </mapper>

 

♦ todo.mapper.java 작성  →  ♦ TodoServiceImpl.java  → TodoService.java → Todo.java → todo.dto.TodoMember.java

   todo.controller.java

 

💠 자바에 작성한 백앤드 내용과 프론트엔드 연결

C:\Users\user1 경로에 'Spring-React-Workspace 에서 주소창에 cmd입력 후

주소창에 npx create-react-app todolist-frontend 입력

[명령어]

C:\Users\user1\Spring-React-Workspace>npx create-react-app todolist-frontend

Creating a new React app in C:\Users\user1\Spring-React-Workspace\todolist-frontend.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts with cra-template...

 

💠프론트엔드 package.json에 백엔드 주소 : 포트 와 연결하기 위해 설정

"proxy" : "http://localhost:9007",  그리고 .env 파일 생성 후 포트번호 입력

 

💠 리액트 fetch 와 controller 연결

[React fetch 구문]
fetch("/todo", { //TodoController에서 /todo 라는 URL 주소에서 DB에 값 추가하기
   method: "post".
   headers: {'Content-Type' : 'applicateion/json'},
   bocy: JSON.stringify({
   title: inputTodo,
   todoMemberNo : loginMember.todoMemberNo
   })
 [TodoController.java]
 @PostMapping("/todo")
 public int insert(@RequestBody Todo todo) {
     return service.insert(todo)
    }