172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라먹는 Next.js
vercel 배포하고 2가지 궁금증이 생겼습니다. 배포를 마치고 한입 북스 페이지 사이트를 접속하는 거로 백엔드 서버 회수 방지할 수 있나요? 배포된 백엔드 서버 웹에서 환경변수로 지정한 DATABASE_URL 값이 안 보이는데 어떻게 API가 동작하는 건가요?
미해결
한 입 크기로 잘라먹는 Next.js
안녕하세요! 이정환 강사님. next 강의를 거의 다 수강해가는 것 같아서 배운걸 활용해 혼자 간단한 투두리스트를 구현해보고 있는데요. 새로고침 시에도 할일목록이 유지되도록 하기 위해 로컬스토리지에 저장된 목록을 가져오고 또 저장하는 로직을 작성하였더니 ReferenceError: localStorage is not defined 이와 같은 오류를 만나서 useEffect를 사용해서 아래와 같이 작성하였습니다. // useTodo 커스텀 훅 일부 const [todoList, setTodoList] = useState<Todo[]>([]); const [isLoading, setIsLoading] = useState(true); useEffect(() => { const storedTodos = getStoredTodoFromLocalStorage(); setTodoList(storedTodos); setIsLoading(false); }, []); useEffect(() => { if (todoList.length > 0) saveTodoToLocalStorage(todoList); }, [todoList]); // ToDoItemList.tsx export default function ToDoItemList({ isLoading, todoList, toggleTodoCompletion, }: ToDoItemListProps) { if (isLoading) { return <S.ToDoItemList>로딩중...</S.ToDoItemList>; } if (todoList.length === 0) return ( <S.ToDoItemList> <S.EmptyList>할일을 생성해보세요✨</S.EmptyList> </S.ToDoItemList> ); return ( <S.ToDoItemList> {todoList.map(todo => ( <ToDoItem key={todo.id} todo={todo} toggleCompletion={toggleTodoCompletion} /> ))} </S.ToDoItemList> ); } 처음엔 로딩상태를 만들지 않고 todolist.length가 0이면 "할일을 생성해보세요"가 보이고 아니면 할일 목록을 보여주도록 했습니다. 하지만 그렇게 하니까 할일 목록을 작성하고 새로고침을 누르면 "할일을 생성해보세요"가 잠깐 나타나고 기존에 작성한 할일 목록이 나타나더라구요... 그래서 로딩중을 추가했는데 이제는 이 투두리스트에 처음 접근한 사람도 아직 아무 데이터도 없는데 로딩중이 보이고 할일을 생성해보세요가 나타나게 되는 문제에 직면했습니다. 이러한 로직은 어떻게 다루어야 좋을까요?? 제가 의도했던 건 처음 투두리스트 작성하려는 유저에겐 "할일을 생성해보세요"가 바로 보이고, 할일을 작성하면 할일목록을, 새로고침을 해도 할일목록을 보여주기 이전에 작성한 투두리스트가 있는 유저에겐 할일 목록을 보여주고 새로고침을 해도 그대로 유지해서 보여주기 인데 어떻게 해결할 수 있을지 모르겠습니다... 🥲
해결됨
한 입 크기로 잘라먹는 Next.js
페이지 라우터의 경우 props를 통해서 데이터를 받을 수 있다고 하셨는데 index파일 부모컴포넌트가 아닌 하위 child 컴포넌트에서는 데이터를 불러올 수 없는 건가요?? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 정환님. SSR 개념 강의 이후 실습을 위해서 서버 세팅을 하는 과정 중 데이터베이스 스키마 설정하는 부분에서 진행이 되지 않아 문의드립니다. supabase DATABASE_URL 환경변수 설정 npx prisma db push 명령어 실행 스키마 설정이 진행되지 않음 [버전] prisma : 5.13.0 @prisma/client :5.13.0 Node.js : 20.11.1
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
promise 객체를 어떻게 사용하는건지 배웠는데요 콜백지옥을 해결하기 위해 탄생한건가요? promise 객체를 사용해서 비동기함수를 쓰면 얻는 장점이 무엇인가요? 결과적으로 얻는 이점에 대한 설명이 좀 부족하지 않나 싶고 궁금합니다
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 4분 45초에 ReactDom.create 이렇게 되어있는데 저의 경우 createRoot (document.g e 로 시작합니다. 구글에 찾아보니 17과 18의 차이라는데 https://velog.io/@citron03/React-18%EC%97%90%EC%84%9C-ReactDOM.render%EC%99%80-createRoot 그대로 진행해도 문제되지 않을까여 ? 감사합니다.
미해결
[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스
npx react-native init test --version 0.72.6 Expo 아니라면 이렇게 생성해야 하는 거 아닌지요?
미해결
스프링 기반 REST API 개발
스프링 부트 3버전에서의 실습 관련 업데이트는 진행하지않는건가요?
미해결
처음 만난 리액트(React)
import React, {useState, useEffect} from "react"; import useCounter from "./useCounter"; const MAX_CAPACITY = 10; //최대 카운트 function Accommodate(props){ const [isFull, setIsFull] = useState(false); const [count, increaseCount, decreaseCount] = useCounter(0); useEffect(() => { console.log("===========배열없음"); console.log("useEffect is Called"); console.log(`isFull : ${isFull}`); }); //의존성 배열 없음 useEffect(() => { setIsFull(count >= MAX_CAPACITY); console.log("===========배열있음"); console.log(`Current count value : ${count}`); }, [{count}]); //의존성 배열 있음 return ( <div style={{padding : 16}}> <p>{`총 ${count}명 수용했습니다`}</p> <button onClick={increaseCount} disabled={isFull}>입장</button> <button onClick={decreaseCount}>퇴장</button> {isFull && <p style={{color:"red"}}>정원이 가득찼습니다.</p>} </div> ); } export default Accommodate; import React, { useState } from "react"; //custom Hook //초기 카운트 값을 파라미터로 받아서 카운트라는 이름의 //state를 생성하여 값을 제공하고 증감을 편리하게 할 수 있도록 하는 함수 function useCounter(initialValue){ const [count, setCount] = useState(initialValue); const increaseCount = () => setCount((count) => count+1); const decreaseCount = () => setCount((count) => Math.max(count-1,0)); return [count, increaseCount, decreaseCount]; } export default useCounter; import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './chapter03_jsx/Library'; //컴포넌트 추가 import Clock from './chapter04_elements/Clock'; import CommentList from './chapter05_component_props/CommentList'; import NotificationList from './chapter06_state/NotificationList'; import Accommodate from './chapter07_hook/Accommodate'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( //<React.StrictMode> <Accommodate /> //</React.StrictMode> ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); 위와 같이 Accomodate.jsx를 작성했습니다만 정원을 다 채웠을 경우 배열 있음이 한번 더 출력되는 현상이 나왔습니다. 의존성 배열이 있는 부분의 ,{count}만 넣으면 오류 워닝이 떠서 배열 취급하기 위해 []를 추가했습니다. []를 빼고 실행했을 경우 최대 카운트가 먹히지 않아 무한정으로 들어갑니다. 제가 뭔가 잘못 한 걸까요?
해결됨
Next.js 시작하기
Image 컴포넌트에 css 모듈 방식으로 width와 height 값을 설정하면 width, height 속성을 빼도 되는 줄 알았는데 빼보니까 width 속성이 필요하다고 에러가 나네요. Image 컴포넌트는 무조건 크기를 지정해서 사용해야하나봅니다. .item { display: inline-block; width: 300px; height: 300px; margin: 12px; } .img { width: 300px; height: 250px; } import axios from 'axios'; import Image from 'next/image'; import { useEffect, useState } from 'react'; import styles from './ProductList.module.css'; function ProductList() { const [products, setProducts] = useState(); useEffect(() => { axios.get('http://localhost:4000/products').then(response => { setProducts(response.data); }); }, []); return ( <ul> {products && products.map(product => ( <li key={product.id} className={styles.item}> <div> <Image src={product.imageUrl} alt={product.name} className={styles.img} /> </div> <div>{product.name}</div> </li> ))} </ul> ); } export default ProductList;
해결됨
스프링 시큐리티 OAuth2
학습질문과 전혀 관련없는 질문이라 죄송합니다. ㅠ 저와같이 할인쿠폰 만료일 지나신 분 쿠폰요청글을 보고 혹시나 저도 아직 가능한지 여쭙고 싶어서 혹시나 하는 마음에 글올립니다. oAuth하고 이전버전 시큐리티 강의 듣고 있습니다. 저도 메일을 늦게 확인하여서 쿠폰 만료일이 지났는데 받을수있을까요? 발급받았던 이메일 주소 는 laundryday@naver.com 입니다.. 좋은 하루 보내세요 감사합니다.
미해결
김영한의 실전 자바 - 중급 2편
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요. 1. 강의 내용과 관련된 질문을 남겨주세요. 2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요. (자주 하는 질문 링크: https://bit.ly/3fX6ygx) 3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요. (질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG) 질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요. ========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? 예 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? 예 3. 질문 잘하기 메뉴얼을 읽어보셨나요? 예) [질문 내용] 위의 코드에서 WildCardEx.printGenericV1(dogBox); 의 결과로 T = Animal{name='멍멍이', size=100} 이렇게 Animal에 오버라이딩한 toString의 형태가 출력되는지 궁금합니다...ㅠㅠ printGenericV1() 메서드에서는 box.get()을 사용하고 있지만, get() 메서드는 return 으로 그저 Dog 객체를 반환하는데 어떻게 오버라이딩 된 toString()의 형식으로 출력될 수 있는지 헷갈립니다ㅠ 기본적인 질문을 드려 죄송합니다...
해결됨
김영한의 실전 자바 - 고급 1편, 멀티스레드와 동시성
이해 확인에 대한 질문입니다. synchronized는 메서드에서 현재 getBalance()랑 withdraw()에서 선언되었는데, lock은 객체가 가지고있다고 이해하고있습니다. synchronized 메서드가 실행시 lock을 가지고 간다면 synchronized가 선언되지 않은 메서드(동일 클래스)는 자유롭게 실행이 가능한거고, 만약 synchronized withdraw가 스레드1에서 실행중이라면 스레드2가 synchronized getBalance()시 락을 획득할 수 없어서 대기해야하는 것이 맞나요? 2. 제가 스프링 DB2까지 강의를 듣고있는데, 스프링에서는 실제로 WAS의 스레드 풀에서 기본적으로 많은 스레드를 확보해두고 있는 것으로 알고있습니다. 해당 강의들에서 synchronized를 사용해본 기억은 없는 것 같아요. 기본적으로 스프링은 synchronized가 필요한 부분에 구현이 되어있는 걸까요?(싱글톤 빈에 대한 질문입니다!) 아니면 멀티스레드의 측면도 개발자가 직접 테스트하면서 최적화가 필요할까요?(아마 제 예상으로는 개발자가 직접하는 부분도, 스프링이 해주는 부분도 있을 것 같은데...) 스프링 고급편, 부트편이나 JPA 학습 시점에 알 수 있는 부분일까요?
해결됨
Kevin의 알기 쉬운 Spring Reactive Web Applications: Reactor 1부
안녕하세요 강사님 좋은 강의 감사드립니다. 해당 영상에서 예제 코드가 잘 이해가 되지 않아 질문 남깁니다. inner Sequence 내부에서 Context에 저장된 데이터를 외부에서 읽을 수 없다면 subscribe할 때 Context에 저장된 job은 inner 시퀀스에서 저장한 것이므로 읽을 수 없어야 한다고 생각이 들었습니다. 근데 실행 결과에서는 job에 대한 데이터를 잘 읽어오길래 혼란이 왔습니다. 제가 아직 리액티브 프로그래밍 동작 방식이 익숙치 않아서 그런데 확인해주시고 부연 설명해주시면 정말 감사드리겠습니다. @Slf4j public class ContextFeatureExample4 { public static void main(String[] args) throws InterruptedException { String key1 = "id"; Mono.just("Kevin") // flatMap 내부: inner Sequence .flatMap(name -> Mono.deferContextual(ctx -> Mono.just(ctx.get(key1) + ", " + name) .transformDeferredContextual((mono, innerCtx) -> mono.map(data -> data + ", " + innerCtx.get("job"))) .contextWrite(context -> context.put("job", "Software Engineer")) ) ) .publishOn(Schedulers.parallel()) .contextWrite(context -> context.put(key1, "itVillage")) .subscribe(data -> log.info("onNext = {}", data)); Thread.sleep(100L); } }
해결됨
한 입 크기로 잘라먹는 Next.js
서버 컴포넌트에서 클라이언트 컴포넌트에게 직렬화 되지 않는 Props는 전달 불가하다. 라고 하셨는데 서버에서 -> 서버로 함수 props를 넘겨주는 경우에는 괜찮은 걸까요?? RSC payload로 변환되는 과정에서 결국 그 함수 Props도 직렬화되는 거 아닌가요?? 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢 ) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
해결됨
한 입 크기로 잘라먹는 Next.js
강의에서 처음 build 할 때 searchbar 컴포넌트에서 suspense 에러가 나타나는데, 이 때 suspense를 하고 다시 build를 하면 인덱스 페이지는 dynamic page로 빌드 됩니다. dynamic page는 빌드 타임에서 생성하지 않는 것으로 전 강의에서 이해했습니다. 그런데 왜 빌드 타임에서 생성하지 않는 인덱스 페이지에서(dynamic) useSearchParams() 를 실행하는데 에러가 나타나는 건지 잘 모르겠습니다. 질문 드립니다
미해결
김영한의 실전 자바 - 기본편
========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예) [질문 내용] 현재 기본편 접근제어자를 학습하고 있는데 예제에서 이전에 공부했던 배열이나 생성자에 대한 내용에서 헤메이곤 하는데요.. 이런 상황에서 강의를 계속해서 수강하고 마지막까지 수강한 후에 다시 전체적으로 빠르게 수강하는것이 좋나요 아니면 헷갈릴때마다 다음 강의 보다는 전에 봤던 강의를 복습하는 방식이 좋을까요?
미해결
김영한의 실전 자바 - 기본편
========================================= [질문 템플릿] 1. 강의 내용과 관련된 질문인가요? (예/아니오) 2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오) 3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오) [질문 내용] 새로고참도 해보고 여러가지 다 해봤는데 이 강의만 재생이 안됩니다. 오류 확인 부탁드립니다.
미해결
Kevin의 알기 쉬운 Spring Reactive Web Applications: Reactor 1부
안녕하세요 강사님 좋은 강의 감사드립니다. 해당 영상에서 Schedulers.boundedElastic() 이 아닌, newBoundedElastic() 예제를 보여주셨습니다. newBoundedElastic 예제는 어느정도 이해가 되었는데 boundedElastic() 실행 결과가 궁금하여 예제에서의 newBoundedElastic()을 boundedElastic() 으로 바꿔 실행해봤습니다. 실행결과가 첨부한 사진처럼 나오던데 스레드 풀에 있던 스레드 6개가 사용된 것으로 보면 될까요? 확인해주시고 답변 주시면 감사드리겠습니다 !
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
Tailwind 꿀팁 알려주시면서 사전에 정의한 css들을 nextjs 프로젝트를 사용하면 tailwind를 지원하니 빌드할 때 스타일을 포함 안해도될 것 같다 라고 말씀하신 부분이 잘 이해가 안되어서 질문 드립니다...ㅜㅜ 어떻게 활용할 수 있다는 것인지 궁금합니다!
