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