기본 웹페이지 구현 미니 프로젝트 (빅데이터 부트캠프 86~89일차)

프로젝트 주제

- 간단한 웹페이지를 만들어봄으로써 기본적인 백엔드-프론트엔드 연결 성공을 구현해보는 미니 프로젝트

 

맡은 역할

- MySQL을 사용하여 함께 DB를 세팅 Java(Eclipse) 

- 고양이 이미지(Picture) 데이터에 대한 각각의 MVC 패턴 구현

- 최종적으로 프론트와 정상적으로 연동하여 백엔드에서 정의한 메소드를 프론트에서도 정상적으로 실행할 수 있도록 성공시키는 것이 목표

 

프로젝트 진행시 막혔거나 새로 알게된 점

1. doGet -get 방식
service O - get,post방식 모두
doPost - post 방식

2. 이클립스에서 백엔드-프론트엔드 연결시 필요한 jdbc라이브러리들은 프로젝트에 추가하는 것이 아닌 WebContent폴더의 WEB-INF 폴더의 lib 폴더에 넣어줘야 사용이 가능하다.. (프로젝트에 추가하면 연결 불가능)

3. HttpServletResponse 객체(response)는 텍스트 혹은 바이너리 데이터만 출력할 수 있기 때문에 보통 데이터 타입을 String으로 변환 필수!
PrintWriter = 텍스트 출력, ServletOutputStream = 바이너리 데이터 출력

4. 그 String 데이터를 또 JSON 객체로 변환해야 프론트엔드에서 데이터를 받을 수 있음 (API의 특징)

5. 또한 ObjectMapper 클래스의 writeValueAsString 및 writeValueAsBytes 메소드는 Java 객체(여러개의 데이터가 담긴 배열이든, 하나의 데이터이든 상관 x)에서 JSON을 생성하고 생성된 JSON을 문자열 또는 바이트 배열로 반환
(ObjectMapper클래스는 https://mvnrepository.com/에서 jackson databine 라이브러리를 다운받아 적용시켜야 사용할 수 있음)

6. 다른 컴퓨터와 아닌 내 컴퓨터로 셀프로 서버-클라이언트 전송을 진행하려면 크롬에서 Moesif CORS를 설치후 활성화하면 해결됨(cors error 해결)

7. fetch나 axios로 받아온 데이터를 외부에서 이용하려면 .then()에서 setState를 이용하여 특정객체에 담아야함
ex) const [dog, setDog] = setState();
axios(url).then((response) => setDog(response.data)) => response를 통해 불러온 데이터를 setDog를 이용하여 dog 객체에 저장.

8. 아파치 톰캣 연결 경로 설정
- Servers의 톰캣 폴더 -> server.xml 맨 밑의 Context 태그에서 path

9. git commit 및 pull을 하고난 후 갑자기 아파치 컴뱃 서버 구동이 안되는 것은 물론 Cat 프로젝트에 있던 Java 라이브러리들이 모두 사라지는 문제를 경험 => 몇시간동안 원인도 제대로 파악 못하고 있다가 이클립스 에러창에 classpath 관련 글이 보이길래 깃허브에서 확인해보니 classpath 파일 내용이 바껴있었고 변경전 코드를 복사하여 classpath 파일에 붙여넣더니 없어졌던 라이브러리가 다시 나타났고 서버도 다시 잘 구동되었음.

10. 팀원들간에 git clone한 레퍼지토리의 위치가 서로 달라서 그런지 git pull을 해올때마다 인코딩이 수정한 UTF-8이 아닌 기본값 MS949로 설정되어있어 git pull만 하면 한글이 깨져있었음..

 

결과물

맨 밑에 있는 Do you want More Pictures? 클릭 ⇒ 네이버 검색창에 해당 품종의 이미지를 검색한 링크로 이동

 

관련 GitHub 주소

https://github.com/anydevil0812/mini_project-1

GitHub - anydevil0812/mini_project-1: 기본적인 웹페이지 생성 미니 프로젝트