tabs를 사용해보았다.

사내에서 사용할 관리 툴을 웹으로 제작해보며 오늘은 bootstrap의 tabs를 사용하게 되었다. bootstrap을 이용해서 그냥 가져다 쓰기만 하면 되겠거니 하고 쉽게 생각했었는데 레이아웃은 쉽게 만들 수 있었으나 이 후에 각 탭 마다 저장 기능이 존재하여 submit을 수행하면서 몇가지 고민을 하게 되었다.

우선 tabs가 아닌 단일 페이지를 제작할 경우에는 submit이 하나만 존재하면 되므로 하나의 form element로 깔끔하게 구현이 되었는데 tabs를 사용하다보니 한 페이지 내에서 여러 페이지를 구현하는 것 처럼 되어서 각 탭마다 별도의 form을 만들어야 했다. 그렇지 않으면 handler를 통한 작업을 수행하면서 불필요한 데이터들까지 submit을 통해 전달되므로 비효율적이었다.

그래서 결론적으로는 각 탭마다 저장을 수행하는 경우 각 저장 기능마다 별도의 form을 만들어서 각각 handler를 통해 ajax 통신을 수행하여 처리를 하였고, 한 탭 내에서 저장과 수정이 공존하는 경우에도 별도의 form으로 구성하였다. 이렇게 각각 처리를 하다보니 script 코드가 다른 페이지에 비해 무척 길어졌다. 조금 더 효율적인 방안이 없는지 찾아봐야겠지만 개발 기간이 짧으므로 우선은 이렇게 진행하는 걸로!