AdminLTE 라이브러리를 이용하여 계시판 관리 페이지 와 댓글 관리 페이지를 만드는 작업을 진행하였다. 화면을 구현하는 개발 작업을 위해서는 Thymeleaf 기술을 이용하였지만, 아무래도 근본적으로는 HTML 파일을 완성해야 하는 부분이 필요했다. 그 과정에서 다양한 HTML 태그들을 사용해야 되었는데 이때 이해가 필요한 개념이 시맨틱 웹이라는 부분이다. 시맨틱 웹이라는 것은 HTML5에서 도입되어 다양한 자원의 정보를 조금 더 쉽게 의미론적으로 나타낼 수 있도록 하는 개념이다. 기존의 HTML4로 작성된 문서는 DIV 태그로만 화면을 구현하였기 때문에 컴퓨터가 해당 태그의 의미, 정보를 해석할 수 있는 메타데이터라기 보다는, 단순히 사람의 눈으로 보기에 용이한 자연어로 기술된 문장으로 가득차 있었다. 시맨틱 웹을 사용한 HTML5으로 화면을 구현하게 되면 컴퓨터나 사용자는 웹 환경에서 리소스에 대한 정보와 자원 사이에 어떤 관계가 있는지, 그리고 의미는 무엇인지 보다 명확하게 이해하고 처리할 수 있게 된다. 이러한 웹 표준화 작업을 위해 현재는 시맨틱 웹을 사용하는 것이 반드시 필요하다. 이번 강의는 백엔드 기술을 집중적으로 학습하는 것이 주제였지만 아무래도 화면을 구현 하기 위해서는 이러한 HTML을 사용한 프론트엔드 기술도 일정 부분 알고 있어야하기 때문에 시맨틱 웹에 대한 내용을 학습하게 되었다. 어드민 서비스 구현을 위해 AdminLTE가 제공하는 테이블 컴포넌트를 활용하였는데, 기존의 백엔드 기술을 통해 데이터 정렬, 검색 기능을 구현한 것과 다르게, 이번에는 AdminLTE가 제공하는 정렬, 검색 기능을 직접 사용하는 쪽으로 게시판 화면을 구현하였다. 이는 기존에 백엔드 기술을 통해 검색, 정렬 기능을 개발한 것과는 다르게 작업 했다고 볼 수 있는데, 프론트엔드 기술, 즉 자바스크립트로도 받아온 데이터를 기반으로 데이터 정렬, 검색 기능을 제공해 줄 수 있다는 점도 이번 강의를 통해 배울 수 있었다. 나아가 데이터 복사, CSV, Excel, PDF 다운로드, 인쇄 기능 또한 자바스크립트로 제공되었는데, 이러한 기능들을 보며 자바스크립트로 구현 가능한 부분이 있다면 이를 활용하는 것도 효율적으로 개발하는데 도움이 되겠다는 생각을 하게 되었다.
패스트캠퍼스 [직장인 실무교육]
프로그래밍, 영상편집, UX/UI, 마케팅, 데이터 분석, 엑셀강의, The RED, 국비지원, 기업교육, 서비스 제공.
fastcampus.co.kr
본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.