MySQL+스프링부트+리액트 연결

☑️ 백엔드와 프론트 앤드의 연결

오늘은 새로접해본 MySQL(이전에는 오라클사용) + 스프링부트(gradle) + 리액트로

유저정보 불러오기(select) 와 유저정보 입력하기(insert)를 화면에 구현해 보았다.

 

🔵 MySQl 작성

  처음 사용해보는 MySQL이다. 저번에 사용했던 오라클보다는 구문이 많이 단축되어 있고 가볍다고 한다!

    - AUTO_INCREMENT는 Oracle 시퀀스 NextVal 자동으로 숫자값 증가하게 해주는 구문이다

    - 만약에 테이블이 존재하지 않으면 테이블 생성 : IF NOT EXISTS

🔵 스프링부트

[나뭇닢 모양 하단에 아래 세개의 환경설정 땅땅!!]

- src/main/resource 하단에 환경설정(application.properties/Config.properties/mybatis-config) 작성

: mybatis.mapper-locations=classpath:mappers/*.xml >에서 classpath는  " src/main/resource" 위치를 나타낸다

: mybatis-config에 작성한 "<setting name="mapUnderscoreToCamelCase" value="true" /> 은 DB에 언더스코어(_)로

   작성된 값을 java에선 카멜케이스로 표기하겠다는 선언이다!

 

[DBConfig]

- 패키지명 com.kh.common.config로 어노테이션 @Configuration, @PropertySource 시작으로  구문을 작성한다

[mapper.xml]

-  SQL-DB에서 가져올 select문과 insert문을 작성한다  - mapper에 namespace는 매퍼.자바 클래스를 작성할 주소를 

    적어주고, select, insert 태그에서 아이디는 자바클래스를 돌아댕기면서 끌고다닐 아이이니 꼭 잊지 말자!!!

[mapper.java]

-  자 이제 메퍼.java로 왔다!! 이곳이 문제 였다..난 insert로 이어진 해당구문을 정확히 알지 못해..참 힘든 지점 이였다.. 

    심지어 세미 프로젝트에서 난 insert를 맡았다구!!! 그래 이제부터 열심히 해보고 익혀보자!!! 아자아자

-  메퍼는 interface로 간단한 설계로 이해하고, {} 를 써서 구문을 실행시키진 않는다

- 매퍼는 인터페이스라고 부르고 sql호출하기위해 @mapper 어노테이션 사용하여 mapper.xml에 namespace와 매핑한다

package com.kh.mapper;

import java.util.List;
import org.apache.ibatis.annotation.Mapper;
import com.kh.dot.user;

@Mapper
public interface UserMapper {
 List<User> findAll();  // 이곳은 매퍼.xml에 select구문 id=findAll 아이다, 두개 이상일 경우 List사용 땅땅
                        // 그리고 User은 데이터를 가져와야 하니 DTO로 가준다
 void insertUser(User user);  //이곳은 매퍼.xml insert구문 id=insertUser 아이다, User은 객체이고 
                              //  사용자가 입력을 할테니 그리고 user은 User을 참조하는 변수이다
                              // void는 통보!! 그러니 return 하지 않는다

 

[dto.자바]

-  이곳에서는 처음에 MySQL에서 만들어준 테이블 정보를 하나씩 하나씩 기재한다

- 그리고 게터,세터,기본생성자,필수생성자 어노테이션 해서 롬북으로 이어준다

[servic.자바]

- 자 이제 서비스로 간다 여기서 서비스 목록만 간단히 작성해주고 imple 오버라이드 해서 각 환경에 맞게 재사용한다

- 서비스는 클라이언트가 서버에 페이지를 요청하면 컨트롤러가 반응하는데 데이터를 처리하는 과정이 없다면 뷰만 보여     주고 끝이고  db가 필요하다면 컨트롤러는 서비스로 가서 비지니스 로직을 수행한다

[serviceImpl.자바]

@Service
public class UserServiceImpl implements UserService{
   @Autowired
   UserMapper userMapper;
   
   @Override
   public List<User> findAll(){
    //관리자로 로그인 했을 때 유저 보이게 하기
    return userMapper.findAll();
    }
   @Override
   public void insertUser(User user){
        userMapper.insertUser(user)'
      }

 

[controller.자바]

자 드디어 컨트롤러다!  컨트롤러는 DB와 view를 연결해준다

@RestController
@RequestMapping("/users")
public class  UserController {
  @Autowired
  private UserService userService;
  
  @GetMapping //api 주소값 users
  public List<User> findAll {
    return userService.findAll();
   }
   
   @PostMapping
   public void insertUser(@RequestBody User user){
     userService.insertUser(user);
     }
    }

 

🔵 프론트의 실행 리액트!!

리액트는 왜 쪼갤까~~ html보다 쉬운게 맞을까... 아.. 그래..작성해본다

우선 create 앱을 설치해주고 라이터도 설치해주고 터미널에서 해당폴더에 cd명령어로 들어가주고 다 작성하고 얀스타트 해준다

[작성 순서]

-  연결을 했으니 package.json에 아래 구문을 작성 해준다!

"proxy" : "http://localhost:9010",

- js 파일을 만들어주고

- App.js에서 위 만들어준 js파일을 import하고 실행하면 아래 화면이 떳다~!

 

위 세가지 도구를 이용해서 프로젝트를 진행할텐데 코드 흐름 데이터 흐름... 등등 부족한게 많다

많이 습득하고 익혀서 파이널을 향해 나간다.. 수료 두달전 블로그에서...