목차
- Python to Java
0. 웹 개발 종합반 1 - 5주 완강 후기
웹 개발 종합반은 항해에서는 제공해주는 사전 강의로 '웹 개발이란 이런 것이다.' 이 정도를 알려주는 느낌이다.
과정중에는 AWS로 EC2로 원격 서버를 여는다. 독학할 때 과금 폭탄 먹었던 기억이 떠올라 적잖은 PTSD를 느낄 수 있었다. 그래도 혼자 공부할 때는 EC2가 뭔지도 몰랐고 리눅스? 이런건 뭐야... 서버를 어떻게 접속하는지도 몰랐다.
물론 지금도 모른다. 강사님이 주신 코드를 따라 친 것이니까
그래도 웹 개발의 대략적인 흐름을 알 수 있어 좋았다.
1. Python to Java
강의를 다 듣고 Python 언어로 구현된 백엔드 부분을 Java로 바꿔보았다. 생각보다 어려웠다 ㅎ
잘못된 내용이 많을 수 있어요!
1. view 페이지가 반환이 안되요
@GetMapping()
public String homeV1() {
return "home";
}
home.html 을 찾지를 못하는거다. ㅠ 골머리 앓았다. 예전에 진행한 프로젝트에서는 잘 되는데 왜 안되지 했다.
문제는 경로 인식, 다시 공부해야할 부분이다.
gralde 파일에 타임리프를 추가하여 templates 하위 폴더를 기본으로 인식하게 해서 문제를 해결했다.
implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
2.@ResponseBody , @RequestBody 몰라요 ajax도 몰라요!
하하 해당 어노테이션에 대해 내가 아는건
JSON 형식으로 데이터를 주고 받을 때 활용한다는 것 밖에 모른다!
더 공부해야할 부분이다.
@ResponseBody
@GetMapping("/show")
public ArrayList<Letter> home() {
ArrayList<Letter> fans = homeRepository.find();
return fans;
}
$.ajax({
type: "GET",
contentType : "application/json",
url: "/home/show",
data: {},
success: function (response)
위 코드는 ajax 에서 컨트롤러단에 데이터를 요청하는 것이다.
발생했던 문제는 2가지
1. ajax - url
url이 의미하는 바를 몰랐다. 요청을 보낼 url을 말한다.
2. ajx - contentType
해당 값을 입력안하면 "application/x-www-form-urlencoded" 으로 요청한다.
응답하는 컨트롤러 단에서 자바 객체 형태로 보내서 오류가 나는 것 같았다. 그래서 json으로 바꿔주었다.
3. ResponseBody, RequestBody
이전에 혼자 프로젝트를 진행할때는 스크립트없이 타임리프만 이용해서 딱히 두 어노테이션을 사용할 일이 없었다.
프론트와 협업을 하면 두 어노테이션을 사용할 일이 많을 것 같다. 따로 정리해두겠다.
3. 객체에 대한 감각이 없었다.
Java로 변환하면서 가장 오랜 시간 머리를 싸맷던 곳이 이 부분과 가상서버에 프로젝트를 배포하는 과정이었다.
기존 코드
public ArrayList<String> findV0(){
ArrayList<String> letters = new ArrayList<String>();
FindIterable<Document> docs = fans.find();
if (docs.cursor().hasNext()) {
letters.add(docs.cursor().next().toJson());
}
return letters;
}
데이터의 구조는 {"name" : "jh" , "comment" : "김치 맛있어요"} 이렇다.
기존 코드의 경우 그냥 String이다. Json 형태를 가진 String이다.
나는 이 과정을 이해를 못했다. Json 형태인데 왜 인식을 못하지? 그냥 스트링이었기 때문이다.
"{"name" : "jh" , "comment" : "김치 맛있어요"}" 이렇게 생긴 스트링을 전달하고 있었던 것이었다.
for (let i = 0; i < response.length; i++) {
let name = response[i]['name']
let comment = response[i]['comment']
그래서 위 스크립트의 'name','comment' 라 키를 인식하지 못한다고 콘솔 창에서 알려준다.
변경 코드
public ArrayList<Letter> find(){
ArrayList<Letter> letters = new ArrayList<Letter>();
FindIterable<Document> docs = fans.find();
for (Document doc : docs) {
Letter letter = new Letter();
letter.setName(doc.getString("name"));
letter.setComment(doc.getString("comment"));
letters.add(letter);
}
return letters;
}
1. Letter 라는 객체를 만들었다.
2. 객체를 만들어 db에 저장되어 있는 "name", comment" 의 value 값을 설정하도록 했다.
제이슨 형태로 응답한 이유는 @ResponseBody 애노테이션을 사용했기 때문이 아닐까 추측한다.
- P.S
가장 어려웠던건 원격 서버에 프로젝트를 배포하는 과정이었는데 언젠가 또 애먹을 것 같아서 따로 정리해뒀다
'항해99' 카테고리의 다른 글
항해 4일차 TIL - SHA256은 뭘까요? (2) | 2022.12.08 |
---|---|
항해 3일차 TIL - (), [], {} 이건 도대체 무슨 괄호죠... ㅎ (0) | 2022.12.07 |
항해 2일차 TIL - ajax에 들어가는 property들은 어떤 의미일까요? (0) | 2022.12.07 |
항해 1일차 TIL2 - 브랜치는 어떻게 병합할까요? (1) | 2022.12.06 |
항해 1일차 TIL - Form에서 오는 데이터들의 타입은 무엇일까? (0) | 2022.12.05 |