토이 프로젝트를 진행하면서 DB를 사용할 일이 생겼다.
백 개발자를 따로 구하지 않았기 때문에 이번에 한 번 해보자고 생각하며 처음 스프링에 대해서 알아가게 되었다.
우선 Flutter에 화면 구성은 웬만큼 되어 있는 상태였기 때문에, DB를 생성해서 연결하는 작업이 필요했다.
처음 접해보는 스프링이다 보니, 어떻게 해야 할지 막막했는데 찾아서 하다 보니 되긴 되더라. 백을 공부하고 있던 애인의 도움도 많이 받았다.
일단 스프링을 처음 해본 후기는 딱 한 줄이다.
설정이 정말 힘들다.
설정하면서 이런저런 오류가 계속 발생해서 서버를 새로 만들었다가 프로젝트를 새로 만들었다가 몇 번을 반복했는지 모르겠다.
다들 설정이 더럽다고 하는 데는 이유가 있었다.
그래도 하는 김에 제대로 해보려고 Spring Study도 신청했다.
현재 GDSC에 소속되어 있어서, 우리 학교 GDSC에서 열리는 스프링 스터디 분야에서 공부해보기로 했다. 조금 걱정되긴 하지만 뭐, 잘 할 수 있겠지.
이 포스팅은 서버와 스프링 연결이 완료되었고, 플러터에 프론트가 어느정도 완성되었다는 것을 기반으로 한다는 점을 미리 알린다.
참고로 나는 MariaDB와 MySQL 워크벤치를 사용했다.
Flutter의 코드부터 살펴보겠다.
나는 user를 스프링 부트 프로젝트에 전송해서 DB에 저장하는 코드가 필요했다.
그러기 위해서 user_model.dart 파일에 User 데이터 모델부터 정의해보자.
class User {
final String? nickname;
final String? major;
final String? gender;
User({required this.nickname, required this.major, required this.gender});
factory User.fromJson(Map<String, dynamic> json) {
return User(
nickname: json['nickname'],
major: json['major'],
gender: json['gender']);
}
Map<String, dynamic> toJson() => {
'nickname': nickname,
'major': major,
'gender': gender,
};
}위와 같이 fromJson, toJson를 통해 Json으로의 변환이 가능하게 해줬다.
DB에는 uId라는 애트리뷰트가 하나 더 있지만, autoIncrease로 생성해둬서 굳이 플러터에서 설정할 필요가 없다.
데이터 클래스를 만들었으니 서비스 해줄 차례다.
나는 용이한 사용을 위해 service 디렉토리에 db_server.dart 파일을 만들어 분리했다.
Future<void> saveUser(User user) async {
try {
final response = await http.post(
Uri.parse("http://server-uri/user"),
headers: <String, String>{
'Content-Type': 'application/json; charset=UTF-8',
},
body: jsonEncode(user.toJson()),
);
if (response.statusCode != 201) {
throw Exception("Failed to send data");
} else {
print("User Data sent successfully");
Get.to(const HomePage());
}
} catch (e) {
print("Failed to send user data: ${e}");
}
}
- Future saveUser(User user) async){...}: 비동기 처리로 진행
- try-catch: 예외 처리
- Uri.parse(""): 서버와 연결
- 'Content-Type': 'application/json; charset=UTF-8':
http 메시지를 json으로 변환해서 전송, charset을 UTF-8로 사용- jsonEncode(user.toJson): 인코딩
이 정도로 간단히 설명할 수 있을 것 같다.
server-uri에는 본인의 서버 주소를 넣으면 된다.
위의 saveUser 함수는 아래와 같이 사용할 수 있다.
DBService dbService = DBService();
dbService
.saveUser(User(nickname: nickname, major: major, gender: gender));그럼 이제 스프링 부트에 플러터를 연결할 준비가 끝났으니, 스프링 코드를 작성해줘야 한다.
나는 vscode에서 스프링 작업을 하다가 중간에 뭘 잘못 건드렸는지 온통 빨간줄이라 IntelliJ로 갈아탔다.
연결을 해주기 위해선 스프링에서 테이블을 생성해야 하므로 플러터와 마찬가지로 User 데이터 클래스를 만들어준다.
@Entity
@Table(name = "user")
@Getter
@Setter
@AllArgsConstructor
@NoArgsConstructor
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
@Column(name = "uId")
private Long uId;
@Column(name = "nickname")
private String nickname;
@Column(name = "major")
private String major;
@Column(name = "gender")
private String gender;
}필요한 애트리뷰트들을 선언해줬다.
uId는 앞서 말했던 것처럼 AI 속성이므로 @GeneratedValue 어노테이션을 붙여줬다.
그 다음은 UserRepository 클래스로 레포지토리를 만들어준다. 한 줄이면 끝난다.
public interface UserRepository extends JpaRepository<User, Long> {}그 다음에는 매핑을 위한 UserController 파일을 만들어준다.
@RestController
@RequestMapping("/user")
public class UserController {
@Autowired
private UserService userService;
@PostMapping(produces = "application/json")
public ResponseEntity<User> saveUser(@RequestBody User user) {
User savedUser = userService.saveUser(user);
return new ResponseEntity<>(savedUser, HttpStatus.CREATED);
}
}플러터에서 스프링 부트로 데이터를 전송할 때 필요한 코드다.
- @RequestMapping: 매핑 요청을 /user로 받음
- @PostMapping(produces = "application/json"): Post 타입으로 매핑하며 json 형태로 받아옴
위의 두 가지 어노테이션만 알아두면 될 것 같다.
사실 스프링 한지 얼마 안 돼서 나도 잘 모른다. 추후에 더 공부해서 스프링에 대한 게시물도 포스팅할 예정이다.
그리고 마지막으로 데이터를 서비스 해주기 위한 UserService 파일을 만들어준다.
@Service
public class UserService {
@Autowired
UserRepository userRepository;
public UserService(UserRepository userRepository) {
this.userRepository = userRepository;
}
public User saveUser(User user) {
return userRepository.save(user);
}
}
- @Autowired: 의존성 주입 어노테이션
- save(): 데이터 업데이트
이 정도로 간단하게 설명이 끝나겠다.
이렇게 코드 작성을 모두 완료하고 서버를 돌린 후 여기에 정보를 모두 입력하고
가입 버튼을 눌러주면
이렇게 전송이 완료되었다는 로그와 함께
전송이 완료된 것을 확인할 수 있다.
이 간단한 코드를 짜는데 꽤나 시간을 잡아먹었지만, 하고 나니 괜히 뿌듯해진다.
다음 게시물도 스프링에 관해 올려보겠다.
