7월29일51일차 - react 속성, 슬릭 가이드, 웹코딩가이드

태그에서 첫 글자를 대문자로 쓰는 것은 컴포넌트의 유지 보수를 용이하게 하기 위해 함수에 담아서  정의하는 방식입니다. 
      <Div>컴포넌트가 아닙니다.</Div>
  Line 8:8:  'Div' is not defined  
 이름을 대문자로 표시합니다.

컴포넌트 안에 내용을 입력할 수는 없습니다.
      <Header>
        <div>dasdsd</div>
      </Header>
아무것도 출력이 되지 않습니다.

 

객체의 속성을 가져오는 방법은 {props.객체이름.속성이름}입니다.
      {props.member[0].name}
      
태그안에 넣는 변수는 {}로 감싸주어야 합니다.      
      {props.member.map((el) => (
        <li>{el.name}</li>
      ))}
      
li의 자식은 고유한 key를 가져야 합니다.
 Each child in a list should have a unique "key" prop.
따라서 key를 설정해주어야 합니다.
      {props.member.map((el) => (
        <li key={el.id}>{el.name}</li>
      ))}
     

콘솔 명령어 dir는 현재 폴더에 어떤 폴더(파일)가 있는지 보여줍니다.

map 함수로 객체의 key를 지정하고 name을 li로 감싸 출력하는 방법입니다.
{props.member.map(el => <li key={el.id}>{el.name}</li>)}

 

---

 

비포애프터를 만들고 디스플레이 플렉스, 플렉스 1을 이용 하면 양쪽으로 꽉 찬 선을 간단하게 만들 수 있습니다.

클래스는 사방팔방 쓸수있기 때문에 이름을 자세하게 붙이는게 좋다

섹션은 위치가 바뀔 수 있기 때문에 01 02 로 쓰는 방법은 좋지 않습니다.
피규어 안에서 반복되는것은 01 02로 써도 됩니다.

클래스 깊이는 가급적 3개 까지만 줄 수 있도록 하고, 4개 이상이 되었다면 html 구조가 올바른지 다시 생각해 봅니다.

 

---

메뉴 창을 클릭하였을 때 나타나는 속도는 빠른 것이 좋습니다.
100vh화면에서는 아래에 스크롤이 더 있다는 표시를 남깁니다.
tab메뉴는 텍스트가 긁히지 않도록 하고, cursor: pointor; 를 남깁니다.

클릭을 필요로 하는 것은 하는 것은 a태그로 감쌉니다.
영어로 디자인을 하기보다는 한글디자인에 익숙해질 수 있도록 합니다.

 

마우스 위치를 인식하여 슬라이드 이동 방향을 정하는 연출을 할 수 있습니다.(어떻게???)

볼더계단문제?????????