부트캠프/멋쟁이 사자처럼

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

2025. 5. 14. 17:40

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가 발생하면 성능이 저하된다.

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

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

오늘 디제이

반응형
저작자표시 (새창열림)
'부트캠프/멋쟁이 사자처럼' 카테고리의 다른 글
  • 18+DAY_멋사 프론트엔드 부트캠프 14기_TIL
  • 17+DAY_멋사 프론트엔드 부트캠프 14기_TIL
  • 15+DAY_멋사 프론트엔드 부트캠프 14기_TIL
  • 14+DAY_멋사 프론트엔드 부트캠프 14기_TIL
NamDoHyeon
NamDoHyeon
반응형
NamDoHyeon
뉴비 개발자
NamDoHyeon
전체
오늘
어제

블로그 메뉴

  • 홈
  • 방명록
  • 관리자
  • 글쓰기
  • 분류 전체보기 (69)
    • 백준 (38)
    • 부트캠프 (21)
      • 멋쟁이 사자처럼 (21)
    • HTML (1)
      • Google 클론 (1)
    • 개인공부 (9)
      • 데이터베이스 (2)
      • 소프트웨어 공학 (1)
      • C (5)
      • 알고리즘 (1)

최근 글

hELLO · Designed By 정상우.
NamDoHyeon
16+DAY_멋사 프론트엔드 부트캠프 14기_TIL
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.