묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

인강에 나온 자료 똑같이 보고 싶은데 혹시 있나요?

미해결

그림으로 배우는 자바, 파트1: 입문!

자료 관련 주소가 있을까요?

java

헌터마인드 2024-10-23T03:14:09.202Z 댓글 2 좋아요 0 조회수 184

안녕하세요, 아래 ISR에 대해서 질문드렸었는데, nextjs 에서 2가지 구현 방법이있다고 해서 두가지가 어떤 차이점이 있고 어떻게 활용하는게 좋을지 궁금해서 질문드립니다! 1번 방법 = fetch API 의 revlidate를 활용하여 ISR 구현 import ProductList from "@/component/ProductList"; import { getQueryClient } from "@/component/TanstackQueryOption"; import { getProducts } from "@/fetch/getProducts"; import { dehydrate, HydrationBoundary, QueryClient } from "@tanstack/react-query"; import Image from "next/image"; export default async function ProductPage () { const queryClient = getQueryClient(); await queryClient.prefetchQuery({ queryKey:['products'], queryFn: getProducts, }) return ( <> <section className='visual-sec'> <Image src="/visual.png" alt="visual" width={1920} height={300}/> </section> <section className="product-sec"> <h2>상품 리스트</h2> <HydrationBoundary state={dehydrate(queryClient)}> <ProductList /> </HydrationBoundary> </section> </> ) } import { isServer, QueryClient, defaultShouldDehydrateQuery, } from '@tanstack/react-query' function makeQueryClient() { return new QueryClient({ defaultOptions: { queries: { staleTime: 10 * 1000, }, dehydrate: { shouldDehydrateQuery: (query) => defaultShouldDehydrateQuery(query) || query.state.status === 'pending', }, }, }) } let browserQueryClient: QueryClient | undefined = undefined export function getQueryClient() { if (isServer) { return makeQueryClient() } else { if (!browserQueryClient) browserQueryClient = makeQueryClient() return browserQueryClient } } 'use client' import { getQueryClient } from '@/component/TanstackQueryOption'; import { QueryClientProvider, } from '@tanstack/react-query' import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import { ReactNode } from 'react' export default function TanstackQueryProvider({ children }: { children: ReactNode }) { const queryClient = getQueryClient() return ( <QueryClientProvider client={queryClient}> {children} <ReactQueryDevtools initialIsOpen={true} /> </QueryClientProvider> ) } export const getProducts = async () => { const res = await fetch(`http://localhost:9090/api/products`, { method: "GET", headers: { "Content-Type": "application/json", }, next: { revalidate: 10, } }); const data = await res.json(); const currentTime = new Date().toLocaleTimeString('ko-KR', { hour: '2-digit', minute: '2-digit', second: '2-digit', fractionalSecondDigits: 3, hour12: false, }); if (typeof window === "undefined") { console.log('fetch products', 'server', currentTime); console.table(data); } else { console.log('fetch products', 'client', currentTime); console.table(data); } if(!res.ok) { throw new Error("Failed to fetch products"); } return data; } 2번 방법 = export const revalidate 로 시간 설정 후 fetch로 받은 data 값을 바로 렌더링 시키기 import Product from "@/component/Product"; import styles from '@/component/ProductList.module.css'; import Image from "next/image"; export const revalidate = 10; export default async function Product2Page() { const data = await fetch('/api/products'); const products = await data.json(); console.log(revalidate, 'Product2Page'); return ( <> <section className='visual-sec'> <Image src="/visual.png" alt="visual" width={1920} height={300}/> </section> <section className="product-sec"> <h2>상품 리스트</h2> <div className={styles.productList}> {products.map((product: any) => ( <Product key={product.item_no} product={product} /> ))} </div> </section> </> ) } 2개다 ISR로 구현되며, 1번 방법은 Data Cache 캐싱 매커니즘을 활용하고, 2번 방법은 Full Router Cache 캐싱 매커니즘을 활용한다의 차이점으로 생각이 드는데, 이 외에 다른 차이점과 실제 개발을 하면서 선호되는 방식이 따로 있을까요? 해당 페이지만 보았을때는 2번 방법으로 해도 어차피 주기적으로 다시 생성해서 최신 데이터를 반영하면 복잡하게 react-query를 사용하고, Hydration을 하면서 데이터를 동기화할 필요가 있나 싶어서 어떻게 사용해야할지 감이 안잡히네여

react
next.js
react-query
next-auth
msw

