부스트코스 4.웹 앱 개발[프로젝트 4-1]

 네번째 프로젝트에서 학습하는 내용은 백엔드 부분은 없었고 프론트 엔드 부분만 수강을 하게 된다.

프론트 엔드 부분의 경우 본격적인 js 라이브러리 사용에 대해 배우게 된다. 

jquery와 handlebar 라이브러리가 있는데 javascript 에 친숙한 유저라면 큰 어려움없이 사용할수 있을것이다.

 

---

 

 이제 본격적으로 프로젝트에서 수강한 내용에 대해 알아보자.

이번 프로젝트 에서는 프로젝트3에서 클라이언트에게 보여줬던 각각의 공연에 대한 상세 페이지를 구현하는것이 주 목적이다. 상세 페이지에서 요구하는 정보들이 많아 적게는 두개 많개는 네개까지의 테이블들을 결합하고 알맞는 정보를 가져와야 한다.

 

데이터 베이스 erd

이때 주의해야 할점은

• 정보를 불러올시 입력 해야하는 부분을 통일하기
• sql문을 통해 불러온 column의 이름 통일화

---

1. SQL문

이 두가지만 알고 간다면 데이터베이스에서 정보를 가져오는데 큰 혼란은 없을것이다.

column이름을 바꿀때

Di.product_name as PN과 같이 as를 이용하면 원하는 이름으로 바꿔서 불러올수 있다.

 

[테이블이름.칼럼이름 as 원하는이름]

 

주의할 점은 

Di.product_name 같은 경우 BeanPropertyRowMapper에서 자동으로 productName과 같이 camel case로 변환시켜 주기 때문에 따로 이름을 productName으로 지정해줄 필요는 없다.

 

DI.product_name as productName (X)

--> 자동으로 해주기 때문에 camel case같은경우는 지정해줄 필요가 없다.

 

sql 문을 구성할시에는 

1. FROM
2. JOIN
3. ON
4. WHERE

예시 --> select PJ.name, PR.id from project as PJ JOIN product as PR ON PJ.id = PR.id WHERE PJ.id = 4

   5. subQuery문

 subQuery란 쿼리 안에 쿼리문을 넣어서 사용하는 것으로 메인쿼리 안에 서브쿼리를 넣어서 사용하게 된다.

예시를 살펴보자

 

WHERE PR.id = (SELECT DI.id FROM doctor_image as DI WHERE DI.id = :id)

 

위의 sql문은 doctor_image 테이블에서 id가 입력값과 같은것을 리턴하고 리턴받은 값과 같은 PR.id를 조건으로 가지게 된다.

 

6. WHERE AND문

 

WHERE 조건 AND 조건

 

이번 프로젝트를 진행하면서 처음 알게 된건데 위와같이 WHERE 문에 AND와 OR 등 조건을 여러개를 걸수 있다.

위의것을 사용하면 도움이 될것이다.

 

---

 

2.  Controller

 Spring 에서는 웹페이지 요청이 들어오면 이를 controller를 통해 url을 전부 요청받지 않더라도 원하는 위치의 웹페이지를 보여줄수 있다. 이전 프로젝트에서 배웠었고 수강했었던 내용인데 이 포스팅에서 언급하는 이유는 프로젝트3에서는 사용하지 않았던 개념이고 필자는 이를 구성하는데 애를 먹었으므로 이 글을 읽는 다른 사람들은 필자와 같은 경험을 하지 않길 바라는 바에서다.

(웹페이지 요청을 받고 이를 처리할 컨트롤러를 생성해 주어야 하고 이때 요청에 있는 parameter값들을 요청에 담아서 보내줄수도 있다.)

 

---

 

3. webApi

 아마 프로젝트3 를 이미 통과하였다면 webApi를 살펴보는데 큰 문제는 없을것이다. 부스트코스에서는 webApi를 제공해주고 이걸 보고 우리는 똑같이 만들기만 하면 된다.

 

웹 Api 화면

 이때 comment 안에 commentImages 배열을 가지는걸 볼수있다.

이제까지 우리는 String과 Integer, Double을 가지고 dto를 구성해왔었다. 위와같이 만들기 위한 방법을 써보려 한다.

 

1. comments dto 구성시에 배열선언(다른것과 같이 private로 선언해주면 된다)

2. 데이터베이스에서 배열을 가져온다.(commentImages)

3. 비어있는 comments 의 commentImages 배열에 2에서 불러온 값들을 넣어준다.

 

생각보다 복잡하지는 않은 과정이다. 아마 쉽게 할수 있을것이다.

 

---

4. 후기

 겉으로 보기에 데이터베이스에서 가져와야할 정보들이 엄청 많고 복잡해 보였지만 기존에 부스트코스에서 수강한 내용들을 충분히 숙지하고 있다면 보기완 다르게 쉽게 해결할수 있었던 백엔드 구성이었다.

꼼꼼하게만 프로세스를 진행한다면 큰 문제없이 완수할수 있을것이다.