프론트 프레임워크 Next.js를 사용하는 웹 프로젝트에서 내부 및 외부의 스크립트 파일을 추가하는 방법에 대하여 알아봅니다.# next.js에서 script 파일 추가하기nextjs는 서버 사이드 렌더링을 위한 목적으로 많이 사용됩니다. next.js에서는 <script> 파일을 불러오고 싶을때 어떻게 사용할 수 있을까요? 크게 두 가지 방법으로 가능합니다.하나. 페이지가 열릴 때 함수를 사용하여 추가하는 방법둘. /page/ 라우팅 페이지에 추가하여 사용하기여기서는 두 번째 방법을 알아봅니다. 왜냐하면 가장 빠르고 쉬운 방법이기 때문입니다.! /page/ 라우팅 페이지에 추가하여 사용하기이 방법은 원하는 웹페이지만 쉽게 스크립트 파일을 추가할 수 있습니다. 서버 사이드 렌더링(SSR) 방식이므로 해당 페
Last Modified : 2020-07-13 20:59:31
자바스크립트 프레임워크 next.js에 대하여 알아봅니다.! next.js는?next.js는 매우 잘 알려진 프레임워크입니다. next.js를 사용하는 큰 이유 중 하나로 React를 사용한 프론트엔드 프레임워크이면서 서버사이드 랜더링이 가능하다는 점입니다.대시보드를 가지는 어드민, 관리자 페이지의 경우 서버사이드 렌더링이 꼭 필요한 것은 아니나 일반적인 홈페이지의 경우 SEO, 검색엔진 최적화를 위해서 서버사이드 렌더링 방식을 사용합니다. 이 경우 서버 코드를 직접 html 템플릿에 입력하는 방식은 하나의 언어만 사용하는 것보다 어렵고 비효율적일 수 있죠. 이런 문제를 해결할 수 있는 대안 중 하나가 바로 next.js와 같은 작고 기능에 충실한 프레임워크를 사용하는 방법입니다.# next.js 단순하고
Last Modified : 2020-06-22 22:40:25
React 프레임워크 nextjs에서 커스텀 404(custom 404) 페이지를 만드는 방법을 알아봅니다.! Custom 404 페이지란?없는 페이지를 주소창에 입력할 경우 '404 not found page'와 같은 페이지를 찾지 못했다는 메시지가 나타나게 됩니다. 이처럼 찾는 페이지가 없는 경우 404 에러가 발생할 때 서버의 기본 에러 메시지가 아닌 404 에러 페이지를 따로 만들어 보여주는 것이 바로 커스텀 404 웹페이지 입니다.!! 커스텀 404의 장점은?404 페이지를 만들면 크게 두 가지 기대 효과가 있습니다. 먼저 좀 더 웹사이트에 맞는 디자인의 웹페이지를 제공할 수 있습니다. 또 하나는 찾지 못했지만 비슷한 링크나 아니면 기타 페이지 링크를 제공하는 것도 가능합니다. 그럼 아래에서 nex
Last Modified : 2020-08-31 22:34:47타입스크립트(typescript)를 사용하는 웹어플리케이션이 많아지고 있습니다. 그 만큼 장점이 많기 때문이죠. 그런데 타입스크립트를 사용하면 개발 로컬 환경에서 추가적인 컴파일(트랜스파일) 시간이 길어지게 됩니다. 아래는 이에 대한 해결방법을 알아보려고 합니다.! 타입스크립트를 사용하면 왜 늦을까타입스크립트 역시 컴파일 과정을 통해 설정된 es5, esnext 등의 버전으로 변환되는 과정을 거치게 됩니다. react 등의 프론트엔드 환경에서는 웹팩(Webpack) 등의 번들링 과정을 거치게 될 것이고 이때 타입스크립트의 컴파일 역시 함께 수행되므로 로딩 시간은 더 걸리게 됩니다.가장 큰 문제는 시간이 생각보다 꽤 걸린다는 점입니다. 이는 프로젝트의 규모가 커질수록 더더욱 큰 이슈로 나타날 수 있습니다. 사
Last Modified : 2020-07-13 19:56:40React 프레임워크 nextjs에서 페이지 이동하는 다양한 방법과 예제를 알아봅니다.# nextjs 페이지 이동하는 방법nextjs에는 SSR(Server Side Rendering)을 목적으로 많이 사용되므로 링크 이동시 두 가지 방법이 사용됩니다.state 변경의 비동기 이동 방식서버 사이드 렌더링(SSR) 방식의 페이지 이동아래에서 각각 알아봅니다.! 서버 사이드 방식의 페이지 이동, nextjs여기서 두 번째에 해당하는 SSR 방식은 일반적인 자바스크립트 코드나 a 태그를 사용하는 방법을 그대로 사용하는 것입니다.<a href="/test">Move</a>자바스크립트를 사용할 수도 있죠.window.open('/test', '_self');다음으로 서버사이드렌더링 방식이 아닌 라우팅을 사용한 sta
Last Modified : 2020-08-28 19:51:19next.js 프레임워크에서 라우팅(routing)을 사용하는 방법입니다. 어떻게 라우팅을 설정하는지 아래에서 알아봅니다.# next.js 라우팅 설정하기서버 사이드 렌더링 방식의 next.js는 매우 간단하고 쉽게 페이지 라우팅 설정이 가능합니다. 우선 라우팅 설정을 위해 앱의 상위 폴더에 /pages/ 폴더를 생성해야 합니다.하나. /pages/ 폴더 생성하기next.js에서 라우팅 설정하기 위해 /pages/ 폴더를 만들어야합니다. /pages/폴더에 추가된 파일들은 각각 하나의 페이지로 매핑되게 됩니다. 예를들어 만약 아래와 같은 세 페이지가 있다고 생각해봅니다.webisfree.comwebisfree.com/about/webisfree.com/contact/둘. /pages/ 폴더에 파일 만들어 추
Last Modified : 2020-08-27 12:04:44
Next.js를 사용하는 경우 head 영역에 스크립트 코드를 추가하려고 합니다. 어떻게 하면 되는지 간략하게 알아봅니다.# next.js head에 스크립트 추가하기아래는 nextjs 앱에서 analytics 등의 웹 트래킹 코드 추가가 필요하여 사용한 방법입니다. 이처럼 스크립트를 head에 추가한 이유는 하나의 페이지가 아닌 웹 사이트 전체에 스크립트 요소를 추가하기 위해서 입니다. 그럼 방법은 어떻게 될까요?- next/head 모듈을 사용하기- dangerouslySetInnerHTML를 사용하기가장 필요한 방법은 바로 위의 두 가지 입니다. 첫째로 next/head 모듈이 필요합니다.! next/head 사용하기이 모듈을 사용하면 앱의 head 영역에 원하는 코드를 추가할 수 있습니다. 스타일,
Last Modified : 2020-11-16 23:12:46