🥞 오늘 한 일

• 최종 프로젝트
  • 유효성 검사 input 아래 붉은 텍스트로 변경
    • 공구템 작성, 수정 페이지 완료
    • 자취템 작성, 수정 페이지 완료
    • 회원가입 페이지 완료 (로그인 페이지는 불필요)
    • 결제 폼 페이지 완료
  • 공구템 리스트 변경된 디자인 적용

기술면접 연습

display: none 과 visibility: hidden의 차이점은 무엇인가요?

두 속성 다 요소를 화면에서 보이지 않게 하는 것이지만 display none은 아예 해당 요소를 없애는 것인 반면에 visibility hidden은 요소는 그대로 있고 투명하게 만들어준다는 차이점이 있습니다.

styled-components를 써보셨나요? 사용하면서 느낀 장단점에 대해 알려주세요.

네, 사용해본적이 있습니다. 컴포넌트이기에 props를 내려 스타일의 동적 변화에 사용할 수 있고 재사용이 수월하지만, 하나하나 이름을 지어줘야하는 점이 생산성이 떨어지고 next.js의 서버 컴포넌트에서의 지원도 적다는 단점이 있습니다.

CSS의 단위 중 px, em, rem 의 차이점에 대해 설명해주세요.

px는 익숙한 개념인 픽셀이고, em은 상대적인 단위로서 현재 속한 요소의 폰트 크기를 기준으로 계산합니다. 폰트 크기가 크다면 em값도 커지게 되어 반응형 디자인에 좋습니다. rem은 em과 거의 유사하지만 기준이 되는 폰트 크기가 최상단 루트의 기본 크기라는 점이 다릅니다.

🍴 돌아보기

오늘 왜 이렇게 한 게 없지...? 할 거 많으니까 정신 차리자;

🍳 내일 목표

• 최종 프로젝트
  • 반응형 디자인 작업