peter 님의 블로그

목차1. 설치 방법2. 오류 내용3. 해결 방법 Next.js 15 프로젝트에서 @toast-ui/react-editor 설치 시 ERESOLVE unable to resolve dependency tree 오류가 발생할 수 있습니다. 이 오류는 프로젝트의 React 버전이 18인 반면, @toast-ui/react-editor는 React 17을 요구하여 종속성 충돌이 발생하기 때문입니다. 아래는 이를 해결하는 방법과 서버 측 렌더링 환경에서의 설정 방법을 다룹니다.1. 설치 방법- 라이브러리 설치npm install --save @toast-ui/react-editor - 코드 샘플import '@toast-ui/editor/dist/toastui-editor.css';import { Editor }..

목차1. 오류 내용2. 해결 방법  1. 오류 내용spring boot : 3.2.5 java : 17java.lang.NoSuchMethodError: 'java.lang.Object org.hibernate.ScrollableResults.get(int)' at com.querydsl.jpa.ScrollableResultsIterator.next(ScrollableResultsIterator.java:70) at com.querydsl.core.group.GroupByMap.transform(GroupByMap.java:57) at com.querydsl.core.group.GroupByMap.transform(GroupByMap.java:35) at com.querydsl.core.support.F..

목차1. 라이브러리 설치2. 설정파일 수정3. 코드 작성 1. 라이브러리 설치- 다음과 같이 라이브러리를 설치합니다 npm install @svgr/webpack 2. 설정파일 수정- next.js의 설정파일인 next.config.mjs의를 수정합니다/** @type {import('next').NextConfig} */const nextConfig = { ... webpack: (config) => { config.module.rules.push({ test: /\.svg$/i, issuer: /\.[jt]sx?$/, use: ["@svgr/webpack"], }); return config; },};export default nextConfig;3. 코..

목차1. 이미지 경로2. 코드 수정 이번 포스트에서는 Next.js에서 이미지를 등록하고 활용하는 방법에 대해 소개합니다. next/image 컴포넌트를 사용하여 로컬 이미지 파일을 등록하고 웹 페이지에 최적화된 상태로 표시하는 법을 다룹니다.예제로 로고 이미지를 클릭 시 홈으로 이동하는 기능을 구현하며, 이미지 속성 설정 및 스타일링을 Tailwind CSS와 함께 사용하는 방법을 보여줍니다. 1. 이미지 경로- 이미지의 경로는 public 폴더에서 img라는 폴더를 사용하며, 사용할 이미지를 복사해서 붙여넣습니다. 2. 코드 수정- next/image컴포넌트를 사용하여 예제코드를 작성하겠습니다.- css는 tailwind css이며, 이벤트는 홈으로 가는 이벤트입니다.import Image from ..

Next.js 15 mui 프레임워크 적용시 에러 해결 방법목차1. 오류 원인2. 해결 방법  1. 오류 원인 npx create-next-app@latest {projectName} 이와 같이 프로젝트 생성시 아래와 같이 프로젝트가 생성이 됩니다.package.json을 확인해보면 버전이 다음과 같습니다.Next.js : 15.0.2react : 19.0.0-rc-02c0e824-20241028  2. 해결 방법1. 프로젝트를 설치하면서, 간과 했던 부분이 node version 이었고 nvm으로 node version을 올렸습니다peter@juyoung blog-user % npm installnpm WARN ERESOLVE overriding peer dependencynpm WARN While r..

MariaDB에서 "ERROR at line 1: Unknown command '-'" 오류 해결하기목차1. 오류 내용2. 해결 방법 1. 오류 내용덤프 대상 버전 : 11.5.2복구 대상 버전 : 11.3.2 윈도우 MariaDB(서버) 덤프를 한 후 mac docker maria db(개발) 로 복구를 하는 과정에서 다음과 같은 에러가 발생했습니다ERROR at line 1: Unknown command '\-'. - 해결 방안으로 --force를 사용하라고 했지만..똑같은 오류가 발생했습니다mariadb -u root -p blog  2. 해결 방법ERROR at line 1: Unknown command '\-'. 오류 메시지는, 덤프 파일에서 불필요한 명령어가 포함되어 있을 때 발생한다고 합니다..

목차1. 프로젝트 생성2. 프로젝트 실행3. 화면 확인하기 프로젝트 버전 : 0.76.1 이 글에서는 React Native 프로젝트를 생성 및 실행하는 방법을 소개 합니다. 관련 툴이나 개발환경 셋팅과 관련해서는 포함되지 않습니다. 1. 프로젝트 생성- 이전에 글로벌 react-native-cli패키지를 설치한 경우 예상치 못한 문제가 발생할 수 있으므로 제거하세요.(공식문서)npm uninstall -g react-native-cli @react-native-community/cli - 프로젝트 React Native Community CLI를 사용하여 새 프로젝트를 생성할 수 있습니다npx @react-native-community/cli@latest init AwesomeProject   - [선..

MUI(Material-UI)는 React 기반의 프론트엔드 개발을 위한 오픈소스 UI 라이브러리입니다. MUI는 다양한 미리 설계된 컴포넌트들을 제공하여, React 개발자들이 빠르고 효율적으로 사용자 인터페이스(UI)를 구성할 수 있도록 돕습니다. 특히, 구글의 머티리얼 디자인(Material Design) 가이드라인을 바탕으로 디자인된 컴포넌트를 제공하여 일관된 사용자 경험을 유지하면서도 직관적인 디자인을 쉽게 구현할 수 있습니다.MUI의 주요 특징:컴포넌트 기반 구조: MUI는 버튼, 카드, 네비게이션 바 등과 같은 다양한 UI 컴포넌트를 제공하며, 이를 조합해 애플리케이션을 쉽게 구축할 수 있습니다.커스터마이징: 기본적으로 제공되는 디자인을 쉽게 변경하거나 커스터마이징할 수 있어, 자신만의 스타..

이 포스트에서는 Tailwind CSS를 Next.js 14.2.15 버전에 적용하는 방법을 설명합니다.App Router 방식을 사용하는 프로젝트를 기반으로, 설치부터 설정, 스타일 적용까지 단계별로 설명합니다.  목차 1. Tailwind CSS 설치 2. Tailwind 설정 파일 수정 3. globals.css 파일 수정 4. layout.js 수정 5. page.js 수정 6. Tailwind CSS가 정상적으로 작동하는지 확인  1. Tailwind CSS 설치- 다음과 같이 명령어를 작성합니다.npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p - 위 명령어를 작성하면. tailwind.config.js 파일이 생성..

설명:Nginx 웹 서버를 사용하는 윈도우 환경에서 무료로 SSL 인증서를 발급받는 방법을 소개합니다. 특히, 2024년 이후 Certbot 지원이 중단된 상황에서 win-acme를 사용해 SSL 인증서를 발급받는 과정을 상세히 설명합니다. 선행 작업:SSL 인증서를 발급받기 전에 다음 사항들을 준비하세요:80번 및 443번 포트 개방Nginx 설치 및 설정도메인 설정  목차:1. Win-Acme 설치 및 SSL 발급2. Nginx 설정 1. Win-Acme 설치 및 SSL 발급1. Win-Acme 다운로드Win-Acme 공식 사이트에서 프로그램을 다운로드하고 설치합니다.2. Win-Acme 실행 및 설정설치 후, win-acme을 실행하고 아래의 순서대로 설정을 진행하세요: Create certific..