CATEGORIES
자바스크립트 프레임워크 next.js에 대하여 알아봅니다.! next.js는?next.js는 매우 잘 알려진 프레임워크입니다. next.js를 사용하는 큰 이유 중 하나로 React를 사용한 프론트엔드 프레임워크이면서 서버사이드 랜더링이 가능하다는 점입니다.대시보드를 가지는 어드민, 관리자 페이지의 경우 서버사이드 렌더링이 꼭 필요한 것은 아니나 일반적인 홈페이지의 경우 SEO, 검색엔진 최적화를 위해서 서버사이드 렌더링 방식을 사용합니다. 이 경우 서버 코드를 직접 html 템플릿에 입력하는 방식은 하나의 언어만 사용하는 것보다 어렵고 비효율적일 수 있죠. 이런 문제를 해결할 수 있는 대안 중 하나가 바로 next.js와 같은 작고 기능에 충실한 프레임워크를 사용하는 방법입니다.# next.js 단순하고
Last Modified : 2020-06-22 22:40:25
프론트 프레임워크 Next.js를 사용하는 웹 프로젝트에서 내부 및 외부의 스크립트 파일을 추가하는 방법에 대하여 알아봅니다.# next.js에서 script 파일 추가하기nextjs는 서버 사이드 렌더링을 위한 목적으로 많이 사용됩니다. next.js에서는 <script> 파일을 불러오고 싶을때 어떻게 사용할 수 있을까요? 크게 두 가지 방법으로 가능합니다.하나. 페이지가 열릴 때 함수를 사용하여 추가하는 방법둘. /page/ 라우팅 페이지에 추가하여 사용하기여기서는 두 번째 방법을 알아봅니다. 왜냐하면 가장 빠르고 쉬운 방법이기 때문입니다.! /page/ 라우팅 페이지에 추가하여 사용하기이 방법은 원하는 웹페이지만 쉽게 스크립트 파일을 추가할 수 있습니다. 서버 사이드 렌더링(SSR) 방식이므로 해당 페
Last Modified : 2020-07-13 20:59:31타입스크립트(typescript)를 사용하는 웹어플리케이션이 많아지고 있습니다. 그 만큼 장점이 많기 때문이죠. 그런데 타입스크립트를 사용하면 개발 로컬 환경에서 추가적인 컴파일(트랜스파일) 시간이 길어지게 됩니다. 아래는 이에 대한 해결방법을 알아보려고 합니다.! 타입스크립트를 사용하면 왜 늦을까타입스크립트 역시 컴파일 과정을 통해 설정된 es5, esnext 등의 버전으로 변환되는 과정을 거치게 됩니다. react 등의 프론트엔드 환경에서는 웹팩(Webpack) 등의 번들링 과정을 거치게 될 것이고 이때 타입스크립트의 컴파일 역시 함께 수행되므로 로딩 시간은 더 걸리게 됩니다.가장 큰 문제는 시간이 생각보다 꽤 걸린다는 점입니다. 이는 프로젝트의 규모가 커질수록 더더욱 큰 이슈로 나타날 수 있습니다. 사
Last Modified : 2020-07-13 19:56:40next.js 프레임워크에서 라우팅(routing)을 사용하는 방법입니다. 어떻게 라우팅을 설정하는지 아래에서 알아봅니다.# next.js 라우팅 설정하기서버 사이드 렌더링 방식의 next.js는 매우 간단하고 쉽게 페이지 라우팅 설정이 가능합니다. 우선 라우팅 설정을 위해 앱의 상위 폴더에 /pages/ 폴더를 생성해야 합니다.하나. /pages/ 폴더 생성하기next.js에서 라우팅 설정하기 위해 /pages/ 폴더를 만들어야합니다. /pages/폴더에 추가된 파일들은 각각 하나의 페이지로 매핑되게 됩니다. 예를들어 만약 아래와 같은 세 페이지가 있다고 생각해봅니다.webisfree.comwebisfree.com/about/webisfree.com/contact/둘. /pages/ 폴더에 파일 만들어 추
Last Modified : 2020-07-11 21:01:17