16+DAY_멋사 프론트엔드 부트캠프 14기_TIL

What I Learned Today

오늘은 3주 차 과제 리뷰를 했다.

3주 차 과제는 네이버 로그인 UI 구현하기였는데 시간이 엄청 오래 걸려서 제출했던 기억이 있다.

 

파일 구조

 

• 과제 리뷰를 하며 새로 알게 된 기술들
  • text-indent : 첫 줄 들여 쓰기 속성이다. (단, block의 성향을 가져야 사용할 수 있다.)
  • 선택자:checked + 형제요소 : checkbox나 radio 속성에서만 css를 스타일링할 수 있다.
    • 사용자가 요소를 체크했거나 선택한 경우 활성화된다.
  • appearnce : none : 에이전트 스타일을 화면에서 보이지 않도록 설정할 수 있다.
  • aria-live : 변경 사항을 스크린리더가 읽어준다.
  • 선택자:user-invalid : 사용자가 입력한 값이 유효한 값이 아닐 때 스타일을 적용한다. (사용자가 입력한 뒤에 동작한다.)
  • aria-errormessage : 주로 input 요소에 선언하여 오류 메시지를 제공하는 요소를 값으로 참조한다.
    
    • aira-invalid 속성이 없거나 false 라면 동작하지 않는다.

 

네이버 컴포넌트

 

이렇게 컴포넌트를 싹 만들어두고 조립을 했다.

 

완성본

 

• Grid
  
  • 그리드 컨테이너는 행과 열을 거지며 그리드 아이템을 배치할 수 있다. (바둑판식)
• Grid Line
  
  • 그리드의 행/열을 그리는 선을 말하며 각 선은 라인 넘버를 갖는다.
  • 그리드 아이템을 배치하는 기준으로 사용된다.
• Grid Track
  • 그리드 라인 사이의 행 또는 열 공간을 말한다.
• Grid Cell
  • 4개의 그리드 라인이 묶여 그려지는 가장 작은 단위를 말한다.
• Grid Area
  • 그리드 유닛이 묶인 영역으로 고유한 식별자를 가지며 식별자를 통해 요소를 배치할 수 있다.
• Grid Gutters
  • 행 또는 열 사이의 간격을 말한다. 흔히 Gap이라고 한다.

 

• Git reset 명령어는 저장소의 상태를 변경하거나 이전 커밋으로 돌아갈 때 사용한다.
  • soft reset : 변경 내용은 유지되지만 commit하지 않은 상태로 남는다. 즉 add 된 상태라서 바로 commit이 가능하다.
    • 여러개의 commit을 묶어서 다시 commit 하기 위해 사용한다.
  • mixed reset : 변경 내용은 유지되지만 다시 add를 해야 commit 할 수 있다.
    • 코드를 수정하고 다시 커밋하기 위해 사용한다.
  • hard reset : 작업 디렉토리에 있는 모든 변경 사항을 되돌리고 이전 상태로 돌아간다.
    • 이전 커밋의 변경된 모든 내용을 싹 날리기 위해 사용한다.

 

The Problem I Faced

 

What I Tried to Do

 

How I Solved It

 

So

 

Aha Moments

repaint와 reflow가 발생하면 성능이 저하된다.

로그인 페이지를 키보드로 접근할때 순서가 입력창 다음에 로그인 버튼이 아닌 로그인 상태 유지인 것을 알았을 때 많이 놀랐다.

스크린 리더 사용자일 경우 로그인 상태 유지 체크박스가 있다는 것을 알지 못하고 바로 로그인을 하는 상황이 생길 수도 있다.

오늘 디제이