Q. npm i react-copy-to-clipboard 패키지 설치시 아래와 같은 오류가 발생합니다. > npm i react-copy-to-clipboard npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: mbti-contents-platform@0.0.0 npm error Found: react@19.0.0 npm error node_modules/react npm error react@"^19.0.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^15.3.0 || 16 || 17 || 18" from react-copy-to-clipboard@5.1.0 npm error node_modules/react-copy-to-clipboard npm error react-copy-to-clipboard@"*" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error ... 강의 들으며 문제가 발생했고, 직접 해결한 방법을 공유합니다.🎯 오류 원인 분석오류 메시지를 분석하면, react-copy-to-clipboard@5.1.0 패키지가 React 19을 지원하지 않기 때문에 설치에 실패한 것입니다.🎯 1. 오류 원인 분석오류 메시지를 보면:npm error Found: react@19.0.0 npm error Could not resolve dependency: npm error peer react@"^15.3.0 || 16 || 17 || 18" from react-copy-to-clipboard@5.1.0 📌 원인프로젝트에 React 19.0.0이 설치되어 있음.하지만 **react-copy-to-clipboard@5.1.0**은 React 19을 지원하지 않음 (React 15~18까지만 지원).📌 결과react-copy-to-clipboard는 react@19와 호환되지 않아서 설치할 수 없음.강사님은 18버전으로 진행, 실습 시 vite로 최신버전이 19버전으로 설치됨 Soultion ✅ react-copy-to-clipboard 대신 다른 패키지 사용 (추천)현재 react-copy-to-clipboard는 React 19을 공식적으로 지원하지 않음.대신 React 19에서 정상적으로 동작하는 최신 패키지를 사용하는 것이 좋음.대체 패키지: @uidotdev/usehooks이 패키지는 useCopyToClipboard() 훅을 제공하며, React 19에서도 사용 가능.npm i @uidotdev/usehooks 📌 사용 예시 (useCopyToClipboard 활용)import { useCopyToClipboard } from "@uidotdev/usehooks"; export default function CopyButton() { const [copiedText, copy] = useCopyToClipboard(); return ( <div> <button onClick={() => copy("Hello, World!")}>복사하기</button> {copiedText && <p>복사 완료: {copiedText}</p>} </div> ); } 저는 위 방식을 통해 해결하였습니다. 더 좋은 방법이 있으면 공유해주세요.

안녕하세요! 강의 들으며 많은 부분 배우고 있습니다.DateCoverter 정규표현식 부분을 보면서 드는 의문이 있어 질문드립니다. 제가 이해한 바가 맞다면, 정규표현식에서 {1,2}부분은 앞부분의 패턴을 1번 또는 2번 반복한다고 이해했습니다.그렇다면 r"20\d{2}/([1-9]|0[1-9]|1[0-2]){1,2}/([1-9]|0[1-9]|[12][0-9]|3[01]){1,2}"라는 정규표현식에서 월과 일의 숫자를 체크하는 부분이 1번 또는 2번 반복될 수도 있으니 "2023/0303/1212"와 같은 문자열도 통과 가능한 것일까요?

안녕하세요. 백엔드에서 connect.sid 쿠키와 next-auth의 auth.js-session-token을 사용해서 유저 인증을 하는 것 처럼 보입니다. 프론트서버에서 유저가 접근 시 세션 쿠키(connect.sid)를 받아 백엔드에 유저 세션을 확인한다면 next-auth를 사용하지 않아도 되는 것처럼 보입니다.  백엔드에서 auth.js-sessoin-token으로 유저 인증을 한다면 역시 세션 쿠키(connect.sid)가 필요없는 것처럼 보입니다.connect.sid와 auth.js-session-token 쿠키를 모두 사용해야 하는 이유가 있을까요? 만약 둘 다 사용하는게 좋다고 한다면 동기화가 필요할 것 같은데(만료 시간, 세션 무효화 등..), 이건 어디서 어떻게 처리하는게 좋을까요?(예외 질문) connect.sid의 쿠키에 httpOnly 옵션이 false여도 괜찮은가요? 혹시 백엔드에서 connect.sid의 쿠키를 httpOnly로 보냈다면 쿠키파싱이 제대로 안된 것 같습니다. 아래 모듈로 쿠키파싱하면 되는 것 같습니다. 혹시나하고 남겨봅니다. //현재 코드 //import cookie from "cookie"; //const parsed = cookie.parse(setCookie); import { parseSetCookie } from "next/dist/compiled/@edge-runtime/cookies"; const parsed = parseSetCookie(setCookie);  

