7-4.위젯 개발 미니 프로젝트 - 사용자 페이지에서 위젯 삽입하기 (직접코딩)

· 댓글 : 1 조회 : 1922 · 1
이번 장에서도 사용자 페이지에 "소광장 위젯" 위젯을 삽입하는데 다른 방식을 이용할 것입니다. 


전 장에서 본 GUI 기반의 위젯 삽입은 "위젯전시" 모드에서 이루어졌습니다. 
메뉴/페이지에서 위젯 연결하고 "위젯으로 꾸미기" 버튼을 클릭하면 디폴트로 이 "위젯전시" 모드로 로딩됩니다. 
5907



하지만 이번에는 "직접코딩" 모드로 위젯을 삽입해보겠습니다. 


1. 위젯 꾸미기 페이지에서 우측의 "전시형태" 옵션 중 "직접코딩"을 선택한 후 위젯 아이콘을 클릭합니다.
5908



2. 역시나 위젯 설정 팝업창이 뜨는데 본 팝업창의 이름은 "위젯코드 추출"입니다. 위젯전시 모드에서 뜨는 위젯 설정
팝업창의 명칭은 "위젯추가"인 점 확인하시기 바랍니다. 
5909

위젯 설정 항목은 동일합니다. 또 한 가지 다른 점은 여기서처럼 "직접코딩" 모드에서 뜨우는 위젯코드 추출 팝업창에서의
위젯 설정 후 클릭하는 버튼이름이 "위젯코드"입니다. 반면 "전시형태"모드에서의 버튼명은 "위젯추가"인 점도 확인 바랍니다. 


3. 위에서 본 "위젯코드" 버튼을 클릭하면 본 위젯설정이 적용된 위젯 코드를 출력하는 팝업창이 뜹니다. 
이 코드를 클립보드에 복사합니다. 
5910



4. 복사한 위젯 코드를 "직접코딩" 모드의 위젯입력란에 붙여 넣고 "저장하기" 버튼을 클릭합니다. 
5911



5. "소광장 위젯" 메뉴를 클릭하면 본 "소광장 위젯" 위젯의 설정이 적용된대로 포스트 내용이 출력되는 것을
확인할 수 있습니다. 
5912



여기서도 역시 내용은 정상적으로 출력이 되나 위젯 디자인이 깨지면 "Clear Widget Cache"를 클릭해주시기 바랍니다. 
(아래 이미지 참고)
5915



근데 이 모드에서는 한 가지 버그가 있는 것 같습니다.. "위젯전시" 모드에서 위젯 삽입할 때는 위젯 본문 우측 상단에 있는
more (더보기) 링크가 제 위치에 출력이 되는데 여기서는 보이지가 않습니다. 어디 숨어있나 확인해보니 html 페이지의
맨 우측 맨 상단에 숨어있더군요. 아마도 CSS 이슈 같은데 나중에 시간이 되면 확인해봐야겠습니다. 


그럼 "위젯전시" 모드와 "직접코딩" 모드의 차이 및 장단점은 무엇일까요? 

솔직히 잘 모르겠습니다. 

"직접코딩"에서 추출한 위젯코드를 개발적으로 활용할 수 있는 것 같습니다. 반면 위젯코드에는 사이즈 및 위치
설정이 없기 때문에 디폴트로 위와 같은 모습으로 출력이 됩니다. 

하지만 "위젯전시" 모드에서는 위젯의 사이즈 및 위치를 조절할 수 있지만 다수의 위젯을 삽입하면 위치가 깨지는
현상이 발생한다고 합니다. 

개인적으로는 특별한 사유가 없다면 위젯코드를 추출하는 "직접코딩" 모드보다는 눈으로 직접 보고 배치할 수 있는 
"위젯전시" 모드 사용을 권장합니다. 

다음 장에서는 본 위젯의 폴더/파일을 둘러보도록 하겠습니다. 
통계분석을 위해 매체별 전용URL 사용해주세요.