밍끼 2024-10-23T02:57:27.087Z 댓글 1 좋아요 0 조회수 185

파사드 패턴에 대해 질문이 있습니다.

해결됨

떠먹여주는 객체지향 디자인 패턴 - by 얄코

안녕하세요 강의 잘 보고 있습니다. 파사드 패턴에 대해 질문이 있습니다. 얄코님이 올려주신 예시에선 다음과 같이 두 상황이 나온다고 이해했습니다. 다양한 서브 시스템을 파사드 클래스로 조합해 하나의 새로운 로직을 만듦. 여러 서브 시스템을 생성시키고 세부 로직을 파사드 클래스에 위임. 1번의 경우는 일종의 추상화로 이해하였으며, 2번의 경우 서브 시스템에 대한 의존성 주입을 파사드 클래스에 위임 및 세부적인 로직을 캡슐화하는데 의의를 두었다고 이해했습니다. 만약 의존성 주입은 자동으로 이루어지는 3-layer 아키텍쳐에서 파사드 패턴을 도입할 경우 이미 service 레이어에서 내부 로직에 대해 캡슐화가 되었으므로 다양한 서브시스템을 파사드 클래스로 조합하는 것(ex. 1번)에만 집중하면 될까요?

java
객체지향
디자인-패턴

이상민 2024-10-23T02:30:26.930Z 댓글 3 좋아요 0 조회수 493

dispatch(logoutUser()) 실행시 dispatch(authuser())도 함께 실행되는 문제

미해결

따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

dispatch(logoutUser()) 실행시 dispatch(authuser())도 함께 실행되는 문제가 발생하고 있는데 원인을 잘 모르겠습니다.

react
redux
node.js
웹앱
mongodb

문주영 2024-10-23T01:49:31.894Z 댓글 2 좋아요 0 조회수 256

에러서 요렇게만 해보세요

미해결

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

npm -v , node -v 로 버전 확인 후 package.json의 engine에서 node, npm 버전 수정 파이썬을 설치. - 설치시 ADD PATH 인가에 체크 packge.json > dependencies에서 bcrypt 삭제 npm install 설치 후 bcryptjs 추가 설치 npm install bcryptjs --save

react
node.js
웹앱
mongodb
express

lanterlt 2024-10-23T00:33:37.500Z 댓글 1 좋아요 0 조회수 266

@Transactional에 대해서 궁금합니다.

미해결

실전! 스프링 데이터 JPA

이전에 공부할 때 엔티티매니저에서 트랜잭션을 가져야 로직이 수행된다는 것을 알고 있었습니다. 그런데 이전에 JPA활용2편에 @Transactional을 따로 붙혀주지 않았는데 로직이 실행된걸로 기억하는데 @Service나 @Repository에 의해서 자동으로 트랜잭션이 걸리는 건가요?

java
spring
spring-boot
jpa

kongminoo 2024-10-22T15:49:28.348Z 댓글 1 좋아요 0 조회수 136

git 파일에 있는 git 프로젝트는 뭔가요?

해결됨

코딩은 실전이다! - Git알못을 위한 깃린이코스(Git, Github 실습위주)

git파일에 git프로젝트를 넣어놓는다고 하셨는데 git프로젝트가 그냥 평소에 진행하는 프로젝트 말씀하시는거 맞나요?

git
github
버전관리시스템

힘을내자 2024-10-22T14:35:26.793Z 댓글 2 좋아요 0 조회수 249

동등 연산자 (==) 객체 비교 질문

미해결

김영한의 실전 자바 - 중급 1편

안녕하세요, 다름이 아니라 동등연산자에서 객체비교중 의문이 있어 질문드립니다. 아래 이미지에서 다른 객체 인스턴스 끼리는 동등연산 자체가 컴파일 에러나는데 이유가 무엇인가요? 동작은 해야 정상이 아닌가 싶은데,,, 다형적 참조가 가능한 객체끼리만 가능한가요?

java
객체지향

트릴 2024-10-22T13:42:35.354Z 댓글 1 좋아요 0 조회수 160

코틀린 컴파일에 대해서

미해결

더 자바, 코드를 조작하는 다양한 방법

