JavaScript 썸네일형 리스트형 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.. ios에서 textarea maxLength 이슈 일반적으로 텍스트 영역에 줄 바꿈 문자를 입력하면 1자로 계산될 것으로 예상할 수 있다. 그러나 ipad 또는 iphone에서 maxlength 속성은 줄 바꿈 문자를 두 문자(\r\n)로 간주하므로 maxlength로 문자 수를 제한하는 데 이슈가 있다. 해결방법 maxlength로 글자수를 제한하지 않고, 직접 글자 수를 체크해서 잘라서 써야한다. const onChange = (e: React.ChangeEvent) => { const value = e.target.value; if (value.length > MAX_LENGTH) { e.target.value = value.substring(0, MAX_LENGTH); } }; rollup으로 번들한 모듈 Can't resolve ./index.scss rollup으로 번들한 모듈에서 Can't resolve ./index.scss 에러 발생 문제가 되는 코드 const style = require('./index.scss'); 해결 import style from './index.scss'; 이전 1 2 3 4 5 6 7 ··· 12 다음