캐싱 옵션이 적용되질않아요.
미해결
한 입 크기로 잘라먹는 Next.js
어떠한 옵션을 적용해도 콘솔과 같은데 뭐가 잘못되었을까요? 새로고침이나, 로고를 눌러서 인덱스 파일에 가도 똑같은 로그만 나타납니다.
- react
- typescript
- next.js
172만명의 커뮤니티!! 함께 토론해봐요.
미해결
한 입 크기로 잘라먹는 Next.js
어떠한 옵션을 적용해도 콘솔과 같은데 뭐가 잘못되었을까요? 새로고침이나, 로고를 눌러서 인덱스 파일에 가도 똑같은 로그만 나타납니다.
해결됨
스프링부트로 직접 만들면서 배우는 대규모 시스템 설계 - 게시판
안녕하세요 쿠케님 강의 잘 듣고 있습니다. 너무 좋아서 팀원들한테도 전파했을 정도입니다. 다들 구매예정이시라고 하네용 강의 듣는 도중 궁금점이 생겼는데 PathVariable과 RequestParam의 가장 큰 차이점은 단 하나의 유일한 자원의 식별자를 url 경로에서 표현하는가의 여부로 배웠습니다. 그래서 저는 articleId의 경우는 PatVariable로 남겨두었습니다. 이 두가지를 구분하는 쿠케님의 기준이 있으실까용? 이 강의에서 테스트는 전부 JUnit이 아닌 다른 것들로 수행 중이신데요. 실제로 테스트 코드 작성하실때도 JUnit을 사용하지 않으시나요? 아니면 그냥 강의 진행 편의상 JUnit을 사용하지 않으신건가요? 감사합니다.
미해결
스프링 입문 - 코드로 배우는 스프링 부트, 웹 MVC, DB 접근 기술
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 강의 내용이랑 똑같이 다 따라쳤고 확인도 해봤는데 머 때문에 오류 뜨는지 모르겠어요 ㅠㅠ
미해결
실무 중심! FE 입문자를 위한 React
/*FunctionalComponent.jsx파일*/ import {useEffect,useState} from 'react'; function FunctionalComponent() { console.log('Function Beginning'); const [value, setValue] = useState(0); useEffect(() => { console.log('Function useEffect[]'); return () => { console.log('Function useEffect return[]'); } },[]); useEffect(() => { console.log('Function useEffect[value]'); return () => { console.log('Function useEffect return[value]'); } },[value]); console.log('Function End'); return ( <div> <h1>!FunctionalComponent</h1> <h1>value: {value}</h1> <button onClick={() => { setValue((state) => state + 1) }} > Increase value </button> </div> ); } export default FunctionalComponent /*App.jsx파일*/ import { useState } from 'react' import reactLogo from './assets/react.svg' import viteLogo from '/vite.svg' import './App.css' import axios from 'axios'; import FunctionalComponent from './practice/FunctionalComponent' function App() { return ( <FunctionalComponent /> ) } export default App
해결됨
스프링부트로 직접 만들면서 배우는 대규모 시스템 설계 - 게시판
안녕하세요 강사님, 좋은 강의 잘 듣고 있습니다. 바쁘실텐데도 불구하고 답변해주셔서 감사합니다. 질문은 크게 2가지 입니다. 유니크 제약 조건 위반시 예외처리방법 like() 로직에선 article_id와 user_id로 유니크 제약 조건을 걸어서 한 명의 사용자가 중복 생성하는 것을 막고 있습니다. 이 유니크 제약 조건을 위반하여 발생하는 에러는 @ControllerAdvice에서 @ExceptionHandler(DataIntegrityViolationException.class) 로 시작하는 핸들러를 통해서 처리하는 것이 일반적인가요? 2.unlike()에서 한 명의 사용자가 삭제 중복요청시 발생하는 동시성 문제 @Transactional public void unlikePessimisticLock2(Long articleId, Long userId) { articleLikeRepository.findByArticleIdAndUserId(articleId, userId) .ifPresent(articleLike -> { articleLikeRepository.delete(articleLike); ArticleLikeCount articleLikeCount = articleLikeCountRepository.findLockedByArticleId(articleId).orElseThrow(); articleLikeCount.decrease(); }); } 한 명의 사용자가 "좋아요" 중복 생성 요청하는 것을 방어하는 로직이 있으니 "좋아요 해제" 중복 요청에 대한 고려에 대해서 생각해봤습니다. 이 로직에선 findLockedByArticleId 에서 베타락을 걸게 되어서 하나의 article에 대한 여러 사용자의 "좋아요 해제" 요청시의 동시성 문제를 방어하고 있습니다. 그런데 한 명의 사용자가 "좋아요 해제" 중복 요청 시에 ifPresent 구문을 통과하게 되어 articleLikeRepository.delete(articleLike);를 여러번 수행하게 됩니다. 여기서 delete는 멱등성이 보장되니 큰 문제 없이 넘어가겠지만 그 아래 count감소 로직은 해당 트랜잭션들이 베타락을 획득할 때마다 계속 수행되는 것이 아닌지 궁금합니다. 일단 ifPresent 구문 안으로만 들어오면 count감소는 무조건 일어나게 되니 문제가 생기는게 아닐까요? 그래서 ifPresent구문 전에 락을 걸기 위해 findByArticleIdAndUserId() 여기서 락획득이 이루어져야 하는건 아닌지 궁금합니다. 작성하다 보니 질문이 길어져서 죄송합니다.
미해결
김영한의 실전 자바 - 고급 1편, 멀티스레드와 동시성
예제 3번 코드를 보다 의문이 들어 질문드립니다. 코드를 보면, @Override public synchronized void put(String data) { // 버퍼가 가득 찬 경우, 빌 때까지 주기적으로 체크 while (queue.size() == max) { log("[put] 큐가 가득 참, 생산자 대기"); try { wait(); log("[put] 생산자 깨어남"); } catch (InterruptedException e) { throw new RuntimeException(e); } } queue.offer(data); log("[put] 생산자 데이터 저장, notify() 호출"); notify(); // WAIT -> BLOCKED } 에서 인터럽트 예외가 발생하면 밑의 notify() 코드가 호출이 되지 않습니다. 이 문제 상황에서 한 스레드라도 notify()문을 호출하지 않게되면 영원히 대기 중인 스레드가 생겨서 정상적인 프로그램 종료가 일어나지 않을 것 같습니다. 그래서 제 생각은 notify() 메서드를 finally문으로 감싸줘야 한다고 생각하는데 이게 맞는지 궁금합니다.
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
다대다 연관관계를 연결테이블을 추가해서 일대다, 다대일 관계로 풀어내야함. 강의 자료에 있는 위 말에 조금 혼동이 있어서 질문드립니다. 다대다 연관관게를 중간에 연결테이블을 두어서, 연결테이블을 기준으로 다대일 단방향 연관관계나, 다대일 양방향 연관관계로 하는것을 말하는것일까요? 아니면, 이전 앞선 강의에서 학습한 일대다 단방향 연관관계를 말씀하시는걸까요..? 강의에서는 중간 테이블을 기준으로 다대일 양방향 연관관계로 진행하신거 같은데, 강의자료에 있는 일대다 관계로 풀어냈다는 말의 의미가 무엇인지 혼동이 와서 질문드립니다..
미해결
자바 ORM 표준 JPA 프로그래밍 - 기본편
강의에서 다대다 연관관계 일때는, 중간에 엔티티를 하나 더 추가해서 일대다, 다대일 관계로 하는게 효율적이라고 말씀하셨습니다. 1. 그래서 MEMBER와 PRODUCT간에 다대다 관계인것을 중간에 ORDER를 추가해서 일대다, 다대일 관계로 해야하는거 같은데, 여기서 말씀하신 일대다 관계라는게, 앞선 강의에 있는 일대다 단방향 연관관계를 말하는것일까요?? MEMBER -> ORDER간에 일대다 단방향 연관관계를 말씀하시는것인지, 아니면 MEMBER <-> ORDER 간에 다대일 양방향 연관관계로 하는것을 말씀하시는것인지 헷갈려서 질문드립니다.. 즉, 여기서 말하는 일대다 관계라는게 MEMBER에서 외래키를 관리하는 일대다 단방향 연관관계의 개념인것인지, 중간테이블 관점에서 다대일 관계를 말하는것인지 헷갈려서 질문드립니다.. 2. 다대다 연관관계일때는 중간에 엔티티를 두어, 중간 엔티티를 기준으로 다대일 단방향 연관관계나, 다대일 양방향 연관관계로 해야 하는것일까요??
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 기능상에 문제가 있는건 아니지만, 계속해서 아래의 에러가 발생합니다. 사용하고 있는 버전의 문제일까요? { "name": "react-todo-app", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/dom": "10.4.0", "@testing-library/jest-dom": "6.6.3", "@testing-library/react": "16.2.0", "@testing-library/user-event": "13.5.0", "react": "^19.0.0", "react-beautiful-dnd": "13.1.1", "react-dom": "^19.0.0", "react-scripts": "5.0.1", "web-vitals": "2.1.4" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "browserslist": { "production": [ ">0.2%", "not dead", "not op_mini all" ], "development": [ "last 1 chrome version", "last 1 firefox version", "last 1 safari version" ] }, "devDependencies": { "autoprefixer": "10.4.20", "postcss": "8.5.3", "tailwindcss": "3.4.17" } } Lists.js import React from 'react'; import List from './List.js' import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd'; const Lists = React.memo(({todoData, setTodoData}) => { // console.log('Lists Component') const handleEnd = (result) => { if(!result.destination) return; const newTodoData = Array.from(todoData); const [reorderedItem] = newTodoData.splice(result.source.index, 1); newTodoData.splice(result.destination.index, 0, reorderedItem); setTodoData(newTodoData); } return <div> <DragDropContext onDragEnd={handleEnd}> <Droppable droppableId='todo'> {(provided, snapshot) => ( <div ref={provided.innerRef} {...provided.droppableProps} > {(todoData ?? []).map((data, index) => ( <Draggable key={data.id} draggableId={data.id.toString()} index={index} > {(provided, snapshot) => ( <List key={data.id} id={data.id} title={data.title} completed={data.completed} provided={provided} snapshot={snapshot} todoData={todoData} setTodoData={setTodoData} /> )} </Draggable> ))} {provided.placeholder} </div> )} </Droppable> </DragDropContext> </div>; }) export default Lists; App.js import React, {useState} from 'react' import "./App.css" import Lists from './components/Lists' import Form from './components/Form' export default function App() { // console.log('App Component') const [todoData, setTodoData] = useState([ { id: 1, title: '운동하기', completed: false, }, { id: 2, title: '공부하기', completed: false, } ]) const [value, setValue] = useState("") return ( <div className="flex items-center justify-center w-screen h-screen bg-blue-100" > <div className='full p-6 m-4 bg-white rounded shadow md:w-3/4 md:max-w-lg lg:w-3/4 lg:max-w-lg'> <div className="flex justify-between mb-3"> <h1>할 일 목록</h1> </div> <Lists todoData={todoData} setTodoData={setTodoData} /> <Form value={value} setValue={setValue} setTodoData={setTodoData}/> </div> </div> ) }
해결됨
기초 탄탄! 독하게 시작하는 Java - Part 1 : 절차적 프로그래밍
안녕하세요? 자바를 입문하게된 컴공 학부생입니다. 다름이 아니라 cmd 글꼴 변경을 consolas로 하고 싶어 기본값을 consolas로 변경하였으나 변경이 되지 않습니다. 강사님 콘솔에서는 consolas로 출력되는 것 같아 질문드립니다.
미해결
실무 중심! FE 입문자를 위한 React
useEffect의 dependency array에 배열을 넣는 경우 "Maximum update depth exceeded." error가 발생하게 되는데, 이 경우는 어떻게 해야하나요? 예를 들어 아래와 같은 상황이라고 가정하겠습니다. 화면에는 테이블 1개만 존재한다. 데이터는 unknown[] 형태이다. 다른 조건에 의해 데이터의 갯수가 달라지는 경우에만 다시 렌더링한다. 코드로 예시를 들면 아래와 같습니다. const [items, setItems] = useState<unknown[]>([]); useEffect(() => void, [items]) 답변주시면 감사합니다.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 강사님 해당 오류는 최신버전에서 발생하는건가요?! Error: Route "/search" used searchParams.q . searchParams should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at Page (src/app/(with-searchbar)/search/page.tsx:12:32) 10 | return ( 11 | <div> > 12 | Search 페이지 : {searchParams.q} | ^ 13 | <ClientComponent> 14 | <></> 15 | </ClientComponent> import ClientComponent from "@/components/client-component"; export default function Page({ searchParams, }: { searchParams: { q?: string; } }) { return ( <div> Search 페이지 : {searchParams.q} <ClientComponent> <></> </ClientComponent> </div> ) }
미해결
실전! 스프링 데이터 JPA
[질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 궁금한게 있어서 질문합니다. Projection관련인데요. 제가 이해하기로는 new 오퍼레이션을 이용해서 dto에 생성자로 데이터를 담는 방식에서 진화한 방식이라고 생각되는데, 그렇게 이해는게 맞는지 궁금합니다. interface로 proejction을 사용하면 get()함수를 통해 데이터를 꺼내오는 방식이고 class를 사용하면 new 오페레이션을 사용하는 방법과 똑같이 생성자를 이용하는거 같은데, 대신 필드의 이름과 엔터티의 이름이 같던가, 같지 않다면 @Query를 이용해 alias로 맞춰주던가 하면 되는걸까요?? 또한, 이렇게 Projection을 사용해서 데이터를 가져왔을대, interface던 class던 컨트롤러에서 데이터를 프론트로 넘길때 해당 객체를 사용해도 되는건가요? 아니면 따로 또 dto를 만들어서 담은 후에 내보내야 되는건가요??
해결됨
(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>
영상 10분쯤 나오는 파트에서 Main.jsx와 App.jsx 코드를 아예 똑같이 썼는데도 사이트에 연결할 수 없다고 뜹니다 어떻게 해야 하나요 vsc에서는 Main이 선언은 되었지만 해당 값이 읽히지는 않았습니다 ts(6133)이라고 뜯니다
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Emotion Diary</title> </head> <body> <div id="root"></div> <script type="module" src="/src/main.jsx"></script> </body> </html> New.jsx import Header from "../components/Header"; import Button from "../components/Button"; import Editor from "../components/Editor"; import { useNavigate } from "react-router-dom"; import { useContext, useEffect } from "react"; import {DiaryDispatchContext} from "../App"; import usePageTitle from "../hooks/usePageTitle"; const New=()=>{ const{onCreate}=useContext(DiaryDispatchContext); const nav=useNavigate(); usePageTitle(`${useParams.id}번 일기 수정`); const onSubmit=(input)=>{ onCreate( input.createdDate.getTime(), input.emotionId, input.content ); nav('/',{replace: true}); }; return ( <div> <Header title={"write new diary"} leftChild={<Button onClick={()=>nav(-1)} text={"< back"}/>} /> <Editor onSubmit={onSubmit}/> </div> ); }; export default New; usePageTitle.jsx import { useEffect } from "react"; const usePageTitle=(title)=>{ useEffect(()=>{ const $title=document.getElementByTagName("title")[0]; $title.innerText=title; },[title]); }; export default usePageTitle; 이전 과정까지는 문제없었는데 12.18에 있는 새일기 쓰기 페이지에 들어왔을 때 페이지에 아무것도 뜨지 않는 문제가 발생하는데 어떤게 문제일까요
해결됨
(2026 최신!) 일주일만에 합격하는 정보처리기사 실기
문자길이값에 Hello, world! 13이라하셨는데 0부터 세는게 아니고 1부터 세는 건가요? 값구할때 0부터 시작이라고 한것같은데 문자길이에선 다른가요?
미해결
처음 만난 리액트(React)
안녕하세요 감사하게도 강의 잘 듣고있습니다. 혹시 실습한 코드를 받을 수 있는 git 있을까요? 개발환경 버전이 달라서 그런지 챕터6하는데 원치않게 동작하는게 있어서요
미해결
코드로 배우는 React 19 with 스프링부트 API서버
DTO와 인증 서비스 2분 33초에서 35초 사이에 코드가 갑자기 생기는데요. 혹시 어떤 단축키 눌른건지 알 수 있을까요? Alt + Insert 눌러도 super까지 포함된 메소드는 나오지 않아서요. public MemberDTO(String email, String pw, String nickname, boolean social, List<String> roleNames) { super( email, pw, roleNames.stream().map(str -> new SimpleGrantedAuthority("ROLE_"+str)).collect(Collectors.toList())); this.email = email; this.pw = pw; this.nickname = nickname; this.social = social; this.roleNames = roleNames; }
미해결
코드로 배우는 React 19 with 스프링부트 API서버
서비스계층과 컨트롤러(3)-상품수정 5분 42초에서 uuid값은 화면쪽에서 처리되면서 붙는다는게 무슨 의미인지 알 수 있을까요? @Override public void modify(ProductDTO productDTO) { //step1 read Optional<Product> result = productRepository.findById(productDTO.getPno()); Product product = result.orElseThrow(); //change pname, pdesc, price product.changeName(productDTO.getPname()); product.changeDesc(productDTO.getPdesc()); product.changePrice(productDTO.getPrice()); product.changeKeyword(product.getKeyword()); //upload File -- clear first 내용이 있을 수도 있기 때문에. product.clearList(); List<String> uploadFileNames = productDTO.getUploadFileNames(); if(uploadFileNames != null && uploadFileNames.size() > 0 ){ uploadFileNames.stream().forEach(uploadName -> { product.addImageString(uploadName); }); } productRepository.save(product); } CustomFileUtil에서 saveFiles메소드에서 List<String> uploadNames = new ArrayList<>(); 배열을 선언하고 ProductServiceImp에서는 product.clearList();로 있던 배열에서 내용을 지우면서 사용하는데요. CustomFileUtil클래스 에서 데이터 베이스 1행에 저장할 리스트 생성해주고 그 리스트를 수정하는 역할이 product.clearList(); 인가요?
미해결
Next + React Query로 SNS 서비스 만들기
라우터가 이동하면 상태가 초기화 됐던걸로 아는데, setCurrent는 왜 계속 유지가 되나요? 쉘로우 라우팅도 아닌데,,, 제가 잘못알고있나요?