분류 전체보기 썸네일형 리스트형 Pages 번역 Next.js에서 페이지는 pages 디렉토리 안에 있는 .js, .jsx, .ts, or .tsx 파일에 있는 export된 React 컴포넌트이다. 각 페이지는 파일의 이름에 따른 route로 연결된다. 예시: 아래와 같은 React 컴포넌트를 export하는 pages/about.js를 생성하면 /about 에서 접근이 가능할 것이다. function About() { return About } export default About 동적 경로 Next.js는 다이나믹(동적) 라우트를 지원한다. 예를 들어 pages/posts/[id].js란 파일을 생성하면 post/1, post/2 같은 경로로 접근이 가능하다. 사전 렌더링 기본적으로 Next.js는 모든 페이지를 먼저 렌더링한다. 먼저 렌더링 한.. 내가 정리하는 Next.js 0. 요약 Next.js는 SPA고, 첫 페이지 내용이 모두 채워져 있는 html을 받아서 SSR이라고 하고, Link를 이용해서 CSR을 하고, 검색엔진최적화를 대응하려면 Next.js를 사용해야 된다. 1. Next.js는 SPA인가? Next.js는 SPA인 리액트에서 SSR을 할 수 있게 구현이 되어있는 프레임워크이다. Next.js는 기존의 Multi Page Form이랑 다른 개념이다. 기존 Multi Page Form은 page가 변경될 때 마다 서버에서 html 파일을 새로 내려주지만, Next.js는 첫 페이지만 내려주고, 나머지는 CSR한다. 즉, 페이지가 갱신될 때 store가 살아있는 이유는 Next.js도 SPA이기 때문이다. Next.js가 SPA인지 테스트해보기 위해 next .. Next.js Scripts "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" } dev - Next.js를 development 모드로 실행 (.next과 이외 파일들을 참조) build - 프로덕션 사용을 위한 애플리케이션을 빌드, 결과물: build/.next/ start - 빌드된 .next를 실행(build/.next를 실행) 즉 개발모드에선 dev를 실행하면 되고, 배포할 경우 build를 통해 .next 폴더를 최적화 한 후 yarn start를 통해 빌드된 .next를 실행시킨다. Next.js 에서 https 사용법 1. 터미널에 아래와 같이 입력 openssl req -x509 -out localhost.crt -keyout localhost.key \ -newkey rsa:2048 -nodes -sha256 \ -subj '/CN=localhost' -extensions EXT -config { http((req, res) => { const parsedUrl = parse(req.url, true); handle(req, res, parsedUrl); }).listen(ports.http, (err) => { if (err) throw err; console.log(`> HTTP: Ready on http://localhost:${ports.http}`); }); https(httpsOptions, (req, .. React에서 GSAP ScrollTrigger 사용법 포인트는 gsap.registerPlugin(ScrollTrigger)로 ScrollPlugin을 연결해주는 것! import React from 'react'; import { gsap } from 'gsap'; import { ScrollTrigger } from "gsap/ScrollTrigger"; const Main: React.FC = () => { useEffect(() => { gsap.registerPlugin(ScrollTrigger); const targets = document.querySelectorAll('#scroll-trigger'); targets.forEach(el => { gsap.fromTo(el, { autoAlpha: 0, }, { duration: 1, autoA.. 우당탕탕 React에서 CKEditor5 적용기 애플리케이션 개발 중에 에디터가 필요했다. CKEditor를 사용한 이유는 크게 없고 다들 CKEditor를 쓰길래..(찾아보기 귀찮아) 기본 Setting 1. CKEditor랑 에디터 타입 설치 나는 DecoupledEditor(=Document) 를 사용했다. yarn add @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-decoupled-document --save --dev 첫번째 난관 봉착,, 에디터 타입(Document)는 typescript를 지원하지만 CKEditor는 typescript를 지원하지 않기 때문에 index.d.ts 에서 모듈선언을 해줘야한다. @types/index.d.ts declare module '@ckeditor/cke.. React 에 Google Analytics 적용 분석으로 무엇을 할 수 있습니까? 사용자가 살고 있는 지역에 대한 통찰력을 얻을 수 있습니다. 어떤 연령대가 귀하의 비즈니스에 더 관심이 있는지 이해할 수 있습니다. 평균적으로 얼마나 많은 시간을 소비하는지 추적 신규 사용자 획득률 추적 수익 추적 개발자로서 얻을 수 있는 이점 애플리케이션에 버그가 있는지 추적할 수 있습니다. 사용자 관심에 따라 최적화할 수 있습니다. 따라서 개발자 또는 비즈니스의 규모가 아무리 작아도 웹사이트에 Analytics를 통합해야 합니다. Analytics는 완전 무료이며 설정이 정말 쉽기 때문입니다. Step 1. Install Dependencies yarn add react-ga Step 2. Setup Analytics Inside Project App.js 파일에 다.. React.js와 Next.js의 서버 배포 차이 Next.js는 React의 SSR 프레임워크이다. React는 아래의 과정으로 서버에 배포를 한다. 1. 소스를 webpack으로 build 2. 추출된 dist파일을 서버에 복사 3. static 이미지 경로 설정 app.use(express.static(path.join(__dirname, 'public'))); 4. / 이외의 url에서 접근해도 index.html을 바라보도록 설정 app.get('*', function (req, res) { res.sendFile(path.join(__dirname + '/public/index.html')); }); 5. index.html를 서버에 띄우기 React는 빌드된 파일이 index.html, bundle.js, assets으로 간단하지만 Next.. 이전 1 2 3 4 5 6 7 ··· 15 다음