포틀릿(Portlet)이란?

포틀릿(Portlet)이 무엇인가요?

 

2022년 Naver 포털의 구성 예시

 

회사에서 여러분들에게 위에 그림을 주며 '이렇게 홈페이지를 만들어주세요.'라고 요청했어요.

그럼 여러분들은 HTML로 검색창을 만들고, 아래 광고와 로그인 UI를 배치하고, 그 밑에 뉴스와 쇼핑 UI를 배치할 거에요.

그런데 HTML 파일 하나에 저 UI들을 모두 작성하고 있는 것은 아니죠?

 

검색창, 광고, 로그인, 뉴스, 쇼핑 등 UI를 따로따로 개발해서 화면에 배치하면 되요!

이렇게 각각 개발된 요소들을 웹 컴포넌트라고 하는데 포틀릿(Portlet)이 이 역할을 해주는 녀석이에요.

즉, 포틀릿(Portlet)은 웹 포털을 구성하고 있는 웹 컴포넌트를 의미하죠.

 

포틀릿(Portlet)을 왜 사용할까요?

 

자! 여러분들은 이제 포틀릿(Portelt)을 통해 위에 화면처럼 포털을 만들었어요.

그런데...

 

포털 수정안

 

며칠 뒤 회사에서 수정안을 가져와서 이렇게 바꿔달라고해요.

만약 여러분들이 HTML 파일에 모든 기능을 다 작성했다면 어느 부분의 배치를 바꿔야되는지 찾아서 위에 화면처럼 바꿔야되요.

물론 배치만 바꾸면 다행인데 '쇼핑'의 기능을 바꿔달라고 한다면 다른 컴포넌트에 영향이 가지 않는지 테스트를 해야되요.

 

하지만 여러분을은 이미 포틀릿을 이용해서 웹 컴포넌트를 만들었기 때문에 '쇼핑'과 '광고' 포틀릿의 배치만 바꿔주면 되요.

그리고 웹 컴포넌트들은 각자 독립적으로 동작하기 때문에 '쇼핑' 기능을 수정하면 '쇼핑' 컴포넌트만 테스트를 하면되요!

게다가 여러분을이 게시판을 포틀릿으로 개발했다면, 게시판 글을 작성하고 삭제하고 목록을 조회하는 것도 포틀릿을 통해 가능해요.

 

이처럼 포틀릿(Portelt)은 웹 포털에서 원하는 위치에 자유롭게 배치할 수 있어요.

그리고 재사용성이 좋아요. 무슨 말이냐고요?

회사에서 '다른 페이지에도 뉴스랑 광고를 만들어주세요.'라고 요청이 오면 '또 만들어야되네... 복붙하자...' 이런 생각을 안해도 되요!

이미 여러분들이 포틀릿으로 만들었기 때문에 원하는 곳에서 호출해고 배치만 하면 돼요.

 

물론 React나 프론트엔드 프레임워크에서도 컴포넌트 단위로 개발해서 UI를 배치해요.

하지만 Java의 서블릿처럼 동적으로 콘텐츠를 생성하고 배치할 수 있는, 포틀릿 같은 웹 컴포넌트에 대해

알아두면 좋을 것 같아요.

 

Tip - 서블릿과 포틀릿의 공통점과 차이점은?

 

공통점

1. 동적으로 콘텐츠를 생성해줘요.
2. 특정 컨테이너를 통해 관리되기 때문에 컨테이너가 생명주기를 관리해요.
3. 웹 클라이언트와 요청/응답을 하며 동작해요. 

 

차이점

1. 포틀릿(Portlet)은 프레그먼트(Fragment)라는 마크업 조각만 생성해요.
    ※ 웹 페이지 전체를 생성하지 않아요.
2. 포틀릿(Portlet)은 혼자 동작할 수 없어요. 그래서 포틀릿을 배치할 화면이 꼭 필요해요.
    ※ 물론 배치한 화면의 URL을 통해서만 포틀릿을 사용할 수 있어요.