Next.js

Next.js

Next.js, typescript 환경에서 절대경로(alias) 사용하기

자바스크립트가 만들어진 지 얼마 안 되었을 때는 자바스크립트로 만든 스크립트의 크기도 작고 기능도 단순했기 때문에 자바스크립트는 긴 세월 동안 *모듈 관련 표준 문법 없이 성장해왔다. 하지만 최근 앱의 사이즈가 커지면서 모듈화의 필요성이 생겨났고 브라우저, 노드 진영에서도 모듈시스템을 도입하기 시작했다. *모듈(module) : 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. 1. Next.js에서의 모듈 따로 특별한 설정을 해주지 않아도 모듈시스템이 적용되어 있다. 따로 설정이 없다면 이런식으로 ../../ 으로 구성된 상대경로로 적용된다. 상대경로로 표시하는 것이 문제되는 것은 아니지만 한..

Next.js

Next.js 폰트 설정하기 (feat.styled-components)

최근에는 순수 React를 사용하기보다 거의 모든 프로젝트에서 Next.js를 사용하고 있다. Next.js를 사용하지 않을 이유가 없기 때문인데.. Next.js의 장점에 대해서는 다른 글에서 자세히 써보도록 할 것이다. 보통 폰트는 프로젝트 세팅할 때 적용하고 따로 설정할 일이 많지 않기 때문에 방법을 잘 잊어버린다. 다시 찾아보는 수고를 덜기 위해서 Next.js에 폰트를 적용하는 방법을 자세히 작성해 볼 것이다. 1. 라이브러리, 프레임워크 버전 - Next.js 12.2.3 (13버전이 아님 주의!) - styled-components 5.3.5 폰트 관련 설정이므로 css관련 버전만 명시한다. 2. 사용할 폰트 - Prentendard Pretendard는 한글에 최적화되어 있고 9개의 다양한..

human_jo
'Next.js' 카테고리의 글 목록