강의에서 모든 부분이 잘 따라왔습니다.다만.. 마지막 안드로이드 가상 에뮬레이터가 작업표시줄 창에는 뜨지만 직접적으로 확인하지 못하고 있습니다. 클릭해도 아무 반응이 없고, 작업 표시줄에 있는 프로그램에 마우스를 올려보면 이렇게만 뜨고 있습니다. adb 설치도 다시 해보았고, 에뮬레이터에서 앱이 실행 중인지도 adb shell pm list packages | grep 명령어로 확인해보았습니다. 제가 놓친 부분이 있는 걸까요?

const res = await fetch( `${process.env.NEXT_PUBLIC_BASE_URL}/api/posts/recommends?cursor=${pageParam}`, { next: { tags: ["posts", "recommends"], }, //cache: "force-cache", } );'/home'에서 포스팅 로딩 시또는 새로고침 시에 데이터를 최초 조회하는 시점에서cache: "force-cache"를 제거하면 포스팅이 노출되고포함하면 포스팅이 안 나오는 현상이 있는데어떤 이유인지 의심 가는 부분을 못 찾겠어서 질문 드립니다. cache: "force-cache" 주석처리데이터 존재 cache: "force-cache"빈 배열 

❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, Expo, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.pgAdmin4에 저장된 유저 정보에 비밀번호를 보면 제가 임의로 입력한 비밀번호가 아닌 암호화?된 값이 저장되어있는데 이 부분은 올려주신 server 백엔드에서 진행된건가요? 프론트 부분에서는 없는것 같아서 여쭤봅니다. 프론트가 아닌 백엔드에서 암호화하는게 맞는것 같긴 한데, 혹시나 놓친 부분이 있는건가 싶어서 여쭙니다.

업로드파일 조회/삭제 7분 58초에 ResponseEntity를 컨트롤러에 넣는것은 15년전 방식이라고 말씀해주셨는데요.근데 ProductController에 아래 같이 있는데요. @GetMapping("/view/{fileName}") public ResponseEntity<Resource> viewFileGET(@PathVariable String fileName){ return fileUtil.getFile(fileName); }아래 코드를 Controller에 넣는게 15년전 방식인건가요?//파일 조회하는것 public ResponseEntity<Resource> getFile(String fileName) { Resource resource = new FileSystemResource(uploadPath+ File.separator + fileName); if(!resource.exists()) {//파일이 없을 떄 resource = new FileSystemResource(uploadPath+ File.separator + "default.jpeg"); } //http 헤더가 중요. 내가 보낸 타입을 알아야함. HttpHeaders headers = new HttpHeaders(); try{//마이 타입 headers.add("Content-Type", Files.probeContentType( resource.getFile().toPath() )); } catch(Exception e){ return ResponseEntity.internalServerError().build(); } return ResponseEntity.ok().headers(headers).body(resource); }

안녕하세요! https://www.inflearn.com/community/questions/1528169이 분과 똑같은 오류가 발생하는데요!혹시 해결된 방안이 있을까요,,? 어디서 확인할수있을까요?

안녕하세요 강의 잘 듣고 있습니다!  수업 중 reducer의 마지막 부분에 localStorage.setItem()를 호출하여 로컬 스토리지에 데이터를 저장하셨는데요. 그 이유는 데이터의 생성, 수정, 삭제가 reducer 함수 호출 시 이루어지기 때문이라고 이해했습니다.  만약 reducer 내부가 아닌 아래 코드처럼 data를 deps로 가지는 useEffect안에서 데이터를 저장해도 동일하게 동작하는 것이 맞을까요?useEffect(() => { localStorage.setItem("diary", JSON.stringify(data)); }, [data]);

한입 Next는 따로 PDF 교안이 제공되지 않나요? 

안녕하세요! on demand isr 의 실제 사용 관련해서 질문 드려요!const revalidate = async () => {        try {          const response = await fetch("/api/revalidate");          const result = await response.json();           if (result.revalidate) {               //페이지 갱신이 됐을 때       } else {  //페이지 경신 안됐을 때                   }        } catch (error) { //에러처리        }      };특정 조건에 따라 on demand isr을 제대로 사용하려면 이런식으로 저희가 만든 api를 호출하는 비동기 함수를 만들어서 특정 조건문 아래에서 이 새로만든 함수를 호출하면 되는걸까요?? 감사합니다!

❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, Expo, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.윈도우에서 개발중이고 백엔드 서버 잘셋팅 되어 있습니다(로그인 부분은 잘 넘어갔습니다)다만 글 저장이 안되어서 도저히 봐도 모르겠어서 올려주신 소스 그대로 다운 받아 다시 설치 후 해봐도 저장이 되지 않습니다. 콘솔에 오류도 안뜨고 디버깅 이것저것 해봐도 도통 모르겠습니다 (소스 받아서 해도 안되서요 ㅠㅠ) 다만 axios.ts에서 안드로이드 저 주소가 되지 않아제 로컬 아이피 주소를 했더니 로그인 부분이 잘 넘어갔습니다. 이 주소는 그대로 해도 그냥 제 로컬 아이피 주소를 해도 어찌되었던 저장은 되지 않습니다. 여기서 진도가 나가지 않아 답답하네요 ㅠㅠexport const baseUrls = { android: "http://10.0.2.2:3030", ios: "http://localhost:3030", };

안녕하세요! 섹션3 2.14)SSG2.정적 경로에 적용하기 강의 17분23초에서 useEffect 의존성 배열 관련해서 React Hook useEffect has a missing dependency: 'fetchSearchResult' 라고 이 함수를 의존성 배열에서 빠트렸다고 경고가 저도 나왔는데 여기서 함수를 의존성 배열에 꼭 넣어야 하는건가요?? 감사합니다!

css를 적용하였는데도 감정 이미지의 background가 적용이 되지 않는데 잘못된 것이 있을까요??.Viewer > section{ width:100%; margin-bottom: 100px; display: flex; flex-direction: column; align-items: center; text-align: center; } .Viewer > section > h4{ font-size:22px; font-weight: bold; } .Viewer .emotion_img_wrapper{ width:250px; height:250px; border-radius: 5px; display:flex; flex-direction: column; align-items: center; justify-content: space-around; color: white; font-size: 25px; } .Viewer .emotion_img_wrapper_1{ background-color: rgb(100,201,100); } .Viewer .emotion_img_wrapper_2{ background-color: rgb(157,215,114); } .Viewer .emotion_img_wrapper_3{ background-color: rgb(253,206,23); } .Viewer .emotion_img_wrapper_4{ background-color: rgb(253,132,70); } .Viewer .emotion_img_wrapper_5{ background-color: rgb(253,86,95); }

import React, { useEffect, useState } from "react"; import useCounter from "./useCounter"; const MAX_CAPACITY = 10; export default function Accommodate() { const [isFull, setIsFull] = useState(false); const [count, increaseCount, decreaseCount] = useCounter(0); console.log(count,"rendor Accommodate", new Date().getMilliseconds()) useEffect(() => { console.log("===================="); console.log("useEffect() is called."); console.log("isFull:", isFull); }); useEffect(() => { setIsFull(count >= MAX_CAPACITY); console.log("Current count value:", count); }, [count]) return <> <button onClick={increaseCount}>입장</button> <button onClick={decreaseCount}>퇴장</button> {isFull && <p>정원이 가득 찼습니다.</p>} </>; }안녕하세요! 실습 진행 중에 이해가 안되는 부분이 있어 질문드립니다!우선 컴포넌트 내부에 포함된 state가 변경될때 컴포넌트가 재렌더링 되는게 맞을까요?그게 맞다면, 다음과 같은 순서로 실행된다고 생각했는데요.입장 버튼 클릭increaseCount가 실행되면서 count 상태가 변경됨Accommodate 컴포넌트가 재렌더링첫번째 useEffect함수가 실행두번째 useEffect함수가 실행 그리고 위 순서에 따라 console에는 다음과 같이 출력될 것이라고 예상했는데, 실제로는 캡쳐화면처럼 출력되더라구요.어떤 이유로 컴포넌트 최상단에 있는 console.log(count,"rendor Accommodate", new Date().getMilliseconds()) 코드가 두번 실행되는 건지 이해가 안됩니다.ㅠ제가 놓치고 있는 부분이 많은 것 같은데 어디서 부터 놓친건지 잘 정리가 되지 않네요!ㅠㅠ0 'rendor Accommodate' 991 ==================== useEffect() is called. isFull: false Current count value: 0 1 'rendor Accommodate' 430 ==================== useEffect() is called. isFull: false Current count value: 1 

고농축 프론트엔드 강의와 완벽한 프론트엔드 강의 커리큘럼이 차이가 많이 날까요?추가된 강의 공지는 읽어봤는데 기존의 기본적인 리액트 내용에서 업데이트가 많이 되었다던가 등 차이가 많이 나는지 궁금합니다.

header 에서는 header-area를 따로 만들어서 이미지를 관리를 하였는데body에서 배너는 배너-area를 따로 안만들고 바로 banner에 이미지를 넣어서 관리하는 이유가 따로 있나여?? 무슨차이인가요 

아래에 질문이 있으나 해결안이 없어 다시 문의드립니다.refreshToken, 쿠키는 정상적으로 전달되고 있습니다.setCookie도 나옵니다. 그러나, Application에 나타나지 않습니다.그리고 조금 기다렸다가 acessToken을 재발급하려고 클릭하면 아래와 같은 메시지가 나타납니다. 크롬에서 써드파티 쿠키를 다 accept하도록 설정이 되어있고, 시크릿 모드에서도 진행해봤고 사파리에서도 동일합니다. 클릭하여 나타난 통신기록을 총 3번입니다.첫번째 통신은 accessToken만료로 발생한 것으로 보입니다.네트워크 통신기록을 살펴보면 UNAUTHENTICATED가 발생된 것을 알수 있습니다. 두번째 통신은 restoreAccessToken의 뮤테이션입니다. 헤더와 페이로드는 아래와 같습니다. jwt가 첨부되지 않았다는 부분입니다. 3번째 통신의 Header와 payload, response입니다. 이 부분은 주어진 조건으로 사용자 정보를 불러오는 query같습니다. 사용자에 관련된 정보가 없이 시도되어 _id null이 표시된것 같습니다.인터넷에 검색해보았지만 잘 모르겠습니다. axios통신으로 refreshToken을 직접 저장해주는 코드를 보긴 했는데, graphql은 설정만 바꾼다고 하셔서 refreshToken을 어떻게 처리하는지 잘 모르겠습니다.관련해서 검색을 통해 https로 환경을 바꾸면 될거다 하여, localhost:3000을 mkcert로 https로 환경을 바꾸려고 해봤는데 설치만 하고 아래의 글을 발견해서 잠깐 멈추었습니다. https://shingy.tistory.com/46  _id null의 문제가 local에 받아온 쿠키를 저장하지 못하는 문제인것 같은데, 어떻게 처리할수있는 방법이 있나 싶어서 여쭤봅니다.  코드 getAccessToken의 코드 import { GraphQLClient, gql } from "graphql-request"; import { IMutation } from "../../../commons/types/generated/types"; const RESTORE_ACCESS_TOKEN = gql` mutation { restoreAccessToken { accessToken } } `; export const getAccessToken = async (): Promise<string | undefined> => { try { const graphQLClient = new GraphQLClient( "https://backend-practice.codebootcamp.co.kr/graphql", { credentials: "include" }, ); const result = await graphQLClient.request<Pick<IMutation, "restoreAccessToken">>( RESTORE_ACCESS_TOKEN, ); const newAccessToken = result.restoreAccessToken.accessToken; return newAccessToken; } catch (error) { if (error instanceof Error) console.log(error); } }; 아폴로 클라이언트 코드 import { ApolloClient, InMemoryCache, ApolloProvider, ApolloLink, fromPromise, } from "@apollo/client"; import { createUploadLink } from "apollo-upload-client"; import { useRecoilState } from "recoil"; import { accessTokenState } from "../../../commons/store"; import { useEffect } from "react"; import { ErrorResponse, onError } from "@apollo/client/link/error"; import { getAccessToken } from "../libraries/getAccessToken"; const GLOBAL_STATE = new InMemoryCache(); interface IApolloSettingProps { children: JSX.Element; } export default function ApolloSetting(props: IApolloSettingProps) { const [accessToken, setAccessToken] = useRecoilState(accessTokenState); useEffect(() => { const result = localStorage.getItem("accessToken"); console.log(result); console.log("현재는 브라우저입니다"); setAccessToken(result ?? ""); }, []); const errorLink = onError(({ graphQLErrors, operation, forward }) => { //1-1.에러캐치 if (typeof graphQLErrors !== "undefined") { for (const err of graphQLErrors) { //1-2.토큰 만료에러인지 체크 if (err.extensions?.code === "UNAUTHENTICATED") { return fromPromise( getAccessToken() .then((newAccessToken) => { setAccessToken(newAccessToken ?? ""); operation.setContext({ headers: { ...operation.getContext().headers, Authorization: `Bearer ${newAccessToken}`, }, }); }) .catch((err) => { console.log("오류입니다"); }), ).flatMap(() => forward(operation)); } } } }); const uploadLink = createUploadLink({ uri: "https://backend-practice.codebootcamp.co.kr/graphql", headers: { Authorization: `Bearer ${accessToken}`, credentials: "include", }, }); const client = new ApolloClient({ link: ApolloLink.from([errorLink, uploadLink]), uri: "http://backend-practice.codebootcamp.co.kr/graphql", cache: GLOBAL_STATE, }); return <ApolloProvider client={client}>{props.children}</ApolloProvider>; }로그인 success의 코드import { gql, useApolloClient, useQuery } from "@apollo/client"; import type { IQuery } from "../../../src/commons/types/generated/types"; import { wrapAsync } from "../../../src/components/commons/libraries/asyncFunt"; const FETCH_USER_LOGGED_IN = gql` query fetchUserLoggedIn { fetchUserLoggedIn { email name } } `; export default function LoginPage() { const client = useApolloClient(); const onClickButton = async (): Promise<void> => { const result = await client.query({ query: FETCH_USER_LOGGED_IN, }); console.log(result); }; return ( <> {/* <div>{data?.fetchUserLoggedIn.name}님, 환영합니다.</div> */} <div>환영</div> <button onClick={wrapAsync(onClickButton)}>클릭하세요</button> </> ); }

commponents 폴더 하위에 Button.jsx 파일을 만들고 const Button = () => { return <Button>Click</Button>; }; export default Button; 이렇게 입력한 후에 App.jsx에서 import "./App.css"; import Header from "./commponents/Header.jsx"; import Footer from "./commponents/Footer.jsx"; import Main from "./commponents/Main.jsx"; import Button from "./commponents/Button.jsx"; function App() { return ( <> <Button /> <Button /> <Button /> </> ); } export default App; 이렇게 입력하고 새로고침을 하면 계속 이렇게 나오는데 왜 그런걸까요. 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요 덕분에 좋은 강의 잘 듣고 있습니다!next.js 강의의 2.9 의 14분 가량 보면 <Link> 태그 입력하면 자동으로 import 문이 작성되는데 어떤 패키지를 쓰시는건지 물어봐도 될까요?