TIL #044

오늘한 것

Project : 1Day1Quote

• 프로젝트 피그마 디자인 끝내기
• 프로젝트에 사용할 기술 선정
• 프로젝트 노션 페이지 작성
• 프로젝트 앱 생성
• 프로젝트 기본 설정 (Emotion, CSS, SVGR 등)
• GNB 컴포넌트 구현

FE

• Next13 변화&장점 학습
• Next13 변화 및 장점 관련 기술 블로그 글 작성

오늘 배운 것

Next13 변화 및 장점

(부제 : Next13을 사용해야 하는 이유)

Next13의 변화와 장점에 대해 알아보고 작성한 글은 여기서 확인할 수 있습니다.

HMR

Hot Module Replacement. 런타임에 페이지 새로고침 없이 모듈을 자동으로 개싱하는 기능을 의미합니다. 개발 경험을 향상시킨다는 장점이 있습니다.

ThemeProvider와 SSR

서버사이드렌더링에서는 Themeprovider를 사용할 수 없다. (특히 emotion의 ThemeProvider!!)

ThemeProvider대신 CSS의 변수 기능을 사용할 것을 추천한다.

CSS 변수

CSS는 변수를 사용할 수 있다.

변수는 —로 시작하는 이름으로 지정할 수 있으며, var() 함수 안에서 사용할 수 있다.

또한, 선언한 변수는 해당 클로저 안에서만 사용 가능하다.

변수를 사용하는 방법은 아래와 같다.

/* :root에서 선언할 시 전역변수처럼 사용할 수 있다. */
:root {
  --OWN-NAME : #343434;
    --color-white : #ffffff;
}

div {
    /* var()함수를 통해 변수를 사용할 수 있다. */
    color : var(--color-white);
}

SVGR

SVG를 JSX 컴포넌트처럼 사용할 수 있게 해주는 라이브러리. 자세한 사용방법은 여기에서 참고할 수 있다.

오늘 느낀 점

프로젝트를 새로 하나 시작했다. 일주일안에 프론트엔드 백엔드 모두 배포하는 것을 목표로 하고 있다!

그리고 CSS 변수는 신이야!!! 이 쉽고 좋은걸 왜 몰랐을까? CSS에 대해 공부할 필요성을 느낀다🔥🔥