본문 바로가기
반응형

전체 글280

[Next.js, Nextra] video Next.js, Nextra에서 영상 파일을 사용하는 법1. next-videos 설치$ npm install next-videos$ yarn add next-videos$ pnpm add next-videos 2. next.config.js에 종속성 적용// 다른 종속성 적용 부분const nextConfig = { ...}const withVideos = require("next-videos");module.exports = withVideos(nextConfig);3. video 태그로 영상 파일 사용  1. autoPlay: 자동재생 여부2. muted: 음소거3. loop: 반복배생4. style: 크기 조절5. src: 영상파일 위치 2024. 8. 12.
[Nextra] existSync is not a function Nextra로 문서정리 도중 existsSync 함수 Type Error가 발생 ○ Compiling /home ...TypeError: existsSync is not a function at file:///C:/[파일경로]/node_modules/.pnpm/nextra@2.8.0_next@14.2.5_react-dom@18.2.0_react@18.2.0/node_modules/nextra/dist/loader.mjs:19:35 위와 같은 에러 출력이 다른 모듈, 다른 위치 등에서 꽤 길게 발생 찾아보니 existsSync 함수가 함수가 아니라는 타입오류이며 이 문제는 아래와 같은 경우 발생1. existsSync 함수가 잘못된 모듈에서 호출되었음2. 해당 모듈이 올바르게 가져오지 못한 경우문제 .. 2024. 8. 11.
[CSS] Tailwind CSS purge관련 경고 해결 Tailwind CSS에서 purge관련 경고 해결warn - The `purge`/`content` options have changed in Tailwind CSS v3.0.warn - Update your configuration file to eliminate this warning.warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources오랫만에 Tailwind CSS를 사용하려 하는데 위와 같은 경고메시지가 출력된다. 이는 Tailwind CSS v3.0에서는 purge옵션이 content옵션으로 변경되었다는 점을 알려준다.기존 설정 파일을 업데이트하여 이 경고를 해결할 수 있다.기존 Tailwind CSS  설정파일.. 2024. 8. 10.
[Next.js, Nextra] @next/font 패키지 경고 해결 Next.js, Nextra에서 @next/font 패키지 경고 해결1. Next.js, Nextra에서 font관련하여 아래와 같은 경고문이 발생⚠ Your project has `@next/font` installed as a dependency, please use the built-in `next/font` instead. The `@next/font` package will be removed in Next.js 14. You can migrate by running `pnpm dlx @next/codemod@latest built-in-next-font .`. Read more: https://nextjs.org/docs/messages/built-in-next-font 2. 이 경고는 @ne.. 2024. 8. 9.
[Cloudflare] Zero Trust Policies로 특정 IP만 접근하게 하기 Cloudflare에서 Zero Trust Policies로 특정 IP만 접근하게 하는법Cloudflare Zero Trust 설정1. Cloudflare Dashboard에 로그인2. 대시보드의 Zero Trust 탭으로 이동 후 대시보드의 Access 선택, Applications 탭으로 이동4. Add an application클릭 후 Self-hosted 선택 후 application, 도메인, 이름등을 입력  - 이때 허용되지 않는 IP에서 접속하였을 시, Redirect를 해줄 웹사이트가 있다면 Block Pages 탭에서 설정5. Next를 클릭후 Access Policy 설정 후 새러온 정책을 추가6. Policy Type: Allow, Criteria: IP range (허용할 IP) 설.. 2024. 8. 8.
[개발용어] Framework vs Platform 프레임워크, 플랫폼이란?, 프레임워크 vs 플랫폼 프레임워크(Framework)1. 프로그램을 개발할 때 사용할 수 있는 인터페이스 패키지2. 인터페이스: 개발의 기본 구조와 필요한 코드, 알고리즘, 암호화 체계, 데이터베이스등의 연동방식의 집합체3. 그 자체가 완벽하게 동작할 수 있는 응용프로그램4. 따로 사용자가 작성한 코드가 없더라도 동작하는데 문제가 없음5. 기본적으로 실행해야 할 일을 가지고 사용자가 작성하는 코드의 시작점이 없어 제어를 프레임워크가 전담함6. 사용자는 프레임워크가 정의한 동작을 재정의하는 형태로 코드를 추가할 수 있음(Extensible)7. 프레임워크 자체의 변경은 용납하지 않음(Non-modifiable)8. 사용자가 쉽게 코딩할 수 있는 방법을 제공하지만 의존성도 높아짐e.. 2024. 8. 3.
[Node.js] npm에서 yarn Berry 혹은 pnpm으로 마이그레이션 npm에서 yarn Berry 혹은 pnpm으로 마이그레이션  1. npm에서 yarn Berry로 마이그레이션 0. yarn 설치sudo npm install -g yarn 1. yarn을 yarn berry로 변경yarn set version berry 2. .yarnrc.yml에 nodeLinker 정보추가nodeLinker: "node-modules"3. package.lock.json, node_modules 제거  4. node_modules 생성yarn install (yarn i) - .yarn 디렉토리 하위에 cache가 생성되지 않는다면 .yarnrc.yml에 다음 옵션 추가enableGlobalCache: false - cache, releases디렉토리 및 install-state... 2024. 8. 2.
[Node.js] npm, node version upgrade 1. node version upgrade0. 현재 node version 확인node -v 1. 아래 명령어로 npm에 남아있는 캐시를 우선적으로 삭제npm cache clean --force - 삭제해주지 않으면 최신 버전 업데이트를 할 때 오류가 발생 가능 2. 아래 사이트에서 nvm 다운로드https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windowsA node.js version management utility for Windows. Ironically written in Go. - coreybutler/nvm-windowsgithub.com - window에서는 위 nvm을 사용해야 함- mac 에서.. 2024. 8. 1.
[Node.js] 자바스크립트 패키지 매니저(npm, yarn, pnpm) npm vs yarn vs pnpm 1. 자바스크립트 패키지 매니저- Frontend 개발자가 사용하는 자바스크립트 패키지 매니저: npm, yarn, pnpm 등- 프로젝트 하나가 수십, 수백개의 패키지에 의존- Node.js실행환경(runtime)에서 돌아감- package.json이라는 파일에 프로젝트가 의존 및 패키지 목록 명시- 패키지는 프로젝트의 node_modules디렉토리에 저장2. npm (Node Package Manager)1. Node.js의 표준 패키지 매니저2. Node.js 설치 시 같이 설치되는 기본 패키지 매니저 2.1 npx (Node Package Runner)- npm에서 제공해주는 하나의 도구- 패키지의 최신버전 파일을 불러와 설치 및 실행하고 실행된 후 해당 패키지.. 2024. 7. 31.
[크롬 개발자 도구] 센서(위치정보 설정, 기기 방향 변경, 터치 이벤트 발생, 유휴상태 만들기) 크롬 브라우저를 사용하여 모바일 웹 개발을 할 경우 센서탭 활용1. 크롬에서 위치관련 정보를 사용하여 테스트할 때 사용하는 위치정보 설정2. 기기 방향에 따른 값을 테스트 해볼 때 사용하는 기기 방향 시뮬레이션3. 터치 이벤트 발생을 확인하여 테스트 해볼 때 사용하는 강제 터치4. 사용자 유휴상태 혹은 화면 잠금에 따른 테스트를 할때 사용하는 유휴상태 만들기 1. 위치정보 설정하기  1. 위 사진처럼 위치정보를 사용하기 위해 F12를 눌러 개발자도구로 들어가 설정 > More tools > Sensors를 차례대로 클릭한다.  2. 위 화면에 Locaation에 나오는 나라를 선택하면 해당 나라의 임의의 좌표가 나온다.아쉽게 한국위치는 프리셋 데이터에 없기때문에 Manage를 선택한 후에 아래 사진처럼 .. 2024. 7. 22.
반응형

티스토리툴바