241202 TIL

• 프로젝트 세팅 관련 공부한 내용들
  • 프로젝트에선 보통 사이즈 단위를 지정할 때 반응형을 고려해서 루트인 html 태그에 적용된 font-size 대비 비율을 기준으로 하는 rem 단위를 많이 사용한다.
  • 별도의 처리를 하지 않으면 브라우저에서 기본 세팅되는 html 태그의 font-size는 16px이다. 해당 값을 기준으로 24px을 rem으로 표현하려면 1.5rem과 같은 식으로 사용하면 된다.
  • 16px이 기준이 되면 사이즈 계산이 어려워진다. 대신, 16px인 html 태그의 font-size를 62.5%로 설정해주면 루트의 기준 font-size가 10px이 된다. 10px로 font-size가 조정되면 rem으로 사이즈 단위를 계산할 때 굉장히 직관적이라는 장점이 있다. 24px를 표현하고 싶다면 자리수만 조정해 2.4rem으로 설정하면 되기 때문이다.
  • 스타일을 적용할 때 폰트 사이즈, 스타일, 색상 해시 값 등을 반복적으로 사용할 일이 많기 때문에, 해당 값들을 변수로 관리하면 편리하다. CSS는 표준 속성으로 변수를 사용할 수 있는 문법을 제공한다. 처음 프로젝트를 시작할 때 기본 스타일 규칙을 :root 가상 선택자(DOM의 루트 노드를 의미하며, html 태그를 의미)에 변수로 정의해둔 다음, 하위 요소들에 스타일을 먹일 때 변수를 사용하면 유지보수 및 관리에 많은 이점이 있다.
  • 리액트 라우터의 라우팅 방법 중 BrowserRouter와 createBrowserRouter를 사용하는 두 가지 방식이 있다. createBrowserRouer가 비교적 더 최신 문법이다.
  • 둘이 각각 어떤 식으로 라우팅을 구현하는지, 어떤 상황에서 어떤 걸 사용하는 게 더 좋은지 대략 조사해서 정리해봤다. BrowserRouter와 createBrowserRouter

실제로 서비스를 만들어 보려고 하니 공부해야 할 게 정말 쏟아진다. 버겁지만, 그저 지금 해야하고 할 수 있는 일을 하나씩 잘 해나가봐야겠다.