자바, jvm, jdk 그리고 jre 강의에서 kotlinc 명령어로 .kt 파일을 컴파일하시는걸 봤는데요, 코틀린 컴파일러는 jdk에 포함되어 있는 것이 아니고 따로 설치해야 하는게 맞을까요? jre는 java의 실행환경을 제공하고, jdk는 개발 도구 키트를 제공해서 java를 컴파일하는 javac 등의 명령어? 툴?은 jdk에 포함되어 있다고 강의 교안에 적혀있는데 그럼 코틀린의 컴파일러는 추가적으로 설치가 필요한지, 아니면 뭔가 방법이 있는지 궁금합니다. 우선 컴파일하면 바이트 코드가 되기 때문에 런타임에 필요한 라이브러리만 포함하여 패키징하면 jre에서 실행할 수 있다는 것은 이해했습니다!

java
kotlin
jdk
jvm

이찬미 2024-10-22T08:50:46.186Z 댓글 1 좋아요 0 조회수 257

직접 구현하는 배열 리스트1- 시작의 MyArrayListV1 구현 질문이요

미해결

김영한의 실전 자바 - 중급 2편

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 직접 구현하는 배열 리스트1- 시작의 MyArrayListV1 구현문제를 예외 처리하고 싶은데 아무리 해도 안돼는데 해결책좀 try { list.add("f"); System.out.println(list); } catch (ArrayIndexOutOfBoundsException e) { System.out.println("배열의 범위를 벗어났습니다"); System.out.println("예외 발생 위치: " + e.getMessage()); e.printStackTrace(System.out); } 그리고 아래 MyArrayListV1에 이렇게 작성하면 되긴 돼는데 저는 유지보수를 위해서 try~catch를 하고 싶거든요. 그래서이렇게 질문 남겨요 public void add(Object e) { if (size >= elementData.length) { // 배열이 가득 찼는지 체크 throw new ArrayIndexOutOfBoundsException("용량을 초과했습니다. 현재 크기: " + size + ", 최대 용량: " + elementData.length); } elementData[size] = e; size++; }

java
객체지향
코딩-테스트
알고리즘

justcoin 2024-10-22T08:30:04.629Z 댓글 1 좋아요 0 조회수 138

트랜잭션 질문

미해결

실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화

public class OrderApiController { @GetMapping("/api/v1/orders") public List<Order> orderV1() { List<Order> all = orderRepository.findAllByString(new OrderSearch()); for (Order order : all) { order.getMember().getName(); order.getDelivery().getAddress(); List<OrderItem> orderItems = order.getOrderItems(); orderItems.forEach(o -> o.getItem().getName()); } return all; } } public class OrderRepository{ public List<Order> findAllByString(OrderSearch orderSearch) { String jpql = "select o from Order o join o.member m"; boolean isFirstCondition = true; //주문 상태 검색 if (orderSearch.getOrderStatus() != null) { if (isFirstCondition) { jpql += " where"; isFirstCondition = false; } else { jpql += " and"; } jpql += " o.status = :status"; } ... 트랜잭션을 따로 붙히지 않았는데 상관없는건가요? List<Order> all = orderRepository.findAllByString(new OrderSearch()); 이 때 연관관계매핑되어 있는 객체들은 지연로딩에 의해 프록시로 존재하고 for (Order order : all) { order.getMember().getName(); order.getDelivery().getAddress(); List<OrderItem> orderItems = order.getOrderItems(); orderItems.forEach(o -> o.getItem().getName()); } 이 때 강제호출 되어서 쿼리가 나가는 게 맞나요? orderRepository.findAllByString에서 repository에서 작업이 마쳐서 트랜잭션이 커밋되어서 영속성 컨텍스트에는 아무값이 없을 거 같은데 컨트롤러에서 리턴하기 전까지 하나의 트랜잭션 안에서 작동이 이뤄지는 건가요? 트랜잭션이 언제 시작하고 언제 종료되는 지 궁금합니다

java
spring
spring-boot
jpa

kongminoo 2024-10-22T08:05:25.698Z 댓글 2 좋아요 0 조회수 139

delegate, emit 필요한 이유

미해결

[React 1부] 만들고 비교하며 학습하는 React

안녕하세요. delegate와 emit 함수의 필요성이 잘 와닿지 않는데, 왜 필요한걸까요?

react
mvc

박호정 2024-10-22T07:38:19.931Z 댓글 2 좋아요 0 조회수 226

new HashMap 관련한 import 문제

미해결

스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술

[질문 내용] 코드에서 private static Map<Long, Member> store = new HashMap<>(); 부분이 있는데요.. 중간에 코딩시에 HashMap 부분에 빨간줄이 그어져있어서 뭔가 문제지 했는데 나중에 코드를 보니까 import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Optional; 처음 작성시엔 위의 코드로 import 가 되어있었는데 동영상 후반에 보니까 아래 코드로 변경되어져 있었습니다. import java.util.*; 위 import 부분을 강의영상에서 변경된 부분을 못찾았는데 어떠한 이유로 그렇게 변경된건지 알고 싶습니다.

java
spring
mvc
spring-boot

우대희 2024-10-22T07:02:13.837Z 댓글 2 좋아요 -1 조회수 258

antd Menu 질문

미해결

따라하며 배우는 노드, 리액트 시리즈 - 영화 사이트 만들기

안녕하세요 강사님 혹시 메뉴가 한개만 있는데도 불구하고 "..." 이라는 메뉴 아래에 "나의 favorite" 으로 생겼습니다. 굳이 "..." 라는 메뉴 아래에 "나의favorite"이 생기지 않고, "Home" 오른쪽에 "나의 favorite" 을 바로 생성하고 싶은데, 이런경우 어떻게 해결 하면 될까요? [NavBar] [NavBar] [NavBar.js] import React, { useState } from 'react'; import LeftMenu from './Sections/LeftMenu'; import RightMenu from './Sections/RightMenu'; import { Drawer, Button } from 'antd'; import Icon from '@ant-design/icons'; import './Sections/Navbar.css'; function NavBar() { const [visible, setVisible] = useState(false) const showDrawer = () => { setVisible(true) }; const onClose = () => { setVisible(false) }; return ( <nav className="menu" style={{ position: 'fixed', zIndex: 5, width: '100%' }}> <div className="menu__logo"> <a href="/">Logo</a> </div> <div className="menu__container"> <div className="menu_left"> <LeftMenu mode="horizontal" /> </div> <div className="menu_rigth"> <RightMenu mode="horizontal" /> </div> <Button className="menu__mobile-button" type="primary" onClick={showDrawer} > <Icon type="align-right" /> </Button> <Drawer title="Basic Drawer" placement="right" className="menu_drawer" closable={false} onClose={onClose} visible={visible} > <LeftMenu mode="inline" /> <RightMenu mode="inline" /> </Drawer> </div> </nav> ) } export default NavBar [LeftMenu.js] import React from 'react'; import { Menu } from 'antd'; function LeftMenu(props) { return ( <Menu mode={props.mode}> <Menu.Item key="mail"> <a href="/">Home</a> </Menu.Item> <Menu.Item key="favorite"> <a href="/favorite">나의 Favorite</a> </Menu.Item> </Menu> ) } export default LeftMenu

react
node.js
웹앱
mongodb
express

iokl3319 2024-10-22T05:42:44.907Z 댓글 1 좋아요 0 조회수 306

findAllByString() 실행 시 총 쿼리 7번 날아갑니다.

해결됨

실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화

학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 이전 질문 내역에서 하이버네이트6 최적화 문제라는 답변을 봤는데.. 아직 패치가 안된건지 2024 년에도 총 7번 쿼리날아가네요. 디버깅 해보니 address = order.getDelivery().getAddress(); // LAZY 초기화 이 부분에서 select d1_0.delivery_id, d1_0.city, d1_0.street, d1_0.zipcode, d1_0.status from delivery d1_0 where d1_0.delivery_id=? 2024-10-22T14:07:35.134+09:00 DEBUG 6578 --- [nio-8080-exec-1] org.hibernate.SQL : select o1_0.order_id, o1_0.delivery_id, o1_0.member_id, o1_0.order_date, o1_0.status from orders o1_0 where o1_0.delivery_id=? 이렇게 두번 쿼리가 실행되네요.. 그래서 List<Order> all = orderRepository.findAllByString(new OrderSearch()); 여기서 쿼리 한번 name = order.getMember().getName(); // LAZY 초기화 여기서 쿼리 한번 address = order.getDelivery().getAddress(); // LAZY 초기화 여기서 쿼리 두번 주문 리스트가 2개 있으므로 1 + 2 * (1 + 2) = 7 번 실행됩니다. 궁금한 점은 select o1_0.order_id, o1_0.delivery_id, o1_0.member_id, o1_0.order_date, o1_0.status from orders o1_0 where o1_0.delivery_id=? 이 쿼리는 왜 추가적으로 실행되는지 모르겠습니다.

java
spring
spring-boot
jpa

ewgregerg c 2024-10-22T05:14:52.819Z 댓글 2 좋아요 0 조회수 268

프로젝트의 구조가 궁금합니다

미해결

코드로 배우는 React 19 with 스프링부트 API서버

백엔드는 spring 에 내장 톰캣이 서버이고 프론트엔드의 서버는 node js인가요? 그렇다면 aws에다가 백엔드 프론트 엔드 따로 서버를 구축하는게 맞는 방법인가요??

react
spring-boot
jpa
jwt
redux-toolkit

김우철 2024-10-22T05:14:25.569Z 댓글 2 좋아요 0 조회수 196

react에서 modal & portal 사용시 에는 어떻게 작성해야될까요

해결됨

실무에 바로 적용하는 스토리북과 UI 테스트

개요 react-modal 라이브러리를 사용하고 있다가 Storybook에 등록하여 관리하고 싶어서 작성하는데 아래와 같이 컴포넌트를 작성했다가 스토리북 화면에서에러가 발생하였습니다. 강사님께서는 Modal의 경우 어떤식으로 해서 Storybook을 동작가능하게 하셨는지 궁금합니다. 현재는 Modal.setAppElement('body')로 처리하여 임시로 실행되게 하였으나, 더 좋은 다른 방법이 있을지 질문드립니다. import Modal from 'react-modal'; Modal.setAppElement('#root'); // 모달이 열린 상태에서도 접근성을 보장하기 위해 필요합니다. const BaseModal: React.FC<BaseModalProps> = ({ Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.

react
typescript
tailwind-css
storybook
ui-testing
modal
portal
react-modal
root

배찬 2024-10-22T04:30:51.738Z 댓글 3 좋아요 0 조회수 408

prisma db push 소요 시간

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요! 이번에 새롭게 강의를 듣기 시작하게 된 sunny라고 합니다! 학습용 DB를 설정하고 있는 상황인데됴! 말씀주신대로 code를 다운로드 받고, 사용 폴더로 이동시킨 후 npm i , Supabase 설정하여 .env 파일에 DATABASE_URL 변수까지 잘 설정해주었습니다. 이후 과정인 npx prisma db push 과정에서 소요시간이 너무 오래 걸려서.. 혹시 제가 확인해볼 수 있는 방법 혹은 예측되는 상황이 있으실까 하여 질문드리게 되었습니다!! ㅠㅠ 혹시 몰라 node_modules 폴더 삭제 후 재실행 했는데도 동일한 현상이 발생하고 있는데.. 제가 확인해볼 수 있는 부분들이 있을까요?? 감사합니다!

react
typescript
next.js

Sunny Sideup 2024-10-22T00:22:02.759Z 댓글 2 좋아요 0 조회수 161

진도가 100% 완료가 안됩니다.

미해결

따라하며 배우는 리액트 네이티브 기초

안녕하세요. 진도가 100% 완료가 안됩니다. 첨부드린 것처럼 마지막 강의가 . 으로 되어 있고 눌러봐도 영상 나오는 것도 없고 강의가 진행되는게 없습니다. 마지막 강의 완료가 안되서 진도율이 98%에서 멈춰있고 100%가 안되는거 같은데 확인 부탁드립니다. 다른 강의는 모두 수강했습니다.

react
react-native
expo

2024-10-21T23:51:06.791Z 댓글 1 좋아요 0 조회수 232

인텔리제이 설정 문제로 빌드가 안됩니다.

미해결

나도코딩의 자바 기본편 - 풀코스 (20시간)

수동으로 빌드하면 잘 실행되는데 인텔리제이의 빌드 기능을 사용하면 첨부한 사진처럼 찾을 수 없다고 뜹니다. 소스 경로와 컴파일 경로 설정 해주었고, configurations도 확인해봤는데 뭐가 문제인지 모르겠습니다. 아예 삭제하고 다시 프로젝트를 만들어도 계속 같은 에러가 발생하는데 뭐가 문제인걸까요??

java
객체지향

신은영 2024-10-21T23:25:04.818Z 댓글 3 좋아요 0 조회수 1002

인프런 TOP Writers

주간 인기글

🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
🚀 IT 공부는 했는데 왜 아직도 안 될까요? | AI와 함께 실무 중심 IT 모임 🤖 NOESIS
🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv
🚀 끝까지 만들어 본 적 있나요? | 실서비스 완성 + 수익 창출 모임 💰 catalyst collectiv