[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 이 과정에서 jdbc:h2:~/jpashop까지 입력을 완료하고 데이터베이스가 잘 생성이 되었는데 ~ /jpashop.m v.db이 어디에 생성된건지 모르겠습니다. ~ /jpashop.m v.db
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예 [질문 내용] 값타입 @MappedSuperclass의 차이가 무엇인가요? BaseEntity를 @MappedSuperclass로 놓고 상속받아서 여러 속성을 한꺼번에 갖는것과 값타입 클래스를 @Embeddable로 설정해서 위임하는 것의 차이가 궁금합니다. 둘다 여러 속성들을 동시에 관리해서 다른 테이블의 속성으로 사용하기 위한 목적이라면 하나만 있으면 될 것 같은데, 왜 굳이 2개 모두 필요한가요?
React Query 공식 문서에 보면 queryClient 인스턴스를 생성해서 바로 QueryClientProvider의 client로 넘겨주고 있는데 제로초님께서는 useState의 초기 값으로 QueryClient의 인스턴스를 생성해서 넘겨주는 방법을 사용하셨는데요. 이 두가지 방법 중에 어떤 것을 사용해야 좋을지 궁금합니다. // 공식 문서 const queryClient = new QueryClient() function App() { return ( <QueryClientProvider client={queryClient}> <Todos /> </QueryClientProvider> ) } // 제로초님 강의 function ReactQueryProvider({children} : Props) { const [client] = useState( new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, retry: false, } } } ) ) return <QueryClientProvider client={queryClient}></QueryClientProvider> }
크롬 개발자 도구에서 페이로드 확인을 하면 fetchBoards가 두번 요청을 합니다. 시작점을 확인을 해보면 createUploadLink.js에서 빈 값으로 요청을 하고 두 번째 요청에서는 제대로 index.tsx에서 값을 넣고 refetch를 진행을 합니다. fetchBoards가 1,3번 이고 fetchBoardsCount가 2번 입니다. 사용하는데 있어 아무런 문제 없이 사용이 가능한데 왜 이런 현상이 있는지 해결을 하고 싶습니다. 첫 마운트가 되거나 API요청을 하면 불필요한 fetchBoards, fetchBoardsCount가 createUploadLink.js에서 요청이 가는데 ApolloClient Setting 부분에서 요청이 가는 걸 확인 했습니다. const uploadLink = createUploadLink({ uri: "http://backend-practice.codebootcamp.co.kr/graphql", }); const client = new ApolloClient({ link: ApolloLink.from([uploadLink]), cache: new InMemoryCache(), }); refetch하는 전체 코드입니다. // test - refetch 문제 export default function Hom(): JSX.Element { const { data, refetch } = useQueryFetchBoards(); const { data: dataBoardsCount, refetch: refetchBoardsCount } = useQueryFetchBoardsCount(); const router = useRouter(); const render = useRef(false); useEffect(() => { // 첫 마운트 실행 막음 if (!render.current) { render.current = true; console.log("처음 실행됨"); return; } const search = String(router.query.search); const page = Number(router.query.page) || 1; if (search === "undefined") { void refetch({ page }); console.log("검색X"); } else { void refetch({ page, search }); void refetchBoardsCount({ search }); console.log("검색O"); } console.log("Hom Search: ", search); }, [router.query]); return ( <> <SearchBar /> {data?.fetchBoards.map((el, index) => ( <div key={index}>{el.title}</div> ))} <Pagination count={dataBoardsCount?.fetchBoardsCount} /> </> ); } 여기서 <SearchBar /> , <Pagination />는 router.push에서 query로 ?search= , ?page= 쿼리스트링 만드는 역할만 하고 있고 전체 부모 컴포넌트에서 useEffetch로 refetch하고 있습니다. "next": "13", "react": "^18.2.0", "apollo-upload-client": "^17.0.0", 입니다.
redirect는 try/catch문 안에 있으면 안돼서 그 위해 shouldRedirect의 값으로 조건문을 만들어 if문 안에서만 redirect하게 하셨는데, 이후에 catch문에서 return을 넣어주시더라고요. 그러면 shouldRedirect라는 변수를 쓰지 않아도 어차피 catch문이 실행된 경우에는 return 되니까 redirect를 아래에 그냥 배치해도 상관없지 않나 질문드립니다.
강의에서 알려주신 router.replace() 를 사용하지 않고 // @/app/(beforeLogin)/@modal/(.)login/page.tsx import { redirect } from "next/navigation"; export default function Login() { redirect("/i/flow/login"); } 기존의 이 코드를 인터셉트 라우팅으로 줘서 홈페이지 -> 인터셉트 라우팅된 /login -> 인터셉트 라우팅된 /i/flow/login 으로 이동하도록 폴더를 구성해서 구현해 봤습니다. 이 방식으로 구현해도 문제 없을까요?
안녕하세요! 제로초님 [리뉴얼] React로 NodeBird SNS 만들기 강의의 섹션 6. AWS에 배포하기: 우분투에 MySQL 설치하기 까지 진행한 수강생 입니다! 저는 windows 10을 사용 하고 있으며, 윈도우 서비스에서 MySQL을 실행 한 상태입니다. 아마존의 front와 back 인스턴스가 잘 실행되고 있음 을 확인하였습니다. 사전에 AWS 우분투 프론트와 백엔드 서버 두 곳 모두 node와 npm을 설치 하였습니다. node 버전은 v14.21.3, npm 버전은 6.14.18을 설치 하였습니다. AWS 우분투 백엔드 서버와 root 서버에서 MySQL 8 버전을 완전 삭제한 후 재설치 하였습니다. (원래 우분투 백엔드 서버에만 설치해야 하는데 루트 경로에 설치하는 바람에 재설치를 진행하였습니다!) 사진과 같이 백엔드 root 서버 터미널에 npx sequelize db:create을 입력하면 command not found: sequelize (sequalize 명령을 찾을 수 없습니다.)가 뜹니다. 문제를 해결하기 위해서 첫 번째로 sequelize와 sequelize-cil이 back 폴더에 제대로 설치가 되어있는지 확인했습니다. 아래 사진과 같이 back 폴더의 package.json 파일에서 시퀄라이즈 잘 설치되어 있음을 확인하였습니다. 두 번째로, 우분투 리눅스 루트 command not found: sequelize, npx sequelize db:create command not found: sequelize 해결 시퀄라이즈 command not found 해결 등등의 command not found: sequelize 관련 키워드를 구글링 하고, 노드버드 강의 커뮤니티 글을 보던 중 npx sequelize db:create 대신 sudo npx sequelize db:create 사용하는 방법을 찾았습니다. sudo를 사용해 npx sequelize db:create을 시도하였으나 여전히 sequelize 명령어가 없다고 뜹니다. 어떻게 하면 백엔드 root 서버에서 npx sequelize db:create을 성공할 수 있을까요? 혹시 관련 키워드나 힌트를 주실 수 있나요? 항상 강의 열심히 듣고 있습니다. 긴 글 읽어주셔서 감사합니다 제로초님!
질문이 있습니다. page 같은 경우는 최대한 SSR로 하고 page 하위에 사용되는 컴포넌트 같은 경우는 브라우저 API 사용한다면 CSR로 하는게 맞나요? ( 하이브리드 렌더링 방식 ) app/page.tsx 파일 상단에 "use client" 선언하면 페이지 전체가 CSR로 된다고 생각하는데 네트워크 창에 localhost 에 preview를 보면 빈 페이지가 아닌 렌더링된 내용이 보이는데 왜 그런걸까요?
이미지에 Link 태그를 쓰는거에 대한 질문입니다. Link 같은 경우에는 default로 prefetch가 되는데, 이미지를 눌렀을때 나오는 정보들은 굳이 prefetch를 미리 하고 있을 필요는 없겠죠? 그러면 실제 서비스라면 prefetch를 false로 하거나 router.push를 이용하는게 좋지 않을지 궁금합니다. 페이지를 구성할때 존재하는 모든 경로를 Link 태그로 그냥 쓰게 되면 prefetch가 모두 되어버려서, 큰 카테고리를 이동하는 경우만 prefetch를 키면 되지 않을까 하는 고민입니다.
안녕하세요? 꾸준히 학습을 하여 60강을 지나고 있는데요, 페이지.tsx 에서도 프리즈마를 활용해서 데이터를 서버로 요청하는것은 처음 보았습니다. 이렇게 되면 라우트를 거치지 않고 바로 데이터요청을 하는 것인데.. Fetch 를 통한 route.tsx 를 거치지 않고 바로 요청하는 이유가 있는지요? 현업에서도 이렇게 하는 경우가 자주 있는지요?
안녕하세요 선생님 useSelectedLayoutSegment usePathname 두 훅의 차이점이 궁금합니다. 둘 다 url에서 쿼리스트링 전까지 나오는 문자열을 추출하는 훅으로 보이는데 언제 어떤 훅을 사용해야 하나요? ActiveLink 만드는데 usePathname 으로는 안되나요?
안녕하세요 수업 시작하기 전에 궁금한 점이 있어서요. 앞쪽은 html, css , js 수업영상들이 있고 뒤쪽부터 리액트 시작이던데, 혹시 리액트 수업 영상 부터 시작을 하면 세팅이라던가 수업하면서 앞쪽을 수강하지 않아서 생기는 차이가 있을까요? 그리고 에디터는 vscode 말고 다른거를 써도 문제가 없을까요? 또, 저는 웹스톰을 쓰고 있는데 웹스톰에서는 plugins를 따로 설치 않해도 될까요?
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) 예 [질문 내용] 여기에 질문 내용을 남겨주세요. 안녕하세요 영한님. 이번 강의도 잘 수강한 학생입니다. 강의 내용과 공식 문서를 참고하며 간단한 게시글 리포지토리를 만들어보고자, 아래처럼 작성했었습니다. public interface BoardRepository { Long save(final Board board); ... } @Repository @RequiredArgsConstructor public class BoardJpaRepositoryImpl implements BoardRepository { private final BoardJpaRepository boardJpaRepository; ... } public interface BoardJpaRepository extends JpaRepository<Board, Long> { } 강의 내용대로 스프링 데이터 JPA인 BoardJpaRepository에 Impl을 붙인 BoardJpaRepositoryImpl을 만들었는데, 아래와 같이 순환 참조 문제가 발생했습니다. The dependencies of some of the beans in the application context form a cycle: boardController defined in file [/Users/hyunjoonchoi/Desktop/2024/2024-mju-mentoring/build/classes/java/main/com/mju/mentoring/board/controller/BoardController.class] ↓ boardService defined in file [/Users/hyunjoonchoi/Desktop/2024/2024-mju-mentoring/build/classes/java/main/com/mju/mentoring/board/service/BoardService.class] ┌─────┐ | boardJpaRepositoryImpl defined in file [/..../build/classes/java/main/com/mju/mentoring/board/infrastructure/BoardJpaRepositoryImpl.class] └─────┘ Action: Relying upon circular references is discouraged and they are prohibited by default. Update your application to remove the dependency cycle between beans. As a last resort, it may be possible to break the cycle automatically by setting spring.main.allow-circular-references to true. 그런데 이름을 BoardRepositoryImpl, JpaBoardRepositoryImpl 등 다른 이름으로 하니까 순환 참조 문제가 해결되더라구요 이에 대해서 다른 외국 개발자 분들도 이슈로 올리고, 그것들을 찾아봤으나 메인테이너 분이 @Lazy를 사용하거나 ObjectProvider를 사용해야 한다고 말씀해주시는 것 밖에 없었습니다. 공식 문서 ( https://docs.spring.io/spring-data/jpa/docs/1.5.0.RELEASE/reference/html/repositories.html#repositories.create-instances )를 보면 스프링 데이터 JPA + Impl로 할 시 자동으로 스프링 데이터 JPA의 구현체로 인식한다고 되어 있는 것 같은데, 이런 순환 참조 이슈가 발생한 원인을 알 수 있을까요? 이를 해결해보고자 스프링 데이터 JPA 레포지토리에 직접 이슈로 남기고 ( https://github.com/spring-projects/spring-data-jpa/issues/3320 ) 답변을 받았긴 했습니다만, 여전히 다른 이야기를 하시는 것 같아 영한 님께도 문의드리고 싶습니다!
강좌 잘 따라가고 마지막 부분에서 서버 띄우기 위해 터미널을 하나 더 열고 명령어를 적었습니다. 해당에러 node_module파일에 msw에 내부 파일에서 Response를 참지하지 못한다는 에러가 있어서 .. 브런치를 다시 지우고 작업도해보고 구글링과 공식문서를 보았는데도 문제의 해결점을 찾지 못하던 중에 12시간 전에 올라온 저와 동일한 문제를 가진 사람을 발견했어요 - ! https://www.reddit.com/r/nextjs/comments/1997wb3/msw_2x_and_nextjs_14_has_anyone_successfully/ 하지만, 이 분도 해결하지 못한거 같더라구요ㅠㅠ 현재 저의 msw버전은 msw 버전 낮춰서 작업을 하는 법이 해결방법인가요 ? 또 하나의 작은 질문입니다만, 현재 nodejs의 임시방편적인 코드를 사용하고 있는데 서버 관련 코드를 setupServer를 사용해도 괜찮을까요 ?
