2024.01.15.학습일지

오늘의 이슈

Iist 컴포넌트 state 'Pressed' 오류
 오늘 과제에 대한 개인적인 보완사항으로 List 컴포넌트를 머티리얼 가이드 네이밍, 제작 형태로 변환시켜보자! 라는 개인적 목표가 있었다. 그런데, 머티리얼 가이드와 캠프에서 배운 지식이 충돌하는 부분이 생겼다. 두 개 다 맞는 방식이지만, 머티리얼 가이드는 state를 디자인할 때 색상 자체를 변경하는 것이 아니라, 기본 색상에 레이어 오파시티를 조절하는 방향으로 state를 나타내고 있었다. 

출처: 머티리얼 디자인 가이드

 그래서 나도 이왕 디자인을 머티리얼 방식으로 변경하고자 했으니, state 표현 방식도 같이 공부해보자! 라는 마음으로 list 컴포넌트를 재구축하기 시작했는데... 뜻밖의 고난이 시작되었다. 갑자기 에러가 나기 시작하는 것이다. 분명히 컴포넌트 프로퍼티랑 네이밍도 다 동일하게 했는데, 텍스트 리스트는 클릭 하자마자 'some missing fonts' 하고 'supporting text'가 같이 안녕~ 해버렸다. 그리고 라디오 리스트는 1번째만 Pressed가 되고 2, 3번 Pressed 액션이 먹지 않은 채 클릭 이동이 되었다. 
 

시행착오

 이 문제를 해결하고자 시행한 방법은 다음과 같다.

- 프로토타입을 입힌 모든 파일의 이름을 확인해 다른 곳을 찾는다. -> 다른 곳이 없었다.
- 세분화했었던 라디오버튼 리스트의 selected와 unselected의 설정(총 4개)을 1개로 축약시키고 라디오버튼 컴포넌트 selected를 그룹 리스트 박스 내에서 변환한다. -> 아무 반응 없다.
- 프로토타입 연결 점검을 하다 프로퍼티 설정이 잘 변화되지 않는 List 박스를 다 교체시키고 다시 프로토타입을 연결해본다. -> 아무 반응 없다. 
- 머티리얼 방식 빌딩박스를 지우고, 원래 캠프에서 하는 방식(색상변화)로 컴포넌트를 재구성하여 다시 그룹화한다 -> 아무 반응 없다(????????)
- 튜터님꼐 찾아간다. -> 튜터님께서 찾아간 시간 모두 좌석에 없으셨다.. 채점 때문에 바쁘신듯 하다. 

 

해결방법

 사실 아직 해결하지 못했다. 다 맞게 연결이 되어 있는데, 모아놓았을 떄 왜 작동이 안되는지 정말 궁금하다. 오늘 이거만 계속 붙잡고 있었는데, 내일은 해결되었으면 좋겠다.
 

알게된 것

- 머티리얼 가이드 List 구성 방식에 대해 뜯어볼 수 있었다.
- list의 네이밍규칙(Header, Headline, supporting text, footer, Monogram, Thumbnail, Leading element, Trailing element,Row)을 자세히 알 수 있었다.
Row: 개별 리스트를 부르는 이름
Header: 리스트 내부가 아닌 외부에 붙는 이름
Overline: 리스트 내부 제목 위에 붙는 부제목
Headline: 리스트 내부 제목 이름
supporting text: 내부 제목을 부연설명하는 텍스트
footer: 리스트 내부가 아닌 외부 아래에 붙는 텍스트
Thumbnail: image-Thumbnail이 풀 네임이었으며, 페이지 이동 전 해당페이지에 있는 이미지를 미리 보여주는 요소
Leading element: 리스트 내에 요소가 2개 이상 붙었을 때 선행하는 요소에 붙이는 이름
Trailing element: 리스트 내 요소가 2개 이상 붙었을 때 마지막 요소에 붙이는 이름
* Leading과 Trailing은 3개의 요소가 아닐 경우 같이 붙지 않음 예) 리딩 (콘텐츠x) 트레일링 X
monogram: 도형화된 동그란 썸네일 (정확하지 않음)
Building box: 컴포넌트 제작을 위해 만든 부속 컨포넌트 
예) state-layer 에 overlay 되는 state 요소들 (Hover, Pressed, Focused 등), Thumnail, monogram
- 다른 가이드(밀리의 서재, HIG)를 대조해보며 리스트가 어떻게 다른지 알 수 있었다.