PROBLEM뷰포트 크기를 줄여 스크롤이 생기면 일부분 배경 색상이 잘려 나오지 않는 현상이 있었다.이미지와 로그인 버튼을 감싸는 div에 h-full로 해두었다. (h-full -> height: 100%) 여기서 h-screen(height: 100vh)으로 바꾸어도 결과는 그대로였는데, 아마도 뷰포트 크기를 바꾸었을 때 바로바로 적용이 되지 않는 것이 문제였다. 문제의 이전 화면은 아래와 같았다.BEFORE import GoogleSignInButton from '@/components/pc/GoogleSignInButton';import IllustSignIn from '@/img/Illust_signIn.png';import Image from 'next/image';export default..
css에서 길이 단위가 여러가지가 있는데, 하나씩 살펴보자 !절대 단위, 상대 단위절대 단위항상 고정된 길이를 나타내는 단위이다.px, cm, mm 등이 있지만 px을 사용한다. 상대 단위고정되지 않고 어떤 기준에 따라 유동적으로 바뀌는 길이를 나타내는 단위이다.em, rem, vw, vh 등이 있다.px- 절대값을 사용하는 단위1px은 항상 고정된 물리적 크기에 해당한다.em, remem (element)- 부모 요소의 font-size 기준같은 요소 내에 설정된 폰트 크기 값이 있을 때는 해당 요소의 font-size가 기준이 된다.html { font-size: 16px;}div { font-size: 20px; width: 10em; /* 200px */} rem (root element)..
TDD란? TDD는 Test-Driven Development의 약자로, 테스트 주도 개발이라 한다. 개발을 한 후에 테스트하는 방식이 아닌, 테스트를 한 후에 개발하는 방식을 말한다. 설계 -> 코드 개발 및 테스트 케이스 작성 (X) 테스트 케이스 작성 -> 코드 개발 및 리팩토링 (O) TDD를 해야하는 이유 코드를 수정 또는 기능을 추가할 때 빠르게 검증할 수 있다. 코드를 깔끔하게 작성할 수 있다. 개발이 끝나면 우리는 테스트 코드를 작성하는 데 시간을 들이고싶지 않다. TDD를 한다는 것은 곧, 테스트 코드를 먼저 작성해야 한다는 것이다. 우리가 늘 하던 코드 개발 후에 테스트 코드를 작성하는 것보다 테스트 코드를 먼저 작성하는 이유가 TDD를 해야하는 이유와 동일하다. 테스트 코드를 작성하면..
