반응형

분류 전체보기 54

[ Next.js 14 ] quill-image-resize 이미지 스타일 유지 안되는 문제 ( Image styles not being retained in quill-image-resize ) , code-block highlight

.ql-editor blockquote { border-left: 4px solid #ccc; /* 좌측 강조선 */ margin: 0; padding: 10px 15px !important; color: #555; background-color: #f9f9f9; font-style: italic; font-size: medium;}.ql-syntax { background-color: #f4f4f4 !important; /* 배경색 */ padding: 15px !important; /* 여백 */ font-family: "Courier New", Courier, monospace !important; color: #555 !important; font-size: small;} "..

Next.js 14 2024.12.11

AWS - Amplify, cognito 사용하여 인증 구현

Amplify cli 설치Amplify cli설치를 위해서는 12.x버전 이상의 node와 6.x버전 이상의 npm이 설치되어 있어야 합니다.npm install -g @aws-amplify/cli  IAM 사용자 생성amplify configure 생성한 액세스 키를 잘 저장해 둡니다.이미 IAM 사용자라면 이 단계를 건너뛰어도 됩니다.  Amplify 프로젝트 초기화amplify init자신의 프로젝트에 맞게 설정합니다. nextjs의 경우 Distribution Directory Path를 .next로 변경합니다.자식의 액세스 키를 사용하여 인증하면 됩니다. 작업 폴더 내에 amplify폴더와  aws-exports.js 파일이 생성됩니다.AWS Amplify에서 생성한 앱을 확인 할 수 있습니다...

AWS 2024.05.08

[ Nextjs14 ] - Tailwind and Material UI 사용시 배포 후 css가 적용안되는 문제

Nextjs와 tailwind , mui로 프로젝트를 진행하면서 amplify에 배포 후 일부 컴포넌트의 css가 개발환경과 다르게 적용되는 문제가 생겼습니다. 코드는 다음과 같습니다. setIsShow(!isShow)}> {"tses"} setIsShow(!isShow)}> {"tses"} tailwind로 작성된 text-black은 배포 후 버튼 둘다 적용되지 않았고 회전 딜레이를 준 아이콘은 style로 작성한 앞의 버튼만 정상동작했습니다. 해결방법은 mui 공식문서에 나와있습니다. https://mui.com/material-ui/integrations/interoperability/#tailwind-css tailwind.config.ts import type { Config } from "t..

Next.js 14 2024.02.21

[ Nextjs14 ] - 클라이언트 컴포넌트 안에있는 서버 컴포넌트 , Passing Server Components to Client Components as Props , Client components within Server components

Nextjs로 다크모드를 적용하던 중 다음과 같은 의문이 생겼다. 'use client' import { ThemeProvider } from 'next-themes'; interface ThemePropsInterface { children?: JSX.Element | Array | React.ReactNode; } export default function Providers(props:ThemePropsInterface) { const {children} = props; return ( {children} ) } 위의 코드에서 Provider는 클라이언트 컴포넌트인데 이걸로 감싼 children에 해당하는 컴포넌트는 모두 클라이언트 컴포넌트가 되는게 아닐까 ? 결국 SSR이 없어지고 Nextjs를 쓰..

Next.js 14 2024.01.19

프로그래머스 - 타겟넘버 js ( DFS/BFS )

문제 더보기 문제 설명 n개의 음이 아닌 정수들이 있습니다. 이 정수들을 순서를 바꾸지 않고 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있습니다. -1+1+1+1+1 = 3 +1-1+1+1+1 = 3 +1+1-1+1+1 = 3 +1+1+1-1+1 = 3 +1+1+1+1-1 = 3 사용할 수 있는 숫자가 담긴 배열 numbers, 타겟 넘버 target이 매개변수로 주어질 때 숫자를 적절히 더하고 빼서 타겟 넘버를 만드는 방법의 수를 return 하도록 solution 함수를 작성해주세요. 제한사항 주어지는 숫자의 개수는 2개 이상 20개 이하입니다. 각 숫자는 1 이상 50 이하인 자연수입니다. 타겟 넘버는 1..

프로그래머스 - 피로도 js ( 완전탐색 )

문제 더보기 문제 설명 XX게임에는 피로도 시스템(0 이상의 정수로 표현합니다)이 있으며, 일정 피로도를 사용해서 던전을 탐험할 수 있습니다. 이때, 각 던전마다 탐험을 시작하기 위해 필요한 "최소 필요 피로도"와 던전 탐험을 마쳤을 때 소모되는 "소모 피로도"가 있습니다. "최소 필요 피로도"는 해당 던전을 탐험하기 위해 가지고 있어야 하는 최소한의 피로도를 나타내며, "소모 피로도"는 던전을 탐험한 후 소모되는 피로도를 나타냅니다. 예를 들어 "최소 필요 피로도"가 80, "소모 피로도"가 20인 던전을 탐험하기 위해서는 유저의 현재 남은 피로도는 80 이상 이어야 하며, 던전을 탐험한 후에는 피로도 20이 소모됩니다. 이 게임에는 하루에 한 번씩 탐험할 수 있는 던전이 여러개 있는데, 한 유저가 오..

반응형