부스트 코스 3.웹 앱 개발[프로젝트 3-2]

 프로젝트 구현 영상

 구현하는데 생각보다 더 오래걸린 프로젝트, 그래서 pass후 더욱더 기분이 좋았던 프로젝트 이다.

(서로의 원활한 학습을 위해 부스트코스 프로젝트에 관한 블로그 포스팅 에는 일체의 어떠한 소스코드도 공유를 하지 않습니다, 중간중간 나오는 개념들은 따로 자세하게 포스팅할 예정입니다.)

---

0.전체적인 흐름

 전체적인 흐름을 알고 들어가는것과 들어가지 않는것은 상당히 다르다. 무작정 손에 잡히는대로 초반에 이 프로젝트를 구현하려다가 도저히 진척이 안나서 흐름을 잡고 들어가자 보이지 않던것이 보이게 되었다.

간략하게라도 이 클래스는 무슨 목적에 무슨 함수를 사용하여 구성되는지를 파악하고 가야 필자와 같은 경험을 하지 않을 것이다.

 

---

 

1.백엔드 구성

 처음으로 spring 프레임워크를 이용하여 백엔드를 구성해보는 프로젝트 였다.

이 부분에서 엄청난 애를 먹었던것 같다. 이해가 되지 않아 계속해서 이전 강의를 돌려보았고 만들면서도 쉽게 와닿지 않아 오래 걸렸던 부분이다.

 

1-1 Spring MVC

 Model - View- Controller 의 개념을 이용하여 백엔드를 구성하는 방법이다.

model은 데이터베이스에 접근하고 데이터를 가져오는 

view는 우리에게 보여지는 출력 페이지

controller은 입력이 들어오면 model에 접근하고 가져온 데이터를 view에 보내주는 중추적인 역할이다.

 

1-2 Rest Controller

 Rest Controller은 사용자에게 원하는 정보를 제공해주기 위해 고안된 방식으로 알고있다. 

RestApi를 이용한 데이터 확인

위의 사진은 이번 프로젝트에서 볼수있는 RestApi 화면이다.  Get 방식으로 해당 url에 parameter값과 함께 요청을 하면 아래 Response 화면과 같이 정보를 정상적으로 불러오는것을 볼수있다.

필자는 ajax로 화면 전환시에 RestController를 이용하여 얻어온 json데이터를 parsing 해주어서 완성시켰다.

위의 과정은 개인적으로 가장 재미있었던 과정이 아니었나 싶다.

 

---

 

2. 프론트엔드 구성

 이 프로젝트에선 html과 css부터 만들진 않아도 된다. 기본적인 것은 제공된다. 이번 프로젝트에서 핵심은 java script구성과  css의 애니메이션 활동, 기존에 주어진 코드를 파악하고 자기 입맛에 맞게 수정하는 것이다.

 

2-1. java script 구성

 필자는 3개의 js를 구성하였다. Category, Product, Promotion 각각을 위한 js를 만들었다.

모든 코드에는 ajax와 html Templating이 사용된다. 이때 Dom과 querySelector 이용해 특별히 주의하여야 한다.

어떤 object에 템플릿을 추가하고 동작을 추가 할것인지 사용자의 입장에서 꼭 생각하고 코드를 작성하였으면 좋겠다.

 

2-2. css애니메이션

 프로모션 부분에 css를 이용한 애니메이션을 구현하여야 한다.

우리는 3장에서 css만을 이용하여 박스가 커지고 작아지고 왼쪽 오른쪽으로 이동하는것을 배웠다. 이것과 setTimeout을 이용하여 구현하면 구현을 할수 있다.

필자가 특히나 애를 먹었던 부분으로서 힌트를 제공하자면 

  1. java script내에서 css를 변경할수 있어야 한다. 이 때 파라미터 값들을 매번 가져와서 변경시켜줄수 있도록 하여야 한다.

  2. 모든이미지가 보여지고 처음으로 돌아갈때는 처음으로 돌아가는 화면은 우리에게 보여지지 않아야 한다. 이것은 css의 속성을 이용하면 할수 있다.

  3. addEventListener의 동작을 보면 clicked외에 다양한 것이 있을수 있다. 이 부분을 필히 꼭 한번 어떤 함수가 있나 찾아보길 추천한다.

 

2-3. html 변경

 주어진 html에서 원하는 object에 접근할때 class나 새로운 id를 부여하여야 할때가 있다. 이때 html에는 "data-****"라고 값을 지정해 줄수있다. 이를 이용하면 기존의 class나 id를 변경하지 않음과 동시에 html 템플릿에 영향을 주지않고 원하는 정보만을 적용하고 가져올수 있을것이다. 참고로 위에서 설정한 data로 시작하는 파라미터에서 데이터를 가져올때 getAttribute를 이용하면 편하게 가져올수 있다.

 

---

 

3. 코드 스타일

 코딩은 기본적으로 협업으로 이루어진다. 그렇기 때문에 규칙과 깔끔한 코드는 필수로 요구된다.

자바에서는 naming에 규칙이 있다. 카멜법칙등등 많은것이 있는데 이를 꼭 참고하여 코드를 작성하면 이것으로 인해 fail을 받는경우는 없을것이다.

첨부 : https://myeonguni.tistory.com/1596

[코딩규칙] 자바 코딩 규칙(Java Code Conventions)

위의 사이트는 자바 코딩 규칙에 관해 자세히 쓰여있는 좋은 글이다. 참고하면 좋을것이다.

 

---

 

4.프론트엔드 리뷰결과

 첫번째 리뷰

첫번째 fail때의 리뷰

 두번째 리뷰

   

두번째 pass 리뷰

 필자의 경우에는 더보기 버튼 구현에서 나만의 방식으로 작동이 되는것을 확인하고 바로 제출했던것이 문제가 되었었다. 버튼 전체 클릭이 아니라 텍스트 부분을 클릭할시에만 작동하던 방식이 문제가 되어 pass하지 못하였다. 이 경험이 사용자의 입장에서 동작을 생각해보게된 큰 계기가 아니었나 싶다.

 

---

 

5. 후기

매번 동작만 하면 괜찮다라는 생각에서 협업을 위한 코드, 깔끔한 코드, 일련의 규칙을 지켜가면서 코딩을 하는것은 혼자서 공부를 할때는 절대 몰랐던 것들이다. 이렇게 리뷰를 받으면서 전혀 몰랐던것들을 알게되고 리뷰어 분들이 꼼꼼히 하나하나 봐주신다는것은 내 코드와 코딩스타일에 대해 다시한번 생각해 보게 되는 계기가 된다.

 

---

 

* 부스트코스 수강하러 가기

https://www.edwith.org/boostcourse-web