23강(홈페이지 통합메뉴)

상단에 헤더 추가

 

 

 

 

헤더와 페이지 사이의 빈 공간이 없게 하기 위해서 컨테이너를 지워주자.

 

 

그럼 요렇게 딱 붙는다.

 

 

메뉴를 여러 개 만드는데 스프링을 활용하면 정말 간단하다고 한다

 

 

 

이렇게 메뉴 url을 입력해주자. 대부분 웹개발/API개발에선 대문자를 잘 사용하지 않는다.  메뉴와 연결된 매핑 enum을 만들어 활용한다.

 

메뉴보드타입이라는 클래스를 만들어주고 거기에 실제 보드 타입을 매핑시켜준다.

 

 

메뉴로 사용할 enum이 만들어졌음

 

메뉴보드타입 이름을 메뉴타입으로 바꿔주고 PathVariable을 하게되면 String으로 바꿔주고 리턴 해줘야함.

 

 

실행해보면 오류가 난다. List와 detail 모두 PathVariable을 사용하여 중첩되기 때문인데 detail url에 일단 /detail을 추가해주자.

 

그래도 오류가 난다… 뭔가 매핑이 안 된거 같은데 뭐가 문제일까

 

 

무슨 연유인지 저 보드 타입이 MenuType으로 바뀌어 있었다. 소름이 쫙돋네.. 보드타입을 카피해서 메뉴타입을 만든 게 아니라 보드타입 자체의 이름을 바꿔버려서 쟤도 메뉴 타입으로 바뀐거다… 이건 매우 큰 실수다. 다시는 이러지 말자.

 

 

일단 모든 메뉴는 잘 적용이 됐다. 이제 url에 board를 때내자.

 

 

리퀘스트매핑을 없애주자.

 

 

잘 동작한다. 상단 메뉴를 BoardType만큼 추가작업 해주자.

 

 

 

그런데 강의에선 메뉴가 가로로 잘 뜨는데 내 화면에선 세로로 메뉴가 나열된다. 해결책은 아래와 같다.

 

 

앞에 저걸 붙여줘야 가로로 예쁘게 정렬이 된다.

 

 

성공.